/*
 * Atelia — main stylesheet
 *
 * Colour and type tokens are injected from the Customizer by
 * inc/dynamic-css.php. The fallbacks below keep the theme intact if that
 * ever fails to load.
 *
 * 01 Tokens
 * 02 Reset & base
 * 03 Typography
 * 04 Layout
 * 05 Signature: eyebrow & rules
 * 06 Buttons & links
 * 07 Forms
 * 08 Announcement bar
 * 09 Header & navigation
 * 10 Mega menu
 * 11 Drawers, modals, toast
 * 12 Search overlay
 * 13 Page header, breadcrumbs, pagination
 * 14 Journal
 * 15 Prose & widgets
 * 16 Footer & mobile bar
 * 17 Empty states & 404
 * 18 Motion & accessibility
 */

/* =========================================================================
 * 01 Tokens
 * ====================================================================== */

:root {
	--at-ink: #14161c;
	--at-ink-rgb: 20, 22, 28;
	--at-ink-soft: #3a3f4a;
	--at-muted: #6e7480;
	--at-line: #e4e1da;
	--at-line-rgb: 228, 225, 218;
	--at-canvas: #f8f7f4;
	--at-surface: #ffffff;
	--at-surface-rgb: 255, 255, 255;
	--at-accent: #a17c43;
	--at-accent-rgb: 161, 124, 67;
	--at-accent-deep: #7e5f31;
	--at-accent-tint: #f3ede3;
	--at-deep: #3a2a33;
	--at-sale: #8c2f39;
	--at-success: #2f6b4f;

	--at-font-display: "Bodoni Moda", "Iowan Old Style", Palatino, Georgia, serif;
	--at-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--at-scale: 1;

	--at-radius: 2px;
	--at-radius-lg: 4px;
	--at-container: 1320px;
	--at-gutter: clamp(1rem, 4vw, 2.5rem);

	--at-display-case: none;
	--at-display-track: -0.01em;

	--at-topbar-bg: #14161c;
	--at-topbar-color: #f8f7f4;
	--at-footer-bg: #14161c;
	--at-footer-color: #b9bcc4;
	--at-footer-heading: #f8f7f4;

	/* Type scale */
	--at-t-xs: calc(0.6875rem * var(--at-scale));
	--at-t-sm: calc(0.8125rem * var(--at-scale));
	--at-t-base: calc(0.9375rem * var(--at-scale));
	--at-t-md: calc(1.0625rem * var(--at-scale));
	--at-t-lg: calc(clamp(1.15rem, 1.6vw, 1.4rem) * var(--at-scale));
	--at-d-sm: calc(clamp(1.6rem, 3vw, 2.1rem) * var(--at-scale));
	--at-d-md: calc(clamp(2rem, 4.4vw, 3.1rem) * var(--at-scale));
	--at-d-lg: calc(clamp(2.5rem, 7vw, 5rem) * var(--at-scale));

	/* Spacing */
	--at-sp-1: 0.25rem;
	--at-sp-2: 0.5rem;
	--at-sp-3: 0.75rem;
	--at-sp-4: 1rem;
	--at-sp-5: 1.5rem;
	--at-sp-6: 2rem;
	--at-sp-7: 3rem;
	--at-sp-8: 4.5rem;
	--at-sp-9: 6.5rem;

	--at-header-h: 76px;
	--at-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--at-z-header: 200;
	--at-z-drawer: 400;
	--at-z-modal: 500;
	--at-z-toast: 600;
}

/* =========================================================================
 * 02 Reset & base
 * ====================================================================== */

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

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

