/**
 * ManTleglow Core — 区块小工具样式。
 *
 * 分层原则：
 *   本文件只放「结构性样式」——栅格、定位、溢出、层级、动画关键帧、响应式折叠逻辑。
 *   「可视参数」（颜色 / 字号 / 字重 / 字间距 / 行高 / 间距 / 圆角 / 边框 / 阴影 / 列数）
 *   一律由 Elementor 控件通过 selectors 输出，禁止在此写死。
 *
 * 依赖主题提供的 CSS 变量：--mtg-color-* / --mtg-font-* / --mtg-container-* 等。
 *
 * 图片高度约定：Elementor 的 `.elementor img { height: auto }` 与本文件的
 * `.mtg-x__y img { height: 100% }` 特异性相同、但加载更晚，会盖掉后者。
 * 因此凡是给 <img> 定高的规则，选择器一律多带一层根类（`.mtg-x .mtg-x__y img`）；
 * 图片类名直接写在 img 上的（如 .mtg-banner__img）同理补根类。
 */

/* 编辑器中隐藏仅前端需要的装饰元素 */
.mtg-el-hidden {
	display: none !important;
}

/* 编辑器中「缺少配置」的提示（仅编辑器可见，不影响前端） */
.mtg-editor-notice {
	padding: 12px 16px;
	border: 1px dashed var(--mtg-color-gold, #c9a227);
	background: rgb(201 162 39 / 8%);
	color: var(--mtg-color-text-muted, #666);
	font-size: 13px;
	line-height: 1.5;
}

/* 内联 SVG 图标
   Elementor 开启「内联字体图标」时图标输出为 <svg class="e-font-icon-svg">，不带宽高，
   需要跟随所在容器由控件设置的字号，否则会渲染成 0×0 的不可见图标。 */
[class*="elementor-widget-mtg-"] .e-font-icon-svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   顶部条
   --------------------------------------------------------------------------- */
.mtg-topbar {
	position: relative;
	z-index: 60;
}

.mtg-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--mtg-container-max);
	margin: 0 auto;
	/* 撑满顶部条高度，让三块内容垂直居中（顶部条用 min-height 定高，百分比高度不生效）。 */
	min-height: inherit;
}

.mtg-topbar__trust,
.mtg-topbar__shipping {
	display: flex;
	align-items: center;
}

.mtg-topbar__stars {
	display: inline-flex;
	align-items: center;
}

.mtg-topbar__star {
	display: inline-flex;
	align-items: center;
}

.mtg-topbar__promo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* 窄屏下把中间促销块改为常规流并置于首位；三块改为纵向堆叠（间距由小工具控件下发）；
   配送信息按设计稿隐藏 */
@media (max-width: 768px) {
	.mtg-topbar__inner {
		flex-direction: column;
		align-items: center;
	}

	.mtg-topbar__promo {
		position: static;
		transform: none;
		order: -1;
	}

	.mtg-topbar__shipping {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   首页 · 页头悬浮（仅宽屏）
   ---------------------------------------------------------------------------
   目标站首页的页头结构：
     .he-header          position: sticky, z-index 100  → 页头整体固定
       .index-top-banner height 44px                    → 公告条（占流）
       .home-nav-wrapper position: absolute, top: 44px  → 导航浮层（脱离流）
   所以页面内容从 44px 处开始，导航覆盖在 Banner 上方，且首页时导航背景始终透明。

   这里用 `body.home` 前缀限定，好处是只需维护一套页头模板：
   其他页面仍是常规流页头，只有首页切换为悬浮。
   窄屏不做悬浮：顶部条在窄屏是两行（59px），而悬浮偏移用的是宽屏令牌
   --mtg-topbar-height（44px），实测会压住公告条 15px；且「透明底 + 白字」
   只适合叠在首屏大图上。窄屏统一走下面的「移动端页头」。 */
@media (min-width: 769px) {
	body.home .elementor-location-header {
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
	}

	body.home .mtg-nav-overlay {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 5;
	}

	body.home .mtg-nav-overlay--main {
		top: var(--mtg-topbar-height);
	}

	body.home .mtg-nav-overlay--sub {
		top: calc(var(--mtg-topbar-height) + var(--mtg-header-height));
	}

	/* 搜索面板从主导航下沿展开，会压到二级导航上。两者同为 z-index 5 且二级导航在 DOM 更后，
	   所以只在面板展开时把主导航抬到二级导航之上；收起后恢复，避免挡住 Mega 面板。 */
	body.home .mtg-nav-overlay--main:has(.mtg-main-nav__search:not([hidden])) {
		z-index: 6;
	}

	/* 悬浮态背景透明。这里必须用 !important：Elementor 按控件生成的规则形如
	   `.elementor-116 .elementor-element.elementor-element-xxx .mtg-main-nav`（4 个类），
	   特异性高于任何普通覆盖，而该背景本身仍需保留给「非首页」的常规页头使用。 */
	body.home .mtg-main-nav,
	body.home .mtg-cat-nav {
		background-color: transparent !important;
	}
}

/* ---------------------------------------------------------------------------
   移动端页头（≤768）
   ---------------------------------------------------------------------------
   目标是 App 式的两条常驻行：主导航条 56px + 分类条 41px，公告条随滚动收起。
   所有页面（含首页）统一走这一套，不再区分「悬浮/常规」。 */
@media (max-width: 768px) {
	.elementor-location-header {
		position: sticky;
		top: 0;
		z-index: 100;
		width: 100%;
	}

	.mtg-topbar {
		overflow: hidden;
		max-height: 140px;
		transition: max-height 0.25s ease, opacity 0.2s ease;
	}

	/* 滚过公告条后收起，页头只剩 56 + 41 = 97px。 */
	body.mtg-nav-compact .mtg-topbar {
		max-height: 0;
		opacity: 0;
		/* 否则公告条的下边框会在顶部留一条 1px 亮线。这里用 !important：
		   该边框由控件的 4 类选择器下发（.elementor-<id> .elementor-element .elementor-element-<id> .mtg-topbar），
		   普通覆盖压不住。 */
		border-bottom-width: 0 !important;
	}

	/* 汉堡菜单：左侧滑出抽屉（原来是全屏铺满的浮层）。
	   层级低于主导航条与分类条，所以顶栏（深底 + 白字）、汉堡、遮罩层次正确：
	   抽屉 9997 / 遮罩 9996 都在主导航条 9999 之下，顶栏始终可见可点。
	   关闭态用 hidden 兜底（脚本没跑时面板不会挡住页面），滑入过渡由脚本补的 is-open 触发。 */
	.mtg-main-nav__mobile {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 9997;
		/* 与控件的「面板宽度」默认值一致，控件可覆盖；max-width 防止窄屏溢出。 */
		width: 85%;
		max-width: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.mtg-main-nav__mobile.is-open {
		transform: translateX(0);
	}

	/* 抽屉自己的顶栏：左侧 LOGO + 右侧关闭按钮。
	   顶栏原本的 LOGO 在抽屉之下会被盖住，所以抽屉里必须自带一份，
	   否则打开后顶上是一片空白（也没有关闭入口）。
	   头部 sticky 在抽屉顶部，菜单滚很长时关闭按钮始终可点。 */
	.mtg-main-nav__drawer-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		/* 与顶栏同高，滑动时正好接在顶栏下方，不会有错位感。 */
		min-height: var(--mtg-header-height);
		padding: 0 var(--mtg-container-pad);
		/* 跟随面板背景（面板背景走控件），滚动时菜单文字不会透到头部。 */
		background-color: inherit;
	}

	.mtg-main-nav__drawer-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* 保持 40×40 的可点区域，图标视觉尺寸由控件下发。 */
		min-width: 40px;
		min-height: 40px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.mtg-main-nav__drawer-close svg {
		display: block;
		width: 22px;
		height: 22px;
	}

	/* 遮罩：盖住页面内容，点按即关（宽度到手后右侧这条就是可见的关闭区）。 */
	.mtg-main-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 9996;
	}

	/* 登录后 WP 工具条是 fixed + z-index 99999，会压住页头顶部：页头与抽屉整体下沉
	   一个工具条高度，否则抽屉里的 LOGO / 关闭按钮被工具条盖住、点不到。
	   （工具条 ≤782px 时自己会撑到 46px，见下面紧随的那条覆盖。） */
	body.admin-bar .elementor-location-header,
	body.admin-bar .mtg-main-nav__mobile,
	body.admin-bar .mtg-main-nav__backdrop {
		top: 32px;
	}

	/* 面板打开时收起分类条（它在抽屉与遮罩之上）并锁页面滚动。
	   注意判断条件是「未 hidden」而不是「is-open」：关闭动画期间面板仍可见，
	   此时收起分类条、锁滚动才不会在滑出过程中闪出分类条。 */
	body:has(.mtg-main-nav__mobile:not([hidden])) .mtg-cat-nav {
		display: none;
	}

	body:has(.mtg-main-nav__mobile:not([hidden])) {
		overflow: hidden;
	}
}

/* WordPress 工具条在 ≤782px 会长到 46px，同步把窄屏吸顶页头与抽屉再让一层。 */
@media (max-width: 782px) {
	body.admin-bar .elementor-location-header,
	body.admin-bar .mtg-main-nav__mobile,
	body.admin-bar .mtg-main-nav__backdrop {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------------
   主导航
   --------------------------------------------------------------------------- */
.mtg-main-nav {
	position: relative;
	z-index: 9999;
}

.mtg-main-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--mtg-container-max);
	margin: 0 auto;
}

.mtg-main-nav__left,
.mtg-main-nav__right {
	display: flex;
	align-items: center;
}

.mtg-main-nav__nav {
	display: flex;
	align-items: center;
}

/* 菜单列表：来自 wp_nav_menu 的 <ul>，去掉默认圆点与缩进 */
.mtg-nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtg-main-nav__nav .mtg-nav-links {
	display: flex;
	align-items: center;
}

/* 主导航链接：预留透明下边框作为「当前项」下划线的占位，颜色由小工具控件输出。 */
.mtg-main-nav__nav .mtg-nav-links > li > a {
	border-bottom: 2px solid transparent;
}

.mtg-main-nav__logo {
	display: flex;
	align-items: center;
}

.mtg-main-nav__icons {
	display: flex;
	align-items: center;
}

.mtg-main-nav__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 「展开搜索框」的图标渲染成 <button>，这里抹掉浏览器默认的底色、描边与内边距 */
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* 购物车角标：尺寸以按钮字号为基准，随控件一起缩放 */
.mtg-main-nav__icon-count {
	position: absolute;
	top: -0.5em;
	right: -0.7em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.35em;
	border-radius: 999px;
	line-height: 1;
}

/* 搜索面板：从导航下沿展开，内容宽度与 .mtg-main-nav__inner 对齐 */
.mtg-main-nav__search {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 10;
}

.mtg-main-nav__search[hidden] {
	display: none;
}

.mtg-main-nav__search-inner {
	max-width: var(--mtg-container-max);
	margin: 0 auto;
}

.mtg-main-nav__search-form {
	display: flex;
	align-items: stretch;
}

.mtg-main-nav__search-input {
	flex: 1 1 auto;
	min-width: 0;
}

.mtg-main-nav__search-submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
}

.mtg-main-nav__search-submit svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* 窄屏点击目标：图标视觉尺寸不变，用伪元素把可点区域撑到 40×40
   （图标间距由 main-nav 小工具的「图标间距」控件在移动端给到 22px，保证相邻点击区不重叠）。 */
@media (max-width: 768px) {
	.mtg-main-nav__icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 40px;
		transform: translate(-50%, -50%);
	}

	.mtg-main-nav__toggle {
		min-width: 40px;
		min-height: 40px;
	}

	.mtg-cat-nav__link {
		position: relative;
	}

	.mtg-cat-nav__link::after {
		content: "";
		position: absolute;
		inset: -10px 0;
	}

	/* 文字型控件（Remove / 流程条 / 重置筛选 / 复制优惠码）高度只有 18-24px，同样用伪元素撑高。 */
	.mtg-citems__action,
	.mtg-csteps__cart,
	.mtg-cfilters__reset,
	.mtg-pinfo__copy,
	.mtg-ccard__add,
	.mtg-pcard__add {
		position: relative;
	}

	.mtg-citems__action::after,
	.mtg-csteps__cart::after,
	.mtg-cfilters__reset::after,
	.mtg-pinfo__copy::after {
		content: "";
		position: absolute;
		inset: -9px 0;
	}

	/* 商品卡「加购」图标 26-32px，撑到 40×40。 */
	.mtg-ccard__add::after,
	.mtg-pcard__add::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 40px;
		transform: translate(-50%, -50%);
	}

	/* 其余文字型链接（标题右侧链接 / 阅读更多 / 面包屑 / 文章标签与页脚导航等）
	   实测高度只有 13-29px，用伪元素把可点高度撑到 ≥40px。 */
	.mtg-pcarousel__headline-link,
	.mtg-guides__view-all,
	.mtg-post-card__more,
	.mtg-404__link,
	.mtg-aorders__view,
	.mtg-aorders__more,
	.mtg-citems__add,
	.mtg-pfoot__tag,
	.mtg-crumb__item,
	.mtg-pcard__name,
	.mtg-footer__links a {
		position: relative;
	}

	.mtg-pcarousel__headline-link::after,
	.mtg-guides__view-all::after,
	.mtg-post-card__more::after,
	.mtg-404__link::after,
	.mtg-aorders__view::after,
	.mtg-aorders__more::after,
	.mtg-citems__add::after,
	.mtg-pfoot__tag::after,
	.mtg-crumb__item::after,
	.mtg-pcard__name::after,
	.mtg-footer__links a::after {
		content: "";
		position: absolute;
		inset: -8px 0;
	}

	/* 轮播箭头视觉 27×44，横向补到 44px。 */
	.mtg-reviews__arrow,
	.mtg-guides__arrow {
		position: relative;
	}

	.mtg-reviews__arrow::after,
	.mtg-guides__arrow::after {
		content: "";
		position: absolute;
		inset: 0 -9px;
	}

	/* About 分页圆点、文章分享按钮实测 16×16 / 36×36，撑到 40×40。 */
	.mtg-about__bullet,
	.mtg-pfoot__share-link {
		position: relative;
	}

	.mtg-about__bullet::after,
	.mtg-pfoot__share-link::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 40px;
		transform: translate(-50%, -50%);
	}

	/* 页脚订阅提交按钮实测 30×40。 */
	.mtg-footer__newsletter button[type="submit"] {
		min-width: 40px;
	}
}

