/* ==========================================================================
   Chusoon Mobile Responsive — 手机 / 平板端响应式适配
   (Electro Child · 附属于 chusoon.css 之后加载，版本随需递增)
   ========================================================================== */

/* ==========================================================================
   1) ≤1199.98 平板 & 手机：手持顶栏白底化（原 Electro 深蓝底与白底 LOGO 冲突）
      —— 手持 header 在 <1200(hidden-xl-up) 范围内显示，须整段覆盖
   ========================================================================== */
@media (max-width: 1199.98px) {

	/* 手持 header 容器：白底 + 细边框 + 轻阴影，与桌面 masthead 统一 */
	.site-header .handheld-header-v2,
	.site-header .handheld-header-bar {
		background-color: #ffffff !important;
		border-bottom: 1px solid #e7ecf6;
		box-shadow: 0 2px 12px rgba(14, 37, 92, .06);
	}

	/* 汉堡 / 关闭按钮图标：深蓝 */
	.handheld-header-v2 .off-canvas-navbar-toggle-buttons .navbar-toggler,
	.handheld-header-v2 .off-canvas-navbar-toggle-buttons button,
	.handheld-header-v2 .navbar-toggler i {
		color: #1e3a5f !important;
		background: transparent;
	}

	/* 右侧图标：搜索为深蓝，询盘按钮仍为橙色（my-account 类已定制） */
	.handheld-header-v2 .handheld-header-links li:not(.my-account) a,
	.handheld-header-v2 .handheld-header-links li:not(.my-account) a i {
		color: #1e3a5f !important;
	}
	.handheld-header-v2 .handheld-header-links li.my-account a {
		background: #f68b1e !important;
	}
	.handheld-header-v2 .handheld-header-links li.my-account a:hover {
		background: #dd7a13 !important;
	}

	/* 手持搜索展开层：白底深字（原深色主题文字不可见） */
	.handheld-header-v2 .site-search,
	.handheld-header-bar .site-search {
		background: #ffffff;
		border: 0;
		border-bottom: 1px solid #e7ecf6;
		box-shadow: 0 12px 24px rgba(14, 37, 92, .10);
	}
	.handheld-header-v2 .site-search input,
	.handheld-header-v2 .site-search select,
	.handheld-header-v2 .site-search button {
		color: #333e48;
		background-color: #f2f4f8;
	}
	.handheld-header-v2 .site-search button,
	.handheld-header-v2 .site-search .btn,
	.handheld-header-v2 .site-search .search-submit {
		color: #1e3a5f !important;
		background-color: transparent;
	}

	/* 手持 LOGO：白底时恢复清晰比例 */
	.handheld-header-v2 .header-logo .cs-handheld-logo-img {
		height: 42px;
		width: auto;
		max-width: 200px;
	}
}

/* ==========================================================================
   2) ≤991.98 平板 & 手机：完整页脚替换精简页脚（信息缺失 → 商务完整）
   ========================================================================== */