body.at-body {
	margin: 0;
	background: var(--at-surface);
	color: var(--at-ink-soft);
	font-family: var(--at-font-body);
	font-size: var(--at-t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.at-locked {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

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

.at-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--at-ink);
	color: var(--at-surface);
	font-size: var(--at-t-sm);
	transition: top 0.2s var(--at-ease);
}

.at-skip:focus {
	top: 1rem;
}

/* =========================================================================
 * 03 Typography
 * ====================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--at-sp-4);
	font-family: var(--at-font-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--at-ink);
	text-transform: var(--at-display-case);
	letter-spacing: var(--at-display-track);
}

h1 { font-size: var(--at-d-md); }
h2 { font-size: var(--at-d-sm); }
h3 { font-size: var(--at-t-lg); }
h4,
h5,
h6 {
	font-family: var(--at-font-body);
	font-size: var(--at-t-md);
	font-weight: 600;
	letter-spacing: 0;
}

p {
	margin: 0 0 var(--at-sp-4);
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 600;
	color: var(--at-ink);
}

small {
	font-size: var(--at-t-sm);
}

/* =========================================================================
 * 04 Layout
 * ====================================================================== */

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

.at-main {
	min-height: 40vh;
	padding-bottom: var(--at-sp-8);
}

.at-layout {
	display: grid;
	gap: var(--at-sp-7);
	padding-top: var(--at-sp-6);
}

.at-layout--none {
	grid-template-columns: 1fr;
}

.at-layout__main {
	min-width: 0;
}

.at-layout__aside {
	min-width: 0;
}

@media (min-width: 900px) {
	.at-layout--right {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.at-layout--left {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.at-layout--left .at-layout__aside {
		order: -1;
	}
}

.at-section {
	padding-block: var(--at-sp-8);
}

/* =========================================================================
 * 05 Signature: eyebrow & rules
 *
 * The letterspaced micro-label preceded by a short accent rule is the one
 * repeated structural device in this theme. It marks every section, every
 * drawer and every page header, and nothing else competes with it.
 * ====================================================================== */

.at-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: var(--at-sp-3);
	font-family: var(--at-font-body);
	font-size: var(--at-t-xs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--at-accent);
}

.at-eyebrow::before {
	content: "";
	width: 1.8em;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.at-page-header--center .at-eyebrow::after,
.at-blockhead--center .at-eyebrow::after {
	content: "";
	width: 1.8em;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

/* =========================================================================
 * 06 Buttons & links
 * ====================================================================== */

.at-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 2.1em;
	border: 1px solid transparent;
	border-radius: var(--at-radius);
	font-family: var(--at-font-body);
	font-size: var(--at-t-sm);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s var(--at-ease), color 0.25s var(--at-ease), border-color 0.25s var(--at-ease);
}

.at-btn--primary {
	background: var(--at-ink);
	border-color: var(--at-ink);
	color: var(--at-surface);
}

.at-btn--primary:hover,
.at-btn--primary:focus-visible {
	background: var(--at-accent-deep);
	border-color: var(--at-accent-deep);
	color: #fff;
}

.at-btn--ghost {
	background: transparent;
	border-color: var(--at-ink);
	color: var(--at-ink);
}

.at-btn--ghost:hover,
.at-btn--ghost:focus-visible {
	background: var(--at-ink);
	color: var(--at-surface);
}

.at-btn--small {
	padding: 0.7em 1.3em;
	font-size: var(--at-t-xs);
}

.at-btn--block {
	display: flex;
	width: 100%;
}

.at-btn[disabled],
.at-btn.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

.at-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--at-t-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--at-ink);
	border-bottom: 1px solid rgba(var(--at-ink-rgb), 0.25);
	padding-bottom: 0.25em;
	transition: color 0.2s var(--at-ease), border-color 0.2s var(--at-ease);
}

.at-textlink:hover,
.at-textlink:focus-visible {
	color: var(--at-accent-deep);
	border-color: var(--at-accent);
}

.at-textlink svg {
	transition: transform 0.25s var(--at-ease);
}

.at-textlink:hover svg {
	transform: translateX(3px);
}

.at-linkbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--at-t-sm);
	color: var(--at-ink-soft);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.2s var(--at-ease), border-color 0.2s var(--at-ease);
}

.at-linkbtn:hover,
.at-linkbtn:focus-visible {
	color: var(--at-ink);
	border-color: var(--at-line);
}

.at-linkbtn--whatsapp:hover {
	color: var(--at-success);
	border-color: var(--at-success);
}

/* =========================================================================
 * 07 Forms
 * ====================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 0.85em 1em;
	background: var(--at-surface);
	border: 1px solid var(--at-line);
	border-radius: var(--at-radius);
	font-size: var(--at-t-base);
	color: var(--at-ink);
	transition: border-color 0.2s var(--at-ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--at-accent);
}

::placeholder {
	color: var(--at-muted);
	opacity: 1;
}

label {
	display: block;
	margin-bottom: 0.4em;
	font-size: var(--at-t-sm);
	color: var(--at-ink);
}

.at-searchform {
	display: flex;
	gap: var(--at-sp-2);
	max-width: 420px;
}

.at-searchform__field {
	flex: 1;
}

.at-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	background: var(--at-ink);
	color: var(--at-surface);
	border-radius: var(--at-radius);
	flex-shrink: 0;
}

/* =========================================================================
 * 08 Announcement bar
 * ====================================================================== */

