/* =====================================================
   Mobile Refinements & Fluid Heading Typography — Tick Optic
   Loads LAST in the cascade (after 01-14 + stable.css) so these
   rules reliably win regardless of selector specificity elsewhere.
   ===================================================== */

/* ---------------------------------------------------------------
 * 1) Fluid typography — MAIN HEADINGS ONLY (hero + section titles).
 * Body text, buttons and form fields stay fixed-size (section 2).
 * Ranges below preserve each selector's existing desktop max and
 * mobile min (as previously set in 05-hero.css / 08-benefits.css /
 * 13-homepage.css / 09-responsive.css) and interpolate between
 * 360px and 1440px viewports so nothing jumps at a breakpoint.
 * ------------------------------------------------------------- */
.tick-hero__title {
	font-size: clamp(27px, 1.76vw + 20.7px, 46px) !important;
}

.tick-section-title,
.tick-benefits .tick-section-title {
	font-size: clamp(20px, 0.56vw + 18px, 26px) !important;
}

.tick-promo-text h2 {
	font-size: clamp(22px, 0.74vw + 19.3px, 30px) !important;
}

.tick-about-hero h1,
.tick-contact-header h1,
.tick-vto-header h1,
.tick-about h1 {
	font-size: clamp(25px, 0.83vw + 22px, 34px) !important;
}

/* ---------------------------------------------------------------
 * 2) Mobile fixed sizing — readable, natural, not "shrunk desktop".
 * ------------------------------------------------------------- */
@media (max-width: 768px) {

	/* Body copy: 16px minimum everywhere, per client requirement. */
	body,
	p,
	li,
	td,
	th,
	label,
	input,
	textarea,
	select,
	.woocommerce-Price-amount,
	.woocommerce-checkout table.shop_table,
	.woocommerce-cart table.cart td,
	.tick-about,
	.tick-contact-page,
	.woocommerce-account .woocommerce-MyAccount-content {
		font-size: 16px !important;
		line-height: 1.75;
	}

	/* Menus, nav links, buttons, CTAs: readable, not tiny. */
	.tick-menu a,
	.tick-header-actions a,
	.tick-mobile-drawer nav > a,
	.tick-mobile-accordion-head > a,
	.tick-mobile-submenu a,
	.button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce #respond input#submit,
	.single_add_to_cart_button,
	.tick-hero__button,
	.tick-promo-btn,
	.tick-view-all {
		font-size: 15px !important;
	}

	/* Secondary/meta text: still legible, never below 13px. */
	.tick-benefit-item p,
	.tick-blog-date,
	.tick-blog-card p,
	.woocommerce-account table.shop_table_responsive tr,
	.site-footer,
	.tick-footer,
	.tick-footer * {
		font-size: 14px !important;
	}

	/* Touch targets: real tap area, not decorative padding. */
	a.button,
	button,
	.woocommerce a.button,
	.woocommerce button.button,
	.tick-header-actions a,
	.tick-mobile-menu-toggle,
	.tick-account-mobile-nav select,
	.quantity input,
	.woocommerce-cart table.cart td.actions .coupon .input-text,
	.woocommerce .woocommerce-ordering select {
		min-height: 44px;
		min-width: 44px;
	}
	.tick-header-actions a {
		width: 40px !important;
		height: 40px !important;
	}

	/* Header / mobile menu breathing room. */
	.tick-header-inner {
		padding-block: 14px;
	}
	.tick-mobile-drawer {
		padding: 22px 20px;
	}
	.tick-mobile-drawer nav > a,
	.tick-mobile-accordion-head {
		padding-block: 13px;
	}

	/* Product grid: never let cards touch; keep 2 columns down to
	   very narrow phones (360-380 range handled by 09-responsive.css). */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: 18px 14px !important;
	}
	.woocommerce ul.products li.product {
		padding-bottom: 14px;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px !important;
		line-height: 1.5;
	}
	.woocommerce ul.products li.product .price {
		font-size: 16px !important;
	}

	/* Footer: enough breathing room, not compressed. */
	.site-footer,
	.tick-footer {
		padding-block: 34px;
	}
	.tick-footer .footer-col {
		margin-bottom: 20px;
	}

	/* My Account / Cart / Checkout: comfortable padding, not cramped. */
	.woocommerce-account .woocommerce-MyAccount-content,
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-cart .cart_totals,
	.woocommerce-checkout .woocommerce-checkout-review-order,
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout .woocommerce-shipping-fields {
		padding: 20px 16px !important;
	}
	.woocommerce form .form-row {
		margin-bottom: 14px;
	}
	.woocommerce-account table.shop_table_responsive tr {
		padding: 10px 4px;
	}
}