/* =========================================================================
   Autotelic header
   Font: Founders Grotesk Regular (400), declared in style.css.
   ====================================================================== */

:root {
	--ao-paper: #f8e9e5; /* site background */
	--ao-ink: #000000;   /* all text */
	--ao-rule: rgba(0, 0, 0, 0.14);
	--ao-sans: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--ao-gutter: 30px; /* desktop side margin (reference uses 24px); 16px on mobile */
	--ao-bar-h: 72px;
	--ao-tabbar-h: 56px;
	--ao-ease-out: cubic-bezier(0, 0, 0.58, 1);
	--ao-ease: cubic-bezier(0.42, 0, 0.58, 1);
}

.ao-header,
.ao-tabbar,
.ao-drawer {
	font-family: var(--ao-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ao-ink);
	-webkit-font-smoothing: antialiased;
}

.ao-header *,
.ao-tabbar *,
.ao-drawer * { box-sizing: border-box; }

.ao-header ul,
.ao-drawer ul { list-style: none; margin: 0; padding: 0; }

.ao-header a,
.ao-tabbar a,
.ao-drawer a { color: inherit; text-decoration: none; }

.ao-header button,
.ao-tabbar button,
.ao-drawer button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	border-radius: 0;
}

.ao-icon { display: block; width: 24px; height: 24px; flex: none; }

.ao-header :focus-visible,
.ao-tabbar :focus-visible,
.ao-drawer :focus-visible { outline: 1px solid var(--ao-ink); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   Header shell — motion matches the reference:

   At rest      Bar on top; wordmark floats just below it, over the page,
                drawn above the bar so its letters can overhang by a hair.
   Scroll down  Nothing until you're past the header. Then the wordmark
   (.ao-hidden) drops behind the bar and slides up out of view (0.2s), and
                the bar slides away too (0.5s).
   Scroll up    Only after a deliberate scroll back (~120px): the bar slides
                back (0.5s) and the wordmark slides down from behind it
                (0.2s) on a paper band; it comes back in front of the bar
                once it has landed.
   Front page   Wordmark sits on the hero, no band, until you leave the top
                (.ao-header--overlay). Other pages: band always on, and the
                page is pushed down by the wordmark's height so nothing hides
                under it.

   The sticky element is the template-part wrapper, because a sticky child
   can't stick inside a wrapper of its own height. It moves with `top`, not
   transform, so the fixed mobile tab bar and drawer inside it stay put.
   ---------------------------------------------------------------------- */

:root {
	--ao-logo-w: clamp(164px, 19.25vw, 326px); /* reference 33vw × 2/3 × 7/8 */
	/* wordmark box height: logo (1644×449) + overhang + bottom padding */
	/* The reference places its logo inside a 4-of-12 column and offsets it by
	   fixed fractions of that column: -0.5% top, -1.2% right, -1% bottom,
	   -1.7% left. Using the same column keeps the letters in the same spot. */
	--ao-col: calc((100vw - 2 * var(--ao-gutter)) / 3);
	/* wordmark box height: logo (1644×449) + top/bottom offsets + 24px below */
	--ao-logo-out-top: -1px;
	--ao-logo-out-left: -4px;
	--ao-wm-h: calc(var(--ao-logo-w) * 449 / 1644 + var(--ao-logo-out-top) - var(--ao-col) * 0.01 + 24px);
}

.wp-block-template-part:has(> .ao-header),
.ao-sticky {
	/* Escape the theme's page margin (body padding, 24px) so the header runs
	   edge to edge and sets its own 24px gutter, as on the reference.
	   header.js reads the real value into --ao-page-pad. */
	margin-left: calc(-1 * var(--ao-page-pad, 24px));
	margin-right: calc(-1 * var(--ao-page-pad, 24px));
	display: flow-root; /* on mobile the header box is 0px tall: stop the reserved space collapsing through it */
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	transition: top 0.5s var(--ao-ease);
}
/* Leave room for the floating wordmark everywhere except the front page */
.wp-block-template-part:has(> .ao-header:not(.ao-header--overlay)),
.ao-sticky.ao-reserve { margin-bottom: var(--ao-wm-h); }

.ao-sticky.ao-hidden {
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--ao-hide-h, 72px) - 8px);
}

