/* ============================================================
   AxonTK — Responsive Layer
   ------------------------------------------------------------
   Loaded AFTER theme + WooCommerce CSS so it wins cascade ties.
   Organized largest → smallest breakpoint.

   Breakpoints:
     ≤ 1024px — tablet landscape
     ≤ 768px  — tablet portrait
     ≤ 600px  — large mobile
     ≤ 480px  — mobile
     ≤ 360px  — tiny mobile
   ============================================================ */

/* ============================================================
   CRITICAL RESETS — must come first
   ============================================================ */

/* Universal border-box on our pages so width:100% + padding NEVER overflows.
   This is the root cause of buttons sticking out of cards. */
.axontk-page,
.axontk-page *,
.axontk-page *::before,
.axontk-page *::after { box-sizing: border-box; }

/* ============================================================
   DEFENSIVE CONTAINMENT — locks our cards so theme JS that runs
   AFTER page load can't push content outside the card boundary.
   This is the fix for "looks good on refresh, then breaks".
   `contain: layout` tells the browser to enforce that nothing
   inside leaks out visually, regardless of what JS does.
   ============================================================ */
body.axontk-page .axontk-portfolio-side-card,
body.axontk-page .axontk-pdf-card,
body.axontk-page .axontk-card,
body.axontk-page .axontk-portfolio-card,
body.axontk-page .axontk-product-card,
body.axontk-page .axontk-blog-card,
body.axontk-page .axontk-quote,
body.axontk-page .axontk-step,
body.axontk-page .axontk-value-card,
body.axontk-page .axontk-service-detail,
body.axontk-page .axontk-cta-banner,
body.axontk-page .axontk-cookie-banner {
	overflow: hidden !important;
	contain: layout !important;
	position: relative !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Ultra-high-specificity LOCK on full-width buttons inside cards.
   No matter what classes the theme JS adds, these win. */
body.axontk-page .axontk-portfolio-side-card .axontk-btn,
body.axontk-page .axontk-portfolio-side-card a.axontk-btn,
body.axontk-page .axontk-portfolio-side-card a[class*="axontk-btn"],
body.axontk-page .axontk-portfolio-side-card .axontk-btn-block,
body.axontk-page .axontk-pdf-card .axontk-pdf-download-btn,
body.axontk-page .axontk-pdf-card a.axontk-pdf-download-btn,
body.axontk-page .axontk-pdf-card a[class*="axontk-pdf-download"],
body.axontk-page a.axontk-btn-block,
body.axontk-page button.axontk-btn-block {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	white-space: normal !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	float: none !important;
}

/* Buttons in product actions row */
body.axontk-page .axontk-product-actions .axontk-btn,
body.axontk-page .axontk-product-actions a.axontk-btn,
body.axontk-page .axontk-product-actions a[class*="axontk-btn"] {
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
}

/* Tech chips: don't let any rule make them huge */
body.axontk-page .axontk-tech-chip {
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
	display: inline-block !important;
}

/* Download buttons row inside cards */
body.axontk-page .axontk-portfolio-side-card .axontk-downloads,
body.axontk-page .axontk-portfolio-side-card .axontk-downloads--compact {
	max-width: 100% !important;
}
body.axontk-page .axontk-portfolio-side-card .axontk-download-btn,
body.axontk-page .axontk-portfolio-side-card a.axontk-download-btn {
	max-width: 100% !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}

/* Defend the container itself — must always center + cap at 1200px */
body.axontk-page > section .axontk-container,
body.axontk-page section.axontk-section > .axontk-container,
body.axontk-page main .axontk-container,
body.axontk-page header .axontk-container,
body.axontk-page footer .axontk-container,
body.axontk-page .axontk-container {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Single portfolio grid — sidebar must not extrude */
body.axontk-page .axontk-portfolio-single-grid,
body.axontk-page .axontk-product-single-grid,
body.axontk-page .axontk-two-col {
	max-width: 100% !important;
	box-sizing: border-box !important;
}
body.axontk-page .axontk-portfolio-single-grid > *,
body.axontk-page .axontk-product-single-grid > *,
body.axontk-page .axontk-two-col > * {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* Global: prevent any horizontal scroll on the site */
.axontk-page { overflow-x: hidden; }

/* ============================================================
   Hide Xtra theme's widgets that wp_footer injects globally
   (bottom mobile nav, backtotop, fixed_contact, offcanvas overlays)
   ============================================================ */
.axontk-page .xtra-fixed-mobile-nav,
.axontk-page i.backtotop,
.axontk-page div.fixed_contact,
.axontk-page i.fixed_contact,
.axontk-page #xtra-social-popup,
.axontk-page #xtra_quick_view,
.axontk-page #xtra_wish_compare,
.axontk-page .cz_overlay,
.axontk-page .xtra-close-icon,
.axontk-page .xtra-loader,
.axontk-page .cz_popup,
.axontk-page #site_header { display: none !important; }

/* ============================================================
   Make Xtra's hardcoded popup contact form responsive
   (defined in xtra/functions.php line ~4622, can't edit theme,
   so we restyle it via CSS to fit mobile screens properly)
   ============================================================ */
#axontk-popup-overlay {
	padding: 12px !important;
	box-sizing: border-box;
	align-items: flex-start !important;
	padding-top: 5vh !important;
	overflow-y: auto !important;
}
#axontk-popup-overlay > div {
	padding: 24px 20px !important;
	max-width: 420px !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	max-height: 90vh;
	overflow-y: auto;
}
#axontk-popup-overlay button[onclick="closeAxonPopup()"] {
	top: 8px !important;
	left: 8px !important;
	width: 36px !important;
	height: 36px !important;
	font-size: 22px !important;
	border-radius: 50% !important;
	background: #f3f4f6 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#axontk-popup-overlay h3 { font-size: 19px !important; }
#axontk-popup-overlay p { font-size: 13px !important; }
#axontk-popup-form input,
#axontk-popup-form textarea {
	padding: 11px 14px !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
}
#axontk-popup-form textarea { rows: 2; min-height: 60px; }
#axontk-popup-form button#axontk-submit-btn {
	padding: 12px !important;
	font-size: 15px !important;
}
#axontk-popup-overlay > div > a[href*="wa.me"] {
	padding: 9px 18px !important;
	font-size: 13px !important;
	margin-top: 10px !important;
}

