/*
Theme Name: EIRLYSS Editorial
Description: Child theme of Twenty Twenty-Five for EIRLYSS. The landing page is Alena's own design (her painting, her illuminated E, Kumbh Sans); the store, The Collection, carries her typeface and palette: collection and category pages with filters, piece pages that lead with the story, the bag, an opening-soon checkout, search and a 404 page. Native WordPress and WooCommerce blocks, no page builder. Version history: the project record.
Author: EIRLYSS project
Template: twentytwentyfive
Version: 1.7.1
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.3
Text Domain: eirlyss
License: MIT (code). Fonts: SIL Open Font License 1.1 (see assets/fonts/*/OFL.txt). Photographs: Unsplash License; the coming-soon painting and logo: supplied by Alena for EIRLYSS (see assets/images/CREDITS.md).
*/

/* Colours, fonts, sizes and spacing live in theme.json (Site Editor > Styles).
   This file holds only layout plumbing the block settings cannot express. */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Header: wordmark left, menu exactly centred, account and bag right (the Illusion arrangement). */
.eirlyss-header__row.is-layout-grid {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
}
/* Phone: the menu button first, then the wordmark, then account and bag. */
@media (max-width: 599px) {
	.eirlyss-header__row.is-layout-grid {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 0.75rem;
	}
	.eirlyss-header__menu {
		order: -1;
	}
}

/* Small labels above headlines and on photographs: normal case, no symbol (1.2.0; Alex asked for no dot before
   "Opening soon", and the shop now follows the same rule). */
.eirlyss-eyebrow {
	letter-spacing: 0.01em;
}
/* Quiet text links ("View all", "Discover the collection"): a thin underline, as the coming-soon page's info@ link;
   the underline fades on hover. The padding gives a 44 px tap height without moving the text (1.2.0). */
.eirlyss-link a {
	display: inline-block;
	padding-block: 0.8125rem;
	margin-block: -0.8125rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
	transition: text-decoration-color 0.2s ease-out;
}
.eirlyss-link a:hover {
	text-decoration-color: transparent;
}

/* Product page: the gallery fills its column (WooCommerce caps the block at 512px and the classic gallery at 48%). */
:root .wp-block-woocommerce-product-image-gallery {
	max-width: none;
}
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
	width: 100%;
	float: none;
	margin-bottom: 0;
}

/* One-of-one pieces: the add-to-cart button spans the summary column. */
.eirlyss-product-summary form.cart {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding: 0; /* WooCommerce adds 0 4px, which pushed the full-width button past the column (1.0.0 bug) */
	margin-bottom: 0;
}
/* One-of-one pieces have a hidden quantity field; its empty wrapper must not shift the button. */
.eirlyss-product-summary form.cart .quantity:has(> input[type="hidden"]) {
	display: none;
}
.eirlyss-product-summary form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
}

/* Shop sorting menu: quiet, in the page's own type. */
.woocommerce-ordering select,
.wc-block-catalog-sorting select {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 0.1rem center;
	padding: 0.2rem 1.4rem 0.2rem 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Accordions on the product page: hairlines, normal-case labels, a plus that turns into a minus. Each label row is
   48 px tall, so it is easy to tap (1.2.0). */
.eirlyss-details .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding-block: 0;
	margin-block-start: 0;
}
.eirlyss-details .wp-block-details > :not(summary) {
	margin-block: 0.25rem 1.25rem;
}
.eirlyss-details .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.eirlyss-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 3rem;
	padding-block: 0.75rem;
	box-sizing: border-box;
	font-size: var(--wp--preset--font-size--small);
}
.eirlyss-details summary::-webkit-details-marker {
	display: none;
}
.eirlyss-details summary::after {
	content: "+";
	font-size: 1rem;
	line-height: 1;
}
.eirlyss-details details[open] > summary::after {
	content: "\2212";
}

/* Newsletter placeholder until the Brevo form is embedded (BUILD_PLAN 1.16). */
.eirlyss-newsletter .tnp-subscription,
.eirlyss-newsletter form {
	max-width: 32rem;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.eirlyss-link a { transition: none; }
}

/* Product grids follow the look's "Grid gap" (Styles > Layout): 24px on a wide screen, 16px on a phone, as in Illusion.
   WooCommerce's own grid bakes a 1.25em gap into its column maths, so both are restated here. */
.eirlyss-grid .wc-block-product-template__responsive {
	column-gap: var(--wp--preset--spacing--gutter);
	row-gap: var(--wp--preset--spacing--50);
}
.eirlyss-grid .wc-block-product-template__responsive.columns-3 {
	grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 2 * var(--wp--preset--spacing--gutter)) / 3)), 1fr));
}
.eirlyss-grid .wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 3 * var(--wp--preset--spacing--gutter)) / 4)), 1fr));
}
/* Phone: one large picture per row, as in Illusion. */
@media (max-width: 599px) {
	.eirlyss-grid .wc-block-product-template__responsive.columns-3,
	.eirlyss-grid .wc-block-product-template__responsive.columns-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phones: form fields at 16px so iOS Safari does not zoom in when a shopper taps a field (checkout, account, search). */
@media (max-width: 781px) {
	body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	body select,
	body textarea {
		font-size: 16px;
	}
}

/* Footer: link lists read as quiet menus, as in Illusion (underline on hover). */
.eirlyss-footer a {
	text-decoration: none;
}
.eirlyss-footer a:hover,
.eirlyss-footer a:focus-visible {
	text-decoration: underline;
}

/* Cart and checkout: square corners on fields and option boxes, as everywhere in Illusion (its corner radius is 0).
   WooCommerce's own field rule has specificity 0,3,1 (form, input and [type]), so these carry "body" to win in any load order. */
body .wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]),
body .wc-block-components-text-input input:not([type="checkbox"]),
body .wc-block-components-textarea,
body .wc-blocks-components-select .wc-blocks-components-select__select,
body .wc-block-components-combobox .wc-block-components-combobox-control input,
body .wc-block-components-radio-control--highlight-checked,
body .wc-block-components-radio-control__option,
body .wc-block-components-radio-control-accordion-option,
body .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 0;
}

/* The sign-up form (must-use plugin eirlyss-signup.php): one row, a hairline box and a button. */
.eirlyss-signup {
	max-width: 28rem;
}
.eirlyss-signup__label {
	display: block;
	margin-bottom: 0.625rem;
	font-size: 0.8125rem;
	color: var(--cs-muted, var(--wp--preset--color--accent-4));
}
.eirlyss-signup__row {
	display: flex;
	align-items: stretch;
	border: 1px solid currentColor;
}
.eirlyss-signup__row:has(.eirlyss-signup__input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
body .eirlyss-signup .eirlyss-signup__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3.25rem;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	caret-color: currentColor;
	font-family: inherit;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}
body .eirlyss-signup .eirlyss-signup__input:focus-visible {
	outline: none;
}
.eirlyss-signup__input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100px var(--cs-paper, #fff) inset;
	-webkit-text-fill-color: var(--cs-ink, #000);
}
.eirlyss-signup__input[aria-invalid="true"] {
	box-shadow: inset 0 -2px 0 currentColor;
}
.eirlyss-signup__button {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}
.eirlyss-signup__button:hover {
	background: var(--wp--preset--color--accent-3);
}
.eirlyss-signup__button:active {
	background: var(--wp--preset--color--accent-4);
}
.eirlyss-signup__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}
.eirlyss-signup__msg {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
}
.eirlyss-signup__msg:empty {
	display: none;
}
.eirlyss-signup.is-done .eirlyss-signup__msg {
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.25rem;
}
/* ===== Coming soon, design 1.3.0: Alena's own design (EW-D5, 2026-09-25) =====
   The page visitors see while WooCommerce's coming-soon mode covers the whole site (template "Page: Coming soon",
   pattern eirlyss/coming-soon-page), built to Alena's mockup of 2026-09-24: her painting fills the screen, framed as in
   her mockup; on the right, one left-aligned column: her illuminated E with "irlys’s" (one image), the headline, two
   lines of text, the sign-up form, and one quiet contact line at the bottom. Her typeface is Kumbh Sans (free, in the
   theme; measured on her mockup: width within 1 %, the same stroke weight at 350). Sizes follow the screen like a
   poster: 1 "u" is 1 % of her 16:9 mockup as fitted to the screen. The one addition to her picture is a soft shade in
   the painting's own brown behind the column, so every text reads at 4.5:1 or more (design record). */
