﻿/* === variables === */
:root {
	--c-primary: var(--wp--preset--color--primary);
	--c-primary-dark: var(--wp--preset--color--primary-dark);
	--c-primary-light: var(--wp--preset--color--primary-light);
	--c-accent: var(--wp--preset--color--accent);
	--c-accent-light: var(--wp--preset--color--accent-light);
	--c-base: var(--wp--preset--color--base);
	--c-base-light: var(--wp--preset--color--base-light);
	--c-base-mid: var(--wp--preset--color--base-mid);
	--c-contrast: var(--wp--preset--color--contrast);
	--c-contrast-mid: var(--wp--preset--color--contrast-mid);
	--c-contrast-light: var(--wp--preset--color--contrast-light);
	--sidebar-width: 320px;
	--header-height: 60px;
}

/* === reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

body { overflow-x: hidden; }

/* === 非首页正文统一 18px === */
body:not(.home) .zoory-main {
	font-size: 18px;
}

.wp-site-blocks {
	padding: 0 !important;
	max-width: 100% !important;
}
.wp-block-post-content {
		margin-left: 30px !important;
}
.wp-block-post-content > *,
.entry-content > * {
	max-width: 100% !important;
	width: 100% !important;
}
/* Fix: post-content constrained layout removes full-bleed */
.entry-content.is-layout-flow.wp-block-post-content-is-layout-flow > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: 100% !important;
}
/* 右侧主区：直接子级全宽区块与页脚同款 —— margin-left:30px + width:calc(100%-30px)，
   左缘统一 30px、右缘延伸到主区内容右缘（与底部 footer 同宽 350..1904），避免溢出视口 */
.zoory-main > .alignfull {
	max-width: 100% !important;
	width: calc(100% - 30px) !important;
	box-sizing: border-box;
	margin-left: 30px;
}
/* 嵌套在全宽区块内部的全宽容器只应填满父级，避免被 .alignfull 后代规则重复内缩 */
.zoory-main .alignfull .alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
}

/* === layout-shell === */
/* The page is split into a fixed left sidebar + a main content area */
.zoory-shell {
	display: flex;
	min-height: 100vh;
	width: 100%;
}
.zoory-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--sidebar-width);
	height: 100vh;
	border-right: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1000;
	padding: 24px 16px;
	box-sizing: border-box;
}
.zoory-main {
	margin-left: var(--sidebar-width);
	width: calc(100% - var(--sidebar-width));
	min-height: 100vh;
	padding: 0 16px 16px 0;
}

/* === topbar (search + lang, fixed top-right) === */
.zoory-topbar {
	position: fixed;
	top: 24px;
	right: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 0;
	height: 48px;
	background: transparent;
	border-bottom: none;
	padding: 0 20px;
	box-shadow: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
/* 向下滚动时隐藏顶栏搜索，向上滚动/回到顶部时显示 */
.zoory-topbar.is-hidden {
	transform: translateY(-150%);
	opacity: 0;
	pointer-events: none;
}
.zoory-topbar .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid var(--c-primary);
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
}
.zoory-topbar .wp-block-search__input {
	border: none;
	outline: none;
	padding: 6px 12px;
	font-size: 12px;
	width: 160px;
	color: var(--c-contrast);
}
.zoory-topbar .wp-block-search__button {
	background: var(--c-primary);
	color: #fff;
	border: none;
	padding: 6px 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 搜索表单作为 flex 子项可收缩，避免加入语言切换后溢出视口 */
.zoory-topbar > form {
	display: flex;
	min-width: 0;
}

/* === language switcher (topbar, right of the search) === */
.zoory-lang-switch {
	display: flex;
	align-items: center;
	margin-left: 10px;
	border: 1px solid var(--c-primary);
	border-radius: 22px;
	background: #fff;
	overflow: hidden;
	flex: 0 0 auto;
}
.zoory-lang-switch__item {
	padding: 6px 12px;
	font-size: 12px;
	line-height: 1.25;
	white-space: nowrap;
	color: var(--c-primary);
	transition: background 0.25s ease, color 0.25s ease;
}
.zoory-lang-switch__item + .zoory-lang-switch__item {
	border-left: 1px solid var(--c-primary);
}
.zoory-lang-switch__item:hover,
.zoory-lang-switch__item:focus-visible {
	background: var(--c-primary-light);
	color: #fff;
}
.zoory-lang-switch__item.is-current {
	background: var(--c-primary);
	color: #fff;
	cursor: default;
}
/* === buttons === */
.btn-green .wp-element-button,
.wp-block-button.btn-green .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--c-primary) !important;
	color: #fff !important;
	font-size: 13px !important;
	border-radius: 20px !important;
	transition: background 0.25s;
	border: none !important;
	cursor: pointer;
}
.btn-green .wp-element-button:hover,
.wp-block-button.btn-green .wp-element-button:hover {
	background: var(--c-primary-light) !important;
}
/* product/industry/news btn color override */
.section-product .btn-green .wp-element-button,
.section-industry .btn-green .wp-element-button,
.section-news .btn-green .wp-element-button {
	color: #D2B67F !important;
	font-size: 20px !important;
}

