/* header-footer.css v1.0.1 — 2026-10-18
   Temuan Mba Iim 18 Okt: (1) garis hamburger tidak tampak di mobile,
   (2) warna tautan menu tidak berubah saat hover.
   Akar: CSS Elementor Kit `.elementor-kit-25391 a` / `... button` (spesifisitas 0,1,1)
   mengalahkan selector kelas kita (0,1,0) -> padding tombol dipaksa 20px sehingga
   kotak isi 5px dan 3 bar (butuh 12px) menyusut jadi 0px; warna tautan dipaksa
   `--e-global-color-primary` sehingga hover tidak terlihat (dan tautan footer navy).
   Perbaikan: SEMUA selector dikunci ke #pm-header/#pm-footer (spesifisitas id).
   Nilai properti TIDAK diubah; hanya spesifisitas & `:where()` -> `:is()`. */
/*!
 * Adev Child — Header & Footer Statis v1.0.0
 *
 * Nilai di file ini diambil dari CSS/markup live adev.co.id (diukur 18 Okt 2026):
 *   Header : latar #CCE1ED (hover #F5F1E8), padding 12px 20px, konten 1140px,
 *            kolom logo 15%/menu 84% celah 10px, baris menu 80px,
 *            link 17px Lato #052D64, hover #F4CF34, item aktif #CCE1ED/#707070,
 *            submenu min-width 220px padding 15px 0, pil "Promo" beranimasi.
 *   Footer : kotak navy #052D64 radius 30px min-height 430px padding 50/50/20/50,
 *            3 kolom 35/25/40% celah 20px, padding kolom 10/10/30/10,
 *            teks #F2F4F7, judul 30px Lato 700, list legal 17px celah 0,
 *            list produk 1.15rem/500 celah 5px+5px, kontak 17px ikon 16px kolom 20px,
 *            sosial bulat 36px bg #F2F4F7 ikon navy celah 10px.
 *
 * Breakpoint mengikuti Elementor: >1024 desktop, 768–1024 tablet, <=767 mobile.
 */

/* -------------------------------------------------------------------------
 * 1. Token warna & font
 * ---------------------------------------------------------------------- */
#pm-header, #pm-footer{
	--pm-navy: #052d64;
	--pm-yellow: #f4cf34;
	--pm-lightblue: #cce1ed;
	--pm-cream: #f5f1e8;
	--pm-text: #333333;
	--pm-soft: #ffffff; /* live: --e-global-color-3b23c2b = #FFFFFF (teks, ikon, dan bg ikon sosial footer) */
	--pm-font: Lato, Helvetica, Arial, sans-serif;
	--pm-content: 1140px;
}

/* -------------------------------------------------------------------------
 * 2. Dasar (hanya di dalam header/footer, tidak menyentuh konten halaman)
 * ---------------------------------------------------------------------- */
#pm-header *, #pm-header *::before, #pm-header *::after, #pm-footer *, #pm-footer *::before, #pm-footer *::after{
	box-sizing: border-box;
}

#pm-header ul, #pm-footer ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :where() menjaga spesifisitas rendah, supaya aturan khusus (mis.
   .pm-footer__about { margin-bottom }) tidak kalah oleh selektor id. */
:where(#pm-header, #pm-footer) :where(h1, h2, h3, p){
	margin: 0;
}

#pm-header a{
	text-decoration: none;
}

/* :where() dipakai agar spesifisitas tetap rendah, sehingga aturan khusus
   seperti .pm-footer__logo (256 px) tidak kalah oleh selektor id di sini. */
:where(#pm-header, #pm-footer) img{
	max-width: 100%;
	height: auto;
}

#pm-header a:focus-visible, #pm-header button:focus-visible, #pm-footer a:focus-visible{
	outline: 2px solid var(--pm-navy);
	outline-offset: 2px;
}

#pm-header .pm-sr{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 3. HEADER — kerangka
 * ---------------------------------------------------------------------- */
#pm-header{
	position: relative;
	z-index: 999;
	/* live: wadah header display flex, arah kolom (Elementor e-con) */
	display: flex;
	flex-direction: column;
	padding: 0 20px;
	font-family: var(--pm-font);
	line-height: 1.6;
	color: var(--pm-text);
	background-color: var(--pm-lightblue);
	transition: background-color 0.3s ease;
}

