/*
 * ArtX shell: the header and the footer, at the measured geometry
 * (the control plane's measured token spec: Header and Footer). Reads tokens.css
 * and base.css. Breakpoints: xs < 768, sm from 768, md from 1280. The header
 * text links use equal gaps; account buttons retain their reference slot widths.
 */

/* Header */
.artx-header {
	position: relative;
	z-index: 20;
	height: var(--artx-header-height);
	background: var(--artx-color-white-100);
	border-bottom: var(--artx-header-border);
}

.artx-header__nav {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: var(--artx-frame-max-width);
	height: var(--artx-header-nav-height);
	margin: 0 auto;
	padding: var(--artx-header-top-gap) var(--artx-page-padding) 0;
}

.artx-header__row {
	display: flex;
	align-items: center;
	height: var(--artx-header-row-height);
}

.artx-header__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 100%;
	min-width: var(--artx-header-logo-size);
	color: var(--artx-color-black-100);
}

.artx-header__logo:hover,
.artx-header__logo:focus-visible {
	color: var(--artx-color-black-100);
}

.artx-header__mark {
	display: block;
	width: auto;
	height: var(--artx-header-logo-size);
}

.artx-header__search {
	position: relative;
	flex: 0 1 var(--artx-header-search-width);
	min-width: 0;
	margin: 0;
	margin-inline-start: var(--artx-header-logo-gap);
}

.artx-header__search-input {
	display: block;
	width: 100%;
	height: var(--artx-header-search-height);
	padding: var(--artx-header-search-padding);
	border: var(--artx-input-border);
	border-radius: var(--artx-input-radius);
	background: var(--artx-color-white-100);
	color: var(--artx-color-black-100);
	font-size: var(--artx-type-sm-size);
	line-height: var(--artx-type-sm-line);
	-webkit-appearance: none;
	appearance: none;
}

.artx-header__search-input::placeholder {
	color: var(--artx-color-black-60);
	opacity: 1;
}

.artx-header__search-input::-webkit-search-decoration,
.artx-header__search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.artx-header__search-input:focus {
	outline: none;
	border-color: var(--artx-color-black-100);
}

.artx-header__search-submit {
	position: absolute;
	top: 50%;
	right: calc(var(--artx-header-search-icon-right) - 5px);
	display: block;
	width: calc(var(--artx-header-search-icon-size) + 10px);
	height: calc(var(--artx-header-search-icon-size) + 10px);
	margin-top: calc(var(--artx-header-search-icon-size) / -2 - 5px);
	padding: 5px;
	border: 0;
	background: none;
	color: var(--artx-color-black-60);
	cursor: pointer;
}

.artx-header__search-submit:hover,
.artx-header__search-submit:focus-visible {
	color: var(--artx-color-black-100);
}

/* While the field holds a term the icon slot carries the clear control instead of the magnifier */
.artx-header__search-clear {
	position: absolute;
	top: 50%;
	right: calc(var(--artx-header-search-icon-right) - 7px);
	display: none;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	padding: 7px;
	border: 0;
	background: none;
	color: var(--artx-color-black-60);
	cursor: pointer;
}


.artx-header__search-clear:hover,
.artx-header__search-clear:focus-visible {
	color: var(--artx-color-black-100);
}

.artx-header__icon {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
}

/* xs: the account icon and the menu toggle at the right of the row */
.artx-header__account {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--artx-header-account-width);
	height: var(--artx-header-toggle-size);
	margin-left: auto;
	padding: 0 var(--artx-space-1);
	color: var(--artx-color-black-100);
}

.artx-header__account .artx-header__icon {
	width: var(--artx-header-account-icon);
	height: var(--artx-header-account-icon);
}

.artx-header__toggle {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--artx-header-toggle-size);
	height: var(--artx-header-toggle-size);
	margin-right: calc(var(--artx-space-1) * -1);
	padding: 0;
	border: 0;
	background: none;
	color: var(--artx-color-black-100);
	cursor: pointer;
}