@font-face {
	font-family: "Kumbh Sans";
	font-style: normal;
	font-weight: 350;
	font-display: swap;
	src: url("assets/fonts/kumbh-sans/kumbh-sans-350-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Kumbh Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/kumbh-sans/kumbh-sans-600-normal.woff2") format("woff2");
}
.eirlyss-cs {
	--cs-u: min(1vw, 1.7778vh, 24px);
	--cs-left: 58.23vw;
	--cs-ink: #fff;
	--cs-paper: rgb(38, 24, 14);
	--cs-shade: 38, 24, 14;
	font-family: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: max(1rem, calc(var(--cs-u) * 1.487));
	font-weight: 350;
	line-height: 1.287;
	color: var(--cs-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* The whole coming-soon screen speaks in her typeface, even WordPress's hidden "Skip to content" link, so phones never
   download the shop's own text font (48 KB) just for that link. */
body:has(.eirlyss-cs--cover) {
	font-family: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body .eirlyss-cs--cover {
	min-height: 100svh !important; /* the block saves 100vh; phones need the small viewport, so nothing hides under the address bar */
	padding: 0;
	align-items: stretch;
	overflow: hidden;
	overflow: clip; /* never a scroll box: the sign-up's #signup return link must not scroll the painting inside it (EW-D4c) */
	background-color: #6a523a; /* the painting's average colour under the shade: the first paint, before the picture arrives (white text reads 7.3:1 on it) */
}
/* Her framing: the painting enlarged 1.17 times and cropped as in her mockup (the file itself is that crop, anchored to
   its right edge and 62 % down), so on 16:9 and 16:10 screens the lips run off the left edge and the tear sits at 40 %. */
body .eirlyss-cs--cover .wp-block-cover__image-background {
	object-position: 100% 62%;
}
/* The shade: the painting's own dark brown, clear over the face and the tear, deepening behind the column. */
body .eirlyss-cs--cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to right, rgba(var(--cs-shade), 0) 40%, rgba(var(--cs-shade), 0.25) 50%, rgba(var(--cs-shade), 0.44) 56.5%, rgba(var(--cs-shade), 0.48) 100%); /* the lightest that keeps every text at 4.5:1 or more (EW-D5 measured three strengths) */
}
body .eirlyss-cs--cover > .wp-block-cover__inner-container {
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: none;
	min-height: 100vh;
	min-height: 100svh;
	box-sizing: border-box;
	/* her margins: 5.46 u above the logo, 8.74 u below the form; the form row is taller than hers (44 px taps), so the space below
	   gives that back and the page never scrolls on a 16:9 screen */
	padding: calc(var(--cs-u) * 5.46) max(1.5rem, 4vw) calc(var(--cs-u) * 10.87 - max(2.75rem, var(--cs-u) * 2.13) - 3px) var(--cs-left);
	text-align: left;
}
body .eirlyss-cs .eirlyss-cs__col {
	width: calc(var(--cs-u) * 32.2);
	max-width: 100%;
	margin: 0;
}
body .eirlyss-cs .eirlyss-cs__col > *,
body .eirlyss-cs .eirlyss-cs__body > * {
	margin: 0;
}
body .eirlyss-cs .eirlyss-cs__body {
	margin-top: calc(var(--cs-u) * 1.72); /* not a positioned box on wide screens: the contact line anchors to the whole screen */
}
/* The logo: her E and her "irlys’s" as one image; the E's stem lines up with the text, its ornaments hang to the left. */
body .eirlyss-cs .eirlyss-cs__logo {
	width: calc(var(--cs-u) * 30.26);
	max-width: none;
	margin-left: calc(var(--cs-u) * -2.11);
}
.eirlyss-cs .eirlyss-cs__logo a,
.eirlyss-cs .eirlyss-cs__logo picture {
	display: block;
}
.eirlyss-cs .eirlyss-cs__logo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 931;
}
body .eirlyss-cs .eirlyss-cs__title {
	font-family: inherit;
	font-size: max(1.5rem, calc(var(--cs-u) * 2.333));
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--cs-ink);
	text-wrap: balance;
}
body .eirlyss-cs .eirlyss-cs__text {
	margin-top: calc(var(--cs-u) * 0.88);
	font-size: inherit;
	line-height: 1.287;
	color: var(--cs-ink);
	text-wrap: wrap; /* her line breaks (the parent theme's "pretty" wrapping would move "debut" down) */
}
body .eirlyss-cs .eirlyss-cs__text + .eirlyss-cs__text {
	margin-top: 1.287em; /* one empty line between the two, as in her mockup */
}
/* The form, as in her mockup: the label, then one row: a white hairline field and a white button with black letters. */
body .eirlyss-cs .eirlyss-signup {
	width: max(17.5rem, calc(var(--cs-u) * 19.3));
	max-width: 100%;
	margin: calc(var(--cs-u) * 1.61) 0 0;
}
body .eirlyss-cs .eirlyss-signup__label {
	margin-bottom: max(0.5rem, calc(var(--cs-u) * 0.56));
	font-size: max(0.875rem, calc(var(--cs-u) * 1.103));
	line-height: 1.3;
	text-align: left;
	color: var(--cs-ink);
}
body .eirlyss-cs .eirlyss-signup__row {
	border: 1px solid var(--cs-ink);
	background: transparent;
}
body .eirlyss-cs .eirlyss-signup .eirlyss-signup__input {
	flex: 1 1 62.5%;
	height: max(2.75rem, calc(var(--cs-u) * 2.13));
	padding: 0 0.875rem;
	font-size: 1rem;
	color: var(--cs-ink);
}
body .eirlyss-cs .eirlyss-signup__button {
	flex: 0 0 auto;
	min-width: 37.5%;
	padding: 0 0.75rem;
	white-space: nowrap; /* "Notify me" on one line at every size */
	background: var(--cs-ink);
	color: #000;
	font-family: inherit;
	font-size: max(0.9375rem, calc(var(--cs-u) * 1.11));
	font-weight: 350;
	letter-spacing: 0;
}
body .eirlyss-cs .eirlyss-signup__button:hover {
	background: var(--wp--preset--color--accent-6);
}
body .eirlyss-cs .eirlyss-signup__button:active {
	background: var(--wp--preset--color--accent-2);
}
body .eirlyss-cs .eirlyss-signup__button:focus-visible {
	outline: 2px solid var(--cs-ink);
	outline-offset: 3px;
}
body .eirlyss-cs .eirlyss-signup__msg {
	text-align: left;
	color: var(--cs-ink);
}
body .eirlyss-cs .eirlyss-signup.is-done .eirlyss-signup__msg {
	font-family: inherit;
	font-size: max(1.125rem, calc(var(--cs-u) * 1.487));
	border-top-color: var(--cs-ink);
}
/* The contact line: not in her mockup; kept small at the bottom. Since 1.3.1 only info@eirlyss.com (Alex, 2026-09-26: no location shown). */
body .eirlyss-cs .eirlyss-cs__foot {
	position: absolute;
	left: var(--cs-left);
	bottom: max(1.25rem, calc(var(--cs-u) * 2.6));
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5rem;
	margin: 0;
	font-size: max(0.8125rem, calc(var(--cs-u) * 0.9));
	line-height: 1.5;
	color: var(--cs-ink);
}
body .eirlyss-cs .eirlyss-cs__foot p {
	margin: 0;
}
.eirlyss-cs .eirlyss-cs__foot a {
	display: inline-block;
	padding-block: 0.8rem;
	margin-block: -0.8rem;
	color: var(--cs-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
.eirlyss-cs .eirlyss-cs__foot a:hover {
	text-decoration-color: transparent;
}
.eirlyss-cs a:focus-visible {
	outline-color: currentColor;
}

/* Short landscape screens (a phone turned sideways): the column is a little wider and starts a little further left, and the
   contact line joins the flow under the form, so nothing overlaps when the page scrolls. */
@media (orientation: landscape) and (max-height: 640px) {
	.eirlyss-cs {
		--cs-left: 52vw;
	}
	body .eirlyss-cs--cover::before {
		background: linear-gradient(to right, rgba(var(--cs-shade), 0) 33%, rgba(var(--cs-shade), 0.28) 43%, rgba(var(--cs-shade), 0.5) 50%, rgba(var(--cs-shade), 0.54) 100%);
	}
	body .eirlyss-cs--cover > .wp-block-cover__inner-container {
		justify-content: flex-start;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	body .eirlyss-cs .eirlyss-cs__col {
		width: min(26rem, 44vw);
	}
	body .eirlyss-cs .eirlyss-cs__logo {
		width: min(18rem, 80%);
		margin-left: -2.2%;
	}
	body .eirlyss-cs .eirlyss-cs__foot {
		position: static;
		margin-top: 1.25rem;
	}
}

/* Phones and other screens taller than wide: the same design, stacked. The painting stays full-bleed as a tall slice
   around the tear (functions.php); the logo at the top, the words and the form at the bottom, the tear clear between;
   the shade sits behind the logo's white letters and behind the words, never over the tear. */
@media (orientation: portrait) {
	.eirlyss-cs {
		--cs-pad: clamp(1.5rem, 6.2vw, 3rem);
		font-size: 1.0625rem;
		line-height: 1.45;
	}
	body .eirlyss-cs--cover .wp-block-cover__image-background {
		object-position: 60% 50%;
	}
	body .eirlyss-cs--cover::before {
		background: linear-gradient(to bottom, rgba(var(--cs-shade), 0.58) 0, rgba(var(--cs-shade), 0.52) calc(var(--cs-pad) + 50vw), rgba(var(--cs-shade), 0) calc(var(--cs-pad) + 50vw + 6rem));
	}
	body .eirlyss-cs .eirlyss-cs__body {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: auto;
		padding-top: 2.5rem;
	}
	body .eirlyss-cs .eirlyss-cs__body::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: -3rem;
		right: calc(-1 * var(--cs-pad));
		bottom: calc(-1.1 * var(--cs-pad));
		left: calc(-1 * var(--cs-pad));
		pointer-events: none;
		background: linear-gradient(to bottom, rgba(var(--cs-shade), 0) 0, rgba(var(--cs-shade), 0.56) 5.5rem, rgba(var(--cs-shade), 0.62) 100%);
	}
	body .eirlyss-cs--cover > .wp-block-cover__inner-container {
		justify-content: flex-start;
		padding: var(--cs-pad) var(--cs-pad) calc(var(--cs-pad) * 1.1);
	}
	body .eirlyss-cs .eirlyss-cs__col {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		width: 100%;
		max-width: 32rem;
	}
	body .eirlyss-cs .eirlyss-cs__logo {
		width: min(78vw, 22rem);
		margin-left: -2.2%;
	}
	body .eirlyss-cs .eirlyss-cs__title {
		font-size: clamp(1.625rem, 7.2vw, 2.25rem);
		line-height: 1.15;
	}
	body .eirlyss-cs .eirlyss-cs__text {
		margin-top: 0.75rem;
	}
	body .eirlyss-cs .eirlyss-cs__text + .eirlyss-cs__text {
		margin-top: 0.75rem;
	}
	body .eirlyss-cs .eirlyss-signup {
		width: 100%;
		margin-top: 1.5rem;
	}
	body .eirlyss-cs .eirlyss-signup__label {
		font-size: 0.875rem;
	}
	body .eirlyss-cs .eirlyss-signup .eirlyss-signup__input {
		height: 3rem;
	}
	body .eirlyss-cs .eirlyss-cs__foot {
		position: static;
		margin-top: 1.5rem;
		font-size: 0.8125rem;
	}
}

/* No entrance effect: her mockup is still, and a column that starts invisible leaves the page without a "largest paint"
   for Google (the full-screen painting counts as a background), so PageSpeed could not score it (EW-D5, first build).
   The button's colour change on hover is the page's only motion. */


/* Header and footer wordmark (EW-D4a): the same tracked capitals as the coming-soon page, at header size. */
.wp-block-site-title a {
	text-decoration: none;
}

/* ===== Shop views, design 1.2.0 (EW-D4b, 2026-09-24) =====
   The logged-in shop (Home, shop, product, cart, checkout) refined inside the approved Illusion look: the same two
   fonts, black, white and the palette's greys, square corners, 3:4 photographs. The sizes live in theme.json (text
   16 px, captions 13 px, legal 12 px, one 52 px button in 15 px letters, as the coming-soon page's "Notify me"); this
   section holds only what the blocks cannot express. */

/* Header (EW-D4a's wordmark and arrangement kept): 44 px tap areas around the wordmark, the menu, the account and the
   bag, with negative margins so nothing moves. */
.eirlyss-header .wp-block-site-title a {
	display: inline-block;
	padding-block: calc((44px - 1em) / 2);
	margin-block: calc((1em - 44px) / 2);
}
@media (min-width: 600px) {
	.eirlyss-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 0.8125rem 0.5rem;
		margin: -0.8125rem -0.5rem;
	}
}
.eirlyss-header .wp-block-navigation__responsive-container-open {
	padding: 0.625rem;
	margin: -0.625rem;
}
.eirlyss-header__tools .wc-block-mini-cart__button {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: -7px;
}

/* The account icon: WooCommerce draws it 40 px with 8 px padding; 44 px with the same icon, nothing moves. */
.eirlyss-header__tools .wc-block-customer-account__link {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	margin: -2px;
}

/* Buttons: the pressed state of the one primary style (theme.json sets the rest). */
:where(.wp-element-button, .wp-block-button__link):active {
	background-color: var(--wp--preset--color--accent-4);
}

/* Home, hero (pattern eirlyss/hero): a soft pool of shade behind the caption at the lower left and a light gradient along
   the bottom, never a flat wash, so the photograph above stays bright (the coming-soon page's method). Strengths chosen by
   measurement: every word reads at 4.5:1 or more against its worst 5 % of background pixels at 17 screen sizes
   (design record, section 7). */
.eirlyss-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 62% 58% at 14% 86%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.42) 22%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0) 60%);
}
.eirlyss-hero > .wp-block-cover__inner-container {
	z-index: 2;
}
.eirlyss-hero h1 {
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: 14em;
	text-wrap: balance;
	margin-block: 0.75rem 0;
}
.eirlyss-hero .eirlyss-eyebrow {
	font-size: 0.9375rem;
}
.eirlyss-hero .eirlyss-link {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}