.at-topbar {
	background: var(--at-topbar-bg);
	color: var(--at-topbar-color);
	font-size: var(--at-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.at-topbar[hidden] {
	display: none;
}

.at-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	position: relative;
}

.at-topbar__rotator {
	position: relative;
	flex: 1;
	text-align: center;
	min-height: 1.2em;
}

.at-topbar__msg {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	inset: 0;
	transition: opacity 0.5s var(--at-ease);
}

.at-topbar__msg.is-current {
	opacity: 1;
	visibility: visible;
	position: relative;
}

.at-topbar__close {
	position: absolute;
	right: 0;
	color: inherit;
	opacity: 0.6;
	display: flex;
	transition: opacity 0.2s var(--at-ease);
}

.at-topbar__close:hover {
	opacity: 1;
}

/* =========================================================================
 * 09 Header & navigation
 * ====================================================================== */

.at-header {
	position: relative;
	z-index: var(--at-z-header);
	background: var(--at-surface);
	border-bottom: 1px solid var(--at-line);
	transition: background-color 0.3s var(--at-ease), transform 0.3s var(--at-ease), border-color 0.3s var(--at-ease);
}

.at-header.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 1px 0 rgba(var(--at-ink-rgb), 0.06), 0 12px 30px -22px rgba(var(--at-ink-rgb), 0.35);
}

.at-header.is-hidden {
	transform: translateY(-100%);
}

.at-header__row {
	display: flex;
	align-items: center;
	gap: var(--at-sp-4);
	min-height: var(--at-header-h);
}

.at-header__row--nav {
	min-height: 52px;
	justify-content: center;
	border-top: 1px solid var(--at-line);
}

.at-header__side {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	min-width: 0;
}

.at-header__side--end {
	justify-content: flex-end;
}

.at-header__center {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

.at-header__center--nav {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.at-header__row--inline .at-header__side {
	flex: 0 0 auto;
}

.at-header__row--split .at-nav--split {
	flex: 1 1 0;
	min-width: 0;
}

.at-header__row--split .at-header__side--end {
	flex: 0 0 auto;
}

/* Branding */

.at-brand {
	margin: 0;
	font-family: var(--at-font-display);
	font-size: calc(1.35rem * var(--at-scale));
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--at-ink);
	white-space: nowrap;
}

.at-brand--image img {
	max-height: 46px;
	width: auto;
}

.at-brand a {
	display: inline-block;
}

/* Menus */

.at-menu,
.at-utilmenu,
.at-legalmenu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	list-style: none;
	flex-wrap: wrap;
}

.at-utilmenu {
	gap: var(--at-sp-5);
	font-size: var(--at-t-sm);
}

.at-legalmenu {
	gap: var(--at-sp-5);
	font-size: var(--at-t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.at-menu > li {
	position: relative;
}

.at-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 0;
	font-size: var(--at-t-sm);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--at-ink);
	position: relative;
}

.at-menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0.35em;
	width: 0;
	height: 1px;
	background: var(--at-accent);
	transition: width 0.3s var(--at-ease);
}

.at-menu > li:hover > .at-menu-link::after,
.at-menu > li:focus-within > .at-menu-link::after,
.at-menu > li.current-menu-item > .at-menu-link::after {
	width: 100%;
}

.at-menu-item--highlight > .at-menu-link {
	color: var(--at-sale);
}

.at-menu-caret {
	transform: rotate(90deg);
	opacity: 0.5;
	transition: transform 0.25s var(--at-ease);
}

.at-menu > li:hover > .at-menu-link .at-menu-caret {
	transform: rotate(-90deg);
}

.at-menu-link--hint {
	color: var(--at-accent);
}

/* Standard dropdown */

.at-submenu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 20;
	min-width: 230px;
	padding: var(--at-sp-4) 0;
	margin: 0;
	list-style: none;
	background: var(--at-surface);
	border: 1px solid var(--at-line);
	border-radius: var(--at-radius);
	box-shadow: 0 24px 50px -30px rgba(var(--at-ink-rgb), 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s var(--at-ease), transform 0.22s var(--at-ease), visibility 0.22s;
}

