/* ------------------------------------------------------------------
   Replica Home 模板专用样式
   作用：把 Porto 的搜索 / 购物车模块放进复刻页头部，并与原图标尺寸对齐。
   只在 Template: Replica Home 页面加载。

   为什么需要这份文件：
   Porto 自己的模块样式全部限定在 `#header` / `#mini-cart` 作用域下，
   而复刻页头部 id 是 `SiteHeader`，所以 Porto 的样式不会生效；
   同时 Porto 的全局样式（bootstrap/theme/shortcodes/plugins）会改写
   复刻页的排版，因此本模板里按路径把这些父主题样式全部禁用。
   ------------------------------------------------------------------ */

/* ---------- AOS 入场动画 ----------
   复刻页依赖 AOS：元素初始 opacity:0 + transform 位移，滚动到位后才归位。
   在 WordPress 里 AOS 的初始化时机不稳定（Shopify 专有脚本偶有异常），
   截图/首屏会出现标题偏暗、区块整体上移。这里在本页直接归属位状态，
   保证与复刻页的最终视觉一致；滚动动画本身在这个页面不是重点。 */
body.template-index [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ---------- 滚动显现 / hero 滑块 ----------
   Impulse 还依赖两套 JS 才把内容放出来：
     .appear           滚入视口后加 class 揭示
     .hero__image *    滑块初始化后淡入
     .animation-*      首屏文字逐字动画的容器
   这些初始化依赖 Shopify 专有对象，在 WordPress 下会中断
   （实测线上 hero 图片 opacity 恒为 0、flickity=0）。
   本页直接固定为终态，不依赖 JS。 */
body.template-index .appear,
body.template-index .hero__image-wrapper,
body.template-index .hero__image,
body.template-index .animation-cropper,
body.template-index .animation-contents {
	opacity: 1 !important;
	transform: none !important;
}

/* 滑块加载指示线（初始化后才会消失，这里直接隐藏） */
body.template-index .hero__loading,
body.template-index .slideshow__progress,
body.template-index .flickity-page-dots {
	display: none !important;
}

/* ---------- 搜索模块 ---------- */

.site-header .replica-search {
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.site-header .replica-search .search-toggle {
	display: inline-block;
	padding: 0 12px;
	line-height: 1;
	color: inherit;
	text-decoration: none;
}

/* 沿用复刻页原生的图标尺寸（.site-nav__link--icon .icon = 30px） */
.site-header .replica-search .search-toggle .icon {
	display: block;
	width: 30px;
	height: 30px;
}

/* 复刻页头部只有图标，不要 Porto 的 "Search" 文字 */
.site-header .replica-search .search-text {
	display: none;
}

/* 移动端专用那份（模板传了 medium-up--hide），桌面显式藏掉，
   不依赖主题对 .medium-up--hide 的定义 */
@media (min-width: 769px) {
	.site-header .replica-search--mobile {
		display: none !important;
	}
}

/* 表单默认收起，点图标后展开 */
.site-header .replica-search .searchform {
	display: none;
}

.site-header .replica-search.is-active .searchform {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	min-width: 300px;
	padding: 12px;
	background: #0e0e0e;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.site-header .replica-search .searchform-fields {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.site-header .replica-search .searchform .text {
	flex: 1 1 auto;
}

.site-header .replica-search .searchform .text input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 2px;
	color: #dadada;
	font-size: 14px;
}

.site-header .replica-search .searchform .text input::placeholder {
	color: rgba(218, 218, 218, 0.55);
}

.site-header .replica-search .searchform .button-wrap {
	flex: 0 0 auto;
}

.site-header .replica-search .searchform .button-wrap .btn {
	height: 100%;
	padding: 0 12px;
	background: #9f8561;
	border: 0;
	border-radius: 2px;
	color: #0e0e0e;
	cursor: pointer;
}

/* ---------- 购物车模块 ---------- */

.site-header .replica-minicart {
	display: inline-block;
	vertical-align: middle;
}

.site-header .replica-minicart .cart-head {
	display: inline-block;
}

.site-header .replica-minicart .cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
}

.site-header .replica-minicart .cart-icon .icon {
	display: block;
	width: 30px;
	height: 30px;
}

