/* ============================================================
   JAI CHAN SPA — HOMEPAGE COMPLETE CSS V3
   Theme: Jai Chan Spa Version 2.0

   Structure:
   1. Custom HTML  = Hero
   2. Shortcode    = [jai_chan_home_services]
   3. Custom HTML  = Story + Location

   jc2- = Static Homepage sections
   jch- = Dynamic ACF Featured Services
   ============================================================ */


/* ============================================================
   01. HOMEPAGE BRAND SETTINGS
   ============================================================ */

.jc2-home,
.jch-services {

    --jc-teak: #886044;
    --jc-rice: #F6F0E7;
    --jc-gold: #B7854A;
    --jc-tea: #6D4937;
    --jc-charcoal: #32312D;
    --jc-linen: #D1C7BE;

    --jc-cream: #F8F4EE;
    --jc-soft-cream: #F3EEE7;

    --jc-content: 1240px;

    font-family:
        "Merriweather",
        Georgia,
        serif;
}


/* ============================================================
   02. REMOVE DEFAULT WORDPRESS HOMEPAGE SPACING
   ============================================================ */

body:has(.jc2-home) .jc-page {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body:has(.jc2-home) .jc-page > .jc-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.jc2-home) .jc-page article {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide automatic WordPress page title */
body:has(.jc2-home) .jc-page article > h1:first-child {
    display: none !important;
}


/* Remove Gutenberg spacing between our 3 blocks */

body:has(.jc2-home) .wp-block-html,
body:has(.jc2-home) .wp-block-shortcode {
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ============================================================
   03. GENERAL HOMEPAGE SETTINGS
   ============================================================ */

.jc2-home {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background:
        var(--jc-cream);

    color:
        var(--jc-charcoal);
}

.jc2-home *,
.jc2-home *::before,
.jc2-home *::after,
.jch-services *,
.jch-services *::before,
.jch-services *::after {
    box-sizing: border-box;
}

.jc2-home img,
.jch-services img {
    display: block;
    max-width: 100%;
}

.jc2-home a,
.jch-services a {
    text-decoration: none;
}

.jc2-container {
    width:
        min(
            90%,
            var(--jc-content)
        );

    margin:
        0 auto;
}


/* ============================================================
   04. GENERAL KICKER
   ============================================================ */

.jc2-kicker,
.jch-kicker {

    margin-bottom:
        14px;

    color:
        var(--jc-gold);

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}

.jc2-kicker-light {
    color:
        var(--jc-rice);
}


/* ============================================================
   05. BUTTONS
   ============================================================ */

.jc2-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        150px;

    min-height:
        48px;

    padding:
        12px
        26px;

    border:
        1px solid
        var(--jc-gold);

    font-family:
        "Merriweather",
        Georgia,
        serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

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

.jc2-button:hover {
    transform:
        translateY(-2px);
}

.jc2-button-gold {

    background:
        var(--jc-gold);

    border-color:
        var(--jc-gold);

    color:
        #FFFFFF !important;
}

.jc2-button-gold:hover {

    background:
        var(--jc-tea);

    border-color:
        var(--jc-tea);
}


/* ============================================================
   06. HERO
   ============================================================ */

.jc2-hero {

    position:
        relative;

    width:
        100%;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(38, 25, 18, .68) 0%,
            rgba(38, 25, 18, .40) 40%,
            rgba(38, 25, 18, .08) 76%
        ),
        url(
            "https://jaichan.com/wp-content/uploads/2026/09/homepage_hero_2880-x-1400-2.061.png"
        );

    background-size:
        cover;

    background-position:
        center center;
}


/* Kept for HTML compatibility */
.jc2-hero-overlay {
    display:
        none;
}


.jc2-hero-inner {

    position:
        relative;

    z-index:
        2;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;
}


.jc2-hero-content {

    width:
        min(
            670px,
            70%
        );

    color:
        var(--jc-rice);
}


.jc2-hero h1 {

    margin:
        0
        0
        24px;

    color:
        var(--jc-rice);

    font-size:
        clamp(
            58px,
            7vw,
            102px
        );

    font-weight:
        400;

    line-height:
        .96;

    letter-spacing:
        -2px;

    text-transform:
        uppercase;
}


.jc2-small-line {

    width:
        58px;

    height:
        3px;

    margin:
        0
        0
        24px;

    background:
        var(--jc-gold);
}


.jc2-hero-subtitle {

    margin:
        0
        0
        36px;

    color:
        var(--jc-rice);

    font-size:
        13px;

    line-height:
        1.75;

    letter-spacing:
        5px;

    text-transform:
        uppercase;
}


/* ============================================================
   07. HERO DECORATIVE NOTE
   ============================================================ */

.jc2-hero-note {

    position:
        absolute;

    right:
        0;

    bottom:
        55px;

    padding-right:
        20px;

    border-right:
        2px solid
        rgba(246,240,231,.65);

    color:
        var(--jc-rice);

    text-align:
        right;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.8;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}

.jc2-hero-note span {
    display:
        block;
}


/* ============================================================
   08. DYNAMIC FEATURED SERVICES SECTION

   Comes from:
   [jai_chan_home_services]
   ============================================================ */

.jch-services {

    position:
        relative;

    width:
        100%;

    padding:
        82px
        0
        90px;

    overflow:
        hidden;

    background:
        var(--jc-cream);

    color:
        var(--jc-charcoal);
}


.jch-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            90%,
            var(--jc-content)
        );

    margin:
        0 auto;
}


/* ============================================================
   09. FEATURED SERVICES HEADING
   ============================================================ */

.jch-services-heading {

    max-width:
        820px;

    margin:
        0 auto
        50px;

    text-align:
        center;
}


.jch-services-heading h2 {

    margin:
        0
        0
        15px !important;

    color:
        var(--jc-charcoal);

    font-size:
        clamp(
            38px,
            4.3vw,
            60px
        ) !important;

    font-weight:
        400 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.02em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.jch-services-heading p {

    max-width:
        720px;

    margin:
        0 auto !important;

    color:
        var(--jc-tea);

    font-size:
        14px !important;

    line-height:
        1.8 !important;

    text-align:
        center;
}


/* ============================================================
   10. FEATURED SERVICE GRID
   ============================================================ */

.jch-services-grid {

    display:
        grid !important;

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

    gap:
        30px !important;

    align-items:
        stretch;
}


/* ============================================================
   11. FEATURED SERVICE CARD
   ============================================================ */

.jch-service-card {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent;

    text-align:
        center;
}


/* ============================================================
   12. FEATURED SERVICE IMAGE
   ============================================================ */

.jch-service-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        8 / 5;

    margin-bottom:
        21px;

    overflow:
        hidden;

    background:
        var(--jc-linen);
}


.jch-service-image img {

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover;

    transition:
        transform
        .9s
        cubic-bezier(.2,.7,.2,1);
}


.jch-service-card:hover
.jch-service-image img {

    transform:
        scale(1.035);
}


/* ============================================================
   13. FEATURED SERVICE CONTENT
   ============================================================ */

.jch-service-content {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-height:
        230px;
}


/* Hide category label on Homepage */

.jch-service-label {
    display:
        none;
}


/* ============================================================
   14. SERVICE NAME
   ============================================================ */

.jch-service-content h3 {

    margin:
        0
        0
        11px !important;

    color:
        var(--jc-charcoal);

    font-size:
        22px !important;

    font-weight:
        400 !important;

    line-height:
        1.3 !important;

    text-align:
        center;
}


.jch-service-content h3 a {

    color:
        inherit !important;

    text-decoration:
        none !important;
}


.jch-service-content h3 span {
    font:
        inherit;
}


/* ============================================================
   15. DURATION
   ============================================================ */

.jch-service-duration {

    margin-bottom:
        10px;

    color:
        var(--jc-teak);

    font-size:
        11px;

    letter-spacing:
        .4px;

    text-transform:
        uppercase;
}


/* ============================================================
   16. SHORT DESCRIPTION
   ============================================================ */

.jch-service-content p {

    max-width:
        320px;

    margin:
        0 auto
        21px !important;

    color:
        var(--jc-tea);

    font-size:
        13px !important;

    line-height:
        1.75 !important;

    text-align:
        center;
}


/* ============================================================
   HOMEPAGE — VIEW DETAILS BUTTON
   ============================================================ */

.jch-service-link {

    display: inline-flex;

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

    min-width: 180px;
    min-height: 52px;

    margin-top: auto;

    padding: 14px 30px;

    border: 1px solid #886044;

    background: #886044;

    color: #FFFFFF !important;

    font-size: 12px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    text-decoration: none !important;

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


/* HOVER */

.jch-service-link:hover {

    background: #6D4937;

    border-color: #6D4937;

    color: #FFFFFF !important;

    transform: translateY(-2px);
}


/* Remove old arrow if still present */

.jch-service-link span {
    display: none !important;
}

/* ============================================================
   18. SUBTLE BOTANICAL DECORATION
   ============================================================ */

.jch-services::before,
.jch-services::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        300px;

    border:
        1px solid
        var(--jc-gold);

    border-radius:
        80% 10% 80% 10%;

    opacity:
        .09;

    pointer-events:
        none;
}


.jch-services::before {

    left:
        -125px;

    top:
        65px;

    transform:
        rotate(35deg);
}


.jch-services::after {

    right:
        -125px;

    top:
        55px;

    transform:
        rotate(-35deg);
}


/* ============================================================
   19. STORY / WHY US
   ============================================================ */

.jc2-story {

    width:
        100%;

    background:
        var(--jc-soft-cream);
}


.jc2-story-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    min-height:
        590px;
}


/* ============================================================
   20. STORY IMAGE
   ============================================================ */

.jc2-story-image {

    position:
        relative;

    min-height:
        590px;

    overflow:
        hidden;
}


.jc2-story-image > img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        1s ease;
}


.jc2-story-image:hover > img {

    transform:
        scale(1.02);
}


/* Image caption */

.jc2-story-image-caption {

    position:
        absolute;

    left:
        35px;

    bottom:
        42px;

    padding-left:
        20px;

    border-left:
        2px solid
        rgba(255,255,255,.75);

    color:
        #FFFFFF;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.8;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.jc2-story-image-caption span {
    display:
        block;
}


/* ============================================================
   21. STORY CONTENT
   ============================================================ */

.jc2-story-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        70px
        max(8%,60px);

    background:
        var(--jc-cream);
}


.jc2-story-content h2 {

    margin:
        0
        0
        25px;

    color:
        var(--jc-charcoal);

    font-size:
        clamp(
            42px,
            4.5vw,
            68px
        );

    font-weight:
        400;

    line-height:
        1.08;

    text-transform:
        uppercase;
}


.jc2-story-content p {

    max-width:
        560px;

    margin:
        0
        0
        16px;

    color:
        var(--jc-tea);

    font-size:
        14px;

    line-height:
        1.9;
}


.jc2-story-content
.jc2-button {

    align-self:
        flex-start;

    margin-top:
        12px;
}


/* ============================================================
   22. LOCATION
   ============================================================ */

.jc2-location {

    width:
        100%;

    background:
        var(--jc-cream);
}


.jc2-location-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1.08fr;

    min-height:
        470px;
}


/* ============================================================
   23. LOCATION CONTENT
   ============================================================ */

.jc2-location-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        70px
        max(9%,60px);
}


.jc2-location-content h2 {

    margin:
        0
        0
        18px;

    color:
        var(--jc-charcoal);

    font-size:
        clamp(
            42px,
            4.3vw,
            66px
        );

    font-weight:
        400;

    line-height:
        1.1;

    text-transform:
        uppercase;
}


.jc2-location-content > p {

    max-width:
        520px;

    margin:
        0
        0
        20px;

    color:
        var(--jc-tea);

    font-size:
        14px;

    line-height:
        1.9;
}


/* Location details */

