/**
 * Responsive layer — loaded last so it always wins.
 * Breakpoints: 480 / 576 / 768 / 992 / 1200 / 1400.
 */

/* ------------------------------------------------------------------ *
 * Small phones (≤ 400px, covers 320/360/375/390)
 * ------------------------------------------------------------------ */
@media (max-width: 400px) {
	:root { --gutter: 14px; }

	.mamun-marquee__item { padding-inline-end: min(var(--announce-gap, 64px), 40px); }

	.mamun-products.cols-mob-2 { gap: 10px; }
	.mamun-product-card__body { padding: 10px; gap: 4px; }
	.mamun-product-card__title { font-size: .88rem; }
	.mamun-product-card__cat { font-size: .68rem; }
	.mamun-product-card__price { font-size: .95rem; }
	.mamun-support__grid { grid-template-columns: 1fr; }
	.mamun-hero__eyebrow { font-size: .66rem; padding: 3px 9px; }
	.mamun-bottom-nav__item span { font-size: .62rem; }

	/* 320px safety: shrink the header cluster instead of letting it overflow. */
	.mamun-header__inner { gap: 4px; }
	.mamun-icon-btn { width: 38px; height: 38px; }
	.site-branding img,
	.site-branding .custom-logo { max-height: 34px; }
	.site-title a { font-size: .95rem; }
	.mamun-header__action { padding: 6px; }

	.mamun-cart-drawer__buttons { grid-template-columns: 1fr; }
	.mamun-cart-item { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
	.mamun-cart-item__media img { width: 60px; height: 60px; }

	.mamun-section-heading { flex-direction: column; align-items: flex-start; gap: 6px; }

	/* Purchase grid stacks when qty + Add to Cart can no longer share a row. */
	.woocommerce div.product form.cart,
	.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product form.cart .quantity { justify-self: stretch; }
	.mamun-qty, .woocommerce .quantity.mamun-qty { width: 100%; justify-content: space-between; }
	.woocommerce div.product form.cart .single_add_to_cart_button { grid-column: 1; }
	.mamun-404__code { font-size: 3rem; }
}

/* ------------------------------------------------------------------ *
 * ≥ 480px
 * ------------------------------------------------------------------ */
@media (min-width: 480px) {
	.mamun-combo__grid { gap: 16px; }
	.mamun-order-contact { grid-template-columns: 1fr 1fr; }
	.mamun-post-nav { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ *
 * ≥ 576px
 * ------------------------------------------------------------------ */
@media (min-width: 576px) {
	:root { --gutter: 20px; --section-spacing: 44px; }

	.mamun-products--slider { --slides: 2; }
	.mamun-cat-grid { --slides: 3; }

	.mamun-hero__slide { min-height: var(--hero-h-tablet, 420px); }
	.mamun-search-form__submit-text { display: inline; }
	.mamun-search-form__submit-icon { display: none; }

	.mamun-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mamun-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * ≥ 768px (tablet)
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	:root { --gutter: 20px; --section-spacing: 52px; --header-height: 76px; }

	.mamun-topbar { font-size: var(--announce-fs-tab, 13px); }

	body { font-size: 16px; }

	/* Tablet: three across regardless of the desktop setting — four would make
	   cards too narrow to read at this width. */
	.mamun-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.mamun-products.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mamun-products--slider { --slides: 3; --slide-gap: 16px; }
	.mamun-cat-grid { --slides: 4; --slide-gap: 16px; }
	.mamun-brand-grid { --slides: 4; --slide-gap: 16px; }
	.mamun-testimonial-grid { --slides: 2; --slide-gap: 16px; }

	.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }

	.mamun-combo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Three-track grid: equal outer tracks centre the search for real.
	   The middle track needs a definite max — an `auto` track sizes to content,
	   so `width:100%` inside it would have nothing to resolve against and the
	   field would collapse to its intrinsic width. */
	.mamun-header__inner {
		display: grid;
		grid-template-columns: 1fr minmax(0, 680px) 1fr;
		gap: 16px;
	}
	.mamun-header__inner > .site-branding { justify-self: start; }
	.mamun-header__actions { justify-self: end; margin-inline-start: 0; }

	.mamun-header__search {
		display: block;
		justify-self: stretch;
		width: 100%;
		max-width: 680px;
		margin-inline: auto;
	}
	.mamun-header__search-toggle { display: none; }
	.mamun-header__action-text { display: flex; }
	.mamun-header__action { padding: 8px 10px; }

	.woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr 1fr; }
	.woocommerce-account .u-columns { grid-template-columns: 1fr 1fr; }

	.mamun-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mamun-footer__col--brand { grid-column: 1 / -1; }
	.mamun-footer__bottom { flex-direction: row; justify-content: space-between; text-align: start; }

	.mamun-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mamun-hero__arrow { display: flex; }
	.mamun-hero__content { padding: 32px 40px; }

	.mamun-support__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 20px; }

	.mamun-drawer__body { padding: 20px; }
}

