/* XCellParts — Mobile / tablet responsive layer
 * Breakpoints: 1024 (tablet), 782 (WP admin bar), 480 (phone)
 * Works with Elementor flex containers + xh-* header classes.
 */

/* ---- Header V2 main bar ---- */
@media (max-width: 1024px) {
	.xh-main > .e-con-inner,
	.xh-main > .elementor-element.e-con > .e-con-inner {
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 10px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	.xh-burger,
	.xcell-header-burger {
		order: 0;
	}
	.xh-logo-wrap {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}
	.xh-actions {
		order: 2;
		margin-left: auto;
	}
	.xh-search-slot,
	.xh-search-wrap {
		order: 3;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.xh-search-wrap .xh-search,
	.xcell-header-search {
		width: 100%;
	}
	.xcell-header-cart__label {
		display: none;
	}
	.xh-util .e-con-inner,
	.xh-utilbar .e-con-inner {
		flex-wrap: wrap !important;
		height: auto !important;
		min-height: 38px;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		gap: 8px !important;
	}
	.xh-util-right {
		flex-wrap: wrap;
	}
}

@media (max-width: 782px) {
	.xh-ship .elementor-widget-container {
		font-size: 11px;
		padding: 4px 10px;
	}
	.xh-contact .elementor-button {
		padding: 6px 12px !important;
		font-size: 11px !important;
	}
	.xh-nav {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.xcell-mm--plp .xcell-mm__bar {
		border-radius: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {
	.xh-logo .wm {
		font-size: 18px;
	}
	.xh-logo .mark {
		width: 24px;
		height: 24px;
	}
	.xcell-header-cart,
	.xh-cart {
		padding: 6px 10px 6px 10px;
		gap: 6px;
	}
	.xcell-header-cart__total {
		font-size: 11px;
		padding: 5px 10px;
	}
	.xcell-header-wish,
	.xh-wish {
		width: 40px;
		height: 40px;
	}
	.xh-search input[type=search] {
		font-size: 14px;
	}
	.xh-util-right .xh-ship {
		display: none;
	}
}

/* ---- Brand hub hero ---- */
@media (max-width: 820px) {
	.xcell-brand-hero > .e-con-inner,
	.xcell-brand-hero .e-con.e-flex > .e-con-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left;
	}
	.xcell-oem-mark .elementor-icon {
		width: 52px !important;
		height: 52px !important;
		line-height: 52px !important;
		font-size: 26px !important;
	}
}

/* ---- Device tiles ---- */
@media (max-width: 640px) {
	.xcell-devtile__circ {
		width: 56px;
		height: 56px;
		font-size: 22px;
	}
	.xcell-devtile__title {
		font-size: 12px;
	}
}

@media (max-width: 380px) {
	.xcell-devtile__link {
		padding: 8px 4px;
	}
}

/* ---- Forms & quick order ---- */
@media (max-width: 640px) {
	.xcell-form {
		max-width: 100%;
	}
	.xcell-qo__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.xcell-qo__toolbar .xcell-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---- Buttons touch targets ---- */
@media (max-width: 782px) {
	.xcell-btn .elementor-button,
	.xcell-btn.elementor-button {
		min-height: 44px;
	}
}

/* ---- Footer ---- */
@media (max-width: 767px) {
	.xcell-footer .e-con.e-grid {
		--e-con-grid-template-columns: 1fr !important;
	}
}

/* ---- Tables ---- */
@media (max-width: 640px) {
	.xcell-table > .e-con-inner {
		display: block !important;
	}
	.xcell-table .elementor-element {
		display: block;
		width: 100% !important;
	}
}