.artx-header__toggle .artx-header__icon {
	width: var(--artx-header-toggle-icon);
	height: var(--artx-header-toggle-icon);
	fill: currentColor;
	stroke: none;
}

/* The top-link cluster and the account pills: sm+ only */
.artx-header__cluster {
	display: none;
}

.artx-header__toplinks {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artx-header__toplink,
.artx-header__links a {
	display: flex;
	align-items: center;
	color: var(--artx-color-black-100);
	font-size: var(--artx-header-link-size);
	line-height: var(--artx-header-link-line);
	white-space: nowrap;
}

.artx-header__toplink:hover,
.artx-header__toplink:focus-visible,
.artx-header__links a:hover,
.artx-header__links a:focus-visible {
	color: var(--artx-color-blue-100);
}

.artx-header__pill {
	flex: 0 0 auto;
	margin-left: var(--artx-header-pill-gap);
	padding-right: 16px;
	padding-left: 16px;
}

/* xs: every link lives in a panel under the header, opened by the toggle */
.artx-header__row--menu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	align-items: stretch;
	height: calc(100vh - var(--artx-header-nav-height));
	height: calc(100dvh - var(--artx-header-nav-height));
	overflow-y: auto;
	overscroll-behavior-y: contain;
	padding: var(--artx-space-1) var(--artx-page-padding) var(--artx-space-2);
	background: var(--artx-color-white-100);
	border-bottom: var(--artx-header-border);
}

.artx-header.artx-is-open .artx-header__row--menu {
	display: flex;
}

.artx-header__links {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artx-header__links a {
	height: var(--artx-header-menu-row-height);
}

.artx-header__links--panel {
	margin-top: var(--artx-space-1);
	padding-top: var(--artx-space-1);
	border-top: var(--artx-hairline);
}

@media (max-width: 767px) {
	.artx-header.artx-is-open {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}
}

@media (min-width: 768px) {
	.artx-header__nav {
		overflow: hidden;
	}

	/* From sm a filled field carries the clear control and the black-60 border; at xs the
	   reference's field shows its placeholder on the results page, so the magnifier stays */
	.artx-header__search.artx-has-term .artx-header__search-clear {
		display: block;
	}

	.artx-header__search.artx-has-term .artx-header__search-submit {
		display: none;
	}

	.artx-header__search.artx-has-term .artx-header__search-input {
		border-color: var(--artx-color-black-60);
	}

	/* sm: the icon-only search box, growing into the row while focused */
	.artx-header__search {
		flex: 0 0 var(--artx-header-search-collapsed-width);
	}

	.artx-header__search .artx-header__search-input {
		padding: 0;
		color: transparent;
	}

	.artx-header__search .artx-header__search-input::placeholder {
		color: transparent;
	}

	.artx-header__search:focus-within {
		flex: 1 1 auto;
	}

	.artx-header__search:focus-within .artx-header__search-input {
		padding: var(--artx-header-search-padding);
		color: var(--artx-color-black-100);
	}

	.artx-header__search:focus-within .artx-header__search-input::placeholder {
		color: var(--artx-color-black-60);
	}

	.artx-header__account,
	.artx-header__toggle {
		display: none;
	}

	.artx-header__cluster {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		margin-left: auto;
		padding-left: var(--artx-header-cluster-gap);
	}

	.artx-header__toplink {
		height: var(--artx-header-row-height);
		padding: var(--artx-header-link-padding);
	}

	.artx-header__pill {
		min-width: var(--artx-slot-sm, auto);
	}

	.artx-header__row--menu,
	.artx-header.artx-is-open .artx-header__row--menu {
		position: static;
		display: flex;
		overflow: visible;
		flex-direction: row;
		align-items: center;
		height: var(--artx-header-row-height);
		padding: 0;
		border: 0;
	}

	.artx-header__links {
		flex-direction: row;
		gap: var(--artx-space-2);
	}

	.artx-header__links a {
		height: var(--artx-header-row-height);
		font-size: var(--artx-header-nav-size-sm);
	}

	.artx-header__link--md,
	.artx-header__links--panel {
		display: none;
	}
}

/* The compact search control shares one centre for its icon and hover target. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.artx-header__search:not(:focus-within):not(.artx-has-term) .artx-header__search-submit {
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.artx-header__search-submit .artx-header__icon {
		width: var(--artx-header-search-icon-size);
		height: var(--artx-header-search-icon-size);
	}
}

@media (min-width: 1280px) {
	/* md: the full search field between the mark and the cluster */
	.artx-header__search,
	.artx-header__search:focus-within {
		flex: 1 1 auto;
	}

	.artx-header__search .artx-header__search-input {
		padding: var(--artx-header-search-padding);
		color: var(--artx-color-black-100);
	}

	.artx-header__search .artx-header__search-input::placeholder {
		color: var(--artx-color-black-60);
	}

	.artx-header__pill {
		min-width: var(--artx-slot-md, auto);
	}

	.artx-header__links a {
		font-size: var(--artx-header-link-size);
	}

	.artx-header__link--md {
		display: list-item;
	}
}