/* Home, intro line (pattern eirlyss/intro): one sentence in the headline face, the page's quiet statement. */
.eirlyss-lede {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: clamp(1.375rem, 1.1429rem + 0.9524vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

/* Home, story block and sign-up (patterns eirlyss/split and eirlyss/newsletter). */
.eirlyss-story h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-top: 0.75rem;
}
.eirlyss-newsletter .eirlyss-signup {
	margin: 2rem auto 0;
}
.eirlyss-newsletter .eirlyss-signup__label,
.eirlyss-newsletter .eirlyss-signup__msg {
	text-align: center;
}

/* Product cards: the 3:4 photograph, then two quiet caption lines of the same size (name, price), black on white. */
.eirlyss-grid .wc-block-product .wp-block-post-title a {
	text-decoration: none;
}
.eirlyss-grid .wc-block-product .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
.eirlyss-grid .wc-block-product .wp-block-woocommerce-product-price,
.eirlyss-grid .wc-block-product .wc-block-components-product-price {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

/* Product page: a one-of-one piece needs no "In stock" line (the "One of one" note says it); a sold piece still shows
   "Out of stock". The price and the words in the page's own sizes. */
.eirlyss-product-summary .stock.in-stock {
	display: none;
}
.eirlyss-product-summary .wp-block-woocommerce-product-price {
	margin-top: 0.25rem;
}
.eirlyss-product-summary form.cart {
	margin-top: 1.75rem;
}

/* Store notices ("added to your bag", errors): square, as everything in Illusion, in the page's small text. */
body .wc-block-components-notice-banner {
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Cart and checkout: room under the header; headings in the page's own voice; labels in normal case, not capitals;
   44 px taps on the small controls. */
body.woocommerce-cart main.wp-block-group,
body.woocommerce-checkout main.wp-block-group {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--80);
}
body.woocommerce-cart main.wp-block-group > .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: var(--wp--preset--spacing--50);
}
body .wc-block-cart .wc-block-cart__totals-title,
body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header,
body .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header * {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}
body .wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--x-large);
	text-align: center;
}
/* WooCommerce draws a crying face above the empty-cart heading, sized from the heading: off-brand, and far too large once
   the heading grew (second build of 1.2.0). The words alone say it. */
body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}
body .wc-block-components-title.wc-block-components-title,
body .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
	font-weight: 400;
}
body .wc-block-components-panel__button {
	min-height: 44px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
body .wc-block-cart-item__remove-link {
	min-width: 44px;
	min-height: 44px;
	margin: -10px;
}

/* Footer (EW-D4a's wordmark kept): the link lists breathe; on phones each link is a 44 px row. */
.eirlyss-footer p:has(> a) {
	line-height: 2.2;
}
.eirlyss-footer p > a {
	display: inline-block;
}
@media (max-width: 781px) {
	.eirlyss-footer p:has(> a) {
		line-height: 3.4;
	}
}

/* Home and shop: the intro line's link sits a little lower; the shop's empty state speaks in the page's own voice;
   in the checkout's own header (WooCommerce's part) the wordmark link is a 44 px tap target too. */
body.woocommerce-checkout .wp-block-site-title a {
	display: inline-block;
	padding-block: calc((44px - 1em) / 2);
	margin-block: calc((1em - 44px) / 2);
}
.eirlyss-lede + .eirlyss-link {
	margin-top: 1.75rem;
}
.eirlyss-empty h2 {
	margin: 0;
}

/* Shop: the sorting menu is a 44 px tap target too. */
body .wc-block-catalog-sorting select,
body .woocommerce-ordering select {
	padding-block: 0.75rem;
}

/* ===== The store, design 1.4.0 (EW-B1, 2026-09-27): a clean first version in Alena's style =====
   Her typeface (Kumbh Sans, 350 for text and headings, 600 for small labels), black text on white, her painting's dark
   brown ("ink", #26180E) for the one button style and the preview line, square corners, 4:5 photographs. theme.json holds
   the sizes and colours; this section holds only what the blocks cannot express. EW-B2 refines the look. */

/* Header: her E beside the wordmark; the menu centred; search and bag on the right. */
.eirlyss-header__brand { gap: 0.625rem; align-items: center; }
.eirlyss-header__mark img { display: block; width: 28px; height: auto; }
.eirlyss-header .wp-block-site-title { font-weight: 350; }
.eirlyss-header__tools { align-items: center; }
.eirlyss-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.eirlyss-header .wp-block-navigation-item__content { font-size: 0.9375rem; }
.eirlyss-header .wp-block-navigation__submenu-container { border: 1px solid var(--wp--preset--color--accent-6) !important; padding: 0.5rem 0; min-width: 13rem !important; }
.eirlyss-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.5rem 1.25rem; }
.eirlyss-search .wp-block-search__button { min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--wp--preset--color--contrast); border: 0; }
.eirlyss-search .wp-block-search__input { border: 0; border-bottom: 1px solid currentColor; border-radius: 0; min-height: 44px; font-size: 1rem; }
.eirlyss-search.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper { border: 0; }

/* The preview line (added by the preview plugin under the header on store screens). */
.eirlyss-preview-bar { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); text-align: center; }
.eirlyss-preview-bar p { margin: 0; padding: 0.5rem 1rem; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.01em; }

/* Breadcrumbs, titles and the collection's intro. */
.eirlyss-store .woocommerce-breadcrumb, .eirlyss-store .wc-block-breadcrumbs { font-size: 0.8125rem; color: var(--wp--preset--color--accent-4); }
.eirlyss-store__title { margin-top: 0.5rem; margin-bottom: 0.5rem; font-size: var(--wp--preset--font-size--xx-large); }
.eirlyss-store__intro, .eirlyss-store .wp-block-term-description { max-width: 40rem; color: var(--wp--preset--color--accent-4); }

/* Listing: filters in a left column on wide screens, WooCommerce's drawer on phones. */
.eirlyss-listing { gap: clamp(1.5rem, 3vw, 3rem); }
.eirlyss-listing__filters { min-width: 0; }
.eirlyss-listing__filters h3.wp-block-heading, .eirlyss-more-filters > summary { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.eirlyss-listing__filters .wc-block-product-filters__overlay-content > * + * { margin-top: 1.75rem; }
.eirlyss-more-filters { margin-top: 1.75rem; border-top: 1px solid var(--wp--preset--color--accent-6); }
.eirlyss-more-filters > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; list-style: none; }
.eirlyss-more-filters > summary::-webkit-details-marker { display: none; }
.eirlyss-more-filters > summary::after { content: "+"; margin-left: auto; font-weight: 350; }
.eirlyss-more-filters[open] > summary::after { content: "\2212"; }
.eirlyss-more-filters > :not(summary) + :not(summary) { margin-top: 1.75rem; }
.eirlyss-listing__bar { font-size: 0.8125rem; color: var(--wp--preset--color--accent-4); }
@media (max-width: 781px) {
	.eirlyss-listing.wp-block-columns { flex-direction: column; }
	.eirlyss-listing__filters.wp-block-column { flex-basis: auto !important; }
}