/* shared section title */
.section-heading {
	text-align: center;
	/* 首页板块标题为 flex 布局（is-layout-flex），需显式水平居中 flex 子项，
	   否则容器默认 flex-start 左对齐（text-align 对 flex 子项无效）。 */
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 40px;
	padding: 0;
}
.section-heading .en {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 32px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--c-contrast);
}
.section-heading .zh {
	font-family: var(--wp--preset--font-family--oppo-sans);
	font-size: 32px;
	font-weight: 400;
	color: var(--c-contrast);
	margin-left: 10px;
}
/* 首页等板块大标题内的中文（如 "成套工艺包"）以 <strong> 强调，展示时不再加粗，
   与 .zh（font-weight:400）的设计意图保持一致。 */
.section-heading strong {
	font-weight: 400;
}
.section-heading .accent-line {
	width: 36px;
	height: 3px;
	background: var(--c-accent);
	margin: 10px auto 0;
}
/* top-left gold accent line on sections */
.section-product,
.section-tech,
.section-news {
	position: relative;
}
.section-product::before,
.section-tech::before,
.section-news::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 3px;
	background: #c9a84c;
	z-index: 2;
	border-top-left-radius: 12px;
	transform: translateZ(0);
	will-change: transform;
}
/* 首页卡片区块（产品中心/可持续发展/新闻中心）：金色装饰线右移 48px，
   与各卡片内文字区的左缩进（48px）对齐，不再贴左上圆角 */
.section-product::before,
.section-tech::before,
.section-news::before {
	left: 48px;
	border-top-left-radius: 0;
}
/* accent-line as separator */
:where(.wp-block-separator).accent-line,
.wp-block-separator.has-background.accent-line {
	width: 36px !important;
	height: 0 !important;
	max-width: 36px !important;
	min-height: 0 !important;
	border: 0 !important;
	border-top: 3px solid #c9a84c !important;
	background: transparent !important;
	margin: 10px auto 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	box-sizing: border-box !important;
	opacity: 1 !important;
}
/* card date label styled as badge */
.card-date-label {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--c-primary);
	color: #fff !important;
	font-size: 11px !important;
	font-family: var(--wp--preset--font-family--montserrat);
	padding: 4px 8px;
	border-radius: 2px;
	margin: 0 !important;
}

/* === responsive === */
/* 注意：窄桌面（1200px ~ 1025px，如 14 英寸笔记本 1189px 宽）仍保留 320px
   侧边栏，避免侧边栏被压窄到 240px 导致 logo/导航换行分成两列。
   真正的抽屉模式只在 ≤1024px 触发（见下方 mobile 媒体查询）。 */
