/* NoirMusk — app-style mobile layer: bottom tab bar + sticky action bars (phones only, 767px and below).
   The bars sit just under the sticky header's layer (z-index 9), so the dropdown menu still covers them when open. */

.noirmusk-tabbar,
.noirmusk-stickybar {
	display: none;
}

@media (max-width: 767px) {

	:root {
		--noirmusk-tabbar-h: 62px;
		--noirmusk-stickybar-h: 76px;
	}

	/* ---------- bottom tab bar ---------- */
	body.noirmusk-has-tabbar .noirmusk-tabbar {
		position: fixed;
		z-index: 8;
		left: 0;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		height: calc(var(--noirmusk-tabbar-h) + env(safe-area-inset-bottom, 0px));
		padding-bottom: env(safe-area-inset-bottom, 0px);
		border-top: 1px solid #ece7de;
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
		box-shadow: 0 -8px 24px -14px rgba(26, 26, 26, 0.25);
	}
	.noirmusk-tabbar__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		min-width: 0;
		color: #8c867c;
		font-family: var(--theme-body-font-family), 'Inter', sans-serif;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.02em;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.2s ease, transform 0.15s ease;
	}
	.noirmusk-tabbar__item:active {
		transform: scale(0.92);
	}
	.noirmusk-tabbar__item.is-active {
		color: #a3703f;
	}
	.noirmusk-tabbar__item.is-active::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 26px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background: #a3703f;
		transform: translateX(-50%);
	}
	.noirmusk-tabbar__icon {
		position: relative;
		display: block;
		width: 24px;
		height: 24px;
	}
	.noirmusk-tabbar__icon svg {
		display: block;
	}
	.noirmusk-tabbar__count {
		position: absolute;
		top: -7px;
		left: 13px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 9px;
		background: #1a1a1a;
		font-size: 10px;
		font-weight: 700;
		line-height: 13px;
		text-align: center;
		color: #fff;
	}
	.noirmusk-tabbar__count[hidden] {
		display: none;
	}

	/* ---------- sticky action bar ---------- */
	body.noirmusk-has-stickybar .noirmusk-stickybar {
		position: fixed;
		z-index: 8;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		gap: 16px;
		box-sizing: border-box;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #ece7de;
		background: rgba(255, 255, 255, 0.97);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
		box-shadow: 0 -8px 24px -14px rgba(26, 26, 26, 0.25);
		transform: translateY(110%);
		transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
		pointer-events: none;
	}
	body.noirmusk-has-stickybar .noirmusk-stickybar.is-visible {
		transform: none;
		pointer-events: auto;
	}
	.noirmusk-stickybar__info {
		display: flex;
		flex: 0 1 auto;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
	}
	.noirmusk-stickybar__label {
		overflow: hidden;
		max-width: 150px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 1.2;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
		color: #8c867c;
	}
	.noirmusk-stickybar__amount,
	.noirmusk-stickybar__amount .amount,
	.noirmusk-stickybar__amount bdi {
		font-family: var(--theme-body-font-family), 'Inter', sans-serif;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: #1a1a1a;
	}
	.noirmusk-stickybar__amount del,
	.noirmusk-stickybar__amount del .amount {
		font-size: 13px;
		font-weight: 400;
		color: #8c867c;
	}
	.noirmusk-stickybar__amount ins {
		text-decoration: none;
	}
	.noirmusk-stickybar__btn {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		height: 50px;
		margin: 0;
		padding: 0 20px;
		border: 0;
		border-radius: 4px;
		background: #1a1a1a;
		box-shadow: none;
		font-family: var(--theme-body-font-family), 'Inter', sans-serif;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-decoration: none;
		color: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s ease, transform 0.15s ease;
	}
	.noirmusk-stickybar__btn:active {
		background: #a3703f;
		transform: scale(0.98);
	}
	.noirmusk-stickybar__btn.is-done {
		background: #a3703f;
	}
	.noirmusk-stickybar__btn.is-busy {
		opacity: 0.7;
		pointer-events: none;
	}

	/* the page's own footer leaves room for the bar so nothing hides behind it */
	body.noirmusk-has-tabbar .noirmusk-footer {
		padding-bottom: calc(var(--noirmusk-tabbar-h) + env(safe-area-inset-bottom, 0px));
	}
	body.noirmusk-has-stickybar .noirmusk-footer {
		padding-bottom: calc(var(--noirmusk-stickybar-h) + env(safe-area-inset-bottom, 0px));
	}

	/* hide the bars while a text field is being typed in (the on-screen keyboard would push them over the field) */
	html.noirmusk-typing .noirmusk-tabbar,
	html.noirmusk-typing .noirmusk-stickybar {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.noirmusk-stickybar,
	.noirmusk-tabbar__item,
	.noirmusk-stickybar__btn {
		transition: none;
	}
}

