/* Drawers: mobile menu (left), cart drawer (right), mini-cart. Shared open/close plumbing is
   assets/js/site.js's starlight.drawer(); it toggles the `hidden` attribute, `.is-open` /
   `.is-entering` on the outer `.sl-drawer` and `html.sl-no-scroll` while a drawer is open below
   `lg` (1024px). */

/* Shared drawer chrome (outer root, backdrop, sliding panel). Each drawer's own root class
   (.sl-mobile-menu / .sl-cart-drawer) sets position/z-index/geometry; .sl-drawer-backdrop and
   .sl-drawer-panel are the two children starlight.drawer() finds by position. */
.sl-drawer {
	position: fixed;
	inset: 0;
}
/* Below the WordPress admin bar when logged in (--sl-adminbar-h, header.css). */
.admin-bar .sl-drawer { top: var(--sl-adminbar-h); }
.sl-drawer:not(.is-open) {
	pointer-events: none;
}
.sl-drawer-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / .4);
	opacity: 0;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity 380ms var(--sl-ease-apple);
}
.sl-drawer-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--sl-white);
	box-shadow: var(--sl-shadow-xl);
	overflow-y: auto;
	transition: transform 380ms var(--sl-ease-apple);
}
.sl-drawer--right .sl-drawer-panel {
	right: 0;
	transform: translateX(100%);
}
.sl-drawer--left .sl-drawer-panel {
	left: 0;
	transform: translateX(-100%);
}
.sl-drawer.is-open .sl-drawer-backdrop {
	opacity: 1;
}
.sl-drawer.is-open .sl-drawer-panel {
	transform: none;
}
.sl-drawer.is-entering .sl-stagger {
	animation: sl-fade-up 320ms var(--sl-ease-apple) both;
	animation-delay: calc(120ms + var(--sl-i, 0) * 40ms);
}
@keyframes sl-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Scroll lock (assets/js/site.js toggles this on <html> while a drawer is open below lg). */
html.sl-no-scroll {
	overflow: hidden;
}

/*
 * Mobile menu (template-parts/header/mobile-menu.php). Only ever opened below `lg` (its opener,
 * .sl-header__menu-btn, is hidden at lg in header.css); the `display: none` below is a safety net
 * in case the drawer is left open while the viewport grows past lg.
 */
.sl-mobile-menu {
	z-index: 60;
}
@media (min-width: 1024px) {
	.sl-mobile-menu {
		display: none;
	}
}
.sl-mobile-menu__panel {
	display: flex;
	flex-direction: column;
	width: 22rem;
	max-width: 88%;
	overflow: hidden;
}
.sl-mobile-menu__header {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1rem .75rem 1.25rem;
	border-bottom: 1px solid var(--sl-gray-100);
}
.sl-mobile-menu__logo-link { display: flex; align-items: center; min-width: 0; }
.sl-mobile-menu__panel .sl-mobile-menu__logo { width: auto; max-width: 9rem; height: 28px; object-fit: contain; }
.sl-mobile-menu__close { margin-right: -.25rem; }
.sl-mobile-menu__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem;
}
.sl-mobile-menu__body > * + * { margin-top: 1.5rem; }
.sl-mobile-menu__label {
	margin-bottom: .5rem;
	color: var(--sl-gray-400);
	font-family: var(--sl-font-mono);
	font-size: .6875rem;
	line-height: 1rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Categories: roomy rows (48px), hairline dividers, optional thumbnail, round expand button.
   .sl-mobile-cats__row/__link/__sublink/__sublist and .sl-acc-toggle come from
   inc/menus.php's Starlight_Menu_Walker 'mobile' variant (and the fallback list). */
.sl-mobile-cats { margin: 0; padding: 0; list-style: none; }
.sl-mobile-cats > li + li { border-top: 1px solid var(--sl-gray-100); }
.sl-mobile-cats__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 3rem;
}
.sl-mobile-cats__link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: .75rem;
	min-width: 0;
	padding: .625rem 0;
	color: var(--sl-black);
	font-size: .9375rem;
	line-height: 1.25rem;
	font-weight: 600;
}
.sl-mobile-cats__link[aria-current="page"],
.sl-mobile-cats__sublink[aria-current="page"] { color: var(--sl-amber-600); }
.sl-mobile-cats__img {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: var(--sl-r-img);
	background: var(--sl-gray-50);
	object-fit: cover;
	box-shadow: 0 0 0 1px var(--sl-gray-100);
}
.sl-acc-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--sl-radius-full);
	transition: background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-acc-toggle:hover,