.at-menu li:hover > .at-submenu,
.at-menu li:focus-within > .at-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.at-submenu .at-menu-link {
	display: block;
	padding: 0.5em 1.4em;
	font-size: var(--at-t-sm);
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--at-ink-soft);
	transition: color 0.2s var(--at-ease), padding-left 0.2s var(--at-ease);
}

.at-submenu .at-menu-link::after {
	display: none;
}

.at-submenu .at-menu-link:hover,
.at-submenu .at-menu-link:focus-visible {
	color: var(--at-ink);
	padding-left: 1.7em;
}

.at-submenu--depth-1 {
	top: 0;
	left: 100%;
}

/* =========================================================================
 * 10 Mega menu
 *
 * Opt in by adding the class "mega" to a top-level menu item, and
 * "mega-2".."mega-5" to set the column count.
 * ====================================================================== */

.at-menu-item--mega {
	position: static;
}

.at-submenu--mega {
	left: 0;
	right: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--at-mega-cols, 4), minmax(0, 1fr));
	gap: var(--at-sp-5) var(--at-sp-6);
	padding: var(--at-sp-6) var(--at-gutter);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

.at-mega-cols-2 > .at-submenu--mega { --at-mega-cols: 2; }
.at-mega-cols-3 > .at-submenu--mega { --at-mega-cols: 3; }
.at-mega-cols-4 > .at-submenu--mega { --at-mega-cols: 4; }
.at-mega-cols-5 > .at-submenu--mega { --at-mega-cols: 5; }

.at-submenu--mega > li > .at-menu-link {
	padding: 0 0 0.6em;
	font-size: var(--at-t-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--at-accent);
	border-bottom: 1px solid var(--at-line);
	margin-bottom: 0.7em;
}

.at-submenu--mega > li > .at-menu-link:hover {
	padding-left: 0;
}

.at-submenu--mega .at-submenu {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: none;
}

.at-submenu--mega .at-submenu .at-menu-link {
	padding: 0.35em 0;
}

.at-submenu--mega .at-submenu .at-menu-link:hover {
	padding-left: 0.4em;
}

.at-menu-desc {
	display: block;
	font-size: var(--at-t-xs);
	color: var(--at-muted);
	text-transform: none;
	letter-spacing: 0;
}

/* Header actions */

.at-actions {
	display: flex;
	align-items: center;
	gap: clamp(0.4rem, 1.5vw, 1rem);
}

.at-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--at-ink);
	border-radius: var(--at-radius);
	transition: color 0.2s var(--at-ease), background-color 0.2s var(--at-ease);
}

.at-action:hover,
.at-action:focus-visible {
	color: var(--at-accent-deep);
	background: rgba(var(--at-accent-rgb), 0.07);
}

.at-action--menu {
	display: inline-flex;
}

@media (min-width: 1024px) {
	.at-action--menu {
		display: none;
	}
}

@media (max-width: 1023px) {
	.at-action--desktop {
		display: none;
	}

	.at-header__row--nav,
	.at-nav--split,
	.at-header__center--nav,
	.at-utilmenu {
		display: none;
	}

	.at-header__row {
		min-height: 62px;
	}
}

.at-cart-count,
.at-wish-count {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--at-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
}

.at-cart-count[data-count="0"],
.at-wish-count:empty {
	display: none;
}

/* Transparent header over a hero */

.at-has-transparent-header .at-header:not(.is-stuck) {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.at-has-transparent-header .at-header:not(.is-stuck) .at-brand,
.at-has-transparent-header .at-header:not(.is-stuck) .at-menu-link,
.at-has-transparent-header .at-header:not(.is-stuck) .at-action {
	color: #fff;
}

.at-has-transparent-header .at-header:not(.is-stuck) .at-header__row--nav {
	border-top-color: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
 * 11 Drawers, modals, toast
 * ====================================================================== */

.at-drawer,
.at-modal,
.at-search {
	position: fixed;
	inset: 0;
	z-index: var(--at-z-drawer);
}

.at-drawer[hidden],
.at-modal[hidden],
.at-search[hidden] {
	display: none;
}

.at-modal {
	z-index: var(--at-z-modal);
}

.at-drawer__backdrop,
.at-modal__backdrop,
.at-search__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--at-ink-rgb), 0.45);
	opacity: 0;
	transition: opacity 0.3s var(--at-ease);
}

