@media (min-width: 541px) {
	#wrapper .container .row .merc-cats-col {
		flex: 0 0 280px;
		max-width: 280px;
		width: 280px;
	}
	#wrapper .container .row .merc-cats-col + #content-wrapper {
		flex: 1 1 0;
		max-width: none;
		min-width: 260px;
		width: auto;
	}
}

@media (max-width: 767px) {
	.merc-search {
		max-width: none;
		width: 100%;
		margin-right: 0;
	}
}

@media (max-width: 767px) {
	.merc-header {
		display: none;
	}
	/* 手机端顶栏改固定定位：iOS Safari 下 sticky 会被地址栏裁掉一截 */
	#header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
	}
	/* 内容让位：高度由 JS 实测写入 --merc-mheader-h（见 mercarica.js syncMobileHeaderHeight） */
	body {
		padding-top: var(--merc-mheader-h, 108px);
	}
	.merc-header-mobile {
		display: block;
		padding: 10px 15px;
	}
	/* 防 iOS Safari 聚焦输入框时自动放大整页（<16px 会触发） */
	.merc-header-mobile .merc-search-widget input[type="text"],
	.merc-header-mobile .merc-search-widget input[type="search"] {
		font-size: 16px;
	}
	.merc-mobile-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 10px;
	}
	.merc-header-mobile .merc-search {
		max-width: none;
	}
	.merc-mobile-top .merc-logo img {
		max-height: 36px;
	}
	.merc-header-mobile .merc-categories-btn {
		margin: 0;
		padding: 12px 14px;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
	.merc-header-mobile .merc-categories-btn .fa {
		font-size: 18px;
	}
}

/* ============ 商品网格：列数由「容器实际宽度」决定，不按视口百分比 ============
   理由：分类页有 240/300px 侧栏、搜索页没有，用视口百分比算列数必然一边过窄一边过宽。
   auto-fill + minmax(150px,1fr) 让同一套规则在三种上下文（首页区块/分类页分组/列表页）都成立。 */
@media (max-width: 1023px) {
	/* 必须带上 #products 前缀：PS 自带 theme.css 有 `#products .products{display:flex}`（id 权重），
	   只用 .products-grid 会被它压掉 —— 这就是"搜索页/新品列表手机上只有 1 列"的根因 */
	#products .products,
	#products .products-grid,
	.products-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 16px 15px;
	}
	#products .products > *,
	#products .products-grid > *,
	.products-grid > * {
		flex: none;
		width: auto;
		max-width: none;
		min-width: 0;
	}
}