/* Perilaku live: header berubah krem saat kursor di atasnya.
   Bila tidak diinginkan, hapus blok @media di bawah. */
@media (hover: hover) {
	#pm-header:hover{
		background-color: var(--pm-cream);
	}
}

/* Tinggi 124 px dibuat sama dengan header live (padding vertikal 12 + isi 100).
   width:100% wajib karena .pm-header kini flex-column: margin auto di sumbu
   silang akan mematikan peregangan (stretch), sehingga tanpa width:100%
   konten 1140 px tidak lagi terpusat dengan benar. */
#pm-header .pm-header__inner{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: var(--pm-content);
	min-height: 124px;
	margin: 0 auto;
	padding: 12px 0;
}

#pm-header .pm-header__brand{
	flex: 0 0 15%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 0 10px;
}

#pm-header .pm-logo{
	display: block;
	width: 100%;
}

#pm-header .pm-logo__img{
	display: block;
	width: 100%;
	height: auto;
}

#pm-header .pm-header__menu-area{
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
	/* live: kolom kanan Elementor = flex-end pada kedua sumbu + padding 10 px +
	   gap 20 px, tingginya setinggi isi header (align-self stretch).  Inilah
	   sebab tombol Promo & hamburger di tablet/mobile selalu menempel 10 px
	   dari dasar baris header (terukur y = 34,5 px @1024 dan 15 px @390). */
	align-items: flex-end;
	align-self: stretch;
	gap: 20px;
	padding: 10px;
}

/* -------------------------------------------------------------------------
 * 4. NAVIGASI DESKTOP
 * ---------------------------------------------------------------------- */
#pm-header .pm-nav{
	display: flex;
}

#pm-header .pm-menu{
	display: flex;
	align-items: stretch;
	height: 80px;
}

#pm-header .pm-menu__item{
	position: relative;
	display: flex;
}

#pm-header .pm-menu__link{
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0 15px;
	font-family: var(--pm-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	/* A11Y 19 Okt 2026: sebelumnya #707070 -> kontras hanya 3,67:1 di atas latar
	   header #cce1ed (temuan Lighthouse Accessibility). Kini navy merek = 9,94:1. */
	color: var(--pm-navy);
}

#pm-header .pm-menu__item:hover > .pm-menu__link, #pm-header .pm-menu__item:focus-within > .pm-menu__link{
	/* A11Y: keadaan normal kini navy, jadi hover dibuat lebih gelap + garis bawah
	   supaya tetap terlihat berbeda dan tetap aman (12,94:1). */
	color: #021a3d;
	text-decoration: underline;
}

#pm-header .pm-menu__item.current-menu-item > .pm-menu__link{
	background-color: var(--pm-lightblue);
	/* A11Y 19 Okt 2026: #707070 -> 3,67:1; navy merek = 9,94:1 */
	color: var(--pm-navy);
}

/* Submenu (dropdown sederhana, bukan megamenu) */
#pm-header .pm-submenu{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	min-width: 220px;
	padding: 15px 0;
	background-color: #ffffff;
	box-shadow: 0 10px 25px rgba(5, 45, 100, 0.12);
}

#pm-header .pm-menu__item--has-children:hover > .pm-submenu, #pm-header .pm-menu__item--has-children:focus-within > .pm-submenu{
	display: block;
}

#pm-header .pm-submenu__item{
	position: relative;
}

#pm-header .pm-submenu__link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 15px;
	font-family: var(--pm-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--pm-navy);
}

#pm-header .pm-submenu__link:hover, #pm-header .pm-submenu__link:focus-visible{
	background-color: var(--pm-yellow);
}

/* Submenu tingkat 3 (Produk > Skincare, Decorative) */
#pm-header .pm-submenu .pm-submenu{
	top: -15px;
	left: 100%;
}

#pm-header .pm-submenu__item--has-children:hover > .pm-submenu, #pm-header .pm-submenu__item--has-children:focus-within > .pm-submenu{
	display: block;
}

#pm-header .pm-menu__item--has-children > .pm-menu__link .pm-caret, #pm-header .pm-submenu__item--has-children > .pm-submenu__link > .pm-caret{
	content: "";
	/* live: indikator submenu tidak tampil di menu desktop (lebar item live
	   70,7/91,9/84,6/63,5 px = lebar teks + 30 px padding saja).
	   Di panel mobile indikator dinyalakan lagi (lihat blok @media di bawah). */
	display: none;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

