/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ============================================================
   Override Astra default header styles
   ============================================================ */

/* Hide Astra default header structure */
.ast-header-break-point .site-header {
	border-bottom: none;
}

/* Keep content aligned after custom header */
.site-content {
	margin-top: 0;
}

/* Remove possible Astra sticky header placeholder */
.ast-sticky-active,
#ast-fixed-header {
	display: none !important;
}

/* Improve readability for product detail text blocks */
.single-product div.product .summary,
.single-product div.product .summary p {
	line-height: 1.75;
}

.single-product div.product .summary p {
	margin-bottom: 0.8em;
}


/* ===== 产品列表页：强制图片统一大小 + 卡片标题等高，保证网格对齐 (2026-07-11) ===== */

/* 1) 图片始终填满列宽并保持正方形——不依赖 JS 添加的 woocommerce-js 类，
      避免 JS 未生效时图片按原始 300px 显示、显得过大且参差 */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	width: 100% !important;
	height: auto !important;
	display: block;
	aspect-ratio: 1 / 1;   /* 统一为正方形，保证每张图等高 */
	object-fit: contain;   /* 完整显示产品，不裁切 */
}

/* 2) 标题预留 2 行高度，使 1 行/2 行标题的卡片等高 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.9em;      /* 预留 2 行 */
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;  /* 超过 2 行则省略，防止极长标题再次破坏对齐 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere; /* 允许长型号(如 CRG-108II/308II/508II/708II)换行 */
	word-break: break-word;
}

/* 3) 关键修复：防止 CSS Grid 撑破(blowout)。
      Elementor 用 repeat(5,1fr)，而 1fr 轨道的最小宽度是"内容宽度"，
      长标题/图片会把列撑宽导致溢出、图片放大、第5列被挤出屏幕。
      改成 minmax(0,1fr) 并给子项 min-width:0，让轨道能收缩到等宽。 */