/* Cards: the 4:5 photograph, the decade in small letters, the name and the price. */
.eirlyss-grid .wc-block-product .wc-block-components-product-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.eirlyss-card__decade { margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--wp--preset--color--accent-4); }
.eirlyss-card__decade a { text-decoration: none; color: inherit; }
.eirlyss-grid .wc-block-product .wp-block-post-title { margin-top: 0.25rem; font-size: 0.9375rem; }

/* Empty and no-results states. */
.eirlyss-empty { text-align: center; padding-block: 3rem; }
.eirlyss-empty .wp-block-buttons { justify-content: center; }
.eirlyss-empty p { color: var(--wp--preset--color--accent-4); }

/* The piece page: the facts column, the story, the details table, the panels. */
.eirlyss-piece__facts > * + * { margin-top: 0.75rem; }
.eirlyss-piece__when { font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--wp--preset--color--accent-4); gap: 0.5rem; }
.eirlyss-piece__when a { color: inherit; }
.eirlyss-piece__when .wp-block-post-terms + .wp-block-post-terms::before { content: "\00b7"; margin-right: 0.5rem; }
.eirlyss-piece__title { margin: 0; font-size: var(--wp--preset--font-size--xx-large); line-height: 1.2; }
.eirlyss-example-note { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--accent-4); }
.eirlyss-piece__facts .wp-block-woocommerce-product-summary { color: var(--wp--preset--color--contrast); }
.eirlyss-piece__facts form.cart { display: flex; width: 100%; margin-top: 1.25rem; padding: 0; }
.eirlyss-piece__facts form.cart .quantity:has(> input[type="hidden"]) { display: none; }
.eirlyss-piece__facts form.cart .single_add_to_cart_button { flex: 1 1 auto; width: 100%; margin: 0; min-height: 52px; }
.eirlyss-piece__facts .stock.in-stock { display: none; }
.eirlyss-piece__facts .stock.out-of-stock { font-size: 1rem; color: var(--wp--preset--color--contrast); }
.eirlyss-piece__oneof { margin: 1rem 0 0; font-size: 0.875rem; }
.eirlyss-piece__ask { margin: 0.25rem 0 0; font-size: 0.875rem; }
.eirlyss-piece__ask a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.eirlyss-story { margin-top: var(--wp--preset--spacing--70); }
.eirlyss-story h2, .eirlyss-piece-details h2 { font-size: var(--wp--preset--font-size--x-large); }
.eirlyss-story .wp-block-post-content { font-size: 1.1875rem; line-height: 1.65; max-width: 36rem; }
.eirlyss-piece-details { margin-top: var(--wp--preset--spacing--60); }
.eirlyss-piece-details table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.eirlyss-piece-details th, .eirlyss-piece-details td { text-align: left; vertical-align: top; padding: 0.625rem 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.eirlyss-piece-details th { width: 38%; font-weight: 600; padding-right: 1rem; }
.eirlyss-piece-details td p { margin: 0; }
.eirlyss-piece-details td a { color: inherit; }
.eirlyss-panels { margin-top: var(--wp--preset--spacing--50); }
.eirlyss-panels .wp-block-details { border-top: 1px solid var(--wp--preset--color--accent-6); }
.eirlyss-panels .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.eirlyss-panels summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 3rem; padding-block: 0.75rem; font-size: 0.9375rem; }
.eirlyss-panels summary::-webkit-details-marker { display: none; }
.eirlyss-panels summary::after { content: "+"; }
.eirlyss-panels details[open] > summary::after { content: "\2212"; }
.eirlyss-panels .wp-block-details > :not(summary) { margin-block: 0.25rem 1rem; font-size: 0.9375rem; }
.eirlyss-related { margin-top: var(--wp--preset--spacing--70); }

/* The new gallery (zoom on hover, full screen on click). */
.eirlyss-piece .wc-block-product-gallery-large-image img { aspect-ratio: 4 / 5; object-fit: cover; }

/* The bag and the opening-soon checkout. */
.eirlyss-bag__title { margin-bottom: var(--wp--preset--spacing--50); }
.eirlyss-opening-soon { max-width: 36rem; margin: var(--wp--preset--spacing--60) auto; text-align: center; }
.eirlyss-opening-soon__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1rem; }
.eirlyss-opening-soon__links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: center; margin-top: 1.5rem; }
.eirlyss-opening-soon__join { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.75rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); text-decoration: none; }
.eirlyss-opening-soon__join:hover { background: var(--wp--preset--color--umber); }
.eirlyss-opening-soon__back { display: inline-flex; align-items: center; min-height: 52px; }
.eirlyss-bag-empty { text-align: center; padding-block: 2rem; }
.eirlyss-bag-empty h2 { font-size: var(--wp--preset--font-size--x-large); }

/* Footer: four quiet columns and the bottom line. */
.eirlyss-footer h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.75rem; }
.eirlyss-footer__line { font-size: 1rem; }
.eirlyss-footer__bottom { font-size: 0.75rem; color: var(--wp--preset--color--accent-4); }
.eirlyss-footer__bottom a { color: inherit; }

/* ===== The store, design 1.4.1 (EW-B2, 2026-09-27): Alena's landing page carried into the store =====
   Her page is an old painting, a face with a tear, her illuminated E, white Kumbh Sans with a 600 headline, and the
   painting's own browns. The store keeps the photographs on white and borrows the rest: her ink (#26180E) for every
   text, her umber (#6A523A) for the quiet lines, a warm paper (#F7F3EE) for the story and the notices, a strip of her
   painting at the top of every list, her headline weight for titles, the E's ultramarine for one initial per story,
   and a footer as dark as the painting. Every text 4.5:1 or more (measured, the record), taps 44 px, phones 16 px. */

:root {
	--eirlyss-ink: #26180E;
	--eirlyss-umber: #6A523A;
	--eirlyss-paper: #F7F3EE;
	--eirlyss-hair: #E4DCD2;
	--eirlyss-ultramarine: #27408B;
}