/* -------------------------------------------------------------------------
   Sticky page toolbar (opt-in): give any row the class `ao-toolbar`
   (block editor → Advanced → Additional CSS class(es)), e.g. a
   "Filters / Sort by" row. Then, as on the reference's listing pages:
   scrolling down, the wordmark slides behind the bar, the bar stays put and
   the toolbar slides over it; scrolling back up, the header returns on top.
   ---------------------------------------------------------------------- */

.ao-toolbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 45;
	background: var(--ao-paper);
}
.ao-sticky.ao-with-toolbar.ao-hidden {
	top: var(--wp-admin--admin-bar--height, 0px); /* bar doesn't move… */
	z-index: 40;                                    /* …the toolbar covers it */
}
/* An open menu always sits above everything */
.ao-sticky.ao-menu-open { z-index: 100000; }

.ao-header {
	position: relative;
	z-index: 50;
	margin: 0;
}

.ao-bar,
.ao-panel { position: relative; z-index: 2; background: var(--ao-paper); }

/* ---------- Bar ---------- */

.ao-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--ao-bar-h);
	padding: 0 var(--ao-gutter);
}

.ao-tabs { display: flex; gap: 89px; } /* row twice its natural length with the current six links (337px → 674px) */

.ao-tab,
.ao-link,
.ao-col__head {
	position: relative;
	display: inline-block;
}

/* Underline that draws in from the left: hover, current section, open tab */
.ao-tab::after,
.ao-link::after,
.ao-col__head::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width 0.1s var(--ao-ease-out);
}
.ao-tab:hover::after,
.ao-tab[aria-expanded='true']::after,
.ao-tab[aria-current]::after,
.ao-link:hover::after,
.ao-link[aria-current]::after,
.ao-col__head:hover::after { width: 100%; }

.ao-actions { display: flex; align-items: center; gap: 14px; }

/* Search and account were removed (13 Nov); the basket is the only action. */

/* Product page: the info column tracks the header. It sticks 1.5rem below the
   bar while the header shows, and slides up with it when the header hides
   (header.js publishes the bar's height as --ao-header-h). */
@media (min-width: 900px) {
	.ao-pdp .ao-pdp__sticky {
		top: calc(var(--ao-top, 1.5rem) + var(--ao-header-h, 0px));
		transition: top 0.5s var(--ao-ease);
	}
}
/* ...and the wordmark's paper band stops at the info column, so it never
   covers the product title when the header comes back. */
@media (min-width: 1024px) {
	body.single-product .ao-wordmark { right: calc(var(--ao-gutter) + max(12.5rem, (100% - 2 * var(--ao-gutter)) / 6)); }
}


/* "Search" reads as a field: text with a hairline under it */
.ao-search-trigger {
	min-width: min(132px, 100%);
	width: 132px;
	max-width: 100%;
	padding: 2px 0 3px !important;
	text-align: left;
	border-bottom: 1px solid var(--ao-ink) !important;
}


.ao-action { display: grid; place-items: center; width: 24px; height: 32px; } /* 24px wide: last icon sits flush on the gutter */

.ao-cart { position: relative; }
.ao-cart-count {
	position: absolute;
	top: 19px; /* centre of the bag's body: 4px inset + 62.8% of the 24px icon */
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0.02em;
	pointer-events: none;
}
.ao-cart-count[data-count='0'] { display: none; }

/* ---------- Panel: expands in flow (0fr → 1fr), pushing the wordmark down ---------- */

.ao-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.2s var(--ao-ease-out);
}
.ao-panel[data-open='true'] { grid-template-rows: 1fr; }
.ao-panel__clip { min-height: 0; overflow: hidden; }
.ao-panel__inner { padding: 8px var(--ao-gutter) 44px; }

.ao-pane {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	column-gap: 24px;
	row-gap: 36px;
	animation: ao-fade 0.25s var(--ao-ease-out);
}
.ao-pane[hidden] { display: none; }

@keyframes ao-fade { from { opacity: 0; } to { opacity: 1; } }

.ao-col__head { margin-bottom: 22px; }
.ao-col__list li { margin: 0 0 6px; }
.ao-col__list li.ao-gap { margin-top: 22px; }

.ao-col--feature { grid-column: -2 / -1; grid-row: 1 / span 3; display: block; }
.ao-feature__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
	margin-bottom: 10px;
}
.ao-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ao-ease);
}
.ao-col--feature:hover .ao-feature__media img { transform: scale(1.03); }