.elementor-widget-wc-archive-products .woocommerce.columns-5 ul.products {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
/* 平板：3 列。选择器带上 .columns-5，使特异性与上面的桌面规则相等，
   这样同为 !important 时由源码顺序(媒体查询在后)决定，才能真正覆盖成 3 列。 */
@media (max-width: 1024px) {
	.elementor-widget-wc-archive-products .woocommerce.columns-5 ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
/* 手机：2 列，同理保持特异性相等 */
@media (max-width: 767px) {
	.elementor-widget-wc-archive-products .woocommerce.columns-5 ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
.woocommerce ul.products li.product,
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a img {
	min-width: 0 !important;   /* 允许网格轨道收缩，杜绝撑破 */
}


/* ============================================================
   侧栏"Categories"分类菜单美化 (2026-07-11)
   作用域限定该侧栏导航组件(elementor-element-03aa7b6)，不影响顶部导航
   ============================================================ */
@media (min-width: 1025px) {

	/* 卡片容器 */
	.elementor-element-03aa7b6 .elementor-nav-menu {
		border: 1px solid #E3E8EF;
		border-radius: 10px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 1px 3px rgba(16,42,86,.05);
	}
	.elementor-element-03aa7b6 .elementor-nav-menu > li,
	.elementor-element-03aa7b6 .sub-menu > li {
		margin: 0 !important;
		border: 0 !important;
	}

	/* 统一所有层级链接的字体族与基础排版 */
	.elementor-element-03aa7b6 .elementor-item,
	.elementor-element-03aa7b6 .elementor-sub-item {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		font-family: inherit !important;
		line-height: 1.4 !important;
		letter-spacing: 0;
		border: 0 !important;
		border-radius: 0 !important;
		transition: background .18s ease, color .18s ease;
	}

	/* 顶级分类项 */
	.elementor-element-03aa7b6 .elementor-nav-menu > li > .elementor-item {
		padding: 12px 16px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		color: #1e293b !important;
		border-bottom: 1px solid #EEF1F6 !important;
	}
	.elementor-element-03aa7b6 .elementor-nav-menu > li:last-child > .elementor-item {
		border-bottom: 0 !important;
	}
	.elementor-element-03aa7b6 .elementor-item:hover {
		background: #F0F5FA !important;
		color: #046bd2 !important;
	}

	/* 子分类容器：桌面端始终展开、静态排布 */
	.elementor-element-03aa7b6 .sub-menu.elementor-nav-menu--dropdown {
		display: block !important;
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		background: #F8FAFC !important;
		box-shadow: none !important;
		border: 0 !important;
		border-top: 1px solid #EEF1F6 !important;
		padding: 0 !important;
	}

	/* 子分类项：与顶级同字体，仅缩进+略小，风格统一 */
	.elementor-element-03aa7b6 .elementor-sub-item {
		position: relative;
		padding: 10px 16px 10px 34px !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		color: #475569 !important;
		border-bottom: 1px solid #EEF1F6 !important;
	}
	.elementor-element-03aa7b6 .sub-menu > li:last-child .elementor-sub-item {
		border-bottom: 0 !important;
	}
	/* 子项前的小圆点标记 */
	.elementor-element-03aa7b6 .elementor-sub-item::before {
		content: "";
		position: absolute;
		left: 18px;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -3px;
		border-radius: 50%;
		background: #C7CED6;
		transition: background .18s ease;
	}
	.elementor-element-03aa7b6 .elementor-sub-item:hover {
		background: #EAF2FC !important;
		color: #046bd2 !important;
	}
	.elementor-element-03aa7b6 .elementor-sub-item:hover::before {
		background: #046bd2;
	}

	/* 当前所在分类高亮（顶级或子级） */
	.elementor-element-03aa7b6 .elementor-item-active,
	.elementor-element-03aa7b6 .current-menu-item > .elementor-sub-item,
	.elementor-element-03aa7b6 .current-menu-item > .elementor-item {
		background: #EAF2FC !important;
		color: #045cb4 !important;
		font-weight: 700 !important;
		box-shadow: inset 3px 0 0 #046bd2;
	}
	.elementor-element-03aa7b6 .elementor-item-active::before,
	.elementor-element-03aa7b6 .current-menu-item > .elementor-sub-item::before {
		background: #046bd2;
	}

	/* 子菜单常驻展开，隐藏折叠箭头，避免误导 */
	.elementor-element-03aa7b6 .dropdown-menu-toggle,
	.elementor-element-03aa7b6 .elementor-item > .sub-arrow {
		display: none !important;
	}

	/* "Categories" 标题与卡片间距 */
	.elementor-element-63d4b48 .elementor-heading-title {
		font-size: 20px !important;
		font-weight: 700 !important;
		color: #1e293b !important;
		margin-bottom: 12px !important;
	}
}


/* ============================================================
   移动端产品网格观感微调 (2026-07-12)
   配合上面把手机收成 2 列、平板 3 列，进一步让卡片协调美观
   ============================================================ */
@media (max-width: 1024px) {
	/* 列间距，避免卡片贴太紧 */
	.elementor-widget-wc-archive-products .woocommerce.columns-5 ul.products {
		gap: 16px !important;
	}
	/* 卡片内商品名：手机上字号/行高更易读，保留 2 行等高 */
	.elementor-widget-wc-archive-products ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px !important;
		line-height: 1.35 !important;
		min-height: 2.7em !important;
		padding: 0 4px !important;
	}
}
@media (max-width: 767px) {
	/* 2 列时给图片留一点内边距，视觉更透气 */
	.elementor-widget-wc-archive-products ul.products li.product a img {
		padding: 6px !important;
	}
	.elementor-widget-wc-archive-products ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px !important;
	}
}


/* ============================================================
   主页 Hot Products / New Products 板块：手机端一排 2 个 (2026-07-12)
   这两个板块是 Elementor 网格容器(e-grid)：Hot=455d379, New=2c15821。
   Elementor 手机端把列数变量设成 repeat(1,1fr) → 一排 1 个，这里改回 2 个。
   ★ 作用域只锁定这两个容器 id，与标题文字无关 —— 以后把
     "Hot Products"/"New Products" 改成任何别的标题，布局都照常美观。
   ============================================================ */
@media (max-width: 767px) {
	.elementor-element-455d379.e-grid,
	.elementor-element-2c15821.e-grid {
		--e-con-grid-template-columns: repeat(2, 1fr) !important;
		/* 行高交给内容自适应，避免固定行数把 2 列卡片拉伸变形 */
		--e-con-grid-template-rows: unset !important;
		--e-con-grid-auto-rows: auto !important;
	}
	/* 卡片之间留点间距，2 列更透气 */
	.elementor-element-455d379.e-grid,
	.elementor-element-2c15821.e-grid {
		--gap: 14px !important;
		--row-gap: 14px !important;
		--column-gap: 14px !important;
	}
}


/* ============================================================
   修复移动端横向溢出(页面可左右划、右侧露白) (2026-07-12)
   真凶：主页标题组件 690dada1 被 Elementor 误设 max-width:2216% + 行内宽，
   在手机上被撑到约 7978px，使整页文档宽 7993px 远超 390 视口。
   ① 把该标题约束回视口内并正常换行(不丢内容)
   ============================================================ */
@media (max-width: 1024px) {
	.elementor-element-690dada1,
	.elementor-element-690dada1 > .elementor-widget-container,
	.elementor-element-690dada1 .elementor-heading-title {
		max-width: 100% !important;
		width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* ② 兜底：手机/平板禁止横向滚动，杜绝任何残留元素让页面左右滑动。
   (本站已禁用 sticky 头部，overflow-x:hidden 不会有副作用) */
@media (max-width: 1024px) {
	html, body {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}
}

/* ── 页脚字阶(全站生效:页脚在每个页面都出现,只改首页会两边不一致)
   原先 widget 标题 22px / 菜单 16px / 联系信息 20px —— 在页脚这种次要区域偏大,
   收到 15 / 14 / 14,并让 widget 标题靠字重和字距拉开层次而不是靠字号。 */
footer.site-footer .widget-title{
	font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	color:#fff;margin-bottom:14px}
footer.site-footer a.menu-link,
footer.site-footer li.menu-item{font-size:14px;line-height:1.9}
/* WordPress 区块的字号预设(.has-medium-font-size 等)带 !important,这里必须同级压过去 */
footer.site-footer p,
footer.site-footer p.has-medium-font-size,
footer.site-footer p.has-text-align-left{font-size:14px!important;line-height:1.75}
footer.site-footer a.menu-link{transition:color .15s ease}
footer.site-footer a.menu-link:hover{color:#ff6a2b}

/* ── 页脚深色化的文字颜色(全站)
   背景本身改在 Astra 设置(hb-footer-bg-obj-responsive / hbb-footer-bg-obj-responsive):
   rgba(244,244,244,0.7) 半透明浅灰 -> 不透明 #0b1a2b。原先页脚和正文区几乎分不开,
   不像一个收尾区块;而且半透明背景的实际颜色取决于背后是什么,以后换底色就会漂移。
   #0b1a2b 不是新颜色 —— 它本来就是站内正文墨色(hero 的 --ink,上面 widget 标题原本
   也用它),只是从前景挪到了背景,调色板没有变大。
   链接原先是 #046bd2,站内第三种蓝(顶栏 #004d9e / hero #14448c),对比度 4.73 是全页
   最低。深底上改为白色系,hover 沿用上面已定义的橙色,第三种蓝就此从页脚消失。 */
footer.site-footer strong{color:#fff}
footer.site-footer p,
footer.site-footer p.has-medium-font-size,
footer.site-footer p.has-text-align-left{color:rgba(255,255,255,.78)}
footer.site-footer a.menu-link,
footer.site-footer li.menu-item a{color:rgba(255,255,255,.86)}
/* 版权栏与主页脚同底,文字再降一档,让它退到次要层级 */
footer.site-footer .site-below-footer-wrap,
footer.site-footer .site-below-footer-wrap p,
footer.site-footer .ast-footer-copyright,
footer.site-footer .ast-footer-copyright *{color:rgba(255,255,255,.62)}
/* 两段之间的分隔线原本是浅色描边,深底上要反过来用低透明度白 */
footer.site-footer .site-below-footer-wrap{border-top:1px solid rgba(255,255,255,.12)}

/* ── 页脚左右内边距(全站)
   页脚栅格是 max-width:1200px + margin:0 auto,靠自动外边距居中。视口宽于 1200px 时
   两侧自然留白(1440 视口 = 120px),但视口 ≤1200px 时自动外边距归零,而容器本身没有
   任何 padding —— 于是平板和手机上文字直接贴屏幕边缘。这不是只在手机断点出问题,
   是所有 ≤1200px 的视口都贴边,包括窄窗口的笔记本。
   只在 ≤1200px 补内边距,宽屏维持原样,不改动既有居中效果。 */
@media (max-width:1200px){
	footer.site-footer .ast-builder-grid-row-container-inner{
		padding-left:20px;
		padding-right:20px;
	}
}

/* ── 给询盘悬浮徽标让位(仅 ≤480px)
   #swkInquiryBadge 是 position:fixed,在 ≤480px 下是 46px 高、距视口底 18px,
   也就是永远占据视口底部 18–64px 这条带。页面滚到最底时,版权栏正好落在这条带里
   (版权文字底边距视口底仅 23px)。徽标在左、版权文字居中,并没有盖住字,但两者
   贴得很近(间距 33px),徽标像是压在版权栏上。
   补 52px 底部内边距把版权文字抬到这条带之上,徽标就浮在下方的空白处。
   数值 = 徽标高 46 + 距底 18 - 版权原有底边距 23 + 余量 11。 */
@media (max-width:480px){
	footer.site-footer .site-below-footer-wrap{
		padding-bottom:52px;
	}
}

/* ── 字体家族统一(全站)
   页面原先混用 10 种字体:Braah One / Fira Mono / Fanwood Text / Times New Roman /
   Bellefair / Tahoma / Georgia / Figtree / Alata / -apple-system —— 等于在 Elementor
   里给几乎每个组件单独挑了一款字体,这才是"看着不统一"的根源,不是字号。
   统一到 Figtree:它是这些自托管字体里唯一带完整字重的(300~900 + 斜体,28 个字面);
   其余 6 款都只有 400 单字重,所有加粗标题其实是浏览器伪粗体(faux bold),
   笔画被机械加厚,这正是它们显得糙的原因。
   副作用是好的:没人再引用那 6 款,浏览器就不会再下载它们。
   只覆盖文字元素,不碰 i / eicon- / fa- 这些图标字体。 */
:root{
	--swk-font:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, p, li, a, blockquote, label, td, th, dt, dd, figcaption,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor div,
.elementor-widget-text-editor span,
.elementor-image-box-title,
.elementor-image-box-description,
.elementor-icon-box-title,
.elementor-icon-box-description,
.elementor-flip-box__layer__title,
.elementor-flip-box__layer__description,
.elementor-button, .elementor-button-text,
.widget-title, .menu-link,
.woocommerce-loop-product__title, .product_title, .price, .woocommerce-Price-amount{
	font-family:var(--swk-font)!important;
}
/* 嵌套元素也要覆盖:065fbfc 的标题里有个 <span> 自带 Braah One,
   banner 副标题自带 Times New Roman */
.elementor-heading-title *,
.elementor-widget-container p,
.elementor-widget-container span,
.elementor-widget-container b,
.elementor-widget-container strong,
.elementor-widget-container em{
	font-family:var(--swk-font)!important;
}
/* 不为图标字体写豁免规则:上面的选择器从不直接命中 i / eicon- / fa- / .star-rating,
   而图标字体是设在元素自身上的,优先级本就高于继承。写 revert 反而会把它们
   回退成继承父级字体,把商品页的 WooCommerce 星级图标弄坏。 */