/**
 * G batch mobile chrome — WEB-CHECKLIST G1/G2 + G 亲验 R1 (2026-10-08).
 *
 * CONTRACT:
 *   - Loaded after carmela-widgets.css (deps chain) with filemtime version.
 *   - Scope: ≤991px chrome (compact header, tab bar, PDP ATC bar, legal
 *     footer strip) + all-width overflow fuses. Desktop ≥992 must remain
 *     pixel-identical to pre-G state.
 *   - Markup sources: header.php (existing), carmela-mobile.php (tab bar,
 *     ATC bar, footer strip). JS: resource/js/carmela-mobile.js.
 *   - Palette: near-black #1a1a1a / text #444 / marigold #efb33c.
 *   - R1: nav drawer styles RETIRED (drawer markup no longer renders);
 *     mobile header = logo + search + cart only.
 */

/* =========================================================
 * 1. Overflow fuses (all widths)
 * ========================================================= */

/* G2: kill residual horizontal scroll at the root. `clip` (not `hidden`)
 * keeps position:sticky working and creates no scroll container. */
html {
	overflow-x: clip;
}

/* G2 root fix: the cart drawer's closed resting transform (translateX to its
 * own offscreen width) contributed scrollable overflow on pages where its
 * width formula left a >0 px overhang (home +4, checkout 375 +95 / 414 +56).
 * Closed ⇒ invisible to scrolling AND to hit-testing/AT. */
.cqw-drawer:not( .is-open ),
.cqw-drawer-overlay:not( .is-open ) {
	display: none;
}

/* G2 (all-width): the category-grid carousel's -4px side bleed overshoots
 * the viewport on wide screens (slick container 1929 > 1921 at 1921vw,
 * scrollable +4). Retract the bleed ≥992 — the inter-card gutter comes from
 * .category-grid-item padding and is untouched. */
@media (min-width: 992px) {
	.category-grid-carousel {
		margin-left: 0;
		margin-right: 0;
	}
}

/* =========================================================
 * 2. Compact header (≤991) — G1 + R1-6
 * ---------------------------------------------------------
 * R1: hamburger and account icon retired — one row = logo center,
 * search + cart right. Navigation = bottom tab bar + category page.
 * ========================================================= */
@media (max-width: 991px) {

	/* Full chain mirrors style.css:3038's display:block !important sniper
	 * at (0,6,1) — tie specificity, win by later cascade. */
	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 2px;
		min-height: 56px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	header.site-header .bottom-header-left-part,
	header.site-header .bottom-header-middle-part,
	header.site-header .bottom-header-right-part {
		width: auto !important;
		display: flex !important;
		flex: 0 0 auto;
		align-items: center;
		margin-block: 0;
		text-align: inherit;
	}

	/* Equal-weight side columns + natural-width center = mathematically
	 * centered logo regardless of icon count/padding drift. */
	header.site-header .bottom-header-left-part {
		order: 1;
		flex: 1 1 0;
	}

	header.site-header .bottom-header-middle-part {
		order: 2;
		flex: 0 1 auto;
		justify-content: center;
		min-width: 0;
	}

	header.site-header .bottom-header-right-part {
		order: 3;
		flex: 1 1 0;
		justify-content: flex-end;
		gap: 0;
	}

	/* R1-6: hamburger + account icon retired (tab bar owns account; the
	 * left part keeps a strut so the logo stays optically centered). */
	#site-navigation button.menu-toggle,
	header.site-header .user-account {
		display: none !important;
	}

	/* One search entry point (popup) + cart. */
	header.site-header .wishlist-icon,
	header.site-header .bottom-header-right-part > a.wishlist-icon {
		display: none !important;
	}

	header.site-header .bottom-header-right-part > a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 46px;
		min-height: 48px;
		color: #1a1a1a;
	}

	header.site-header .bottom-header-right-part i {
		font-size: 22px;
	}

	header.site-header .site-branding,
	header.site-header .site-logo {
		margin: 0;
		line-height: 1;
	}

	header.site-header .site-logo img {
		max-height: 34px !important;
		width: auto;
		max-width: 52vw;
	}

	/* Theme ships .bottom-header-part padding:25px 10px (style.css 6094) —
	 * that alone is a 50px-tall tax on a 56px row. Same-chain override. */
	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	/* .home variant outranks the plain chain (style.css:6085 ships a
	 * .home-prefixed padding:10px 0 at 0,5,1) — mirror it, win by order. */
	.home header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		border-bottom: 1px solid #eee !important;
	}

	/* style.css:6201 ships min-height:55px on the right part (0,6,1) at
	 * narrow widths — mirror the chain, min-height back to content. */
	header.site-header .header-main-wrapper .bottom-header-outer-wrapper .bottom-header-part .bottom-header-part-wrapper .bottom-header-right-part {
		min-height: 0;
	}

	/* Legacy slide-in panel retired with the drawer. */
	#site-navigation .main-navigation-links {
		display: none !important;
	}
}