@media (max-width: 480px) {
	#axontk-popup-overlay > div {
		padding: 20px 16px !important;
		max-width: 95% !important;
	}
	#axontk-popup-overlay > div > div[style*="width:60px"] {
		width: 48px !important; height: 48px !important; margin-bottom: 10px !important;
	}
	#axontk-popup-overlay h3 { font-size: 17px !important; margin-bottom: 3px !important; }
	#axontk-popup-overlay p { font-size: 12.5px !important; margin-bottom: 14px !important; }
}

/* Push popup z-index just below cookie banner so cookie consent comes first */
#axontk-popup-overlay { z-index: 9998 !important; }
.axontk-cookie-banner { z-index: 9999 !important; }

/* ============================================================
   Make our cookie banner more compact, especially on mobile
   ============================================================ */
.axontk-cookie-banner {
	padding: 14px 18px !important;
	border-radius: 14px !important;
}
.axontk-cookie-banner h4 { font-size: 14px !important; margin-bottom: 5px !important; }
.axontk-cookie-banner p { font-size: 12.5px !important; line-height: 1.55 !important; margin-bottom: 11px !important; }
.axontk-cookie-banner .axontk-cookie-actions .axontk-btn { padding: 9px 16px !important; font-size: 12.5px !important; }

@media (max-width: 600px) {
	.axontk-cookie-banner {
		left: 10px !important; right: 10px !important; bottom: 10px !important;
		padding: 12px 14px !important;
		max-width: none !important;
	}
	.axontk-cookie-banner h4 { font-size: 13px !important; margin-bottom: 4px !important; }
	.axontk-cookie-banner p { font-size: 11.5px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
	.axontk-cookie-banner .axontk-cookie-actions { flex-direction: row !important; gap: 6px !important; }
	.axontk-cookie-banner .axontk-cookie-actions .axontk-btn { padding: 8px 12px !important; font-size: 12px !important; flex: 1; min-width: 0; }
}

/* ============================================================
   Style legacy <b>label</b>value sections in portfolio content
   as clean cyan-bordered block field labels. wpautop often wraps
   them in <p> so we target both contexts.
   ============================================================ */
.axontk-post-content b,
.axontk-post-content p b {
	display: block;
	color: var(--cyan-600);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .3px;
	text-transform: none;
	margin: 18px 0 4px;
	padding-right: 10px;
	border-right: 3px solid var(--cyan-500);
	line-height: 1.6;
}
.axontk-post-content b:first-child { margin-top: 0; }

/* Inline lightbox image grid in legacy content lays out nicely */
.axontk-post-content > a[data-xtra-lightbox],
.axontk-post-content > p > a[data-xtra-lightbox] { display: inline-block; margin: 6px 4px 6px 0; max-width: 48%; }
.axontk-post-content > a[data-xtra-lightbox] img,
.axontk-post-content > p > a[data-xtra-lightbox] img { border-radius: var(--radius-md); display: block; }
@media (max-width: 600px) {
	.axontk-post-content > a[data-xtra-lightbox],
	.axontk-post-content > p > a[data-xtra-lightbox] { max-width: 100%; }
}

/* Style the legacy "معاينة المشروع" link prettier */
.axontk-post-content > p > a > strong { font-weight: 800; }

/* Buttons NEVER force-nowrap when they are 100%-width (so long labels wrap clean) */
.axontk-portfolio-side-card .axontk-btn,
.axontk-pdf-download-btn,
.axontk-product-actions .axontk-btn,
.axontk-btn-block { white-space: normal; }

/* axontk-btn-block — proper full-width button utility */
.axontk-btn-block {
	display: flex !important;
	width: 100% !important;
	justify-content: center !important;
	align-items: center !important;
	text-align: center;
}

/* Side card CTA wrapper */
.axontk-side-card-cta {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
}

/* PDF card download button — guaranteed full-width inside card */
.axontk-pdf-card a.axontk-pdf-download-btn { width: 100%; box-sizing: border-box; }

/* Media elements should never overflow their container.
   IMPORTANT: do NOT use a universal `*` selector here — it would override
   the explicit max-width on .axontk-container and break the centered layout. */
.axontk-page img,
.axontk-page svg,
.axontk-page video,
.axontk-page iframe,
.axontk-page embed,
.axontk-page object { max-width: 100%; height: auto; }

/* Tables that might overflow on mobile: allow horizontal scroll inside */
.axontk-page table { display: block; overflow-x: auto; max-width: 100%; }

/* Guarantee the container is always centered + capped at 1200px,
   defending against any theme override loaded later. */
.axontk-page .axontk-container {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
	width: 100%;
}

/* Inline grids that didn't collapse — promoted to responsive classes */
.axontk-tech-stack-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	color: var(--ink-700);
	font-size: 14px;
	line-height: 2;
}
.axontk-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 14px;
}

