/* =========================================================
   e JEM mizu — Frontend Theme
   Gold / cream brand skin for the public marketing site.
   Loaded after plugins.css / style.css so it can override them.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Montserrat:wght@800;900&display=swap');

:root {
    --jem-cream: #fdf6de;
    --jem-cream-soft: #fbf1cf;
    --jem-cream-dark: #f3e6bb;
    --jem-gold: #b8923e;
    --jem-gold-dark: #8c6b22;
    --jem-gold-darker: #6e5219;
    --jem-gold-light: #d9b565;
    --jem-brown-text: #4a3b1a;
    --jem-text: #3a3a3a;
    --jem-radius: 18px;
}

body.jem-body {
    font-family: 'Nunito Sans', 'Poppins', sans-serif;
    color: var(--jem-text);
    background-color: var(--jem-cream);
}

/* ---------------------------------------------------------
   Elegant on-scroll reveal for every section (see the small
   IntersectionObserver script in template.php that toggles
   .jem-reveal--visible as each section enters the viewport).
   --------------------------------------------------------- */
.jem-reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                transform .9s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.jem-reveal.jem-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .jem-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Wraps the spec table (Volume per botol / Isi per dus / ...). A ::before
   bleeds the same gold-dark color far to the left — behind the bottle
   photo (see z-index:2 on .jem-fill-height above) — while the actual
   text stays exactly where it already sat, on the right. The section's
   own overflow:hidden naturally clips the bleed at the section edge, so
   it reads as "the band starts from the left of the section". */
.jem-spec-band-wrap {
    position: relative;
    margin-top: 3vh;
}

.jem-spec-band-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Bleed left roughly by the bottle column's own width (col-lg-5 is
       5/12, this wrapper's column is col-lg-7 i.e. 7/12, so 5/7 of this
       element's own width lines it up with about where the bottle
       column starts) instead of an arbitrary huge value that reached
       all the way to the section edge. */
    left: -57.4%;
    right: 0;
    background-color: var(--jem-gold-dark);
    border-radius: var(--jem-radius);
    z-index: 0;
}

@media (max-width: 991.98px) {
    .jem-spec-band-wrap::before {
        /* columns stack on mobile, so there's no bottle column beside
           it to line up with — keep the band to just this element. */
        left: 0;
    }
}

.jem-spec-band-wrap .jem-spec-table {
    position: relative;
    z-index: 1;
    background-color: transparent;
}

/* Makes an image fill its column top-to-bottom, matching however tall
   the sibling column's content is — no vh unit needed. Requires a flex
   parent (row is flex by default, with align-items:stretch as the
   browser default, so the column itself is already stretched to match
   the tallest column; d-flex on the column then lets this img claim
   100% of that resolved height while keeping its own aspect ratio). */
.jem-fill-height {
    height: 1046px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-top: -3vh;
    margin-left: 6vw !important;
    position: relative;
    z-index: 2;
}

/* On mobile the columns stack (no more side-by-side stretch), so a
   1046px-tall image is way too big for the viewport — give it its own
   much smaller fixed size and a lighter pull-up instead. */
@media (max-width: 991.98px) {
    .jem-fill-height {
        height: 420px;
        margin-top: -6vh;
        /* The desktop-only nudge-right trick (margin-left: 6vw !important
           above) has no media query guarding it, so it was still shoving
           the bottle off-center on mobile too. Neutralize it here. */
        margin-left: 0 !important;
    }

    /* Bottle stacks above "Air Minum Alami" text on mobile (columns wrap)
       — make sure it's horizontally centered rather than pinned to
       whichever edge the flex column happens to shrink-wrap toward. */
    .jem-bottle-col {
        width: 100%;
        justify-content: center;
    }

    /* flex-centering still wasn't landing it visually centered — force it
       directly on just this bottle image. */
    .jem-bottle-col .jem-fill-height {
        position: static;
        padding-left: 33%;
    }

    /* Hero CTA buttons ("Lihat Produk" / "Gabung Jadi Agen") — center
       them as a group instead of left-aligned under the hero copy. */
    .jem-hero-cta {
        justify-content: center;
    }
}

/* Product page uses a different pull-up amount than Home for the same
   .jem-fill-height treatment — scoped via the body's page-<segment>
   class (see template.php) rather than a second class name. */