@media (max-width: 767px) {
	.merc-add-capsule {
		min-height: 44px;
		height: 44px;
		line-height: 44px;
	}
	.merc-title {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.merc-related-track,
	.merc-frequent__track {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 16px 15px;
		overflow: visible;
		padding: 4px 0 10px;
		scroll-behavior: auto;
	}
	.merc-related-card,
	.merc-frequent-card {
		flex: none;
		width: auto;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.merc-related-track,
	.merc-frequent__track {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px 14px;
		overflow: visible;
		padding: 4px 0 10px;
		scroll-behavior: auto;
	}
	.merc-related-card,
	.merc-frequent-card {
		flex: none;
		width: auto;
	}
}

@media (max-width: 767px) {
	.merc-related-track,
	.merc-frequent__track {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 6px 15px 14px;
		gap: 12px;
		scroll-behavior: smooth;
	}
	.merc-related-card {
		flex: 0 0 160px;
	}
	.merc-frequent-card {
		flex: 0 0 160px;
		width: 160px;
	}
	/* 隐藏常购横滑箭头（移动端手势滑动） */
	.merc-frequent__arrow {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.merc-opc__row {
		flex-direction: column;
		gap: 20px;
		padding: 16px 12px 40px;
	}
	.merc-opc__side {
		flex: none;
		max-width: none;
		position: static;
		width: 100%;
	}
	.merc-opc__main {
		width: 100%;
	}
}

@media (max-width: 1023px) {
	.merc-acct-col {
		border-bottom: 1px solid #e3e0d8;
		bottom: auto;
		flex-direction: row;
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		position: static;
		padding: 8px 12px;
		top: auto;
		width: 100%;
		z-index: auto;
	}
	.merc-acct-col__user {
		border-bottom: 0;
		flex: 0 0 auto;
		margin-bottom: 0;
		padding: 0 16px 0 0;
	}
	.merc-acct-col__name {
		font-size: 13px;
	}
	.merc-acct-col__email {
		display: none;
	}
	.merc-acct-col__nav {
		flex-direction: row;
		flex: 1;
		overflow-x: auto;
	}
	.merc-acct-col__link {
		border-bottom: 0;
		padding: 10px 14px;
		white-space: nowrap;
	}
	.merc-acct-col__foot {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		gap: 8px;
		padding: 0 8px;
		white-space: nowrap;
	}
	.merc-acct-col__logout {
		font-size: 13px;
	}
	.merc-acct-content,
	.merc-acct-wrap,
	body#my-account #footer .container,
	body#history #footer .container,
	body#order-detail #footer .container,
	body#addresses #footer .container,
	body#address #footer .container,
	body#identity #footer .container,
	body#order-slip #footer .container,
	body#discount #footer .container,
	body#order-follow #footer .container {
		margin-left: 0;
	}
}

@media (max-width: 1023px) {
	.merc-faq__head {
		margin-left: 0;
	}
	.merc-faq__body {
		flex-direction: column;
		gap: 12px;
	}
	.merc-faq__nav {
		flex: none;
		width: 100%;
	}
	.merc-faq__nav-list {
		bottom: auto;
		left: auto;
		position: static;
		top: auto;
		width: 100%;
	}
	.merc-faq__nav-toggle {
		align-items: center;
		background: #f6f4ef;
		border: 1px solid #e3e0d8;
		border-radius: 10px;
		color: var(--merc-chocolat);
		cursor: pointer;
		display: flex;
		font-size: 14px;
		font-weight: 700;
		justify-content: space-between;
		padding: 12px 16px;
		width: 100%;
	}
	.merc-faq__nav-list {
		display: none;
		margin-top: 8px;
		padding: 4px;
	}
	.merc-faq__nav.is-open .merc-faq__nav-list {
		display: block;
	}
	.merc-faq__content {
		margin-left: 0;
	}
}

@media (max-width: 1023px) {
	body#module-mercarica_core-faq #footer .container {
		margin-left: 0;
	}
}

/* ============ 分类页响应式：主区随屏宽自适应,防覆盖侧栏 ============ */
/* 桌面 1024+: 侧栏 300px, 主区 margin-left 300px */
/* 平板 768-1023: 侧栏收窄 240px, 主区让位 240px */
@media (min-width: 768px) and (max-width: 1023px) {
	body.layout-left-column #wrapper .row .merc-cats-col {
		flex: 0 0 240px;
		max-width: 240px;
		width: 240px;
	}
	body.layout-left-column #wrapper .row #content-wrapper {
		margin-left: 240px;
		padding-left: 32px;
	}
	body.layout-left-column #footer .container {
		margin-left: 240px;
	}
}
/* 窄屏 <768: 分类树统一走顶栏汉堡抽屉（全局入口，滚动时也够得着）；页面内不再堆分类条，主区占满全宽 */
@media (max-width: 767px) {
	body.layout-left-column #wrapper .row .merc-cats-col {
		display: none;
	}
	body.layout-left-column #wrapper .row #content-wrapper {
		margin-left: 0;
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
		max-width: 100%;
	}
	body.layout-left-column #footer .container {
		margin-left: 0;
	}
}

/* ============ 移动端分类抽屉（汉堡按钮 → 分类树，对标 Mercadona 手机版）============ */
/* 只在窄屏存在；宽屏彻底不渲染 */
@media (min-width: 768px) {
	.merc-catsd {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.merc-header-mobile .merc-categories-btn__ico {
		display: block;
	}
	.merc-catsd {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2400;
		display: none;
	}
	.merc-catsd.is-open {
		display: block;
	}
	.merc-catsd__mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.42);
		opacity: 0;
		transition: opacity 0.22s ease;
	}
	.merc-catsd.is-open .merc-catsd__mask {
		opacity: 1;
	}
	.merc-catsd__panel {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 86%;
		max-width: 340px;
		display: flex;
		flex-direction: column;
		background: #f6f4ef;
		box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
		transform: translateX(-100%);
		transition: transform 0.24s ease;
	}
	.merc-catsd.is-open .merc-catsd__panel {
		transform: translateX(0);
	}
	.merc-catsd__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid #e3e0d8;
	}
	.merc-catsd__title {
		font-size: 16px;
		font-weight: 800;
		color: #2e2a27;
	}
	.merc-catsd__close {
		background: none;
		border: 0;
		padding: 0 4px;
		font-size: 26px;
		line-height: 1;
		color: #2e2a27;
		cursor: pointer;
	}
	.merc-catsd__body {
		flex: 1;
		overflow-y: auto;
		padding: 6px 16px 34px;
		-webkit-overflow-scrolling: touch;
	}
}