/**
 * Mobile Responsive Fixes — Floweriopot
 * Clean, systematic overrides for all breakpoints.
 * Complements main.css media queries.
 *
 * @package Floweriopot
 * @since   2.2.0
 */

/* ========================================================================
   GLOBAL SAFEGUARDS
   ======================================================================== */
html, body {
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
}

img {
	max-width: 100%;
	height: auto;
}

/* ========================================================================
   TABLET (max 1024px)
   ======================================================================== */
@media (max-width: 1024px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ========================================================================
   TABLET & MOBILE (max 768px)
   ======================================================================== */
@media (max-width: 768px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* --- Top bar compact --- */
	.top-bar {
		padding: 6px 0;
		font-size: 0.72rem;
	}

	.top-bar .container {
		flex-direction: column;
		gap: 4px;
	}

	.top-bar__left {
		flex-direction: column;
		gap: 4px;
		width: 100%;
		align-items: center;
	}

	.top-bar__tagline {
		font-size: 0.68rem;
		padding-right: 0;
		border-right: none;
		text-align: center;
		width: 100%;
		padding-bottom: 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.top-bar__item {
		font-size: 0.72rem;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
	}

	.top-bar__item span {
		display: inline;
	}

	/* --- Header compact --- */
	.site-header {
		padding: 8px 0;
	}

	.site-header__inner {
		min-height: 48px;
		gap: 12px;
	}

	/* --- Buttons --- */
	.btn {
		padding: 12px 24px;
		font-size: 0.92rem;
	}

	/* --- Section spacing --- */
	.section-padding {
		padding: 50px 0;
	}

	/* --- Grids — 2 columns on tablet --- */
	.categories-grid,
	.products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* --- Cards --- */
	.category-card,
	.product-card {
		padding: 15px;
	}

	/* --- Footer --- */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	/* --- Forms — prevent iOS zoom --- */
	.contact-form input,
	.contact-form textarea,
	.contact-form select {
		font-size: 16px;
	}

	/* --- Inquiry popup --- */
	.inquiry-popup {
		width: 92%;
		max-width: 92%;
		padding: 15px;
	}

	.inquiry-popup__content {
		padding: 24px 16px;
	}

	/* --- Touch targets (buttons only, not all links) --- */
	button, .btn, .hamburger {
		min-height: 44px;
	}

	/* --- Better tap highlights --- */
	* {
		-webkit-tap-highlight-color: rgba(200, 163, 95, 0.15);
	}

	/* --- Prevent text size adjust --- */
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		scroll-behavior: smooth;
	}

	/* --- Prevent content overflow --- */
	.site-content,
	.container,
	section,
	.row {
		overflow-x: hidden;
	}

	/* --- Responsive tables --- */
	table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Responsive embeds --- */
	iframe,
	embed,
	object {
		max-width: 100%;
	}
}

/* ========================================================================
   MOBILE (max 480px)
   ======================================================================== */
@media (max-width: 480px) {
	.container {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* --- Top bar ultra compact --- */
	.top-bar {
		padding: 5px 0;
	}

	.top-bar__tagline {
		font-size: 0.62rem;
	}

	.top-bar__item {
		font-size: 0.65rem;
	}

	/* --- Logo smaller --- */
	.site-logo img,
	.custom-logo {
		max-height: 42px !important;
		max-width: 140px !important;
	}

	/* --- Header tighter --- */
	.site-header {
		padding: 6px 0;
	}

	.site-header__inner {
		min-height: 42px;
		gap: 8px;
	}

	/* --- Typography --- */
	h1 {
		font-size: 1.65rem;
		line-height: 1.3;
	}

	h2 {
		font-size: 1.4rem;
		line-height: 1.3;
	}

	.section-header h2 {
		font-size: 1.4rem;
	}

	.section-header p {
		font-size: 0.88rem;
	}

	/* --- Grids single column --- */
	.categories-grid,
	.products-grid,
	.stats-grid,
	.cities-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	/* --- Buttons --- */
	.btn {
		padding: 12px 20px;
		font-size: 0.88rem;
	}

	/* --- Section padding --- */
	.section-padding {
		padding: 40px 0;
	}

	/* --- Footer --- */
	.footer-widget {
		margin-bottom: 25px;
	}

	/* --- Products slider single item --- */
	.products-slider-track {
		gap: 10px;
	}

	.products-slide {
		min-width: 100%;
	}

	/* --- Hamburger bigger touch target --- */
	.hamburger {
		width: 42px !important;
		height: 42px !important;
	}

	/* --- Mobile drawer wider --- */
	.site-nav {
		width: 90% !important;
		max-width: 100% !important;
	}
}

/* ========================================================================
   EXTRA SMALL (max 360px)
   ======================================================================== */
@media (max-width: 360px) {
	.container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.site-logo img,
	.custom-logo {
		max-height: 36px !important;
		max-width: 120px !important;
	}

	.top-bar__tagline {
		font-size: 0.58rem;
	}

	h1 {
		font-size: 1.45rem;
	}

	h2 {
		font-size: 1.25rem;
	}

	.section-header h2 {
		font-size: 1.25rem;
	}

	.btn {
		padding: 10px 16px;
		font-size: 0.82rem;
	}
}

/* ========================================================================
   LANDSCAPE MODE
   ======================================================================== */
@media (max-width: 768px) and (orientation: landscape) {
	.site-logo img,
	.custom-logo {
		max-height: 38px !important;
	}

	.site-header {
		padding: 4px 0;
	}

	.site-header__inner {
		min-height: 38px;
	}

	.hero-slider-aspect-wrapper {
		aspect-ratio: 21 / 9;
	}

	.section-padding {
		padding: 35px 0;
	}

	/* Drawer scrollable in landscape */
	.site-nav {
		max-height: 100dvh !important;
		overflow-y: auto !important;
	}
}