/* =====================================================================================================
   App top bar + menu drawer (phones, 767px and below)
   Account and Cart live in the bottom tab bar, so the top bar keeps only: back (inner pages) · monogram · search · menu.
   ===================================================================================================== */

.noirmusk-appbar__back,
.noirmusk-appbar__mark,
.noirmusk-drawer,
.noirmusk-drawer-overlay {
	display: none;
}

@media (max-width: 767px) {

	a,
	button,
	input[type="submit"] {
		-webkit-tap-highlight-color: transparent;
	}

	/* ---------- the bar ---------- */
	html body #site-header.site-header--default {
		border-bottom: 1px solid #ece7de;
		box-shadow: none;
		transition: box-shadow 0.25s ease, border-color 0.25s ease;
	}
	html body #site-header.site-header--default.is-scrolled {
		border-bottom-color: transparent;
		box-shadow: 0 8px 22px -14px rgba(26, 26, 26, 0.32);
	}
	html body #site-header.site-header--default > .container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 64px;
		padding: 0 6px !important;
	}

	/* brand: the same logo as on desktop, left-aligned */
	html body #site-header .site-branding {
		position: static;
		order: 1;
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 auto 0 0;
		padding-left: 14px;
		transform: none;
	}
	body.noirmusk-app-inner #site-header .site-branding {
		padding-left: 4px;
	}
	html body #site-header .site-branding > a {
		display: block;
		line-height: 0;
	}
	html body #site-header .site-branding img {
		display: block;
		width: auto;
		max-width: none;
		height: 54px;
	}
	html body #site-header .noirmusk-appbar__mark {
		display: none;
	}

	/* back button (inner pages only) */
	body.noirmusk-app-inner .noirmusk-appbar__back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		order: 0;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		color: #1a1a1a;
		cursor: pointer;
		transition: background-color 0.15s ease;
	}
	body.noirmusk-app-inner .noirmusk-appbar__back:active {
		background: #f3eee4;
	}

	/* right side: search (+ account and cart only where there is no tab bar) and the menu button */
	html body #site-header .site-header-icons {
		order: 2;
		gap: 0;
		margin: 0;
	}
	html body #site-header .site-header-icons__btn {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		transition: background-color 0.15s ease;
	}
	html body #site-header .site-header-icons__btn:active {
		background: #f3eee4;
	}
	/* cart count: the buttons are 44px tap targets now, so the badge sits on the icon's top-right corner, not outside the button */
	html body #site-header .site-header-icons__count {
		top: 4px;
		right: 3px;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 9px;
		line-height: 14px;
	}
	html body.noirmusk-has-tabbar #site-header .site-header-icons__account,
	html body.noirmusk-has-tabbar #site-header .site-header-icons__cart {
		display: none;
	}
	html body #site-header .site-navigation {
		order: 3;
		flex: none;
		margin: 0;
	}
	html body #site-header .site-nav-toggleicon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #1a1a1a;
		transition: background-color 0.15s ease;
	}
	html body #site-header .site-nav-toggleicon:active {
		background: #f3eee4;
	}
	/* the theme's own dropdown menu is replaced by the drawer below */
	html body #site-header .site-navigation > ul,
	html body #site-header .site-navigation .menu {
		display: none !important;
	}

	/* ---------- menu drawer ---------- */
	.noirmusk-drawer-overlay {
		position: fixed;
		z-index: 10002;
		inset: 0;
		display: block;
		background: rgba(20, 18, 15, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}
	body.noirmusk-drawer-open .noirmusk-drawer-overlay {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
	body.noirmusk-drawer-open {
		overflow: hidden;
	}
	.noirmusk-drawer {
		position: fixed;
		z-index: 10003;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		width: min(88vw, 350px);
		box-sizing: border-box;
		overflow: hidden;
		padding-top: env(safe-area-inset-top, 0px);
		border-radius: 22px 0 0 22px;
		background: #fff;
		box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.45);
		transform: translateX(105%);
		visibility: hidden;
		transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.36s;
	}
	body.noirmusk-drawer-open .noirmusk-drawer {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	/* header: monogram + name, close button */
	.noirmusk-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 12px 10px 20px;
		border-bottom: 1px solid #f0eadf;
		background: linear-gradient(180deg, #fbf7ef 0%, #fff 100%);
	}
	.noirmusk-drawer__logo {
		display: flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: #1a1a1a;
	}
	.noirmusk-drawer__mark {
		display: block;
		width: auto;
		height: 56px;
	}
	.noirmusk-drawer__brand {
		font-family: var(--theme-heading-font-family);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.2em;
		line-height: 1;
		text-transform: uppercase;
	}
	.noirmusk-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: #f3eee4;
		color: #1a1a1a;
		cursor: pointer;
		transition: background-color 0.15s ease, transform 0.15s ease;
	}
	.noirmusk-drawer__close:active {
		background: #e9e1d2;
		transform: scale(0.94);
	}

	/* rows */
	.noirmusk-drawer__nav {
		flex: 1 1 auto;
		padding: 10px 12px 6px;
		overflow-y: auto;
		scrollbar-width: none;
		overscroll-behavior: contain;
	}
	.noirmusk-drawer__nav::-webkit-scrollbar {
		display: none;
	}
	.noirmusk-drawer__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.noirmusk-drawer__list li {
		margin: 0 0 4px;
		padding: 0;
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	body.noirmusk-drawer-open .noirmusk-drawer__list li {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--i, 0) * 45ms + 140ms);
	}
	.noirmusk-drawer__list a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 8px 14px 8px 10px;
		border-radius: 14px;
		text-decoration: none;
		color: #1a1a1a;
		transition: background-color 0.15s ease;
	}
	.noirmusk-drawer__list a:active {
		background: #faf6ee;
	}
	.noirmusk-drawer__icon {
		display: flex;
		flex: 0 0 40px;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f6efe2;
		color: #a3703f;
		transition: background-color 0.2s ease, color 0.2s ease;
	}
	.noirmusk-drawer__icon svg {
		display: block;
	}
	.noirmusk-drawer__text {
		flex: 1 1 auto;
		min-width: 0;
		font-family: var(--theme-body-font-family), 'Inter', sans-serif;
		font-size: 16.5px;
		font-weight: 500;
		line-height: 1.3;
	}
	.noirmusk-drawer__list a::after {
		content: '';
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border: solid #cfc5b3;
		border-width: 2px 2px 0 0;
		transform: rotate(45deg);
	}
	/* the page you are on */
	.noirmusk-drawer__list .is-current a {
		background: #faf6ee;
	}
	.noirmusk-drawer__list .is-current .noirmusk-drawer__icon {
		background: #a3703f;
		color: #fff;
	}
	.noirmusk-drawer__list .is-current .noirmusk-drawer__text {
		font-weight: 600;
	}
	.noirmusk-drawer__list .is-current a::after {
		border-color: #a3703f;
	}

	/* help links: smaller, quieter */
	.noirmusk-drawer__label {
		margin: 12px 0 4px;
		padding: 12px 10px;
		border-top: 1px solid #f0eadf;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.14em;
		line-height: 1.3;
		text-transform: uppercase;
		color: #8c867c;
	}
	.noirmusk-drawer__list--help a {
		gap: 12px;
		padding: 5px 14px 5px 10px;
	}
	.noirmusk-drawer__list--help .noirmusk-drawer__icon {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		background: #f6f3ee;
		color: #6b665d;
	}
	.noirmusk-drawer__list--help .noirmusk-drawer__icon svg {
		width: 19px;
		height: 19px;
	}
	.noirmusk-drawer__list--help .noirmusk-drawer__text {
		font-size: 15px;
		font-weight: 400;
		color: #3d3931;
	}

	/* footer: contact, social, tagline */
	.noirmusk-drawer__foot {
		padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #f0eadf;
		background: #faf8f4;
	}
	.noirmusk-drawer__contact {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.noirmusk-drawer__contact a {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 5px 0;
		font-size: 14px;
		text-decoration: none;
		color: #4a463f;
	}
	.noirmusk-drawer__contact svg {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		color: #a3703f;
	}
	.noirmusk-drawer__social {
		display: flex;
		gap: 10px;
		margin: 10px 0 10px;
	}
	.noirmusk-drawer__social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid #e6dfd0;
		border-radius: 50%;
		background: #fff;
		color: #1a1a1a;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	}
	.noirmusk-drawer__social a:active {
		border-color: #a3703f;
		background: #a3703f;
		color: #fff;
	}
	.noirmusk-drawer__social svg {
		width: 19px;
		height: 19px;
	}
	.noirmusk-drawer__tagline {
		margin: 0;
		font-family: var(--theme-heading-font-family);
		font-size: 14px;
		font-style: italic;
		line-height: 1.4;
		color: #a3703f;
	}

	/* ---------- press feedback on cards and buttons ---------- */
	ul.products li.product {
		transition: transform 0.15s ease;
	}
	ul.products li.product:active {
		transform: scale(0.985);
	}
	.button:active,
	.noirmusk-btn-dark:active {
		transform: scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.noirmusk-drawer,
	.noirmusk-drawer-overlay,
	#site-header.site-header--default {
		transition: none !important;
	}
}