.at-drawer.is-open .at-drawer__backdrop,
.at-modal.is-open .at-modal__backdrop,
.at-search.is-open .at-search__backdrop {
	opacity: 1;
}

.at-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--at-surface);
	transition: transform 0.36s var(--at-ease);
}

.at-drawer--right .at-drawer__panel {
	right: 0;
	transform: translateX(100%);
}

.at-drawer--left .at-drawer__panel {
	left: 0;
	transform: translateX(-100%);
}

.at-drawer.is-open .at-drawer__panel {
	transform: translateX(0);
}

.at-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-sp-4);
	padding: var(--at-sp-5) var(--at-sp-5) var(--at-sp-4);
	border-bottom: 1px solid var(--at-line);
	flex-shrink: 0;
}

.at-drawer__head .at-eyebrow {
	margin-bottom: 0;
}

.at-drawer__close,
.at-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--at-ink);
	border-radius: var(--at-radius);
	transition: background-color 0.2s var(--at-ease);
}

.at-drawer__close:hover,
.at-modal__close:hover {
	background: var(--at-canvas);
}

.at-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--at-sp-5);
	overscroll-behavior: contain;
}

.at-drawer__foot {
	flex-shrink: 0;
	padding: var(--at-sp-5);
	border-top: 1px solid var(--at-line);
	display: flex;
	flex-direction: column;
	gap: var(--at-sp-3);
}

.at-drawer__link {
	display: flex;
	align-items: center;
	gap: 0.7em;
	font-size: var(--at-t-sm);
	color: var(--at-ink-soft);
}

.at-drawer__link:hover {
	color: var(--at-ink);
}

/* Mobile menu */

.at-mobile-menu {
	list-style: none;
}

.at-mobile-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--at-line);
}

.at-mobile-link {
	flex: 1;
	padding: 0.95em 0;
	font-size: var(--at-t-md);
	font-family: var(--at-font-display);
	color: var(--at-ink);
}

.at-mobile-item--depth-1 .at-mobile-link,
.at-mobile-item--depth-2 .at-mobile-link {
	font-family: var(--at-font-body);
	font-size: var(--at-t-sm);
	color: var(--at-ink-soft);
	padding-left: var(--at-sp-4);
}

.at-mobile-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--at-muted);
}

.at-mobile-toggle svg {
	transform: rotate(90deg);
	transition: transform 0.25s var(--at-ease);
}

.at-mobile-toggle[aria-expanded="true"] svg {
	transform: rotate(-90deg);
}

.at-mobile-sub {
	list-style: none;
	padding-left: var(--at-sp-3);
}

/* Modal */

.at-modal__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -46%);
	width: min(560px, calc(100% - 2rem));
	max-height: min(86vh, 900px);
	overflow-y: auto;
	padding: var(--at-sp-6);
	background: var(--at-surface);
	border-radius: var(--at-radius-lg);
	opacity: 0;
	transition: opacity 0.28s var(--at-ease), transform 0.28s var(--at-ease);
}

.at-modal__panel--wide {
	width: min(960px, calc(100% - 2rem));
	padding: 0;
}

.at-modal.is-open .at-modal__panel {
	opacity: 1;
	transform: translate(-50%, -50%);
}

.at-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: var(--at-surface);
}

.at-modal__title {
	margin-bottom: var(--at-sp-4);
	padding-right: 2.5rem;
}

/* Toast */

.at-toast {
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translate(-50%, 1.5rem);
	z-index: var(--at-z-toast);
	padding: 0.9em 1.6em;
	background: var(--at-ink);
	color: var(--at-surface);
	border-radius: var(--at-radius);
	font-size: var(--at-t-sm);
	letter-spacing: 0.04em;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s var(--at-ease), transform 0.3s var(--at-ease), visibility 0.3s;
	max-width: calc(100% - 2rem);
	text-align: center;
}

.at-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.at-toast.is-error {
	background: var(--at-sale);
}

/* =========================================================================
 * 12 Search overlay
 * ====================================================================== */

.at-search__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--at-surface);
	padding-block: var(--at-sp-6);
	transform: translateY(-100%);
	transition: transform 0.36s var(--at-ease);
	max-height: 100vh;
	overflow-y: auto;
}

.at-search.is-open .at-search__panel {
	transform: translateY(0);
}

.at-search__form {
	display: flex;
	align-items: center;
	gap: var(--at-sp-3);
	border-bottom: 1px solid var(--at-ink);
	padding-bottom: var(--at-sp-3);
}

