/* =========================================================
   SO Custom Header — Sahabat Olahraga (berbasis Revo Header V7)
   Ubah warna / jarak di bagian VARIABEL saja.
   ========================================================= */

.so-header {
	/* ---------- VARIABEL ---------- */
	--so-merah: #e31b23;                 /* warna bar menu */
	--so-merah-hover: rgba(0, 0, 0, .18);/* sorot menu di bar merah */
	--so-teks-bar: #ffffff;              /* warna tulisan menu */
	--so-jarak-atas: 12px;               /* jarak atas-bawah baris logo (desktop) */
	--so-jarak-bar: 4px;                 /* jarak atas-bawah bar merah */
	--so-posisi-menu: center;            /* center / flex-start (kiri) */
	--so-drop-hover-bg: #fdecea;
	--so-drop-hover-teks: #e31b23;
	--so-teks: #222222;
	--so-ikon-bg: #1f2122;               /* lingkaran ikon wishlist & keranjang */
	--so-ikon-bg-hover: #e31b23;         /* lingkaran saat disorot */
	--so-ikon-warna: #ffffff;            /* warna ikon di dalam lingkaran */
	--so-ikon-ukuran: 46px;              /* ukuran lingkaran (desktop) */
}

/* ---------- Sticky: HANYA di HP ---------- */
@media (max-width: 767.98px) {
	.rwot-header-container {
		position: sticky !important;
		top: 0 !important;
		z-index: 1030;
	}
}
@media (min-width: 600px) and (max-width: 767.98px) {
	body.admin-bar .rwot-header-container { top: 46px !important; }
}
@media (min-width: 768px) {
	.rwot-header-container {
		position: relative !important;
		top: auto !important;
	}
}

/* =========================================================
   BARIS ATAS: logo + search + ikon
   ========================================================= */
.so-header .so-top {
	background: var(--rwot-header-bg-color, #fff);
}
.so-header .so-top-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}
.so-header .so-brand { flex: 0 0 auto; min-width: 0; }
.so-header .so-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex: 0 0 auto;
}
/* ---------- Ikon wishlist & keranjang: lingkaran seragam ---------- */
.so-header .so-actions a.header-icon {
	width: var(--so-ikon-ukuran) !important;
	height: var(--so-ikon-ukuran) !important;
	min-width: var(--so-ikon-ukuran);
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	background: var(--so-ikon-bg) !important;
	color: var(--so-ikon-warna) !important;
	line-height: 0;
	transition: background .15s;
}
.so-header .so-actions a.header-icon svg { width: 24px; height: 24px; fill: currentColor; }
.so-header .so-actions a.header-icon svg path { fill: currentColor; }
.so-header .so-actions a.header-icon:hover,
.so-header .so-actions a.header-icon:focus-visible {
	background: var(--so-ikon-bg-hover) !important;
	color: var(--so-ikon-warna) !important;
}
.so-header .so-actions .rwot-cart-header { padding-top: 0 !important; }
@media (max-width: 767.98px) {
	.so-header { --so-ikon-ukuran: 40px; }
	.so-header .so-actions a.header-icon svg { width: 22px; height: 22px; }
}
.so-header .so-divider {
	width: 1px;
	height: 32px;
	background: #e1e3e6;
}
.so-header .so-auth-link {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--rwot-text-header-color, #222);
	text-decoration: none;
	white-space: nowrap;
}
.so-header .so-auth-link:hover { color: var(--so-merah); }

@media (min-width: 768px) {
	.so-header .so-top-row {
		gap: 24px;
		padding: var(--so-jarak-atas) 0;
	}
	.so-header .so-search {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 680px;
		margin: 0 auto;
	}
}

/* ---------- Kolom pencarian (desktop, tablet & HP) ---------- */
.so-header .so-search form.search-form,
.so-header .so-search-mobile form.search-form { width: 100% !important; margin: 0; }
.so-header .so-search .search-text,
.so-header .so-search-mobile .search-text {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 46px !important;
	padding: 0 58px 0 20px !important;
	border: 1px solid #d9dbe0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--so-teks) !important;
	font-size: 15px !important;
	outline: none;
	box-shadow: none !important;
	position: static !important;
	opacity: 1 !important;
	transition: border-color .15s, box-shadow .15s;
}
.so-header .so-search .search-text:focus,
.so-header .so-search-mobile .search-text:focus {
	border-color: var(--so-merah) !important;
	box-shadow: none !important;
	outline: none !important;
}
.so-header .so-search-btn {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #1f2122;
	color: #fff;
	cursor: pointer;
	z-index: 2;
}
.so-header .so-search-btn:hover { background: var(--so-merah); }
.so-header .so-search .loader-animation,
.so-header .so-search-mobile .loader-animation { right: 48px !important; }

