@charset "UTF-8";
/* =====================================================================
   SaryTech Solutions — Responsive rules
   Desktop first from 1200px down to small phones.
   ===================================================================== */

/* --------------------------------------------------------------- 1200 */
@media (max-width: 1400px) {
	.header-phone { display: none; }
}

@media (max-width: 1200px) {
	:root { --container: 1040px; }

	.main-nav > ul > li > a { padding: 0.55rem 0.55rem; font-size: 0.86rem; }
	.brand img { height: 44px; }
	.footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
	.footer-grid > *:nth-child(3) { grid-column: span 1; }
}

/* --------------------------------------------------------------- 1024 */
@media (max-width: 1024px) {
	:root { --nav-height: 74px; }

	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(2) { border-right: 0; }
	.stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
	.pillars { grid-template-columns: 1fr; }
	.layout-sidebar { grid-template-columns: 1fr; }
	.sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
	.split { grid-template-columns: 1fr; }
	.split-media { order: -1; }
	.process::before { display: none; }

}

/* The menu became a drawer at 1200 once Shop joined it: nine top-level
   items need more width than the container offers below that. */
@media (max-width: 1200px) {
	/* Mobile navigation */
	.nav-toggle { display: flex; }
	.nav-close { display: flex; }
	.main-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(360px, 88vw);
		background: #fff;
		box-shadow: -12px 0 40px rgba(26, 10, 32, .18);
		padding: calc(var(--nav-height) + 1rem) var(--space-5) var(--space-6);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
		z-index: 960;
	}
	.main-nav.is-open { transform: translateX(0); }
	.main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav > ul > li { border-bottom: 1px solid var(--border); }
	.main-nav > ul > li > a { padding: 0.95rem 0.25rem; font-size: 1rem; justify-content: space-between; }
	.has-dropdown > .dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--blue-100);
		border-radius: 0;
		margin: 0 0 var(--space-3) var(--space-3);
		padding: 0 0 0 var(--space-3);
		display: none;
	}
	.has-dropdown.is-open > .dropdown { display: flex; }
	.has-dropdown > a .icon { transition: transform var(--transition); }
	.has-dropdown.is-open > a .icon { transform: rotate(180deg); }

	.nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(26, 10, 32, .5);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition);
		z-index: 950;
	}
	.nav-backdrop.is-open { opacity: 1; visibility: visible; }
	body.nav-open { overflow: hidden; }

	/* The header creates its own stacking context, so lift it above the
	   backdrop while the drawer is open — otherwise the drawer is dimmed
	   by its own overlay and the close button cannot be tapped. */
	body.nav-open .site-header { z-index: 970; }
}

/* The floating WhatsApp and back-to-top buttons sit over the bottom-right of
   the page; below full width they can land on the last footer link, so the
   bar keeps a lane clear for them. */
@media (max-width: 1199px) {
	.footer-bottom-links { padding-right: 4.5rem; }
}

/* ---------------------------------------------------------------- 860 */
@media (max-width: 860px) {
	.topbar .container { justify-content: center; }
	.topbar-tagline, .topbar-social { display: none; }
	.topbar-links { gap: var(--space-4); }

	.form-grid { grid-template-columns: 1fr; }
	.feature-list.is-two-col { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
	.cta-band .cta-inner { flex-direction: column; align-items: flex-start; }
	.before-after { grid-template-columns: 1fr; }
	.hero-controls .container { justify-content: center; }
	.hero-arrows { display: none; }
}

/* ---------------------------------------------------------------- 640 */
@media (max-width: 640px) {
	:root { --nav-height: 66px; --container: 100%; }

	.container { padding-inline: var(--space-4); }

	.grid-2, .grid-3, .grid-4, .grid-auto, .grid-auto-sm { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius); }
	/* The overlap is derived from --hero-controls-inset in main.css; overriding
	   it here is what used to let the card sit on the carousel dots. */
	.stat { padding: var(--space-5) var(--space-3); }
	.stat-value { font-size: 1.9rem; }

	.brand img { height: 38px; }
	.header-actions .btn { display: none; }

	/* One contact line is enough on a phone; the rest is a tap away */
	.topbar { padding-block: 0.35rem; }
	.topbar-links a:not(:first-child) { display: none; }

	.hero-inner { padding-block: 4rem; }
	.hero-content { text-align: left; }
	.hero .btn-group { flex-direction: column; align-items: stretch; }
	.hero .btn { width: 100%; }
	.hero-dot { width: 30px; }

	.detail-meta { grid-template-columns: 1fr 1fr; }
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.checkbox-grid { grid-template-columns: 1fr; }
	.wizard-actions { flex-direction: column-reverse; }
	.wizard-actions .btn { width: 100%; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
	.footer-bottom { flex-direction: column; text-align: center; align-items: center; }
	.footer-bottom-links { justify-content: center; }
	.floating-actions { right: 14px; bottom: 14px; }
	.float-btn { width: 50px; height: 50px; }
	.float-label { display: none; }
	.pagination a, .pagination span { min-width: 38px; height: 38px; }
	.table-wrap { border-radius: var(--radius-sm); }
	.section-head { margin-bottom: var(--space-6); }
}

/* ---------------------------------------------------------------- 420 */
@media (max-width: 420px) {
	.stats-grid { grid-template-columns: 1fr; }
	.stat { border-right: 0; border-bottom: 1px solid var(--border); }
	.stat:last-child { border-bottom: 0; }
	.gallery { grid-template-columns: 1fr; }
	.detail-meta { grid-template-columns: 1fr; }
	.filter-chip { font-size: var(--fs-xs); padding: 0.4rem 0.8rem; }
}

/* ---------------------------------------------------------------- shop */
@media (max-width: 1024px) {
	.product-layout { grid-template-columns: 1fr; gap: var(--space-6); }
	.shop-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	.header-shop span { display: none; }
	.shop-toolbar { grid-template-columns: 1fr; padding: var(--space-4); }
	.product-actions .btn { flex: 1 1 100%; }

	/* The sticky bar replaces the buttons that have scrolled away */
	.page-product .product-sticky-bar { display: flex; }
	.page-product .floating-actions { bottom: 5.5rem; }
	.page-product { padding-bottom: 4.5rem; }
}

@media (max-width: 480px) {
	.product-thumb { width: 64px; height: 52px; }
	.product-price-block strong { font-size: 1.6rem; }
}