/* ==========================================================================
   Alice Academy — design tokens and base components.

   Soft-editorial beauty: warm neutral grounds, ink (#2b2320) for text and
   buttons, and rose (#b4526b) as the single accent — the second word of every
   heading, the badges, and the universal ink→rose hover. Archivo extrabold
   uppercase for headings and labels, Instrument Sans for body, one Cormorant
   Garamond italic accent word.

   THIS FILE IS THE PALETTE HUB. Every other stylesheet consumes these tokens
   and declares no literal colour of its own (the sole exception is #16121a,
   the near-black base behind campaign imagery, exposed here as --aa-dark).
   Change a value here and the whole theme follows. Section templates must
   extend the tokens, never invent new colour or spacing values.
   ========================================================================== */

:root {
	/* Ink — warm near-black for text, buttons and the wordmark. The legacy
	   "black" name is kept so every template that references it keeps working. */
	--aa-ink:        #2b2320;
	--aa-ink-soft:   #4a3038;
	--aa-black:      #2b2320;   /* legacy alias → ink */
	--aa-muted:      #6b5c54;
	--aa-subtle:     #8a7a70;

	/* Rose — the single brand accent. The legacy "gold" names now hold the rose
	   family so existing templates pick up the accent automatically. */
	--aa-rose:       #b4526b;
	--aa-rose-light: #e08498;
	--aa-rose-deep:  #8a3d52;
	--aa-gold:       #b4526b;   /* legacy alias → rose (hover / accent) */
	--aa-gold-soft:  #e08498;   /* legacy alias → rose-light (accents on dark) */
	--aa-gold-pale:  #f6eef1;   /* legacy alias → pale rose fill */

	/* Warm neutral surfaces. The legacy "cream" names hold the soft/muted
	   surface tints the interface actually uses; --aa-sand and --aa-cream-warm
	   carry the two warmer tones from the brand palette. */
	--aa-white:          #ffffff;
	--aa-surface:        #ffffff;
	--aa-surface-soft:   #f7f6f5;
	--aa-surface-muted:  #f2efec;
	--aa-surface-strong: #e8e5e2;
	--aa-sand:           #c9b8ae;
	--aa-cream-warm:     #e5d8cf;
	--aa-cream:      #f7f6f5;   /* legacy alias → surface-soft */
	--aa-cream-deep: #f2efec;   /* legacy alias → surface-muted */

	/* Hairlines — tints of ink. --aa-line is the legacy solid-border token. */
	--aa-hairline:        rgba(43, 35, 32, .08);
	--aa-hairline-strong: rgba(43, 35, 32, .16);
	--aa-line:            rgba(43, 35, 32, .12);

	/* The one allowed literal: near-black base behind campaign / hero imagery. */
	--aa-dark:       #16121a;

	/* Signals — the only non-brand hues, and only where meaning depends on it. */
	--aa-sale:       #b3261e;
	--aa-success:    #167a3c;

	/* Type — Archivo for display / headings / labels, Instrument Sans for body,
	   Cormorant Garamond italic for the single accent word. */
	--aa-body:         'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--aa-sans:         'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--aa-display:      var(--aa-sans);
	--aa-font-display: var(--aa-sans);   /* alias other stylesheets already reference */
	--aa-accent:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--aa-serif:        var(--aa-sans);   /* legacy alias → display */

	--aa-fs-xs:  0.6875rem;  /* 11px — eyebrows, badges */
	--aa-fs-sm:  0.8125rem;  /* 13px — meta, card subtitle */
	--aa-fs-base: 0.9375rem; /* 15px — body */
	--aa-fs-md:  1.0625rem;
	--aa-fs-lg:  1.375rem;
	--aa-fs-xl:  1.875rem;
	--aa-fs-2xl: 2.5rem;
	--aa-fs-3xl: 3.25rem;

	/* Space */
	--aa-gap:      1rem;
	--aa-gutter:   1.25rem;
	--aa-section:  3.5rem;
	--aa-max:      1360px;
	--aa-max-text: 68ch;

	/* Surface — the Alice radius scale (standard / card / large / pill). */
	--aa-radius:      0.375rem;
	--aa-radius-card: 0.75rem;
	--aa-radius-lg:   1rem;
	--aa-radius-pill: 999px;
	--aa-shadow:      0 1px 2px rgba(43, 35, 32, .06), 0 8px 24px rgba(43, 35, 32, .08);
	--aa-ease:        cubic-bezier(.2, .6, .3, 1);

	--aa-header-h: 64px;
}