/* =========================================================
   BAR MENU MERAH (desktop & tablet)
   ========================================================= */
.so-header .so-bar {
	background: var(--so-merah);
}
.so-header .so-bar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: var(--so-jarak-bar) 0;
	min-height: 44px;
}
.so-header .so-menu {
	display: flex;
	align-items: center;
	justify-content: var(--so-posisi-menu);
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.so-header .so-item {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}
.so-header .so-item.so-overflow,
.so-header .so-item[hidden] { display: none !important; }

.so-header .so-top-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--so-teks-bar) !important;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s;
}
.so-header .so-top-link:hover,
.so-header .so-item.is-open > .so-top-link,
.so-header .so-item.is-active > .so-top-link {
	background: var(--so-merah-hover);
}
.so-header .so-top-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.so-header .so-chevron { transition: transform .2s; flex: 0 0 auto; }
.so-header .so-item.is-open > .so-top-link .so-chevron { transform: rotate(180deg); }

/* ---------- Dropdown ----------
   .so-drop  = area transparan (jembatan) yang menempel tepat di bawah menu,
               supaya kursor tidak "jatuh" ke celah kosong saat turun ke submenu.
   .so-drop-list = kotak putih submenu.
   Saat kursor keluar, dropdown menunggu sebentar sebelum menutup. */
.so-header {
	--so-drop-jarak: 10px;     /* jarak kotak submenu dari menu (tetap bisa dilewati kursor) */
	--so-drop-tunda: .25s;     /* jeda sebelum dropdown menutup */
}
.so-header .so-drop {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	min-width: 240px;
	max-width: 340px;
	margin: 0;
	padding: var(--so-drop-jarak) 0 0;
	background: transparent;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition:
		opacity .15s ease var(--so-drop-tunda),
		transform .15s ease var(--so-drop-tunda),
		visibility 0s linear calc(var(--so-drop-tunda) + .15s);
}
.so-header .so-drop.so-drop-right { left: auto; right: 0; }

.so-header .so-item.is-open > .so-drop {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	z-index: 1051;
	transition: opacity .15s ease, transform .15s ease, visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
	.so-header .so-item.so-has-sub:hover > .so-drop {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		z-index: 1051;
		transition: opacity .15s ease, transform .15s ease, visibility 0s;
	}
	.so-header .so-item.so-has-sub:hover > .so-top-link { background: var(--so-merah-hover); }
	.so-header .so-item.so-has-sub:hover > .so-top-link .so-chevron { transform: rotate(180deg); }
}

/* Pindah ke menu lain: dropdown menu sebelumnya langsung ditutup tanpa jeda
   (class dipasang oleh JS hanya saat kursor sudah berada di menu lain) */
.so-header .so-item.so-tutup-cepat > .so-drop {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: none !important;
}