.sl-acc-toggle[aria-expanded="true"] { background: var(--sl-gray-100); }
.sl-acc-toggle__icon {
	color: var(--sl-gray-500);
	transition: transform 250ms var(--sl-ease-apple);
}
.sl-acc-toggle[aria-expanded="true"] .sl-acc-toggle__icon { transform: rotate(180deg); }
.sl-mobile-cats__sublist {
	margin: 0 0 .75rem;
	padding: .25rem 0 .25rem .875rem;
	border-left: 2px solid var(--sl-gray-100);
	list-style: none;
}
.sl-mobile-cats__img ~ * { min-width: 0; }
.sl-mobile-cats__sublink {
	display: block;
	padding: .5rem 0;
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.25rem;
}
.sl-mobile-cats__sublink:hover { color: var(--sl-black); }
.sl-mobile-menu__all {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-top: .75rem;
	color: var(--sl-black);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.sl-mobile-menu__all:hover { color: var(--sl-amber-600); }

/* Primary menu: rows with a trailing arrow. */
.sl-mobile-menu__primary { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sl-gray-100); }
.sl-mobile-menu__primary > li { border-bottom: 1px solid var(--sl-gray-100); }
.sl-mobile-menu__primary a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3rem;
	color: var(--sl-black);
	font-size: .9375rem;
	font-weight: 500;
}
.sl-mobile-menu__primary a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: .375rem;
	border-top: 1.5px solid var(--sl-gray-400);
	border-right: 1.5px solid var(--sl-gray-400);
	transform: rotate(45deg);
}
.sl-mobile-menu__primary .current-menu-item > a { color: var(--sl-amber-600); }

/* Pinned contact footer. */
.sl-mobile-menu__footer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .875rem 1.25rem calc(.875rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--sl-gray-100);
	background: var(--sl-gray-50);
}
.sl-mobile-menu__contact { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sl-mobile-menu__phone {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
}
.sl-mobile-menu__phone .sl-icon { color: var(--sl-amber-600); }
.sl-mobile-menu__hours {
	overflow: hidden;
	color: var(--sl-gray-500);
	font-size: .75rem;
	line-height: 1rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sl-mobile-menu__messengers { display: flex; flex: 0 0 auto; gap: .375rem; }
.sl-mobile-menu__messenger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-radius-full);
	background: var(--sl-white);
	color: var(--sl-gray-700);
}
.sl-mobile-menu__messenger:hover { border-color: var(--sl-black); color: var(--sl-black); }

/*
 * Cart drawer (template-parts/header/cart-drawer.php + woocommerce/cart/mini-cart.php).
 */
.sl-cart-drawer {
	z-index: 70;
}
.sl-cart-drawer-panel {
	width: 420px;
	max-width: 92%;
	display: flex;
	flex-direction: column;
}
.sl-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--sl-gray-200);
}
.sl-cart-drawer__title {
	font-family: var(--sl-font-display);
	font-weight: 700;
	letter-spacing: .025em;
}
.sl-cart-drawer__close {
	margin-right: -.5rem;
}
/* Cart drawer body: WooCommerce's cart-fragment refresh replaces `div.widget_shopping_cart_
   content` with a bare `<div class="widget_shopping_cart_content">` (template-parts/header/
   cart-drawer.php's own classes are lost), so the drawer body layout is pinned here by
   structure instead. */
.sl-cart-drawer-panel > .widget_shopping_cart_content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.5rem;
}
.sl-cart-drawer-panel > .widget_shopping_cart_content > .sl-cart-drawer-footer {
	margin-top: auto;
}

/* Mini-cart list + row (woocommerce/cart/mini-cart.php): one-row grid that collapses on remove
   (assets/js/site.js "Cart drawer"). */
