/* =========================================================================
   Naomi Pet House — mobile.css
   Bottom navigation + responsive behaviour.
   ========================================================================= */

/* ---- Bottom navigation (mobile only) --------------------------------- */

.naomi-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	height: var(--naomi-bottom-nav-h, 64px);
	background-color: var(--naomi-bg, #fff);
	border-top: 1px solid var(--naomi-border, #F0F0F0);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.naomi-bottom-nav__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 8px 4px;
	color: var(--naomi-muted, #666);
	text-decoration: none;
	transition: color 0.15s ease;
}

.naomi-bottom-nav__item:hover {
	text-decoration: none;
	color: var(--naomi-dark, #1A1A1A);
}

.naomi-bottom-nav__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.naomi-bottom-nav__label {
	font-family: var(--naomi-font-head, 'Plus Jakarta Sans', sans-serif);
	font-weight: 500;
	font-size: 11px;
	line-height: 1;
}

/* Active item: red icon + red label */
.naomi-bottom-nav__item.is-active {
	color: var(--naomi-primary, #E8192C);
}

.naomi-bottom-nav__item.is-active .naomi-bottom-nav__icon,
.naomi-bottom-nav__item.is-active .naomi-bottom-nav__label {
	color: var(--naomi-primary, #E8192C);
}

/* Hide the bottom nav on desktop (>= 768px) */
@media (min-width: 768px) {
	.naomi-bottom-nav {
		display: none;
	}
}

/* Reserve space on mobile so content is never hidden behind the nav bar */
@media (max-width: 767.98px) {
	body {
		padding-bottom: calc(var(--naomi-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
	}

	/* Desktop header nav is hidden on mobile — the bottom nav takes over */
	.naomi-nav {
		display: none;
	}
}

/* ---- Responsive layout tweaks ---------------------------------------- */

@media (max-width: 767.98px) {

	.naomi-section {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.naomi-hero {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.naomi-hero__title {
		font-size: 26px;
	}

	.naomi-hero__buttons .wp-block-button {
		flex: 1 1 100%;
	}

	.naomi-hero__buttons .wp-block-button__link {
		width: 100%;
	}

	/* Categories become a horizontal scroller on mobile */
	.naomi-categories {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 4px;
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.naomi-categories::-webkit-scrollbar {
		display: none;
	}

	.naomi-category-card {
		flex: 0 0 120px;
		scroll-snap-align: start;
	}

	/* 2-column product grids on mobile */
	ul.products,
	.naomi-products-grid ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}

	/* Block-based archive grid (post-template) → 2 columns on mobile */
	.naomi-products-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}

	/* Shop layout stacks; filters collapse behind the "Φίλτρα" toggle */
	.naomi-shop__layout {
		display: block;
	}

	.naomi-filters {
		position: static;
		flex-basis: auto;
		margin-bottom: 16px;
		display: none;
	}

	.naomi-filters.is-open {
		display: block;
	}

	.naomi-filters-toggle {
		display: inline-flex;
	}

	/* Subcategory chips scroll horizontally on small screens */
	.naomi-subcats {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -16px;
		padding: 0 16px 4px;
	}

	.naomi-subcats::-webkit-scrollbar {
		display: none;
	}

	.naomi-subcat-card {
		flex: 0 0 auto;
	}

	/* Single product stacks vertically */
	.naomi-single-product {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 32px;
	}

	/* Pet card stacks */
	.naomi-pet-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.naomi-pet-card__stats {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Reminder card stacks the CTA below */
	.naomi-reminder-card {
		flex-wrap: wrap;
	}

	.naomi-btn--reminder {
		width: 100%;
		margin-top: 8px;
	}

	/* My Account: sidebar becomes full-width stacked list */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation {
		width: 100%;
		flex-basis: auto;
		margin-bottom: 20px;
	}

	/* Footer columns stack */
	.naomi-footer__grid {
		flex-direction: column;
		gap: 24px;
	}
}

/* Tablet: 3-column product grids stay, hero a touch tighter */
@media (min-width: 768px) and (max-width: 1024px) {
	ul.products,
	.naomi-products-grid ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Hero text + photo stay side by side but the photo shrinks. */
	.naomi-hero__art {
		max-width: 380px;
	}
	.naomi-usp__in {
		grid-template-columns: repeat(2, 1fr);
		gap: 4px 16px;
	}
}

/* ---- Redesigned homepage: responsive ---------------------------------- */
@media (max-width: 767.98px) {

	/* Hero stacks: bold copy first, framed photo below. */
	.naomi-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: left;
	}
	.naomi-hero__art {
		max-width: 320px;
		margin: 0 auto;
	}
	.naomi-hero__chip {
		display: none;
	}
	.naomi-hero__sub {
		font-size: 16px;
	}
	.naomi-hero__btns .naomi-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* USP: 2 columns */
	.naomi-usp__in {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	/* Category cards stack full width */
	.naomi-cats {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.naomi-cat {
		aspect-ratio: 16 / 11;
	}

	/* Story: image on top, text below */
	.naomi-story2__in {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 8px;
	}
	.naomi-story2__img {
		aspect-ratio: 16 / 11;
		max-height: 320px;
	}

	/* Section header stacks (title over the "see all" link) */
	.naomi-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-bottom: 20px;
	}
}