/* Kotak putih submenu */
.so-header .so-drop > .so-drop-list {
	max-height: 70vh;
	overflow-y: auto;
	padding: 8px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

.so-header .so-drop-list,
.so-header .so-group-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.so-header .so-sub-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--so-teks) !important;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none !important;
	white-space: normal;
	transition: background .15s, color .15s;
}
.so-header .so-sub-link:hover,
.so-header .so-sub-link:focus-visible {
	background: var(--so-drop-hover-bg);
	color: var(--so-drop-hover-teks) !important;
	outline: none;
}
.so-header .so-group-title { font-weight: 600; }
.so-header .so-group-list { padding-left: 12px; margin-bottom: 4px; }
.so-header .so-sub-link-sm { padding: 6px 12px; font-size: 13px; color: #555 !important; }
.so-header .so-thumb {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	object-fit: cover;
}

/* ---------- Sapaan login di kanan bar ---------- */
.so-header .so-greeting {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 0 0 auto;
	color: var(--so-teks-bar) !important;
	text-decoration: none !important;
	line-height: 1.25;
	white-space: nowrap;
}
.so-header .so-greeting-name { font-size: 14px; font-weight: 700; }
.so-header .so-greeting-sub { font-size: 12px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
	.so-header * { transition: none !important; }
}

/* =========================================================
   POPUP KERANJANG (hover di desktop)
   Rata kanan dengan lingkaran keranjang, panah tepat di tengah ikon.
   ========================================================= */
.so-header { --so-popup-lebar: 330px; }

.so-header .so-actions .rwot-cart-header { position: relative; }
.so-header .so-actions .rwot-cart-header .rwot-floating-cart {
	top: calc(var(--so-ikon-ukuran) - 2px) !important;   /* menempel di bawah lingkaran (tanpa celah hover) */
	left: auto !important;
	right: 0 !important;
	width: var(--so-popup-lebar) !important;
	max-width: calc(100vw - 24px);
	z-index: 1060 !important;
}
.so-header .so-actions .rwot-cart-header .rwot-floating-cart-body {
	margin-top: 14px !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16) !important;
}
.so-header .so-actions .rwot-cart-header .rwot-floating-cart-body::after {
	top: -4px !important;
	left: auto !important;
	right: calc(var(--so-ikon-ukuran) / 2 - 10px) !important; /* tengah lingkaran */
}


/* =========================================================
   KERANGKA: header selalu selebar layar di semua ukuran
   (tema membuat .site-header jadi flex di layar kecil -> header menyempit)
   ========================================================= */
.site-header.so-header {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
}
.so-header .so-top,
.so-header .so-bar { width: 100%; }
@media (max-width: 991.98px) {
	.so-header .container-lg {
		max-width: 100% !important;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =========================================================
   TAMPILAN HP & TABLET KECIL (di bawah 768px)
   Baris 1: menu ☰ (kiri) · logo (tengah) · keranjang (kanan)
   Baris 2: kolom pencarian selebar layar
   ========================================================= */
@media (max-width: 767.98px) {
	.so-header .so-top-row {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 10px;
		row-gap: 10px;
		padding: 10px 0 12px;
	}
	.so-header .so-burger {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}
	.so-header .so-brand {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}
	.so-header .so-brand .site-branding {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.so-header .so-brand .brand-logo { object-position: center center !important; }
	.so-header .so-actions {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-left: 0;
		gap: 10px;
	}
	.so-header .so-search-mobile {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}
	.so-header .so-search-mobile .search-form-container { width: 100%; }
	.so-header .so-search-mobile .search-text {
		height: 42px !important;
		padding: 0 50px 0 16px !important;
		font-size: 14px !important;
	}
	.so-header .so-search-mobile .so-search-btn { width: 34px; height: 34px; }
	.so-header .so-search-mobile .livesearch-result-container {
		margin-top: 6px !important;
		max-height: 60vh;
		overflow-y: auto;
	}
	/* popup keranjang hover hanya untuk desktop */
	.so-header .rwot-floating-cart { display: none !important; }
}

/* Desktop & tablet besar: kolom cari HP tidak dipakai */
@media (min-width: 768px) {
	.so-header .so-search-mobile { display: none !important; }
}
/* HP: kolom cari desktop tidak dipakai */
@media (max-width: 767.98px) {
	.so-header .so-search { display: none !important; }
}

/* Tablet (768–991px): logo sedikit lebih kecil supaya kolom cari tetap lega */
@media (min-width: 768px) and (max-width: 991.98px) {
	.so-header .so-brand .brand-logo {
		width: 160px !important;
		max-width: 160px !important;
		height: auto !important;
		max-height: 52px !important;
	}
	.so-header .so-top-row { gap: 16px; }
}

/* =========================================================
   HALAMAN PRODUK (setiap SKU) & HALAMAN CHECKOUT di HP & tablet kecil:
   header disembunyikan, diganti bar bawaan tema
   (produk: kembali + nama produk + cari + bagikan; checkout: kembali + "Checkout").
   Penanda body class "so-tanpa-header" dipasang oleh plugin.
   Desktop tetap memakai header karena bar tersebut hanya ada di HP.
   ========================================================= */
@media (max-width: 767.98px) {
	/* yang disembunyikan hanya header (logo, cari, menu);
	   bar judul produk tetap tampil karena berada di wadah yang sama */
	body.so-tanpa-header .rwot-header-container > .so-header {
		display: none !important;
	}
}