/* Scroll lock (shared body class with the quick-view modal). */
body.cqw-no-scroll {
	overflow: hidden;
}

/* =========================================================
 * 3. Bottom tab bar (G-M2) — Taobao-style quick nav
 * ========================================================= */

.cqw-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: none;
	background: #fff;
	border-top: 1px solid #eee;
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.06 );
	padding-bottom: env( safe-area-inset-bottom, 0px );
}

@media (max-width: 991px) {
	.cqw-tabbar {
		display: flex;
	}

	/* Checkout stays focus-mode; PDP swaps to the ATC bar. */
	body.woocommerce-checkout .cqw-tabbar,
	body.single-product .cqw-tabbar {
		display: none;
	}

	/* Breathing room so the fixed bars never cover page content. */
	body:not( .woocommerce-checkout ) {
		padding-bottom: calc( 56px + env( safe-area-inset-bottom, 0px ) );
	}
}

.cqw-tab {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 54px;
	padding: 5px 0 3px;
	position: relative;
	color: #666;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.06 );
}

.cqw-tab:visited {
	color: #666;
}

.cqw-tab i {
	font-size: 22px;
	line-height: 1;
}

.cqw-tab-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2px;
}

.cqw-tab.is-active {
	color: #1a1a1a;
}

.cqw-tab.is-active::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 28px;
	height: 2px;
	background: #efb33c;
}

.cqw-tab-badge {
	position: absolute;
	top: 3px;
	left: calc( 50% + 8px );
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.cqw-tab-badge--zero {
	display: none;
}

/* =========================================================
 * 4. PDP sticky add-to-cart bar (G-M3)
 * ========================================================= */

.cqw-atc-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	display: none;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-top: 1px solid #eee;
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.08 );
	padding: 8px 16px calc( 8px + env( safe-area-inset-bottom, 0px ) );
}

@media (max-width: 991px) {
	body.single-product .cqw-atc-bar {
		display: flex;
	}
}

.cqw-atc-price {
	flex: 0 1 auto;
	max-width: 42vw;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
	overflow: hidden;
}

.cqw-atc-price del {
	font-size: 11px;
	font-weight: 400;
	color: #999;
}

.cqw-atc-price .screen-reader-text {
	display: none;
}

.cqw-atc-price ins,
.cqw-atc-price .woocommerce-Price-amount {
	text-decoration: none;
}

.cqw-atc-btn {
	flex: 1 1 auto;
	min-height: 44px;
	background: #1a1a1a;
	color: #fff;
	border: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.cqw-atc-btn:active {
	background: #000;
}

/* Variation-not-selected pulse when the bar proxies back to the form. */
@keyframes cqwAtcPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 239, 179, 60, 0 ); }
	40% { box-shadow: 0 0 0 5px rgba( 239, 179, 60, 0.55 ); }
}

form.cart.cqw-atc-pulse {
	animation: cqwAtcPulse 1.6s ease;
}

/* =========================================================
 * 5. Mobile legal footer strip (R1-2)
 * ---------------------------------------------------------
 * The marketing footer (widgets + payment badges) hides ≤991; this strip
 * carries legal/about links and the two social channels.
 * ========================================================= */

/* R3: short pages (empty cart etc.) left the strip floating mid-screen —
 * flex column body + margin-top:auto docks it above the tab bar while
 * long pages keep the natural flow position. min-height accounts for the
 * 56px tab-bar body padding so "short" pages don't gain a phantom scroll
 * (checkout: no tab bar, no padding — plain 100dvh). */
