/* PCW mobile layout fixes — loaded by pcw-mobile-layout.php */

html,
body {
	max-width: 100%;
	overflow-x: clip;
}

@media (max-width: 1024px) {
	body.klb-bottom-menu {
		padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	}

	body.klb-bottom-menu .site-footer {
		margin-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	}
}

/* Top utility bar: tighter on small phones */
@media (max-width: 480px) {
	.header-mobile-switcher .header-wrapper {
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}

	.header-mobile-switcher .site-menu.horizontal .menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem 0.75rem;
	}

	.header-mobile-switcher .site-menu.horizontal .menu > li {
		font-size: 0.6875rem;
	}
}

/* Hero slider: stack image + text instead of overlapping */
@media (max-width: 991px) {
	.slider-module .swiper-slide {
		height: auto !important;
	}

	.slider-module .banner {
		display: flex;
		flex-direction: column;
		background: #fff;
		min-height: auto;
	}

	.slider-module .banner .banner-image {
		position: relative !important;
		order: 1;
		width: 100% !important;
		height: auto !important;
	}

	.slider-module .banner .banner-image img {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		max-height: 220px;
		object-fit: contain !important;
	}

	.slider-module .banner .banner-content {
		position: relative !important;
		order: 2;
		width: 100%;
		padding: 1rem 1.125rem 1.25rem !important;
		background: #fff;
	}

	.slider-module .banner .entry-subtitle {
		font-size: 0.75rem !important;
		margin-bottom: 0.35rem;
	}

	.slider-module .banner .entry-title {
		font-size: 1.125rem !important;
		line-height: 1.35;
		margin-bottom: 0.5rem;
	}

	.slider-module .banner .entry-title strong {
		display: inline;
		font-size: inherit !important;
		font-weight: 700;
	}

	.slider-module .banner .entry-description {
		font-size: 0.8125rem !important;
		margin-bottom: 0.75rem;
	}

	.slider-module .banner .entry-description p {
		margin: 0;
	}

	.slider-module .banner .entry-button .btn {
		min-height: 2.5rem;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* Product promo banners: full-width image, no overlay clash */
@media (max-width: 991px) {
	.banner-module .price-banner {
		display: flex;
		flex-direction: column;
		min-height: auto;
		overflow: hidden;
		border-radius: 0.5rem;
	}

	.banner-module .price-banner .banner-image {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
	}

	.banner-module .price-banner .banner-image img {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}

	.banner-module .price-banner .banner-content {
		position: relative !important;
		padding: 0.75rem 1rem;
	}
}

/* Brand logo grid */
@media (max-width: 767px) {
	.site-brands {
		margin-left: -0.375rem;
		margin-right: -0.375rem;
		justify-content: center;
	}

	.site-brands.column-6 .brand-item,
	.site-brands .brand-item {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
		padding: 0.375rem 0.5rem;
	}

	.site-brands .brand-item img {
		max-height: 2.25rem;
		width: auto;
		max-width: 100%;
	}

	.site-brands.opacity .brand-item img {
		opacity: 0.9;
	}
}

@media (max-width: 380px) {
	.site-brands.column-6 .brand-item,
	.site-brands .brand-item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Elementor: stack cramped columns on phones */
@media (max-width: 767px) {
	body.elementor-page .elementor-column.elementor-col-33,
	body.elementor-page .elementor-column.elementor-col-50,
	body.elementor-page .elementor-column.elementor-col-66 {
		width: 100% !important;
	}

	body.elementor-page .elementor-container {
		flex-wrap: wrap !important;
	}

	body.elementor-page .elementor-section.elementor-section-boxed > .elementor-container,
	body.elementor-page .container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	body.elementor-page .elementor-widget-machic-banner-box2,
	body.elementor-page .elementor-widget-machic-banner-box3 {
		margin-bottom: 0.75rem;
	}
}

/* Elementor flex containers (v4+) */
@media (max-width: 767px) {
	body.elementor-page .e-con.e-flex > .e-con-inner {
		flex-wrap: wrap !important;
	}

	body.elementor-page .e-con .e-con.e-flex {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Bottom bar: search moved to header icon */
@media (max-width: 1024px) {
	.mobile-bottom-menu .mobile-menu ul li a.search {
		display: none;
	}
}

/* Product grids on mobile */
@media (max-width: 767px) {
	.products .product .product-title {
		font-size: 0.875rem;
		line-height: 1.35;
	}

	.products .product .thumbnail-wrapper img {
		width: 100%;
		height: auto;
	}
}