@media (max-width: 991.98px) {

	.site-footer .desktop-footer {
		display: block !important;
	}
	.site-footer .handheld-footer {
		display: none !important;
	}

	/* 页脚容器内边距 */
	.site-footer .desktop-footer {
		padding: 3rem 1rem 0;
	}

	/* 顶部 widgets：手机单列，平板(≥576)两列；去掉桌面大留白 */
	.site-footer .footer-widgets {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2.25rem;
		margin: 0;
	}
	.site-footer .footer-widgets > .widget-column {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
	}
	@media (min-width: 576px) and (max-width: 991.98px) {
		.site-footer .footer-widgets {
			grid-template-columns: 1fr 1fr;
		}
	}

	/* widget 标题与正文：移动友好字号 */
	.site-footer .footer-widgets .widget-title {
		font-size: 15px;
		letter-spacing: .5px;
		margin-bottom: .9rem;
	}
	.site-footer .footer-widgets .widget {
		margin-bottom: 0;
	}
	.site-footer .footer-widgets .widget ul {
		font-size: 13.5px;
	}

	/* 品牌简介列 */
	.site-footer .footer-logo {
		font-size: 18px;
		letter-spacing: 1px;
	}

	/* newsletter / bottom widgets / 版权区：容器贴边重排 */
	.site-footer .footer-newsletter .container,
	.site-footer .footer-bottom-widgets .container,
	.site-footer .copyright-bar .container {
		padding-left: 0;
		padding-right: 0;
	}
	.site-footer .footer-newsletter,
	.site-footer .footer-bottom-widgets {
		margin-top: 2.5rem;
		padding: 2rem 0;
	}
	.site-footer .copyright-bar {
		padding: 1.2rem 0;
	}

	/* 消除页脚内 Bootstrap row 负边距导致的横向溢出 */
	.site-footer .footer-newsletter-inner,
	.site-footer .footer-bottom-widgets-inner {
		margin-left: 0;
		margin-right: 0;
	}
	.site-footer .footer-newsletter-inner > [class*="col"],
	.site-footer .footer-bottom-widgets-inner > [class*="col"],
	.site-footer .footer-contact,
	.site-footer .footer-bottom-widgets-menu {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	/* 页脚联系方式（logo / call us）单列 */
	.site-footer .footer-contact {
		margin-top: .5rem;
	}
}

/* ==========================================================================
   3) ≤1199.98：侧滑菜单（handheld）字体与节奏优化
   ========================================================================== */
@media (max-width: 1199.98px) {
	.off-canvas-navigation {
		max-width: 86vw;
	}
	.off-canvas-navigation ul.menu > li.menu-item {
		border-bottom: 1px solid #eef1f8;
	}
	.off-canvas-navigation ul.menu > li.menu-item > a {
		font-size: 15px;
		font-weight: 600;
		padding-top: 1rem;
		padding-bottom: 1rem;
		color: #1e3a5f;
	}
	.off-canvas-navigation ul.menu li.menu-item a .menu-label {
		font-size: 13px;
		color: #5b6b8c;
	}
}

/* ==========================================================================
   4) ≤767.98 手机：首页 Hero 压缩、对齐、按钮横排
   ========================================================================== */
@media (max-width: 767.98px) {

	/* 缩短 Hero，避免占满一屏以上 */
	.cs-hero-inner {
		min-height: 0;
		gap: 1.4rem;
		padding: 2rem .25rem 2.6rem;
	}
	.cs-hero-slide {
		min-height: 0;
	}

	/* eyebrow → 标题 → 描述 */
	.cs-hero-slide .cs-hero-eyebrow {
		font-size: 12px;
		letter-spacing: 2px;
		margin-bottom: .85rem;
	}
	.cs-hero-slide .cs-hero-title {
		font-size: 28px;
		line-height: 1.18;
		margin-bottom: .95rem;
	}
	.cs-hero-slide .cs-hero-desc {
		font-size: 14.5px;
		line-height: 1.65;
		max-width: none;
		margin-bottom: 1.4rem;
	}
	/* 要点列表移动端 */
	.cs-hero-points {
		margin-bottom: 1.2rem;
	}
	.cs-hero-points li {
		font-size: 13.5px;
		padding: .25rem 0 .25rem 1.2rem;
	}

	/* 按钮：两枚并排整宽，避免一长一短 */
	.cs-hero-actions {
		display: flex;
		gap: .6rem;
	}
	.cs-hero-actions .btn {
		flex: 1 1 0;
		font-size: 12.5px;
		letter-spacing: .4px;
		padding: .72rem .4rem;
		white-space: nowrap;
		text-align: center;
		border-radius: 8px;
	}
	.cs-hero-actions .ms-2 {
		margin-left: 0 !important;
	}

	/* slide 1 右侧大图：移动端通栏 */
	.cs-hero-collage-img {
		border-radius: 12px;
		max-height: 220px;
	}
	.cs-hero-collage-img img {
		object-fit: cover;
		object-position: center;
	}
	/* slide 1 产品小卡（备用） */
	.cs-hero-collage {
		gap: .65rem;
	}
	.cs-mini-card {
		gap: .8rem;
		padding: .55rem .7rem;
		border-radius: 12px;
	}
	.cs-mini-img img {
		width: 60px;
		height: 60px;
		border-radius: 9px;
	}
	.cs-mini-title {
		font-size: 13px;
	}
	.cs-card-price,
	.cs-card-quote {
		font-size: 12.5px;
	}

	/* slide 2 统计卡：紧凑 */
	.cs-hero-stats {
		gap: .7rem;
	}
	.cs-stat {
		padding: .85rem 1.1rem;
		border-radius: 12px;
	}
	.cs-stat strong {
		font-size: 26px;
	}
	.cs-stat span {
		font-size: 13px;
	}

	/* 指示点 */
	.cs-hero-dots {
		bottom: 8px;
		gap: .45rem;
	}
	.cs-hero-dots button {
		width: 8px;
		height: 8px;
	}
}

/* ==========================================================================
   5) ≤767.98 手机：首页分类区（Brands & Categories）→ 2 列扁平图标磁贴
      —— 原 Bootstrap 栅格在 <768 落为单列图+5 子项(约2500px)，此覆盖为
         短而整齐的磁贴：顶部橙色色标 + 分类名，整卡可点
   ========================================================================== */
@media (max-width: 767.98px) {

	.brand-with-category {
		margin-bottom: 2.2rem;
	}
	.brand-with-category .categories {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin: 0;
	}
	.brand-with-category .categories > .col {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		background: #f7f9fc;
		border: 1px solid #e7ecf6 !important;
		border-radius: 14px;
		padding: 1.15rem .8rem;
		min-height: 92px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
	/* 大横幅图在窄列内不美观，隐藏 */
	.brand-with-category .categories > .col > img {
		display: none !important;
	}
	.brand-with-category .categories > .col > div.px-6.py-4 {
		padding: 0 !important;
		border: 0 !important;
		width: 100%;
	}
	/* 右侧箭头按钮隐藏（整卡可点，不叠加视觉噪音） */
	.brand-with-category .categories .view-all {
		display: none;
	}
	/* 分类名：居中，橙色短线做视觉锚点 */
	.brand-with-category .categories h6 {
		font-size: 13.5px;
		font-weight: 700;
		line-height: 1.35;
		margin: 0 !important;
		padding: 0 !important;
		color: #1e3a5f;
		width: 100%;
	}
	.brand-with-category .categories h6::before {
		content: "";
		display: block;
		width: 34px;
		height: 4px;
		border-radius: 3px;
		background: #f68b1e;
		margin: 0 auto .65rem;
	}
	/* 子分类列表收起，入口信息统一放进卡片点击 */
	.brand-with-category .categories ul {
		display: none !important;
	}
}

/* ==========================================================================
   6) ≤767.98 手机：首页其他区块垂直节奏与版心
   ========================================================================== */
@media (max-width: 767.98px) {

	body,
	.site-content {
		overflow-x: hidden;
	}

	/* 区块统一下边距 */
	.banner-with-products-carousel {
		margin-bottom: 2.4rem;
	}
	.home-two-banners {
		margin-bottom: 2.4rem;
	}
	section.section-products-carousel {
		margin-bottom: 2.6rem;
	}

	/* OUTLET 深色横幅：移动端紧凑左右结构 */
	.banner-with-products-carousel .banner .banner-text {
		padding: 2.2rem 1.2rem 1rem;
	}
	.banner-with-products-carousel .banner h1 {
		font-size: 26px;
		letter-spacing: .5px;
	}
	.banner-with-products-carousel .banner .banner-sub-title {
		font-size: 12.5px;
	}
	.banner-with-products-carousel .banner .btn {
		font-size: 12.5px;
		padding: .6rem 1.3rem;
	}

	/* 区块标题对齐 */
	.section-products-carousel .section-header {
		margin-bottom: 1rem;
	}
	.section-products-carousel .section-header .section-title {
		font-size: 20px;
	}
	.section-products-carousel .section-header .btn {
		font-size: 12.5px;
	}

	/* 分类磁贴（bwc 内）与 banner 图圆角统一下 */
	.home-two-banners .banners > .banner img {
		border-radius: 12px;
	}
}

/* ==========================================================================
   7) ≤575.98 小屏手机：进一步收边
   ========================================================================== */
@media (max-width: 575.98px) {

	.cs-hero-actions .btn {
		font-size: 12px;
	}
	.brand-with-category .categories h6 {
		font-size: 13.5px;
	}
	.brand-with-category .categories ul li a,
	.brand-with-category .categories ul li:last-child a {
		font-size: 12px;
	}

	/* 页脚更窄时也两列分类图标 */
	.cs-footer-cats {
		grid-template-columns: repeat(2, 1fr);
	}
	.site-footer .cs-footer-cat {
		padding: .65rem .7rem;
	}
}

/* ==========================================================================
   8) ≤767.98 手机：产品列表 / 产品详情细节
   ========================================================================== */
@media (max-width: 767.98px) {

	/* 产品卡：字号紧凑、按钮通栏圆角 */
	ul.products li.product {
		border-radius: 12px;
		overflow: hidden;
	}
	ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h3 {
		font-size: 13px;
		line-height: 1.4;
	}
	ul.products li.product .button,
	ul.products li.product .add-to-cart-wrap .button,
	ul.products li.product a.button {
		display: block;
		width: 100%;
		font-size: 11.5px;
		letter-spacing: .2px;
		padding: .62rem .3rem;
		text-align: center;
		border-radius: 8px;
		white-space: normal;
	}
	ul.products li.product .product-content-wrapper,
	ul.products li.product .product-inner {
		padding: .9rem .85rem 1rem;
	}

	/* 商品分类条幅（toolbar）在手机上的字号 */
	.woocommerce-products-header,
	.page-header {
		margin-bottom: 1rem;
	}
	.woocommerce-products-header .woocommerce-products-header__title,
	.page-header .page-title {
		font-size: 24px;
	}

	/* 排序 / 结果数工具栏 */
	.woocommerce-toolbar,
	.products + .row .woocommerce-result-count,
	.products + .row .woocommerce-ordering {
		font-size: 12.5px;
	}
	.woocommerce-ordering select {
		font-size: 12.5px;
	}
}

/* ==========================================================================
   9) 产品详情页：询盘按钮移动端全宽大按钮，视觉聚焦
   ========================================================================== */
@media (max-width: 767.98px) {

	.single-product div.summary,
	.single-product .entry-summary {
		padding-left: .25rem;
		padding-right: .25rem;
	}
	.single-product .product-actions-wrapper {
		padding: 0;
		margin: .4rem 0 .8rem;
	}
	.single-product .cs-product-quote {
		width: 100%;
		box-sizing: border-box;
		margin: 0;
	}
	.single-product h1.product_title,
	.single-product .entry-title {
		font-size: 22px;
		line-height: 1.3;
	}
	.single-product .breadcrumb,
	.single-product nav.woocommerce-breadcrumb {
		font-size: 12px;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: .4rem;
	}
}