.at-search__icon {
	color: var(--at-muted);
	flex-shrink: 0;
}

.at-search__field {
	flex: 1;
	border: 0;
	padding: 0.4em 0;
	background: transparent;
	font-family: var(--at-font-display);
	font-size: var(--at-d-sm);
	color: var(--at-ink);
}

.at-search__field:focus {
	outline: none;
	border: 0;
}

.at-search__close {
	display: inline-flex;
	color: var(--at-ink);
	flex-shrink: 0;
}

.at-search__results {
	margin-top: var(--at-sp-5);
}

.at-search__hint {
	font-size: var(--at-t-sm);
	color: var(--at-muted);
}

.at-sresults {
	list-style: none;
	display: grid;
	gap: var(--at-sp-3);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.at-sresult a {
	display: flex;
	align-items: center;
	gap: var(--at-sp-3);
	padding: var(--at-sp-2);
	border: 1px solid transparent;
	border-radius: var(--at-radius);
	transition: border-color 0.2s var(--at-ease), background-color 0.2s var(--at-ease);
}

.at-sresult a:hover {
	border-color: var(--at-line);
	background: var(--at-canvas);
}

.at-sresult img {
	width: 56px;
	height: 74px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--at-canvas);
}

.at-sresult__title {
	display: block;
	font-size: var(--at-t-sm);
	color: var(--at-ink);
}

.at-sresult__price {
	display: block;
	font-size: var(--at-t-xs);
	color: var(--at-muted);
}

/* =========================================================================
 * 13 Page header, breadcrumbs, pagination
 * ====================================================================== */

.at-page-header {
	padding-block: var(--at-sp-7) var(--at-sp-5);
}

.at-page-header--center {
	text-align: center;
}

.at-page-header--center .at-crumbs {
	justify-content: center;
}

.at-page-header--center .at-eyebrow {
	justify-content: center;
}

.at-page-header__title {
	margin-bottom: 0;
	font-size: var(--at-d-md);
}

.at-page-header__sub {
	max-width: 60ch;
	margin: var(--at-sp-4) auto 0;
	color: var(--at-muted);
}

.at-page-header--left .at-page-header__sub {
	margin-inline: 0;
}

.at-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--at-sp-4);
	font-size: var(--at-t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--at-muted);
}

.at-crumbs a:hover {
	color: var(--at-accent-deep);
}

.at-crumbs__sep {
	opacity: 0.4;
}

.at-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--at-sp-2);
	margin-top: var(--at-sp-7);
}

.at-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.8em;
	justify-content: center;
	border: 1px solid var(--at-line);
	border-radius: var(--at-radius);
	font-size: var(--at-t-sm);
	color: var(--at-ink-soft);
	transition: border-color 0.2s var(--at-ease), color 0.2s var(--at-ease);
}

.at-pagination .page-numbers:hover {
	border-color: var(--at-ink);
	color: var(--at-ink);
}

.at-pagination .page-numbers.current {
	background: var(--at-ink);
	border-color: var(--at-ink);
	color: var(--at-surface);
}

.at-pagination .dots {
	border-color: transparent;
}

/* =========================================================================
 * 14 Journal
 * ====================================================================== */

.at-posts {
	display: grid;
	gap: var(--at-sp-6);
}

.at-posts--grid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.at-posts--list {
	grid-template-columns: 1fr;
	gap: var(--at-sp-7);
}

.at-post-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: var(--at-sp-4);
	background: var(--at-canvas);
	border-radius: var(--at-radius);
}

.at-post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.7s var(--at-ease);
}

.at-post-card:hover .at-post-card__media img {
	transform: scale(1.04);
}

.at-posts--list .at-post-card {
	display: grid;
	gap: var(--at-sp-5);
	align-items: center;
}

@media (min-width: 760px) {
	.at-posts--list .at-post-card {
		grid-template-columns: 340px minmax(0, 1fr);
	}

	.at-posts--list .at-post-card__media {
		margin-bottom: 0;
	}
}

.at-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: var(--at-sp-2);
	font-size: var(--at-t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--at-muted);
}

.at-post-meta__cat {
	color: var(--at-accent);
}

.at-post-card__title {
	font-size: var(--at-t-lg);
	margin-bottom: var(--at-sp-2);
}

.at-post-card__title a:hover {
	color: var(--at-accent-deep);
}