/* ============================================================
   ≤ 1024px — Tablet landscape
   ============================================================ */
@media (max-width: 1024px) {
	.axontk-container { padding: 0 24px; }

	/* 3-col grids → 2-col before fully collapsing */
	.axontk-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.axontk-portfolio-grid,
	.axontk-blog-grid,
	.axontk-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.axontk-team-grid { grid-template-columns: repeat(2, 1fr) !important; }

	/* Stats: smarter wrap */
	.axontk-stats { gap: 24px; }
}

/* ============================================================
   ≤ 900px — Original mid breakpoint (keep parity)
   ============================================================ */
@media (max-width: 900px) {
	.axontk-section { padding: 70px 0; }
	.axontk-section-head { margin-bottom: 44px; }
	.axontk-two-col { gap: 32px; }
}

/* ============================================================
   ≤ 768px — Tablet portrait
   ============================================================ */
@media (max-width: 768px) {

	/* Container & sections: tighter rhythm */
	.axontk-container { padding: 0 18px; }
	.axontk-section { padding: 56px 0; }
	.axontk-section-head { margin-bottom: 36px; }
	.axontk-section-head h2 { font-size: 26px; }
	.axontk-section-head .lead { font-size: 15.5px; }

	/* Topbar: stack items neatly */
	.axontk-topbar { font-size: 12px; padding: 6px 0; }
	.axontk-topbar-inner { gap: 10px; }
	.axontk-topbar-contact { gap: 12px; }

	/* Header: smaller logo + hide header CTA, mobile gets it inside menu */
	.axontk-header-inner { padding: 10px 0; gap: 14px; }
	.axontk-logo img { height: 36px; }
	.axontk-logo-text { font-size: 19px; }
	.axontk-header-cta .axontk-btn--primary { display: none; }
	.axontk-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }

	/* Mobile nav: full-width, scrollable */
	.axontk-nav { max-height: calc(100vh - 90px); overflow-y: auto; padding: 16px !important; }
	.axontk-nav a { font-size: 15px; padding: 13px 16px !important; border-bottom: 1px solid var(--line-soft); }
	.axontk-nav li:last-child a { border-bottom: none; }

	/* Page header (sub-pages) */
	.axontk-page-header { padding: 44px 0 36px; }
	.axontk-page-header h1 { font-size: 28px; }
	.axontk-page-header p { font-size: 15px; }

	/* Hero */
	.axontk-hero { padding: 60px 0 70px; }
	.axontk-hero h1 { font-size: 34px; line-height: 1.18; }
	.axontk-hero .lead { font-size: 15.5px; margin-bottom: 28px; }
	.axontk-hero-actions { gap: 10px; }
	.axontk-hero-actions .axontk-btn--lg { padding: 14px 24px; font-size: 15px; }
	.axontk-hero-trust { gap: 14px; margin-top: 32px; font-size: 12.5px; }

	/* Stats: 4 → 2 on tablet portrait */
	.axontk-stats { grid-template-columns: repeat(2, 1fr) !important; padding: 36px 0; gap: 22px; }
	.axontk-stat-num { font-size: 34px; }
	.axontk-stat-label { font-size: 13px; }

	/* Cards */
	.axontk-card { padding: 26px 22px; }
	.axontk-card h3 { font-size: 19px; }
	.axontk-card-icon { width: 50px; height: 50px; margin-bottom: 18px; }
	.axontk-card-icon svg { width: 24px; height: 24px; }

	/* CTA banner — never let it crush */
	.axontk-cta-banner { padding: 38px 24px; }
	.axontk-cta-banner h2 { font-size: 24px; }
	.axontk-cta-banner p { font-size: 15px; }

	/* Tech chip rows should wrap clean */
	.axontk-portfolio-tech,
	.axontk-service-tech-row { gap: 5px; }
	.axontk-tech-chip { font-size: 10.5px; padding: 3px 9px; }

	/* Service detail (services page) — center the icon on mobile */
	.axontk-service-detail { padding: 24px 20px !important; gap: 18px !important; text-align: right; }
	.axontk-service-icon-lg { width: 60px; height: 60px; margin-bottom: 4px; }
	.axontk-service-icon-lg svg { width: 28px; height: 28px; }
	.axontk-service-body h3 { font-size: 21px; }
	.axontk-service-body > p { font-size: 14.5px; }

	/* Tech-stack inline grid (front-page) */
	.axontk-tech-stack-grid { grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; line-height: 1.8; }

	/* Step cards */
	.axontk-step { padding: 22px 18px; }
	.axontk-step-num { width: 38px; height: 38px; font-size: 16px; margin-bottom: 14px; }
	.axontk-step h4 { font-size: 16px; }

	/* About values */
	.axontk-value-card { padding: 22px 20px; }

	/* Process steps grid: 4 → 2 */
	.axontk-steps { grid-template-columns: 1fr 1fr !important; }

	/* Filters toolbar — let pills scroll horizontally if too many */
	.axontk-shop-toolbar { padding: 12px 14px; }
	.axontk-shop-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}
	.axontk-shop-filter { flex-shrink: 0; padding: 7px 13px; font-size: 12px; }

	/* Portfolio / Blog / Product cards: tighter padding */
	.axontk-portfolio-body { padding: 18px 18px 20px; }
	.axontk-blog-body { padding: 18px 18px 22px; }
	.axontk-product-body { padding: 16px 18px 18px; }

	/* Single portfolio side card: better mobile spacing */
	.axontk-portfolio-side-card { padding: 22px 20px; }
	.axontk-portfolio-side-card .value { font-size: 15px; margin-bottom: 14px; }

	/* Single product detail: tighter price block */
	.axontk-product-detail .price-block { padding: 14px 16px; }
	.axontk-product-detail .price-block .big { font-size: 24px; }
	.axontk-product-detail .short-desc { font-size: 14.5px; }

	/* Single product gallery thumbs: 4 → 3 */
	.axontk-gallery-thumbs { grid-template-columns: repeat(3, 1fr) !important; }

	/* Download buttons row: bigger touch targets */
	.axontk-download-btn { padding: 11px 14px; }
	.axontk-dl-name { font-size: 13px; }
	.axontk-dl-label { font-size: 10.5px; }

	/* PDF card */
	.axontk-pdf-card { padding: 20px; }
	.axontk-pdf-card-icon { width: 42px; height: 42px; }

	/* Legal pages */
	.axontk-legal-content { padding: 30px 22px 36px !important; }
	.axontk-legal-content h1 { font-size: 24px; }
	.axontk-legal-content h2 { font-size: 19px; }

	/* Footer: tighter spacing */
	.axontk-footer { padding-top: 50px; }
	.axontk-footer-grid { gap: 28px; margin-bottom: 36px; }
	.axontk-footer-bottom { padding: 18px 0; font-size: 12px; }
	.axontk-footer-legal-links { gap: 14px; }

	/* Cookie banner */
	.axontk-cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; }
	.axontk-cookie-banner h4 { font-size: 15px; }
	.axontk-cookie-banner p { font-size: 13px; }
}