#pm-header .pm-menu__item--has-children > .pm-menu__link .pm-caret{
	transform: rotate(45deg);
	margin-left: 6px;
	margin-top: -3px;
}

#pm-header .pm-submenu__item--has-children > .pm-submenu__link > .pm-caret{
	transform: rotate(-45deg);
	margin-left: 10px;
}

#pm-header .pm-submenu-toggle{
	display: none;
}

/* Tombol "Promo" di dalam menu (pil beranimasi) */
#pm-header .pm-menu__item--promo{
	/* <li> dibiarkan sebagai blok (bukan flex) agar <a> di dalamnya tidak
	   "diblokkan" oleh aturan CSS Display (flex item inline-flex -> flex).
	   Di live pun <a> tetap inline-flex.  Tinggi <li> tetap 80 px karena
	   ia sendiri flex item dari <ul> yang di-stretch. */
	display: block;
	align-items: normal;
}

#pm-header .pm-menu__item--promo .pm-menu__link{
	/* live: display inline-flex (terukur pada menu desktop) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 6px 18px;
	font-weight: 700;
	line-height: 1;
	border-radius: 20px;
	color: var(--pm-navy);
	background-color: var(--pm-yellow);
	/* A11Y 19 Okt 2026: animasi WARNA dihentikan. Di tengah animasi warna campuran
	   turun sampai 1,27:1 -- inilah temuan kontras PageSpeed. Keadaan tetap
	   navy di atas kuning = 8,83:1 (aman).
	   Opsi B (warna tetap berganti tetapi selalu aman) -- tambahkan baris:
	     animation: pm-color-change 4s steps(1, end) infinite; */
	transition: transform 0.3s ease;
}

#pm-header .pm-menu__item--promo:hover .pm-menu__link{
	transform: scale(1.05);
}

/* Keyframes ini disimpan untuk Opsi B (dipakai bersama steps(1, end)).
   Sejak perbaikan A11Y 19 Okt 2026 animasi warna tidak lagi dipakai karena
   membuat kontras tidak stabil di tengah animasi. */
@keyframes pm-color-change {
	0% {
		background-color: #f4cf34;
		color: #052d64;
	}
	50% {
		background-color: #052d64;
		color: #ffffff;
	}
	100% {
		background-color: #f4cf34;
		color: #052d64;
	}
}

/* Elemen khusus mobile disembunyikan di desktop */
#pm-header .pm-burger, #pm-header .pm-cta, #pm-header .pm-panel__head, #pm-header .pm-overlay{
	display: none;
}