/* Footer */
.artx-footer-band {
	border-top: var(--artx-hairline);
}

.artx-footer {
	padding-top: var(--artx-footer-padding-top);
	color: var(--artx-color-black-100);
	font-size: var(--artx-type-sm-size);
	line-height: var(--artx-type-sm-line);
}

.artx-footer__columns {
	row-gap: var(--artx-footer-group-gap);
}

.artx-footer__heading {
	margin: 0 0 var(--artx-footer-heading-gap);
	font-size: var(--artx-type-sm-size);
	line-height: var(--artx-footer-heading-line);
	font-weight: var(--artx-font-weight-bold);
}

.artx-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.artx-footer__links li + li {
	margin-top: var(--artx-footer-link-gap);
}

.artx-footer__links a {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	color: var(--artx-color-black-100);
	font-size: var(--artx-type-sm-size);
	line-height: var(--artx-footer-link-line);
}

.artx-footer__links a:hover,
.artx-footer__links a:focus-visible {
	color: var(--artx-color-blue-100);
}

/* xs: the legal text follows the groups; the mark sits alone under the rule */
.artx-footer__legal {
	display: flex;
	flex-direction: column;
	margin-top: var(--artx-footer-group-gap);
}

.artx-footer__meta {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	order: 1;
	column-gap: var(--artx-footer-legal-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--artx-color-black-60);
	font-size: var(--artx-type-xs-size);
	line-height: var(--artx-footer-legal-line);
}

.artx-footer__meta a {
	color: var(--artx-color-black-60);
}

.artx-footer__meta a:hover,
.artx-footer__meta a:focus-visible {
	color: var(--artx-color-blue-100);
}

.artx-footer__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	order: 2;
	height: var(--artx-footer-mark-size);
	margin-top: var(--artx-footer-legal-gap);
	padding: var(--artx-footer-legal-padding) 0;
	border-top: var(--artx-hairline);
	box-sizing: content-box;
}

.artx-footer__mark img {
	display: block;
	width: var(--artx-footer-mark-size);
	height: var(--artx-footer-mark-size);
}

@media (min-width: 768px) {
	.artx-footer__legal {
		flex-direction: row;
		align-items: center;
		min-height: var(--artx-footer-legal-min-height);
		margin-top: var(--artx-footer-legal-gap);
		padding: var(--artx-footer-legal-padding) 0;
		border-top: var(--artx-hairline);
		box-sizing: content-box;
	}

	.artx-footer__mark {
		order: 0;
		margin: 0 var(--artx-footer-mark-gap) 0 0;
		padding: 0;
		border: 0;
	}
}