.at-post-card__excerpt {
	color: var(--at-muted);
	margin-bottom: var(--at-sp-4);
}

.at-single {
	max-width: 780px;
	margin-inline: auto;
}

.at-single__head {
	text-align: center;
	padding-block: var(--at-sp-5) var(--at-sp-6);
}

.at-single__head .at-crumbs,
.at-single__head .at-post-meta {
	justify-content: center;
}

.at-single__title {
	font-size: var(--at-d-md);
	margin-bottom: 0;
}

.at-single__media {
	margin-bottom: var(--at-sp-6);
}

.at-single__media img {
	width: 100%;
	border-radius: var(--at-radius);
}

.at-single__media figcaption {
	margin-top: var(--at-sp-2);
	font-size: var(--at-t-xs);
	color: var(--at-muted);
	text-align: center;
}

.at-single__tags {
	margin-top: var(--at-sp-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-sp-2);
}

.at-single__tags a {
	padding: 0.4em 0.9em;
	border: 1px solid var(--at-line);
	border-radius: 999px;
	font-size: var(--at-t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--at-muted);
}

.at-single__tags a:hover {
	border-color: var(--at-accent);
	color: var(--at-accent-deep);
}

.at-post-nav {
	display: grid;
	gap: var(--at-sp-4);
	max-width: 780px;
	margin: var(--at-sp-8) auto 0;
	padding-top: var(--at-sp-6);
	border-top: 1px solid var(--at-line);
}

@media (min-width: 700px) {
	.at-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.at-post-nav__item--next {
		text-align: right;
	}

	.at-post-nav__item--next .at-eyebrow {
		flex-direction: row-reverse;
	}
}

.at-post-nav__title {
	display: block;
	font-family: var(--at-font-display);
	font-size: var(--at-t-md);
	color: var(--at-ink);
}

.at-post-nav__item:hover .at-post-nav__title {
	color: var(--at-accent-deep);
}

/* Comments */

.at-comments {
	max-width: 780px;
	margin: var(--at-sp-8) auto 0;
	padding-top: var(--at-sp-6);
	border-top: 1px solid var(--at-line);
}

.at-comments__title {
	font-size: var(--at-t-lg);
}

.at-comments__list,
.at-comments__list .children {
	list-style: none;
}

.at-comments__list .children {
	padding-left: var(--at-sp-5);
	border-left: 1px solid var(--at-line);
	margin-top: var(--at-sp-4);
}

.at-comments__list li {
	margin-bottom: var(--at-sp-5);
}

.at-comments .comment-meta {
	font-size: var(--at-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--at-muted);
	margin-bottom: var(--at-sp-2);
}

.at-comments .avatar {
	border-radius: 999px;
	float: left;
	margin-right: var(--at-sp-3);
}

.at-comments .comment-body {
	overflow: hidden;
}

.at-comments .reply {
	font-size: var(--at-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.at-commentform p {
	margin-bottom: var(--at-sp-4);
}

/* =========================================================================
 * 15 Prose & widgets
 * ====================================================================== */

.at-prose {
	font-size: var(--at-t-md);
	line-height: 1.75;
}

.at-prose > * + * {
	margin-top: var(--at-sp-4);
}

.at-prose h2 {
	margin-top: var(--at-sp-6);
	font-size: var(--at-d-sm);
}

.at-prose h3 {
	margin-top: var(--at-sp-5);
}

.at-prose a {
	color: var(--at-ink);
	border-bottom: 1px solid var(--at-accent);
	transition: color 0.2s var(--at-ease);
}

.at-prose a:hover {
	color: var(--at-accent-deep);
}

.at-prose ul,
.at-prose ol {
	padding-left: 1.3em;
}

.at-prose li {
	margin-bottom: 0.4em;
}

.at-prose blockquote {
	margin: var(--at-sp-6) 0;
	padding-left: var(--at-sp-5);
	border-left: 2px solid var(--at-accent);
	font-family: var(--at-font-display);
	font-size: var(--at-t-lg);
	line-height: 1.4;
	color: var(--at-ink);
}

.at-prose img {
	border-radius: var(--at-radius);
}

.at-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--at-t-sm);
}

.at-prose th,
.at-prose td {
	padding: 0.7em 0.9em;
	border: 1px solid var(--at-line);
	text-align: left;
}

.at-prose th {
	background: var(--at-canvas);
	font-weight: 600;
	color: var(--at-ink);
}

