/* ==========================================================================
   FX-Lighting — responsive.css
   Mobile-first adjustments, breakpoint 1200 / 992 / 768 / 576.
   Loaded LAST so media queries always win.
   ========================================================================== */

/* ---------------------------------------------------------------- XL: ≤ 1400 */
@media ( max-width: 1400px ) {
	:root { --fx-container: 1240px; }
}

/* ---------------------------------------------------------------- LG: ≤ 1200 */
@media ( max-width: 1200px ) {
	:root {
		--fx-container: 100%;
		--sp-9: clamp( 3.5rem, 2.5rem + 4vw, 5.5rem );
	}
	.fx-intro,
	.fx-global { grid-template-columns: 1fr; gap: var( --sp-6 ); }
	.fx-intro__media { aspect-ratio: 16 / 10; max-width: 560px; order: -1; }
	.fx-global__media { max-width: 560px; }

	/* Product grid 2 cols below 1200 to keep cards readable */
	ul.products { grid-template-columns: repeat( 2, 1fr ) !important; }

	/* single product goes single column */
	.woocommerce div.product { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- MD: ≤ 992  — switch nav to burger, sidebar collapses */
@media ( max-width: 992px ) {
	:root { --fx-header-h: 64px; }

	/* hide desktop nav, show burger */
	.fx-nav,
	.fx-header__phone { display: none; }
	.fx-burger { display: flex; }

	/* two-column layout collapses: sidebar becomes a top accordion */
	.fx-layout {
		grid-template-columns: 1fr;
		gap: var( --sp-5 );
	}
	.fx-layout__sidebar {
		position: static;
	}
	.fx-layout__sidebar.is-collapsed .fx-widget { display: none; }
	.fx-layout__sidebar .fx-widget__title {
		cursor: pointer;
		position: relative;
		margin-bottom: 0;
		padding: var( --sp-4 ) 0;
	}
	.fx-layout__sidebar .fx-widget__title::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		width: 14px; height: 14px;
		transform: translateY( -50% );
		background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" ) center / contain no-repeat;
		transition: transform var( --t-fast );
	}
	.fx-layout__sidebar:not( .is-collapsed ) .fx-widget__title::after { transform: translateY( -50% ) rotate( 180deg ); }
	.fx-layout__sidebar .fx-widget__title + * { margin-top: var( --sp-2 ); }

	/* footer collapses to 2 cols */
	.fx-footer__top { grid-template-columns: 1fr 1fr; }
	.fx-footer__brand { grid-column: 1 / -1; }

	/* product grid stays 2 cols */
	ul.products { grid-template-columns: repeat( 2, 1fr ) !important; }

	/* related products on single match main grid */
	.woocommerce .related.products ul.products { grid-template-columns: repeat( 2, 1fr ) !important; }
}

/* ---------------------------------------------------------------- SM: ≤ 768 */
@media ( max-width: 768px ) {
	body { font-size: 0.94rem; }

	.fx-hero { min-height: 92vh; padding-top: calc( var( --fx-header-h ) + var( --sp-4 ) ); }
	.fx-hero__subtitle { font-size: var( --fx-fs-base ); }
	.fx-hero__actions { flex-direction: column; align-items: stretch; }
	.fx-hero__actions .fx-btn { width: 100%; }
	.fx-hero__scroll { display: none; }

	.fx-intro__stats { gap: var( --sp-2 ); }
	.fx-stat { padding: var( --sp-3 ); }

	.fx-cat-grid { grid-template-columns: repeat( 2, 1fr ); gap: var( --sp-3 ); }

	.fx-cta { padding: var( --sp-7 ) var( --sp-4 ); }

	.fx-footer__top { grid-template-columns: 1fr; gap: var( --sp-5 ); }
	.fx-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* product grid single column on phones */
	ul.products { grid-template-columns: 1fr !important; }
	.woocommerce .related.products ul.products { grid-template-columns: 1fr 1fr !important; }

	/* shop toolbar stacks */
	.fx-shop-toolbar { flex-direction: column; align-items: flex-start; gap: var( --sp-2 ); }
	.woocommerce-ordering { width: 100%; }
	.woocommerce-ordering select { width: 100%; }

	/* single product: tabs become accordion-ish but keep simple */
	.woocommerce div.product .woocommerce-tabs ul.tabs { gap: var( --sp-4 ); overflow-x: auto; }

	/* cart table becomes card-like */
	.woocommerce-cart table.cart .product-thumbnail { display: none; }
	.woocommerce-cart table.cart th,
	.woocommerce-cart table.cart td { padding: var( --sp-3 ) !important; }
}

/* ---------------------------------------------------------------- XS: ≤ 576 */
@media ( max-width: 576px ) {
	:root { --sp-5: 1.25rem; --sp-9: 3rem; }

	.fx-hero__title { font-size: clamp( 2rem, 1.4rem + 4vw, 2.8rem ); }
	.fx-section-head h2,
	.fx-page-hero__title { font-size: clamp( 1.6rem, 1.2rem + 3vw, 2.2rem ); }

	.fx-cat-grid { grid-template-columns: 1fr; }
	.fx-cat-card { aspect-ratio: 16 / 10; }

	.fx-intro__stats { grid-template-columns: 1fr; }
	.fx-exp-grid { grid-template-columns: 1fr; }

	/* related products full single col */
	.woocommerce .related.products ul.products { grid-template-columns: 1fr !important; }

	/* header actions shrink */
	.fx-cart-btn { width: 40px; height: 40px; }
	.fx-burger { width: 40px; height: 40px; }

	/* mobile menu nav bigger tap targets already; tighten */
	.fx-mobile-menu__nav a { font-size: 1.25rem; padding: var( --sp-3 ) var( --sp-2 ); }
}

/* ---------------------------------------------------------------- Landscape phones — keep hero shorter */
@media ( max-width: 992px ) and ( orientation: landscape ) and ( max-height: 500px ) {
	.fx-hero { min-height: 100vh; min-height: 100svh; align-items: flex-start; padding-top: calc( var( --fx-header-h ) + var( --sp-7 ) ); }
	.fx-hero__scroll { display: none; }
}

/* ---------------------------------------------------------------- About-page components */
@media ( max-width: 992px ) {
	.fx-about-story { grid-template-columns: 1fr; gap: var( --sp-6 ); }
	.fx-about-story__media { aspect-ratio: 16 / 10; max-width: 560px; order: -1; }
	.fx-about-numbers { grid-template-columns: repeat( 2, 1fr ); gap: var( --sp-4 ); }
	.fx-about-numbers__item:nth-child( 2 ) { border-right: none; }
}
@media ( max-width: 768px ) {
	.fx-about-values { grid-template-columns: 1fr; gap: var( --sp-5 ); }
}
@media ( max-width: 576px ) {
	.fx-about-numbers { grid-template-columns: 1fr; }
	.fx-about-numbers__item { border-right: none; border-bottom: 1px solid var( --fx-border ); }
	.fx-about-numbers__item:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------- Print */
@media print {
	.fx-header, .fx-footer, .fx-scrolltop, .fx-burger, .fx-mobile-menu, .fx-hero__scroll { display: none !important; }
	body { background: #fff; color: #000; }
	* { box-shadow: none !important; }
}