/* -------------------------------------------------------------------------
 * 5. TABLET & MOBILE (<=1024px): panel geser + tombol Promo 45px
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#pm-header .pm-header__brand{
		flex: 0 0 20%;
		align-items: center;
		padding: 0 5px;
	}

	#pm-header .pm-header__menu-area{
		justify-content: flex-end;
		/* live: jarak antar widget (nav, tombol Promo, hamburger) 20 px */
		gap: 20px;
	}

	/* Panel geser — meniru panel off-canvas live (ElementsKit):
	   position fixed, tinggi 100vh (menutupi header), latar #F7F7F7,
	   padding bawah 10 px, kepala panel 119,08 px (tablet) / 97,2 px (mobile),
	   lalu daftar menu mengisi sisa tinggi dan bisa di-scroll.
	   Pembungkusnya adalah .pm-nav, sehingga kepala panel (logo + tombol tutup)
	   ikut berada di dalam panel — sama seperti live. */
	#pm-header .pm-nav{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		width: 350px;
		max-width: 350px;
		height: 100vh;
		overflow: hidden;
		padding-bottom: 10px; /* live: padding panel 0 0 10px 0 */
		background-color: #f7f7f7; /* live: rgb(247, 247, 247) */
		box-shadow: 10px 0 30px rgba(5, 45, 100, 0.15);
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	body.pm-nav-open #pm-header .pm-nav{
		transform: none;
	}

	/* Tombol Promo (setara tombol 45px pada header live) */
	#pm-header .pm-cta{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 45px;
		padding: 0 16px;
		border-radius: 8px;
		font-family: var(--pm-font);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.6; /* live: line-height 25,6 px (1,6 x 16 px) */
		color: var(--pm-navy);
		background-color: var(--pm-yellow);
		/* A11Y 19 Okt 2026: animasi warna dihentikan (lihat catatan di blok pil Promo
		   desktop). Opsi B: animation: pm-color-change 4s steps(1, end) infinite; */
		transition: transform 0.3s ease;
	}

	#pm-header .pm-cta:hover{
		transform: scale(1.05);
	}

	/* Tombol hamburger */
	#pm-header .pm-burger{
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		height: 45px; /* live: 45 x 45 px (padding 16 + 3 bar 2 px + 2 celah 3 px) */
		padding: 16px;
		border: 0;
		border-radius: 0.25rem;
		background-color: var(--pm-navy);
		cursor: pointer;
	}

	#pm-header .pm-burger__bar{
		display: block;
		width: 13px; /* live: hamburger 45 px = padding 16 px + bar 13 px */
		height: 2px;
		background-color: var(--pm-soft);
	}

	#pm-header .pm-burger:hover, #pm-header .pm-burger:focus-visible{
		background-color: var(--pm-yellow);
	}

	#pm-header .pm-burger:hover .pm-burger__bar, #pm-header .pm-burger:focus-visible .pm-burger__bar{
		background-color: var(--pm-navy);
	}

	/* Daftar menu di dalam panel: kembali menjadi daftar blok biasa yang
	   mengisi sisa tinggi panel dan bisa di-scroll (live: ul 770,9 px @1024). */
	#pm-header .pm-menu{
		position: static;
		display: block;
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: transparent;
		box-shadow: none;
		transform: none;
	}

	#pm-header .pm-menu__item--has-children > .pm-menu__link .pm-caret, #pm-header .pm-submenu__item--has-children > .pm-submenu__link > .pm-caret{
		display: inline-block;
	}

	/* Kepala panel (logo + tombol tutup) — live: tinggi 119,08 px @1024
	   (= padding 20 px + logo 79,08 px + padding 20 px). */
	#pm-header .pm-panel__head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		gap: 10px;
		padding: 20px;
		background-color: #f7f7f7;
	}

	#pm-header .pm-panel__logo{
		display: block;
	}

	#pm-header .pm-panel__logo .pm-logo__img{
		display: block;
		width: auto;
		height: 79.08px;
	}

	/* Tombol tutup — live: 45 x 45,2 px, latar navy, ikon putih */
	#pm-header .pm-close{
		position: relative;
		flex: 0 0 auto;
		width: 45px;
		height: 45.2px;
		padding: 8px;
		border: 0;
		border-radius: 0.25rem;
		background-color: var(--pm-navy);
		cursor: pointer;
	}

	#pm-header .pm-close__bar{
		position: absolute;
		top: 21.6px;
		left: 10.5px;
		width: 24px;
		height: 2px;
		background-color: var(--pm-soft);
	}

	#pm-header .pm-close__bar:first-child{
		transform: rotate(45deg);
	}

	#pm-header .pm-close__bar:last-child{
		transform: rotate(-45deg);
	}

	#pm-header .pm-menu__item{
		display: block;
	}

	/* Tautan menu di panel — live: blok penuh 350 px, tinggi 47,2 px
	   (padding 10 px 15 px + line-height 27,2 px), 17 px, warna #707070. */
	#pm-header .pm-menu__link{
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		padding: 10px 15px;
		font-size: 17px;
		line-height: 1.6;
		color: var(--pm-text);
	}

	#pm-header .pm-menu__item:hover > .pm-menu__link, #pm-header .pm-menu__item:focus-within > .pm-menu__link{
		background-color: transparent;
		color: var(--pm-navy);
	}

	#pm-header .pm-menu__item.current-menu-item > .pm-menu__link{
		background-color: var(--pm-lightblue);
		/* A11Y 19 Okt 2026: #707070 di atas #cce1ed hanya 3,67:1; navy = 9,94:1
		   (sama seperti item menu aktif di header desktop). */
		color: var(--pm-navy);
	}

	/* Item "Promo": pil 87,2 x 29 px (padding 6 px 18 px, line-height 17 px) */
	#pm-header .pm-menu__item--promo{
		display: block;
		padding: 0;
		line-height: 1;
	}

	#pm-header .pm-menu__item--promo .pm-menu__link{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		margin: 0;
		padding: 6px 18px;
		font-size: 17px;
		line-height: 17px;
		border-radius: 20px;
	}

	/* Tombol buka/tutup submenu (accordion) */
	#pm-header .pm-submenu-toggle{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 4px;
		right: 10px;
		width: 44px;
		height: 44px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	#pm-header .pm-submenu-toggle .pm-caret{
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--pm-navy);
		border-bottom: 2px solid var(--pm-navy);
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	#pm-header .pm-submenu-toggle[aria-expanded="true"] .pm-caret{
		transform: rotate(-135deg);
	}

	#pm-header .pm-menu__item--has-children > .pm-menu__link .pm-caret{
		display: none;
	}

	#pm-header .pm-submenu{
		position: static;
		display: none;
		min-width: 0;
		padding: 0;
		background-color: #f7f9fb;
		box-shadow: none;
	}

	#pm-header .pm-menu__item--has-children.is-open > .pm-submenu, #pm-header .pm-submenu__item--has-children.is-open > .pm-submenu{
		display: block;
	}

	#pm-header .pm-submenu__link{
		padding: 10px 44px 10px 36px;
		font-size: 15px;
	}

	#pm-header .pm-submenu .pm-submenu .pm-submenu__link{
		padding-left: 52px;
	}

	#pm-header .pm-submenu__item--has-children > .pm-submenu__link > .pm-caret{
		display: none;
	}

	#pm-header .pm-overlay{
		position: fixed;
		inset: 0;
		z-index: 1000;
		background-color: rgba(5, 45, 100, 0.45);
	}

	body.pm-nav-open #pm-header .pm-overlay{
		display: block;
	}

	body.pm-nav-open{
		overflow: hidden;
	}
}