/* ---------- Search pane / form ---------- */

.ao-pane--search { display: block; max-width: 720px; }
.ao-pane--search[hidden] { display: none; }

.ao-search { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--ao-ink); }
.ao-search input[type='search'] {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	font-family: var(--ao-sans);
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 32px);
	color: var(--ao-ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.ao-search input::placeholder { color: var(--ao-ink); opacity: 1; }
.ao-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Oversized wordmark ---------- */

.ao-wordmark {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 3;
	isolation: isolate;
	clip-path: inset(-8px 0 0 0);
	padding: 0 var(--ao-gutter) 24px;
	/* coming back: slide down behind the bar, step in front once landed */
	transition: transform 0.2s var(--ao-ease), z-index 0s linear 0.2s;
}
.ao-hidden .ao-wordmark {
	z-index: 1; /* behind the bar straight away */
	transform: translateY(-100%);
	transition: transform 0.2s var(--ao-ease), z-index 0s;
}

/* Paper band behind the wordmark */
.ao-wordmark::before {
	content: '';
	position: absolute;
	inset: -1px 0 0;
	z-index: -1;
	background: var(--ao-paper);
	transform: translateY(calc(-100% - 10px));
	transition: transform 0.2s var(--ao-ease);
}
.ao-header:not(.ao-header--overlay) .ao-wordmark::before,
.ao-solid .ao-wordmark::before,
.ao-header.is-open .ao-wordmark::before { transform: none; }

.ao-wordmark a { display: block; width: fit-content; } /* block: no text-baseline gap under the logo */
.ao-wordmark__img,
.ao-wordmark__svg {
	display: block;
	width: var(--ao-logo-w);
	height: auto;
	color: var(--ao-ink);
	/* Optical overhang, as on the reference: the letters sit a hair outside
	   the hero's top-left corner (1.65% left, 0.48% up, of the logo's width) */
	/* Desktop: overhangs the line under the bar by 1px and the side margin by 4px.
	   Mobile overrides this with the reference's column-based offsets. */
	margin: var(--ao-logo-out-top) 0 calc(var(--ao-col) * -0.01) var(--ao-logo-out-left);
}
.ao-wordmark__text {
	display: block;
	font-family: var(--ao-sans);
	font-weight: 400;
	font-size: clamp(32px, 5vw, 88px);
	line-height: 0.9;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

/* ---------- Backdrop over the page while the panel is open ---------- */

.ao-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.2s var(--ao-ease);
}
.ao-backdrop.is-visible { opacity: 1; }

/* ---------- Weights (Founders Grotesk, declared in style.css) ----------
   Menu items: Medium 500. "Search" and the basket count: Light 300.
   Everything else stays Regular 400. Selectors are doubled up to beat the
   `button { font: inherit }` reset above. */

.ao-header .ao-tab,
.ao-header .ao-col__head,
.ao-header .ao-link,
.ao-header .ao-feature__title,
.ao-drawer .ao-drawer__tabs button,
.ao-drawer .ao-dlink,
.ao-drawer .ao-drawer__foot a { font-weight: 500; }

.ao-header .ao-search-trigger,
.ao-header .ao-cart-count,
.ao-tabbar .ao-cart-count { font-weight: 300; }

/* Mobile-only pieces are off on desktop */
.ao-tabbar,
.ao-drawer { display: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* =========================================================================
   Mobile & tablet
   ====================================================================== */

@media (max-width: 1023px) {

	.ao-bar,
	.ao-panel,
	.ao-backdrop { display: none !important; }

	/* As on the reference: flush to the top edge over the hero; when it
	   comes back on its paper band it gains 16px of air above (0.2s). */
	.ao-wordmark {
		padding: 0 var(--ao-gutter) 16px;
		transition: transform 0.2s var(--ao-ease), padding 0.2s var(--ao-ease), z-index 0s linear 0.2s;
	}
	/* At rest the wordmark is flush with the top edge on every page;
	   the 16px only appears when it comes back after a scroll. */
	.ao-solid .ao-wordmark { padding-top: 16px; }
	.ao-wordmark a { display: block; }
	:root {
		--ao-logo-w: calc((100vw - 2 * var(--ao-gutter)) * 7 / 12); /* 2/3 × 7/8 */
		--ao-gutter: 16px;
		--ao-col: calc(100vw - 2 * var(--ao-gutter)); /* full-width column on mobile */
		--ao-logo-out-top: calc(var(--ao-col) * -0.005);
		--ao-logo-out-left: calc(var(--ao-col) * -0.017);
		--ao-wm-h: calc(var(--ao-logo-w) * 449 / 1644 + var(--ao-logo-out-top) - var(--ao-col) * 0.01 + 16px); /* 16px below */
	}
	.ao-wordmark__text {
		font-size: 13vw;
		line-height: 0.86;
		white-space: normal;
	}
	.ao-wordmark__text > span { display: block; }

	/* Fixed bottom bar: everything in the thumb zone */
	body { padding-bottom: calc(var(--ao-tabbar-h) + env(safe-area-inset-bottom)); }

	.ao-tabbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 90;
		display: grid;
		grid-template-columns: 1fr 1fr; /* menu on the left, basket on the right */
		align-items: center;
		height: calc(var(--ao-tabbar-h) + env(safe-area-inset-bottom));
		padding: 0 6px env(safe-area-inset-bottom);
		background: var(--ao-paper);
		font-size: 15px;
	}
	.ao-tabbar > * {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 100%;
	}
	.ao-tabbar > :first-child { justify-self: start; width: 44px; }
	.ao-tabbar > :last-child { justify-self: end; width: 44px; }
	.ao-tabbar .ao-cart-count { top: calc(50% - env(safe-area-inset-bottom) / 2 + 3px); transform: translate(-50%, -50%); }

	/* ---------- Full-screen drawer ---------- */

	.ao-drawer {
		position: fixed;
		inset: 0;
		z-index: 100000; /* above the admin bar */
		display: block;
		background: var(--ao-paper);
		overflow: hidden;
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.25s var(--ao-ease), transform 0.3s var(--ao-ease);
	}
	.ao-drawer[hidden] { display: none; }
	.ao-drawer.is-open { opacity: 1; transform: none; }

	.ao-drawer__screen {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: var(--ao-paper);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.ao-drawer__root { transition: transform 0.3s var(--ao-ease); }
	.ao-drawer.has-sub .ao-drawer__root { transform: translateX(-18%); }

	.ao-drawer__screen[hidden] { display: none; }

	.ao-drawer__sub { transform: translateX(100%); transition: transform 0.3s var(--ao-ease); }
	.ao-drawer__sub.is-active { transform: none; }

	.ao-drawer__top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		padding: 0 6px;
		flex: none;
	}
	.ao-drawer__icon { display: grid; place-items: center; width: 44px; height: 44px; }
	.ao-drawer__root .ao-drawer__top { justify-content: flex-end; } /* close only, on the right */

	.ao-drawer__search { padding: 0 var(--ao-gutter) 16px; flex: none; }
	.ao-drawer__search[hidden] { display: none; }

	.ao-drawer__tabs {
		display: flex;
		gap: 20px;
		padding: 18px var(--ao-gutter) 22px;
		overflow-x: auto;
		scrollbar-width: none;
		flex: none;
	}
	.ao-drawer__tabs::-webkit-scrollbar { display: none; }
	.ao-drawer__tabs button { position: relative; white-space: nowrap; padding: 4px 0 !important; }
	.ao-drawer__tabs button[aria-selected='true']::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 1px;
		background: currentColor;
	}

	.ao-drawer__body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 8px var(--ao-gutter) 24px;
	}

	.ao-dlist[hidden] { display: none; }
	.ao-dlist--plain { margin-top: 28px !important; }

	.ao-drawer .ao-dlink {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 36px;
		font-size: 18px;
		text-align: left;
	}
	.ao-dlink .ao-icon { width: 16px; height: 16px; }
	.ao-dlist__all { margin-bottom: 18px; }
	.ao-dlist li.ao-gap { margin-top: 22px; }

	.ao-drawer .ao-drawer__foot {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 16px var(--ao-gutter);
		border-top: 1px solid var(--ao-rule);
		font-size: 12px;
		flex: none;
	}

	html.ao-locked,
	html.ao-locked body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.ao-sticky,
	.wp-block-template-part:has(> .ao-header),
	.ao-wordmark,
	.ao-wordmark::before,
	.ao-header *,
	.ao-header,
	.ao-backdrop,
	.ao-drawer,
	.ao-drawer * { transition: none !important; animation: none !important; }
}