.jc2-location-details {

    margin-bottom:
        12px;

    padding:
        18px
        0;

    border-top:
        1px solid
        rgba(109,73,55,.18);

    border-bottom:
        1px solid
        rgba(109,73,55,.18);
}


.jc2-location-details p {

    margin:
        4px
        0;

    color:
        var(--jc-tea);

    font-size:
        13px;
}


.jc2-location-content
.jc2-button {

    align-self:
        flex-start;

    margin-top:
        15px;
}


/* ============================================================
   24. MAP
   ============================================================ */

.jc2-map {

    min-height:
        470px;

    background:
        #DDD5CB;
}


.jc2-map iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        470px;

    border:
        0;

    filter:
        grayscale(.25)
        sepia(.10)
        saturate(.75)
        contrast(.94);
}


/* ============================================================
   25. MINIMAL SPA MOTION
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

    .jc2-hero-content {

        animation:
            jcHomeFadeUp
            .9s
            cubic-bezier(.2,.7,.2,1)
            both;
    }


    .jc2-hero-note {

        animation:
            jcHomeFade
            1.2s
            .2s
            ease
            both;
    }


    @keyframes jcHomeFadeUp {

        from {
            opacity:
                0;

            transform:
                translateY(18px);
        }

        to {
            opacity:
                1;

            transform:
                translateY(0);
        }
    }


    @keyframes jcHomeFade {

        from {
            opacity:
                0;
        }

        to {
            opacity:
                1;
        }
    }
}


/* ============================================================
   26. TABLET
   ============================================================ */

@media
(max-width: 980px) {


    .jc2-hero,
    .jc2-hero-inner {

        min-height:
            620px;
    }


    .jch-services {

        padding:
            72px
            0;
    }


    .jch-services-grid {

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

        gap:
            38px
            25px !important;
    }


    .jc2-story-grid {

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


    .jc2-story-content {

        padding:
            55px
            40px;
    }


    .jc2-location-content {

        padding:
            55px
            40px;
    }

}


/* ============================================================
   27. MOBILE
   ============================================================ */

@media
(max-width: 680px) {


    /* HERO */

    .jc2-hero {

        min-height:
            570px;

        background-position:
            58%
            center;

        background-image:
            linear-gradient(
                0deg,
                rgba(38,25,18,.78) 0%,
                rgba(38,25,18,.45) 45%,
                rgba(38,25,18,.08) 100%
            ),
            url(
                "https://jaichan.com/wp-content/uploads/2026/09/homepage_hero_2880-x-1400-2.061.png"
            );
    }


    .jc2-hero-inner {

        min-height:
            570px;

        align-items:
            flex-end;

        padding-bottom:
            52px;
    }


    .jc2-hero-content {

        width:
            100%;
    }


    .jc2-hero h1 {

        font-size:
            clamp(
                46px,
                14vw,
                64px
            );
    }


    .jc2-hero-subtitle {

        font-size:
            11px;

        letter-spacing:
            3px;
    }


    .jc2-hero-note {
        display:
            none;
    }


    /* FEATURED SERVICES */

    .jch-services {

        padding:
            60px
            0
            65px;
    }


    .jch-container {

        width:
            88%;
    }


    .jch-services-heading {

        margin-bottom:
            36px;

        text-align:
            left;
    }


    .jch-services-heading h2,
    .jch-services-heading p {

        text-align:
            left;
    }


    .jch-services-grid {

        grid-template-columns:
            1fr !important;

        gap:
            46px !important;
    }


    .jch-service-card {

        text-align:
            left;
    }


    .jch-service-content {

        align-items:
            flex-start;

        min-height:
            0;
    }


    .jch-service-content h3,
    .jch-service-content p {

        text-align:
            left;
    }


    .jch-service-content p {

        margin-left:
            0 !important;

        margin-right:
            0 !important;
    }


    .jch-services::before,
    .jch-services::after {

        display:
            none;
    }


    /* STORY */

    .jc2-story-grid {

        grid-template-columns:
            1fr;
    }


    .jc2-story-image {

        min-height:
            430px;
    }


    .jc2-story-content {

        padding:
            58px
            7%;
    }


    /* LOCATION */

    .jc2-location-grid {

        grid-template-columns:
            1fr;
    }


    .jc2-location-content {

        padding:
            58px
            7%;
    }


    .jc2-map,
    .jc2-map iframe {

        min-height:
            390px;

        height:
            390px;
    }

}


/* ============================================================
   END — JAI CHAN HOMEPAGE V3
   ============================================================ */

/* LOCATION TEXT LINK */

.jc2-location-link {
    color: #886044 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.jc2-location-link:hover {
    color: #6D4937 !important;
    opacity: .8;
}

/* ============================================================
   JAI CHAN SPA — TREATMENTS PAGE
   Theme: Jai Chan Spa Version 2.0

   Designed for:
   BLOCK 1 = Custom HTML hero
   BLOCK 2 = [jai_chan_treatments] shortcode
   BLOCK 3 = Custom HTML About section

   Prefix: jct-
   ============================================================ */


/* ============================================================
   01. TREATMENT PAGE BRAND VARIABLES

   Uses the same CI as Jai Chan Spa Version 2.0:
   Teak Wood      #886044
   Jasmine Rice   #D1C7BE
   White          #FFFFFF
   Thai Linen     #BCAFA7
   Paddy          #DCC186
   Charcoal       #32312D
   Cement         #AAAAAA
   ============================================================ */

body:has(.jct-page) {

    --jct-teak: #886044;
    --jct-rice: #D1C7BE;
    --jct-white: #FFFFFF;
    --jct-linen: #BCAFA7;
    --jct-paddy: #DCC186;
    --jct-charcoal: #32312D;
    --jct-cement: #AAAAAA;

    /* Warm page backgrounds */
    --jct-cream: #F8F5F0;
    --jct-soft-cream: #F4EFE9;

    /* Content width */
    --jct-content: 1200px;

}


/* ============================================================
   02. REMOVE THE DEFAULT WORDPRESS PAGE LAYOUT

   Jai Chan Spa Version 2.0 normally adds:
   - 80px top padding
   - automatic H1 page title
   - 900px article width

   We remove these ONLY when .jct-page exists.
   ============================================================ */


/* Remove automatic WordPress "Treatment Page" heading */

body:has(.jct-page) .jc-page article > h1:first-child {
    display: none !important;
}


/* Remove standard-page top/bottom spacing */

body:has(.jct-page) .jc-page {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Allow custom page to become full width */

body:has(.jct-page) .jc-page > .jc-container {

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

}


/* Remove theme's normal 900px article restriction */

body:has(.jct-page) .jc-page article {

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

}


/*
Only remove Gutenberg spacing from the blocks
WE created.

This avoids affecting unrelated page elements.
*/

body:has(.jct-page) .wp-block-html,
body:has(.jct-page) .wp-block-shortcode {

    width: 100%;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

}


/* ============================================================
   03. BASIC TREATMENT PAGE SETTINGS
   ============================================================ */

.jct-page {

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--jct-cream);

    color: var(--jct-charcoal);

    font-family: var(--jc-brand);

}


.jct-page *,
.jct-page *::before,
.jct-page *::after {

    box-sizing: border-box;

}


.jct-page img {

    display: block;

    max-width: 100%;

}


.jct-page a {

    color: inherit;

}


.jct-page-container {

    width: min(
        92%,
        var(--jct-content)
    );

    margin-left: auto;
    margin-right: auto;

}


/* ============================================================
   04. HERO BANNER
   ============================================================ */

.jct-hero {

    position: relative;

    width: 100%;

    min-height: 520px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        url("https://jaichan.com/wp-content/uploads/2026/09/Treatment-Page-Banner.png");

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

}


/* Warm dark overlay */

.jct-hero-shade {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            90deg,
            rgba(42, 29, 20, 0.75) 0%,
            rgba(42, 29, 20, 0.52) 37%,
            rgba(42, 29, 20, 0.18) 66%,
            rgba(42, 29, 20, 0.03) 100%
        );

}


/* Hero content */

.jct-hero-inner {

    position: relative;

    z-index: 2;

    min-height: 520px;

    display: flex;
    align-items: center;

}


.jct-hero-copy {

    width: min(
        680px,
        68%
    );

    color: var(--jct-white);

}


/* ============================================================
   05. HERO — BREADCRUMB
   ============================================================ */

.jct-breadcrumb {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 35px;

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

    font-family: var(--jc-brand);

    font-size: 12px;

}


.jct-breadcrumb a {

    color: inherit;

    text-decoration: none;

    transition: opacity 0.25s ease;

}


.jct-breadcrumb a:hover {
    opacity: 0.7;
}


/* ============================================================
   06. HERO — MAIN TITLE
   ============================================================ */

.jct-hero h1 {

    margin:
        0
        0
        18px;

    color: var(--jct-white);

    font-family: var(--jc-display);

    font-size:
        clamp(
            54px,
            6vw,
            84px
        );

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.02em;

    text-transform: uppercase;

}


/* Small Teak/Paddy line */

.jct-title-line {

    width: 62px;
    height: 3px;

    margin-bottom: 23px;

    background: var(--jct-paddy);

}


/* ============================================================
   07. HERO — TAGLINE
   ============================================================ */

.jct-hero-tagline {

    margin-bottom: 24px;

    color: var(--jct-white);

    font-family: var(--jc-strong);

    font-size: 12px;

    line-height: 1.8;

    letter-spacing: 0.28em;

    text-transform: uppercase;

}


/* Hero description */

.jct-hero-copy > p {

    max-width: 570px;

    margin: 0;

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

    font-family: var(--jc-brand);

    font-size: 14px;

    line-height: 1.8;

}


/* ============================================================
   08. HERO — RIGHT DECORATIVE MESSAGE
   ============================================================ */

.jct-hero-side-note {

    position: absolute;

    right: 0;
    bottom: 45px;

    padding-right: 18px;

    border-right:
        2px solid
        rgba(
            255,
            255,
            255,
            0.72
        );

    color: var(--jct-white);

    text-align: right;

    font-family: var(--jc-strong);

    font-size: 9px;

    line-height: 1.9;

    letter-spacing: 0.20em;

    text-transform: uppercase;

}


.jct-hero-side-note span {
    display: block;
}


/* ============================================================
   09. DYNAMIC SERVICES AREA

   This section comes from:
   [jai_chan_treatments]

   IMPORTANT:
   It is a separate WordPress Shortcode block.
   ============================================================ */

body:has(.jct-page) .jct-services {

    width: min(
        92%,
        var(--jct-content)
    );

    margin:
        0
        auto;

    padding:
        28px
        0
        92px;

    font-family: var(--jc-brand);

}


/* ============================================================
   10. FILTER BAR
   ============================================================ */

body:has(.jct-page) .jct-filter-bar {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 35px;

    padding-bottom: 20px;

    margin-bottom: 25px;

    border-bottom:
        1px solid
        rgba(
            136,
            96,
            68,
            0.24
        );

}


/* Number of treatments */

body:has(.jct-page) .jct-service-count {

    padding-bottom: 11px;

    color: var(--jct-charcoal);

    font-family: var(--jc-strong);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    white-space: nowrap;

}


/* Filters container */

body:has(.jct-page) .jct-filters {

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 12px;

}


/* Individual filter */