.mtg-main-nav__toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	background: none;
	cursor: pointer;
}
.mtg-main-nav__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 3px 0;
}

.mtg-main-nav__mobile .mtg-nav-links {
	display: flex;
	flex-direction: column;
	padding: 12px var(--mtg-container-pad);
}

/* 菜单项撑满整行，纵向内边距交给「菜单项内边距」控件（默认 13px → 行高 44px）。 */
.mtg-main-nav__mobile .mtg-nav-links > li > a {
	display: block;
}

/* ---------------------------------------------------------------------------
   分类导航（Mega 菜单）
   --------------------------------------------------------------------------- */
.mtg-cat-nav {
	position: relative;
	z-index: 9998;
}

.mtg-cat-nav__inner {
	display: flex;
	align-items: center;
	max-width: var(--mtg-container-max);
	margin: 0 auto;
}

.mtg-cat-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
}

.mtg-cat-nav__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* 当前项下划线：颜色继承文字颜色，长度跟随项目宽度 */
.mtg-cat-nav__item.is-current > .mtg-cat-nav__link {
	box-shadow: inset 0 -2px 0 0 currentcolor;
}

/* 下拉面板：默认隐藏，悬停 / 键盘聚焦时展开 */
.mtg-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	z-index: 99999;
}

.mtg-cat-nav__item.has-children:hover > .mtg-dropdown,
.mtg-cat-nav__item.has-children:focus-within > .mtg-dropdown {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.mtg-dropdown__links {
	display: grid;
	align-content: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-dropdown__item {
	display: block;
}

.mtg-dropdown__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mtg-dropdown__media-item {
	display: block;
}

.mtg-dropdown__media-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mtg-dropdown__media-name {
	display: block;
}

.mtg-badge {
	display: inline-block;
	vertical-align: top;
}

/* 移动端：横向滚动或换行堆叠（对齐方式由控件控制）
   注意：overflow 必须只在窄屏生效——桌面端开启 overflow-x 会连带把 overflow-y 计算为 auto，
   从而裁掉绝对定位的下拉面板，使其不可见也不可点。 */
@media (max-width: 768px) {
	.mtg-cat-nav--mobile-scroll .mtg-cat-nav__inner {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mtg-cat-nav--mobile-scroll .mtg-cat-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.mtg-cat-nav--mobile-wrap .mtg-cat-nav__inner {
		flex-wrap: wrap;
	}

	/* 窄屏一级项目改成胶囊 chips（App 式），宽屏仍是纯文字 + 当前项下划线。
	   底色/圆角由控件写成变量（--mtg-cat-chip-*），只在窄屏消费。 */
	.mtg-cat-nav__link {
		border-radius: var(--mtg-cat-chip-radius, 999px);
		background-color: var(--mtg-cat-chip-bg, rgba(255, 255, 255, 0.1));
	}

	.mtg-cat-nav__item.is-current > .mtg-cat-nav__link {
		box-shadow: none;
		background-color: var(--mtg-cat-chip-bg-active, #ffffff);
		/* !important：当前项文字色由控件的 4 类选择器下发（宽屏是黄色字 + 下划线），
		   窄屏胶囊上是白底，必须换深色字。 */
		color: var(--mtg-cat-chip-color-active, #1c1c1c) !important;
	}

	.mtg-dropdown {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   页脚
   --------------------------------------------------------------------------- */
.mtg-footer__main {
	max-width: var(--mtg-container-max);
	margin: 0 auto;
	padding-inline: var(--mtg-container-pad);
}

.mtg-footer__grid {
	display: grid;
}

.mtg-footer__cols {
	display: grid;
}

/* 栏目链接：来自 wp_nav_menu 的 <ul>，纵向列表（去掉默认圆点与缩进）。
   注意不要复用主题兜底模板的 `.mtg-menu`：那里是页头用的横向 flex 菜单，
   用在页脚会把链接挤成横向多行。 */
.mtg-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-footer__newsletter {
	position: relative;
	display: flex;
}

.mtg-footer__newsletter input {
	flex: 1;
	min-width: 0;
	margin: 0;
	border: 0;
}

.mtg-footer__newsletter button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	cursor: pointer;
}

.mtg-footer__social {
	display: flex;
	align-items: center;
}

.mtg-footer__social a {
	display: inline-flex;
	align-items: center;
}

.mtg-footer__payments {
	border-top-width: 1px;
	border-top-style: solid;
	text-align: center;
}

.mtg-footer__payments-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mtg-footer__payment {
	display: inline-flex;
	align-items: center;
}

.mtg-footer__copyright {
	border-top-width: 1px;
	border-top-style: solid;
	text-align: center;
}

.mtg-footer__copyright p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   悬浮工具（侧边徽标 + 客服气泡）
   --------------------------------------------------------------------------- */
.mtg-contact-float__badge,
.mtg-contact-float__chat {
	position: fixed;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtg-contact-float__badge {
	left: 0;
}

.mtg-contact-float__chat {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   星级评分（多处复用：顶部条 / 评价区块）
   --------------------------------------------------------------------------- */
.mtg-stars {
	display: inline-flex;
	align-items: center;
	/* 目标站星级：星与星之间 4px 间距，单颗宽度等于字号（16px 字号 → 5 颗 96px）。 */
	gap: var( --mtg-star-gap, 4px );
}

.mtg-star {
	display: inline-flex;
	width: 1em;
	height: 1em;
}

.mtg-star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.mtg-star.is-filled {
	color: #deac1a;
}

.mtg-star:not(.is-filled) {
	color: #f0f0f0;
}

/* ---------------------------------------------------------------------------
   首页 · Banner（单图 / 多图轮播，对齐目标站 .index-banner）
   --------------------------------------------------------------------------- */
.mtg-banner {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
}

.mtg-banner__inner {
	display: flex;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

.mtg-banner__media {
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
}

.mtg-banner .mtg-banner__img {
	display: block;
	width: 100%;
	height: 100%;
}

.mtg-banner__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* 窄屏专用图由 <picture><source media> 交给浏览器按视口取其一（见 print_picture），
   不再用「两张 img + CSS 显隐」（那样两张都会下载）。
   <picture> 是 .mtg-banner__media 这个 flex 容器的子项，不给宽高会按图片原始尺寸排布、
   撑不满 aspect-ratio 的框，所以这里显式铺满。 */
.mtg-banner__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * 多图轮播：.mtg-banner__slider 撑满 .mtg-banner（高度仍由 aspect-ratio 决定），
 * slide 宽高由 Swiper 自己接管；圆点是模板直接输出的 button，位置 / 大小 / 颜色由控件下发。
 */
.mtg-banner--carousel .mtg-banner__slider {
	width: 100%;
}

/*
 * 轮播里整块 slide 都是链接，浏览器默认会把它当成可拖拽对象：
 * 按住鼠标拖动会变成「拖链接 / 拖图片」而不是翻页。这里关掉原生拖拽与文本选中，
 * 把拖动交回给 Swiper（触屏不受影响）。
 *
 * height: 100% 不能省：Swiper 的 .swiper-slide 是 display: block，
 * .mtg-banner__inner 高度默认 auto，会让下面 __media 与 img 的 height: 100%
 * 退化成「图片原始高度」，于是 aspect-ratio 撑开的高容器下方留一大片空白
 * （object-fit: cover 也失去作用）。显式撑满后图片才真正填满容器。
 * 单图/视频链路是 flex 拉伸，不需要这条。
 */
.mtg-banner--carousel .mtg-banner__inner {
	height: 100%;
}

.mtg-banner--carousel .mtg-banner__inner,
.mtg-banner--carousel .mtg-banner__inner img {
	-webkit-user-drag: none;
	user-select: none;
}

.mtg-banner__dots {
	position: absolute;
	z-index: 2;
	right: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtg-banner__dot {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
}

.mtg-banner__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   首页 · Hero
   --------------------------------------------------------------------------- */
.mtg-hero {
	position: relative;
	display: flex;
	overflow: hidden;
}

.mtg-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mtg-hero .mtg-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mtg-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: var(--mtg-container-max);
	margin: 0 auto;
}

.mtg-hero__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
}

.mtg-hero__title {
	margin: 0;
}

.mtg-hero__subtitle,
.mtg-hero__deal {
	margin: 0;
}

.mtg-hero__code {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	cursor: pointer;
}

.mtg-hero__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-hero__trust-item {
	display: inline-flex;
	align-items: center;
}

.mtg-hero__trust-icon {
	display: inline-flex;
	align-items: center;
}

.mtg-hero__cta {
	display: flex;
	align-items: center;
}

.mtg-hero__button {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mtg-hero__button-icon {
	display: inline-flex;
	align-items: center;
}

@media (max-width: 768px) {
	.mtg-hero__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	/* 设计稿 `@media (max-width:768px) { .hero__trust { display: none } }` */
	.mtg-hero__trust {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   首页 · 按性别购物
   --------------------------------------------------------------------------- */
.mtg-shop-gender__grid {
	display: grid;
}

.mtg-gender-card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.mtg-gender-card__media {
	display: block;
	overflow: hidden;
}

/* 同 .mtg-post-card__media img：多带一层根类，避免被 Elementor 的 `.elementor img { height: auto }` 覆盖 */
.mtg-shop-gender .mtg-gender-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mtg-gender-card:hover .mtg-gender-card__media img {
	transform: scale(1.03);
}

.mtg-gender-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mtg-gender-card__title {
	display: block;
}

.mtg-gender-card__button {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   首页 · 商品展示（Tab 切换）
   --------------------------------------------------------------------------- */
.mtg-products__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-products__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

/* 当前 Tab 下划线：高度与颜色由控件输出，此处只做定位 */
.mtg-products__tab::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	content: "";
}

.mtg-products__panel[hidden] {
	display: none;
}

.mtg-products__grid {
	display: grid;
}

.mtg-products__footer {
	display: flex;
	justify-content: center;
}

.mtg-products__view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mtg-product-card__media {
	position: relative;
	overflow: hidden;
}

.mtg-product-card__image-link {
	position: absolute;
	inset: 0;
	display: block;
}

.mtg-product-card__figure {
	display: block;
	width: 100%;
	height: 100%;
}

.mtg-product-card .mtg-product-card__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 第二张图（悬停切换）：默认叠在上层并隐藏 */
.mtg-product-card__figure--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.mtg-product-card:hover .mtg-product-card__figure--hover {
	opacity: 1;
}

.mtg-product-card__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.mtg-product-card__badge {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.mtg-product-card__wishlist {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.mtg-product-card__title {
	margin: 0;
	/* 设计稿 `.product-card__title`：固定两行高度，超出省略，保证卡片底部对齐。 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mtg-product-card__title a {
	text-decoration: none;
}

.mtg-product-card__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-product-card__price {
	display: flex;
	align-items: baseline;
}

.mtg-product-card__cart {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   首页 · 分类网格
   --------------------------------------------------------------------------- */
.mtg-category-grid__grid {
	display: grid;
}

.mtg-category-item {
	display: block;
	text-decoration: none;
}

.mtg-category-item__image {
	display: block;
	overflow: hidden;
}

.mtg-category-item .mtg-category-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mtg-category-item:hover .mtg-category-item__image img {
	transform: scale(1.05);
}

.mtg-category-item__name {
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   首页 · 促销横幅
   --------------------------------------------------------------------------- */
.mtg-custom-banner {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	text-decoration: none;
}

.mtg-custom-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mtg-custom-banner .mtg-custom-banner__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-custom-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mtg-custom-banner__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--mtg-container-max);
	margin: 0 auto;
	text-align: center;
}

.mtg-custom-banner__title {
	margin: 0;
}

/* 副标题两侧装饰线：颜色与宽度由控件输出 */
.mtg-custom-banner__subtitle {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.mtg-custom-banner__subtitle::before,
.mtg-custom-banner__subtitle::after {
	flex-shrink: 0;
	height: 1px;
	background: var(--mtg-banner-line-color, rgb(255 255 255 / 60%));
	content: "";
}

/* ---------------------------------------------------------------------------
   首页 · Logo 跑马灯
   --------------------------------------------------------------------------- */
.mtg-logo-marquee {
	overflow: hidden;
}

.mtg-logo-marquee__track {
	display: flex;
	width: max-content;
	animation: mtg-marquee linear infinite;
}

.mtg-logo-marquee__item {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	text-decoration: none;
}

.mtg-logo-marquee .mtg-logo-marquee__item img {
	display: block;
	width: auto;
	/* 高度由小工具控件下发（目标站 logo 渲染高 66px）。 */
	height: var(--mtg-logo-height, 66px);
	object-fit: contain;
}

@keyframes mtg-marquee {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
	.mtg-logo-marquee__track {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
   首页 · 关于我们
   --------------------------------------------------------------------------- */
/*
 * 目标站 .brand-story-warp 是竖向轮播：容器高 660（= 单条故事高），右侧独立 116px 分页列。
 * .mtg-about__grid 是 .brand-story-item：图 939 / 1771 ≈ 53%，文案栏 47%，
 * 两者之间没有 gap，间距由文案栏自身 64+116 内边距产生。
 */
.mtg-about__swiper {
	position: relative;
	overflow: hidden;
	height: var( --mtg-about-height, 660px );
}

.mtg-about__grid {
	display: flex;
	align-items: center;
	height: 100%;
}

.mtg-about__media {
	flex: 0 0 auto;
	overflow: hidden;
}

.mtg-about__content {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * 分页列用三层层级选择器，避免被同类通用规则覆盖。
 * z-index 必须高于 .swiper-slide（position: relative），否则圆点会被故事文案盖住而点不到；
 * 目标站 .swiper-pagination 同样给了 z-index: 10。
 * 圆点是模板直接输出的 button（引入的 Swiper 精简构建不含 Pagination 模块）。
 */
.mtg-about .mtg-about__swiper .mtg-about__pagination {
	position: absolute;
	z-index: 10;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 116px;
	transform: translateY( -50% );
}

.mtg-about .mtg-about__swiper .mtg-about__bullet {
	display: block;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
}

.mtg-about__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.mtg-about__title,
.mtg-about__subtitle {
	margin: 0;
}

.mtg-about__text > :last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	/* 窄屏不做竖向轮播：只展示第一条故事，避免固定高度把文案裁掉。 */
	.mtg-about__swiper {
		height: auto;
		overflow: visible;
	}

	.mtg-about__swiper .swiper-slide {
		height: auto;
	}

	.mtg-about__swiper .swiper-slide:not(:first-child),
	.mtg-about__pagination {
		display: none;
	}

	.mtg-about__grid {
		flex-direction: column;
		height: auto;
	}
}

/* ---------------------------------------------------------------------------
   首页 · Tab 商品画廊（对齐目标站 .product-list-warp）
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   首页 · 分类卡片轮播（对齐目标站 .index-category-style）
   --------------------------------------------------------------------------- */
.mtg-ccarousel__heading {
	margin: 0;
}

.mtg-ccarousel__swiper {
	overflow: hidden;
}

/* 与商品画廊同理：slide 交回给卡片自身的固定宽度。 */
.mtg-ccarousel__swiper .swiper-slide {
	width: auto;
	flex-shrink: 0;
}

.mtg-ccard {
	display: flex;
	flex-direction: column;
}

.mtg-ccard__media {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
}

.mtg-ccard .mtg-ccard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-ccard__name {
	display: block;
	text-decoration: none;
}

/*
 * 目标站标题行默认是「块级 + 居中」（.index-title-c { display:block; text-align:center }），
 * 只有带倒计时的限时抢购改成 flex 两端对齐（标题居左、倒计时居右）。
 */
.mtg-pcarousel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* 只在标题与倒计时之间留 24px；换行后的链接不额外加行间距（目标站标题行 89px）。 */
	column-gap: 24px;
	row-gap: 0;
}

.mtg-pcarousel__head--countdown {
	justify-content: space-between;
}

.mtg-pcarousel__heading {
	margin: 0;
}

/* 标题下方的「Shop All」：单独占一行并居中（目标站 .index-title-link 是 inline-block + 下划线）。 */
.mtg-pcarousel__headline-link {
	display: inline-block;
	width: 100%;
	text-align: center;
	text-decoration: underline;
}

.mtg-pcarousel__countdown {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mtg-countdown {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mtg-countdown__cell,
.mtg-countdown__sep {
	line-height: 1;
}

.mtg-countdown__cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mtg-pcarousel__tabs {
	display: flex;
	/* 目标站 tab 之间靠 stretch 等高，选中项的下划线才能正好压在整条底部分隔线上。 */
	align-items: stretch;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-pcarousel__tab {
	position: relative;
	cursor: pointer;
}

/* 选中项：在文字下方留白之后压一条粗下划线（高度由控件下发，颜色跟随选中文字色）。 */
.mtg-pcarousel__tab.is-active {
	border-bottom: var(--mtg-tab-indicator-height, 3px) solid currentColor;
}

/* 窄屏区块头（App 式）：标题左对齐、右侧同排「Shop All ›」，Tab 变成可横滑的胶囊 chips。
   颜色/圆角由控件写成变量（--mtg-tab-chip-*），只在窄屏消费，宽屏保持「文字 + 下划线」。 */
@media (max-width: 768px) {
	.mtg-pcarousel__head {
		justify-content: flex-start;
		column-gap: 12px;
	}

	/* 倒计时变体仍是两端对齐（标题左、倒计时右）。 */
	.mtg-pcarousel__head--countdown {
		justify-content: space-between;
	}

	.mtg-pcarousel__headline-link {
		width: auto;
		margin-left: auto;
		text-align: right;
		text-decoration: none;
	}

	.mtg-pcarousel__headline-link::after {
		content: "\203A";
		margin-left: 4px;
	}

	.mtg-pcarousel__tabs {
		gap: 8px;
		padding-bottom: 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.mtg-pcarousel__tabs::-webkit-scrollbar {
		display: none;
	}

	.mtg-pcarousel__tab {
		border-radius: var(--mtg-tab-chip-radius, 999px);
		background-color: var(--mtg-tab-chip-bg, #f4f4f4);
	}

	.mtg-pcarousel__tab.is-active {
		border-bottom: 0;
		background-color: var(--mtg-tab-chip-bg-active, #1c1c1c);
		/* !important：选中文字色由「Tab 导航 → 选中颜色」控件的 4 类选择器下发（宽屏用深色），
		   窄屏胶囊上是深底，必须用白字，普通覆盖压不住。 */
		color: var(--mtg-tab-chip-color-active, #ffffff) !important;
	}
}

.mtg-pcarousel__panel {
	display: none;
}

.mtg-pcarousel__panel.is-active {
	display: block;
}

.mtg-pcarousel__swiper {
	overflow: hidden;
}

/* Swiper 的 slide 默认 width:100%，在 slidesPerView:'auto' 下会被拉满容器，
   这里交回给卡片自身的固定宽度（控件「卡片宽度」，目标站 434px）。 */
.mtg-pcarousel__swiper .swiper-slide {
	width: auto;
	flex-shrink: 0;
}

/* 卡片宽度由控件固定（目标站 434px），Swiper 用 slidesPerView: auto 让 slide 随卡片宽。 */
.mtg-pcard {
	display: flex;
	flex-direction: column;
}

.mtg-pcard__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.mtg-pcard .mtg-pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.mtg-pcard__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	line-height: 26px;
}

.mtg-pcard__info {
	display: flex;
	flex-direction: column;
}

.mtg-pcard__name {
	display: block;
	text-decoration: none;
}

.mtg-pcard__price-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mtg-pcard__price,
.mtg-pcard__price-old {
	display: inline-flex;
	align-items: baseline;
}

.mtg-pcard__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	text-decoration: none;
}

/* 「Shop All」为居中按钮（边框与宽度由控件输出）。 */
.mtg-pcarousel__shop-all {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

.mtg-pcarousel__shop-all-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   首页 · 客户评价（对齐目标站 .index-reviews）
   --------------------------------------------------------------------------- */
.mtg-reviews__title,
.mtg-reviews__score,
.mtg-reviews__rating-text {
	margin: 0;
}

.mtg-reviews__rating {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 轮播：卡片宽度由控件固定，间距走 CSS 变量 --mtg-swiper-gap。 */
.mtg-reviews__list {
	position: relative;
}

.mtg-reviews__list .swiper-slide {
	display: flex;
	flex-shrink: 0;
}

/* 左右箭头（评价区 / 文章区 / 商品轮播共用）：目标站为 27×44 的按钮，左右贴边、垂直位于轮播 40% 处。 */
.mtg-reviews__arrow,
.mtg-guides__arrow,
.mtg-cgrid__arrow {
	position: absolute;
	top: 40%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mtg-reviews__arrow--prev,
.mtg-guides__arrow--prev,
.mtg-cgrid__arrow--prev {
	left: var(--mtg-arrow-offset, 0);
}

.mtg-reviews__arrow--next,
.mtg-guides__arrow--next,
.mtg-cgrid__arrow--next {
	right: var(--mtg-arrow-offset, 0);
}

.mtg-reviews__arrow svg,
.mtg-guides__arrow svg,
.mtg-cgrid__arrow svg {
	display: block;
}

.mtg-reviews__arrow.swiper-button-disabled,
.mtg-guides__arrow.swiper-button-disabled,
.mtg-cgrid__arrow.swiper-button-disabled {
	cursor: default;
	opacity: 0.35;
}

.mtg-reviews__footer {
	display: flex;
	justify-content: center;
}

.mtg-reviews__view-all {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mtg-review-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mtg-review-card__media {
	position: relative;
	overflow: hidden;
}

.mtg-review-card .mtg-review-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-review-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
	transform: translate(-50%, -50%);
}

.mtg-review-card__play-icon {
	line-height: 1;
}

.mtg-review-card__body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.mtg-review-card__user {
	display: flex;
	align-items: center;
}

.mtg-review-card__avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	line-height: 1;
}

.mtg-review-card__meta {
	flex: 1;
	min-width: 0;
}

/* 头像右侧第一行是「名称 + 日期」，日期推到行尾；星级紧随其下。 */
.mtg-review-card__name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-review-card__name {
	min-width: 0;
}

.mtg-review-card__date {
	flex-shrink: 0;
}

/* 星级是 inline-flex，容器默认行高会撑高一行；归零到 1 让高度等于控件的字号。 */
.mtg-review-card__stars {
	line-height: 1;
}

/* 目标站评价正文固定两行（超出省略），保证所有卡片等高、商品条对齐。 */
.mtg-review-card__text {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mtg-review-card__product {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	text-decoration: none;
}

.mtg-review-card__product-image {
	display: inline-flex;
	flex-shrink: 0;
	overflow: hidden;
}

.mtg-review-card__product-image img {
	display: block;
	object-fit: cover;
}

.mtg-review-card__product-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   首页 · 文章 / 指南列表（对齐目标站 .blog-wrap）
   --------------------------------------------------------------------------- */
.mtg-guides__title,
.mtg-guides__description {
	margin: 0;
}

/* 轮播：卡片宽度由控件固定，间距走 CSS 变量 --mtg-swiper-gap。 */
.mtg-guides__list {
	position: relative;
}

.mtg-guides__list .swiper-slide {
	display: flex;
	flex-shrink: 0;
}

.mtg-guides__footer {
	display: flex;
	justify-content: center;
}

.mtg-guides__view-all {
	display: inline-block;
	text-decoration: none;
}

.mtg-guide-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

.mtg-guide-card__media {
	display: block;
	overflow: hidden;
}

.mtg-guide-card__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.mtg-guide-card__content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.mtg-guide-card__meta {
	display: flex;
}

/* 目标站条目标题最多两行、摘要最多四行，保证每张卡片等高。 */
.mtg-guide-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mtg-guide-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.mtg-guide-card__title,
.mtg-guide-card__date,
.mtg-guide-card__excerpt {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   首页 · 服务保障条
   --------------------------------------------------------------------------- */
.mtg-service-bar__grid {
	display: grid;
}

.mtg-service-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}

.mtg-service-bar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mtg-service-bar__title,
.mtg-service-bar__text {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   商品归档页 · 两栏骨架（左筛选栏 288px + 38px 间距 + 右商品列表）
   --------------------------------------------------------------------------- */
.mtg-collection-layout {
	--mtg-rail-width: 288px;
	--mtg-rail-gap: 38px;
	--mtg-list-inset-right: 14px;
	--mtg-layout-max: calc(var(--mtg-container-max) - 2 * var(--mtg-container-pad));
}

.mtg-collection-layout > .elementor-container {
	max-width: var(--mtg-layout-max);
	margin-inline: auto;
}

/* 桌面端固定左栏宽度（目标站 288px），右栏自适应；平板/手机沿用 Elementor 默认堆叠。 */
@media (min-width: 1025px) {
	.mtg-collection-layout > .elementor-container {
		gap: var(--mtg-rail-gap);
	}

	.mtg-collection-layout > .elementor-container > .elementor-column:first-child {
		width: var(--mtg-rail-width);
		flex: 0 0 var(--mtg-rail-width);
	}

	.mtg-collection-layout > .elementor-container > .elementor-column:last-child {
		width: auto;
		min-width: 0;
		flex: 1 1 0;
	}

	/* 目标站右栏内容比列宽窄 14px（列表与工具栏同宽）。 */
	.mtg-collection-layout > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
		padding-right: var(--mtg-list-inset-right);
	}
}
.mtg-ctoolbar__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.mtg-ctoolbar__lead {
	display: flex;
	align-items: baseline;
	min-width: 0;
}

.mtg-ctoolbar__title {
	margin: 0;
}

.mtg-ctoolbar__count {
	display: inline-block;
}

.mtg-ctoolbar__sort {
	display: flex;
	margin: 0;
}

.mtg-ctoolbar__select {
	display: block;
	max-width: 100%;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   商品归档页 · 商品栅格与卡片（对齐目标站 .goods-item）
   --------------------------------------------------------------------------- */
.mtg-cgrid__list {
	display: grid;
}

.mtg-ccard {
	position: relative;
	overflow: hidden;
}

.mtg-ccard__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.mtg-ccard__figure {
	display: block;
	text-decoration: none;
}

.mtg-ccard .mtg-ccard__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 悬停换第二张图：两张图叠放，第二张默认透明。 */
.mtg-ccard__figure-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mtg-ccard:hover .mtg-ccard__figure-hover {
	opacity: 1;
}

.mtg-ccard__wishlist {
	position: absolute;
	top: var(--mtg-wishlist-offset, 12px);
	right: var(--mtg-wishlist-offset, 12px);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
}

.mtg-ccard__flag {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
}

.mtg-ccard__flag--top-left {
	top: 0;
	left: 0;
}

.mtg-ccard__flag--top-right {
	top: 0;
	right: 0;
}

.mtg-ccard__flag--bottom-left {
	bottom: 0;
	left: 0;
}

.mtg-ccard__flag--bottom-right {
	bottom: 0;
	right: 0;
}

.mtg-ccard__info {
	display: flex;
	flex-direction: column;
}

.mtg-ccard__body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.mtg-ccard__swatches {
	display: flex;
	flex-wrap: wrap;
}

.mtg-ccard__swatch {
	display: block;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 50%;
}

.mtg-ccard .mtg-ccard__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-ccard__name {
	margin: 0;
}

/* 目标站商品名固定单行，超出省略。 */
.mtg-ccard__name a {
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mtg-ccard__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-ccard__price {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.mtg-ccard__price-old {
	margin-left: 6px;
	text-decoration: line-through;
}

.mtg-ccard__add {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-ccard__rating {
	display: flex;
	align-items: center;
	line-height: 1;
}

.mtg-ccard__rating .mtg-stars {
	line-height: 1;
}

.mtg-cgrid__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.mtg-cgrid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-cgrid__pagination .page-numbers.current {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   商品归档页 · 筛选栏（对齐目标站 .lf / .new-attributes-filter）
   --------------------------------------------------------------------------- */
.mtg-cfilters__title {
	display: block;
}

.mtg-cfilters__switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-cfilters__switch-label {
	cursor: pointer;
}

/* 开关轨道：高度由控件下发，滑块用 aspect-ratio 跟随高度。 */
.mtg-cfilters__toggle {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	border-radius: 999px;
	transition: background-color 0.2s ease;
}

.mtg-cfilters__toggle::after {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 2px;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: #ffffff;
}

.mtg-cfilters__switch input:checked + .mtg-cfilters__toggle::after {
	right: 2px;
	left: auto;
}

/* 未绑定商品标签的开关只做展示，不参与筛选。 */
.mtg-cfilters__toggle--static {
	opacity: 0.5;
	cursor: not-allowed;
}

.mtg-cfilters__groups {
	display: block;
}

.mtg-cfilters__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

.mtg-cfilters__group-head::-webkit-details-marker {
	display: none;
}

.mtg-cfilters__arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.mtg-cfilters__arrow svg {
	width: 100%;
	height: 100%;
}

.mtg-cfilters__group[open] .mtg-cfilters__arrow {
	transform: rotate(180deg);
}

.mtg-cfilters__options {
	display: flex;
	flex-direction: column;
}

.mtg-cfilters__options--swatch {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-cfilters__option {
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* 原生复选框视觉隐藏，保留可访问性与键盘操作。 */
.mtg-cfilters__option input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
	white-space: nowrap;
}

.mtg-cfilters__box {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-right: 8px;
	background-color: #ffffff;
}

.mtg-cfilters__option input:checked + .mtg-cfilters__box {
	background-color: currentColor;
}

.mtg-cfilters__option input:checked + .mtg-cfilters__box::after {
	content: "";
	width: 55%;
	height: 28%;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	transform: rotate(-45deg) translate(6%, -12%);
}

.mtg-cfilters__swatch {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	overflow: hidden;
	border-radius: 50%;
}

.mtg-cfilters .mtg-cfilters__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-cfilters__option-count {
	margin-left: auto;
	padding-left: 8px;
	opacity: 0.6;
}

.mtg-cfilters__price {
	display: flex;
}

.mtg-cfilters__price-field {
	display: flex;
	flex: 1;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	background-color: #ffffff;
}

.mtg-cfilters__price-tip {
	flex-shrink: 0;
	padding: 0 6px 0 10px;
	opacity: 0.55;
}

.mtg-cfilters__price-input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
}

.mtg-cfilters__price-input::-webkit-outer-spin-button,
.mtg-cfilters__price-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mtg-cfilters__reset {
	display: inline-block;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   商品归档页 · 筛选栏移动端抽屉
   ≤1024px（Elementor tablet，与本页两栏骨架塌陷的断点一致）把筛选栏收成一个按钮，
   点开后从左侧滑出面板；宽屏完全不受影响。
   --------------------------------------------------------------------------- */
.mtg-cfilters-wrap--drawer .mtg-cfilters__trigger,
.mtg-cfilters-wrap--drawer .mtg-cfilters__drawer-head,
.mtg-cfilters-wrap--drawer .mtg-cfilters__backdrop {
	display: none;
}

.mtg-cfilters__trigger-icon,
.mtg-cfilters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 盒子里只有一个 100% 宽的 svg，需先给出确定尺寸，否则百分比尺寸无参照。 */
.mtg-cfilters__trigger-icon {
	width: 18px;
	height: 18px;
}

.mtg-cfilters__close {
	width: 20px;
	height: 20px;
}

.mtg-cfilters__trigger-icon svg,
.mtg-cfilters__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 关闭按钮渲染成 <button>，抹掉浏览器默认的底色、描边与内边距。 */
.mtg-cfilters__close {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

@media (max-width: 1024px) {
	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters__trigger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	/* 模板里「区块外框」下发的内边距选择器带 4 层类（.elementor-<id> .elementor-element
	   .elementor-element-<id> .mtg-cfilters），比这里多一层，且 Elementor 生成的 CSS 后加载。
	   抽屉的内边距必须盖掉宽屏的那套值，所以这一条加 !important；
	   取值仍由「抽屉面板 → 面板内边距」控件通过变量下发，用户可调。 */
	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1002;
		width: var(--mtg-cfilters-drawer-width, 320px);
		max-width: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: var(--mtg-cfilters-drawer-radius, 0);
		padding: var(--mtg-cfilters-drawer-padding, 0 20px 24px) !important;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer.is-open .mtg-cfilters {
		transform: translateX(0);
	}

	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters__drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 1;
		/* 面板可滚动，标题必须不透明才不会透出下面的内容。 */
		background-color: inherit;
	}

	/* 关闭图标默认只有 20px，横向不够手指点，用伪元素撑出 40×40 的点击区。 */
	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters__close {
		position: relative;
	}

	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters__close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 40px;
		height: 40px;
		transform: translate(-50%, -50%);
	}

	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer .mtg-cfilters__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1001;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.mtg-cfilters-wrap.mtg-cfilters-wrap--drawer.is-open .mtg-cfilters__backdrop {
		opacity: 1;
		visibility: visible;
	}

	/* 编辑器里不做固定定位与位移，否则面板会盖住预览区、也没法调样式。 */
	.mtg-cfilters-wrap--edit.mtg-cfilters-wrap--drawer .mtg-cfilters {
		position: static;
		transform: none;
		width: auto;
		max-width: none;
	}

	.mtg-cfilters-wrap--edit.mtg-cfilters-wrap--drawer .mtg-cfilters__backdrop {
		display: none;
	}
}

/* 抽屉打开时锁定页面滚动。 */
body.mtg-filter-drawer-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 两栏骨架（左图库 700px + 右信息，右栏内容再左缩 32px）
   --------------------------------------------------------------------------- */
.mtg-product-layout {
	--mtg-pdp-width: 1392px;
	--mtg-pdp-left: 700px;
	--mtg-pdp-inset: 32px;
}

.mtg-product-layout > .elementor-container {
	max-width: var(--mtg-pdp-width);
	margin-inline: auto;
}

@media (min-width: 1025px) {
	.mtg-product-layout > .elementor-container {
		gap: 0;
	}

	.mtg-product-layout > .elementor-container > .elementor-column:first-child {
		width: var(--mtg-pdp-left);
		flex: 0 0 var(--mtg-pdp-left);
	}

	.mtg-product-layout > .elementor-container > .elementor-column:last-child {
		width: auto;
		min-width: 0;
		flex: 1 1 0;
	}

	.mtg-product-layout > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
		padding-left: var(--mtg-pdp-inset);
	}

	/* 主图区随视口滚动吸顶（目标站 .product-left-sticky）。 */
	.mtg-product-layout > .elementor-container > .elementor-column:first-child {
		position: sticky;
		top: 0;
		align-self: flex-start;
	}
}

/* 商品详情页 · 宽区块容器（相关推荐 / 服务保障，目标站内容宽 1392px） */
.mtg-pdp-wide {
	--mtg-pdp-wide: 1392px;
}

.mtg-pdp-wide > .elementor-container {
	max-width: var(--mtg-pdp-wide);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 图库（对齐目标站 .goods-image）
   --------------------------------------------------------------------------- */
.mtg-pgallery__main {
	position: relative;
	overflow: hidden;
}

/* 主图区：宽屏只显示当前那张（.is-active），窄屏变成横滑容器。 */
.mtg-pgallery__slide {
	display: none;
}

.mtg-pgallery__slide.is-active {
	display: block;
}

/* 窄屏图库（App 式）：主图铺到屏幕两侧、每张一屏滚动吸附（scroll-snap，无需 JS），
   缩略图条同样通栏但首尾留出与页面一致的内边距，兼作位置指示。 */
@media (max-width: 768px) {
	.mtg-pgallery__main,
	.mtg-pgallery__thumbs {
		margin-inline: calc(-1 * var(--mtg-container-pad));
	}

	.mtg-pgallery__main {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.mtg-pgallery__main::-webkit-scrollbar {
		display: none;
	}

	.mtg-pgallery__slide {
		display: block;
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.mtg-pgallery__thumbs {
		padding-inline: var(--mtg-container-pad);
	}
}

.mtg-pgallery .mtg-pgallery__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-pgallery__thumbs {
	position: relative;
}

.mtg-pgallery__thumbs .swiper-slide {
	flex-shrink: 0;
}

.mtg-pgallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mtg-pgallery .mtg-pgallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 信息区（对齐目标站 .product-right）
   --------------------------------------------------------------------------- */
.mtg-pinfo__title {
	margin: 0;
}

.mtg-pinfo__tag {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

/* 目标站标题前标签内含一个小图标（12×13）。 */
.mtg-pinfo__tag-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mtg-pinfo__score {
	display: flex;
	align-items: center;
}

.mtg-pinfo__score .mtg-stars {
	line-height: 1;
}

/* 评价数与折扣标的间距由控件下发（目标站分别为 10px / 4px），这里只保留结构性样式。 */

.mtg-pinfo__price {
	display: flex;
	align-items: center;
}

.mtg-pinfo__price-was {
	text-decoration: line-through;
}

.mtg-pinfo__discount {
	display: inline-block;
}

/* 分期条：图标 + 文案（目标站图标 43×20，把行高撑到 20px）。 */
.mtg-pinfo__pay {
	display: flex;
	align-items: center;
}

.mtg-pinfo__pay-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* 促销码块：外框浅蓝圆角，每行自带浅灰底，行内左右分区（目标站 460 / 200）。 */
.mtg-pinfo__promos {
	overflow: hidden;
}

.mtg-pinfo__promo {
	display: flex;
	/* 拉伸让左右分区都撑满整行高度（目标站左右区都是 660×54 中的 54 高）。 */
	align-items: stretch;
}

.mtg-pinfo__promo-left,
.mtg-pinfo__promo-right {
	display: flex;
	align-items: center;
}

/* 右区（优惠码 + 复制按钮）内容有最小宽度，压缩会被裁，所以固定不收缩；
   左区可收缩，容器窄于「左宽 + 右宽」时由左区让位，而不是整条溢出到容器外。 */
.mtg-pinfo__promo-right {
	flex-shrink: 0;
}

.mtg-pinfo__promo-left {
	flex-shrink: 1;
	min-width: 0;
}

.mtg-pinfo__promo-right {
	justify-content: space-between;
	gap: 8px;
}

/* 窄屏：左右分区都是 flex-shrink:0，放不下会整块溢出（右侧优惠码与复制按钮被裁掉），改为纵向堆叠。 */
@media (max-width: 768px) {
	.mtg-pinfo__promo {
		flex-direction: column;
	}

	.mtg-pinfo__promo-right {
		justify-content: flex-start;
	}
}

.mtg-pinfo__promo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* 不加 nowrap 会被 flex 压缩并折行，行高就撑不到目标站的 54px。 */
.mtg-pinfo__promo-code {
	flex-shrink: 0;
	white-space: nowrap;
}

.mtg-pinfo__copy {
	flex-shrink: 0;
	border: 0;
	cursor: pointer;
}

.mtg-pinfo__form {
	margin: 0;
}

.mtg-pinfo__label {
	margin: 0;
}

.mtg-pinfo__options {
	display: block;
}

.mtg-pinfo__option-list {
	display: flex;
	flex-wrap: wrap;
}

.mtg-pinfo__option {
	display: block;
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.mtg-pinfo .mtg-pinfo__option img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-pinfo__variant-group {
	margin-bottom: 16px;
}

.mtg-pinfo__variant-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mtg-pinfo__variant {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: #ffffff;
	cursor: pointer;
}

.mtg-pinfo__qty-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.mtg-pinfo__stepper {
	display: flex;
	align-items: center;
}

.mtg-pinfo__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	cursor: pointer;
}

.mtg-pinfo__step:disabled {
	cursor: default;
}

.mtg-pinfo__step-input {
	width: 34px;
	border: 0;
	background: none;
	text-align: center;
}

.mtg-pinfo__step-input::-webkit-outer-spin-button,
.mtg-pinfo__step-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mtg-pinfo__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 商品详情页 · 窄屏吸底加购栏（App 式）
   宽屏按钮宽度是固定的（382 / 266），窄屏两个按钮各占一半、固定在视口底部；
   位置与配色由控件写成变量（--mtg-pinfo-actions-position / --mtg-pinfo-sticky-*），
   只在窄屏消费；页面底部留出占位高度避免挡住页脚。 */
@media (max-width: 768px) {
	.mtg-pinfo__actions {
		position: var(--mtg-pinfo-actions-position, static);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		gap: 10px;
		padding: 10px var(--mtg-container-pad) calc(10px + env(safe-area-inset-bottom, 0px));
		background-color: var(--mtg-pinfo-sticky-bg, #ffffff);
		border-top: 1px solid var(--mtg-pinfo-sticky-border, #e8e8e8);
	}

	/* flex-basis 0 会盖掉控件下发的固定宽度，两个按钮各占一半。 */
	.mtg-pinfo__actions .mtg-pinfo__btn {
		flex: 1 1 0;
	}

	body.single-product {
		padding-bottom: var(--mtg-pinfo-sticky-space, 0);
	}
}

.mtg-pinfo__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 详情折叠区（对齐目标站 .produce-details）
   --------------------------------------------------------------------------- */
.mtg-pdetails__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

/* 标题行 = 图标 + 文案（目标站每项标题前都有 18px 图标）。 */
.mtg-pdetails__title {
	display: inline-flex;
	align-items: center;
}

.mtg-pdetails__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mtg-pdetails__head::-webkit-details-marker {
	display: none;
}

.mtg-pdetails__arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.mtg-pdetails__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* 目标站展开图标是「＋／－」而不是箭头：横向那一划常驻，纵向那一划在展开时收起。 */
.mtg-pdetails__arrow line {
	stroke: currentColor;
	stroke-width: 2;
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: 9px 9px;
}

.mtg-pdetails__group[open] .mtg-pdetails__arrow-v {
	transform: scaleY(0);
	opacity: 0;
}

/*
 * 条目之间的分隔线：目标站用 ::after + scaleY(0.5) 画成 0.5px 发丝线，
 * 因此不占布局高度（折叠区整块高度 = 4×54 + 上下边框 2 = 218px）。
 */
.mtg-pdetails__item {
	position: relative;
}

.mtg-pdetails__item + .mtg-pdetails__item::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	content: '';
	transform: scaleY(0.5);
	transform-origin: top;
	pointer-events: none;
}

/* 商品描述是富文本，去掉首尾元素的外边距避免多余留白。 */
.mtg-pdetails__content > *:first-child {
	margin-top: 0;
}

.mtg-pdetails__content > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   商品列表 · 标题与轮播模式（相关推荐）
   --------------------------------------------------------------------------- */
.mtg-cgrid__title {
	margin: 0;
}

.mtg-cgrid--carousel .mtg-cgrid__list {
	position: relative;
}

.mtg-cgrid--carousel .mtg-cgrid__list .swiper-slide {
	display: flex;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 服务保障（对齐目标站 .product-serve / .serve-list）
   --------------------------------------------------------------------------- */
.mtg-pserve__title {
	margin: 0;
}

.mtg-pserve__list {
	position: relative;
}

.mtg-pserve__list .swiper-slide {
	display: flex;
	flex-shrink: 0;
}

/* 文字块在上、图片在下，两端对齐（目标站卡片 448px 高）。 */
.mtg-pserve__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
}

.mtg-pserve__card-title,
.mtg-pserve__card-text {
	margin: 0;
}

/* 交错排布：第 2、4 张卡片图片在上、文字在下，底色换成米色（目标站 #ebe8df）。
   选择器写成 .mtg-pserve.mtg-pserve--alternate 提高特异性，才能盖过 Elementor
   按控件生成的 `.elementor-xxx .elementor-element-xxx .mtg-pserve__card`（0,4,0）。 */
.mtg-pserve.mtg-pserve--alternate .swiper-slide:nth-child(even) .mtg-pserve__card {
	flex-direction: column-reverse;
	background-color: var( --mtg-serve-bg-alt, #ebe8df );
}

.mtg-pserve__card-image {
	display: block;
	overflow: hidden;
}

.mtg-pserve__card-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 评价区（对齐目标站 .product-review-faq）
   --------------------------------------------------------------------------- */
.mtg-prev__tabs {
	display: flex;
	align-items: center;
}

.mtg-prev__tab {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
	cursor: pointer;
}

/* 选中项下划线：压在页签栏下边框上（目标站 2px 黑色）。 */
.mtg-prev__tab.is-active::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: var(--mtg-tab-indicator-height, 2px);
	background-color: var(--mtg-tab-indicator-color, currentColor);
}

/* 面板显隐由 JS 切换 hidden 属性（与 Elementor 其它 Tab 区块同一套交互）。 */
.mtg-prev__panel {
	display: block;
}

.mtg-prev__panel[hidden] {
	display: none;
}

.mtg-prev__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.mtg-prev__summary {
	flex: 1;
	min-width: 0;
}

/* 窄屏：汇总区与买家秀上下堆叠。
   原来 `.mtg-prev__top` 是不换行的 flex 行，而买家秀 swiper 固定占满整行（flex: 0 0 auto），
   会把汇总区挤成 0 宽 —— 标题、评分、数量、按钮全部溢出叠在一起。 */
@media (max-width: 768px) {
	.mtg-prev__top {
		flex-direction: column;
	}

	/* 页签三等分（App 式分段控件），字号与间距由控件窄屏默认值下发。 */
	.mtg-prev__tab {
		flex: 1 1 0;
	}
}

.mtg-prev__summary-title,
.mtg-prev__count,
.mtg-prev__text,
.mtg-prev__empty,
.mtg-prev__qa-question,
.mtg-prev__qa-answer,
.mtg-prev__faq-group,
.mtg-prev__faq-answer {
	margin: 0;
}

.mtg-prev__score {
	display: flex;
	align-items: center;
}

.mtg-prev__score .mtg-stars {
	line-height: 1;
}

.mtg-prev__average {
	margin-right: 8px;
}

.mtg-prev__stars {
	display: inline-flex;
	align-items: center;
	margin-right: 8px;
}

.mtg-prev__leave {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 15px;
	text-decoration: none;
}

.mtg-prev__summary-images {
	position: relative;
	flex-shrink: 0;
	width: 822px;
	max-width: 100%;
}

.mtg-prev__summary-images .swiper-slide {
	flex-shrink: 0;
}

.mtg-prev__summary-image {
	display: block;
	overflow: hidden;
}

.mtg-prev .mtg-prev__summary-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 头像在左、内容在右；名称行与星级、正文共用同一列，天然对齐。 */
.mtg-prev__item,
.mtg-prev__qa-item {
	display: flex;
	align-items: flex-start;
}

/* Question 页签：日期固定灰色，其余留白与分隔线由控件下发。 */
.mtg-prev__qa-item .mtg-prev__date {
	color: #999999;
}

.mtg-prev__avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	line-height: 1;
}

.mtg-prev__main {
	flex: 1;
	min-width: 0;
}

.mtg-prev__name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-prev__date {
	flex-shrink: 0;
}

.mtg-prev__item-stars {
	line-height: 1;
}

.mtg-prev__item-stars .mtg-stars {
	line-height: 1;
}

.mtg-prev__item-images {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mtg-prev__thumb {
	display: block;
	overflow: hidden;
}

.mtg-prev .mtg-prev__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-prev__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.mtg-prev__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-prev__faq-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
}

/* FAQ 页签：居中分组标签 + 当前分组折叠列表（目标站 .faq-tabs + .Q-list）。 */
.mtg-prev__faq-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-prev__faq-tab {
	border: 0;
	background: none;
	cursor: pointer;
}

.mtg-prev__faq-group[hidden] {
	display: none;
}

.mtg-prev__faq-wrap {
	display: flex;
}

.mtg-prev__faq-wrap > .mtg-prev__faq-item {
	flex: 1;
	min-width: 0;
}

.mtg-prev__faq-head::-webkit-details-marker {
	display: none;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 尺寸/规格选择（对齐目标站 .apparel-box）
   --------------------------------------------------------------------------- */
.mtg-pinfo__size-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-pinfo__size-value {
	margin-left: 4px;
}

.mtg-pinfo__size-badge {
	margin-left: 6px;
}

.mtg-pinfo__size-guide {
	flex-shrink: 0;
	margin-left: 12px;
	text-decoration: underline;
}

.mtg-pinfo__size-list {
	display: flex;
	flex-wrap: wrap;
}

.mtg-pinfo__size-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* 目标站用「右 + 下」外边距（0 8px 8px 0）而不是 gap，选项行高因此为 39 + 8 = 47px。 */
	margin: 0 var(--mtg-size-gap, 8px) var(--mtg-size-gap, 8px) 0;
	padding: 2px;
	background-color: #ffffff;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 配送时效条（对齐目标站 .delivery-time-box）
   --------------------------------------------------------------------------- */
.mtg-pdelivery__ship {
	margin: 0;
}

.mtg-pdelivery__calc {
	display: flex;
	align-items: flex-start;
}

.mtg-pdelivery__item {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}

.mtg-pdelivery__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mtg-pdelivery__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mtg-pdelivery__label,
.mtg-pdelivery__value {
	display: block;
}

.mtg-pdelivery__line {
	display: block;
	height: 1px;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 购物保障行（对齐目标站 .shopping-security）
   --------------------------------------------------------------------------- */
.mtg-psecurity__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mtg-psecurity__lead {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mtg-psecurity__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mtg-psecurity__arrow {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.mtg-psecurity__arrow svg {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------------------
   商品详情页 · 达人推荐（对齐目标站 .influencer-wrapper）
   --------------------------------------------------------------------------- */
.mtg-pinf__title {
	margin: 0;
}

.mtg-pinf__list {
	position: relative;
}

.mtg-pinf__list .swiper-slide {
	flex-shrink: 0;
}

.mtg-pinf__card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.mtg-pinf__media {
	display: block;
	width: 100%;
	height: 100%;
}

.mtg-pinf .mtg-pinf__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-pinf__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.mtg-pinf__play svg {
	width: 42%;
	height: 42%;
}

/* 目标站加购按钮在卡片右上角（距上、右各 12px），不是在右下角。 */
.mtg-pinf__cart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.mtg-pinf__cart svg {
	width: 58%;
	height: 58%;
}

.mtg-pinf__overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.mtg-pinf__text {
	display: block;
}

/* ---------------------------------------------------------------------------
   面包屑（对齐目标站 .breadcrumb-style）
   --------------------------------------------------------------------------- */
.mtg-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-crumb__item {
	text-decoration: none;
}

.mtg-crumb__item:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   保养指南横幅（对齐目标站 .maintenance-guide）
   --------------------------------------------------------------------------- */
.mtg-care {
	position: relative;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.mtg-care__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	display: block;
}

.mtg-care__inner {
	position: relative;
	z-index: 1;
	margin-right: auto;
	margin-left: auto;
}

.mtg-care__title,
.mtg-care__subtitle,
.mtg-care__list-title {
	margin: 0;
}

.mtg-care__subtitle {
	display: block;
}

.mtg-care__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

/* 分栏内容按内容宽度居中（目标站条目宽度随文案变化，不是通栏） */
.mtg-care__list {
	display: flex;
	flex-direction: column;
}

.mtg-care__item {
	display: inline-flex;
	align-items: center;
}

.mtg-care__item-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.mtg-care__item-text {
	display: block;
}

/* ---------------------------------------------------------------------------
   购物车 / 结算 · 购物流程条（对齐目标站顶部黑色流程条）
   --------------------------------------------------------------------------- */
.mtg-csteps__inner {
	/* 三栏 grid：左入口贴左、步骤列真正居中、右链接贴右（左右宽度不影响居中）。 */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

.mtg-csteps__cart {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	text-decoration: none;
}

.mtg-csteps__cart-icon {
	display: block;
	flex-shrink: 0;
}

.mtg-csteps__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-csteps__step {
	display: flex;
	align-items: center;
}

.mtg-csteps__step-inner {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.mtg-csteps__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.mtg-csteps__label {
	display: block;
	white-space: nowrap;
}

.mtg-csteps__line {
	flex-shrink: 0;
}

.mtg-csteps__continue {
	display: inline-flex;
	align-items: center;
	justify-self: end;
	gap: 4px;
	text-decoration: none;
}

@media (max-width: 768px) {
	/* 窄屏只保留当前步骤，避免三步横向挤在一起。 */
	.mtg-csteps__inner {
		grid-template-columns: auto 1fr;
		gap: 12px;
	}

	.mtg-csteps__steps {
		justify-content: flex-end;
	}

	.mtg-csteps__line,
	.mtg-csteps__step:not(.is-active),
	.mtg-csteps__continue {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   购物车 / 结算 · 两栏布局（左：商品列表，右：订单汇总 400px）
   --------------------------------------------------------------------------- */
.mtg-cart-layout > .elementor-container {
	align-items: flex-start;
	gap: 60px;
}

@media ( min-width: 1025px ) {
	.mtg-cart-layout > .elementor-container > .elementor-column:first-child {
		width: auto;
		min-width: 0;
		flex: 1 1 0;
	}

	.mtg-cart-layout > .elementor-container > .elementor-column:last-child {
		width: 400px;
		flex: 0 0 400px;
	}
}

@media ( max-width: 1024px ) {
	.mtg-cart-layout > .elementor-container {
		flex-wrap: wrap;
		gap: 40px;
	}

	.mtg-cart-layout > .elementor-container > .elementor-column {
		width: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   购物车 · 商品列表（对齐目标站左栏）
   --------------------------------------------------------------------------- */
.mtg-citems__title {
	margin: 0;
}

.mtg-citems__promo {
	margin-bottom: 24px;
}

.mtg-citems__promo-text {
	margin: 0 0 12px;
}

.mtg-citems__promo-bar {
	position: relative;
	margin-bottom: 8px;
	overflow: hidden;
	border-radius: 999px;
}

.mtg-citems__promo-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
}

.mtg-citems__promo-note,
.mtg-citems__empty {
	margin: 0;
}

.mtg-citems__form {
	margin: 0;
}

.mtg-citems__row {
	display: flex;
	align-items: flex-start;
}

.mtg-citems__thumb {
	display: block;
	flex-shrink: 0;
	overflow: hidden;
}

.mtg-citems .mtg-citems__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-citems__main {
	flex: 1 1 auto;
	min-width: 0;
}

.mtg-citems__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mtg-citems__info {
	min-width: 0;
}

.mtg-citems__name {
	display: block;
	text-decoration: none;
}

.mtg-citems__spec p {
	margin: 4px 0 0;
}

.mtg-citems__price {
	flex-shrink: 0;
	white-space: nowrap;
}

.mtg-citems__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* 窄屏：设计稿把价格与数量归到文字列下方（`.cart-item__price, .quantity-selector { grid-column: 2 }`）。
   缩略图占位后文字列很窄，价格再并排会把商品名压成一条窄缝。 */
@media (max-width: 768px) {
	.mtg-citems__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

.mtg-citems__qty-wrap {
	display: inline-flex;
	align-items: center;
}

.mtg-citems__qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.mtg-citems__qty-input {
	/* 去掉数字输入框的上下箭头，只保留 +/- 按钮 */
	border: 0;
	background: none;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.mtg-citems__qty-input::-webkit-outer-spin-button,
.mtg-citems__qty-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.mtg-citems__action {
	text-decoration: none;
}

/* 数量变化后自动提交，按钮保留在 DOM 里作为无 JS 兜底 */
.mtg-citems__update {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.mtg-citems__gift,
.mtg-citems__boxes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid #e5e5e5;
}

.mtg-citems__gift-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mtg-citems__gift-thumb {
	display: block;
	flex-shrink: 0;
	overflow: hidden;
}

.mtg-citems .mtg-citems__gift-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-citems__add {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   购物车 · 订单汇总（对齐目标站右栏）
   --------------------------------------------------------------------------- */
.mtg-osum__title {
	margin: 0;
}

.mtg-osum__coupon {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

.mtg-osum__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 16px;
}

.mtg-osum__coupon-btn {
	flex-shrink: 0;
	padding: 0 20px;
	cursor: pointer;
}

.mtg-osum__lines {
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
}

.mtg-osum__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.mtg-osum__note {
	margin: 0 0 24px;
}

.mtg-osum__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.mtg-osum__jewelsafe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.mtg-osum__jewelsafe-main {
	display: flex;
	flex-direction: column;
}

.mtg-osum__quick {
	display: grid;
	/* 两个快捷支付按钮等宽并排（目标站 Apple Pay / PayPal）。 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mtg-osum__quick-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-osum__accept-title {
	margin: 0 0 12px;
}

.mtg-osum__payments {
	display: flex;
	flex-wrap: wrap;
}

.mtg-osum__payment {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   购物车 · 赠卡（对齐目标站 .cart-gift）
   --------------------------------------------------------------------------- */
.mtg-gcards__head {
	display: flex;
	flex-direction: column;
}

.mtg-gcards__title {
	margin: 0;
}

.mtg-gcards__desc {
	margin: 4px 0 0;
}

.mtg-gcards__grid {
	display: grid;
}

.mtg-gcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.mtg-gcard__media {
	display: block;
	overflow: hidden;
}

.mtg-gcard .mtg-gcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-gcard__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* 名称最多两行（目标站 .gift-name 用 -webkit-line-clamp:2 + 固定 28px 高）。 */
.mtg-gcard__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.mtg-gcard__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   结算页 · 左表单 + 右订单汇总（对齐目标站 checkout）
   说明：结算是 WooCommerce 经典表单，无法用 Elementor 小工具承载，
   因此这里的样式针对 .mtg-checkout 作用域下的原生标记。
   --------------------------------------------------------------------------- */
/*
 * 栅格必须落在 form.checkout 上：#customer_details 与 #order_review 是它的直接子元素，
 * 而 .woocommerce 只有一个子元素（表单本身），放在外层会变成「表单占左列、汇总仍堆叠」。
 */
.mtg-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	/* 只留列间距：左栏各区块之间的纵向距离由区块自身外边距控制，避免被撑成 60px */
	column-gap: 60px;
	align-items: start;
}

/*
 * 左栏 = 客户信息 / 配送方式 / 支付方式，右栏 = 订单汇总。
 * 右栏必须显式钉在第 1 行第 2 列：若只写 grid-column，自动排布会把汇总推到左栏
 * 最后一行之后的行上（实测汇总会跑到左栏内容下方）。
 */
.mtg-checkout form.checkout.woocommerce-checkout > #customer_details,
.mtg-checkout form.checkout.woocommerce-checkout > #payment,
.mtg-checkout form.checkout.woocommerce-checkout > .mtg-checkout__section {
	grid-column: 1;
}

.mtg-checkout form.checkout.woocommerce-checkout > #order_review,
.mtg-checkout form.checkout.woocommerce-checkout > .woocommerce-checkout-review-order {
	grid-column: 2;
	grid-row: 1;
}

.mtg-checkout #order_review_heading {
	display: none;
}

.mtg-checkout #order_review {
	padding: 24px;
	background-color: #f9f9f9;
}

@media ( max-width: 1024px ) {
	.mtg-checkout form.checkout.woocommerce-checkout {
		display: block;
	}

	.mtg-checkout #order_review {
		margin-top: 40px;
	}
}

/* 分区标题：大写小标题（CONTACT / SHIPPING ADDRESS / DELIVERY METHOD / PAYMENT） */
.mtg-checkout .woocommerce h3 {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 两列表单：Woo 默认是浮动两列，这里改成栅格并把长字段通栏 */
.mtg-checkout #customer_details .col-1,
.mtg-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}

.mtg-checkout .woocommerce-billing-fields__field-wrapper,
.mtg-checkout .woocommerce-shipping-fields__field-wrapper,
.mtg-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.mtg-checkout #billing_address_1_field,
.mtg-checkout #billing_address_2_field,
.mtg-checkout #billing_country_field,
.mtg-checkout #billing_phone_field,
.mtg-checkout #billing_email_field,
.mtg-checkout #order_comments_field {
	grid-column: 1 / -1;
}

.mtg-checkout .woocommerce .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.mtg-checkout .woocommerce label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	color: #666;
}

/* 输入控件 */
.mtg-checkout .woocommerce input.input-text,
.mtg-checkout .woocommerce select,
.mtg-checkout .woocommerce textarea,
.mtg-checkout .woocommerce .select2-selection--single {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	background-color: #fff;
	font-size: 14px;
}

.mtg-checkout .woocommerce textarea {
	height: auto;
	padding: 12px;
}

/* 配送方式 / 支付方式：整行卡片 */
.mtg-checkout .wc_payment_method {
	margin: 0 0 12px;
	padding: 16px;
	border: 1px solid #e5e5e5;
	background-color: #fff;
}

.mtg-checkout #shipping_method li label,
.mtg-checkout .wc_payment_method label {
	margin: 0;
	font-size: 14px;
	color: #1c1c1c;
}

/*
 * 左栏「配送方式」：脚本会把 Woo 原生的 ul#shipping_method 搬到这里，
 * 每个 li 排成「单选钮 + 名称靠左 / 价格靠右」的卡片，选中项描黑。
 * 选择器带上 .mtg-checkout 与 ul 是为了压过 Woo 自带的
 * `.woocommerce ul#shipping_method li label`（display:inline）与
 * `.mtg-checkout .woocommerce label`（display:block）。
 */
.mtg-checkout .mtg-checkout__methods ul#shipping_method {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-checkout .mtg-checkout__methods ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 16px;
	border: 1px solid #e5e5e5;
	background-color: #fff;
}

.mtg-checkout .mtg-checkout__methods ul#shipping_method li:has( input:checked ) {
	border-color: #1c1c1c;
}

.mtg-checkout .mtg-checkout__methods ul#shipping_method li label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
	cursor: pointer;
}

.mtg-checkout .mtg-checkout__methods ul#shipping_method li input {
	flex: none;
	margin: 0;
}

/* 列表搬走后，右栏那一行运费表头/内容会空掉，整行隐藏 */
.mtg-checkout form.checkout.mtg-delivery-moved #order_review .woocommerce-shipping-totals {
	display: none;
}

.mtg-checkout .wc_payment_method .payment_box {
	margin-top: 12px;
	padding: 0;
	background: none;
	font-size: 13px;
	color: #666;
}

/* 订单汇总面板 */
.mtg-checkout #order_review .shop_table {
	border: 0;
	font-size: 14px;
}

.mtg-checkout #order_review .shop_table th,
.mtg-checkout #order_review .shop_table td {
	padding: 8px 0;
	border: 0;
}

.mtg-checkout #order_review .cart_item td {
	border-bottom: 1px solid #e5e5e5;
}

.mtg-checkout #order_review .order-total .amount {
	font-size: 16px;
	font-weight: 700;
}

/* 右栏合计前的 Shipping 汇总行 */
.mtg-checkout #order_review .mtg-checkout__shipping-total th {
	font-weight: 400;
	color: #666;
}

/* 左栏分区（配送方式 / 支付方式）与上方表单块保持 40px 间距 */
.mtg-checkout__section {
	margin-top: 40px;
}

.mtg-checkout__note {
	margin: 0 0 16px;
	font-size: 13px;
	color: #666;
}

/* Woo 默认给 #payment 加了边框与内边距，会让下单按钮比面板窄一截 */
.mtg-checkout #payment {
	padding: 0;
	border: 0;
	background: none;
}

/* 提高特异性：Woo 自带 .woocommerce-checkout #payment .form-row 的左右内边距会与这里打平 */
.mtg-checkout .woocommerce-checkout #payment .form-row.place-order {
	padding: 0;
}

/* 下单按钮：通栏黑色大按钮 */
.mtg-checkout #place_order {
	width: 100%;
	padding: 18px;
	border: 0;
	background-color: #1c1c1c;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.mtg-checkout .place-order {
	margin-top: 16px;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   我的账户 · 标题条 + 左栏侧栏 + 右栏账户内容（对齐设计稿 my-account / login）
   右栏仍是 WooCommerce 原生的 [woocommerce_my_account] 输出，这里只调样式。
   --------------------------------------------------------------------------- */

/*
 * 左栏固定 250px、右栏自适应：Elementor 的列宽是百分比，还原不出设计稿的固定侧栏。
 * 这里沿用购物车页的做法——保留 Elementor 原生的 flex 容器，只改列宽，
 * 不去覆盖 display（Elementor 生成的 .elementor-section .elementor-container{display:flex}
 * 与这里特异性相同且更靠后，改 display 会被它盖掉）。
 */
.mtg-account-layout > .elementor-container {
	align-items: flex-start;
	gap: 40px;
}

@media ( min-width: 1025px ) {
	.mtg-account-layout > .elementor-container > .elementor-column:first-child {
		width: 250px;
		flex: 0 0 250px;
	}

	.mtg-account-layout > .elementor-container > .elementor-column:last-child {
		width: auto;
		min-width: 0;
		flex: 1 1 0;
	}
}

/* 未登录时侧栏整块不输出：隐藏该列、切回单列并居中到 900px，整块改成设计稿的浅灰底 */
.mtg-account-guest .mtg-account-layout {
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #f9f9f9;
}

.mtg-account-guest .mtg-account-layout > .elementor-container {
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
}

.mtg-account-guest .mtg-account-layout > .elementor-container > .elementor-column:first-child,
.mtg-account-guest .mtg-account-title {
	display: none;
}

.mtg-account-guest .mtg-account-layout > .elementor-container > .elementor-column:last-child {
	width: 100%;
	flex: 1 1 100%;
}

@media ( max-width: 1024px ) {
	.mtg-account-layout > .elementor-container {
		flex-wrap: wrap;
	}

	.mtg-account-layout > .elementor-container > .elementor-column {
		width: 100% !important;
		flex: 1 1 100%;
	}
}

/* --- 左栏侧栏（mtg-account-nav 小工具） --- */

.mtg-anav__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
}

.mtg-anav .mtg-anav__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.mtg-anav__name,
.mtg-anav__email {
	margin: 0;
}

.mtg-anav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-anav__list li {
	margin: 0;
}

/* 每项都留出同宽的透明竖条，选中时只换颜色，文字不会左右位移 */
.mtg-anav__list a {
	display: block;
	border-left: var( --mtg-anav-accent, 3px ) solid transparent;
	text-decoration: none;
}

.mtg-anav__list li.is-active a {
	border-left-color: var( --mtg-anav-accent-color, #000000 );
}

/* --- 右栏：WooCommerce 账户内容 --- */

/* 原生导航已由左栏自研侧栏替代 */
.mtg-account-layout .woocommerce-MyAccount-navigation {
	display: none;
}

.mtg-account-layout .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

.mtg-account-layout .woocommerce-MyAccount-content p {
	font-size: 14px;
	color: #666;
}

.mtg-account-layout .woocommerce-MyAccount-content strong,
.mtg-account-layout .woocommerce-MyAccount-content h2,
.mtg-account-layout .woocommerce-MyAccount-content h3 {
	color: #1c1c1c;
}

.mtg-account-layout .woocommerce-MyAccount-content h2,
.mtg-account-layout .woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.mtg-account-layout .woocommerce-MyAccount-content a {
	color: #1c1c1c;
}

/* 账户区按钮统一成设计稿的黑色按钮 */
.mtg-account-layout .woocommerce-MyAccount-content .button {
	padding: 14px 24px;
	border: 0;
	background-color: #1c1c1c;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.mtg-account-layout .woocommerce-MyAccount-content .button:hover {
	background-color: #3d3d3d;
	color: #ffffff;
}

/* 订单 / 下载等列表：设计稿的细线表格 */
.mtg-account-layout .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.mtg-account-layout .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 12px 8px;
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	color: #666;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.mtg-account-layout .woocommerce-MyAccount-content table.shop_table tbody td,
.mtg-account-layout .woocommerce-MyAccount-content table.shop_table tbody th {
	padding: 16px 8px;
	border: 0;
	border-bottom: 1px solid #f5f5f5;
}

/* --- 未登录：登录 / 注册两栏卡片（对齐设计稿 login） --- */

.mtg-account-layout #customer_login {
	box-sizing: border-box;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	padding: 40px;
	border: 1px solid #e5e5e5;
	background-color: #ffffff;
}

/*
 * WooCommerce 给 .col2-set 挂了 ::before/::after（clearfix 用的空 table），
 * 在栅格容器里它们会各占掉一个单元格，把「注册」挤到第二行；
 * 这里连同显式列位一起处理，保证登录在左、注册在右。
 */
.mtg-account-layout #customer_login::before,
.mtg-account-layout #customer_login::after {
	content: none;
	display: none;
}

.mtg-account-layout #customer_login .u-column1 {
	grid-column: 1;
}

.mtg-account-layout #customer_login .u-column2 {
	grid-column: 2;
}

.mtg-account-layout #customer_login .u-column1,
.mtg-account-layout #customer_login .u-column2 {
	float: none;
	width: 100%;
}

.mtg-account-layout #customer_login .u-column2 {
	padding-left: 40px;
	border-left: 1px solid #e5e5e5;
}

.mtg-account-layout #customer_login h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
}

.mtg-account-layout #customer_login form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

/* 只作用于字段标签：记住我 / 条款这类复选框标签要保持行内排版 */
.mtg-account-layout #customer_login label:not( .woocommerce-form__label ) {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1c;
}

.mtg-account-layout #customer_login .woocommerce-form__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #666;
	cursor: pointer;
}

.mtg-account-layout #customer_login .form-row {
	margin: 0;
	padding: 0;
}

.mtg-account-layout #customer_login .woocommerce-Input {
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	font-size: 14px;
}

.mtg-account-layout #customer_login .button {
	width: 100%;
	padding: 14px;
	border: 0;
	background-color: #1c1c1c;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

.mtg-account-layout #customer_login .button:hover {
	background-color: #3d3d3d;
	color: #ffffff;
}

.mtg-account-layout #customer_login .woocommerce-LostPassword {
	margin: 0;
	font-size: 13px;
}

.mtg-account-layout #customer_login .woocommerce-privacy-policy-text {
	margin: 0;
	font-size: 12px;
	color: #666;
}

@media ( max-width: 1024px ) {
	.mtg-account-layout #customer_login {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px;
	}

	.mtg-account-layout #customer_login .u-column1,
	.mtg-account-layout #customer_login .u-column2 {
		grid-column: 1;
	}

	.mtg-account-layout #customer_login .u-column2 {
		padding-top: 24px;
		padding-left: 0;
		border-top: 1px solid #e5e5e5;
		border-left: 0;
	}
}

/* --- 右栏 · 仪表盘问候卡片（设计稿第一块） --- */

/*
 * WooCommerce 的 dashboard.php 只输出两段裸 <p>（问候 + 说明），
 * 卡片外框只能给到内容容器，两段文字再按设计稿拆成「标题行 + 说明行」。
 * 用 body 上的端点标记限定，避免影响订单 / 地址等端点。
 */
.mtg-account-endpoint-dashboard .woocommerce-MyAccount-content {
	margin-bottom: 24px;
	padding: 24px;
	border: 1px solid #e5e5e5;
	background-color: #ffffff;
}

.mtg-account-endpoint-dashboard .woocommerce-MyAccount-content > p:first-of-type {
	margin: 0 0 8px;
	color: #1c1c1c;
	font-size: 18px;
	font-weight: 700;
}

.mtg-account-endpoint-dashboard .woocommerce-MyAccount-content > p:last-of-type {
	margin: 0;
}

/* --- 右栏 · 最近订单（mtg-account-orders） --- */

.mtg-aorders__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mtg-aorders__heading,
.mtg-aorders__empty {
	margin: 0;
}

.mtg-aorders__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	text-decoration: none;
}

.mtg-aorders__scroll {
	overflow-x: auto;
}

.mtg-aorders__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.mtg-aorders__table th,
.mtg-aorders__table td {
	vertical-align: middle;
}

.mtg-aorders__table th {
	border-bottom: 1px solid #e5e5e5;
}

.mtg-aorders__table td {
	border-bottom: 1px solid #f5f5f5;
}

.mtg-aorders__table tbody tr:last-child td {
	border-bottom: 0;
}

.mtg-aorders__id,
.mtg-aorders__total,
.mtg-aorders__view {
	font-weight: 600;
}

.mtg-aorders__view {
	text-decoration: none;
}

.mtg-aorders__badge {
	display: inline-block;
}

/* --- 右栏 · 统计卡（mtg-account-stats） --- */

.mtg-astats__list {
	display: grid;
}

.mtg-astats__value,
.mtg-astats__label {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   我的账户 · 其余端点（订单 / 订单详情 / 地址 / 账户详情 / 下载）的表单与地址卡
   这些端点都由 WooCommerce 原生模板输出，这里只把它们并入同一套设计令牌。
   --------------------------------------------------------------------------- */

.mtg-account-layout .woocommerce-MyAccount-content .form-row {
	margin: 0 0 12px;
	padding: 0;
}

.mtg-account-layout .woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 6px;
	color: #1c1c1c;
	font-size: 13px;
	font-weight: 600;
}

.mtg-account-layout .woocommerce-MyAccount-content input.input-text,
.mtg-account-layout .woocommerce-MyAccount-content select,
.mtg-account-layout .woocommerce-MyAccount-content textarea {
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	background-color: #ffffff;
	font-size: 14px;
}

.mtg-account-layout .woocommerce-MyAccount-content textarea {
	height: auto;
	padding: 12px 16px;
}

/* 「账户详情」里的密码分区 */
.mtg-account-layout .woocommerce-MyAccount-content fieldset {
	margin: 24px 0 0;
	padding: 24px;
	border: 1px solid #e5e5e5;
}

.mtg-account-layout .woocommerce-MyAccount-content legend {
	padding: 0 8px;
	color: #1c1c1c;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* 地址端点的两张地址卡 */
.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Addresses {
	margin: 0;
}

.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Address {
	padding: 24px;
	border: 1px solid #e5e5e5;
	background-color: #ffffff;
}

.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 18px;
}

.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.mtg-account-layout .woocommerce-MyAccount-content address {
	color: #666666;
	font-size: 14px;
	font-style: normal;
	line-height: 1.6;
}

/* 订单详情页的分区标题与明细表 */
.mtg-account-layout .woocommerce-MyAccount-content h3 {
	margin: 24px 0 12px;
	font-size: 18px;
}

.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-order-details,
.mtg-account-layout .woocommerce-MyAccount-content .woocommerce-customer-details {
	margin-top: 24px;
}

/* ---------------------------------------------------------------------------
   下单成功页 · 成功横幅 + 订单信息（对齐设计稿 order-received）
   结算页模板同时服务「结算」与「下单成功」两种状态，这里靠 body 上的端点标记区分。
   --------------------------------------------------------------------------- */

/* 成功横幅区块只在 order-received 端点出现，否则会在结算页留下一条空的灰底区块 */
body:not( .mtg-order-received ) .mtg-thankyou-hero {
	display: none;
}

/*
 * 感谢语 / 订单概览 / 明细 / 地址四段已由自研小工具按设计稿重做，
 * 这里只隐藏 WooCommerce 那一份；支付网关自己的说明（如银行转账信息）保留。
 */
body.mtg-order-received .woocommerce-order > .woocommerce-notice,
body.mtg-order-received .woocommerce-order > .woocommerce-order-overview,
body.mtg-order-received .woocommerce-order .woocommerce-order-details,
body.mtg-order-received .woocommerce-order .woocommerce-customer-details {
	display: none;
}

body.mtg-order-received .woocommerce-order h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

body.mtg-order-received .woocommerce-order .wc-bacs-bank-details {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #666666;
}

/* --- 成功横幅 --- */

.mtg-tsucc {
	text-align: center;
}

.mtg-tsucc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.mtg-tsucc__icon svg {
	fill: none;
	stroke-width: 2.5;
}

.mtg-tsucc__heading,
.mtg-tsucc__subtitle,
.mtg-tsucc__number {
	margin: 0;
}

/* --- 订单信息：左栏卡片 + 右栏摘要 --- */

.mtg-orec__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var( --mtg-orec-aside, 400px );
	gap: 60px;
	align-items: start;
}

@media ( max-width: 1024px ) {
	.mtg-orec__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mtg-orec__title,
.mtg-orec__text {
	margin: 0;
}

.mtg-orec__title + .mtg-orec__text {
	margin-top: 0;
}

/* 状态时间线 */
.mtg-orec__steps {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-orec__step {
	display: flex;
	align-items: center;
}

.mtg-orec__dot {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	line-height: 1;
}

.mtg-orec__step-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* 订单摘要 */
.mtg-orec__items {
	margin: 0 0 16px;
	padding: 0 0 16px;
	list-style: none;
	border-bottom: 1px solid #e5e5e5; /* 颜色由「分隔线颜色」控件覆盖 */
}

.mtg-orec__item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 12px;
}

.mtg-orec__item:last-child {
	margin-bottom: 0;
}

.mtg-orec__thumb {
	flex: none;
	overflow: hidden;
}

/* 同 .mtg-post-card__media img：多带一层根类压过 Elementor 的 `.elementor img { height: auto }` */
.mtg-orec .mtg-orec__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-orec__item-body {
	flex: 1 1 0;
	min-width: 0;
}

.mtg-orec__item-name {
	margin-bottom: 4px;
}

/* WooCommerce 的 wc-item-meta 是块级列表，压成行内才能得到设计稿的「属性 × 数量」一行 */
.mtg-orec__item-meta .wc-item-meta {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtg-orec__item-meta .wc-item-meta li,
.mtg-orec__item-meta .wc-item-meta p {
	display: inline;
	margin: 0;
}

.mtg-orec__item-meta .wc-item-meta li + li::before {
	content: ', ';
}

.mtg-orec__item-total {
	flex: none;
}

.mtg-orec__totals {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.mtg-orec__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mtg-orec__row--total {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e5e5e5; /* 颜色由「分隔线颜色」控件覆盖 */
}

.mtg-orec__actions {
	display: flex;
	flex-direction: column;
}

.mtg-orec__btn {
	display: block;
	text-align: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   博客列表（对齐设计稿 blog）
   --------------------------------------------------------------------------- */

/* 设计稿的副标题是居中窄栏（max-width 600），结构性的排版约束放在这里 */
.mtg-blog-hero .elementor-widget-text-editor p {
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
}

.mtg-posts__grid {
	display: grid;
}

.mtg-post-card,
.mtg-post-card__body {
	display: flex;
	flex-direction: column;
}

/* 卡片等高时把底部行压到最下方 */
.mtg-post-card__body {
	flex: 1 1 auto;
}

.mtg-post-card__media {
	overflow: hidden;
}

/*
 * 选择器多带一层根类：Elementor 的 `.elementor img { height: auto }` 与本条特异性相同
 * 且更靠后，会吃掉这里的 height: 100%，导致图片按原始比例撑高、裁切位置也不对。
 */
.mtg-posts .mtg-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-post-card__badge {
	display: inline-block;
	align-self: flex-start;
	text-transform: uppercase;
}

.mtg-post-card__title a {
	color: inherit;
	text-decoration: none;
}

.mtg-post-card__title a:hover {
	color: inherit;
}

.mtg-post-card__excerpt,
.mtg-post-card__title {
	margin-top: 0;
}

.mtg-post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	border-top: 1px solid #f5f5f5; /* 颜色由「分隔线颜色」控件覆盖 */
}

.mtg-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	text-decoration: none;
}

.mtg-posts__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtg-posts__pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-posts__pagination .page-numbers.current {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   博客详情（对齐设计稿 post）
   --------------------------------------------------------------------------- */

/* 设计稿正文栏是 800px 窄栏（页头 / 封面 / 正文 / 页脚 / 相关文章共用） */
.mtg-post-single > .elementor-container {
	max-width: 800px;
}

.mtg-phero__badge {
	display: inline-block;
	text-transform: uppercase;
}

.mtg-phero__title {
	margin: 0;
}

.mtg-phero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-phero__media {
	overflow: hidden;
}

/* 同博客列表：多带一层根类压过 Elementor 的 `.elementor img { height: auto }` */
.mtg-phero .mtg-phero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mtg-pcontent > *:first-child {
	margin-top: 0;
}

.mtg-pcontent img {
	max-width: 100%;
	height: auto;
}

.mtg-pfoot__tags {
	display: flex;
	flex-wrap: wrap;
}

.mtg-pfoot__tag {
	display: inline-block;
	text-decoration: none;
}

.mtg-pfoot__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-pfoot__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.mtg-posts__heading {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   搜索结果（对齐设计稿 search）
   --------------------------------------------------------------------------- */

.mtg-shead__title,
.mtg-shead__meta {
	margin: 0;
}

.mtg-sform {
	display: flex;
	align-items: stretch;
	margin-right: auto;
	margin-left: auto;
}

.mtg-sform__input {
	flex: 1 1 auto;
	min-width: 0;
}

.mtg-sform__button {
	flex: none;
	border: 0;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   404 页（对齐设计稿 404）
   --------------------------------------------------------------------------- */

.mtg-404__code,
.mtg-404__title,
.mtg-404__text,
.mtg-404__popular-label {
	margin: 0;
}

/* 说明用 inline 级盒子，跟随根容器的 text-align 对齐。 */
.mtg-404__text {
	display: inline-block;
}

.mtg-404__actions {
	display: inline-flex;
	flex-wrap: wrap;
}

.mtg-404__links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
}

.mtg-404__btn,
.mtg-404__link {
	text-decoration: none;
}

.mtg-404__btn {
	/* 描边与内边距对齐：主按钮无边框，靠拉伸与次按钮等高。 */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 内容页 · 内容页头 */

/* 内容页头：可选背景图 + 居中标题 / 副标题。
   本片段只放结构性样式（定位、层级、布局）；颜色、字号、内外边距等可视参数一律由小工具控件输出。 */

.mtg-page-head {
	position: relative;
}

/* 背景图与遮罩铺满整条区块 */
.mtg-page-head__bg,
.mtg-page-head__overlay {
	position: absolute;
	inset: 0;
}

.mtg-page-head__bg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* 内容压在背景图与遮罩之上 */
.mtg-page-head__inner {
	position: relative;
	z-index: 1;
}

/* 有背景图时整条区块撑高并垂直居中内容（高度由控件的 CSS 变量给出，不写死） */
.mtg-page-head--has-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--mtg-page-head-min-height);
}

/* 内容页 · 数据统计 */

/* 数据统计条：N 列「大数字 + 小标签」横排。
   本片段只放结构性样式；列数、间距、颜色、字号、内外边距等可视参数一律由小工具控件输出。 */

.mtg-stats__grid {
	display: grid;
}

/* 允许轨道收缩，避免长数字/长标签把栅格撑破 */
.mtg-stats__item {
	min-width: 0;
}

/* 内容页 · 价值卡片 */

/* 价值卡片组（mtg-values）：只放结构性样式（栅格/定位/层级/响应式），
   字号、字重、颜色、背景、间距、尺寸、圆角等可视参数一律由小工具控件输出。 */

.mtg-values__grid {
	display: grid;
	/* 列数兜底：桌面/平板/手机的实际列数由样式面板的 grid_columns 控件按断点输出；
	   Content 面板的 columns 写的就是这个变量，作为统一的结构性入口。 */
	grid-template-columns: repeat(var(--mtg-values-columns, 3), minmax(0, 1fr));
}

/* 圆形图标底：inline-flex 让它跟随 items 的 text-align 居中，
   flex-shrink 防止窄屏下被栅格压扁。 */
.mtg-values__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 内容页 · CTA 条 */

/* 行动号召条（mtg-cta）：只放结构性样式（布局/层级/过渡属性），
   排版、颜色、背景、间距、圆角、边框、过渡时长等可视参数一律由小工具控件输出。 */

/* 内层走普通块级流：标题、副标题靠容器的 text-align 居中，
   行内块按钮同样跟随 text-align，因此「对齐方式」控件对三者一致生效。 */
.mtg-cta__inner {
	display: block;
}

.mtg-cta__button {
	display: inline-block;
	text-decoration: none;
	/* 过渡的「属性 + 缓动」是结构性定义，时长由 button_transition 控件输出。 */
	transition-property: color, background-color, border-color;
	transition-timing-function: ease;
}

/* 内容页 · FAQ 手风琴 */

/*
 * FAQ 分组手风琴（mtg-faq）
 *
 * 本片段只放结构性规则：
 *   - 原生 <details>/<summary> 去掉默认三角、整行可点；
 *   - 「+ / −」图标用伪元素的两条线绘制（不依赖字体图标，也不用文本符号）；
 *   - CTA 按钮设为 inline-block（锚点默认 inline，上下内边距撑不开按钮盒子）。
 * 颜色 / 字号 / 字重 / 间距 / 边框 / 圆角等可视参数全部由 Elementor 控件输出。
 */

/* 问题行：flex 让「问题文字 + 图标」各占一个槽位，文字换行时不会压到图标。 */
.mtg-faq .mtg-faq__question {
	display: flex;
	align-items: center;
	/* 去掉 <summary> 的默认三角（Firefox 走 list-style，Chrome/Safari 走 ::-webkit-details-marker）。 */
	list-style: none;
	cursor: pointer;
}

.mtg-faq .mtg-faq__question::-webkit-details-marker {
	display: none;
}

/*
 * 图标：两条线共用同一中心点。
 *   ::before 画横线，左侧 0.75em 是它与问题文字之间的留白，margin-left: auto 把它推到行尾；
 *   ::after 画竖线，默认旋转 90°，与横线叠加即「+」；展开时转回 0° 变成「−」。
 * 两条线的尺寸都用 em，跟随「图标大小」控件（该控件把 font-size 输出到这两个伪元素上），
 * 线条颜色跟随 currentColor，由「图标颜色」控件下发。
 */
.mtg-faq .mtg-faq__question::before {
	content: "";
	order: 1;
	flex: 0 0 auto;
	box-sizing: border-box;
	/* 右侧 1em 是画线区，左侧 0.75em 是与文字之间的留白。 */
	width: 1.75em;
	height: 1em;
	padding-left: 0.75em;
	margin-left: auto;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 1em 1px;
}

.mtg-faq .mtg-faq__question::after {
	content: "";
	order: 2;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 1em;
	height: 1px;
	/* 负外边距把竖线拉回横线的正中间。 */
	margin-left: -1em;
	background-color: currentColor;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.mtg-faq .mtg-faq__item[open] .mtg-faq__question::after {
	transform: rotate(0deg);
}

.mtg-faq .mtg-faq__cta-button {
	display: inline-block;
}

/* 内容页 · 联系页 */

/*
 * 联系页（mtg-contact）
 *
 * 左栏：信息卡（圆形图标 + 标签 + 多行文本）+ FAQ 快捷链接卡；右栏：白卡联系表单。
 *
 * 本片段只放结构性规则：
 *   - 两列栅格，移动端（≤767px）单列；表单字段纵向排列、姓名两列；
 *   - 图标圆形底的居中与不压缩；列表/表单的 flex 排布；
 *   - 去掉标题与段落自带的浏览器外边距；
 *   - 提示条基础布局、蜜罐字段移出可视区。
 * 颜色 / 字号 / 字重 / 行高 / 间距 / 边框 / 圆角 / 内边距一律由 Elementor 控件输出。
 */

/* 两列布局。桌面列宽由「两栏比例」控件输出，这里保留与控件默认（1 : 1.5）一致的声明，
   作为控件未输出时的兜底（控件选择器带 {{WRAPPER}} 前缀，特异性更高，正常会覆盖本行）。 */
.mtg-contact__layout {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	align-items: start;
}

/* 栅格子项默认 min-width: auto，长文本 / 下拉会把列撑宽。 */
.mtg-contact__aside,
.mtg-contact__form-card {
	min-width: 0;
}

/* 去掉标题与段落自带的浏览器外边距，具体间距一律由控件输出。 */
.mtg-contact__info-title,
.mtg-contact__info-label,
.mtg-contact__info-text,
.mtg-contact__form-title {
	margin: 0;
}

/* 信息项：图标与文字左右排列（间距由「信息项间距」控件输出）。 */
.mtg-contact__info-list {
	display: flex;
	flex-direction: column;
}

.mtg-contact__info-item {
	display: flex;
	align-items: flex-start;
}

.mtg-contact__info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.mtg-contact__info-body {
	min-width: 0;
}

/* 快捷链接卡 */
.mtg-contact__links-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 设计稿中标题与列表之间留 12px（控件合同未覆盖该间距）。 */
.mtg-contact__links-title {
	margin: 0 0 12px;
}

/* 表单：字段纵向排列（间距由「字段间距」控件输出）。 */
.mtg-contact__form {
	display: flex;
	flex-direction: column;
}

/* 姓名字段两列，移动端单列。 */
.mtg-contact__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mtg-contact__field {
	display: flex;
	flex-direction: column;
}

/* 输入类控件撑满字段宽度，并继承所在上下文的字体（避免浏览器默认的 13.33px）。 */
.mtg-contact__input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
}

.mtg-contact__textarea {
	display: block;
	resize: vertical;
}

/* 提示条基础布局（文字颜色与背景由控件输出）。 */
.mtg-contact__notice {
	padding: 12px 16px;
	margin-bottom: 20px;
}

/* 表单备注：设计稿为 12px / #999 / 居中（控件合同未覆盖该排版）。 */
.mtg-contact__note {
	margin: 20px 0 0;
	font-size: 12px;
	color: #999;
	text-align: center;
}

/* 提交按钮：只做浏览器默认样式的复位，盒子尺寸由内边距控件决定。 */
.mtg-contact__button {
	display: inline-block;
	align-self: flex-start;
	border: 0;
	cursor: pointer;
}

/* 蜜罐字段：移出可视区但保留在 DOM 中（不能用 display:none，部分垃圾提交会跳过隐藏字段）。 */
.mtg-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 移动端单列 */
@media (max-width: 767px) {
	.mtg-contact__layout {
		grid-template-columns: 1fr;
	}

	.mtg-contact__row {
		grid-template-columns: 1fr;
	}
}

/* 内容页 · 富文本 */

/*
 * 富文本区块（mtg-rich-text）：可选小节标题 + WYSIWYG 正文。
 *
 * 本片段只放结构性规则：
 *   - 限宽后的内容列居中（max-width 由「内容最大宽度」控件下发，这里给出左右 auto 兜底）；
 *   - 标题不带外边距，首个子元素的 top 外边距归零，避免区块顶部多出一段空白；
 *   - 列表与上一段之间只保留段落下间距（浏览器默认的 ul/ol 上边距归零），嵌套列表不再额外留白；
 *   - 正文里的图片不撑破容器。
 * 字号 / 字重 / 行高 / 颜色 / 段间距 / 标题间距 / 列表缩进与列表项间距等可视参数
 * 一律由小工具控件输出，不在此写死。
 */

.mtg-rich-text__inner {
	margin-right: auto;
	margin-left: auto;
}

.mtg-rich-text__heading {
	margin: 0;
}

.mtg-rich-text__content > *:first-child {
	margin-top: 0;
}

/*
 * 浏览器默认给 ul / ol 上下各 1em；这里只归零上边距：
 * 列表与上一段之间保留段落下间距，下边距仍沿用浏览器默认值。
 */
.mtg-rich-text__content ul,
.mtg-rich-text__content ol {
	margin-top: 0;
}

/* 嵌套列表紧跟父级列表项，不再额外留白（父项的下间距由「列表项间距」控件负责）。 */
.mtg-rich-text__content li > ul,
.mtg-rich-text__content li > ol {
	margin-top: 0;
	margin-bottom: 0;
}

.mtg-rich-text__content img {
	max-width: 100%;
	height: auto;
}