/* ============================================================
   Zulema Perfumes - responsive overrides
   (component-level breakpoints are co-located with each CSS module)
   Additional layout + cross-cutting tweaks go here.
   ============================================================ */

/* ---- Archive product grid ---- */
@media (max-width: 1280px) {
	.zulema-product-grid.columns-5 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 960px) {
	.zulema-product-grid.columns-5,
	.zulema-product-grid.columns-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.zulema-product-grid.columns-5,
	.zulema-product-grid.columns-4,
	.zulema-product-grid.columns-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Mega menu: hide on mobile/tablet ---- */
@media (max-width: 1023px) {
	.zulema-megamenu {
		display: none !important;
	}
}

/* ---- Mini cart drawer / mobile menu / overlay ----
   Slide animation is handled in components.css via the
   .zulema-drawer--open class (toggled by Alpine x-effect).
*/

/* ---- Mobile hamburger search ---- */
@media (max-width: 1023px) {
	.zulema-topbar__search {
		display: none;
	}

	.zulema-topbar__inner {
		grid-template-columns: auto 1fr auto;
	}
}

/* Show search on tablet above certain breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
	.zulema-topbar__search {
		display: flex;
		max-width: none;
	}

	.zulema-topbar__inner {
		grid-template-columns: auto auto 1fr auto;
	}
}

/* ---- Filters responsive ---- */
@media (max-width: 640px) {
	.zulema-chips {
		gap: 6px;
	}

	.zulema-chip {
		padding: 7px 12px;
		font-size: 0.82rem;
	}

	.zulema-filter__panel {
		position: fixed;
		inset: auto 0 0 0;
		border-radius: 16px 16px 0 0;
		max-height: 60vh;
		min-width: unset;
	}
}

/* ---- Category grid ---- */
@media (max-width: 480px) {
	.zulema-cat-grid__grid {
		grid-template-columns: 1fr;
	}

	.zulema-cat-card {
		min-height: 160px;
	}
}

/* ---- Footer accordion on mobile (handled in footer.css) ---- */

/* ---- Print ---- */
@media print {
	.zulema-header,
	.zulema-footer,
	.zulema-cart-drawer,
	.zulema-mobile-menu,
	.zulema-overlay {
		display: none !important;
	}

	.zulema-main {
		padding-top: 0 !important;
	}
}