@media (min-width: 900px) {
	:root {
		--aa-gutter:  2rem;
		--aa-section: 5rem;
	}
}

/* --------------------------------------------------------------- reset-ish */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--aa-white);
	color: var(--aa-ink);
	font-family: var(--aa-body);
	font-size: var(--aa-fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--aa-rose) 18%, transparent); }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--aa-gold); }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; }

/* Archivo carries every heading and uppercase label; Instrument Sans (the body
   default) is left to run copy. Kept as one list so the display family stays
   centralised — the components themselves set weight, size and tracking. */
h1, h2, h3, h4, h5, h6,
.aa-display,
.aa-wordmark,
.aa-sechead__title,
.aa-sechead__link,
.aa-btn,
.aa-iconbtn,
.aa-nav__list a,
.aa-drawer__list a,
.aa-announce,
.aa-badge,
.aa-price,
.aa-cartcount,
.aa-card__title,
.aa-trust__item strong,
.aa-branches__title,
.aa-footer h3 {
	font-family: var(--aa-sans);
}

/* Archivo display utility (mirrors the storefront's .font-display class). */
.font-display, .aa-font-display { font-family: var(--aa-sans); }

/* The single Cormorant Garamond accent word (e.g. an italicised "natural"). */
.aa-accent {
	font-family: var(--aa-accent);
	font-style: italic;
	font-weight: 500;
	color: var(--aa-rose);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--aa-gold);
	outline-offset: 2px;
}

.aa-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ layout */

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

.aa-section { padding-block: var(--aa-section); }
.aa-section--tight { padding-block: calc(var(--aa-section) * .6); }
.aa-section--cream { background: var(--aa-cream); }

/* Section heading: uppercase label with a rule, plus an optional View all. */
.aa-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--aa-gap);
	margin-bottom: 1.5rem;
}

/* Heavier and larger than body copy by a clear margin: these headings are the
   only thing separating one grid of five from the next, so they carry the
   page's structure on their own.

   Tracking stays near zero. Letter-spacing exists to stop SMALL uppercase text
   from crowding; at 20px and above in a heavy weight it does the opposite —
   the word stops reading as one shape and the gaps start looking accidental. */
.aa-sechead__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: .005em;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--aa-black);
}

@media (min-width: 700px) {
	.aa-sechead__title { font-size: 1.5rem; letter-spacing: 0; }
}

@media (min-width: 1000px) {
	.aa-sechead__title { font-size: 1.75rem; letter-spacing: -.005em; }
}

.aa-sechead__link {
	flex: none;
	font-size: var(--aa-fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* Display type. Same family as everything else, just larger and tighter —
   readability over personality. */
.aa-display {
	font-family: var(--aa-sans);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ----------------------------------------------------------------- buttons */

.aa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 44px;              /* touch target */
	padding: .75rem 1.75rem;
	border: 1.5px solid var(--aa-black);
	border-radius: var(--aa-radius-pill);
	background: var(--aa-black);
	color: var(--aa-white);
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	transition: background .18s var(--aa-ease), color .18s var(--aa-ease), border-color .18s var(--aa-ease);
}
.aa-btn:hover { background: var(--aa-gold); border-color: var(--aa-gold); color: var(--aa-white); }

.aa-btn--ghost { background: transparent; color: var(--aa-black); }
.aa-btn--ghost:hover { background: var(--aa-black); color: var(--aa-white); border-color: var(--aa-black); }

.aa-btn--gold { background: var(--aa-gold); border-color: var(--aa-gold); }
.aa-btn--gold:hover { background: var(--aa-black); border-color: var(--aa-black); }

.aa-btn--block { width: 100%; }
.aa-btn--sm { min-height: 38px; padding: .5rem 1rem; font-size: var(--aa-fs-xs); }

/* -------------------------------------------------------------- price bits */

.aa-price { font-weight: 800; font-size: var(--aa-fs-base); color: var(--aa-black); font-variant-numeric: tabular-nums; }
.aa-price del { color: var(--aa-muted); font-weight: 400; margin-inline-end: .4em; }
.aa-price ins { text-decoration: none; color: var(--aa-sale); }
.aa-price .woocommerce-Price-currencySymbol { font-weight: 500; }

.aa-badge {
	position: absolute;
	inset-block-start: .6rem;
	inset-inline-start: .6rem;
	z-index: 2;
	padding: .25rem .5rem;
	border-radius: var(--aa-radius);
	background: var(--aa-black);
	color: var(--aa-white);
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.aa-badge--sale { background: var(--aa-sale); }
.aa-badge--out  { background: var(--aa-muted); }

/* ------------------------------------------------------------ product card */

.aa-card { position: relative; display: flex; flex-direction: column; height: 100%; }

.aa-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--aa-cream);
	border-radius: var(--aa-radius);
}
.aa-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s var(--aa-ease);
}
.aa-card:hover .aa-card__media img { transform: scale(1.04); }