/* ============================================================
   ≤ 600px — Large mobile
   ============================================================ */
@media (max-width: 600px) {

	/* 3-col grids collapse fully */
	.axontk-grid-3 { grid-template-columns: 1fr !important; }
	.axontk-portfolio-grid,
	.axontk-blog-grid,
	.axontk-products-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

	/* Stats: 2 → 1 doesn't help much, keep 2 but tighter */
	.axontk-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; padding: 28px 0; }
	.axontk-stat-num { font-size: 30px; }

	/* Hero */
	.axontk-hero { padding: 48px 0 56px; }
	.axontk-hero h1 { font-size: 28px; }
	.axontk-hero .lead { font-size: 14.5px; }
	.axontk-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.axontk-hero-actions .axontk-btn { width: 100%; justify-content: center; }
	.axontk-hero-trust { flex-direction: column; gap: 8px; }

	/* Section head */
	.axontk-section-head h2 { font-size: 23px; }

	/* CTA banner stacks buttons */
	.axontk-cta-banner > div[style*="display:flex"],
	.axontk-cta-banner > div[style*="display: flex"] {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.axontk-cta-banner .axontk-btn { width: 100%; justify-content: center; }
	.axontk-cta-banner { padding: 32px 20px; }
	.axontk-cta-banner h2 { font-size: 22px; }

	/* Downloads grid: stacked single-col */
	.axontk-downloads { grid-template-columns: 1fr !important; gap: 10px; }

	/* Service deliverables single-col */
	.axontk-service-deliverables { grid-template-columns: 1fr !important; }

	/* Steps: 2 → 1 */
	.axontk-steps { grid-template-columns: 1fr !important; }

	/* Team avatar smaller */
	.axontk-team-avatar { width: 72px; height: 72px; font-size: 26px; }

	/* About values stack */
	.axontk-about-values { grid-template-columns: 1fr !important; }

	/* Footer: full collapse to 1 col */
	.axontk-footer-grid { grid-template-columns: 1fr !important; gap: 26px; }
	.axontk-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

	/* Tech stack inline grid (front-page) — stacks */
	.axontk-tech-stack-grid { grid-template-columns: 1fr !important; gap: 8px; }

	/* Page header */
	.axontk-page-header { padding: 36px 0 30px; }
	.axontk-page-header h1 { font-size: 24px; }
	.axontk-page-header p { font-size: 14.5px; }
	.axontk-breadcrumbs { font-size: 12px; }

	/* Quote/testimonial: tighter */
	.axontk-quote { padding: 26px 22px; }
	.axontk-quote-text { font-size: 15.5px; }

	/* Pagination wrapping */
	.axontk-pagination { gap: 6px; }
	.axontk-pagination a,
	.axontk-pagination span { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }

	/* Top bar — stack contact + lang */
	.axontk-topbar-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
	.axontk-topbar-contact { gap: 10px; flex-wrap: wrap; }
}