@media (max-width: 991px) {
	body {
		display: flex;
		flex-direction: column;
	}

	/* border-box body: min-height includes the tab-bar padding, so a flat
	 * 100dvh docks the strip exactly on the tab bar's top edge. */
	body {
		min-height: 100vh;
		min-height: 100dvh;
	}

	.cqw-mfoot {
		margin-top: auto;
	}
}

.cqw-mfoot {
	display: none;
}

@media (max-width: 991px) {
	footer {
		display: none !important;
	}

	.cqw-mfoot {
		display: block;
		background: #fff;
		border-top: 1px solid #eee;
		padding: 14px 20px 6px;
	}
}

.cqw-mfoot-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cqw-mfoot-links a {
	font-size: 11px;
	color: #666;
	text-decoration: none;
}

.cqw-mfoot-links a:visited,
.cqw-mfoot-links a:hover {
	color: #1a1a1a;
}

.cqw-mfoot-sep {
	display: inline-block;
	width: 1px;
	height: 10px;
	margin: 0 8px;
	background: #ddd;
}

.cqw-mfoot-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #f2f2f2;
}

.cqw-mfoot-copy {
	font-size: 11px;
	color: #999;
}

.cqw-mfoot-social {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cqw-mfoot-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: #444;
}

.cqw-mfoot-social a:visited,
.cqw-mfoot-social a:hover {
	color: #1a1a1a;
}

.cqw-mfoot-social i {
	font-size: 19px;
}

/* =========================================================
 * 6. G2 sweep — tap-target floors (≤991)
 * ---------------------------------------------------------
 * WCAG 2.2 minimum 24×24; house floor 32-44 for primary controls.
 * ========================================================= */
@media (max-width: 991px) {

	/* The dot IS the button background — explicit content-box sizing keeps
	 * the visual at 5-6px while the padding grows the hit area to 24px. */
	.ecommerce-clothing-carousel-navigation .slick-dots li button,
	.hero-banner-carousel .slick-dots li button {
		box-sizing: content-box !important;
		width: 6px !important;
		height: 6px !important;
		padding: 9px !important;
		background-clip: content-box !important;
	}

	/* PLP toolbar grid/list view toggle. */
	.cqw-view-btn {
		min-width: 40px;
		min-height: 32px;
	}

	/* PLP filter trigger + quick-shop ATC rows. */
	.cqw-btn-filter,
	.ps-qs-add-to-cart {
		min-height: 32px;
	}

	/* Quick-shop card close. */
	.ps-qs-close {
		width: 32px;
		height: 32px;
	}

	/* Card hover/quick actions (wishlist / quick view / compare). */
	.ps-action-btn {
		min-width: 36px;
		min-height: 36px;
	}

	/* Search popup submit. */
	.sp-search-submit {
		min-width: 44px;
		min-height: 44px;
	}

	/* PDP variation swatches (labels wrap the radios). */
	.swatchLbl.color {
		min-width: 32px;
		min-height: 32px;
	}

	.swatchLbl.size-pill {
		min-height: 36px;
		min-width: 40px;
	}
}

/* =========================================================
 * 7. R1 page fixes (≤991)
 * ========================================================= */

/* R1-1: hero slides letterboxed a desktop poster (2.1:1) inside a fixed
 * 400px-tall track with object-fit:contain — 225px of dead bars. Let the
 * slide height follow the image ratio: full-width poster, zero letterbox
 * (a future mobile poster simply renders taller). */
@media (max-width: 991px) {
	.hero-banner-section .hero-banner-slide {
		min-height: 0 !important;
		height: auto !important;
	}

	.hero-banner-section .banner-section-wrapper,
	.hero-banner-carousel .slick-slide,
	.hero-banner-carousel .slick-track,
	.hero-banner-carousel .slick-list {
		height: auto;
		min-height: 0;
	}

	.hero-banner-carousel img {
		width: 100%;
		height: auto;
		max-height: 78vh;
		object-fit: contain;
	}
}

/* R1-4: cart item thumbnails collapsed — the stacked item's product-thumbnail
 * cell had width 0 (block restack), starving the inline img to 0×0. */