.at-page {
	max-width: 780px;
	margin-inline: auto;
}

.at-widget {
	margin-bottom: var(--at-sp-6);
}

.at-widget__title {
	font-family: var(--at-font-body);
	font-size: var(--at-t-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--at-accent);
	margin-bottom: var(--at-sp-3);
	padding-bottom: var(--at-sp-2);
	border-bottom: 1px solid var(--at-line);
}

.at-widget ul {
	list-style: none;
}

.at-widget li {
	padding: 0.4em 0;
	font-size: var(--at-t-sm);
}

.at-widget a:hover {
	color: var(--at-accent-deep);
}

/* =========================================================================
 * 16 Footer & mobile bar
 * ====================================================================== */

.at-footer {
	margin-top: var(--at-sp-8);
	background: var(--at-footer-bg);
	color: var(--at-footer-color);
	font-size: var(--at-t-sm);
}

.at-footer__widgets {
	padding-block: var(--at-sp-8) var(--at-sp-6);
}

.at-footer__cols {
	display: grid;
	gap: var(--at-sp-6);
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.at-footer .at-widget__title {
	color: var(--at-footer-heading);
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.at-footer .at-widget a:hover {
	color: var(--at-footer-heading);
}

.at-footer__base {
	padding-block: var(--at-sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.at-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-sp-4);
}

.at-footer__copy {
	margin: 0;
	font-size: var(--at-t-xs);
	letter-spacing: 0.06em;
}

.at-social {
	display: flex;
	align-items: center;
	gap: var(--at-sp-3);
	list-style: none;
}

.at-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid currentColor;
	border-radius: 999px;
	opacity: 0.7;
	transition: opacity 0.2s var(--at-ease), color 0.2s var(--at-ease);
}

.at-social a:hover {
	opacity: 1;
	color: var(--at-accent);
}

.at-payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-sp-2);
	list-style: none;
	margin-top: var(--at-sp-4);
	padding-top: var(--at-sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.at-payments li {
	padding: 0.35em 0.8em;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--at-radius);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* Mobile bar */

.at-mobilebar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--at-z-header);
	display: none;
	background: var(--at-surface);
	border-top: 1px solid var(--at-line);
	padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 767px) {
	.at-has-mobile-bar .at-mobilebar {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.at-has-mobile-bar .at-footer {
		padding-bottom: 64px;
	}

	.at-has-mobile-bar .at-toast {
		bottom: 5.5rem;
	}
}

@media (max-width: 780px) {
	.at-action {
		width: 44px;
		height: 44px;
	}
}

.at-mobilebar__item {
	position: relative;
	min-height: 54px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 0.6rem 0.2rem;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--at-muted);
}

.at-mobilebar__item.is-current,
.at-mobilebar__item:hover {
	color: var(--at-ink);
}

.at-mobilebar__item .at-cart-count,
.at-mobilebar__item .at-wish-count {
	top: 2px;
	right: calc(50% - 22px);
}

/* =========================================================================
 * 17 Empty states & 404
 * ====================================================================== */

.at-empty {
	max-width: 480px;
	margin-inline: auto;
	padding-block: var(--at-sp-8);
	text-align: center;
}

.at-empty__title {
	font-size: var(--at-d-sm);
	margin-bottom: var(--at-sp-3);
}

.at-empty__text {
	color: var(--at-muted);
	margin-bottom: var(--at-sp-5);
}

.at-404 {
	max-width: 620px;
	margin-inline: auto;
	padding-block: var(--at-sp-9);
	text-align: center;
}

.at-404 .at-eyebrow {
	justify-content: center;
}

.at-404__title {
	font-size: var(--at-d-md);
	margin-bottom: var(--at-sp-3);
}

.at-404__text {
	color: var(--at-muted);
	margin-bottom: var(--at-sp-5);
}

.at-404 .at-searchform {
	margin: 0 auto var(--at-sp-5);
}

.at-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--at-sp-3);
	justify-content: center;
}

/* =========================================================================
 * 18 Motion & accessibility
 * ====================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--at-accent);
	outline-offset: 3px;
	border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Reveal on scroll — opt in with data-atelia-reveal */

[data-atelia-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s var(--at-ease), transform 0.7s var(--at-ease);
}

[data-atelia-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-atelia-reveal] {
		opacity: 1;
		transform: none;
	}
}