/* ------------------------------------------------------------------ *
 * ≥ 992px (small desktop) — full desktop header appears here
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {
	:root { --gutter: 24px; --section-spacing: 60px; }

	/* Narrow desktop: cap the search so both side tracks keep slack and the
	   field stays centred instead of being pushed by the wider action cluster. */
	.mamun-header__inner { grid-template-columns: 1fr minmax(0, 460px) 1fr; }

	.mamun-topbar { font-size: var(--announce-fs, 14px); }
	.mamun-catbar { display: block; }
	.mamun-catbar__inner { --menu-gap: 22px; }
	.mamun-header__burger { display: none; }
	.mamun-header__action--wishlist { display: flex; }

	.mamun-bottom-nav { display: none; }
	body.has-mobile-bottom-nav { padding-bottom: 0; }
	body.mamun-single-product.has-mobile-bottom-nav { padding-bottom: 0; }
	.mamun-sticky-atc { display: none; }

	.mamun-filter-toggle { display: none; }
	.mamun-filter-drawer { display: none; }

	.mamun-products { gap: 20px; }

	.mamun-products--slider { --slide-gap: 20px; }
	.mamun-products--slider.cols-2 { --slides: 2; }
	.mamun-products--slider.cols-3 { --slides: 3; }
	.mamun-products--slider.cols-4 { --slides: 4; }
	.mamun-products--slider.cols-5 { --slides: 5; }
	.mamun-products--slider.cols-6 { --slides: 6; }

	.mamun-cat-grid { --slides: 6; --slide-gap: 20px; }
	.mamun-brand-grid { --slides: 6; --slide-gap: 20px; }
	.mamun-testimonial-grid { --slides: 3; --slide-gap: 20px; }

	/*
	 * Desktop: the same controls become an overlay vertically centred on the
	 * track. The wrapper extends 18px past each edge and space-between pins the
	 * buttons to it, which lands them exactly where the old per-button negative
	 * margins did — without those margins. Visual styling is inherited from the
	 * shared rules in main.css; only placement and size change here.
	 */
	.mamun-slider.is-scrollable .mamun-slider__controls {
		position: absolute;
		inset-block-start: 50%;
		inset-inline: -18px;
		transform: translateY(-50%);
		justify-content: space-between;
		margin-top: 0;
		/* Only the buttons are interactive; the strip must not block the cards. */
		pointer-events: none;
		z-index: 2;
	}
	.mamun-slider__btn {
		pointer-events: auto;
		width: 44px;
		height: 44px;
		box-shadow: var(--shadow-md);
	}

	.mamun-combo__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

	.mamun-layout--sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; }

	.mamun-shop-layout.has-sidebar { grid-template-columns: 268px minmax(0, 1fr); gap: 28px; }
	.mamun-shop-sidebar { display: block; }

	.mamun-search-overlay { display: none; }

	.woocommerce-account .woocommerce { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column; gap: 2px; }

	.mamun-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
	.mamun-footer__col--brand { grid-column: auto; }

	.mamun-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

	.mamun-hero__slide { min-height: var(--hero-h-desktop, 520px); }
	.mamun-hero__content { padding: 40px 56px; }
	.mamun-hero__content-inner { max-width: 40ch; }

	.woocommerce div.product { gap: 40px; }
}

/* ------------------------------------------------------------------ *
 * ≥ 1200px — the configured desktop column count finally applies
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
	.mamun-header__inner { grid-template-columns: 1fr minmax(0, 680px) 1fr; }

	.mamun-catbar__inner { --menu-gap: 34px; }

	.mamun-products.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mamun-products.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mamun-products.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mamun-products.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.mamun-products.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * ≥ 1200px
 * ------------------------------------------------------------------ */
@media (min-width: 1200px) {
	.mamun-header__inner { gap: 24px; }

	.mamun-footer__grid { grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); }

	.mamun-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.mamun-shop-layout.has-sidebar { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
}

/* ------------------------------------------------------------------ *
 * ≥ 1400px
 * ------------------------------------------------------------------ */
@media (min-width: 1400px) {
	:root { --section-spacing: 68px; }
}

/* ------------------------------------------------------------------ *
 * Print
 * ------------------------------------------------------------------ */
@media print {
	.site-header,
	.site-footer,
	.mamun-bottom-nav,
	.mamun-drawer,
	.mamun-overlay,
	.mamun-sticky-atc,
	.mamun-breadcrumb { display: none; }

	body { padding: 0; color: #000; }
}