/* Header: white, one warm hairline; her E at 36 px beside the tracked wordmark. */
.eirlyss-header { border-bottom: 1px solid var(--eirlyss-hair); }
.eirlyss-header .wp-block-site-title a,
.eirlyss-header .wp-block-navigation-item__content,
.eirlyss-header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: var(--eirlyss-ink); }
.eirlyss-header__mark img { width: 36px; height: 40px; }
.eirlyss-header__brand { gap: 0.75rem; }
.eirlyss-header .wp-block-navigation__submenu-container { border-color: var(--eirlyss-hair) !important; }
.eirlyss-header .wc-block-mini-cart__button, .eirlyss-search .wp-block-search__button { color: var(--eirlyss-ink); }
.eirlyss-header .wc-block-mini-cart__badge { background: var(--eirlyss-ink); color: #fff; }

/* The preview line: quiet paper, not a dark bar. */
.eirlyss-preview-bar { background: var(--eirlyss-paper); color: var(--eirlyss-ink); border-top: 1px solid var(--eirlyss-hair); }
.eirlyss-preview-bar p { font-size: 0.8125rem; }

/* The painted band: her painting through the tear, the words on the right as on her landing page; phones: the words
   over a deeper shade at the bottom. */
body .eirlyss-band { position: relative; min-height: clamp(220px, 20vw, 300px) !important; padding: 0; align-items: flex-end; overflow: hidden; background-color: #6a523a; }
body .eirlyss-band .wp-block-cover__image-background { object-position: 52% 40%; }
body .eirlyss-band .eirlyss-band__picture { position: absolute; inset: 0; }
body .eirlyss-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to right, rgba(38, 24, 14, 0.08) 30%, rgba(38, 24, 14, 0.42) 50%, rgba(38, 24, 14, 0.62) 58%, rgba(38, 24, 14, 0.66) 100%); }
body .eirlyss-band > .wp-block-cover__inner-container { z-index: 2; width: 100%; max-width: none; box-sizing: border-box; padding: 1.5rem max(1.5rem, 4vw) 1.75rem 58.23vw; }
body .eirlyss-band .eirlyss-band__col { max-width: 34rem; color: #fff; }
body .eirlyss-band .eirlyss-band__col > * { margin: 0; }
body .eirlyss-band .eirlyss-band__title { margin-top: 0.5rem; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 600; line-height: 1.15; color: #fff; text-wrap: balance; }
body .eirlyss-band .eirlyss-band__text, body .eirlyss-band .eirlyss-band__text p { margin: 0.6rem 0 0; max-width: 32rem; font-size: 1rem; line-height: 1.5; color: #fff; }
body .eirlyss-band .eirlyss-band__text p:first-child { margin-top: 0; }
body .eirlyss-band .wc-block-breadcrumbs, body .eirlyss-band .woocommerce-breadcrumb { font-size: 0.8125rem; color: #fff; }
body .eirlyss-band .wc-block-breadcrumbs a, body .eirlyss-band .woocommerce-breadcrumb a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (max-width: 781px) {
	body .eirlyss-band { min-height: 240px !important; }
	body .eirlyss-band::before { background: linear-gradient(to bottom, rgba(38, 24, 14, 0.2) 0, rgba(38, 24, 14, 0.62) 38%, rgba(38, 24, 14, 0.72) 100%); }
	body .eirlyss-band > .wp-block-cover__inner-container { padding: 3.5rem 1.25rem 1.5rem; }
}

/* Listing: room under the band; the filters in her ink, square marks, a price track that can be seen (3:1). */
.eirlyss-store > .alignwide:first-of-type + .eirlyss-listing, .eirlyss-listing { margin-top: var(--wp--preset--spacing--50); }
.eirlyss-listing__filters h3.wp-block-heading, .eirlyss-more-filters > summary { color: var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__label { color: var(--eirlyss-ink); font-size: 0.9375rem; min-height: 32px; align-items: center; }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__input { accent-color: var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__input-wrapper { color: var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-price-slider__range { --range-color: var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-price-slider__range:before { opacity: 0.55; }
.eirlyss-listing__filters .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-price-slider__range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--eirlyss-ink); }
.eirlyss-listing__filters .wc-block-product-filter-price-slider .text input { border: 1px solid var(--eirlyss-hair); border-radius: 0; color: var(--eirlyss-ink); min-height: 40px; font-size: 1rem; }
.eirlyss-listing__filters .wc-block-product-filters__open-overlay { min-height: 44px; padding: 0 1.25rem; border: 1px solid var(--eirlyss-ink); background: transparent; color: var(--eirlyss-ink); font-size: 0.9375rem; }
.eirlyss-listing__bar, .eirlyss-listing__bar .wc-block-catalog-sorting select { color: var(--eirlyss-umber); }
/* The phone drawer, while closed, is hidden from the keyboard and screen readers too (WooCommerce only moves it below the screen). */
@media (max-width: 600px) { .wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay-dialog { visibility: hidden; } }
.wc-block-product-filter-removable-chips__item { border-radius: 0 !important; border-color: var(--eirlyss-hair) !important; color: var(--eirlyss-ink); }

/* Cards: the photograph first; under it the decade in small spaced letters (umber), the name and the price (ink). */
.eirlyss-grid .wc-block-product .wc-block-components-product-image { overflow: hidden; background: var(--eirlyss-paper); }
.eirlyss-grid .wc-block-product .wc-block-components-product-image img { transition: transform 0.6s ease-out; }
.eirlyss-grid .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.025); }
.eirlyss-card__decade { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-grid .wc-block-product .wp-block-post-title, .eirlyss-grid .wc-block-product .wp-block-post-title a { color: var(--eirlyss-ink); font-size: 1rem; line-height: 1.4; }
.eirlyss-grid .wc-block-product .wp-block-woocommerce-product-price, .eirlyss-grid .wc-block-product .wc-block-components-product-price { color: var(--eirlyss-ink); font-size: 0.9375rem; }

/* The piece: the facts column in her voice. */
.eirlyss-piece__when { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-piece__title { font-weight: 600; font-size: clamp(1.625rem, 1.35rem + 1vw, 2.25rem); line-height: 1.15; color: var(--eirlyss-ink); text-wrap: balance; }
.eirlyss-piece__facts .wp-block-woocommerce-product-price { font-size: 1.25rem; color: var(--eirlyss-ink); }
.eirlyss-example-note { color: var(--eirlyss-umber); }
.eirlyss-piece__facts .wp-block-woocommerce-product-summary { font-size: 1.0625rem; line-height: 1.6; color: var(--eirlyss-ink); }
.eirlyss-piece__facts form.cart .single_add_to_cart_button { background: var(--eirlyss-ink); color: #fff; border-radius: 0; font-size: 0.9375rem; letter-spacing: 0.01em; }
.eirlyss-piece__facts form.cart .single_add_to_cart_button:hover { background: var(--eirlyss-umber); }
.eirlyss-piece__oneof { color: var(--eirlyss-umber); }
.eirlyss-piece__ask a { color: var(--eirlyss-ink); }

/* The story: the heart of the page, on warm paper across the whole width, a book's column, the first letter in the
   ultramarine of her illuminated E. */
.eirlyss-story { margin-top: var(--wp--preset--spacing--70) !important; padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); background: var(--eirlyss-paper); }
.eirlyss-story > * { max-width: 36rem; margin-left: auto !important; margin-right: auto !important; }
.eirlyss-story h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eirlyss-umber); margin-bottom: 1.25rem; }
.eirlyss-story .wp-block-post-content { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); line-height: 1.7; color: var(--eirlyss-ink); }
.eirlyss-story .wp-block-post-content > p:first-child::first-letter { float: left; margin: 0.08em 0.12em 0 0; font-size: 3.4em; font-weight: 600; line-height: 0.82; color: var(--eirlyss-ultramarine); }
.eirlyss-piece-details h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-piece-details table, .eirlyss-piece-details th, .eirlyss-piece-details td { border: 0; }
.eirlyss-piece-details th, .eirlyss-piece-details td { border-bottom: 1px solid var(--eirlyss-hair); color: var(--eirlyss-ink); }
.eirlyss-piece-details th { font-weight: 600; font-size: 0.875rem; }
.eirlyss-panels .wp-block-details, .eirlyss-panels .wp-block-details:last-child { border-color: var(--eirlyss-hair); }
.eirlyss-panels summary { color: var(--eirlyss-ink); }
.eirlyss-related h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-piece .wc-block-product-gallery-large-image img, .eirlyss-piece .wc-block-product-gallery-thumbnails img { background: var(--eirlyss-paper); }

/* Titles of the bag, checkout, 404 and privacy pages in her headline weight. */
.eirlyss-bag__title, .eirlyss-store__title, .eirlyss-opening-soon__title, body .wp-block-post-title { font-weight: 600; color: var(--eirlyss-ink); }
.eirlyss-checkout .eirlyss-bag__title { text-align: center; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eirlyss-umber); margin-bottom: 0; }
.eirlyss-opening-soon { padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); background: var(--eirlyss-paper); border: 1px solid var(--eirlyss-hair); }
.eirlyss-opening-soon__text { color: var(--eirlyss-ink); }
.eirlyss-opening-soon__join { background: var(--eirlyss-ink); }
.eirlyss-opening-soon__back { color: var(--eirlyss-ink); }
.eirlyss-bag-empty h2, .eirlyss-bag-empty__title { font-weight: 600; color: var(--eirlyss-ink); }
.eirlyss-empty h2 { font-weight: 600; color: var(--eirlyss-ink); }
.eirlyss-empty p { color: var(--eirlyss-umber); }

/* Buttons: her ink, pressed umber; outline buttons in ink. */
:where(.wp-element-button, .wp-block-button__link):active { background-color: var(--eirlyss-umber); }
.is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline { border: 1px solid var(--eirlyss-ink); color: var(--eirlyss-ink); background: transparent; }

/* The footer: as dark as her painting; her line; quiet columns. */
body .eirlyss-footer { background: var(--eirlyss-ink); color: #fff; border-top-color: var(--eirlyss-ink) !important; }
body .eirlyss-footer a, body .eirlyss-footer .wp-block-site-title a { color: #fff; }
body .eirlyss-footer h2 { color: #CDBFAE; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
body .eirlyss-footer .has-accent-4-color, body .eirlyss-footer__bottom { color: #CDBFAE !important; }
body .eirlyss-footer__line { font-weight: 600; }
body .eirlyss-footer :focus-visible { outline-color: #fff; }

/* Breadcrumbs outside the band (piece pages): umber. */
.eirlyss-store .wc-block-breadcrumbs, .eirlyss-store .woocommerce-breadcrumb { color: var(--eirlyss-umber); }
.eirlyss-store .wc-block-breadcrumbs a { color: var(--eirlyss-umber); }

@media (prefers-reduced-motion: reduce) {
	.eirlyss-grid .wc-block-product .wc-block-components-product-image img { transition: none; }
	.eirlyss-grid .wc-block-product:hover .wc-block-components-product-image img { transform: none; }
}
/* WooCommerce's closed bag drawer stays out of the keyboard order and away from screen readers (it only hides visually). */
.wc-block-components-drawer__screen-overlay--is-hidden { visibility: hidden; }

/* 44 px taps (measured, the record): the logo, breadcrumbs, card names, filter rows, the gallery arrows, the filter
   chips; negative margins keep every text where it was. */
.eirlyss-header .custom-logo-link { display: block; padding: 2px 4px; margin: -2px -4px; }
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.eirlyss-grid .wc-block-product .wp-block-post-title a { display: block; min-height: 44px; }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__label { min-height: 44px; }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__item { margin: 0; }
.eirlyss-piece .wc-block-next-previous-buttons__button { min-width: 44px; min-height: 44px; }
.wc-block-product-filter-removable-chips__remove { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; }
/* Phones: running text 16 px (the details, the panels, the footer's links), captions 14 px or more. */
@media (max-width: 781px) {
	.eirlyss-piece-details td, .eirlyss-piece-details td p, .eirlyss-piece-details th, .eirlyss-panels .wp-block-details > :not(summary), .eirlyss-panels summary { font-size: 1rem; }
	body .eirlyss-footer .has-small-font-size { font-size: 1rem; }
	body .eirlyss-footer__bottom { font-size: 0.875rem; }
	.eirlyss-example-note { font-size: 0.9375rem; }
	body .eirlyss-band::before { background: linear-gradient(to bottom, rgba(38, 24, 14, 0.5) 0, rgba(38, 24, 14, 0.66) 40%, rgba(38, 24, 14, 0.74) 100%); }
}
.wc-block-breadcrumbs a, .woocommerce-breadcrumb a { padding-inline: 4px; margin-inline: -4px; }
.eirlyss-piece__when a, .eirlyss-piece-details td a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
.eirlyss-listing__filters .wc-block-product-filter-checkbox-list__label { width: 100%; }
.wc-block-product-filter-clear-button .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
/* Focus rings in her ink on WooCommerce's own controls (they drew the browser's blue or orange). */
.eirlyss-header .wc-block-mini-cart__button:focus-visible, .wc-block-product-filters__open-overlay:focus-visible, .wc-block-product-filters__close-overlay:focus-visible,
.wc-block-components-button:focus-visible, .wc-block-cart__submit-button:focus-visible { outline: 2px solid var(--eirlyss-ink) !important; outline-offset: 3px; box-shadow: none; }

/* ===== Alena's feedback 1, design 1.5.0 (EW-B3, 2026-10-01) =====
   Item 1: her illuminated E is the first letter of the name; the typed letters IRLYS’S follow it, so the two read EIRLYS’S.
   Item 2: "Ask about this piece" opens a small form on the page. Items 3 to 8 need no new styles (the Details rows change in
   functions.php; the Size filter is gone from the templates). */

/* The wordmark: the E sits on the letters' baseline, about 1.4 times their capital height, with the letters' own tracking
   after it; one link, one name ("EIRLYS’S"). The typed letters keep the header's type (Kumbh Sans 350, spaced capitals). */
.eirlyss-header__brand { min-width: 0; }
.eirlyss-wordmark { display: inline-flex; align-items: baseline; flex-shrink: 0; white-space: nowrap; color: var(--eirlyss-ink); text-decoration: none;
	font-family: var(--wp--preset--font-family--kumbh-sans); font-size: var(--wp--preset--font-size--masthead); font-weight: 350; line-height: 1;
	padding-block: calc((44px - 1em) / 2); margin-block: calc((1em - 44px) / 2); }
.eirlyss-wordmark__e { display: block; flex: 0 0 auto; width: auto; height: 1.04em; margin-right: 0.22em; align-self: baseline; transform: translateY(0.03em); }
.eirlyss-wordmark__letters { letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; }
.eirlyss-wordmark__apos { letter-spacing: 0.08em; margin-left: -0.18em; }
.eirlyss-wordmark:hover .eirlyss-wordmark__letters { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.eirlyss-wordmark:focus-visible { outline: 2px solid var(--eirlyss-ink); outline-offset: 4px; }
@media (max-width: 599px) {
	.eirlyss-wordmark { font-size: clamp(1.125rem, 5.4vw, 1.5rem); }
	.eirlyss-wordmark__letters { letter-spacing: 0.22em; margin-right: -0.22em; }
	.eirlyss-wordmark__e { margin-right: 0.16em; }
}
@media (max-width: 359px) {
	.eirlyss-header__row.is-layout-grid { column-gap: 0.5rem; }
	.eirlyss-wordmark__letters { letter-spacing: 0.16em; margin-right: -0.16em; }
}

/* The decade links above a piece's name and in its Details: at least 44 px wide too (a short decade like 1910s measured 43 px). */
.eirlyss-piece__when a, .eirlyss-piece-details td a { min-width: 44px; box-sizing: border-box; text-align: center; }

/* "Ask about this piece": the button looks like the link it replaces. */
.eirlyss-ask__open { appearance: none; background: none; border: 0; padding: 0.75rem 0; margin: -0.75rem 0; min-height: 44px; font: inherit; font-size: 0.875rem; color: var(--eirlyss-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; }
.eirlyss-ask__open[hidden], .eirlyss-ask__fallback[hidden] { display: none; }
.eirlyss-ask__open:hover { text-decoration-thickness: 2px; }
.eirlyss-ask__open:focus-visible { outline: 2px solid var(--eirlyss-ink); outline-offset: 3px; }

/* The form: a calm white card on her ink at 55 %; on phones it rises from the bottom, full width, above the keyboard. */
html.eirlyss-ask-open, html.eirlyss-ask-open body { overflow: hidden; }
html.eirlyss-ask-open body { position: fixed; left: 0; right: 0; width: 100%; }
dialog.eirlyss-ask { box-sizing: border-box; width: min(34rem, calc(100vw - 2rem)); max-width: none; max-height: min(92vh, 52rem); margin: auto; padding: 0; border: 0; border-radius: 0;
	background: #fff; color: var(--eirlyss-ink); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 1.5rem 4rem rgba(38, 24, 14, 0.25); }
dialog.eirlyss-ask::backdrop { background: rgba(38, 24, 14, 0.55); }
.eirlyss-ask__inner { padding: 1.25rem 1.5rem 1.5rem; }
.eirlyss-ask__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.eirlyss-ask__title { margin: 0.5rem 0 0; font-size: 1.375rem; font-weight: 600; line-height: 1.25; color: var(--eirlyss-ink); outline: none; }
.eirlyss-ask__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -0.625rem 0 0; padding: 0; border: 0; background: transparent; color: var(--eirlyss-ink); cursor: pointer; }
.eirlyss-ask__close:focus-visible, .eirlyss-ask__send:focus-visible, .eirlyss-ask__done-close:focus-visible { outline: 2px solid var(--eirlyss-ink); outline-offset: 3px; }
.eirlyss-ask__piece { display: flex; align-items: center; gap: 0.875rem; margin: 1rem 0 0; padding: 0.75rem; background: var(--eirlyss-paper); }
.eirlyss-ask__thumb { flex: 0 0 auto; width: 56px; height: 70px; object-fit: cover; background: #fff; }
.eirlyss-ask__piece-name { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.eirlyss-ask__intro { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--eirlyss-umber); }
.eirlyss-ask__field { margin-top: 1rem; }
.eirlyss-ask__field label { display: block; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 600; }
.eirlyss-ask__optional { font-weight: 350; color: var(--eirlyss-umber); }
.eirlyss-ask__field input, .eirlyss-ask__field textarea { box-sizing: border-box; display: block; width: 100%; min-height: 44px; padding: 0.625rem 0.75rem; border: 1px solid #8a7866; border-radius: 0; background: #fff; color: var(--eirlyss-ink); font: inherit; font-size: 1rem; line-height: 1.4; }
.eirlyss-ask__field textarea { min-height: 7.5rem; resize: vertical; }
.eirlyss-ask__field input:focus, .eirlyss-ask__field textarea:focus { outline: 2px solid var(--eirlyss-ink); outline-offset: 0; border-color: var(--eirlyss-ink); }
.eirlyss-ask__field [aria-invalid="true"] { border-color: #9b2c1f; }
.eirlyss-ask__error { margin: 0.375rem 0 0; font-size: 0.875rem; color: #9b2c1f; }
.eirlyss-ask__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.eirlyss-ask__send { display: block; width: 100%; min-height: 52px; margin-top: 1.25rem; padding: 0 1.5rem; border: 0; border-radius: 0; background: var(--eirlyss-ink); color: #fff; font: inherit; font-size: 0.9375rem; letter-spacing: 0.01em; cursor: pointer; }
.eirlyss-ask__send:hover { background: var(--eirlyss-umber); }
.eirlyss-ask__send[aria-disabled="true"] { opacity: 0.75; cursor: progress; }
.eirlyss-ask__fine { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--eirlyss-umber); }
.eirlyss-ask__fine a { color: inherit; display: inline-block; padding-block: 12px; margin-block: -12px; }
.eirlyss-ask__status { margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; outline: none; }
.eirlyss-ask__status:empty { margin: 0; }
.eirlyss-ask__status.is-error { padding: 0.75rem 0.875rem; border-left: 3px solid #9b2c1f; background: #fbf1ee; color: var(--eirlyss-ink); }
.eirlyss-ask__status.is-ok { padding: 0.875rem 1rem; background: var(--eirlyss-paper); font-weight: 600; }
.eirlyss-ask__done-close { display: block; width: 100%; min-height: 52px; margin-top: 1rem; border: 1px solid var(--eirlyss-ink); border-radius: 0; background: transparent; color: var(--eirlyss-ink); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.eirlyss-ask__done[hidden], .eirlyss-ask__form[hidden] { display: none; }
@media (max-width: 600px) {
	dialog.eirlyss-ask { width: 100%; max-width: 100%; margin: auto 0 0; inset-block-end: var(--eirlyss-kb, 0px); max-height: calc(100dvh - 1.5rem - var(--eirlyss-kb, 0px)); }
	.eirlyss-ask__inner { padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
	.eirlyss-ask__title { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
	dialog.eirlyss-ask[open] { animation: eirlyss-ask-in 0.18s ease-out; }
	@keyframes eirlyss-ask-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
}

/* ===== Alena's feedback 2, design 1.6.0 (EW-B5, 2026-10-02) =====
   Item 1: each header arrow sits after its label with a small, constant gap and turns in place when its menu opens.
   Item 2: the listing is one full-width area: the bar (Filter left; the count and Sort right), then the grid, 4 across from
   1200 px, 3 from 600 px, 2 below; thin gaps; every photograph whole in a 4:5 frame (contain, never cropped).
   Item 3: WooCommerce's own Product Filters drawer is the panel at every width: it slides in from the left over the page,
   over a light shade of her ink; the panel controller (assets/js/eirlyss-store-nav.js) owns focus, the inert page, Escape
   and the scroll position. Item 4: no Condition group (templates). The piece page and "You may also like" are unchanged. */

/* Item 1: core reserves the arrow's room in the label's right padding and pulls the arrow back over it (navigation/style.css,
   open-on-click); 1.2.0's 44 px tap rule (padding 0.5rem, margin -0.5rem) shrank that room to nothing, so the arrow sat on
   the last letter. Room now: 0.5rem of tap area + a 0.375rem gap + the 0.5rem arrow, which keeps core's own pull-back. */
@media (min-width: 600px) {
	.eirlyss-header .wp-block-navigation__container > .wp-block-navigation-item.open-on-click > .wp-block-navigation-submenu__toggle {
		padding-right: calc(0.5rem + 0.375rem + 0.5rem);
	}
	.eirlyss-header .wp-block-navigation__container > .wp-block-navigation-item.open-on-click > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
		width: 0.5rem;
		height: 0.5rem;
		margin-left: -0.5rem;
		margin-right: 0;
		align-self: center;
		position: relative;
		top: var(--eirlyss-arrow-dy, 0px);
		pointer-events: none;
	}
	.eirlyss-header .wp-block-navigation__container > .wp-block-navigation-item.open-on-click > .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon svg {
		display: block;
		margin: 0;
		transform-origin: 50% 50%;
	}
}

/* Item 2: the listing area, its margins and the bar above the grid. */
.eirlyss-listing--panel {
	--eirlyss-edge: clamp(12px, 2vw, 32px);
	--eirlyss-gap: 8px;
	--eirlyss-rowgap: 2rem;
	box-sizing: border-box;
	padding-inline: var(--eirlyss-edge);
}
.eirlyss-store > .alignwide:first-of-type + .eirlyss-listing--panel, .eirlyss-listing--panel { margin-top: 1rem; }
.eirlyss-filterbar { align-items: center; gap: 1rem; min-height: 44px; margin: 0 0 1rem; }
.eirlyss-listing__meta { align-items: center; gap: 1.25rem; margin-left: auto; font-size: 0.8125rem; color: var(--eirlyss-umber); }
.eirlyss-listing__meta .wc-block-product-results-count, .eirlyss-listing__meta .woocommerce-result-count { margin: 0; }
.eirlyss-listing__meta .wc-block-catalog-sorting select { color: var(--eirlyss-ink); font-size: 0.875rem; min-height: 44px; }
@media (max-width: 599px) {
	/* Phones: Filter on the left, Sort on the right, the count of pieces on a short line under Sort (nothing wider than the screen). */
	.eirlyss-listing__meta { flex: 1 1 0; min-width: 0; flex-wrap: wrap-reverse; justify-content: flex-end; row-gap: 0; column-gap: 0.75rem; text-align: right; }
	.eirlyss-listing__meta .wc-block-catalog-sorting select { max-width: 100%; }
}

/* The grid: listings only (the piece page's "You may also like" keeps its own grid). */
.eirlyss-listing--panel .eirlyss-grid .wc-block-product-template__responsive.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--eirlyss-gap);
	row-gap: var(--eirlyss-rowgap);
}
@media (max-width: 1199px) {
	.eirlyss-listing--panel .eirlyss-grid .wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.eirlyss-listing--panel { --eirlyss-gap: 6px; --eirlyss-rowgap: 1.75rem; }
	.eirlyss-listing--panel .eirlyss-grid .wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Whole photographs: the 4:5 frame stays; a photograph of another proportion is shown whole on her paper (contain, set in
   the template), and the hover enlargement that clipped the edges is gone from the listing (the name's underline stays). */
.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wc-block-components-product-image { margin: 0; background: var(--eirlyss-paper); }
.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wc-block-components-product-image img,
.eirlyss-listing--panel .eirlyss-grid .wc-block-product:hover .wc-block-components-product-image img {
	aspect-ratio: 4 / 5; object-fit: contain; background: var(--eirlyss-paper); transform: none; transition: none;
}
.eirlyss-listing--panel .eirlyss-card__decade { margin-top: 0.625rem; margin-bottom: 0; }
.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wp-block-post-title { margin-top: 0.25rem; margin-bottom: 0; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wp-block-post-title a { font-size: inherit; line-height: inherit; }
.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wp-block-woocommerce-product-price { margin-top: 0.125rem; font-size: 0.9375rem; }
@media (max-width: 599px) {
	.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wp-block-post-title { font-size: 0.875rem; }
	.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wp-block-woocommerce-product-price,
	.eirlyss-listing--panel .eirlyss-grid .wc-block-product .wc-block-components-product-price { font-size: 0.875rem; }
	.eirlyss-listing--panel .eirlyss-card__decade { font-size: 0.6875rem; }
}

/* Item 3: the Filter button, on the left of the bar. */
.eirlyss-filterbar .wc-block-product-filters { flex: 0 0 auto; }
.eirlyss-filterbar .wc-block-product-filters__open-overlay {
	display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 1.125rem 0 0.75rem;
	border: 1px solid var(--eirlyss-ink); background: transparent; color: var(--eirlyss-ink); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
.eirlyss-filterbar .wc-block-product-filters__open-overlay span { padding: 0; }
.eirlyss-filterbar .wc-block-product-filters__open-overlay svg { width: 1.25rem; height: 1.25rem; }
.eirlyss-filterbar .wc-block-product-filters__open-overlay:hover { background: var(--eirlyss-paper); }
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters__open-overlay { display: none; }
html:root:has(.eirlyss-filterbar) { scrollbar-gutter: stable; }

/* The panel: an overlay over the whole window, the panel itself on the left, invisible and out of the keyboard order while
   closed, so it takes no room and never squeezes the grid. */
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay {
	position: fixed; inset: 0; top: 0; z-index: 100000; display: block; flex-grow: 0;
	background: rgba(38, 24, 14, 0); color: var(--eirlyss-ink); pointer-events: none; visibility: hidden;
	transition: background-color 0.25s ease, visibility 0s linear 0.25s;
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
	background: rgba(38, 24, 14, 0.35); pointer-events: auto; visibility: visible; transition: background-color 0.25s ease, visibility 0s;
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-wrapper { position: relative; width: 100%; height: 100%; background: transparent; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-dialog {
	position: absolute; top: 0; bottom: 0; left: 0; right: auto; width: min(420px, 88vw); height: 100%; max-height: none;
	display: flex !important; flex-direction: column; background: #fff; color: var(--eirlyss-ink);
	box-shadow: 0.5rem 0 2.5rem rgba(38, 24, 14, 0.18); transform: translateX(-100%); transition: transform 0.25s ease;
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog { transform: translateX(0); transition: transform 0.25s ease; }
@media (max-width: 599px) {
	.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-dialog { width: 100%; box-shadow: none; }
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-header {
	display: flex; flex: 0 0 auto; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.5rem 0.75rem 0.5rem 1.25rem; border-bottom: 1px solid var(--eirlyss-hair);
}
.eirlyss-panel__title { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--eirlyss-ink); outline: none; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__close-overlay {
	display: inline-flex; align-items: center; gap: 0.25rem; min-width: 44px; min-height: 44px; padding: 0 0.5rem; font-size: 0.9375rem; color: var(--eirlyss-ink); cursor: pointer;
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__close-overlay svg { width: 1.5rem; height: 1.5rem; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-content {
	flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: block; padding: 0.25rem 1.25rem 1.5rem; gap: 0;
}
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters__overlay-content > * + * { margin-top: 0; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-footer {
	display: block; flex: 0 0 auto; box-shadow: none; border-top: 1px solid var(--eirlyss-hair);
	padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
@media (prefers-reduced-motion: reduce) {
	.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay,
	.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__overlay-dialog,
	.eirlyss-js .eirlyss-filterbar .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay,
	.eirlyss-js .eirlyss-filterbar .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog { transition: none; }
}
/* The footer: the panel's own status line, then Clear all and Show results, side by side, under the thumb on a phone. */
.eirlyss-panel__status { margin: 0 0 0.5rem; min-height: 1.25rem; font-size: 0.875rem; line-height: 1.4; color: var(--eirlyss-umber); }
.eirlyss-panel__status:empty { display: none; }
.eirlyss-panel__actions { display: flex; gap: 0.75rem; }
.eirlyss-panel__actions > * { flex: 1 1 0; }
.eirlyss-panel__clear, .eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__apply {
	box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 1rem; border-radius: 0; font: inherit; font-size: 0.9375rem; letter-spacing: 0.01em; cursor: pointer;
}
.eirlyss-panel__clear { border: 1px solid var(--eirlyss-ink); background: #fff; color: var(--eirlyss-ink); }
.eirlyss-panel__clear[hidden] { display: none; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__apply { width: auto; border: 1px solid var(--eirlyss-ink); background: var(--eirlyss-ink); color: #fff; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters .wc-block-product-filters__apply:hover { background: var(--eirlyss-umber); border-color: var(--eirlyss-umber); }
.eirlyss-panel__clear:hover { background: var(--eirlyss-paper); }
.eirlyss-panel__clear:focus-visible, .eirlyss-js .eirlyss-filterbar .wc-block-product-filters__apply:focus-visible, .eirlyss-group__toggle:focus-visible,
.eirlyss-filterbar .wc-block-product-filters__open-overlay:focus-visible { outline: 2px solid var(--eirlyss-ink) !important; outline-offset: 3px; box-shadow: none; }
.eirlyss-js .eirlyss-filterbar .wc-block-product-filters__apply:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px #fff inset; }

/* Inside: the chips with Clear all at the top, then the groups, each a 48 px header that folds and unfolds. */
.eirlyss-filterbar .wp-block-woocommerce-product-filter-active:not([hidden]) { padding: 0.75rem 0 1rem; }
.eirlyss-filterbar .wp-block-woocommerce-product-filter-active .wp-block-buttons { margin-top: 0.5rem; }
.eirlyss-filterbar .eirlyss-group__head, .eirlyss-filterbar h3.wp-block-heading.eirlyss-group__head { margin: 0 !important; font-size: inherit; }
.eirlyss-group__toggle {
	appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 48px; margin: 0; padding: 0;
	border: 0; border-top: 1px solid var(--eirlyss-hair); background: transparent; color: var(--eirlyss-ink);
	font: inherit; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; text-align: left; cursor: pointer;
}
.eirlyss-group__toggle::after { content: "+"; font-weight: 350; font-size: 1.125rem; line-height: 1; }
.eirlyss-group__toggle[aria-expanded="true"]::after { content: "\2212"; }
.eirlyss-group__body { padding: 0 0 1rem; }
.eirlyss-js .eirlyss-filterbar .eirlyss-group__head:has(> .eirlyss-group__toggle[aria-expanded="false"]) + .eirlyss-group__body { display: none; }
.eirlyss-filterbar .wp-block-woocommerce-product-filter-price:last-child, .eirlyss-filterbar .wc-block-product-filters__overlay-content > :last-child .eirlyss-group__body { padding-bottom: 0.5rem; }
/* Without JavaScript: no dead button; the groups show in the page (WooCommerce's filters need JavaScript to act). */
html:not(.eirlyss-js) .eirlyss-filterbar { flex-wrap: wrap; }
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters { flex: 1 1 100%; }
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters__overlay,
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters__overlay-dialog { position: static; transform: none; visibility: visible; background: transparent; }
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters__overlay-header,
html:not(.eirlyss-js) .eirlyss-filterbar .wc-block-product-filters__overlay-footer { display: none; }

/* ===== Sold pieces stay, design 1.7.0 (EW-B6, 2026-10-03; Alex's order of 2026-10-02) =====
   A sold piece stays in every list with a small "Sold" label on its photograph (her ink on her paper, spaced capitals, solid,
   never faded), the photograph gently faded (the image only: the label, the name and the focus ring keep full contrast) and
   "Sold" where the price was. On its own page the gallery carries the same label and the faded photographs; they show their
   true colour when zoomed (hover) or opened full screen. The preview line sits quietly at the foot of every store page. */
.eirlyss-is-sold img { filter: saturate(0.35) brightness(1.05); }
.eirlyss-is-sold .wc-block-components-product-image__inner-container { padding: 10px; }
.eirlyss-sold-badge {
	align-self: flex-start; display: inline-block; padding: 0.3125rem 0.5rem 0.25rem; background: var(--eirlyss-paper); color: var(--eirlyss-ink);
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; pointer-events: none;
	box-shadow: 0 0 0 1px rgba(38, 24, 14, 0.08);
}
@media (max-width: 599px) {
	.eirlyss-is-sold .wc-block-components-product-image__inner-container { padding: 6px; }
	.eirlyss-sold-badge { padding: 0.25rem 0.4375rem 0.1875rem; font-size: 0.6875rem; letter-spacing: 0.12em; }
}
.eirlyss-sold-price { letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--eirlyss-ink); }
.eirlyss-piece__facts .eirlyss-sold-price { font-size: 1rem; }
/* The piece's page: the label on the large image (above the photographs, which WooCommerce stacks at z-index 1). */
.eirlyss-sold-badge--piece { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 0.8125rem; }
.eirlyss-sold-piece .wc-block-product-gallery-large-image img,
.eirlyss-sold-piece .wc-block-product-gallery-thumbnails img { filter: saturate(0.35) brightness(1.05); transition: filter 0.3s ease; }
.eirlyss-sold-piece .wc-block-product-gallery-large-image img:hover { filter: none; }
.eirlyss-sold-piece .wc-block-product-gallery-dialog img { filter: none; }
@media (prefers-reduced-motion: reduce) {
	.eirlyss-sold-piece .wc-block-product-gallery-large-image img, .eirlyss-sold-piece .wc-block-product-gallery-thumbnails img { transition: none; }
}
/* The preview line at the foot of the store screens (the preview plugin 1.2.0 prints it at the top of the footer part):
   small umber words on white, a hairline above, just above the dark footer; never a banner. */
.eirlyss-preview-bar--foot { background: #fff; color: var(--eirlyss-umber); border-top: 1px solid var(--eirlyss-hair); text-align: center; }
.eirlyss-preview-bar--foot p { margin: 0; padding: 0.875rem 1.25rem; font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.01em; color: var(--eirlyss-umber); }
/* The example note under a placeholder's price is now one short line ("Example piece."). */
.eirlyss-piece__facts .eirlyss-example-note { margin-top: 0.25rem; font-size: 0.8125rem; }
/* The Availability group sits last in the panel, like the others (WooCommerce's own stock-status filter). */
.eirlyss-filterbar .wp-block-woocommerce-product-filter-status .wc-block-product-filter-checkbox-list__label { color: var(--eirlyss-ink); font-size: 0.9375rem; min-height: 44px; align-items: center; width: 100%; }
.eirlyss-filterbar .wp-block-woocommerce-product-filter-status .wc-block-product-filter-checkbox-list__input { accent-color: var(--eirlyss-ink); }

/* ===== The endless feed, design 1.7.0 (EW-B7, 2026-10-03; Alex's order of 2026-10-02) =====
   Under a piece's Details, "You may also like" continues the collection: the same cards as the listings (the photograph
   whole in its 4:5 frame on her paper, the decade in small spaced capitals, the name, the price or "Sold"), the same 4, 3
   or 2 columns and thin gaps of design 1.6.0, but its own classes, so the listing rules are not widened. The names keep
   room for two lines, so a card that arrives into its reserved slot never moves what is below it. */
.eirlyss-feed-wrap {
	--eirlyss-edge: clamp(12px, 2vw, 32px);
	--eirlyss-gap: 8px;
	--eirlyss-rowgap: 2rem;
	box-sizing: border-box;
	padding-inline: var(--eirlyss-edge);
}
.eirlyss-feed { position: relative; }
.eirlyss-feed__title { margin: 0 0 0.5rem; }
.eirlyss-feed__about[hidden], .eirlyss-feed__explain[hidden], .eirlyss-feed__end[hidden], .eirlyss-feed__actions[hidden],
.eirlyss-feed__grid[hidden], .eirlyss-feed__sold-title[hidden], .eirlyss-feed__all[hidden], .eirlyss-totop[hidden], .eirlyss-feed__skip[hidden] { display: none; }
.eirlyss-feed__about { margin: 0 0 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--eirlyss-umber); }
.eirlyss-feed__line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.875rem; row-gap: 0; margin: 0; }
.eirlyss-feed__btn {
	appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; background: none;
	font: inherit; font-size: 0.8125rem; color: var(--eirlyss-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer;
}
.eirlyss-feed__btn:hover { text-decoration-thickness: 2px; }
.eirlyss-feed__btn:focus-visible, .eirlyss-feed__more:focus-visible, .eirlyss-totop:focus-visible, .eirlyss-feed__link:focus-visible,
.eirlyss-feed__skip:focus-visible, .eirlyss-feed__all a:focus-visible, .eirlyss-feed__end a:focus-visible { outline: 2px solid var(--eirlyss-ink); outline-offset: 3px; }
.eirlyss-feed__explain { max-width: 42rem; margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--eirlyss-ink); }
.eirlyss-feed__note { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--eirlyss-ink); }
.eirlyss-feed__note:empty { display: none; }
/* The skip link: out of sight until it has the keyboard's focus. */
.eirlyss-feed__skip { position: absolute; left: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; white-space: nowrap; overflow: hidden; clip-path: inset(50%); background: #fff; color: var(--eirlyss-ink); border: 1px solid var(--eirlyss-ink); font-size: 0.875rem; }
.eirlyss-feed__skip:focus { position: static; clip-path: none; margin: 0 0 0.5rem; }
/* The grid: 4 across from 1200 px, 3 from 600 px, 2 below; the gaps of 1.6.0's listings. */
.eirlyss-feed__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--eirlyss-gap); row-gap: var(--eirlyss-rowgap); margin: 0; padding: 0; list-style: none; }
@media (max-width: 1199px) { .eirlyss-feed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
	.eirlyss-feed-wrap { --eirlyss-gap: 6px; --eirlyss-rowgap: 1.75rem; }
	.eirlyss-feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.eirlyss-feed__card { position: relative; min-width: 0; margin: 0; }
.eirlyss-feed__link { display: block; color: var(--eirlyss-ink); text-decoration: none; }
.eirlyss-feed__frame { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--eirlyss-paper); }
.eirlyss-feed__img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--eirlyss-paper); }
.eirlyss-feed__frame .eirlyss-sold-badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.eirlyss-feed__decade { display: block; margin-top: 0.625rem; font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-feed__name { display: block; min-height: 2.7em; margin-top: 0.25rem; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; color: var(--eirlyss-ink); }
.eirlyss-feed__link:hover .eirlyss-feed__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.eirlyss-feed__price { margin: 0.125rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--eirlyss-ink); }
.eirlyss-feed__card.is-placeholder .eirlyss-feed__frame { background: var(--eirlyss-paper); }
@media (max-width: 599px) {
	.eirlyss-feed__frame .eirlyss-sold-badge { top: 6px; left: 6px; }
	.eirlyss-feed__decade { font-size: 0.6875rem; }
	.eirlyss-feed__name { font-size: 0.875rem; }
	.eirlyss-feed__price { font-size: 0.875rem; }
}
/* "Previously collected": a quiet heading where the sold pieces begin (Codex's better idea 2). */
.eirlyss-feed__sold-title { margin: 3rem 0 1rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--eirlyss-umber); }
.eirlyss-feed__all { margin: 1.5rem 0 0; font-size: 0.9375rem; }
.eirlyss-feed__all a, .eirlyss-feed__end a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; color: var(--eirlyss-ink); }
.eirlyss-feed__status { min-height: 1.5em; margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.5; text-align: center; color: var(--eirlyss-umber); }
.eirlyss-feed__actions { display: flex; justify-content: center; margin: 0.75rem 0 0; }
.eirlyss-feed__more {
	min-height: 48px; min-width: 12rem; padding: 0 2rem; border: 1px solid var(--eirlyss-ink); border-radius: 0; background: #fff; color: var(--eirlyss-ink);
	font: inherit; font-size: 0.9375rem; letter-spacing: 0.01em; cursor: pointer;
}
.eirlyss-feed__more:hover { background: var(--eirlyss-paper); }
.eirlyss-feed__more[aria-disabled="true"] { cursor: progress; opacity: 0.7; }
.eirlyss-feed__end { margin: 0.75rem 0 0; text-align: center; font-size: 0.9375rem; color: var(--eirlyss-ink); }
/* Back to top: a small square at the bottom right after about two screens of the feed; below the bag drawer and the
   question dialog (the dialog sits in the browser's top layer; the drawer's overlay is far above 40). */
.eirlyss-totop {
	position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--eirlyss-ink); border-radius: 0; background: #fff; color: var(--eirlyss-ink); cursor: pointer; box-shadow: 0 0.25rem 1rem rgba(38, 24, 14, 0.12);
}
.eirlyss-totop:hover { background: var(--eirlyss-paper); }