/* ============================================================
   ≤ 480px — Mobile
   ============================================================ */
@media (max-width: 480px) {

	.axontk-container { padding: 0 14px; }
	.axontk-section { padding: 44px 0; }
	.axontk-section-head { margin-bottom: 30px; }

	/* Hero */
	.axontk-hero { padding: 42px 0 48px; }
	.axontk-hero h1 { font-size: 25px; line-height: 1.22; letter-spacing: -0.3px; }
	.axontk-hero .lead { font-size: 14px; line-height: 1.7; }
	.axontk-badge { font-size: 11px; padding: 6px 14px; }
	.axontk-hero-actions .axontk-btn--lg { padding: 13px 18px; font-size: 14px; }

	/* Header */
	.axontk-header-inner { padding: 8px 0; gap: 10px; }
	.axontk-logo img { height: 32px; }
	.axontk-logo-text { font-size: 17px; }
	.axontk-nav-toggle { width: 38px; height: 38px; font-size: 18px; }

	/* Top bar: hide email entirely below 480px, keep only phone */
	.axontk-topbar { padding: 5px 0 !important; }
	.axontk-topbar-contact span:not(:nth-child(2)) { display: none !important; }
	.axontk-topbar-contact span:nth-child(2) { font-size: 11.5px !important; }
	.axontk-topbar-lang { font-size: 11.5px !important; gap: 6px !important; }

	/* Page header */
	.axontk-page-header h1 { font-size: 21px; }

	/* Cards */
	.axontk-card { padding: 22px 18px; }
	.axontk-card h3 { font-size: 17px; }
	.axontk-card p { font-size: 14px; }

	/* Buttons */
	.axontk-btn { padding: 11px 20px; font-size: 14px; }
	.axontk-btn--lg { padding: 13px 24px; font-size: 14.5px; }

	/* Section heading */
	.axontk-section-head h2 { font-size: 21px; }
	.axontk-section-head .lead { font-size: 14.5px; }

	/* Service detail */
	.axontk-service-detail { padding: 20px 16px !important; }
	.axontk-service-icon-lg { width: 54px; height: 54px; }
	.axontk-service-icon-lg svg { width: 24px; height: 24px; }
	.axontk-service-body h3 { font-size: 19px; }
	.axontk-service-body > p { font-size: 14px; }

	/* CTA banner */
	.axontk-cta-banner { padding: 28px 16px; }
	.axontk-cta-banner h2 { font-size: 20px; }
	.axontk-cta-banner p { font-size: 14px; }

	/* Gallery thumbs: 3 → 2 */
	.axontk-gallery-thumbs { grid-template-columns: repeat(2, 1fr) !important; }

	/* Single product price */
	.axontk-product-detail .price-block { flex-wrap: wrap; padding: 12px 14px; }
	.axontk-product-detail .price-block .big { font-size: 22px; }
	.axontk-product-actions { flex-direction: column; gap: 8px; }
	.axontk-product-actions .axontk-btn { width: 100%; justify-content: center; }

	/* Portfolio side card actions */
	.axontk-portfolio-side-card .axontk-btn { width: 100%; justify-content: center; padding: 12px 18px; }

	/* PDF card */
	.axontk-pdf-card { padding: 18px; }
	.axontk-pdf-card-head { gap: 10px; }
	.axontk-pdf-card-icon { width: 38px; height: 38px; font-size: 11px; }
	.axontk-pdf-card h4 { font-size: 14px; }
	.axontk-pdf-download-btn { padding: 12px 14px; font-size: 13.5px; }

	/* Cookie banner full-width */
	.axontk-cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 16px 18px; }
	.axontk-cookie-actions { flex-direction: column; gap: 8px; }
	.axontk-cookie-actions .axontk-btn { width: 100%; justify-content: center; }

	/* Quote/testimonial */
	.axontk-quote { padding: 22px 18px; }
	.axontk-quote-text { font-size: 14.5px; }

	/* Legal pages */
	.axontk-legal-content { padding: 24px 18px 30px !important; }
	.axontk-legal-content h1 { font-size: 22px; }
	.axontk-legal-content h2 { font-size: 17px; }
	.axontk-legal-content p, .axontk-legal-content li { font-size: 14.5px; line-height: 1.85; }

	/* Post content */
	.axontk-post-content { padding: 24px 18px 30px !important; }
	.axontk-post-content > p, .axontk-post-content > ul, .axontk-post-content > ol,
	.axontk-post-content > h2, .axontk-post-content > h3 { font-size: 15px; line-height: 1.85; }
	.axontk-post-content h2 { font-size: 21px; }
}