@media (max-width: 991px) {
	body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
		display: block !important;
		width: 96px !important;
		min-width: 96px;
		padding: 0 0 10px !important;
	}

	body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
		display: block;
		width: 96px !important;
		height: auto;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
}

/* R1-5: account horizontal chip row (cqw-ma-mnav) — scroll affordance fade
 * + the end-state class is toggled by carmela-mobile.js. */
@media (max-width: 991px) {
	.cqw-ma-mnav {
		position: relative;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cqw-ma-mnav::-webkit-scrollbar {
		display: none;
	}

	.cqw-ma-mnav::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 44px;
		background: linear-gradient( to left, #fff 18%, rgba( 255, 255, 255, 0 ) );
		opacity: 1;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	.cqw-ma-mnav.cqw-scroll-end::after {
		opacity: 0;
	}
}

/* R1-7a: PDP main gallery — viewer pinned to a desktop width (225px = 71% of
 * the mobile column, image left-hugged + next slide peeking). Full-width the
 * viewer; slick sizes slides to its container at init. */
@media (max-width: 991px) {
	.product-gallery__viewer,
	.pr_photoes .product-gallery__viewer {
		width: 100% !important;
		max-width: 100%;
	}

	/* R1-7b: sale badge rides the (now full-width) main image, top-left. */
	.pr_photoes .onsale,
	.product-gallery .onsale {
		top: 8px !important;
		left: 8px !important;
		right: auto !important;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 11px;
		z-index: 5;
	}
}


/* =========================================================
 * 8. Category browser page (R1-3 批B) — page-categories.php
 * ========================================================= */

.cqw-catpage {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 24px;
}

.cqw-catpage-head h1 {
	margin: 18px 0 14px;
	font-size: 24px;
	font-weight: 700;
	color: #1a1a1a;
}

.cqw-cat-all {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #1a1a1a;
	color: #fff;
	padding: 16px 18px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.cqw-cat-all:visited,
.cqw-cat-all:hover {
	color: #fff;
}

.cqw-cat-all .ph-arrow-right {
	margin-left: auto;
	font-size: 18px;
}

.cqw-cat-sec {
	margin-top: 26px;
}

.cqw-cat-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid #1a1a1a;
}

.cqw-cat-sec-head h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #1a1a1a;
}

.cqw-cat-sec-count {
	font-size: 11px;
	color: #999;
	white-space: nowrap;
}

.cqw-cat-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	margin-top: 14px;
}

.cqw-cat-card {
	text-decoration: none;
	color: #1a1a1a;
}

.cqw-cat-card:visited,
.cqw-cat-card:hover {
	color: #1a1a1a;
}

.cqw-cat-card-img {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f7f7f7;
	overflow: hidden;
}

.cqw-cat-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cqw-cat-card-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: #ccc;
}

.cqw-cat-card-name {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #1a1a1a;
}

.cqw-cat-card-count {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #999;
}

@media (min-width: 992px) {
	.cqw-catpage {
		padding: 0 40px 40px;
	}

	.cqw-catpage-head h1 {
		font-size: 28px;
		margin-top: 28px;
	}

	.cqw-cat-grid {
		grid-template-columns: repeat( 4, 1fr );
		gap: 20px;
	}
}


/* =========================================================
 * 9. R1-7c: size chart sticky size column (≤991)
 * ---------------------------------------------------------
 * .cqw-size-table__scroll is the horizontal scroller; first-column
 * cells carry .cqw-col-size (carmela-widgets.php renderer). Sticky
 * left + a shadow that appears only once scrolled (class toggled by
 * capture-phase scroll delegation in carmela-mobile.js).
 * ========================================================= */
@media (max-width: 991px) {
	.cqw-size-table__scroll table {
		border-collapse: separate;
		border-spacing: 0;
	}

	.cqw-size-table__scroll .cqw-col-size {
		position: sticky;
		left: 0;
		background: #fff;
		z-index: 2;
	}

	.cqw-size-table__scroll.cqw-scrolled .cqw-col-size {
		box-shadow: 8px 0 14px -8px rgba( 17, 17, 17, 0.35 );
	}
}