.sl-mini-cart-list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 0%;
}
.sl-mini-cart-row {
	display: grid;
	grid-template-rows: 1fr;
	border-bottom: 1px solid var(--sl-gray-100);
	transition: grid-template-rows 280ms var(--sl-ease-apple), opacity 200ms var(--sl-ease-apple), border-color 280ms var(--sl-ease-apple);
}
.sl-mini-cart-row:last-child {
	border-bottom: 0;
}
.sl-mini-cart-row-inner {
	min-height: 0;
	min-width: 0; /* keeps the item name's truncation working inside the grid cell */
}
.sl-mini-cart-row.is-removing {
	grid-template-rows: 0fr;
	opacity: 0;
	border-bottom-color: transparent;
	pointer-events: none;
}
.sl-mini-cart-row.is-removing > .sl-mini-cart-row-inner {
	overflow: hidden;
}
.sl-mini-cart-row__content {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem 0;
}
.sl-mini-cart-row__body {
	min-width: 0;
	flex: 1 1 0%;
}
.sl-mini-cart-row__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
}
.sl-mini-cart-row__info {
	min-width: 0;
}
.sl-mini-cart-row__name {
	display: block;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.sl-mini-cart-row__name:hover {
	color: var(--sl-accent);
}
.sl-mini-cart-row__sku {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	color: var(--sl-gray-500);
	margin-top: .125rem;
}
.sl-mini-cart-item-data {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-600);
	margin-top: .25rem;
}
.sl-mini-cart-item-data .variation {
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-600);
}
.sl-mini-cart-item-data .variation dt,
.sl-mini-cart-item-data .variation p {
	display: inline;
	margin: 0;
}
.sl-mini-cart-row__remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--sl-radius-full);
	color: var(--sl-gray-400);
	font-size: 1.125rem;
	line-height: 1;
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-mini-cart-row__remove:hover {
	color: var(--sl-red-600);
	background-color: var(--sl-red-50);
}
.sl-mini-cart-row__qty {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	line-height: 1rem;
	color: var(--sl-gray-700);
	margin-top: .5rem;
}

/* Mini-cart thumbnails: 80x80, rounded, on var(--sl-off-white). Must beat woocommerce.css's `.woocommerce
   ul.product_list_widget li img { width: 32px; float: right }` (0,2,3); the never-matching id
   in body:not(#sl-btn) lifts this to (1,2,2). */
.sl-mini-cart-thumb {
	flex-shrink: 0;
}
body:not(#sl-btn) .woocommerce-mini-cart .sl-mini-cart-thumb {
	display: block;
	width: 80px;
	height: 80px;
}
body:not(#sl-btn) .woocommerce-mini-cart .sl-mini-cart-thumb img {
	display: block;
	float: none;
	width: 80px;
	height: 80px;
	max-width: none;
	margin: 0;
	border-radius: var(--sl-r-img);
	object-fit: cover;
	background-color: var(--sl-off-white);
	box-shadow: none;
}

/* Footer (subtotal + buttons). */
.sl-cart-drawer-footer {
	border-top: 1px solid var(--sl-gray-200);
	padding-top: 1rem;
	margin-top: .5rem;
}
.sl-cart-drawer__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	margin-bottom: 1rem;
}
.sl-cart-drawer .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
/* Mini-cart "View cart" (secondary) / "Checkout" (accent) buttons: full-width rows; their look
   is the button system's (assets/css/buttons.css). */
.sl-cart-drawer .woocommerce-mini-cart__buttons a {
	width: 100%;
}

/* Empty cart drawer state, scoped under .sl-cart-drawer: woocommerce/cart/cart-empty.php (the
   full /cart/ page) reuses the bare .sl-cart-empty class name with its own utility classes, not
   yet migrated — do not style it unscoped here. */
.sl-cart-drawer .sl-cart-empty {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3rem 0;
}
.sl-icon.sl-cart-empty__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--sl-gray-300);
	margin-bottom: 1rem;
}
.sl-cart-drawer .woocommerce-mini-cart__empty-message {
	font-size: .875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--sl-black);
	margin-bottom: .5rem;
}
.sl-cart-drawer .sl-cart-empty__cta {
	margin-top: .5rem;
}

/* Header cart count "bump" when the fragment value changes (assets/js/site.js "Header cart
   count bump"). */
.sl-cart-count.is-bumping {
	animation: sl-bump 300ms var(--sl-ease-apple);
}
@keyframes sl-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.sl-drawer-backdrop,
	.sl-drawer-panel,
	.sl-mini-cart-row {
		transition: none;
	}
	.sl-drawer.is-entering .sl-stagger,
	.sl-cart-count.is-bumping {
		animation: none;
	}
}