/* =========================================================================
   Baniya Oasis — responsive.css
   Breakpoint overrides for tablet & mobile. Base styles are mobile-friendly;
   this file handles header collapse and the off-canvas mega menu.
   Designed to scale 320px → 2560px.
   ========================================================================= */

/* Ultra-wide: cap the readable line length but allow the grid to breathe. */
@media (min-width: 1800px) {
	:root { --bo-container: 1480px; }
}

/* ---------- Tablet & down ---------- */
@media (max-width: 1024px) {
	.bo-header__inner { grid-template-columns: auto 1fr auto; gap: 16px; }
	.bo-header__action-label { display: none; }
	.bo-header__action { padding: 10px; }
	.bo-nav__support { display: none; }
}

/* ---------- Mobile header & off-canvas mega menu ---------- */
@media (max-width: 900px) {
	.bo-mobile-toggle { display: flex; }

	/* Move search to a full-width row below the brand/actions. */
	.bo-header__inner {
		grid-template-columns: auto auto;
		grid-template-areas: "brand actions" "search search";
		row-gap: 14px;
	}
	.bo-header__brand { grid-area: brand; }
	.bo-header__actions { grid-area: actions; justify-self: end; }
	.bo-header__search { grid-area: search; max-width: none; }

	/* Off-canvas category menu. */
	.bo-nav { display: none; }
	.bo-mega__list {
		position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); border-radius: 0;
		box-shadow: var(--bo-shadow-lg); padding: 20px; overflow-y: auto; transform: translateX(-100%);
		transition: transform var(--bo-dur) var(--bo-ease); display: block; z-index: 120;
	}
	body.bo-menu-open .bo-mega__list { transform: translateX(0); }
	.bo-mega__panel { position: static; width: 100%; box-shadow: none; padding: 8px 0 8px 24px; display: none; }
	.bo-mega__item.is-expanded .bo-mega__panel { display: block; }
	.bo-mega__panel-inner { grid-template-columns: 1fr; gap: 12px; }
	.bo-mega__promo { display: none; }
	.bo-mega__sublist { columns: 1; }
	.bo-mega__caret { transition: transform var(--bo-dur); }
	.bo-mega__item.is-expanded .bo-mega__caret { transform: rotate(180deg); }

	/* The .bo-mega__toggle in the header opens the off-canvas via body class. */
	.bo-mega__toggle { display: none; }
}

/* ---------- Small phones ---------- */
@media (max-width: 600px) {
	.bo-section { padding-block: 44px; }
	.bo-section__head--row { flex-direction: column; align-items: flex-start; }
	.bo-logo__text { font-size: 1.1rem; }
	.bo-logo__mark { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.25rem; }
	.bo-countdown__unit { min-width: 54px; padding: 10px; }
	.bo-countdown__num { font-size: 1.3rem; }
	.bo-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
	.bo-cookie { flex-direction: column; align-items: flex-start; }
	.bo-whatsapp { width: 52px; height: 52px; bottom: 18px; right: 18px; }
	.bo-backtop { bottom: 80px; right: 18px; }
}

/* ---------- Very small (320px) safety ---------- */
@media (max-width: 360px) {
	.bo-container { padding-inline: 14px; }
	.bo-header__action-ico { font-size: 1.15rem; }
	.bo-btn { padding: 11px 18px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}