body.page-produk .jem-fill-height {
    margin-top: -8vh;
}

/* Pull the footer.png spec bar up snug against the page's last section —
   its own py-* padding otherwise leaves a big gap before the footer. */
.content-wrapper > section:last-of-type {
    padding-bottom: 40vh !important;
}

/* Belt-and-suspenders: pull the footer bar itself up a touch so it
   overlaps any stray subpixel/line-height gap left by the section above,
   regardless of which page it's rendered on. */
.jem-footer-bar {
    margin-top: -41vh;
    position: relative;
}

@media (max-width: 767.98px) {
    .jem-footer-bar {
        margin-top: -42px;
    }
}

/* "Komitmen Kami" (About page) — full-bleed family photo on the left with
   a gold-to-white gradient behind the text on the right (matches the
   reference design), and zero gap before the footer.png bar below it. */
.content-wrapper > section.jem-komitmen-section:last-of-type {
    padding-bottom: 0 !important;
}

.jem-komitmen-section {
    padding-top: 0;
    padding-bottom: 0;
    background: linear-gradient(to right, var(--jem-gold-dark) 0%, var(--jem-gold-light) 38%, #fff 78%);
}

.jem-komitmen-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.jem-komitmen-text {
    padding: 48px 32px;
}

@media (min-width: 992px) {
    .jem-komitmen-text {
        padding: 48px 56px;
    }
}

@media (max-width: 991.98px) {
    .jem-komitmen-section {
        background: linear-gradient(to bottom, var(--jem-gold-dark) 0%, var(--jem-gold-light) 30%, #fff 65%);
    }

    .jem-komitmen-img {
        min-height: 280px;
    }
}

.jem-body h1,
.jem-body h2,
.jem-body h3,
.jem-body h4,
.jem-body .jem-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    color: var(--jem-gold-dark);
    letter-spacing: 0.5px;
}

/* Section titles like "MENGAPA HARUS e JEM Mizu" / "TESTIMONI e JEM Mizu"
   were relying on Bootstrap's .display-6 for size, which the theme's own
   base CSS quietly shrinks/overrides. Force the intended big Poppins
   look here instead, regardless of what utility class is alongside it. */
h2.jem-heading {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    font-size: 5.5vw !important;
    line-height: 1.1 !important;
}

/* Second line of a two-line section title (e.g. "e JEM Mizu" under
   "MENGAPA HARUS" / "TESTIMONI") — deliberately smaller and thinner
   than the bold line above it, while staying legible, and keeps its
   normal mixed case (not forced uppercase like the bold line above it).
   Same treatment on both sections so they read as consistent. */
.jem-heading-light {
    font-size: clamp(1.1rem, 2.2vw, 1.8rem) !important;
    font-weight: 300 !important;
    text-transform: none;
}

/* Bolder variant of the light second line (e.g. "e JEM Mizu" under
   "MANFAAT" on the Product page) — still lighter than the main bold
   word above it, but thicker than the default .jem-heading-light. */
.jem-heading-light-strong {
    font-weight: 700 !important;
}

/* "TESTIMONI" heading treatment: chunky Montserrat ExtraBold, cream/white
   fill, thick gold-brown outline, subtle drop shadow, tight uppercase
   tracking — a poster-style engraved look distinct from the plain
   "MENGAPA HARUS" title, while staying the same overall size (5.5vw via
   h2.jem-heading). */
.jem-heading-outlined {
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
    color: #fff !important;
    -webkit-text-stroke: 5px var(--jem-gold-dark);
    text-stroke: 5px var(--jem-gold-dark);
    paint-order: stroke fill;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 3px 4px 6px rgba(74, 59, 26, 0.45);
}

/* The "e JEM Mizu" line under TESTIMONI stays plain — no stroke/shadow/
   uppercase, just the same ordinary gold-dark text used everywhere else. */
.jem-heading-outlined .jem-heading-light {
    font-family: 'Poppins', sans-serif;
    color: var(--jem-gold-dark);
    -webkit-text-stroke: 0;
    text-stroke: 0;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0.5px;
}

.jem-body a {
    color: var(--jem-gold-dark);
}

/* ---------------------------------------------------------
   About page — "PT JEM" hero title (+50% bigger than the
   shared .jem-hero-title base) and "INDONESIA SEJAHTERA"
   subtitle (-40% smaller than the forced h2.jem-heading size,
   and not bold — just a plain, lighter-weight caption).
   --------------------------------------------------------- */
.jem-title-xl {
    font-size: 4.5rem !important;
}

@media (max-width: 991px) {
    .jem-title-xl {
        font-size: 3.15rem !important;
    }
}

h2.jem-heading.jem-indonesia-sub {
    font-size: 3.3vw !important;
    font-weight: 400 !important;
    letter-spacing: 2px;
}

/* ---------------------------------------------------------
   Visi / Misi — icon circle overlapped into a wide gold pill,
   centered as one unit (no white card background behind it).
   --------------------------------------------------------- */
.jem-badge-combo {
    /* block-level flex (not inline-flex) so this sits on its own line
       above the paragraph/list that follows it — inline-flex was being
       laid out on the same inline "line" as the following inline-block
       list, baseline-aligned, which is why it visually ended up stuck
       down next to the list instead of stacked above it. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.jem-badge-combo .jem-icon-circle {
    margin-top: 3vh;
    position: relative;
    z-index: 2;
    margin-right: -25px;
    background-color: var(--jem-gold-dark);
}

.jem-badge-combo .jem-icon-circle svg {
    stroke: #fff;
}

.jem-icon-circle-lg {
    width: 68px;
    height: 68px;
}

.jem-icon-circle-lg svg {
    width: 34px;
    height: 34px;
}

.jem-subtitle-lg {
    font-size: 1.6rem;
    padding: 16px 40px 16px 46px;
    letter-spacing: 2px;
}

/* ---------------------------------------------------------
   Decorative wrapper — cream background + gold swirl corners
   --------------------------------------------------------- */
.jem-section {
    position: relative;
    background-color: var(--jem-cream);
    overflow: hidden;
}

.jem-section.jem-section--soft {
    background-color: var(--jem-cream-soft);
}

/* Real brand floral artwork (replaces the hand-drawn swirl SVG), tiled
   vertically down BOTH edges using the seamless loop asset — two layers
   (left + right), each repeating on the y-axis, so the right side isn't
   left blank on tall sections at any screen size (mobile/tablet incl.). */
.jem-floral-bg {
    background-image:
        url('../images/ejemmizu-background-loop.png'),
        url('../images/ejemmizu-background-loop.png');
    background-repeat: repeat-y, repeat-y;
    background-position: top left, top right;
    background-size: auto 49vw, auto 49vw;
}

@media (max-width: 767.98px) {
    .jem-floral-bg {
        background-size: auto 170px, auto 170px;
    }
}

.jem-section > .container {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   Header / Nav
   --------------------------------------------------------- */
.jem-header {
    background-color: transparent;
    padding: 6px 0;
    border-bottom: none;
    /* Plain CSS sticky header instead of the theme's Headhesive clone-on-scroll
       plugin: that plugin clones ".navbar" into a fixed element appended
       outside .jem-header, so it loses this file's styling and its own
       (unstyled) height ends up overlapping page content while scrolling.
       We avoid that entirely by not using the ".navbar" class (see .jem-navbar
       below) and relying on position: sticky here instead. */
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

/* Toggled by a small scroll listener in template.php once the page has
   scrolled past the header's own height — frosted glass-white look while
   scrolled, fully transparent again once back at the very top. */
/* Frosted background is applied via a pseudo-element rather than
   directly on .jem-header itself. `backdrop-filter` on an element
   creates a new containing block for any position:fixed descendant —
   and the mobile offcanvas drawer (position:fixed) lives INSIDE this
   header. That meant opening the drawer, then scrolling (which adds
   .jem-header--scrolled), silently re-anchored the "fixed" drawer to
   the header's own small box instead of the viewport, making it seem
   to vanish. Keeping backdrop-filter off the header element itself
   avoids creating that containing block in the first place. */
.jem-header.jem-header--scrolled {
    box-shadow: 0 6px 24px rgba(140, 107, 34, 0.12);
}

.jem-header.jem-header--scrolled::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.jem-navbar {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Rebuild the row layout that the old theme's ".navbar > .container" rule
   used to provide — lost when we renamed the nav away from ".navbar".
   Logo stays pinned left; everything else (menu links, search, login)
   is grouped together and pushed flush right via margin-left:auto on
   the brand — no more space-between spreading the menu into the middle. */
.jem-navbar .container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
}

.jem-navbar .navbar-brand {
    flex: 0 0 auto;
    margin-right: auto;
}

.jem-navbar .navbar-collapse {
    flex: 0 0 auto;
}

.jem-navbar .navbar-other {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .jem-navbar .container {
        flex-wrap: wrap;
    }
}

/* Mobile hamburger drawer — the base theme's offcanvas nav ships with a
   near-black background (#1e2228), which never got restyled for the
   brand's light gold/cream look and just looked like a broken dark panel.
   Give it the same cream background and gold accents as the rest of the
   site. */
@media (max-width: 991.98px) {
    .jem-navbar .offcanvas-nav {
        background: var(--jem-cream) !important;
        box-shadow: 4px 0 24px rgba(74, 59, 26, 0.25);
        /* Sits inside .jem-header (sticky, z-index:1030) — bump it well
           above that ancestor's own stacking level plus everything else
           on the page so it's never rendered "behind" page content. */
        z-index: 2100 !important;
        padding-top: 1rem;
        /* Base theme leaves padding-right:0 (only padding-left:1.5rem),
           so content — including the pill buttons below — never reached
           the panel's actual right edge. Match both sides. */
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box;

        /* The base theme transitions `left` and `visibility` with the SAME
           duration/delay. Browsers only flip a non-interpolable property
           like visibility at the very end of a transition by default, so
           on open the panel stayed invisible until the slide-in finished
           — exactly the "baru keliatan pas full expanded" bug. Forcing a
           0-delay here means visibility flips to visible immediately. */
        transition: left .3s ease-in-out, visibility 0s linear 0s !important;
    }

    .jem-navbar .offcanvas-header {
        border-bottom: 1px solid rgba(140, 107, 34, 0.15);
        margin-bottom: 1rem;
        padding-top: 1.5rem;
    }

    .jem-navbar .offcanvas-nav-close {
        color: var(--jem-gold-dark);
        opacity: 1;
        font-size: 1.4rem;
    }

    .jem-navbar .navbar-nav {
        gap: 8px;
        width: 100%;
    }

    .jem-navbar .offcanvas-nav .nav-item {
        width: 100%;
    }

    .jem-navbar .offcanvas-nav .jem-nav-pill {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.85rem;
        padding: 12px 14px;
        margin: 0;
    }

    /* Login pill in the mobile drawer — outline style so it reads as a
       distinct action from the plain page-link pills above it. */
    .jem-navbar .offcanvas-nav .jem-nav-pill--login {
        background-color: transparent;
        border: 1.5px solid var(--jem-gold-dark);
        color: var(--jem-gold-dark) !important;
        margin-top: 8px;
    }

    .jem-navbar .offcanvas-nav .jem-nav-pill--login:hover {
        background-color: var(--jem-gold-dark);
        color: #fff !important;
    }

    /* The hamburger flips into an "X" itself when the drawer is open
       (via the .active class below), which then sat right next to the
       drawer's own close button — two X's on screen at once. Hide the
       header's hamburger entirely while the drawer is open. */
    .jem-header:has(.offcanvas-nav.open) .navbar-hamburger {
        visibility: hidden;
    }

    /* Hamburger button — default theme bars are a generic dark navy that
       clashes with the brand palette and just look unfinished. */
    .navbar-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--jem-cream-dark);
        border-radius: 50%;
    }

    button.hamburger {
        width: 20px;
        height: 16px;
        margin-left: 0;
    }

    button.hamburger span,
    button.hamburger:after,
    button.hamburger:before {
        background: var(--jem-gold-dark) !important;
        border-radius: 2px;
    }

    /* Once scrolled, .jem-header--scrolled turns near-white/frosted — a
       light-cream circle with gold bars on top of that blends right in
       and the button effectively disappears. Flip to a solid gold circle
       with white bars so it stays visible against the frosted header. */
    .jem-header--scrolled .navbar-hamburger {
        background-color: var(--jem-gold-dark);
        box-shadow: 0 2px 8px rgba(74, 59, 26, 0.25);
    }

    .jem-header--scrolled button.hamburger span,
    .jem-header--scrolled button.hamburger:after,
    .jem-header--scrolled button.hamburger:before {
        background: #fff !important;
    }
}

/* Home hero — the 3-bottle image reads too large on phones next to the
   equally big logo above it; give it its own, noticeably smaller cap. */
@media (max-width: 575.98px) {
    .jem-hero-bottle-home {
        max-width: 82vw !important;
    }
}

/* Product page hero — bottle splash image cap for mobile. */
@media (max-width: 767.98px) {
    .jem-hero-bottle-produk {
        max-width: 365px !important;
    }
}

.jem-header .navbar-brand img {
    height: 42px;
    width: auto;
}

.jem-nav-pill {
    display: inline-block;
    background-color: var(--jem-gold-dark);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    padding: 6px 14px;
    border-radius: 999px;
    margin: 3px;
    line-height: 1.2;
    transition: background-color .2s ease;
}

.jem-nav-pill:hover,
.jem-nav-pill.active {
    background-color: var(--jem-gold-darker);
    color: #fff !important;
}

.jem-nav-search {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--jem-gold-dark);
    font-size: 0.95rem;
    margin-left: 8px;
    transition: color .2s ease, transform .2s ease;
}

.jem-nav-search:hover {
    color: var(--jem-gold-darker);
    transform: scale(1.1);
}

.jem-nav-login {
    background-color: transparent;
    border: 1.5px solid var(--jem-gold-dark);
    color: var(--jem-gold-dark) !important;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 5px 16px;
    border-radius: 999px;
    margin-left: 8px;
}

.jem-nav-login:hover {
    background-color: var(--jem-gold-dark);
    color: #fff !important;
}

/* ---------------------------------------------------------
   Page title pill (e.g. "KONTAK KAMI")
   --------------------------------------------------------- */
.jem-title-pill {
    display: inline-block;
    background-color: var(--jem-gold-dark);
    color: #fff;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    font-size: 1.9rem;
    padding: 14px 46px;
    border-radius: 999px;
    letter-spacing: 1px;
}

.jem-subtitle {
    display: inline-block;
    background-color: var(--jem-gold-dark);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 7px 20px;
    border-radius: 999px;
    margin: 4px 6px;
    box-shadow: 0 6px 16px rgba(140, 107, 34, 0.18);
    transition: transform .2s ease, background-color .2s ease;
}

.jem-subtitle:hover {
    transform: translateY(-3px);
    background-color: var(--jem-gold-darker);
}

/* ---------------------------------------------------------
   Solid gold-brown section (Mengapa Harus / Testimoni bands)
   --------------------------------------------------------- */
.jem-section--gold {
    background-color: var(--jem-gold-dark);
    color: #fff;
}

.jem-section--gold .jem-heading {
    color: #fff;
}

.jem-pill-white {
    display: inline-block;
    background-color: #fff;
    color: var(--jem-gold-dark);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 26px;
    border-radius: 999px;
    margin-bottom: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform .2s ease;
}

.jem-pill-white:hover {
    transform: translateY(-3px);
}

.jem-testi-card {
    background-color: var(--jem-gold);
    border-radius: var(--jem-radius);
    padding: 22px 20px;
    color: #fff;
    height: 100%;
    box-shadow: 0 10px 26px rgba(140, 107, 34, 0.22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.jem-testi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(140, 107, 34, 0.3);
}

.jem-testi-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.jem-testi-avatar svg {
    width: 30px;
    height: 30px;
    stroke: #fff;
}

.jem-testi-city {
    font-size: 0.75rem;
    opacity: 0.8;
    letter-spacing: 0.3px;
}

.jem-stars {
    color: #fff;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   Spec table (Volume / Isi per dus / Berat / Kemasan)
   --------------------------------------------------------- */
.jem-spec-table {
    background-color: var(--jem-gold-dark);
    color: #fff;
    border-radius: var(--jem-radius);
    padding: 22px 28px;
}

.jem-spec-table .row + .row {
    margin-top: 6px;
}

.jem-spec-table .jem-spec-label {
    font-weight: 700;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.jem-hero-title {
    font-size: 3rem;
    line-height: 1.05;
    color: var(--jem-gold-dark);
    font-weight: 800;
}

.jem-hero-kanji {
    color: var(--jem-gold);
    font-size: 1.82rem;
    font-weight: 600;
}

.jem-tech-label {
    color: var(--jem-gold);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Certification badges (BPOM / SNI / Halal) — the source images come in
   at different native sizes, which reads messy side by side. Pin them
   all to the same height so the row lines up cleanly regardless. */
.jem-badge-img {
    height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .jem-badge-img {
        height: 44px;
    }
}

/* Product page hero — bigger title/kanji/label than the shared defaults. */
body.page-produk .jem-hero-title {
    font-size: 20vh;
    font-weight: 400;
}

body.page-produk .jem-hero-title strong {
    font-weight: 800;
}

body.page-produk .jem-hero-kanji {
    font-size: 3.22rem;
}

body.page-produk .jem-tech-label {
    font-size: 2.24rem;
}

@media (max-width: 991px) {
    body.page-produk .jem-hero-title {
        font-size: 3.92rem;
    }

    body.page-produk .jem-hero-kanji {
        font-size: 2.66rem;
    }

    body.page-produk .jem-tech-label {
        font-size: 1.96rem;
    }
}

@media (max-width: 575.98px) {
    body.page-produk .jem-hero-title {
        font-size: 2.7rem;
    }

    body.page-produk .jem-hero-kanji {
        font-size: 1.6rem;
    }

    body.page-produk .jem-tech-label {
        font-size: 1.05rem;
    }
}

/* Product page hero — Halal/SNI/BPOM badges stacked vertically beside
   the bottle photo (desktop only; they drop below the bottle on mobile
   via the separate d-lg-none row in the markup). */
.jem-hero-badges-vert {
    position: absolute;
    left: 0;
    bottom: 4%;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 3;
}

.jem-hero-badges-vert .jem-badge-img {
    height: 44px;
}

/* ---------------------------------------------------------
   Product page — "MANFAAT" rows: icon badge overlapping the
   left edge of a heavily rounded, gold-bordered card.
   --------------------------------------------------------- */
.jem-manfaat-row-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Grow the rows themselves a bit (via .jem-manfaat-row padding below)
   rather than force-distributing them with space-between, which left
   comically huge gaps once the column stretched to match the left
   column's height. */
.jem-manfaat-row-list--fill {
    flex: 1 1 auto;
    justify-content: center;
    gap: 26px;
}

/* Nudge the benefit rows right a touch so they don't sit flush against
   the column's left edge, right next to the section boundary. */
.jem-manfaat-row-list--offset {
    padding-left: 24px;
}

@media (max-width: 991.98px) {
    .jem-manfaat-row-list--offset {
        padding-left: 0;
    }
}

.jem-manfaat-row {
    display: flex;
    align-items: center;
    gap: 18px;
    background-color: var(--jem-cream);
    border: 2px solid var(--jem-gold);
    border-radius: 40px;
    padding: 20px 26px 20px 10px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.jem-manfaat-row:hover {
    transform: translateY(-4px);
    border-color: var(--jem-gold-dark);
    box-shadow: 0 10px 22px rgba(140, 107, 34, 0.16);
}

@media (max-width: 575.98px) {
    .jem-manfaat-row {
        gap: 12px;
        padding: 14px 18px 14px 8px;
        border-radius: 28px;
    }

    .jem-manfaat-row .jem-icon-circle {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-top: 0;
    }

    .jem-manfaat-row .jem-icon-circle svg {
        width: 22px;
        height: 22px;
    }
}

.jem-manfaat-row .jem-icon-circle {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    background-color: var(--jem-gold-dark);
    margin-left: 5px;
    margin-top: 10px;
}

.jem-manfaat-row .jem-icon-circle svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
}

.jem-icon-circle-md {
    width: 56px;
    height: 56px;
}

/* Small colored square bullets ahead of "Elektron (Ion Negatif)" /
   "Radikal Bebas" subheadings on the Product page. */
.jem-bullet-square {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-top: 6px;
    flex: 0 0 14px;
}

.jem-bullet-square--blue {
    background-color: #3f78e0;
}

.jem-bullet-square--red {
    background-color: #e0553f;
}

.jem-bullet-square--green {
    background-color: #3fa562;
}

/* Keeps a paragraph's text lined up with a sibling paragraph that has a
   .jem-bullet-square in front of it (bullet width + the flex gap). */
.jem-align-with-bullet {
    padding-left: 22px;
}

/* Tighter paragraph rhythm for the merged MANFAAT/PENGARUH copy column —
   less line-height and less space between paragraphs than the site
   default, so the block doesn't feel so spread out. */
.jem-tight-copy {
    font-size: 0.88rem;
}

.jem-tight-copy p {
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.jem-tight-copy h4.jem-heading {
    font-size: 1.1rem;
}

.jem-tight-copy .jem-feature-title {
    font-size: 0.95rem;
}

/* Pull "e JEM Mizu" / "Elektron pada Radikal Bebas" closer under the bold
   line above them than the site default, without the two lines crowding
   or overlapping each other. */
.jem-tight-copy h2.jem-heading {
    font-size: 2.6rem !important;
    line-height: 0.9 !important;
}

.jem-tight-copy .jem-heading-light {
    display: inline-block;
    margin-top: -0.1em;
}

@media (max-width: 575.98px) {
    .jem-tight-copy {
        font-size: 0.85rem;
    }

    .jem-tight-copy h2.jem-heading {
        font-size: 1.9rem !important;
    }
}

/* The 0.35 line-height on .jem-tight-copy h2 (desktop) squashes
   "PENGARUH" right into "Elektron pada Radikal Bebas" on phones, where
   the two lines wrap and need more breathing room to stay legible. */
@media (max-width: 767.98px) {
    .jem-tight-copy h2.jem-heading {
        line-height: 1.15 !important;
    }

    .jem-tight-copy .jem-heading-light {
        margin-top: 0.35em;
    }
}

/* "Elektron (Ion Negatif)" / "Radikal Bebas" blocks on the Product page —
   a subtle card treatment (left accent border matches the bullet color)
   instead of bare text, for a bit more visual structure. */
.jem-pengaruh-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #fff;
    border-radius: var(--jem-radius);
    padding: 18px 20px;
    box-shadow: 0 8px 20px rgba(140, 107, 34, 0.08);
}

.jem-pengaruh-block .jem-bullet-square {
    margin-top: 4px;
}

/* Full-width infographic assets (Proses Radikal Bebas) get a light frame
   so they read as a finished panel rather than a bare image floating on
   the page background. Kegunaan Sehari-hari intentionally does NOT use
   this — its own background already matches the section, so a shadow
   frame would look like an unwanted box around it. */
.jem-framed-img {
    border-radius: var(--jem-radius);
    box-shadow: 0 14px 34px rgba(140, 107, 34, 0.14);
}

.jem-kegunaan-intro {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--jem-brown-text);
    max-width: none;
    width: 100%;
    text-align: left;
}

@media (max-width: 767.98px) {
    .jem-kegunaan-intro {
        font-size: 0.85rem;
    }
}

/* ---------------------------------------------------------
   Cards / feature blocks
   --------------------------------------------------------- */
.jem-card {
    background-color: #fff;
    border-radius: var(--jem-radius);
    padding: 26px 24px;
    box-shadow: 0 8px 24px rgba(140, 107, 34, 0.08);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}

.jem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(140, 107, 34, 0.16);
}

.jem-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--jem-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.jem-icon-circle svg {
    width: 30px;
    height: 30px;
    stroke: var(--jem-gold-dark);
}

.jem-feature-title {
    font-weight: 800;
    color: var(--jem-gold-dark);
    margin-bottom: 6px;
}

/* ---------------------------------------------------------
   Contact info blocks
   --------------------------------------------------------- */
.jem-contact-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background-color: var(--jem-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jem-contact-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--jem-gold-dark);
}

.jem-contact-divider {
    width: 1px;
    background-color: var(--jem-gold);
    opacity: 0.5;
}

/* ---------------------------------------------------------
   Image placeholders (client will swap with real photos)
   --------------------------------------------------------- */
.jem-img-placeholder {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: repeating-linear-gradient(45deg, #f3e6bb, #f3e6bb 10px, #ede0b0 10px, #ede0b0 20px);
    border: 2px dashed var(--jem-gold);
    border-radius: var(--jem-radius);
    color: var(--jem-gold-dark);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 20px;
    box-sizing: border-box;
}

.jem-img-placeholder small {
    display: block;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 4px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.jem-btn {
    display: inline-block;
    background-color: var(--jem-gold-dark);
    color: #fff !important;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 999px;
    border: none;
    box-shadow: 0 8px 20px rgba(140, 107, 34, 0.28);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.jem-btn:hover {
    background-color: var(--jem-gold-darker);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(140, 107, 34, 0.34);
}

.jem-btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--jem-gold-dark) !important;
    font-weight: 700;
    padding: 12px 32px;
    border-radius: 999px;
    border: 2px solid var(--jem-gold-dark);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.jem-btn-outline:hover {
    background-color: var(--jem-gold-dark);
    color: #fff !important;
    transform: translateY(-3px);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.jem-footer {
    background-color: var(--jem-gold-dark);
    color: #fff;
}

.jem-footer a {
    color: #fff;
}

.jem-footer h4 {
    color: #fff;
}

@media (max-width: 991px) {
    .jem-hero-title { font-size: 2.1rem; }
    .jem-title-pill { font-size: 1.4rem; padding: 10px 30px; }
}

/* "MANFAAT e JEM Mizu" ready-made asset — capped at 900px on desktop
   (see inline style), but on mobile that cap just gets clipped by
   the container padding, so let it use the full available width there. */
@media (max-width: 767.98px) {
    .jem-manfaat-img {
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------
   Hero entrance animations
   --------------------------------------------------------- */
@keyframes jemFadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jemFadeInScale {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes jemFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.jem-anim-logo {
    animation: jemFadeInScale .9s ease both;
    /* the logo is gold text on a transparent PNG — on the cream page
       background it blends away without a bit of separation */
    filter: drop-shadow(0 3px 4px rgba(74, 59, 26, .35));
}

.jem-anim-bottle {
    /* fade/slide in once, then settle into a gentle continuous float */
    animation: jemFadeInUp .9s ease .15s both,
               jemFloat 4s ease-in-out 1.05s infinite;
}

.jem-anim-text {
    animation: jemFadeInUp .9s ease .3s both;
}

.jem-anim-badges {
    animation: jemFadeInUp .9s ease .45s both;
}

@media (prefers-reduced-motion: reduce) {
    .jem-anim-logo,
    .jem-anim-bottle,
    .jem-anim-text,
    .jem-anim-badges {
        animation: none;
    }
}

/* ---------------------------------------------------------
   Spotlight-style search overlay (Ctrl/⌘+K or the nav search icon)
   --------------------------------------------------------- */
body.jem-search-lock {
    overflow: hidden;
}

.jem-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    background-color: rgba(74, 59, 26, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.jem-search-overlay.jem-search-overlay--open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
}

.jem-search-panel {
    width: 92%;
    max-width: 640px;
    transform: translateY(-16px) scale(.97);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.jem-search-overlay--open .jem-search-panel {
    transform: translateY(0) scale(1);
}

.jem-search-form {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 20px 28px;
    box-shadow: 0 24px 60px rgba(74, 59, 26, 0.35);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.jem-search-icon {
    flex: 0 0 auto;
    font-size: 1.3rem;
    color: var(--jem-gold-dark);
}

.jem-search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--jem-brown-text);
}

.jem-search-input::placeholder {
    color: rgba(74, 59, 26, 0.45);
    font-weight: 400;
}

.jem-search-esc {
    flex: 0 0 auto;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--jem-gold-dark);
    background-color: rgba(140, 107, 34, 0.12);
    border: 1px solid rgba(140, 107, 34, 0.25);
    border-radius: 6px;
    padding: 3px 8px;
}

@media (max-width: 767.98px) {
    .jem-search-overlay {
        padding-top: 10vh;
    }

    .jem-search-form {
        padding: 16px 20px;
        gap: 12px;
    }

    .jem-search-input {
        font-size: 1.1rem;
    }

    .jem-search-esc {
        display: none;
    }
}

/* ---------------------------------------------------------
   Back-to-top button — theme's default color scheme (purple.css)
   uses blue, override to the brand's gold to match everything else.
   --------------------------------------------------------- */
.progress-wrap:after {
    color: var(--jem-gold-dark);
}

.progress-wrap svg.progress-circle path {
    stroke: var(--jem-gold-dark);
}