/* ============================================================
   ≤ 360px — Tiny mobile (iPhone SE, old Android)
   ============================================================ */
@media (max-width: 360px) {

	.axontk-container { padding: 0 12px; }
	.axontk-section { padding: 36px 0; }
	.axontk-hero { padding: 36px 0 42px; }
	.axontk-hero h1 { font-size: 22px; }
	.axontk-section-head h2 { font-size: 19px; }
	.axontk-page-header h1 { font-size: 19px; }

	.axontk-logo img { height: 28px; }
	.axontk-logo-text { font-size: 15px; }

	.axontk-btn { padding: 10px 16px; font-size: 13px; }
	.axontk-btn--lg { padding: 12px 18px; font-size: 14px; }

	.axontk-card { padding: 18px 15px; }
	.axontk-cta-banner { padding: 24px 14px; }
}

/* ============================================================
   Special: smooth-scroll horizontal pill rows
   (used in shop/portfolio/blog filters)
   ============================================================ */
.axontk-shop-filters::-webkit-scrollbar { height: 4px; }
.axontk-shop-filters::-webkit-scrollbar-thumb { background: var(--cyan-500); border-radius: 4px; }
.axontk-shop-filters::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Safety: don't let any inline-style grids overflow
   ============================================================ */
.axontk-page [style*="grid-template-columns"] {
	min-width: 0;
}

/* ============================================================
   Touch targets: ensure links/buttons are at least 36-40px tall
   on mobile (accessibility / Apple HIG)
   ============================================================ */
@media (max-width: 768px) {
	.axontk-page a.axontk-btn,
	.axontk-page button.axontk-btn { min-height: 42px; }
	.axontk-nav a { min-height: 42px; display: flex; align-items: center; }
	.axontk-footer ul a { padding: 4px 0; display: inline-block; }
}