/* 数量角标：与复刻页 .cart-link__bubble 的视觉一致 */
.site-header .replica-minicart .cart-items {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	box-sizing: border-box;
	background: #9f8561;
	border: 2px solid #0e0e0e;
	border-radius: 999px;
	color: #0e0e0e;
	font-size: 10px;
	line-height: 11px;
	text-align: center;
}

/* 数量为 0 时不显示角标（复刻页原本就没有） */
.site-header .replica-minicart.is-empty .cart-items {
	display: none;
}

/* 复刻页头部只保留图标，不要 Porto 的 "0 items / View cart" 文本 */
.site-header .replica-minicart .cart-items-text,
.site-header .replica-minicart .cart-subtotal {
	display: none;
}

/* 迷你购物车的下拉面板：本页不使用下拉，点击图标直接去购物车页，
   所以整块隐藏（否则未加载 Porto CSS 时会平铺在页头里） */
.site-header .replica-minicart-wrap .cart-popup,
.site-header .replica-minicart-wrap .widget_shopping_cart_content,
.site-header .replica-minicart-wrap .cart-loading,
.site-header .replica-minicart-wrap .minicart-overlay {
	display: none !important;
}

.site-header .replica-minicart-wrap {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.site-header .replica-minicart .cart-link__bubble,
.site-header .replica-minicart .icon__fallback-text {
	display: none;
}

/* ==================================================================
   页脚订阅表单（2026-10-18）
   问题：.footer__newsletter-input 被渲染成白底（bg #fff、border 0），
        而提交按钮的图标是白色（26x24，压在输入框右侧），导致按钮看不见。
   处理：恢复复刻页的深底 + 下划线输入框，白字白图标。
   ================================================================== */
.footer__newsletter-input {
	background-color: transparent !important;
	color: #fff !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .38) !important;
	box-shadow: none !important;
}

.footer__newsletter-input::placeholder {
	color: rgba(255, 255, 255, .55);
	opacity: 1;
}

.footer__newsletter-input:focus {
	border-bottom-color: #9f8561 !important;
	outline: none;
}

.footer__newsletter-btn {
	color: #fff;
	background: transparent;
	border: 0;
}
/* 页脚订阅结果提示（成功/失败） */
.vx-newsletter-msg {
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: .04em;
}

.vx-newsletter-msg.is-success {
	color: #9f8561;
}

.vx-newsletter-msg.is-error {
	color: #d9534f;
}
/* ==========================================================================
   移动端搜索面板：铺满整行、不再溢出视口
   --------------------------------------------------------------------------
   原来 .replica-search--mobile 是 position: relative 的 54px 图标容器，
   展开后的 .searchform 用 absolute + left:0 + min-width:300px，
   在 390px 视口里从 x=273 开始 → right=573，右侧溢出 183px。
   这里把面板锚到 .site-header（整行宽），left/right 拉满。
   ========================================================================== */
@media (max-width: 768px) {
	.site-header {
		position: relative;
	}

	.site-header .replica-search--mobile {
		position: static;
	}

	.site-header .replica-search--mobile.is-active .searchform {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		min-width: 0;
		max-width: none;
		box-sizing: border-box;
		z-index: 70;
	}

	.site-header .replica-search--mobile.is-active .searchform-fields {
		display: flex;
		width: 100%;
		gap: 8px;
	}

	.site-header .replica-search--mobile.is-active .searchform .text {
		width: 100%;
		min-width: 0;
	}

	.site-header .replica-search--mobile.is-active .searchform button,
	.site-header .replica-search--mobile.is-active .searchform .btn,
	.site-header .replica-search--mobile.is-active .searchform input[type="submit"] {
		flex: 0 0 auto;
		padding: 12px 18px;
		white-space: nowrap;
		color: #0e0e0e;
	}
}
/* 搜索提交按钮：Porto 图标字体（porto-icon-magnifier）在本站不加载，
   按钮会变成一个空的金色块。这里隐藏图标、用文字兜底，并给足尺寸。 */
.site-header .replica-search .searchform .btn-special {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	min-height: 44px;
	padding: 12px 20px;
	border: 0;
	background: #9f8561;
	color: #0e0e0e;
	cursor: pointer;
}

.site-header .replica-search .searchform .btn-special i,
.site-header .replica-search .searchform .btn-special svg {
	display: none !important;
}



.site-header .replica-search .searchform .btn-special:hover {
	background: #b89a72;
}
/* 搜索面板内的自动补全容器是空的，但会撑出 15px 横向滚动，直接收掉 */
.site-header .replica-search--mobile.is-active .searchform {
	overflow: hidden;
	max-width: 100vw;
}

.site-header .replica-search--mobile.is-active .searchform .search-lists,
.site-header .replica-search--mobile.is-active .searchform .live-search-list {
	display: none;
}
/* ==========================================================================
   搜索提交按钮：文字改用外层 .button-wrap 叠加
   --------------------------------------------------------------------------
   主题里 .btn 自己用了 ::after 做斜角背景（position:absolute），
   直接把文字写在 .btn-special::after 上会被那个定位挤到角落裁掉。
   这里让按钮本体只负责点击区域，文字由 .button-wrap::after 居中覆盖。
   ========================================================================== */
.site-header .replica-search .searchform .button-wrap {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

.site-header .replica-search .searchform .button-wrap .btn-special {
	min-width: 96px;
	min-height: 44px;
	padding: 12px 20px;
	border: 0;
	background: #9f8561;
	color: transparent;
	font-size: 0;
	overflow: hidden;
	cursor: pointer;
}

.site-header .replica-search .searchform .button-wrap .btn-special i,
.site-header .replica-search .searchform .button-wrap .btn-special svg,
.site-header .replica-search .searchform .button-wrap .btn-special::before,
.site-header .replica-search .searchform .button-wrap .btn-special::after {
	display: none !important;
	content: none !important;
}

.site-header .replica-search .searchform .button-wrap::after {
	content: "Search";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #9f8561;
	color: #0e0e0e;
	font-family: Oswald, "Arial Narrow", sans-serif;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.site-header .replica-search .searchform .button-wrap:hover::after {
	background: #b89a72;
}
/* ==========================================================================
   滚动时页头固定 + 纯黑
   ========================================================================== */
.header-wrapper.is-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: #0e0e0e;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.header-wrapper.is-scrolled .site-header,
.header-wrapper.is-scrolled .header-item,
.header-wrapper.is-scrolled .header-layout {
	background: #0e0e0e;
}

.header-wrapper.is-scrolled .site-nav__link,
.header-wrapper.is-scrolled .site-nav__link .icon,
.header-wrapper.is-scrolled .site-header__logo,
.header-wrapper.is-scrolled .site-header__logo a {
	color: #ffffff;
	fill: currentColor;
}
/* ==========================================================================
   移动端页脚折叠：默认收起，点标题展开
   （原规则在变量改名回退时丢失，这里补回）
   ========================================================================== */
@media (max-width: 768px) {
	.site-footer .grid__item {
		height: auto !important;
	}

	.site-footer .footer__collapsible {
		display: none;
	}

	.site-footer .grid__item.is-open .footer__collapsible {
		display: block;
	}

	.site-footer .footer__title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		user-select: none;
	}

	/* 箭头指示：收起时朝下，展开时朝上 */
	.site-footer .footer__title::after {
		content: "";
		position: absolute;
		right: 8px;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		transition: transform .2s ease;
	}

	.site-footer .grid__item.is-open .footer__title::after {
		transform: translateY(-30%) rotate(-135deg);
	}

	.site-footer .footer__title .icon,
	.site-footer .footer__title svg {
		display: none !important;
	}
}
/* ==========================================================================
   /* ==========================================================================
   评论区（testimonials）——按原站 ocasoknives 的规则复刻
   桌面：一屏 3 张（每张 33%），居中卡片内容块 scale(1.1) + 投影，其余 .95
   移动：一屏 1 张（100%），内容块 .86 → 选中 1
   位置与位移由 JS 以像素写入（含跟手拖动），这里只负责外观与过渡
   ========================================================================== */
.vx-testimonials {
	position: relative;
	overflow: hidden;
	width: 100%;
	transition: height .4s ease;
	/* 横向手势交给 JS 做跟手拖动，纵向仍允许页面滚动 */
	touch-action: pan-y pinch-zoom;
	-webkit-user-drag: none;
	cursor: grab;
}

.vx-testimonials .testimonials-slide {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: auto !important;
	margin: 0 !important;
	opacity: 1;
	transition: transform .5s cubic-bezier(.25, .8, .3, 1), opacity .35s ease;
	will-change: transform;
}

.vx-testimonials .testimonials-slider__text {
	margin: 0 6px;
	padding: 30px;
	background: #0e0e0e;
	box-sizing: border-box;
	transform: scale(.95);
	transition: transform .5s ease, box-shadow .5s ease;
}

.vx-testimonials .testimonials-slide.is-active .testimonials-slider__text {
	position: relative;
	z-index: 10;
	transform: scale(1.1);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .45);
}

@media (max-width: 768px) {
	.vx-testimonials .testimonials-slider__text {
		margin: 0 8px;
		padding: 26px 20px;
		transform: scale(.86);
	}

	.vx-testimonials .testimonials-slide.is-active .testimonials-slider__text {
		transform: scale(1);
	}
}

/* 星号兜底：显式颜色 + 带符号字形的字体栈 */
.testimonials-slide .testimonial-stars {
	display: block;
	margin: 0 0 14px;
	color: #dadada !important;
	font-family: "Segoe UI Symbol", "Apple Symbols", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: .18em;
}

@media (max-width: 768px) {
	.testimonials-slide .testimonial-stars {
		font-size: 15px;
		margin-bottom: 10px;
	}
}

/* 底部圆点 */
.testimonials-dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.testimonials-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .26);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.testimonials-dots button:hover {
	background: rgba(255, 255, 255, .5);
}

