/**
 * Liberty Web Kits - global chrome (header, footer, buttons).
 *
 * Depends on tokens.css. No colour literals here: everything resolves through
 * the design tokens so the palette has a single source of truth.
 */

/* -------------------------------------------------------------------------
 * Container + buttons (shared primitives)
 * ---------------------------------------------------------------------- */

.lwk-container {
	width: 100%;
	max-width: var(--lwk-container);
	margin-inline: auto;
	padding-inline: var(--lwk-gutter);
}

.lwk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;                 /* accessible touch target */
	padding: 0 20px;
	border-radius: var(--lwk-radius-sm);
	border: 1px solid transparent;
	font-family: var(--lwk-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--lwk-dur) var(--lwk-ease),
	            box-shadow var(--lwk-dur) var(--lwk-ease),
	            background-color var(--lwk-dur) var(--lwk-ease),
	            border-color var(--lwk-dur) var(--lwk-ease);
}

.lwk-btn--primary {
	background: var(--lwk-grad-primary);
	color: var(--lwk-text);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.lwk-btn--primary:hover,
.lwk-btn--primary:focus-visible {
	color: var(--lwk-text);
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, var(--lwk-glow-purple);
}

.lwk-btn--ghost {
	background: transparent;
	border-color: var(--lwk-border-strong);
	color: var(--lwk-text);
}

.lwk-btn--ghost:hover,
.lwk-btn--ghost:focus-visible {
	color: var(--lwk-text);
	border-color: var(--lwk-violet);
	background: var(--lwk-surface-2);
}

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

.lwk-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.lwk-brand__mark {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}

.lwk-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.lwk-brand__name {
	font-family: var(--lwk-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lwk-text);
}

.lwk-brand__name--accent {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	color: var(--lwk-text-3);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.lwk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--lwk-bg) 82%, transparent);
	border-bottom: 1px solid transparent;
	transition: background-color var(--lwk-dur) var(--lwk-ease),
	            border-color var(--lwk-dur) var(--lwk-ease);
}

@supports (backdrop-filter: blur(12px)) {
	.lwk-header {
		backdrop-filter: blur(14px) saturate(140%);
	}
}

/* Solid-ish once scrolled, so content never bleeds through illegibly. */
.lwk-header.is-scrolled {
	background: color-mix(in srgb, var(--lwk-bg) 94%, transparent);
	border-bottom-color: var(--lwk-border);
}

.lwk-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}

.lwk-header__brand {
	text-decoration: none;
	flex: 0 0 auto;
}

.lwk-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.lwk-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lwk-nav__list a {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--lwk-text-2);
	text-decoration: none;
	transition: color var(--lwk-dur) var(--lwk-ease),
	            background-color var(--lwk-dur) var(--lwk-ease);
}

.lwk-nav__list a:hover,
.lwk-nav__list a:focus-visible {
	color: var(--lwk-text);
	background: var(--lwk-surface);
}

.lwk-nav__list .current-menu-item > a,
.lwk-nav__list .current_page_item > a {
	color: var(--lwk-text);
	background: var(--lwk-surface);
}

.lwk-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.lwk-header__account {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--lwk-text-2);
	text-decoration: none;
	padding: 8px 4px;
}

.lwk-header__account:hover,
.lwk-header__account:focus-visible {
	color: var(--lwk-text);
}

.lwk-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	color: var(--lwk-text-2);
	text-decoration: none;
	transition: color var(--lwk-dur) var(--lwk-ease),
	            background-color var(--lwk-dur) var(--lwk-ease);
}

.lwk-cart:hover,
.lwk-cart:focus-visible {
	color: var(--lwk-text);
	background: var(--lwk-surface);
}

.lwk-cart__count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--lwk-purple);
	color: var(--lwk-text);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

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

.lwk-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--lwk-border);
	border-radius: 10px;
	background: transparent;
	color: var(--lwk-text);
	cursor: pointer;
}

.lwk-burger__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 18px;
}

