:root {
	--jnj-blue: #2F8FE0;
	--jnj-blue-dark: #1F7AD0;
	--jnj-yellow: #FFC914;
	--jnj-ink: #2B2D42;
}

/* Kustomisasi desain JNJ Baby Shop */

/* Logo (PNG 900x476) - header builder Porto memakai ukuran asli bila tidak dibatasi */
.logo img,
.header-builder-p .logo img,
#header .logo img {
	width: 120px;
	max-width: 100%;
	height: auto;
}
.sticky-header .logo img,
#header.sticky-header .logo img {
	width: 84px;
}
@media (max-width: 991px) {
	.logo img,
	#header .logo img {
		width: 88px;
	}
}

/* ---------------------------------------------------------------
 * Footer (Porto footer builder #1189, satu widget HTML)
 * --------------------------------------------------------------- */
.jnj-footer {
	--jnj-blue: #2F8FE0;
	--jnj-blue-dark: #1F7AD0;
	--jnj-navy: #12304F;
	--jnj-navy-dark: #0D2540;
	--jnj-yellow: #FFC914;
	--jnj-ink: #2B2D42;
	font-family: inherit;
	color: rgba(255, 255, 255, .82);
	line-height: 1.6;
}
.jnj-footer a { text-decoration: none; transition: color .2s, background-color .2s, border-color .2s, transform .2s; }
.jnj-footer ul { list-style: none; margin: 0; padding: 0; }
.jnj-footer h2, .jnj-footer h3 { margin: 0; }
.jnj-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* Pita ajakan (CTA) */
.jnj-footer__cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--jnj-blue) 0%, #57AEF0 100%);
	color: #fff;
	padding: 64px 0;
}
.jnj-footer__cta::before,
.jnj-footer__cta::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
}
.jnj-footer__cta::before { width: 340px; height: 340px; right: -80px; top: -140px; }
.jnj-footer__cta::after  { width: 220px; height: 220px; left: 38%; bottom: -130px; }
.jnj-footer__cta-in { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.jnj-footer__cta h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.jnj-footer__cta p { margin: 12px 0 28px; max-width: 540px; color: rgba(255, 255, 255, .92); font-size: 1.05rem; }
.jnj-footer__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.jnj-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem; line-height: 1.2;
	border: 2px solid transparent;
}
.jnj-btn--yellow { background: var(--jnj-yellow); color: var(--jnj-ink) !important; }
.jnj-btn--yellow:hover { background: #FFD84D; transform: translateY(-2px); }
.jnj-btn--ghost { border-color: rgba(255, 255, 255, .85); color: #fff !important; }
.jnj-btn--ghost:hover { background: #fff; color: var(--jnj-blue-dark) !important; }
.jnj-footer__star { flex: 0 0 auto; width: 150px; height: auto; filter: drop-shadow(0 12px 18px rgba(18, 48, 79, .25)); animation: jnj-float 4s ease-in-out infinite; }
@keyframes jnj-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .jnj-footer__star { animation: none; } }

/* Isi footer */
.jnj-footer__main { background: var(--jnj-navy); padding: 64px 0 40px; }
.jnj-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1.4fr; gap: 40px; }
.jnj-footer__brand img { display: block; width: 170px; height: auto; margin-bottom: 16px; background: #fff; border-radius: 18px; padding: 8px 10px; }
.jnj-footer__brand p { margin: 0 0 20px; max-width: 320px; }
.jnj-footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.jnj-footer__social a {
	padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 600;
	color: #fff; border: 1px solid rgba(255, 255, 255, .28);
}
.jnj-footer__social a:hover { background: var(--jnj-yellow); border-color: var(--jnj-yellow); color: var(--jnj-ink); }
.jnj-footer h3 {
	position: relative; color: #fff; font-size: 1.05rem; font-weight: 700; padding-bottom: 12px; margin-bottom: 18px;
}
.jnj-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: var(--jnj-yellow); }
.jnj-footer__col li { margin: 0 0 10px; }
.jnj-footer__col li a { color: rgba(255, 255, 255, .82); }
.jnj-footer__col li a:hover { color: var(--jnj-yellow); }
.jnj-footer__contact li { display: flex; align-items: flex-start; gap: 12px; }
.jnj-footer__contact svg { flex: 0 0 20px; margin-top: 3px; color: var(--jnj-yellow); }
.jnj-footer__route { display: inline-block; margin-left: 4px; color: var(--jnj-yellow) !important; font-weight: 600; text-decoration: underline !important; }

/* Baris hak cipta */
.jnj-footer__bar { background: var(--jnj-navy-dark); padding: 18px 0; font-size: .85rem; color: rgba(255, 255, 255, .6); }
.jnj-footer__bar-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 991px) {
	.jnj-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
	.jnj-footer__star { width: 110px; }
}
@media (max-width: 575px) {
	.jnj-footer__cta { padding: 48px 0; }
	.jnj-footer__cta-in { flex-direction: column; align-items: flex-start; }
	.jnj-footer__star { display: none; }
	.jnj-footer__grid { grid-template-columns: 1fr; }
	.jnj-footer__main { padding: 48px 0 24px; }
	.jnj-btn { width: 100%; }
}