/* -------------------------------------------------------------------------
 * 6. MOBILE (<=767px)
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* live: header mobile 75 px = padding 5px 10px + baris 65 px */
	#pm-header{
		padding: 0 10px;
	}

	#pm-header .pm-header__inner{
		min-height: 75px;
		padding: 5px 0;
	}

	#pm-header .pm-header__brand{
		flex: 0 0 30%;
		padding: 0 10px; /* live: logo mobile 91 px = 30% kolom - 20 px */
	}

	#pm-header .pm-header__menu-area{
		/* live: tepi kanan hamburger 365 px dari 380 px (padding kanan ~15 px) */
		padding: 10px 15px 10px 10px;
	}

	/* Kepala panel mobile — live: tinggi 97,2 px = 20 + logo 57,2 + 20 px */
	#pm-header .pm-panel__logo .pm-logo__img{
		height: 57.2px;
	}
}

/* -------------------------------------------------------------------------
 * 7. FOOTER
 * ---------------------------------------------------------------------- */
#pm-footer{
	font-family: var(--pm-font);
	/* live: wadah footer mewarisi warna teks #333; setiap elemen teks di dalamnya
	   menetapkan putih (#FFFFFF) sendiri — sama seperti di live. */
	line-height: 1.6;
	color: var(--pm-text);
	background-color: transparent;
}

#pm-footer .pm-footer__box{
	max-width: var(--pm-content);
	margin: 0 auto;
	padding: 50px 50px 20px 50px;
	background-color: var(--pm-navy);
	border-radius: 30px;
	min-height: 430px;
}

#pm-footer .pm-footer__inner{
	display: flex;
	gap: 20px;
	width: 100%;
}

#pm-footer .pm-footer__col{
	/* live: tinggi setiap kolom mengikuti isinya (kolom kontak 356 px, bukan setinggi baris) */
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* live: padding kolom 10 px merata (kolom kontak 399x356 px) */
	padding: 10px;
}

#pm-footer .pm-footer__col--about{
	flex: 0 1 35%;
}

#pm-footer .pm-footer__col--produk{
	flex: 0 1 25%;
}

#pm-footer .pm-footer__col--kontak{
	flex: 0 1 40%;
}

#pm-footer .pm-footer__logo{
	display: block;
	width: 100%;
	max-width: 256px;
	height: 256px;
	object-fit: cover;
	margin: -100px auto -50px;
}