.lwk-burger__bars i {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--lwk-dur) var(--lwk-ease),
	            opacity var(--lwk-dur) var(--lwk-ease);
}

.lwk-burger[aria-expanded="true"] .lwk-burger__bars i:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.lwk-burger[aria-expanded="true"] .lwk-burger__bars i:nth-child(2) {
	opacity: 0;
}
.lwk-burger[aria-expanded="true"] .lwk-burger__bars i:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.lwk-mobile-nav {
	display: none;
	border-top: 1px solid var(--lwk-border);
	background: var(--lwk-bg-2);
}

/* nav.js uses the `hidden` attribute as the panel's single source of truth,
   but the header media query below sets display:block on this class, which
   outranks the attribute's default styling. Without this guard the panel
   renders permanently open below the breakpoint while the burger still
   reports aria-expanded="false". */
.lwk-mobile-nav[hidden] {
	display: none;
}

.lwk-mobile-nav__inner {
	padding: 16px var(--lwk-gutter) 28px;
	max-height: calc(100dvh - 68px);
	overflow-y: auto;
}

.lwk-mobile-nav__list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.lwk-mobile-nav__list a {
	display: block;
	padding: 14px 4px;
	border-bottom: 1px solid var(--lwk-border);
	font-family: var(--lwk-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--lwk-text);
	text-decoration: none;
}

.lwk-mobile-nav__actions {
	display: grid;
	gap: 10px;
}

.lwk-mobile-nav__actions .lwk-btn {
	width: 100%;
}

/* Header layout switch.
   Measured, not estimated: brand 107px + 24px gap + nav 547px + 24px gap +
   actions 286px = 988px of content, plus the container's 48px of padding, so
   the desktop header needs about 1036px of viewport - and about 1070px when
   signed in, where the account label is wider. The old 980px value let the
   desktop header render at widths it could not fit, pushing the actions past
   the viewport edge. 1100px switches to the burger before that can happen. */
@media (max-width: 1100px) {
	.lwk-nav,
	.lwk-header__cta,
	.lwk-header__account {
		display: none;
	}

	.lwk-burger {
		display: inline-flex;
	}

	.lwk-mobile-nav {
		display: block;
	}

	.lwk-header__inner {
		justify-content: space-between;
		gap: 12px;
	}
}

/* Prevent background scroll while the panel is open. */
body.lwk-nav-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.lwk-footer {
	margin-top: auto;
	border-top: 1px solid var(--lwk-border);
	background: var(--lwk-bg-2);
	padding-block: 64px 28px;
}

.lwk-footer__top {
	display: grid;
	grid-template-columns: minmax(230px, 1fr) 2.4fr;
	gap: 48px;
	padding-bottom: 44px;
}

.lwk-footer__tagline {
	margin: 16px 0 0;
	max-width: 30ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lwk-text-3);
}

.lwk-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 32px 24px;
}

.lwk-footer__heading {
	margin: 0 0 14px;
	font-family: var(--lwk-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lwk-text-3);
}

.lwk-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.lwk-footer__list a {
	font-size: 0.9375rem;
	color: var(--lwk-text-2);
	text-decoration: none;
	transition: color var(--lwk-dur) var(--lwk-ease);
}

.lwk-footer__list a:hover,
.lwk-footer__list a:focus-visible {
	color: var(--lwk-text);
}

.lwk-footer__bottom {
	padding-top: 24px;
	border-top: 1px solid var(--lwk-border);
}

.lwk-footer__copy {
	margin: 0;
	font-size: 0.875rem;
	color: var(--lwk-text-3);
}

@media (max-width: 860px) {
	.lwk-footer__top {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 480px) {
	.lwk-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Astra resets that would otherwise fight the custom chrome
 * ---------------------------------------------------------------------- */

.site-header,
.ast-main-header-wrap,
.main-header-bar,
.site-footer,
.ast-small-footer {
	display: none !important;
}

#page,
.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}