@media (max-width: 1200px) {
	.zoory-sidebar { padding: 20px 12px; }
	.zoory-sidebar .site-logo figure { margin: 18px 0 0 0; }
	.zoory-sidebar .site-logo img {
		width: 150px !important;
		max-width: 150px;
	}
	/* 窄屏侧边栏：导航仅做视觉紧凑，不改变布局列数 */
	.zoory-nav { margin-top: 12px !important; }
	.zoory-nav ul li a,
	.zoory-nav .wp-block-navigation-item__content {
		padding: 13px 18px !important;
		font-size: 16px !important;
		line-height: 23px !important;
	}
	/* footer 的导航列宽/gap 由 footer.css 的媒体查询统一管理，此处不再设置，避免重复覆盖。 */
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* === 14 英寸笔记本（视口高度 ≤800px 的矮屏）===
   侧边栏为 fixed 100vh，当菜单总高度超过视口高度时，底部的“联系我们”会被
   任务栏遮挡且无法滚动。此处压缩顶部空间让 logo 上移，并给导航加纵向滚动
   兜底，确保底部菜单项可完整显示。仅按高度触发，不影响高分辨率大屏。 */
@media (max-height: 800px) {
	.zoory-sidebar {
		padding-top: 0;
		padding-bottom: 4px;
	}
	.zoory-sidebar .site-logo {
		padding: 0 12px 0;
	}
	.zoory-sidebar .site-logo figure {
		margin-top: 0;
		margin-bottom: 0;
	}
	.zoory-nav {
		margin-top: 8px !important;
		/* 不能用 overflow:auto，否则会把向右/向下弹出的子菜单裁剪在侧边栏内
		   （表现为被任务栏截断）。压缩间距后菜单可在 800px 内完整显示，无需滚动。 */
		overflow: visible;
	}
}
/* === mobile menu toggle (hamburger) + drawer overlay === */
/* 桌面端隐藏，仅移动端显示 */
.zoory-menu-toggle {
	display: none;
}
.zoory-sidebar-overlay {
	display: none;
}

@media (max-width: 768px) {
	:root { --sidebar-width: 0px; }
	html, body { overflow-x: hidden; }
	.zoory-sidebar {
		width: 280px;
		max-width: 82vw;
		transform: translateX(-100%);
		transition: transform 0.3s ease, visibility 0.3s ease;
		box-shadow: 4px 0 24px rgba(0,0,0,0.25);
		visibility: hidden; /* 关闭时彻底隐藏，防止子菜单溢出到屏幕上 */
		overflow-y: auto;
	}
	.zoory-sidebar.open {
		transform: translateX(0);
		visibility: visible;
		z-index: 1150; /* 盖住固定顶栏 */
	}
	/* 移动端抽屉内不显示 logo（避免与汉堡/顶栏重复） */
	.zoory-sidebar .site-logo { display: none !important; }
	.zoory-main {
		margin-left: 0;
		width: 100%;
		padding-top: 0; /* hero 直接贴顶部，搜索栏悬浮覆盖不影响 */
	}
	/* 汉堡按钮 */
	.zoory-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
		position: fixed;
		top: calc((var(--header-height) - 40px) / 2);
		left: 12px;
		width: 40px;
		height: 40px;
		padding: 0;
		background: var(--c-primary);
		border: none;
		border-radius: 8px;
		cursor: pointer;
		z-index: 1200;
		box-shadow: 0 1px 6px rgba(0,0,0,0.15);
	}
	.zoory-menu-toggle__bar {
		display: block;
		width: 20px;
		height: 2px;
		background: #fff;
		border-radius: 2px;
		transition: transform 0.25s ease, opacity 0.2s ease;
	}
	.zoory-menu-toggle.is-active .zoory-menu-toggle__bar:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.zoory-menu-toggle.is-active .zoory-menu-toggle__bar:nth-child(2) {
		opacity: 0;
	}
	.zoory-menu-toggle.is-active .zoory-menu-toggle__bar:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}
	/* 遮罩层 */
	.zoory-sidebar-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.45);
		z-index: 1050;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.zoory-sidebar-overlay.show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	/* 顶栏搜索在移动端与汉堡并列：精确满宽不溢出，左侧给汉堡让位 */
	.zoory-topbar {
		top: 0;
		left: 0;
		right: 0;
		width: auto;
		box-sizing: border-box;
		padding: 0 12px 0 64px; /* 左侧留汉堡按钮位置，避免重叠 */
		justify-content: flex-end;
	}
	/* 搜索 + 语言切换并排：搜索可收缩，语言切换保持完整，整体不溢出视口 */
	.zoory-topbar > form { flex: 1 1 auto; max-width: 46vw; }
	.zoory-topbar .wp-block-search__input { width: 100%; min-width: 0; font-size: 12px; }
	.zoory-lang-switch { margin-left: 8px; }
	.zoory-lang-switch__item { padding: 6px 8px; }
	/* 子菜单在抽屉内改为内联展开，避免绝对定位溢出屏幕外 */
	.zoory-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		position: static !important;
		left: auto !important;
		top: auto !important;
		min-width: 0 !important;
		width: 100% !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		/* 默认折叠，点击父项才展开（手风琴式） */
		height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: none !important;
	}
	.zoory-nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
	.zoory-nav .wp-block-navigation-submenu[data-open="true"] > .wp-block-navigation__submenu-container {
		height: auto !important;
		overflow: visible !important;
		opacity: 1 !important;
		visibility: visible !important;
		padding: 0 0 8px !important;
	}
	.zoory-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 40px !important;
		font-size: 15px !important;
		background: transparent !important;
	}
	.zoory-nav .wp-block-navigation__submenu-container .wp-block-navigation-item::after {
		display: none !important;
	}
	/* 内页 hero 内容区在移动端减少内边距，避免文字被挤到窄条 */
	.page-hero { height: 240px; min-height: 240px; max-height: 240px; margin-top: 0; }
	.page-hero .hero-content { padding: 28px 20px !important; }
	.page-hero .wp-block-heading { font-size: 34px !important; }
	.about-breadcrumb { font-size: 16px !important; }
	/* 移动端内容/页脚占满宽度，去掉桌面端对齐用的左边距 */
	.wp-block-post-content { margin-left: 0 !important; }
	.products-overview { margin-left: 0 !important; }
	.site-footer { margin-left: 0 !important; }
	/* 清除桌面端 hero/section 的 30px 左外边距，避免移动端右溢出出现横滚 */
	.page-hero,
	.products-section,
	.sus-section,
	.contact-section { margin-left: 0 !important; }
	.section-brand { flex-direction: column; }
	.section-brand .brand-image,
	.section-brand .brand-content { flex: none; width: 100%; }
	.product-slider { flex-direction: column; }
	.section-tech .tech-inner { flex-direction: column; }
	.industry-grid { grid-template-columns: 1fr; }
	.news-grid { grid-template-columns: 1fr; padding: 0 20px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	/* --- footer 移动端 --- */
	.footer-top,
	.wp-block-group.footer-top { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
	.footer-logo,
	.wp-block-group.footer-logo { margin-right: 0 !important; }
	.footer-logo img,
	.wp-block-group.footer-logo img { width: 160px !important; max-width: 160px !important; }
	.footer-logo figure,
	.wp-block-group.footer-logo figure { width: 160px !important; max-width: 160px !important; }
	/* 移动端社交图标左对齐（纯 CSS，无需 JS） */
	.footer-social,
	.wp-block-group.footer-social { justify-self: start !important; }
	.footer-nav-columns,
	.wp-block-group.footer-nav-columns { grid-template-columns: 1fr !important; }
	/* 隐藏桌面端 75/25 分界竖线 */
	.footer-nav-columns::after,
	.wp-block-group.footer-nav-columns::after { display: none !important; }
	.footer-nav-wrap,
	.wp-block-group.footer-nav-wrap { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 18px !important; margin-left: 0 !important; }
	.footer-nav-col,
	.wp-block-group.footer-nav-col { padding-right: 0 !important; }
	.footer-contact,
	.wp-block-group.footer-contact { padding-left: 0 !important; margin-left: 0 !important; margin-top: 12px !important; }
	/* 底部版权信息竖排 */
	.footer-bottom,
	.wp-block-group.footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
	.footer-bottom > p:last-child { text-align: left !important; white-space: normal !important; }
	.site-footer { padding: 24px 20px 16px; border-radius: 10px; }
}

/* === breadcrumb (所有 hero 内面包屑统一，单一来源) === */
.about-breadcrumb {
	font-family: var(--wp--preset--font-family--oppo-sans);
	font-size: 20.93px !important;
	font-weight: 300 !important;
	letter-spacing: 0.42px;
	color: #D2B67F;
	margin: 0 !important;
}
.about-breadcrumb a { color: #D2B67F; }

/* === 产品中心（/products/、产品分类、产品详情）面包屑：品牌主绿覆盖 ===
   body 标记类 zoory-product-page 由 functions.php 注入，仅作用于产品中心三层页面，
   不影响成套工艺包及其他栏目（那些页面保持默认金色）。 */
body.zoory-product-page .about-breadcrumb,
body.zoory-product-page .about-breadcrumb a { color: var(--c-primary); }
/* 面包屑上方的 hero 大标题（如「我们的产品」）同样改为品牌主绿 */
body.zoory-product-page .page-hero .wp-block-heading { color: var(--c-primary) !important; }

/* === 关于助瑞栏目子页 hero 文字：品牌主绿覆盖 ===
   body 标记类 zoory-about-hero 由 functions.php 注入（zh/en 翻译对同 slug），
   作用于公司介绍/企业文化/企业优势/人文科技四个子页，不影响其余栏目（保持默认金色）。 */
body.zoory-about-hero .about-breadcrumb,
body.zoory-about-hero .about-breadcrumb a { color: var(--c-primary); }
body.zoory-about-hero .page-hero .wp-block-heading { color: var(--c-primary) !important; }

/* === 联系我们页 hero 文字：品牌主绿覆盖 ===
   body 标记类 zoory-contact-hero 由 functions.php 注入，
   作用于 /contact/（联系我们）与 /contact/?tab=recruitment（人才理念）两个 tab 共用 hero。 */
body.zoory-contact-hero .about-breadcrumb,
body.zoory-contact-hero .about-breadcrumb a { color: var(--c-primary); }
body.zoory-contact-hero .page-hero .wp-block-heading { color: var(--c-primary) !important; }

/* === 内容图片统一圆角 10px === */
/* 仅作用于主内容区图片（hero 用的是背景图，侧边栏/顶栏不在范围内） */
.zoury-main img { border-radius: 10px; }

/* 自定义模板的 hero / 内容区左对齐：统一 margin-left: 30px，与 wp-block-post-content 对齐 */
.page-hero,
.products-section,
.sus-section,
.contact-section {
	margin-left: 30px;
}

/* === 内页统一 hero（除首页外所有页面共用，改样式只改这里） === */
.page-hero {
	background: #0b3a24 url('/wp-content/uploads/2026/07/about-hero.webp') center/cover no-repeat;
	height: 650px;
	margin-top: 20px;
	min-height: 650px;
	max-height: 650px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.page-hero .hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 48px 50px !important;
}
.page-hero .wp-block-heading {
	font-size: 50px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	color: #D2B67F !important;
	margin-bottom: 14px !important;
	transform: translateY(15px);
}

/* === reduced-motion === */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* === 通用页面 tab 导航（关于助瑞/应用行业/可持续发展/新闻动态/产品中心统一使用） ===
   结构可为 <a class="section-tab"> 或 <p class="section-tab"><a>，两种都支持。
   整组居中；每个 tab 内文字与长下横线（左绿右金）左对齐；悬停绿色向右滑动淹没金色。 */
.section-tabs {
	display: flex !important;
	/* 允许一行放不下时整体换行（英文长标签） */
	flex-wrap: wrap;
	justify-content: center;
	/* 子项底部对齐：当某个 tab 标签折成两行（英文长分类名，.split-label）时，
	   其盒子底部与同行的单行 tab 一致，长下划线（::after bottom:-8px）即可保持同一水平线；
	   所有 tab 等高时该值等同 center，不影响其余页面 */
	align-items: flex-end;
	/* 垂直行间距需容纳 tab 底部外延的长下划线（::after bottom:-8px） */
	gap: 46px 64px;
	margin: 55px 0 85px;
	padding: 0 40px;
}
.section-tab {
	display: inline-block;
	position: relative;
	margin: 0;
	min-width: 120px;
	padding: 6px 0;
	font-family: var(--wp--preset--font-family--oppo-sans);
	font-size: 20px;
	font-weight: 700;
	color: var(--c-primary);
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.section-tab a {
	display: inline;
	color: inherit;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
}
/* 两行 tab 标签（如 Quaternary Ammonium & Phosphonium Compounds）：收紧两行行距 */
.section-tab.split-label {
	line-height: 1.2;
}
/* 金色横线铺满整条（长横线，左端对齐文字、向右延伸） */
.section-tab::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 124%;
	height: 5px;
	background: var(--c-accent);
	border-radius: 2px;
}
/* 绿色横线：默认占左边一半，悬停/当前项时向右滑动淹没金色 */
.section-tab::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 50%;
	height: 5px;
	background: var(--c-primary);
	border-radius: 2px;
	z-index: 1;
	transition: width 0.35s ease;
}
.section-tab:hover::before,
.section-tab.is-active::before {
	width: 124%;
}
@media (max-width: 768px) {
	/* 分类 tab 用 3 列网格，6 个正好排成 2 行全部可见且对齐 */
	.section-tabs {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 4px 0;
		flex-wrap: unset;
		overflow: visible;
	}
	.section-tab {
		display: flex !important;
		justify-content: center;
		align-items: center;
		min-width: 0;
		padding: 10px 6px;
		font-size: 14px;
		text-align: center;
		white-space: normal;
	}
	.section-tab::before { display: none; }
	.section-tab::after {
		left: 50% !important;
		transform: translateX(-50%);
		width: 56px !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.section-tab.is-active::after {
		background: var(--c-primary);
	}
}