/* Cegah geser horizontal: pita miring, bentuk dekoratif, dan animasi scale melebihi lebar layar.
 * "clip" (bukan "hidden") agar elemen position: sticky tetap berfungsi.
 * Jangan beri max-width pada .e-parent / .porto-block: Porto sengaja melebarkan container teratas
 * sebesar 2x --porto-fluid-spacing di dalam .container-fluid. */
html,
body,
.page-wrapper {
	overflow-x: clip;
}

/* ---------------------------------------------------------------
 * Penyesuaian mobile (<= 767px)
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Hero beranda: tiga kolom mockup terlalu kecil untuk dibaca -> dua kolom lebih besar */
	.elementor-element-8c5894c {
		justify-content: center;
		align-items: center;
		gap: 12px;
	}
	.elementor-element-8c5894c > .elementor-element-daa3753,
	.elementor-element-8c5894c > .elementor-element-325aa7b {
		flex: 0 0 calc(50% - 6px);
		width: calc(50% - 6px);
		margin: 0;
	}
	.elementor-element-8c5894c > .elementor-element-cc50a21,
	.elementor-element-8c5894c .elementor-element-c9bf5de {
		display: none !important;
	}
	.elementor-element-daa3753 img,
	.elementor-element-325aa7b img {
		width: 100%;
		height: auto;
	}

	/* Halaman Tim Kami: kartu 2 kolom agar halaman tidak terlalu panjang */
	.elementor-element-4248bf9 > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px 12px !important;
	}

	/* Daftar produk: jarak antar item lebih rapat */
	.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child) {
		padding-bottom: 12px !important;
	}
}

/* ---------------------------------------------------------------
 * Animasi logo header (masuk memantul, melayang, goyang saat hover, kilau bintang)
 * --------------------------------------------------------------- */
#header .logo a,
.header-builder-p .logo a {
	position: relative;
	display: inline-block;
	animation: jnj-logo-float 3.6s ease-in-out 1.2s infinite;
	transform-origin: 50% 80%;
}
#header .logo img,
.header-builder-p .logo img {
	animation: jnj-logo-in .95s cubic-bezier(.2, .9, .3, 1.25) backwards;
	transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
	transform-origin: 50% 85%;
}
#header .logo a:hover img,
.header-builder-p .logo a:hover img {
	transform: scale(1.1) rotate(-4deg);
}
#header .logo a:active img,
.header-builder-p .logo a:active img {
	transform: scale(.94, 1.06);
}

/* Kilau di sekitar bintang maskot */
#header .logo a::before,
#header .logo a::after,
.header-builder-p .logo a::before,
.header-builder-p .logo a::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	background: #FFE66D;
	clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
	filter: drop-shadow(0 0 3px rgba(255, 201, 20, .9));
	opacity: 0;
	pointer-events: none;
	animation: jnj-sparkle 2.6s ease-in-out 1.4s infinite;
}
#header .logo a::before,
.header-builder-p .logo a::before {
	left: 70%;
	top: -4%;
}
#header .logo a::after,
.header-builder-p .logo a::after {
	left: 92%;
	top: 34%;
	width: 8px;
	height: 8px;
	background: #fff;
	animation-delay: 2.3s;
}

