/**
 * DeShop — mobile.css
 *
 * Loaded only below 768px (media attribute), so desktops never download
 * the rules. Bottom tab bar, full-screen filters, sort sheet swap and
 * spacing for fixed bars.
 *
 * @package DeShop
 */

/* Bottom tab bar ----------------------------------------------------------------- */

.has-bottom-nav {
	--ds-bottom-nav-h: 64px;
}

.has-bottom-nav .site {
	padding-bottom: calc(var(--ds-bottom-nav-h) + var(--ds-safe-bottom));
}

.bottom-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--ds-z-bottom-nav);
	display: block;
	padding-bottom: var(--ds-safe-bottom);
	border-top: 1px solid var(--ds-border);
	background: rgb(255 255 255 / 92%);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}

.bottom-nav__list {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	height: var(--ds-bottom-nav-h);
	margin: 0;
	padding: 0 max(var(--ds-safe-left), 4px) 0 max(var(--ds-safe-right), 4px);
	list-style: none;
}

.bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ds-text-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.bottom-nav__item:active .bottom-nav__icon {
	transform: scale(0.9);
}

.bottom-nav__item.is-active,
.bottom-nav__item[aria-expanded="true"] {
	color: var(--ds-primary);
}

.bottom-nav__item.is-active .bottom-nav__label {
	font-weight: 600;
}

.bottom-nav__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 28px;
	border-radius: var(--ds-radius-full);
	transition:
		background-color var(--ds-dur-fast) var(--ds-ease),
		transform var(--ds-dur-fast) var(--ds-ease);
}

.bottom-nav__item.is-active .bottom-nav__icon {
	background: var(--ds-primary-soft);
}

.bottom-nav__icon .ds-count {
	top: -4px;
	right: 2px;
}

.bottom-nav__item.is-bump .bottom-nav__icon {
	animation: ds-bump 450ms var(--ds-ease);
}

@keyframes ds-bump {
	30% {
		transform: scale(1.18) translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bottom-nav__item.is-bump .bottom-nav__icon {
		animation: none;
	}
}

/* Toasts float above the bar. */
.has-bottom-nav .ds-toasts {
	bottom: calc(var(--ds-bottom-nav-h) + var(--ds-safe-bottom) + var(--ds-space-sm));
}

/* The header search/cart duplicate the bar: keep the header light. */
.bottom-nav-has-cart .header-action--cart {
	display: none;
}

/* Filters: full screen on phones ---------------------------------------------------- */

.shop-filters.ds-drawer {
	width: 100vw;
}

/* Sort: bottom sheet button replaces the select ---------------------------------------- */

.js .shop-toolbar__sort {
	display: none;
}

.js .shop-toolbar__sort-btn {
	display: inline-flex;
	margin-inline-start: auto;
}

/* Sticky add-to-cart sits where the bottom bar would be. */
.has-sticky-atc .ds-toasts {
	bottom: calc(76px + var(--ds-safe-bottom));
}