/* Catalogue hierarchy wraps without clipping long artwork names. */
.artx-breadcrumbs { padding: 12px 0; font-size: 13px; line-height: 1.5; }
.artx-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; }
.artx-breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
.artx-breadcrumbs li + li::before { content: "/"; margin-inline-end: 10px; color: #707070; }
.artx-breadcrumbs a { text-decoration: underline; }

/* Search suggestions sit over the page, without moving the header or results. */
.artx-search-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: min(560px, 70dvh);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.artx-search-suggestions[hidden],
.artx-search-suggestions__notice[hidden] { display: none; }
.artx-search-suggestions__notice { margin: 0; padding: 12px 16px; font-size: 14px; color: #555; }
.artx-search-suggestions__option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px 16px;
	color: #111;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
}
.artx-search-suggestions__option:hover,
.artx-search-suggestions__option[aria-selected="true"] { background: #f2f2f2; color: #111; box-shadow: inset 3px 0 #111; }
.artx-search-suggestions__option img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; background: #fafafa; }
.artx-search-suggestions__option > span { min-width: 0; overflow-wrap: anywhere; }
.artx-search-suggestions__option small { display: block; margin-top: 3px; font-size: 12px; color: #666; }
.artx-search-suggestions__option:last-child { border-top: 1px solid #eee; font-weight: 500; }
@media (max-width: 767.98px) {
	.artx-search-suggestions { position: fixed; top: 60px; left: 16px; right: 16px; max-height: calc(70dvh - 60px); }
}

.artx-header.artx-has-suggestions .artx-header__nav { overflow: visible; }
.artx-search-correction { margin: 16px 0 0; font-size: 15px; color: #555; }

.artx-search-suggestions mark { background: transparent; color: inherit; font-weight: 700; }
.artx-search-suggestions__option:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
@media (forced-colors: active) {
	.artx-search-suggestions__option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Shared customer enquiry forms, including the assistant available on every route. */
.artx-assistance { margin: 24px; padding: 20px; border: 1px solid var(--artx-color-black-15); }
.artx-assistance summary { cursor: pointer; min-height: 24px; }
.artx-assistance > p, #artx-chat-log p { margin: 16px 0; max-width: 75ch; line-height: 1.6; overflow-wrap: anywhere; }
#artx-contact-form, #artx-chat-form { max-width: 760px; }
#artx-contact-form > p { margin: 16px 0; }
#artx-contact-form label, #artx-chat-form label { display: block; margin-bottom: 8px; line-height: 1.5; }
#artx-contact-form input, #artx-contact-form textarea, #artx-chat-form textarea {
	display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 8px;
	padding: 12px; border: 1px solid var(--artx-color-black-60); border-radius: 0;
	background: var(--artx-color-white-100); color: var(--artx-color-black-100); font: inherit;
}
#artx-contact-form textarea, #artx-chat-form textarea { resize: vertical; line-height: 1.5; }
#artx-contact-form button, #artx-chat-form button { min-height: 44px; padding: 10px 20px; margin: 8px 8px 0 0; font: inherit; }
#artx-contact-form :focus-visible, .artx-assistance :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#artx-contact-form [role="status"], #artx-chat-form [role="status"] { margin: 16px 0; line-height: 1.5; }
#artx-contact-form button:disabled, #artx-chat-form button:disabled { opacity: .6; cursor: wait; }

.artx-store-identity { font-size:12px; line-height:1.6; overflow-wrap:anywhere; padding-top:16px; }
.artx-store-identity p { margin:0 0 4px; }

/* Missing-page recovery keeps typography and actions readable at every width. */
.artx-notfound { padding-top: 64px; padding-bottom: 96px; }
.artx-notfound > h1 { max-width: 24ch; font-size: 40px; line-height: 1.2; }
.artx-notfound > p { max-width: 65ch; margin-top: 20px; }
.artx-notfound > form, .artx-notfound > .artx-recovery-grid { margin-top: 24px; }
@media (max-width: 767.98px) {
    .artx-notfound { padding-top: 32px; padding-bottom: 48px; }
    .artx-notfound > h1 { font-size: 32px; }
}