@keyframes jnj-logo-in {
	0%   { opacity: 0; transform: translateY(-28px) scale(.55) rotate(-8deg); }
	55%  { opacity: 1; transform: translateY(5px) scale(1.07) rotate(3deg); }
	75%  { transform: translateY(-2px) scale(.98) rotate(-1deg); }
	100% { opacity: 1; transform: none; }
}
@keyframes jnj-logo-float {
	0%, 100% { transform: translateY(0) rotate(-1.2deg); }
	50%      { transform: translateY(-3px) rotate(1.2deg); }
}
@keyframes jnj-sparkle {
	0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
	20%      { opacity: 1; transform: scale(1) rotate(45deg); }
	40%      { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@media (max-width: 767px) {
	#header .logo a::before,
	.header-builder-p .logo a::before { width: 8px; height: 8px; }
	#header .logo a::after,
	.header-builder-p .logo a::after { width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	#header .logo a,
	#header .logo img,
	.header-builder-p .logo a,
	.header-builder-p .logo img { animation: none; }
	#header .logo a::before,
	#header .logo a::after,
	.header-builder-p .logo a::before,
	.header-builder-p .logo a::after { display: none; }
}

/* Panel gambar besar: efek background fixed tidak jalan bersama animasi scale (gsap-section-scale),
 * sehingga gambar hilang dan hanya warna abu cadangan yang tampak. Paksa scroll biasa. */
.elementor-element-c0a585d,
.elementor-element-c0a585d.e-con {
	background-attachment: scroll !important;
	background-position: center center !important;
	background-size: cover !important;
}

/* ---------------------------------------------------------------
 * Banner promo (menggantikan panel foto kosong di Beranda, Produk, Tentang Kami)
 * --------------------------------------------------------------- */
.elementor-element.jnj-banner-box {
	min-height: 0 !important;
	background: linear-gradient(120deg, #1E73CF 0%, #2F8FE0 48%, #5AB4F5 100%) !important;
	overflow: hidden;
	position: relative;
}
.jnj-banner-box::before,
.jnj-banner-box::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	pointer-events: none;
}
.jnj-banner-box::before { width: 460px; height: 460px; right: -120px; top: -180px; }
.jnj-banner-box::after  { width: 300px; height: 300px; left: -90px; bottom: -150px; }
.jnj-banner { position: relative; z-index: 1; width: 100%; color: #fff; }
.jnj-banner a { text-decoration: none; }
.jnj-banner__in {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: 32px;
	padding-top: 72px;
	padding-bottom: 72px;
}
.jnj-banner__pill {
	display: inline-block;
	margin-bottom: 18px;
	padding: 7px 18px;
	border-radius: 999px;
	background: var(--jnj-yellow, #FFC914);
	color: #2B2D42;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.jnj-banner h2 {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
}
.jnj-banner p {
	margin: 0 0 28px;
	max-width: 520px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .94);
}
.jnj-banner__art {
	justify-self: center;
	width: 100%;
	max-width: 460px;
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(10, 40, 80, .28));
	animation: jnj-bob 5s ease-in-out infinite;
}
@keyframes jnj-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .jnj-banner__art { animation: none; } }
@media (max-width: 767px) {
	.jnj-banner-box::before { width: 300px; height: 300px; }
	.jnj-banner__in { grid-template-columns: 1fr; gap: 20px; padding-top: 48px; padding-bottom: 40px; text-align: center; }
	.jnj-banner p { margin-left: auto; margin-right: auto; }
	.jnj-banner .jnj-footer__btns { justify-content: center; }
	.jnj-banner__art { max-width: 300px; }
	.jnj-banner .jnj-btn { width: 100%; }
}

/* Banner menyesuaikan lebar kotaknya sendiri (kotak ini membesar saat di-scroll) */
.elementor-element.jnj-banner-box {
	container-type: inline-size;
}
@container (max-width: 820px) {
	.jnj-banner__in {
		grid-template-columns: 1fr;
		gap: 20px;
		padding-top: 48px;
		padding-bottom: 40px;
		text-align: center;
	}
	.jnj-banner h2 { font-size: clamp(1.6rem, 6.4cqw, 2.4rem); }
	.jnj-banner p { margin-left: auto; margin-right: auto; }
	.jnj-banner .jnj-footer__btns { justify-content: center; }
	.jnj-banner__art { max-width: 300px; }
}
@container (max-width: 560px) {
	.jnj-banner__in { padding-left: 18px; padding-right: 18px; }
	.jnj-banner .jnj-btn { width: 100%; }
}