/* ==========================================================================
   PurOstill V2 — header, category drawer
   ========================================================================== */

.v2-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	width: 100%;
	border-bottom: 1px solid var(--v2-line);
	background: color-mix(in srgb, var(--v2-surface) 82%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.v2-header__inner { width: 100%; }

.v2-header__bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; padding: 1rem 0; white-space: nowrap;
}

.v2-header__spacer { height: var(--v2-header-h); }

/* Brand ------------------------------------------------------------------ */

.v2-brand { display: inline-flex; align-items: center; gap: .75rem; color: inherit; }
.v2-brand__logo { display: inline-flex; align-items: center; }
.v2-brand__img { max-height: 46px; width: auto; object-fit: contain; }
.v2-brand__name { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--v2-ink); }
.v2-brand:hover .v2-brand__name { color: var(--v2-accent); }

/* Primary links ---------------------------------------------------------- */

.v2-header__nav { display: flex; align-items: center; gap: 2rem; }

.v2-header__link {
	display: inline-flex; align-items: center;
	color: var(--v2-ink); font-size: .95rem; font-weight: 600;
	transition: color .2s ease;
}
.v2-header__link:hover, .v2-header__link.is-current { color: var(--v2-accent); }
.v2-header__caret { display: inline-flex; margin-left: .25rem; }

.v2-header__dropdown { position: relative; }
.v2-header__menu {
	position: absolute; top: 100%; left: 0;
	min-width: 220px; padding: .6rem 0;
	background: var(--v2-surface);
	border: 1px solid var(--v2-line);
	border-radius: .8rem;
	box-shadow: 0 12px 30px rgba(var(--v2-ink-rgb), .14);
	z-index: 1000;
	animation: v2-drop .18s ease;
}
@keyframes v2-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.v2-header__menu-item {
	display: block; padding: .7rem 1.2rem;
	color: var(--v2-ink); font-size: .9rem; font-weight: 500;
	transition: background .2s ease, color .2s ease;
}
.v2-header__menu-item:hover { background: rgba(var(--v2-accent-rgb), .08); color: var(--v2-accent); }

/* Actions ---------------------------------------------------------------- */

.v2-header__actions { display: flex; align-items: center; gap: .5rem; }

.v2-header__icon {
	position: relative;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid color-mix(in srgb, var(--v2-line) 60%, var(--v2-muted));
	border-radius: 12px;
	background: color-mix(in srgb, var(--v2-surface) 90%, transparent);
	color: var(--v2-ink);
	cursor: pointer;
	transition: border-color .2s ease, transform .2s ease, color .2s ease;
}
.v2-header__icon svg { width: 20px; height: 20px; }
.v2-header__icon:hover { border-color: var(--v2-accent); color: var(--v2-accent); transform: translateY(-1px); }

.v2-header__badge {
	position: absolute; top: -6px; right: -6px;
	min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 999px; border: 2px solid var(--v2-surface);
	background: var(--v2-sale); color: #fff;
	font-size: .7rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

.v2-header__burger { width: 44px; height: 44px; }
@media (min-width: 901px) {
	.v2-header__burger { margin-left: .35rem; }
}

.v2-burger { position: relative; display: inline-flex; width: 20px; height: 16px; }
.v2-burger span {
	position: absolute; left: 0; width: 20px; height: 2.5px;
	border-radius: 2px; background: currentColor;
	transition: transform .3s ease, opacity .2s ease;
}
.v2-burger span:nth-child(1) { top: 0; }
.v2-burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.v2-burger span:nth-child(3) { bottom: 0; }

.v2-header__burger[aria-expanded="true"] .v2-burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.v2-header__burger[aria-expanded="true"] .v2-burger span:nth-child(2) { opacity: 0; }
.v2-header__burger[aria-expanded="true"] .v2-burger span:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* Scrim, shared with the cart drawer -------------------------------------- */

.v2-scrim {
	position: fixed; inset: 0; z-index: 110;
	background: rgba(var(--v2-ink-rgb), .45);
	opacity: 0; transition: opacity .3s ease;
}
.v2-scrim.is-open { opacity: 1; }

/* Category drawer --------------------------------------------------------- */

.v2-drawer {
	position: fixed; top: 0; right: 0; z-index: 120;
	width: min(420px, 92vw); height: 100vh;
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--v2-surface);
	box-shadow: -12px 0 32px rgba(var(--v2-ink-rgb), .2);
	transform: translateX(101%);
	transition: transform .3s ease;
	visibility: hidden;
}
.v2-drawer.is-open { transform: none; visibility: visible; }