.aa-card__body { display: flex; flex-direction: column; gap: .25rem; padding-block: .75rem; flex: 1; }

.aa-card__title {
	margin: 0;
	font-size: var(--aa-fs-base);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
}

.aa-card__sub {
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.aa-card__price { margin-top: auto; padding-top: .35rem; }

/* -------------------------------------------------------------- grid + rail */

/* Five across at most. Wider than that and the cards get too narrow for the
   size pills and the price to sit comfortably. */
.aa-grid {
	display: grid;
	gap: var(--aa-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .aa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .aa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1240px) { .aa-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Opt out of the fifth column where a roomier card is wanted. */
@media (min-width: 1240px) { .aa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Horizontal scrolling rail — the reference sites' category carousels.
   Scroll-snap on touch, arrow buttons on desktop. */
.aa-rail { position: relative; }

.aa-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(60vw, 1fr);
	gap: var(--aa-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: .5rem;
	overscroll-behavior-x: contain;
}
.aa-rail__track::-webkit-scrollbar { display: none; }
.aa-rail__track > * { scroll-snap-align: start; }

@media (min-width: 700px)  { .aa-rail__track { grid-auto-columns: minmax(0, calc(33.333% - .67rem)); } }
@media (min-width: 1000px) { .aa-rail__track { grid-auto-columns: minmax(0, calc(20% - 1.2rem)); gap: 1.5rem; } }

.aa-rail__nav {
	position: absolute;
	top: calc(50% - 3rem);
	z-index: 3;
	display: none;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	border: 1px solid var(--aa-line);
	border-radius: 50%;
	background: var(--aa-white);
	box-shadow: var(--aa-shadow);
	transition: opacity .2s var(--aa-ease);
}
.aa-rail__nav[hidden] { display: none !important; }
.aa-rail__nav--prev { inset-inline-start: -18px; }
.aa-rail__nav--next { inset-inline-end: -18px; }
@media (min-width: 1000px) { .aa-rail__nav { display: flex; } }

/* -------------------------------------------------------------- announcement */

.aa-announce {
	background: linear-gradient(90deg, var(--aa-rose-deep), var(--aa-rose) 50%, var(--aa-rose-deep));
	color: var(--aa-white);
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
}
.aa-announce__item { margin: 0; padding: .65rem 1rem; }
.aa-announce a { color: var(--aa-white); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ header */

.aa-header { position: sticky; top: 0; z-index: 60; background: var(--aa-white); border-bottom: 1px solid var(--aa-line); }

.aa-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--aa-gap);
	min-height: var(--aa-header-h);
}

.aa-header__brand { justify-self: center; display: inline-flex; align-items: center; }
.aa-header__brand img { max-height: 40px; width: auto; }

.aa-wordmark {
	font-family: var(--aa-sans);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1;
}
.aa-wordmark__img {
	display: block;
	height: 1.5rem;
	width: auto;
}
@media (min-width: 900px) {
	.aa-header__brand .aa-wordmark__img { height: 2.25rem; }
}
.aa-wordmark--inverse .aa-wordmark__img { filter: brightness(0) invert(1); height: 1.25rem; }
.aa-drawer .aa-wordmark__img { height: 1.25rem; }
.aa-wordmark small {
	display: block;
	font-family: var(--aa-sans);
	font-size: .5rem;
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--aa-muted);
	margin-top: .25rem;
}

.aa-header__left, .aa-header__right { display: flex; align-items: center; gap: .35rem; }
.aa-header__right { justify-content: flex-end; }

.aa-iconbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	min-width: 44px; min-height: 44px;
	padding: 0 .5rem;
	border: 0; background: none; color: var(--aa-black);
	font-size: var(--aa-fs-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.aa-iconbtn:hover { color: var(--aa-gold); }
.aa-iconbtn svg { width: 20px; height: 20px; }

.aa-cartcount {
	display: inline-grid; place-items: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px;
	background: var(--aa-black); color: var(--aa-white);
	font-size: 10px; font-weight: 700; letter-spacing: 0;
}

/* Primary nav */
.aa-nav { border-top: 1px solid var(--aa-line); display: none; }
@media (min-width: 900px) { .aa-nav { display: block; } }

.aa-nav__list {
	display: flex; align-items: center; justify-content: center;
	gap: 2rem; margin: 0; padding: 0; list-style: none;
}
.aa-nav__list a {
	display: inline-block; padding: .85rem 0;
	font-size: var(--aa-fs-xs); font-weight: 700;
	letter-spacing: 0.07em; text-transform: uppercase;
}

/* Mobile drawer */
.aa-drawer {
	position: fixed; inset: 0 30% 0 0; z-index: 100;
	max-width: 340px;
	background: var(--aa-white);
	transform: translateX(-100%);
	transition: transform .3s var(--aa-ease);
	overflow-y: auto;
	padding: var(--aa-gutter);
}
.aa-drawer[data-open="true"] { transform: none; }
.aa-scrim {
	position: fixed; inset: 0; z-index: 90;
	background: color-mix(in srgb, var(--aa-ink) 45%, transparent);
	opacity: 0; pointer-events: none;
	transition: opacity .3s var(--aa-ease);
}
.aa-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------- trust strip */

.aa-trust { border-block: 1px solid var(--aa-line); background: var(--aa-white); }
.aa-trust__list {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0; padding: 1.75rem 0; list-style: none;
	text-align: center;
}
@media (min-width: 900px) { .aa-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aa-trust__item strong {
	display: block; font-size: var(--aa-fs-sm); font-weight: 700;
	letter-spacing: 0.05em; text-transform: uppercase;
}
.aa-trust__item span { font-size: var(--aa-fs-sm); color: var(--aa-muted); }
.aa-trust__item svg { width: 24px; height: 24px; margin: 0 auto .5rem; color: var(--aa-gold); }

/* ------------------------------------------------------------------ footer */

.aa-footer { background: var(--aa-ink); color: var(--aa-sand); padding-block: var(--aa-section) 2rem; margin-top: var(--aa-section); }
.aa-footer a { color: var(--aa-cream-warm); }
.aa-footer a:hover { color: var(--aa-gold-soft); }

/* Newsletter eyebrow in the brand column. */
.aa-footer__insiders {
	margin: 1.75rem 0 .35rem;
	color: var(--aa-rose-light);
	font-family: var(--aa-sans);
	font-size: var(--aa-fs-xs);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* The "Join the list" CTA sits on the ink footer, so an ink fill would vanish.
   Fill it rose and invert to white on hover, matching the brand button. */
.aa-footer .aa-btn {
	margin-top: .5rem;
	background: var(--aa-rose);
	border-color: var(--aa-rose);
	color: var(--aa-white);
}
.aa-footer .aa-btn:hover {
	background: var(--aa-white);
	border-color: var(--aa-white);
	color: var(--aa-ink);
}
/* ------------------------------------------------------------- our shops
 * The three counters, above the footer columns. Named `branch`, not `shop` —
 * `.aa-shop` is already the shop-archive wrapper in shop.css and carries a
 * 5rem block padding, which stretched these rows to 116px when the class was
 * shared.
 *
 * Typography stays quiet: the name is a medium weight rather than bold, since
 * three bold names in a dark footer read as three headings competing with the
 * column titles.
 */
.aa-branches {
	padding-bottom: 1.75rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid rgba(255,255,255,.12);
}

.aa-branches__title {
	color: var(--aa-rose-light);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 1.15rem;
}

.aa-branches__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.15rem;
	align-items: start;
}

.aa-branch {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.55rem;
	align-items: start;
	padding: 0;
	line-height: 1.45;
}

.aa-branch__pin {
	display: inline-flex;
	margin-top: 1px;
	color: var(--aa-rose-light);
	opacity: .85;
}
.aa-branch__pin svg { width: 15px; height: 15px; }

.aa-branch__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.aa-branch__name {
	color: var(--aa-cream-warm);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.015em;
}

.aa-branch__where {
	color: var(--aa-sand);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
}

@media (min-width: 760px) {
	.aa-branches__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0;
	}
	/* A hairline between columns, sized to the text rather than the row. */
	.aa-branch + .aa-branch {
		border-inline-start: 1px solid rgba(255,255,255,.12);
		padding-inline-start: 1.75rem;
	}
	.aa-branch { padding-inline-end: 1.75rem; }
}
.aa-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .aa-footer__cols { grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); gap: 3rem; } }
.aa-footer h3 {
	color: var(--aa-white);
	font-size: var(--aa-fs-xs); font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem;
}
.aa-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: var(--aa-fs-sm); }
.aa-footer__bottom {
	margin-top: 2.5rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	font-size: var(--aa-fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
}

/* SEO prose block */
.aa-prose { color: var(--aa-muted); font-size: var(--aa-fs-sm); line-height: 1.75; }
.aa-prose h2, .aa-prose h3 { color: var(--aa-ink); font-size: var(--aa-fs-base); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2rem; }
.aa-prose p { margin: 0 0 1rem; }

/* ----------------------------------------------------------------- utility */

.aa-hide-desktop { }
@media (min-width: 900px) { .aa-hide-desktop { display: none !important; } }
.aa-hide-mobile { display: none !important; }
@media (min-width: 900px) { .aa-hide-mobile { display: revert !important; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------- page layout */

.aa-page--wide { max-width: none; }

.aa-prose.aa-page {
	max-width: var(--aa-max-text);
	margin-inline: auto;
}

.aa-page__title {
	font-size: var(--aa-fs-xl);
	color: var(--aa-ink);
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 1.5rem;
}

/* ------------------------------------------------------- touch target sizes

   Link lists default to the height of their text — around 16px — which is
   below the 24px minimum in WCAG 2.2 target size and well below what is
   comfortable on a phone. These are the lists that were failing. */

.aa-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.aa-drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-block: .25rem;
	border-bottom: 1px solid var(--aa-line);
	font-size: var(--aa-fs-base);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Nested category lists inside the drawer. */
.aa-drawer__list .sub-menu {
	margin: 0 0 0 .75rem;
	padding: 0;
	list-style: none;
}
.aa-drawer__list .sub-menu a {
	min-height: 44px;
	font-size: var(--aa-fs-sm);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--aa-muted);
}

.aa-footer ul a,
.aa-footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

@media (max-width: 899px) {
	.aa-footer ul a { min-height: 44px; }
}

/* The social icon was a bare 22px anchor. */
.aa-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline-start: -10px;   /* keep the glyph optically aligned left */
}
.aa-footer__social svg { width: 22px; height: 22px; }

/* Two social links now sit side by side. The rule above pulls a single glyph
   left so it optically aligns with the text, which must apply to the first
   icon only or the pair ends up cramped. */
.aa-footer__socials {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.aa-footer__socials .aa-footer__social:not(:first-child) { margin-inline-start: 0; }

/* Standalone UI controls that render at text height. WCAG 2.2 target size
   exempts links inside a sentence, so prose links are left alone — these are
   all buttons-in-link-clothing that a thumb has to hit. */
.aa-sechead__link,
.aa-cart__continue,
.woocommerce a.shipping-calculator-button,
.woocommerce a.reset_variations,
.woocommerce-product-gallery__trigger,
.woocommerce-form-coupon-toggle a.showcoupon,
.woocommerce-info a.showcoupon {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

@media (max-width: 899px) {
	.aa-sechead__link,
	.aa-cart__continue,
	.woocommerce a.shipping-calculator-button,
	.woocommerce a.reset_variations,
	.woocommerce-form-coupon-toggle a.showcoupon,
	.woocommerce-info a.showcoupon {
		min-height: 44px;
	}
}

/* The gallery zoom trigger is an absolutely positioned overlay, so it needs a
   box rather than just a min-height. */
.woocommerce-product-gallery__trigger {
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
}