.testimonials-dots button.is-active {
	background: #9f8561;
	transform: scale(1.3);
}

@media (max-width: 768px) {
	.testimonials-dots {
		margin-top: 18px;
		gap: 8px;
	}
}

/* 跟手拖动时关闭过渡，松手后再恢复 */
.vx-testimonials.is-dragging,
.vx-testimonials.is-dragging .testimonials-slide,
.vx-testimonials.is-dragging .testimonials-slider__text {
	transition: none !important;
}

.vx-testimonials.is-dragging {
	cursor: grabbing;
}

/* 任何尺寸下都不让评论区产生横向滚动 */
.testimonials-section {
	overflow-x: clip;
}

/* ==========================================================================
   移动端页头垂直居中（全部用 flex 居中参数，不用任何偏移）
   --------------------------------------------------------------------------
   原结构里 .header-layout 是 flex 但 align-items 为默认值（stretch）；
   图标/购物袋的容器是 inline-block + 文字基线对齐，导致图标中心比页头中心高 1~3px。
   这里统一改为 flex + align-items: center，让每个盒子自己居中。
   ========================================================================== */
@media (max-width: 768px) {
	.site-header .header-layout {
		align-items: center;
	}

	.site-header .header-item {
		align-items: center;
		align-self: center;
	}

	/* 图标区内的 .site-nav 默认是 block，图标会贴在顶部，这里改成 flex 居中；
	   注意只作用于 .header-item--icons 内部，不能碰主导航 .site-nav */
	.site-header .header-item--icons .site-nav,
	.site-header .header-item--icons .site-nav__icons,
	.site-header .header-item--icons .replica-search,
	.site-header .header-item--icons .replica-minicart,
	.site-header .header-item--icons .replica-minicart-wrap,
	.site-header .site-nav__link--icon {
		display: flex;
		align-items: center;
	}

	/* 购物袋：文件前面有 .site-header .replica-minicart .cart-head{display:inline-block}
	   这类更高优先级规则，这里必须同样具体或更强，才能真正居中 */
	.site-header .replica-minicart,
	.site-header .replica-minicart-wrap {
		display: flex;
		align-items: center;
	}

	.site-header .replica-minicart .cart-head,
	.site-header .replica-minicart .cart-icon,
	.site-header .replica-minicart .cart-link {
		display: flex;
		align-items: center;
	}

	.site-header .site-nav__icons svg,
	.site-header .site-nav__link--icon svg,
	.site-header .mini-cart svg,
	.site-header .cart-head svg {
		display: block;
	}
}

/* ---------- Impulse 预加载条兜底 ----------
   原站靠 Shopify JS 初始化后移除 loading/unload 类；WP 环境没有那套 JS，
   .loading:before 会在 hero 中心画一条 100x3px 的灰色加载条。
   标记里已去掉这些类，这里再兜底隐藏。 */
.loading:before,
.loading:after,
.unload:before,
.unload:after {
	display: none !important;
}