#pm-footer .pm-footer__about{
	padding-right: 0; /* live: tanpa padding (teks selebar kolom) */
	font-family: var(--pm-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--pm-soft);
	text-align: justify;

	/* live: jarak paragraf about ke daftar legal = 34 px (20 px gap kolom + 14 px
	   dari wadah widget di live). Hapus baris ini bila ingin jarak seragam 20 px. */
	margin-bottom: 14px;}

#pm-footer .pm-footer__title{
	font-family: var(--pm-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pm-soft);
}

#pm-footer .pm-footer__list{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#pm-footer .pm-footer__item{
	display: flex;
	align-items: flex-start;
	font-family: var(--pm-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--pm-soft);
	padding-bottom: 5px;
}

#pm-footer .pm-footer__item:last-child{
	padding-bottom: 0;
}

#pm-footer .pm-footer__link{
	/* live: <a> mengisi baris penuh di dalam <li> (330 px pada kolom kiri)
	   dan isinya rata tengah vertikal (align-items: center). */
	display: inline-flex;
	align-items: center;
	flex: 1 1 auto;
}

/* Kolom kontak: live memakai --icon-vertical-align: flex-start +
   --icon-vertical-offset: 7px, jadi ikon menempel di atas baris. */
#pm-footer .pm-footer__list--kontak .pm-footer__link{
	align-items: flex-start;
}

/* live: hanya daftar berikon yang punya jarak ikon→teks 5 px
   (daftar produk tanpa ikon, padding 0). */
#pm-footer .pm-footer__list--legal .pm-footer__text, #pm-footer .pm-footer__list--kontak .pm-footer__text{
	padding-inline-start: 5px;
}

#pm-footer .pm-footer__link, #pm-footer .pm-footer__text{
	color: var(--pm-soft);
}

#pm-footer .pm-footer__link:hover, #pm-footer .pm-footer__link:focus-visible{
	color: var(--pm-yellow);
	text-decoration: underline;
}

/* Daftar legal: tanpa jeda antar item (sama seperti live) */
#pm-footer .pm-footer__list--legal{
	gap: 0;
}

#pm-footer .pm-footer__list--legal .pm-footer__item{
	padding-bottom: 0;
}

#pm-footer .pm-footer__ico{
	flex: 0 0 20px;
	width: 20px;
	display: inline-flex;
	justify-content: flex-start;
}

#pm-footer .pm-footer__ico svg{
	width: 16px;
	height: 16px;
	margin-top: 7px;
	fill: currentColor;
}

/* live: ikon daftar legal (14 px) rata tengah baris — offset vertikal 0 px */
#pm-footer .pm-footer__list--legal .pm-footer__ico svg{
	margin-top: 0;
}

#pm-footer .pm-footer__ico--sm{
	flex: 0 0 17.5px;
	width: 17.5px;
}

#pm-footer .pm-footer__ico--sm svg{
	width: 14px;
	height: 14px;
	margin-top: 0;
}

/* Daftar produk: 1.15rem / 500 */
#pm-footer .pm-footer__list--produk{
	font-size: 1.15rem;
}

#pm-footer .pm-footer__list--produk .pm-footer__item{
	font-size: 1.15rem;
}

#pm-footer .pm-footer__list--produk .pm-footer__link{
	font-weight: 500;
}

/* Galeri logo sertifikat (live: grid 5 kolom, celah 10 px, rasio 1:1,
   overlay gelap 50% saat hover/fokus dengan transisi 800 ms) */
#pm-footer .pm-footer__certs{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

#pm-footer .pm-footer__cert{
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

#pm-footer .pm-footer__cert-img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#pm-footer .pm-footer__cert-overlay{
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.8s ease;
	pointer-events: none;
}

#pm-footer .pm-footer__cert:hover .pm-footer__cert-overlay, #pm-footer .pm-footer__cert:focus-within .pm-footer__cert-overlay{
	background-color: rgba(0, 0, 0, 0.5);
}

/* Media sosial: bulat 36px, ikon 16px */
#pm-footer .pm-footer__socials{
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 0; /* live: row-gap 0, column-gap 10 */
	margin-top: auto;
}