body:has(.jct-page) .jct-filter {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


/* Filter label */

body:has(.jct-page) .jct-filter > span {

    color: var(--jct-teak);

    font-family: var(--jc-strong);

    font-size: 9px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


/* Select controls */

body:has(.jct-page) .jct-filter select {

    min-width: 150px;

    height: 44px;

    padding:
        0
        36px
        0
        14px;

    border:
        1px solid
        rgba(
            136,
            96,
            68,
            0.40
        );

    border-radius: 0;

    outline: none;

    background: var(--jct-cream);

    color: var(--jct-charcoal);

    font-family: var(--jc-brand);

    font-size: 12px;

    cursor: pointer;

}


/* Focus */

body:has(.jct-page) .jct-filter select:focus {

    border-color: var(--jct-teak);

}


/* Reset button */

body:has(.jct-page) .jct-reset {

    height: 44px;

    padding:
        0
        17px;

    border: 0;

    background: transparent;

    color: var(--jct-teak);

    font-family: var(--jc-strong);

    font-size: 10px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;

}


body:has(.jct-page) .jct-reset:hover {

    color: var(--jct-charcoal);

}


/* ============================================================
   11. SERVICES GRID
   3 treatments per row on desktop
   ============================================================ */

body:has(.jct-page) .jct-grid {

    display: grid;

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

    gap:
        28px
        24px;

}


/* ============================================================
   12. SERVICE CARD
   ============================================================ */

body:has(.jct-page) .jct-card {

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: var(--jct-white);

    border:
        1px solid
        rgba(
            136,
            96,
            68,
            0.16
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


/* Hidden cards used by filters */

body:has(.jct-page) .jct-card[hidden] {
    display: none !important;
}


/* Gentle spa-style hover */

body:has(.jct-page) .jct-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0
        12px
        32px
        rgba(
            50,
            49,
            45,
            0.07
        );

}


/* ============================================================
   13. SERVICE IMAGE
   Recommended source image: 1600 × 1000 (8:5)
   ============================================================ */

body:has(.jct-page) .jct-card-image {

    width: 100%;

    aspect-ratio:
        800 / 500;

    overflow: hidden;

    background: var(--jct-linen);

}


body:has(.jct-page) .jct-card-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        0.9s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


body:has(.jct-page)
.jct-card:hover
.jct-card-image img {

    transform:
        scale(1.025);

}


/* ============================================================
   14. SERVICE CARD CONTENT
   ============================================================ */

body:has(.jct-page) .jct-card-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        18px
        20px
        18px;

}


/* Small category text */

body:has(.jct-page) .jct-card-label {

    margin-bottom: 7px;

    color: var(--jct-teak);

    font-family: var(--jc-strong);

    font-size: 9px;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


/* Treatment name */

body:has(.jct-page) .jct-card h3 {

    margin:
        0
        0
        12px;

    color: var(--jct-charcoal);

    font-family: var(--jc-display);

    font-size: 22px;

    font-weight: 500;

    line-height: 1.18;

}


/* Size text */

body:has(.jct-page) .jct-size {

    font: inherit;

}


/* ============================================================
   15. DURATION
   ============================================================ */

body:has(.jct-page) .jct-duration {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 13px;

    color: var(--jct-charcoal);

    font-family: var(--jc-brand);

    font-size: 12px;

}


body:has(.jct-page) .jct-clock {

    font-size: 16px;

    line-height: 1;

}


/* ============================================================
   16. SERVICE DESCRIPTION
   ============================================================ */

body:has(.jct-page) .jct-description {

    margin:
        0
        0
        24px;

    color:
        rgba(
            50,
            49,
            45,
            0.82
        );

    font-family: var(--jc-brand);

    font-size: 12px;

    line-height: 1.7;

}


/* ============================================================
   17. PRICE + BOOK NOW
   ============================================================ */

body:has(.jct-page) .jct-card-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: auto;

}


/* Price */

body:has(.jct-page) .jct-price {

    color: var(--jct-teak);

    font-family: var(--jc-display);

    font-size: 21px;

    font-weight: 600;

    line-height: 1;

}


/* Book Now */

body:has(.jct-page) .jct-book-button {

    min-width: 126px;

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        12px
        19px;

    background: var(--jct-teak);

    border:
        1px solid
        var(--jct-teak);

    color:
        var(--jct-white)
        !important;

    font-family: var(--jc-strong);

    font-size: 10px;

    letter-spacing: 0.05em;

    text-decoration: none !important;

    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;

}


body:has(.jct-page) .jct-book-button:hover {

    background: var(--jct-charcoal);

    border-color: var(--jct-charcoal);

    transform:
        translateY(-1px);

}


/* ============================================================
   18. NO FILTER RESULTS
   ============================================================ */

body:has(.jct-page) .jct-no-results {

    width: 100%;

    padding:
        60px
        20px;

    text-align: center;

    color: var(--jct-teak);

    font-size: 14px;

}


/* ============================================================
   19. ABOUT OUR SERVICES
   ============================================================ */

.jct-about {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        78px
        0
        82px;

    background: var(--jct-soft-cream);

}


/* Main content */

.jct-about-container {

    position: relative;

    z-index: 3;

    width:
        min(
            82%,
            1100px
        );

    margin:
        0
        auto;

}


/* ============================================================
   20. ABOUT HEADING
   ============================================================ */

.jct-about-heading {

    margin-bottom: 26px;

}


.jct-about-kicker {

    margin-bottom: 11px;

    color: var(--jct-teak);

    font-family: var(--jc-strong);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.22em;

    text-transform: uppercase;

}


.jct-about h2 {

    max-width: 950px;

    margin: 0;

    color: var(--jct-charcoal);

    font-family: var(--jc-display);

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 1.05;

    text-transform: uppercase;

}


/* ============================================================
   21. ABOUT TEXT — TWO COLUMNS
   ============================================================ */

.jct-about-columns {

    display: grid;

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

    gap: 66px;

}


.jct-about-columns p {

    margin: 0;

    color:
        rgba(
            50,
            49,
            45,
            0.82
        );

    font-family: var(--jc-brand);

    font-size: 13px;

    line-height: 1.85;

}


/* ============================================================
   22. SUBTLE BOTANICAL DECORATION
   ============================================================ */

.jct-about-leaf {

    position: absolute;

    width: 250px;
    height: 330px;

    opacity: 0.12;

    pointer-events: none;

}


.jct-about-leaf::before,
.jct-about-leaf::after {

    content: "";

    position: absolute;

    border:
        1px solid
        var(--jct-teak);

    border-radius:
        80%
        10%
        80%
        10%;

}


.jct-about-leaf::before {

    width: 150px;
    height: 255px;

    transform:
        rotate(32deg);

}


.jct-about-leaf::after {

    width: 102px;
    height: 195px;

    left: 74px;
    top: 45px;

    transform:
        rotate(62deg);

}


.jct-about-leaf-left {

    left: -95px;
    top: 22px;

}


.jct-about-leaf-right {

    right: -100px;
    top: 20px;

    transform:
        scaleX(-1);

}


/* ============================================================
   23. MINIMAL SPA ANIMATION
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

    .jct-hero-copy {

        animation:
            jctHeroFade
            0.9s
            cubic-bezier(
                .2,
                .7,
                .2,
                1
            )
            both;

    }


    .jct-hero-side-note {

        animation:
            jctSoftFade
            1.2s
            0.25s
            ease
            both;

    }


    @keyframes
    jctHeroFade {

        from {

            opacity: 0;

            transform:
                translateY(18px);

        }

        to {

            opacity: 1;

            transform:
                translateY(0);

        }

    }


    @keyframes
    jctSoftFade {

        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }

    }

}


/* ============================================================
   24. TABLET
   ============================================================ */

@media
(max-width: 980px) {


    /* HERO */

    .jct-hero,
    .jct-hero-inner {

        min-height:
            500px;

    }


    .jct-hero-copy {

        width:
            75%;

    }


    /* FILTER BAR */

    body:has(.jct-page) .jct-filter-bar {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }


    body:has(.jct-page) .jct-service-count {

        padding-bottom: 0;

    }


    body:has(.jct-page) .jct-filters {

        width: 100%;

        justify-content:
            flex-start;

    }


    /* 2 cards per row */

    body:has(.jct-page) .jct-grid {

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

    }


    /* ABOUT */

    .jct-about-container {

        width: 86%;

    }

}


/* ============================================================
   25. MOBILE
   ============================================================ */

@media
(max-width: 680px) {


    /* ---------------------------------
       HERO
       --------------------------------- */

    .jct-hero {

        min-height:
            570px;

        background-position:
            58%
            center;

    }


    .jct-hero-inner {

        min-height:
            570px;

        align-items:
            flex-end;

        padding-bottom:
            52px;

    }


    .jct-hero-shade {

        background:

            linear-gradient(
                0deg,
                rgba(
                    42,
                    29,
                    20,
                    0.78
                )
                0%,

                rgba(
                    42,
                    29,
                    20,
                    0.45
                )
                45%,

                rgba(
                    42,
                    29,
                    20,
                    0.08
                )
                100%
            );

    }


    .jct-hero-copy {

        width: 100%;

    }


    .jct-breadcrumb {

        margin-bottom:
            20px;

    }


    .jct-hero h1 {

        font-size:
            clamp(
                46px,
                14vw,
                64px
            );

    }


    .jct-hero-tagline {

        font-size: 10px;

        letter-spacing:
            0.20em;

    }


    .jct-hero-copy > p {

        max-width: 100%;

        font-size: 13px;

    }


    .jct-hero-side-note {

        display: none;

    }


    /* ---------------------------------
       SERVICE SECTION
       --------------------------------- */

    body:has(.jct-page) .jct-services {

        width: 88%;

        padding-top: 25px;

        padding-bottom:
            65px;

    }


    body:has(.jct-page) .jct-filters {

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 12px;

    }


    body:has(.jct-page) .jct-filter {

        width: 100%;

    }


    body:has(.jct-page) .jct-filter select {

        width: 100%;

        min-width: 0;

    }


    body:has(.jct-page) .jct-filter:last-of-type {

        grid-column:
            1 / -1;

    }


    body:has(.jct-page) .jct-reset {

        grid-column:
            1 / -1;

        width: 100%;

        border:
            1px solid
            rgba(
                136,
                96,
                68,
                0.35
            );

    }


    /* 1 card per row */

    body:has(.jct-page) .jct-grid {

        grid-template-columns:
            1fr;

        gap:
            28px;

    }


    body:has(.jct-page) .jct-card h3 {

        font-size:
            23px;

    }


    body:has(.jct-page) .jct-description {

        font-size:
            13px;

    }


    /* ---------------------------------
       ABOUT
       --------------------------------- */

    .jct-about {

        padding:
            62px
            0;

    }


    .jct-about-container {

        width: 86%;

    }


    .jct-about h2 {

        font-size:
            clamp(
                36px,
                11vw,
                48px
            );

    }


    .jct-about-columns {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .jct-about-columns p {

        font-size:
            13px;

    }


    .jct-about-leaf {

        display: none;

    }

}


/* ============================================================

/* ============================================================
   JAI CHAN SPA — SERVICE DETAIL PAGE
   Theme: Jai Chan Spa Version 2.0
   Prefix: jcd-
   ============================================================ */


/* ============================================================
   01. REMOVE DEFAULT WORDPRESS SINGLE SERVICE LAYOUT
   ============================================================ */

.single-service .jc-page {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.single-service .jc-page > .jc-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.single-service .jc-page article {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide title generated automatically by WordPress/theme */
.single-service .jc-page article > h1:first-child {
    display: none !important;
}


/* ============================================================
   02. PAGE BRAND SETTINGS
   ============================================================ */

.jcd-page {
    --jcd-teak: #886044;
    --jcd-rice: #D1C7BE;
    --jcd-white: #FFFFFF;
    --jcd-linen: #BCAFA7;
    --jcd-paddy: #DCC186;
    --jcd-charcoal: #32312D;
    --jcd-cement: #AAAAAA;

    --jcd-cream: #F8F4EE;
    --jcd-soft: #F3EEE7;

    --jcd-content: 1200px;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--jcd-cream);
    color: var(--jcd-charcoal);
}

.jcd-page *,
.jcd-page *::before,
.jcd-page *::after {
    box-sizing: border-box;
}

.jcd-page img {
    display: block;
    max-width: 100%;
}

.jcd-page a {
    text-decoration: none;
}


/* ============================================================
   03. SERVICE HERO
   ============================================================ */

.jcd-hero {
    display: grid;
    grid-template-columns: 54% 46%;

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

    background: var(--jcd-cream);
}


/* ============================================================
   04. HERO IMAGE
   ============================================================ */

.jcd-hero-image {
    position: relative;

    min-height: 640px;

    overflow: hidden;

    background: var(--jcd-linen);
}

.jcd-hero-image > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.1s
        cubic-bezier(.2,.7,.2,1);
}

.jcd-hero-image:hover > img {
    transform: scale(1.02);
}


/* Small text overlay on image */

.jcd-image-note {
    position: absolute;

    left: 28px;
    bottom: 48px;

    padding-left: 18px;

    border-left:
        2px solid
        rgba(255,255,255,.8);

    color: #fff;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.8;

    letter-spacing: .20em;

    text-transform: uppercase;
}

.jcd-image-note span {
    display: block;
}


/* ============================================================
   05. HERO CONTENT
   ============================================================ */

.jcd-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        60px
        clamp(45px, 5vw, 82px);

    background:
        var(--jcd-cream);
}


/* Small brand label */

.jcd-kicker,
.jcd-section-kicker {
    margin-bottom: 12px;

    color: var(--jcd-teak);

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

    letter-spacing: .28em;

    text-transform: uppercase;
}


/* Service title */

.jcd-hero h1 {
    max-width: 720px;

    margin: 0 0 24px;

    color: var(--jcd-charcoal);

    font-size:
        clamp(
            40px,
            4.2vw,
            64px
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -.02em;

    text-transform: uppercase;
}

.jcd-hero h1 span {
    white-space: nowrap;
}


/* ============================================================
   06. DURATION + PRICE
   ============================================================ */

.jcd-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-bottom: 23px;

    color: var(--jcd-teak);

    font-size: 13px;

    text-transform: uppercase;
}

.jcd-meta-item {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}

.jcd-meta-item > span:first-child {
    font-size: 19px;
}

.jcd-meta-divider {
    color:
        rgba(136,96,68,.42);
}


/* ============================================================
   07. SERVICE DESCRIPTION
   ============================================================ */

.jcd-description {
    max-width: 650px;

    margin-bottom: 28px;

    color:
        rgba(50,49,45,.88);

    font-size: 14px;

    line-height: 1.8;
}

.jcd-description p {
    margin:
        0
        0
        15px;
}

.jcd-description p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   08. BOOKING PANEL
   ============================================================ */

.jcd-booking {
    width: 100%;

    margin-top: 5px;

    padding:
        20px
        24px
        18px;

    border:
        1px solid
        rgba(136,96,68,.55);

    background:
        rgba(255,255,255,.20);

    text-align: center;
}

.jcd-booking-title {
    margin-bottom: 14px;

    color: var(--jcd-charcoal);

    font-size: 23px;

    font-weight: 500;
}


/* Book button */

.jcd-booking-button {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    width: 100%;

    min-height: 50px;

    padding:
        12px
        22px;

    background:
        var(--jcd-teak);

    border:
        1px solid
        var(--jcd-teak);

    color:
        #fff !important;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;

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

.jcd-booking-button:hover {
    background:
        var(--jcd-charcoal);

    transform:
        translateY(-1px);
}

.jcd-booking-button span {
    margin-left: auto;

    font-size: 18px;
}


/* When no booking URL exists */

.jcd-booking-disabled {
    padding: 14px;

    background:
        rgba(136,96,68,.08);

    color:
        var(--jcd-teak);

    font-size: 12px;
}


/* Booking note */

.jcd-booking-note {
    margin-top: 14px;

    padding-top: 13px;

    border-top:
        1px solid
        rgba(136,96,68,.22);

    color:
        rgba(50,49,45,.62);

    font-size: 11px;
}


/* ============================================================
   09. SHARED INNER CONTAINER
   ============================================================ */

.jcd-container {
    width:
        min(
            88%,
            var(--jcd-content)
        );

    margin:
        0 auto;
}


/* ============================================================
   10. THE RITUAL
   ============================================================ */

.jcd-ritual {
    position: relative;

    padding:
        68px
        0
        78px;

    background:
        var(--jcd-soft);
}

.jcd-ritual .jcd-section-kicker {
    text-align: center;
}

.jcd-ritual h2 {
    margin:
        0
        0
        34px;

    color:
        var(--jcd-charcoal);

    text-align: center;

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 1.05;
}


/* ============================================================
   11. RITUAL CONTENT — GENERAL
   ============================================================ */

.jcd-ritual-content {
    max-width: 940px;

    margin:
        0 auto;

    color:
        rgba(50,49,45,.88);

    font-size: 14px;

    line-height: 1.85;
}


/* Paragraphs */

.jcd-ritual-content p {
    max-width: 850px;

    margin:
        0 auto
        18px;
}


/* ============================================================
   12. RITUAL — BULLET LIST

   What you currently have in ACF.
   ============================================================ */

.jcd-ritual-content ul {
    max-width: 880px;

    margin:
        0 auto;

    padding:
        0;

    list-style: none;
}

.jcd-ritual-content ul li {
    position: relative;

    padding:
        14px
        15px
        14px
        34px;

    border-bottom:
        1px solid
        rgba(136,96,68,.20);
}

.jcd-ritual-content ul li::before {
    content: "";

    position: absolute;

    left: 8px;
    top: 23px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--jcd-teak);
}


/* ============================================================
   13. RITUAL — NUMBERED STEPS

   If later you use Ordered List in ACF.
   ============================================================ */

.jcd-ritual-content ol {
    max-width: 980px;

    margin:
        0 auto;

    padding: 0;

    list-style: none;

    counter-reset:
        ritualstep;
}

.jcd-ritual-content ol li {
    counter-increment:
        ritualstep;

    position: relative;

    min-height: 58px;

    padding:
        16px
        15px
        16px
        75px;

    border-bottom:
        1px solid
        rgba(136,96,68,.24);
}

.jcd-ritual-content ol li::before {
    content:
        counter(
            ritualstep,
            decimal-leading-zero
        );

    position: absolute;

    left: 8px;
    top: 12px;

    color:
        var(--jcd-teak);

    font-size: 21px;

    font-style: italic;
}


/* ============================================================
   14. HEADINGS INSIDE RITUAL
   ============================================================ */

.jcd-ritual-content h3 {
    margin:
        30px
        0
        12px;

    color:
        var(--jcd-charcoal);

    font-size: 22px;

    font-weight: 500;
}


/* ============================================================
   15. YOU MAY ALSO LIKE
   ============================================================ */

.jcd-related {
    position: relative;

    padding:
        70px
        0
        80px;

    background:
        var(--jcd-cream);
}

.jcd-related-heading {
    margin-bottom: 30px;

    text-align: center;
}

.jcd-related-heading h2 {
    margin: 0;

    color:
        var(--jcd-charcoal);

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 1.05;
}


/* ============================================================
   16. RELATED SERVICE GRID
   ============================================================ */

.jcd-related-grid {
    display: grid;

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

    gap: 22px;
}


/* Individual card */

.jcd-related-card {
    min-width: 0;

    overflow: hidden;

    background:
        #fff;

    border:
        1px solid
        rgba(136,96,68,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.jcd-related-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0
        12px
        32px
        rgba(50,49,45,.07);
}


/* ============================================================
   17. RELATED IMAGE
   ============================================================ */

.jcd-related-image {
    display: block;

    width: 100%;

    aspect-ratio:
        800 / 500;

    overflow: hidden;
}

.jcd-related-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .85s ease;
}

.jcd-related-card:hover
.jcd-related-image img {
    transform:
        scale(1.025);
}


/* ============================================================
   18. RELATED CONTENT
   ============================================================ */

.jcd-related-content {
    padding:
        15px
        17px
        17px;
}

.jcd-related-label {
    margin-bottom: 7px;

    color:
        var(--jcd-teak);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}


/* Related service title */

.jcd-related-content h3 {
    margin:
        0
        0
        12px;

    color:
        var(--jcd-charcoal);

    font-size: 21px;

    line-height: 1.23;

    font-weight: 500;
}

.jcd-related-content h3 a {
    color: inherit;

    text-decoration: none;
}


/* ============================================================
   19. RELATED META
   ============================================================ */

.jcd-related-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 15px;

    color:
        var(--jcd-teak);

    font-size: 11px;

    text-transform: uppercase;
}


/* ============================================================
   20. VIEW DETAILS BUTTON
   ============================================================ */

.jcd-view-details {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 42px;

    padding:
        9px
        14px;

    border:
        1px solid
        var(--jcd-teak);

    color:
        var(--jcd-teak)
        !important;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

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

.jcd-view-details span {
    margin-left: auto;

    font-size: 20px;
}

.jcd-view-details:hover {
    background:
        var(--jcd-teak);

    color:
        #fff !important;
}


/* ============================================================
   21. MINIMAL SPA MOTION
   ============================================================ */

@media
(prefers-reduced-motion: no-preference) {

    .jcd-hero-content {
        animation:
            jcdFadeUp
            .9s
            cubic-bezier(.2,.7,.2,1)
            both;
    }

    @keyframes jcdFadeUp {

        from {
            opacity: 0;

            transform:
                translateY(18px);
        }

        to {
            opacity: 1;

            transform:
                translateY(0);
        }
    }
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media
(max-width: 980px) {

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

    .jcd-hero-image {
        min-height:
            520px;
    }

    .jcd-hero-content {
        padding:
            55px
            7%;
    }

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


/* ============================================================
   23. MOBILE
   ============================================================ */

@media
(max-width: 680px) {

    .jcd-hero-image {
        min-height:
            420px;
    }

    .jcd-image-note {
        left: 20px;
        bottom: 28px;
    }

    .jcd-hero-content {
        padding:
            45px
            6%;
    }

    .jcd-hero h1 {
        font-size:
            clamp(
                38px,
                12vw,
                54px
            );
    }

    .jcd-meta {
        font-size: 12px;
    }

    .jcd-description {
        font-size: 13px;
    }

    .jcd-booking {
        padding:
            17px;
    }


    /* Ritual */

    .jcd-ritual {
        padding:
            55px
            0
            60px;
    }

    .jcd-container {
        width: 88%;
    }


    /* Recommendations */

    .jcd-related {
        padding:
            55px
            0
            65px;
    }

    .jcd-related-grid {
        grid-template-columns:
            1fr;
    }
}


/* ============================================================
   END — SERVICE DETAIL
   

============================================================ */

/* =========================================================
   JAI CHAN HEADER — RESPONSIVE FINAL VERSION
   Desktop / Tablet / Mobile

   MENU STRUCTURE:
   Navigation | BOOK NOW | EN | TH
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.jc-site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: #FFFFFF;
}


.jc-site-header .jc-header-inner {
    width: 100%;
    margin: 0 auto;
}


.jc-primary-nav ul,
.jc-primary-nav .jc-header-menu {
    list-style: none;
}


/* Remove unwanted theme spacing */
.jc-primary-nav .jc-header-menu,
.jc-primary-nav .jc-header-menu > li {
    margin: 0;
    padding: 0;
}


/* Standard links */
.jc-primary-nav a {
    color: #32312D;
    text-decoration: none;
}


/* =========================================================
   DESKTOP
   1025px AND ABOVE
   ========================================================= */

@media (min-width: 1025px) {


    /* -----------------------------------------------------
       HEADER CONTAINER
       ----------------------------------------------------- */

    .jc-site-header .jc-header-inner {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-height: 88px;
        box-sizing: border-box !important;

        padding: 0 48px !important;

        gap: 0 !important;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .jc-logo-area {
        flex: 0 0 auto !important;

        margin: 0 56px 0 0 !important;
        padding: 0 !important;
    }


    .jc-logo-area img,
    .jc-logo-image,
    .custom-logo {
				display: block !important;
        width: 120px !important;
				max-width: 130px !important;
        height: auto !important;
				max-height: none !important;
			
				object-fit: contain;
    }


    /* -----------------------------------------------------
       PRIMARY NAVIGATION
       ----------------------------------------------------- */

    .jc-primary-nav {
        display: flex !important;
        align-items: center !important;

        flex: 1 1 auto !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .jc-primary-nav .jc-header-menu {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
    }


    .jc-primary-nav .jc-header-menu > li {
        display: flex !important;
        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* -----------------------------------------------------
       NORMAL MENU ITEMS
       ----------------------------------------------------- */

    .jc-primary-nav .jc-header-menu
    > li:not(.jc-menu-book):not(.lang-item) {
        margin-right: 38px !important;
    }


    .jc-primary-nav .jc-header-menu
    > li:not(.jc-menu-book):not(.lang-item) > a {

        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 10px 0 !important;

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


    /* -----------------------------------------------------
       BOOK NOW
       Push right-side controls to right edge
       ----------------------------------------------------- */

    .jc-primary-nav .jc-menu-book {
        margin-left: auto !important;
        margin-right: 16px !important;
    }


    .jc-primary-nav .jc-menu-book > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 160px !important;
        height: 54px !important;

        margin: 0 !important;
        padding: 0 26px !important;

        background: #886044 !important;
        color: #FFFFFF !important;

        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;

        letter-spacing: 0.4px !important;
        text-transform: uppercase !important;

        text-decoration: none !important;

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


    .jc-primary-nav .jc-menu-book > a:hover {
        background: #6D4937 !important;
        color: #FFFFFF !important;

        transform: translateY(-1px);
    }


    /* -----------------------------------------------------
       LANGUAGE SWITCHER
       ----------------------------------------------------- */

    .jc-primary-nav .lang-item {
        display: flex !important;
        align-items: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .jc-primary-nav .lang-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin: 0 !important;
        padding: 8px 5px !important;

        color: #32312D !important;

        font-size: 0 !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    /* EN */
    .jc-primary-nav .lang-item-en > a::after {
        content: "EN";

        font-size: 11px;
        font-weight: 500;
        letter-spacing: .7px;
    }


    /* TH */
    .jc-primary-nav .lang-item-th > a::after {
        content: "TH";

        font-size: 11px;
        font-weight: 500;
        letter-spacing: .7px;
    }


    /* Separator */
    .jc-primary-nav .lang-item-th > a::before {
        content: "";

        display: block;

        width: 1px;
        height: 13px;

        margin-left: 5px;
        margin-right: 10px;

        background: rgba(50, 49, 45, .25);
    }


    /* Current language */
    .jc-primary-nav .lang-item.current-lang > a {
        color: #886044 !important;
        opacity: 1 !important;
    }


    /* Other language */
    .jc-primary-nav .lang-item:not(.current-lang) > a {
        opacity: .55 !important;
    }


    .jc-primary-nav .lang-item:not(.current-lang) > a:hover {
        color: #886044 !important;
        opacity: 1 !important;
    }


    /* Desktop hamburger off */
    .jc-menu-toggle {
        display: none !important;
    }

}



/* =========================================================
   TABLET + MOBILE
   1024px AND BELOW
   ========================================================= */

@media (max-width: 1024px) {


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .jc-site-header .jc-header-inner {
        display: flex !important;
        align-items: center !important;

        min-height: 72px;

        padding: 0 24px !important;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .jc-logo-area {
        flex: 0 0 auto;

        margin-right: auto !important;
    }


.jc-logo-area img,
.jc-logo-image,
.custom-logo {
    display: block !important;

    width: 110px !important;
    max-width: 110px !important;

    height: auto !important;
    max-height: none !important;

    object-fit: contain;
}


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    .jc-menu-toggle {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        margin-left: auto;

        padding: 8px;

        border: 0;
        background: transparent;

        cursor: pointer;
    }


    .jc-menu-toggle span {
        display: block;

        width: 22px;
        height: 1px;

        margin: 3px 0;

        background: #32312D;
    }


    /*
     * Do not force .jc-primary-nav to display.
     * Existing theme JS controls menu open / close.
     */


    /* -----------------------------------------------------
       MOBILE / TABLET MENU CONTENT
       ----------------------------------------------------- */

    .jc-primary-nav .jc-header-menu {
        width: 100%;

        margin: 0 !important;
        padding: 20px 0 !important;
    }


    .jc-primary-nav .jc-header-menu > li {
        margin: 0 !important;
        padding: 0 !important;
    }


    /* Standard navigation items */
    .jc-primary-nav .jc-header-menu
    > li:not(.jc-menu-book):not(.lang-item) > a {

        display: block;

        padding: 12px 0 !important;

        font-size: 15px;

        color: #32312D;
    }


    /* -----------------------------------------------------
       BOOK NOW
       ----------------------------------------------------- */

    .jc-primary-nav .jc-menu-book {
        margin: 18px 0 12px !important;
        padding: 0 !important;
    }


    .jc-primary-nav .jc-menu-book > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        min-width: 170px;
        min-height: 50px;

        margin: 0 !important;
        padding: 0 24px !important;

        background: #886044 !important;
        color: #FFFFFF !important;

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

        text-transform: uppercase;
        text-decoration: none !important;
    }


    .jc-primary-nav .jc-menu-book > a:hover {
        background: #6D4937 !important;
        color: #FFFFFF !important;
    }


    /* -----------------------------------------------------
       LANGUAGE SWITCHER
       ----------------------------------------------------- */

    .jc-primary-nav .lang-item {
        display: inline-flex !important;
        align-items: center;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .jc-primary-nav .lang-item > a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        width: auto !important;

        margin: 0 !important;
        padding: 10px 5px !important;

        color: #32312D !important;

        font-size: 0 !important;
        line-height: 1 !important;

        text-decoration: none !important;
    }


    /* EN */
    .jc-primary-nav .lang-item-en > a::after {
        content: "EN";

        font-size: 12px;
        font-weight: 500;
        letter-spacing: .7px;
    }


    /* TH */
    .jc-primary-nav .lang-item-th > a::after {
        content: "TH";

        font-size: 12px;
        font-weight: 500;
        letter-spacing: .7px;
    }


    /* Separator */
    .jc-primary-nav .lang-item-th > a::before {
        content: "";

        display: block;

        width: 1px;
        height: 13px;

        margin-left: 6px;
        margin-right: 11px;

        background: rgba(50, 49, 45, .25);
    }


    /* Current */
    .jc-primary-nav .lang-item.current-lang > a {
        color: #886044 !important;
        opacity: 1 !important;
    }


    /* Inactive */
    .jc-primary-nav .lang-item:not(.current-lang) > a {
        opacity: .5 !important;
    }

}



/* =========================================================
   MOBILE ONLY
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {


    .jc-site-header .jc-header-inner {
        min-height: 64px;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    /* Smaller logo */
    .jc-logo-area img,
    .jc-logo-image,
    .custom-logo {
        max-width: 78px;
        max-height: 36px;
    }


    /* Comfortable mobile nav */
    .jc-primary-nav .jc-header-menu {
        padding-top: 16px !important;
        padding-bottom: 20px !important;
    }


    .jc-primary-nav .jc-header-menu
    > li:not(.jc-menu-book):not(.lang-item) > a {

        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }


    /* Full-width BOOK NOW */
    .jc-primary-nav .jc-menu-book {
        width: 100% !important;

        margin-top: 18px !important;
        margin-bottom: 12px !important;
    }


    .jc-primary-nav .jc-menu-book > a {
        width: 100% !important;
        max-width: 100% !important;

        min-height: 50px;
    }

}


/* =========================================================
   FORCE RIGHT ALIGN:
   BOOK NOW + LANGUAGE SWITCHER
   Restored from the previously working version
   ========================================================= */

@media (min-width: 1025px) {

    .jc-site-header .jc-header-inner {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 48px !important;
        padding-right: 48px !important;
        box-sizing: border-box !important;
    }

    .jc-logo-area {
        flex: 0 0 auto !important;
        margin-right: 56px !important;
    }

    .jc-primary-nav {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .jc-primary-nav .jc-header-menu,
    .jc-primary-nav ul.menu,
    .jc-primary-nav > div > ul {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .jc-primary-nav .jc-header-menu > li,
    .jc-primary-nav ul.menu > li,
    .jc-primary-nav > div > ul > li {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .jc-primary-nav .jc-header-menu > li:not(.jc-menu-book):not(.lang-item),
    .jc-primary-nav ul.menu > li:not(.jc-menu-book):not(.lang-item),
    .jc-primary-nav > div > ul > li:not(.jc-menu-book):not(.lang-item) {
        margin-right: 38px !important;
    }

    .jc-primary-nav .jc-header-menu > li.jc-menu-book,
    .jc-primary-nav ul.menu > li.jc-menu-book,
    .jc-primary-nav > div > ul > li.jc-menu-book {
        margin-left: auto !important;
        margin-right: 18px !important;
    }

    .jc-primary-nav .jc-menu-book > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 160px !important;
        height: 54px !important;
        padding: 0 28px !important;
        background: #886044 !important;
        color: #FFFFFF !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        letter-spacing: 0.4px !important;
        white-space: nowrap !important;
    }

    .jc-primary-nav .lang-item {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .jc-primary-nav .lang-item > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 5px !important;
        text-decoration: none !important;
        font-size: 0 !important;
        line-height: 1 !important;
        color: #32312D !important;
    }

    .jc-primary-nav .lang-item-en > a::after {
        content: "EN";
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .7px;
    }

    .jc-primary-nav .lang-item-th > a::before {
        content: "";
        display: block;
        width: 1px;
        height: 13px;
        margin-left: 6px;
        margin-right: 10px;
        background: rgba(50,49,45,.25);
    }

    .jc-primary-nav .lang-item-th > a::after {
        content: "TH";
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .7px;
    }

    .jc-primary-nav .lang-item.current-lang > a {
        color: #886044 !important;
        opacity: 1 !important;
    }

    .jc-primary-nav .lang-item:not(.current-lang) > a {
        opacity: .55 !important;
    }

    .jc-primary-nav .lang-item:not(.current-lang) > a:hover {
        opacity: 1 !important;
        color: #886044 !important;
    }
}

/* ============================================================
   JAI CHAN SPA — JOURNAL ARTICLE V1
   Prefix: jcj-

   Desktop / Tablet / Mobile
   ============================================================ */


/* ============================================================
   01. JOURNAL VARIABLES
   ============================================================ */

.jcj-article {

    --jcj-teak: #886044;
    --jcj-rice: #D1C7BE;
    --jcj-white: #FFFFFF;
    --jcj-linen: #BCAFA7;
    --jcj-paddy: #DCC186;
    --jcj-charcoal: #32312D;
    --jcj-cement: #AAAAAA;

    --jcj-cream: #F8F5F0;
    --jcj-soft-cream: #F3EEE7;

    --jcj-wide: 1240px;
    --jcj-reading: 820px;

    width: 100%;
    margin: 0;
    padding: 0;

    color: var(--jcj-charcoal);
    background: var(--jcj-cream);
}


/* Box sizing */

.jcj-article *,
.jcj-article *::before,
.jcj-article *::after {
    box-sizing: border-box;
}


.jcj-article img {
    display: block;
    max-width: 100%;
}


.jcj-article a {
    color: inherit;
}


/* General wide container */

.jcj-container {
    width: min(90%, var(--jcj-wide));
    margin-left: auto;
    margin-right: auto;
}



/* ============================================================
   02. ARTICLE HEADER
   ============================================================ */

.jcj-header {

    padding:
        90px
        0
        58px;

    background:
        var(--jcj-cream);

    text-align:
        center;
}


.jcj-header .jcj-container {
    max-width: 980px;
}


/* Categories */

.jcj-categories {

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

    gap: 8px 14px;

    margin-bottom: 22px;

    color: var(--jcj-teak);

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

    line-height: 1.4;
    letter-spacing: 2.2px;

    text-transform: uppercase;
}


.jcj-categories a {

    color: var(--jcj-teak) !important;

    text-decoration: none !important;

    transition:
        opacity .25s ease;
}


.jcj-categories a:hover {
    opacity: .65;
}


/* Separate multiple categories */

.jcj-categories a:not(:last-child)::after {
    content: "·";
    margin-left: 14px;
    color: var(--jcj-paddy);
}



/* ============================================================
   03. ARTICLE TITLE
   ============================================================ */

.jcj-title {

    max-width: 1050px;

    margin:
        0
        auto
        24px !important;

    color:
        var(--jcj-charcoal);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            52px,
            6vw,
            86px
        ) !important;

    font-weight:
        500 !important;

    line-height:
        .98 !important;

    letter-spacing:
        -.025em;

    text-align:
        center;
}


/* Subtitle */

.jcj-subtitle {

    max-width: 760px;

    margin:
        0
        auto
        20px !important;

    color:
        var(--jcj-teak);

    font-size:
        17px !important;

    line-height:
        1.7 !important;

    text-align:
        center;
}


/* Date */

.jcj-date {

    margin-bottom:
        30px;

    color:
        rgba(50,49,45,.55);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* Summary */

.jcj-summary {

    position:
        relative;

    max-width:
        760px;

    margin:
        0 auto !important;

    padding-top:
        27px;

    color:
        var(--jcj-charcoal);

    font-size:
        15px !important;

    line-height:
        1.9 !important;

    text-align:
        center;
}


.jcj-summary::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        55px;

    height:
        2px;

    transform:
        translateX(-50%);

    background:
        var(--jcj-paddy);
}



/* ============================================================
   04. FEATURED IMAGE
   ============================================================ */

.jcj-featured-image {

    width:
        min(
            92%,
            var(--jcj-wide)
        );

    margin:
        0 auto
        72px;

    overflow:
        hidden;

    background:
        var(--jcj-linen);
}


.jcj-featured-image img {

    width:
        100%;

    height:
        auto;

    max-height:
        720px;

    object-fit:
        cover;
}



/* ============================================================
   05. ARTICLE BODY
   ============================================================ */

.jcj-body {

    width:
        100%;

    padding:
        0
        0
        90px;

    background:
        var(--jcj-cream);
}


.jcj-content {

    width:
        min(
            88%,
            var(--jcj-reading)
        );

    margin:
        0 auto;

    color:
        var(--jcj-charcoal);

    font-size:
        16px;

    line-height:
        1.9;
}



/* ============================================================
   06. GUTENBERG CONTENT TYPOGRAPHY
   ============================================================ */

.jcj-content p {

    margin:
        0
        0
        26px;

    color:
        rgba(50,49,45,.88);

    font-size:
        16px;

    line-height:
        1.9;
}


.jcj-content h2 {

    margin:
        62px
        0
        22px;

    color:
        var(--jcj-charcoal);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    font-weight:
        500;

    line-height:
        1.1;
}


.jcj-content h3 {

    margin:
        42px
        0
        18px;

    color:
        var(--jcj-charcoal);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        30px;

    font-weight:
        500;

    line-height:
        1.2;
}


.jcj-content h4 {

    margin:
        34px
        0
        15px;

    color:
        var(--jcj-teak);

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.4;
}


/* Lists */

.jcj-content ul,
.jcj-content ol {

    margin:
        0
        0
        30px;

    padding-left:
        28px;

    color:
        rgba(50,49,45,.88);
}


.jcj-content li {

    margin-bottom:
        10px;

    padding-left:
        4px;

    line-height:
        1.8;
}


/* Links */

.jcj-content a {

    color:
        var(--jcj-teak) !important;

    text-decoration:
        underline;

    text-underline-offset:
        4px;
}


.jcj-content a:hover {
    color:
        #6D4937 !important;
}


/* Blockquotes */

.jcj-content blockquote {

    margin:
        45px
        0;

    padding:
        8px
        0
        8px
        28px;

    border-left:
        2px solid
        var(--jcj-paddy);

    color:
        var(--jcj-teak);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        25px;

    line-height:
        1.45;
}


/* Gutenberg images */

.jcj-content figure {

    margin:
        44px
        0;
}


.jcj-content figure img {
    width: 100%;
    height: auto;
}


.jcj-content figcaption {

    margin-top:
        10px;

    color:
        rgba(50,49,45,.55);

    font-size:
        11px;

    line-height:
        1.6;

    text-align:
        center;
}


/* Gallery */

.jcj-content .wp-block-gallery {

    gap:
        12px;

    margin:
        45px
        0;
}



/* ============================================================
   07. SHARED SECTION HEADINGS
   ============================================================ */

.jcj-section-heading {

    max-width:
        760px;

    margin:
        0 auto
        42px;

    text-align:
        center;
}


.jcj-section-kicker {

    margin-bottom:
        12px;

    color:
        var(--jcj-teak);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.jcj-section-heading h2 {

    margin:
        0 !important;

    color:
        var(--jcj-charcoal);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            38px,
            4.5vw,
            58px
        ) !important;

    font-weight:
        500 !important;

    line-height:
        1.05 !important;
}



/* ============================================================
   08. RECOMMENDED TREATMENTS
   ============================================================ */

.jcj-services {

    width:
        100%;

    padding:
        82px
        0
        90px;

    background:
        var(--jcj-soft-cream);
}


.jcj-services-grid {

    display:
        grid;

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

    gap:
        28px;
}



/* Service card */

.jcj-service-card {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        var(--jcj-white);

    border:
        1px solid
        rgba(136,96,68,.15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.jcj-service-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 35px
        rgba(50,49,45,.07);
}



/* Service image */

.jcj-service-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        800 / 500;

    overflow:
        hidden;

    background:
        var(--jcj-linen);
}


.jcj-service-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s ease;
}


.jcj-service-card:hover
.jcj-service-image img {

    transform:
        scale(1.025);
}



/* Service content */

.jcj-service-content {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding:
        24px;
}


.jcj-service-content h3 {

    margin:
        0
        0
        10px;

    color:
        var(--jcj-charcoal);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        26px;

    font-weight:
        500;

    line-height:
        1.15;
}


.jcj-service-content h3 a {

    color:
        inherit !important;

    text-decoration:
        none !important;
}


.jcj-service-duration {

    margin-bottom:
        13px;

    color:
        var(--jcj-teak);

    font-size:
        11px;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;
}


.jcj-service-description {

    margin:
        0
        0
        22px !important;

    color:
        rgba(50,49,45,.78);

    font-size:
        12px !important;

    line-height:
        1.75 !important;
}


.jcj-service-price {

    margin-top:
        auto;

    margin-bottom:
        18px;

    color:
        var(--jcj-teak);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        24px;

    font-weight:
        600;
}



/* ============================================================
   09. SERVICE ACTIONS
   ============================================================ */

.jcj-service-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;
}


.jcj-service-detail,
.jcj-service-book {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        11px
        17px;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;

    text-decoration:
        none !important;
}


/* View Details */

.jcj-service-detail {

    border:
        1px solid
        var(--jcj-teak);

    color:
        var(--jcj-teak) !important;

    background:
        transparent;
}


.jcj-service-detail:hover {

    color:
        var(--jcj-white) !important;

    background:
        var(--jcj-teak);
}


/* Book Now */

.jcj-service-book {

    border:
        1px solid
        var(--jcj-teak);

    color:
        var(--jcj-white) !important;

    background:
        var(--jcj-teak);
}


.jcj-service-book:hover {

    border-color:
        #6D4937;

    background:
        #6D4937;
}



/* ============================================================
   10. RELATED JOURNAL
   ============================================================ */

.jcj-related {

    width:
        100%;

    padding:
        82px
        0
        90px;

    background:
        var(--jcj-cream);
}


.jcj-related-grid {

    display:
        grid;

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

    gap:
        28px;
}


.jcj-related-card {

    min-width:
        0;

    background:
        transparent;
}


.jcj-related-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    margin-bottom:
        20px;

    overflow:
        hidden;

    background:
        var(--jcj-linen);
}


.jcj-related-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s ease;
}


.jcj-related-card:hover
.jcj-related-image img {

    transform:
        scale(1.025);
}


.jcj-related-date {

    margin-bottom:
        8px;

    color:
        var(--jcj-teak);

    font-size:
        10px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.jcj-related-content h3 {

    margin:
        0
        0
        13px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        500;

    line-height:
        1.15;
}


.jcj-related-content h3 a {

    color:
        var(--jcj-charcoal) !important;

    text-decoration:
        none !important;
}


.jcj-related-link {

    color:
        var(--jcj-teak) !important;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    text-decoration:
        underline !important;

    text-underline-offset:
        4px;
}



/* ============================================================
   11. TABLET
   ============================================================ */

@media (max-width: 1024px) {


    .jcj-header {

        padding:
            72px
            0
            48px;
    }


    .jcj-title {

        font-size:
            clamp(
                46px,
                7vw,
                70px
            ) !important;
    }


    .jcj-featured-image {

        width:
            92%;

        margin-bottom:
            60px;
    }


    .jcj-content {

        width:
            84%;
    }


    .jcj-services-grid,
    .jcj-related-grid {

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

        gap:
            24px;
    }


    .jcj-services,
    .jcj-related {

        padding:
            70px
            0;
    }

}



/* ============================================================
   12. MOBILE
   ============================================================ */

@media (max-width: 680px) {


    .jcj-header {

        padding:
            50px
            0
            38px;
    }


    .jcj-header .jcj-container {

        width:
            88%;
    }


    .jcj-categories {

        justify-content:
            flex-start;

        margin-bottom:
            17px;

        font-size:
            9px;

        text-align:
            left;
    }


    .jcj-title {

        margin-bottom:
            18px !important;

        font-size:
            clamp(
                42px,
                13vw,
                58px
            ) !important;

        line-height:
            1 !important;

        text-align:
            left;
    }


    .jcj-subtitle {

        margin-left:
            0 !important;

        margin-right:
            0 !important;

        font-size:
            15px !important;

        text-align:
            left;
    }


    .jcj-date {

        text-align:
            left;
    }


    .jcj-summary {

        padding-top:
            22px;

        font-size:
            14px !important;

        text-align:
            left;
    }


    .jcj-summary::before {

        left:
            0;

        transform:
            none;
    }


    /* Featured Image */

    .jcj-featured-image {

        width:
            100%;

        margin-bottom:
            45px;
    }


    /* Content */

    .jcj-body {

        padding-bottom:
            65px;
    }


    .jcj-content {

        width:
            88%;

        font-size:
            15px;
    }


    .jcj-content p {

        font-size:
            15px;

        line-height:
            1.85;
    }


    .jcj-content h2 {

        margin-top:
            46px;

        font-size:
            34px;
    }


    .jcj-content h3 {

        margin-top:
            36px;

        font-size:
            27px;
    }


    .jcj-content blockquote {

        padding-left:
            20px;

        font-size:
            22px;
    }


    /* Section heading */

    .jcj-section-heading {

        margin-bottom:
            32px;

        text-align:
            left;
    }


    .jcj-section-heading h2 {

        font-size:
            38px !important;
    }


    /* Recommended + Related */

    .jcj-services,
    .jcj-related {

        padding:
            58px
            0
            65px;
    }


    .jcj-container {

        width:
            88%;
    }


    .jcj-services-grid,
    .jcj-related-grid {

        grid-template-columns:
            1fr;

        gap:
            34px;
    }


    .jcj-service-content {

        padding:
            22px;
    }


    .jcj-service-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .jcj-service-detail,
    .jcj-service-book {

        width:
            100%;
    }

}


/* ============================================================
   JAI CHAN SPA — JOURNAL MAIN PAGE CLEAN V4
   Block 1: .jcj-intro-v2
   Block 2: .jcjf-
   Block 3: .jcjg- (separate section below)
   ============================================================ */

/* ============================================================
   01. JOURNAL CI VARIABLES
   ============================================================ */

body:has(.jcj-page) {

    --jc-teak: #886044;
    --jc-rice: #D1C7BE;
    --jc-white: #FFFFFF;
    --jc-linen: #BCAFA7;
    --jc-paddy: #DCC186;
    --jc-charcoal: #32312D;
    --jc-cement: #AAAAAA;
}



/* ============================================================
   02. REMOVE THEME PAGE SPACING
   ============================================================ */

body:has(.jcj-page) .jc-page {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}



/* ============================================================
   03. REMOVE THEME CONTAINER WIDTH
   This is the important Treatment Page behaviour
   ============================================================ */

body:has(.jcj-page)
.jc-page > .jc-container {

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* ============================================================
   04. REMOVE ARTICLE WIDTH LIMIT
   ============================================================ */

body:has(.jcj-page)
.jc-page article {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}



/* ============================================================
   05. HIDE AUTOMATIC WORDPRESS PAGE TITLE
   This removes the huge "Journal" at the top
   ============================================================ */

body:has(.jcj-page)
.jc-page article > h1:first-child {

    display: none !important;
}



/* ============================================================
   06. REMOVE GUTENBERG BLOCK WIDTH / SPACING
   ============================================================ */

body:has(.jcj-page)
.jc-page article > .wp-block-html,

body:has(.jcj-page)
.jc-page article > .wp-block-shortcode,

body:has(.jcj-page)
.jc-page article > .wp-block-group {

    width: 100% !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* ============================================================
   07. JOURNAL PAGE ROOT
   ============================================================ */

body:has(.jcj-page)
.jcj-page {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}


/* ============================================================
   JOURNAL BLOCK 1 + BLOCK 2
   ============================================================ */

.jcj-intro-v2 {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;

    padding:
        68px
        24px
        62px;

    overflow: hidden;

    background:
        rgba(209, 199, 190, .13);

    color: var(--jc-charcoal);

    text-align: center;
}


.jcj-intro-v2__inner {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        900px
    );

    margin: 0 auto;
}



/* Intro kicker */

.jcj-intro-v2__kicker {
    margin: 0 0 11px;

    color: var(--jc-teak);

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.3;

    letter-spacing: .32em;

    text-transform: uppercase;
}



/* Intro line */

.jcj-intro-v2__line {
    display: block;

    width: 34px;
    height: 1px;

    margin:
        0 auto
        18px;

    background: var(--jc-paddy);
}



/* Intro title */

.jcj-intro-v2__title {
    width: 100%;

    margin:
        0 auto
        17px !important;

    padding: 0 !important;

    color:
        var(--jc-charcoal) !important;

    font-family:
        "Bernoru Expanded",
        Georgia,
        serif !important;

    font-size:
        clamp(
            50px,
            5.2vw,
            72px
        ) !important;

    font-weight:
        400 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.025em !important;

    text-align: center !important;

    text-transform:
        none !important;
}



/* Intro description */

.jcj-intro-v2__description {
    max-width: 690px;

    margin:
        0 auto !important;

    padding: 0 !important;

    color:
        rgba(50, 49, 45, .76) !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        14px !important;

    font-weight:
        400;

    line-height:
        1.65 !important;

    text-align:
        center !important;
}



/* ============================================================
   03. BLOCK 2 — FEATURED ARTICLE
   Prefix: jcjf-
   ============================================================ */

.jcjf-section {
    width: 100%;
    max-width: none;

    margin: 0 !important;

    padding:
        48px
        0
        70px !important;

    background:
        var(--jc-white);
}



/* Featured main container */

.jcjf-inner {
    width: min(
        calc(100% - 96px),
        1240px
    ) !important;

    max-width: 1240px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(340px, .8fr) !important;

    align-items:
        center !important;

    gap:
        clamp(
            48px,
            5vw,
            76px
        ) !important;
}



/* ============================================================
   04. FEATURED IMAGE
   ============================================================ */

.jcjf-media {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.jcjf-image {
    display: block !important;

    width: 100% !important;

    aspect-ratio:
        16 / 10 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        var(--jc-rice);

    text-decoration:
        none !important;
}


.jcjf-image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    transition:
        transform .7s ease;
}


.jcjf-image:hover img {
    transform:
        scale(1.02);
}



/* ============================================================
   05. FEATURED CONTENT
   ============================================================ */

.jcjf-copy {
    width: 100% !important;

    max-width: 450px !important;

    margin: 0 !important;

    padding: 0 !important;

    text-align: left !important;
}



/* Category */

.jcjf-category {
    margin:
        0
        0
        10px !important;

    padding: 0 !important;

    color:
        var(--jc-teak) !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1.4 !important;

    letter-spacing:
        .22em !important;

    text-transform:
        uppercase !important;
}



/* Small rule */

.jcjf-rule {
    display: block !important;

    width: 32px !important;
    height: 1px !important;

    margin:
        0
        0
        21px !important;

    background:
        var(--jc-paddy) !important;
}



/* ============================================================
   06. FEATURED TITLE
   ============================================================ */

.jcjf-title {
    width: 100% !important;

    max-width: 450px !important;

    margin:
        0
        0
        17px !important;

    padding:
        0 !important;

    color:
        var(--jc-charcoal) !important;

    font-family:
        "Bernoru Expanded",
        Georgia,
        serif !important;

    font-size:
        clamp(
            30px,
            2.7vw,
            42px
        ) !important;

    font-weight:
        400 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.02em !important;

    text-align:
        left !important;

    text-transform:
        none !important;
}


.jcjf-title a,
.jcjf-title a:link,
.jcjf-title a:visited {
    color:
        var(--jc-charcoal) !important;

    font-family:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;

    text-decoration:
        none !important;

    text-decoration-line:
        none !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


.jcjf-title a:hover {
    color:
        var(--jc-teak) !important;

    text-decoration:
        none !important;
}



/* ============================================================
   07. FEATURED SUMMARY
   ============================================================ */

.jcjf-summary {
    width: 100% !important;

    max-width: 435px !important;

    margin:
        0
        0
        25px !important;

    padding: 0 !important;

    color:
        rgba(50, 49, 45, .74) !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.7 !important;

    text-align:
        left !important;
}



/* ============================================================
   08. FEATURED BUTTON
   ============================================================ */

.jcjf-button {
    min-width: 184px !important;
    min-height: 46px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        28px !important;

    margin: 0 !important;

    padding:
        0
        20px !important;

    border:
        1px solid
        var(--jc-teak) !important;

    background:
        var(--jc-teak) !important;

    color:
        var(--jc-white) !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        .17em !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;

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


.jcjf-button:hover {
    background:
        var(--jc-white) !important;

    color:
        var(--jc-teak) !important;
}


.jcjf-arrow {
    font-size:
        17px !important;

    font-weight:
        300 !important;

    line-height:
        1 !important;

    transition:
        transform .25s ease;
}


.jcjf-button:hover
.jcjf-arrow {
    transform:
        translateX(4px);
}




/* ============================================================
   JOURNAL MAIN — TABLET
   ============================================================ */

@media (max-width: 1024px) {
    /* Block 1 */

    .jcj-intro-v2 {
        padding:
            58px
            30px
            54px;
    }


    .jcj-intro-v2__title {
        font-size:
            clamp(
                44px,
                6vw,
                60px
            ) !important;
    }



    /* Block 2 */

    .jcjf-section {
        padding:
            40px
            0
            60px !important;
    }


    .jcjf-inner {
        width:
            calc(100% - 60px) !important;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(290px, .95fr) !important;

        gap:
            38px !important;
    }


    .jcjf-title {
        font-size:
            clamp(
                28px,
                3.7vw,
                36px
            ) !important;
    }
}

/* ============================================================
   JOURNAL MAIN — MOBILE
   ============================================================ */

@media (max-width: 680px) {
    /* --------------------------------
       BLOCK 1
       -------------------------------- */

    .jcj-intro-v2 {
        padding:
            44px
            20px
            42px;
    }


    .jcj-intro-v2__inner {
        width:
            100%;
    }


    .jcj-intro-v2__kicker {
        font-size:
            9px;
    }


    .jcj-intro-v2__line {
        width:
            28px;

        margin-bottom:
            15px;
    }


    .jcj-intro-v2__title {
        margin-bottom:
            14px !important;

        font-size:
            clamp(
                36px,
                10.5vw,
                48px
            ) !important;

        line-height:
            1.04 !important;
    }


    .jcj-intro-v2__description {
        max-width:
            430px;

        font-size:
            13px !important;

        line-height:
            1.6 !important;
    }



    /* --------------------------------
       BLOCK 2
       -------------------------------- */

    .jcjf-section {
        padding:
            28px
            0
            50px !important;
    }


    .jcjf-inner {
        width:
            calc(100% - 40px) !important;

        grid-template-columns:
            1fr !important;

        gap:
            27px !important;
    }


    .jcjf-image {
        aspect-ratio:
            4 / 3 !important;
    }


    .jcjf-copy {
        width:
            100% !important;

        max-width:
            none !important;

        padding: 0 !important;
    }


    .jcjf-rule {
        margin-bottom:
            17px !important;
    }


    .jcjf-title {
        max-width:
            none !important;

        font-size:
            clamp(
                29px,
                8.5vw,
                37px
            ) !important;

        line-height:
            1.09 !important;
    }


    .jcjf-summary {
        max-width:
            none !important;

        font-size:
            13px !important;
    }
}


/* ============================================================
   JAI CHAN SPA — JOURNAL GRID V1
   BLOCK 3
   Prefix: jcjg-
   ============================================================ */


/* ============================================================
   01. SECTION
   ============================================================ */

.jcjg-section {
    width: 100%;
    max-width: none;

    margin: 0 !important;

    padding:
        38px
        0
        88px;

    background:
        rgba(209, 199, 190, .14);
}


.jcjg-section,
.jcjg-section *,
.jcjg-section *::before,
.jcjg-section *::after {
    box-sizing: border-box;
}


.jcjg-inner {
    width:
        min(
            calc(100% - 96px),
            1240px
        );

    max-width:
        1240px;

    margin:
        0 auto;
}



/* ============================================================
   02. CATEGORY FILTER
   ============================================================ */

.jcjg-filter {
    width: 100%;

    margin:
        0
        0
        38px;
}


.jcjg-filter-scroll {
    width: 100%;

    display: flex;

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

    gap: 12px;

    overflow-x: auto;

    padding:
        2px
        0;

    scrollbar-width: none;
}


.jcjg-filter-scroll::-webkit-scrollbar {
    display: none;
}



/* ============================================================
   03. CATEGORY PILL
   ============================================================ */

.jcjg-pill {
    min-width: 150px;
    height: 46px;

    flex:
        0 0 auto;

    display:
        inline-flex;

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

    padding:
        0
        24px;

    border:
        1px solid
        rgba(136, 96, 68, .72);

    border-radius:
        999px;

    background:
        transparent;

    color:
        #32312D !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none !important;

    white-space:
        nowrap;

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


.jcjg-pill:hover {
    background:
        rgba(136, 96, 68, .08);

    color:
        #886044 !important;
}


.jcjg-pill.is-active {
    border-color:
        #886044;

    background:
        #886044;

    color:
        #FFFFFF !important;
}



/* ============================================================
   04. MORE CATEGORY
   ============================================================ */

.jcjg-more-form {
    flex:
        0 0 auto;

    margin: 0;
    padding: 0;
}


.jcjg-more {
    min-width: 150px;
    height: 46px;

    padding:
        0
        42px
        0
        22px;

    border:
        1px solid
        rgba(136, 96, 68, .72);

    border-radius:
        999px;

    background-color:
        transparent;

    color:
        #32312D;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        11px;

    font-weight:
        400;

    cursor:
        pointer;
}



/* ============================================================
   05. ARTICLE GRID
   ============================================================ */

.jcjg-grid {
    display:
        grid;

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

    gap:
        28px
        22px;
}



/* ============================================================
   06. CARD
   ============================================================ */

.jcjg-card {
    min-width: 0;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid
        rgba(188, 175, 167, .48);

    background:
        #FFFFFF;

    overflow:
        hidden;
}



/* ============================================================
   07. CARD IMAGE
   ============================================================ */

.jcjg-card-image {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    margin:
        0;

    overflow:
        hidden;

    background:
        #D1C7BE;

    text-decoration:
        none !important;
}


.jcjg-card-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        .7s
        ease;
}


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



/* ============================================================
   08. CARD CONTENT
   ============================================================ */

.jcjg-card-content {
    padding:
        20px
        20px
        21px;
}



/* ============================================================
   09. CATEGORY
   ============================================================ */

.jcjg-card-category {
    margin:
        0
        0
        9px;

    color:
        #886044;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;
}



/* ============================================================
   10. TITLE
   ============================================================ */

.jcjg-card-title {
    margin:
        0
        0
        11px !important;

    padding: 0 !important;

    color:
        #32312D !important;

    font-family:
        "Bernoru Expanded",
        Georgia,
        serif !important;

    font-size:
        25px !important;

    font-weight:
        400 !important;

    line-height:
        1.13 !important;

    letter-spacing:
        -.015em !important;

    text-transform:
        none !important;
}


.jcjg-card-title a,
.jcjg-card-title a:link,
.jcjg-card-title a:visited {
    color:
        #32312D !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


.jcjg-card-title a:hover {
    color:
        #886044 !important;
}



/* ============================================================
   11. SUMMARY
   ============================================================ */

.jcjg-card-summary {
    margin:
        0
        0
        17px !important;

    padding:
        0 !important;

    color:
        rgba(50, 49, 45, .72);

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        12px !important;

    font-weight:
        400;

    line-height:
        1.65 !important;
}



/* ============================================================
   12. DATE
   ============================================================ */

.jcjg-card-date {
    margin: 0;

    color:
        rgba(50, 49, 45, .52);

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        8px;

    font-weight:
        500;

    line-height:
        1.4;

    letter-spacing:
        .17em;

    text-transform:
        uppercase;
}



/* ============================================================
   13. EMPTY STATE
   ============================================================ */

.jcjg-empty {
    padding:
        60px
        20px;

    color:
        rgba(50, 49, 45, .60);

    font-family:
        "Bernoru Expanded",
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        400;

    text-align:
        center;
}



/* ============================================================
   14. PAGINATION
   ============================================================ */

.jcjg-pagination {
    display: flex;

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

    flex-wrap: wrap;

    gap: 8px;

    margin-top:
        58px;
}


.jcjg-page {
    min-width:
        38px;

    height:
        38px;

    display:
        inline-flex;

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

    padding:
        0
        10px;

    border:
        1px solid
        rgba(136, 96, 68, .35);

    background:
        transparent;

    color:
        #886044 !important;

    font-family:
        "Anantason Expanded",
        Arial,
        sans-serif;

    font-size:
        10px;

    text-decoration:
        none !important;
}


.jcjg-page:hover,
.jcjg-page.is-current {
    border-color:
        #886044;

    background:
        #886044;

    color:
        #FFFFFF !important;
}



/* ============================================================
   15. TABLET
   ============================================================ */

@media (max-width: 1024px) {

    .jcjg-section {
        padding:
            34px
            0
            76px;
    }


    .jcjg-inner {
        width:
            calc(100% - 60px);
    }


    .jcjg-filter {
        margin-bottom:
            34px;
    }


    .jcjg-filter-scroll {
        justify-content:
            flex-start;
    }


    .jcjg-pill,
    .jcjg-more {
        min-width:
            145px;
    }


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

        gap:
            26px
            22px;
    }

}



/* ============================================================
   16. MOBILE
   ============================================================ */

@media (max-width: 680px) {

    .jcjg-section {
        padding:
            28px
            0
            60px;
    }


    .jcjg-inner {
        width:
            calc(100% - 40px);
    }


    /* --------------------------------
       CATEGORY FILTER
       Stays on one horizontal line.
       User can swipe left/right.
       -------------------------------- */

    .jcjg-filter {
        width:
            calc(100% + 20px);

        margin:
            0
            -20px
            30px
            0;
    }


    .jcjg-filter-scroll {
        justify-content:
            flex-start;

        gap:
            9px;

        padding-right:
            20px;
    }


    .jcjg-pill {
        min-width:
            auto;

        height:
            42px;

        padding:
            0
            20px;

        font-size:
            10px;
    }


    .jcjg-more {
        min-width:
            130px;

        height:
            42px;

        font-size:
            10px;
    }



    /* --------------------------------
       GRID
       -------------------------------- */

    .jcjg-grid {
        grid-template-columns:
            1fr;

        gap:
            26px;
    }


    .jcjg-card-content {
        padding:
            19px
            18px
            20px;
    }


    .jcjg-card-title {
        font-size:
            25px !important;
    }


    .jcjg-card-summary {
        font-size:
            12px !important;
    }


    .jcjg-pagination {
        margin-top:
            48px;
    }

}

/* === JC MOTION: jasmine drift + water ripples (added 2026-10-16 by Claude) — delete this whole block to remove === */
/* jasmine drift, side margins only (the middle of the page stays clear) */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9990;
  pointer-events:none;
  background-image:url("https://jaichan.com/wp-content/uploads/2026/10/jc-jasmine-drift-b-1.webp");
  background-repeat:repeat;
  background-size:1100px 1100px;
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 6%,transparent 13%,transparent 87%,#000 94%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 6%,transparent 13%,transparent 87%,#000 94%,#000 100%);
  animation:jcDriftA 80s linear infinite, jcSway 10s ease-in-out infinite;
}
@keyframes jcDriftA{from{background-position:0 0}to{background-position:-1100px 1100px}}
@keyframes jcSway{0%,100%{translate:0 0}50%{translate:14px -5px}}

/* water ripples on the hero sections */
.jc2-hero::before,
.jc2-hero::after,
.jct-hero::before,
.jct-hero::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
  outline:1px solid rgba(255,255,255,.35);
  outline-offset:22px;
  opacity:0;
  animation:jcRipple 7s ease-out infinite;
}
.jc2-hero::after,
.jct-hero::after{left:64%;top:76%;width:280px;height:92px;margin:-46px 0 0 -140px}
.jc2-hero::before,
.jct-hero::before{left:84%;top:58%;width:190px;height:62px;margin:-31px 0 0 -95px;animation-delay:3.5s}
@keyframes jcRipple{
  0%{transform:scale(.25);opacity:0}
  12%{opacity:.85}
  100%{transform:scale(1.9);opacity:0}
}

@media (max-width:1024px){
  html::before{display:none}
  .jc2-hero::after,.jct-hero::after{left:60%;top:82%;width:200px;height:66px;margin:-33px 0 0 -100px}
  .jc2-hero::before,.jct-hero::before{left:82%;top:64%;width:130px;height:44px;margin:-22px 0 0 -65px}
}

@media (prefers-reduced-motion:reduce){
  html::before{display:none}
  .jc2-hero::before,.jc2-hero::after,.jct-hero::before,.jct-hero::after{animation:none;opacity:0}
}
/* === END JC MOTION === */

/* === JC IMAGE CROPS (2026-10-19) — keep faces in frame on cropped cards === */
img[src*="jai-chan-royal-shoulder-neck-massage"]{object-position:50% 12% !important}
img[src*="jai-chan-asmr-royal-coconut-hair-spa"]{object-position:50% 22% !important}
img[src*="jai-chan-royal-thai-glow-facial"]{object-position:50% 30% !important}
/* === END JC IMAGE CROPS === */

/* === JC TYPE SCALE (2026-10-19 by Claude) — minimum readable text sizes. Delete this whole block to undo === */
/* small labels and kickers (were 8–12px) */
.jc2-kicker,.jch-kicker,.jct-about-kicker,.jcd-kicker,.jcd-section-kicker,.jcj-intro-v2__kicker,.jcx-kicker,
.jct-hero-tagline,.jct-card-label,.jcd-related-label,.jcjf-category,.jcjg-card-category,.jcjg-card-date,.jcj-date,
.jct-filter span,.jct-service-count,.jct-service-count span,.jct-tea-card a span,.jct-tea-cup strong,.jc-footer-title{font-size:13px!important}
/* decorative notes on images (were 9–10px) */
.jc2-hero-note span,.jct-hero-side-note span,.jc2-story-image-caption span,.jcd-image-note span{font-size:12px!important}
/* buttons and small links (were 9–13px) */
.jc2-button,.jct-book-button,.jch-service-link,.jcd-view-details,.jcd-booking-button,.jct-reset,.jcjf-button span,
.jcx-btn,.jc-menu-book a,.wp-block-button__link,.jcjg-pill,.jcj-categories a,.jcf-line-btn,.contact-form .pushbutton-wide,.jcd-art-more{font-size:14px!important}
/* durations, breadcrumbs, meta (were 11–13px) */
.jch-service-duration,.jct-duration,.jcd-related-meta span,.jcd-meta-item,.jcd-booking-note,.jct-breadcrumb a,.jct-breadcrumb span{font-size:14px!important}
/* body copy (were 12–14px) */
.jc2-hero-subtitle{font-size:16px!important;line-height:1.6!important}
.jch-service-content p,.jcx-card > p,.jcjf-summary,.jcd-description p{font-size:16px!important;line-height:1.7!important}
.jcjg-card-summary{font-size:15px!important;line-height:1.65!important}
.jch-services-heading p,.jct-hero-copy p,.jcj-intro-v2__description{font-size:17px!important;line-height:1.75!important}
.jcd-ritual-content h4,.jcf-sec{font-size:16px!important}
.contact-form label,.contact-form .grunion-field-text,.contact-form .grunion-label-text{font-size:15.5px!important}
.jp-relatedposts-post-a,.jp-relatedposts-post-date,.jp-relatedposts-post-context{font-size:15px!important}
.jc-footer-tagline,.jc-footer-copyright{font-size:13px!important}
.menu-item > a{font-size:15px!important}
.jcx-info > div > span{font-size:13px!important}
.jcx-info span a{font-size:16px!important}
/* === END JC TYPE SCALE === */

/* === JC TEA ICONS (2026-10-19 by Claude) — tea photo icons on the homepage tea cards; sprite = Media "jai-chan-tea-icons.webp". Delete this block to go back to colour dots === */
.jct-tea .jct-tea-dot{width:76px;height:76px;margin:2px 0 24px 2px;background:var(--tea) url("https://jaichan.com/wp-content/uploads/2026/10/jai-chan-tea-icons.webp") no-repeat 0 0/600% 100%!important;box-shadow:0 0 0 1.5px #886044,0 0 0 6px #fff,0 0 0 7px #E6DED4!important}
.jct-tea-card:nth-child(2) .jct-tea-dot{background-position:20% 0!important}
.jct-tea-card:nth-child(3) .jct-tea-dot{background-position:40% 0!important}
.jct-tea-card:nth-child(4) .jct-tea-dot{background-position:60% 0!important}
.jct-tea-card:nth-child(5) .jct-tea-dot{background-position:80% 0!important}
.jct-tea-card:nth-child(6) .jct-tea-dot{background-position:100% 0!important}
/* === END JC TEA ICONS === */

/* === JC STORY CAPTION (2026-10-19 by Claude) — keeps the white caption readable on light photos === */
.jc2-story-image::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(50,49,45,.5),rgba(50,49,45,0));pointer-events:none}
.jc2-story-image-caption{z-index:1}
.jc2-story-image-caption span{text-shadow:0 1px 10px rgba(50,49,45,.45)}
/* === END JC STORY CAPTION === */