/*
 * Oviokart — Mobile-specific refinements
 *
 * Tailwind handles most responsive layout via md:/lg: prefixes. This file adds
 * the precision tweaks Tailwind classes can't easily express. Selectors are
 * intentionally narrow to avoid colliding with WooCommerce Blocks layouts or
 * unrelated theme components.
 */

/* ============================================================
   GLOBAL — small but important
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

/* Prevent iOS Safari from auto-zooming when a form input is focused.
   Only applies to font-size — explicit !important so any Tailwind
   utility on inputs doesn't lower the size below 16px. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
	font-size: 16px;
}

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

/* ============================================================
   HEADER — better mobile layout (under 768px)
   ============================================================ */
@media (max-width: 768px) {
	header.site-header img { max-height: 36px; width: auto; }
	header.site-header form input[type="search"] {
		height: 40px;
		padding: 8px 36px 8px 12px;
	}
	/* Tighter padding on small screens */
	header.site-header > div { padding-left: 12px; padding-right: 12px; }
}

/* Very small phones (under 380px) — drop the search bar to give room for logo + cart */
@media (max-width: 380px) {
	header.site-header form[role="search"] { display: none; }
}

/* ============================================================
   HERO — height + typography scale on mobile (only — desktop untouched)
   ============================================================ */
@media (max-width: 768px) {
	section[data-oviokart-hero-slider] {
		height: 380px;
		border-radius: 8px;
	}
	section[data-oviokart-hero-slider] h1 {
		font-size: 28px;
		line-height: 32px;
	}
	section[data-oviokart-hero-slider] p {
		font-size: 14px;
		line-height: 20px;
	}
	/* Hide arrows on mobile — swipe is the alternative */
	section[data-oviokart-hero-slider] [data-hero-prev],
	section[data-oviokart-hero-slider] [data-hero-next] {
		display: none;
	}
}

@media (max-width: 480px) {
	section[data-oviokart-hero-slider] { height: 320px; }
	section[data-oviokart-hero-slider] h1 { font-size: 24px; line-height: 28px; }
}

/* ============================================================
   PRODUCT CARDS — tighter spacing on small phones
   ============================================================ */
@media (max-width: 480px) {
	li.product, .product {
		padding: 10px;
	}
	li.product .text-body-md, .product .text-body-md {
		font-size: 13px;
		line-height: 18px;
	}
}

/* ============================================================
   SINGLE PRODUCT — full-width Add to Cart on mobile
   ============================================================ */
@media (max-width: 768px) {
	.single-product form.cart .single_add_to_cart_button {
		min-width: 0 !important;
		width: 100% !important;
	}
}

/* ============================================================
   PRINT — keep print styling clean
   ============================================================ */
@media print {
	section[data-oviokart-hero-slider],
	footer.site-footer,
	.no-print { display: none !important; }
}