/*
 * Shipping Policy — Tab Explorer Shell (sticky tabbar + single-panel switch)
 * Depends on: design-tokens.css, log-sp-hero.css
 * Page: body.log-shipping-page
 */

.explorer {
	max-width: 1160px;
	margin: 0 auto;
	padding: 30px 20px 30px;
}

.explorer-tabbar-wrap {
	position: sticky;
	/* log-header.js tracks the real on-screen header height (marquee +
	   nav row, shrink state, mobile breakpoint) into this var — avoids
	   guessing fixed px offsets that drift when the header changes
	   (same fix as .explorer-tabbar-wrap in log-test-explorer.css). */
	top: var(--site-header-h, 84px);
	z-index: 59;
	background: var(--paper);
	padding: 20px 0 14px;
}

.explorer-tabbar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 6px 2px 22px;
}

.explorer-tabbar::-webkit-scrollbar { display: none; height: 0; }

.etab {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	border: 1.4px solid var(--line);
	color: var(--ink-700);
	padding: 11px 18px;
	border-radius: var(--r-pill);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	transition: all .3s var(--ease);
	appearance: none;
	box-shadow: none;
	font-family: inherit;
	cursor: pointer;
}

.etab .icon { width: 14px; height: 14px; color: var(--sage-700); transition: transform .3s var(--ease); }
.etab:hover { border-color: var(--plum-600); color: var(--plum-700); transform: translateY(-2px); }

.etab.active {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper);
	box-shadow: 0 10px 22px -6px rgba(20, 35, 31, .35);
}

.etab.active .icon { color: var(--sage-400); transform: rotate(-8deg); }

.epanel-shell {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	overflow: visible;
	min-height: 360px;
}

.epanel {
	display: none;
	padding: 30px 28px 32px;
	animation: shipPanelIn .5s var(--ease);
}

.epanel.active { display: block; }

@keyframes shipPanelIn {
	from { opacity: 0; transform: translateY(14px) scale(.99); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.epanel-head { margin-bottom: 20px; }

.ep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sage-700);
	margin-bottom: 8px;
}

.ep-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--sage-600); display: inline-block; }

.ep-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	color: var(--ink-900);
}

.ep-title em { font-style: italic; font-weight: 600; color: var(--plum-700); }

.ep-sub {
	color: var(--gray-600);
	font-size: 13.5px;
	margin-top: 7px;
	max-width: 600px;
	line-height: 1.6;
}

@media(max-width:640px) {
	.epanel { padding: 22px 16px 26px; }
}