/**
 * Mobile UX — Task 13: spacing, typography, touch targets, scroll rhythm.
 * Loads after ui-consistency. No LESS compile. Scope: global mobile/tablet-narrow.
 */

/* -------------------------------------------------------------------------
   Tablet-narrow & mobile: touch-friendly controls (min ~44×44 CSS px)
   ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
	.nav-mobile .toggle-menu {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0 14px !important;
		box-sizing: border-box;
	}

	.header-top-setting {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.header-top-setting > .ion-navicon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		line-height: 1;
		font-size: 28px;
	}

	.top-search .dropdown-toggle .top-search > a,
	.top-search .dropdown-toggle a {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.header-cta {
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 10px 20px !important;
		box-sizing: border-box;
	}

	.hero-cta {
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 12px 28px !important;
		box-sizing: border-box;
	}

	.find-your-door-section .all-doors-btn {
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	.mobile-navigation .nav-menu > li > a {
		min-height: 44px;
		line-height: 44px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box;
	}

	.mobile-navigation .nav-menu li.dropdown .toggle-submenu {
		min-width: 44px;
		min-height: 44px;
		line-height: 44px !important;
		top: 0 !important;
		right: 0 !important;
	}

	/* WooCommerce: основні CTA (не всі дрібні .button у кошику) */
	.woocommerce .single_add_to_cart_button,
	.woocommerce button.button.alt,
	.woocommerce a.button.alt,
	.woocommerce #respond input#submit.alt,
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
	.woocommerce-checkout #place_order,
	.woocommerce button[name="woocommerce_checkout_place_order"] {
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box;
	}

	/* Порядок у шапці: toggle зліва, дії (пошук / кошик / CTA) справа — в одному рядку колонки */
	.header-container .col-search {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 12px;
	}

	.header-container .col-search .nav-menus,
	.header-container .col-search .action {
		float: none !important;
	}

	.header-container .col-search .nav-menus {
		flex: 0 0 auto;
	}

	.header-container .col-search .header-action-inner {
		flex: 0 0 auto;
		flex-wrap: nowrap;
	}

	/* WPBakery flex-рядки: запобігти стисненню колонок (часто .vc_row > .container > .row) */
	.vc_row-flex > .container > .row > .wpb_column,
	.vc_row-flex > .container > .row > .vc_column_container,
	.vc_row-flex > .row > .wpb_column,
	.vc_row-flex > .row > .vc_column_container {
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
   Mobile (phones): vertical rhythm, type scale, safe areas, scroll
   ------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	html,
	body {
		overflow-x: hidden;
	}

	/* Global media safety to prevent horizontal scroll/overflow */
	#content img,
	#content iframe,
	#content video,
	#content table {
		max-width: 100% !important;
	}

	html {
		scroll-padding-top: 88px;
	}

	body {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/* Horizontal padding + notch / home indicator */
	.main-wrapper > #content.site-content {
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
		padding-bottom: max(24px, env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.main-wrapper .container {
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
	}

	/* Footer (layout first): stack columns cleanly on phones */
	#site-footer .footer .footer-top .row > .col-md-6,
	#site-footer .footer .footer-top .row > .col-sm-3.col-md-3 {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	#site-footer .footer .footer-top .row > .col-sm-3.col-md-3 {
		margin-top: 16px;
	}

	#site-footer .footer .footer-top .widget_menu .widget-title {
		margin-bottom: 10px;
	}

	/* Main column: consistent bottom breath before footer */
	#main {
		padding-bottom: 8px;
	}

	/* Readable body copy on small screens */
	#main .entry-content,
	#main .wpb_text_column,
	#main .textwidget,
	#main .about-page-content {
		font-size: 15px !important;
		line-height: 1.65 !important;
	}

	#main .entry-content h2,
	#main .wpb_text_column h2,
	#main .textwidget h2 {
		font-size: 22px !important;
		margin-top: 16px !important;
		margin-bottom: 10px !important;
	}

	#main .entry-content h3,
	#main .wpb_text_column h3,
	#main .textwidget h3 {
		font-size: 17px !important;
	}

	/* Category / archive hero: title scales down slightly */
	.page-banner .page-banner-content .category-title.entry-title {
		font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
		line-height: 1.2 !important;
	}

	/* Forms у контенті / Woo: зручні для дотику (не глобально — щоб не зламати адмін-бар тощо) */
	#main input[type="text"],
	#main input[type="email"],
	#main input[type="tel"],
	#main input[type="search"],
	#main input[type="number"],
	#main input[type="url"],
	#main input[type="password"],
	#main select,
	.woocommerce form .input-text,
	.woocommerce-page form .input-text,
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 select,
	.wpcf7 textarea {
		min-height: 44px;
		box-sizing: border-box;
	}

	#main textarea,
	.wpcf7 textarea {
		min-height: 120px;
	}

	/* Product archive cards: slightly tighter grid gap rhythm */
	.shop-products .product {
		margin-bottom: 20px;
	}

	/* Back-to-top / fixed elements respect safe area if theme uses them */
	#back-top {
		bottom: max(20px, calc(12px + env(safe-area-inset-bottom))) !important;
		right: max(16px, env(safe-area-inset-right)) !important;
	}

	/* ========== WPBakery / тема: поламана ширина колонок на головній ========== */

	/* Ряд з flex (equal height / placement у VC) — на телефоні стовпчиком, повна ширина */
	.vc_row-flex > .container > .row,
	.vc_row-flex > .row {
		display: flex !important;
		flex-flow: column nowrap !important;
		align-items: stretch !important;
	}

	.vc_row-flex > .container > .row > .wpb_column,
	.vc_row-flex > .container > .row > .vc_column_container,
	.vc_row-flex > .row > .wpb_column,
	.vc_row-flex > .row > .vc_column_container {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		min-width: 0 !important;
		float: none !important;
	}

	/* Тема: .block-group лишає колонки по 50% до 992px — на телефоні один стовпчик */
	.block-group .column_container {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/*
	 * Тема (global.less): .banner-top/.banner-middle .wpb_text_column — absolute + width 47%.
	 * Для .banner-middle є скидання лише при max-width 500px; .banner-top на мобільному лишається вузьким.
	 */
	.banner-top .wpb_text_column,
	.banner-middle .wpb_text_column {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
		-webkit-transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Prevent ultra-narrow text columns in banner content */
	.banner-top .wpb_column,
	.banner-middle .wpb_column,
	.banner-top .vc_column_container,
	.banner-middle .vc_column_container {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	.banner-top .wpb_text_column .wpb_wrapper,
	.banner-middle .wpb_text_column .wpb_wrapper,
	.banner-top .wpb_text_column p,
	.banner-middle .wpb_text_column p,
	.banner-top .wpb_text_column h1,
	.banner-top .wpb_text_column h2,
	.banner-middle .wpb_text_column h1,
	.banner-middle .wpb_text_column h2 {
		width: 100% !important;
		max-width: 100% !important;
		word-break: normal !important;
		overflow-wrap: anywhere;
		text-align: left !important;
	}

	/* responsive.less знову робить absolute для .banner-middle.style2 ≤500px */
	.banner-middle.style2 .wpb_text_column {
		position: relative !important;
		transform: none !important;
		-webkit-transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
	}

	/* Секція «Find your door»: лише верхній .row VC (не вкладені сітки товарів) */
	.find-your-door-section > .container > .row,
	.find-your-door-section > .row {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}

	.find-your-door-section > .container > .row > .wpb_column,
	.find-your-door-section > .row > .wpb_column {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
}

/* Very small phones */
@media screen and (max-width: 374px) {
	.header-cta {
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 12px !important;
	}

	#main .entry-content,
	#main .wpb_text_column,
	#main .textwidget {
		font-size: 14px !important;
	}
}