#pm-footer .pm-footer__social{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/* live: line-height 16 px (bukan 1,6 x 16 px) */
	font-size: 16px;
	line-height: 16px;
	border-radius: 50%;
	background-color: var(--pm-soft);
	color: var(--pm-navy);
}

#pm-footer .pm-footer__social:hover, #pm-footer .pm-footer__social:focus-visible{
	background-color: var(--pm-yellow);
}

#pm-footer .pm-footer__social svg{
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * 8. TABLET (768–1024px) — footer
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* live: tinggi baris header tablet 102 px */
	#pm-header .pm-header__inner{
		min-height: 102px;
	}

	/* live: lebar logo header tablet 128 px, rata kiri di kolom merek 20% */
	#pm-header .pm-header__brand{
		padding: 0 10px;
		justify-content: flex-start;
	}

	#pm-header .pm-logo{
		max-width: 128px;
	}

}

/* -------------------------------------------------------------------------
 * 9. FOOTER — TABLET & MOBILE
 *    Diletakkan setelah aturan dasar footer (bagian 7–8) karena spesifisitasnya
 *    sama: aturan yang ditulis belakangan yang menang.
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
	#pm-footer .pm-footer__logo{
		width: 100%;
		max-width: 200px;
		height: 200px;
		/* -80 = -70 permintaan live + 10 px padding kolom */
		margin: -80px auto -50px;
	}

	#pm-footer .pm-footer__title{
		font-size: 2.5rem;
	}
}

@media (max-width: 767px) {
	#pm-footer .pm-footer__box{
		padding: 10px 10px 30px 10px;
		border-radius: 30px;
	}

	#pm-footer .pm-footer__inner{
		flex-direction: column;
		gap: 20px;
	}

	#pm-footer .pm-footer__col{
		/* arah kolom: align-self harus stretch agar lebar tetap 100% (live 350 px) */
		align-self: stretch;
		flex: 1 1 auto;
		width: 100%;
		/* live: padding 10 px seragam — jarak antar blok pada tumpukan mobile
		   menjadi 40 px (20 px gap + 2 x 10 px padding), sama seperti live */
		padding: 10px;
	}

	#pm-footer .pm-footer__logo{
		width: 100%;
		max-width: 200px;
		height: 200px;
		/* -50/-50 = -50/-30 pada live, dikompensasi padding kolom 10 px */
		margin: -50px auto -50px;
	}

	#pm-footer .pm-footer__title{
		font-size: 1.5rem;
	}

	#pm-footer .pm-footer__about{
		padding-right: 0;
	}
}

/* -------------------------------------------------------------------------
 * 10. Aksesibilitas: hormati preferensi pengguna
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#pm-header .pm-menu__item--promo .pm-menu__link, #pm-header .pm-cta{
		animation: none;
	}

	#pm-header .pm-menu{
		transition: none;
	}
}

/* ==========================================================================
   A11Y (Accessibility) — tambahan 19 Oktober 2026
   Temuan PageSpeed pada halaman artikel: tautan "Lewati ke konten" menunjuk
   #content yang tidak ada di halaman, dan tautan itu tertutup oleh
   .screen-reader-text { clip-path: inset(50%) } sehingga tidak terlihat
   saat difokus dengan keyboard. Dua aturan di bawah menutup keduanya.
   Target #content sendiri dibuat oleh inc/template-helpers.php.
   ========================================================================== */

/* 1. Tautan "Lewati ke konten" tampil saat difokus keyboard */
a.skip-link:focus,
a.skip-link:focus-visible{
	clip-path: none !important;
	-webkit-clip-path: none !important;
	position: absolute !important;
	left: 12px;
	top: 12px;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 16px !important;
	background: var(--pm-navy);
	color: #ffffff;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	overflow: visible !important;
	z-index: 99999;
}

/* 2. Target lompatan tidak tertutup header melekat */
#content{
	scroll-margin-top: 96px;
}

/* v1.8.1 — bottom bar copyright footer (tahun dinamis) */
#pm-footer .pm-footer__bottom{
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(242,244,247,.18);
	text-align: center;
}
#pm-footer .pm-footer__copy{
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #C9D2E0;
}
@media (max-width: 767px){
	#pm-footer .pm-footer__bottom{ margin-top: 20px; padding-top: 14px; }
	#pm-footer .pm-footer__copy{ font-size: 13px; }
}