.v2-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--v2-line);
}
.v2-drawer__title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.v2-drawer__subtitle { margin: .25rem 0 0; font-size: .85rem; color: var(--v2-muted); }

.v2-drawer__close {
	width: 36px; height: 36px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid color-mix(in srgb, var(--v2-line) 60%, var(--v2-muted));
	border-radius: 10px; background: var(--v2-surface); color: var(--v2-ink);
	cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.v2-drawer__close svg { width: 16px; height: 16px; }
.v2-drawer__close:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

.v2-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem 1.5rem; }
.v2-drawer__status { font-size: .85rem; color: var(--v2-muted); }

.v2-drawer__list { list-style: none; margin: 0; padding: 0; }
.v2-drawer__list--sub { margin-left: 1.1rem; padding-left: .75rem; border-left: 1px solid var(--v2-line); }
.v2-drawer__item + .v2-drawer__item { margin-top: .25rem; }

.v2-drawer__row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }

.v2-drawer__caret {
	width: 34px; height: 34px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--v2-line); border-radius: 10px;
	background: color-mix(in srgb, var(--v2-bg) 70%, var(--v2-surface));
	color: var(--v2-ink); cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.v2-drawer__caret:hover { border-color: var(--v2-accent); }
.v2-drawer__caret[aria-expanded="true"] { border-color: var(--v2-accent); background: rgba(var(--v2-accent-rgb), .08); }
.v2-drawer__caret-icon { display: inline-flex; transform: rotate(-90deg); transition: transform .2s ease; }
.v2-drawer__caret-icon svg { width: 16px; height: 16px; }
.v2-drawer__caret[aria-expanded="true"] .v2-drawer__caret-icon { transform: rotate(0deg); }
.v2-drawer__caret-gap { width: 34px; height: 34px; flex: none; }

.v2-drawer__link {
	flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
	color: var(--v2-ink); font-weight: 600; line-height: 1.4;
}
.v2-drawer__link:hover, .v2-drawer__link.is-current { color: var(--v2-accent); }
.v2-drawer__count { font-size: .75rem; font-weight: 600; color: var(--v2-muted); }

.v2-drawer__foot {
	padding: 1rem 1.5rem 1.5rem;
	border-top: 1px solid var(--v2-line);
	display: grid; gap: .6rem;
}
.v2-drawer__foot-link {
	padding: .75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--v2-line) 65%, var(--v2-muted));
	border-radius: 12px;
	background: var(--v2-surface); color: var(--v2-ink);
	font-weight: 600; text-align: center;
}
.v2-drawer__foot-link:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

/* Small screens ----------------------------------------------------------- */

@media (max-width: 900px) {
	.v2-header__nav { display: none; }
}
@media (min-width: 901px) {
	/* The header already shows these links, so the panel stays about
	   categories on a wide screen. */
	.v2-drawer__foot { display: none; }
}
@media (max-width: 640px) {
	.v2-brand__img { max-height: 34px; }
	.v2-brand__name { font-size: 1.2rem; }
	.v2-drawer { width: 100vw; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

/* dvh, not vh: a mobile browser's collapsing URL bar makes 100vh taller than
   the visible area, which would push the drawer's footer off screen. */
.v2-drawer { height: 100dvh; }
.v2-cart-drawer { height: 100dvh; }

@supports not (height: 100dvh) {
	.v2-drawer, .v2-cart-drawer { height: 100vh; }
}

/* Clear the home indicator on a notched phone. */
.v2-drawer__foot { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
	.v2-header__bar { gap: .75rem; padding: .7rem 0; }
	:root { --v2-header-h: 62px; }

	.v2-header__icon { width: 42px; height: 42px; }
	.v2-header__burger { width: 46px; height: 46px; }

	/* Three icons plus a logo is tight at 320px; the account link is the one
	   the drawer already covers. */
	.v2-header__actions > .v2-header__icon:first-child { display: none; }

	.v2-drawer__head { padding: 1rem 1.15rem; }
	.v2-drawer__body { padding: .85rem 1.15rem 1.25rem; }
	.v2-drawer__foot { padding-left: 1.15rem; padding-right: 1.15rem; }

	/* Deep category trees indent themselves off the screen otherwise. */
	.v2-drawer__list--sub { margin-left: .5rem; padding-left: .55rem; }
	.v2-drawer__link { font-size: .95rem; }
}