/*
 * HENI design system — Emerald Thinker child theme v2.9.3
 * --------------------------------------------------------------------------
 * Extracted from the live heni.com homepage (Tailwind v4 / SvelteKit build,
 * captured 2 Oct 2026). These are the values HENI actually ships:
 *
 *   Typeface    Silka 400 / 500 / 600 (commercial). Free stand-in: DM Sans.
 *   Neutrals    gray-0 #fff   50 #fafafa   100 #f7f7f7   200 #e7e7e7   300 #d5d5d5
 *               400 #b1b1b1   500 #909090  600 #6d6d6d   700 #464646   800 #2e2e2e
 *               900 #222   (text, primary buttons, top bar, footer)
 *   Artwork mat #efefef well around each work (cards)
 *   Accents     link / category blue #355dcb · live #18d842 · soon #f59e0b
 *   Radius      4px buttons, cards, inputs · 6px newsletter band · pill status
 *   Container   max 80rem (1280px); 16px gutters, 24px from 640px
 *   Type        hero h1 32/36 -> 48/48 (500) · section title 24/32 -> 30/36 (600)
 *               h4 20/28 -> 24/32 · h5 18/28 -> 20/28 · body 16/24 · caption 12/16
 *   Buttons     uppercase, .1em tracking, 14px/500 (40px) or 16px/500 (48px)
 *   Nav         uppercase, .14em tracking, 14px, 2px underline on hover
 *   Rhythm      sections 64px apart; card grid gap 24px; card padding 16px
 * --------------------------------------------------------------------------
 */

/* ---- FONTS ---------------------------------------------------------------
   DM Sans (SIL OFL 1.1, see assets/fonts/OFL.txt) is the free stand-in for
   HENI's commercial Silka. It is also registered under the two family names
   the older stylesheets and Elementor widgets hard-code ("Inter" and
   "EB Garamond"), so every legacy reference renders in the HENI face without
   touching those files. To use a licensed Silka instead, add @font-face rules
   for "Silka" (400/500/600) here; it is already first in --heni-font. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:100 1000;font-display:swap;src:url("../fonts/dm-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- TOKENS --------------------------------------------------------------
   html:root outranks the plain :root blocks in the older stylesheets, so these
   win regardless of load order. */
html:root {
	--heni-gray-0: #fff;     --heni-gray-50: #fafafa;  --heni-gray-75: #f0f0f0;
	--heni-gray-100: #f7f7f7; --heni-gray-200: #e7e7e7; --heni-gray-300: #d5d5d5;
	--heni-gray-400: #b1b1b1; --heni-gray-500: #909090; --heni-gray-600: #6d6d6d;
	--heni-gray-700: #464646; --heni-gray-800: #2e2e2e; --heni-gray-900: #222;
	--heni-mat: #efefef;
	--heni-link: #355dcb;
	--heni-live: #18d842;
	--heni-soon: #f59e0b;
	--heni-error: #e7000b;
	--heni-font: "Silka", "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--heni-radius: .25rem;
	--heni-radius-md: .375rem;
	--heni-container: 80rem;
	--heni-pad: 1rem;
	--heni-track-nav: .14em;
	--heni-track-btn: .1em;

	/* Existing theme tokens, remapped so every component inherits HENI. */
	--ett-ink: var(--heni-gray-900);
	--ett-ink-soft: var(--heni-gray-700);
	--ett-paper: #fff;
	--ett-paper-raised: #fff;
	--ett-line: var(--heni-gray-200);
	--ett-accent: var(--heni-gray-800);
	--ett-serif: var(--heni-font);
	--ett-sans: var(--heni-font);
	--ett-tracking-wide: var(--heni-track-nav);
	--ett-leading-editorial: 1.5;
	--ett-gutter: var(--heni-pad);
	--ett-section-gap: 4rem;
	--ett-max-width: var(--heni-container);
	--ett-fs-display: clamp(2rem, 1.5rem + 1.6vw, 3rem);
	--ett-fs-h2: clamp(1.5rem, 1.35rem + .5vw, 1.875rem);
	--ett-fs-h3: 1.25rem;
	--ett-fs-body: 1rem;
	--ett-fs-ui: .875rem;
	--ett-fs-eyebrow: .75rem;

	--ett-polish-ink: var(--heni-gray-900);
	--ett-polish-muted: var(--heni-gray-600);
	--ett-polish-line: var(--heni-gray-200);
	--ett-polish-paper: var(--heni-gray-50);
	--ett-polish-green: var(--heni-gray-900);
	--ett-polish-serif: var(--heni-font);
	--ett-polish-sans: var(--heni-font);
	--ett-polish-width: var(--heni-container);

	/* Page-scoped palettes (product, artist profile). */
	--iona-ink: var(--heni-gray-900);
	--iona-paper: #fff;
	--iona-line: var(--heni-gray-200);
	--iona-accent: var(--heni-gray-900);
	--artist-ink: var(--heni-gray-900);
	--artist-paper: #fff;
	--artist-line: var(--heni-gray-200);
	--artist-muted: var(--heni-gray-600);
}
@media (min-width: 640px) {
	html:root { --heni-pad: 1.5rem; }
}

/* ---- BASE TYPE ---------------------------------------------------------- */
html body.ett-body {
	background: #fff;
	color: var(--heni-gray-900);
	font-family: var(--heni-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}
body.ett-body :where(h1, h2, h3, h4, h5, h6) { font-family: var(--heni-font); }
body.ett-body :where(button, input, select, textarea) { font-family: inherit; }

/* The old stylesheet rounds nothing, anywhere (!important). HENI uses a 4px
   radius on buttons, so opt the button components back in with higher
   specificity. Cards and bands do the same in heni-live-home.css. */
.ett-body :is(.ett-btn, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button) {
	border-radius: var(--heni-radius) !important;
}

/* ---- BUTTONS (.ett-btn) -------------------------------------------------
   HENI: uppercase, .1em tracking, 14px/500; dark #222 primary, white outline
   secondary, translucent ghost on imagery. */
.ett-body .ett-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	font-family: var(--heni-font);
	font-size: .875rem;
	font-weight: 500;
	line-height: normal;
	letter-spacing: var(--heni-track-btn);
	white-space: nowrap;
	border: 1px solid var(--heni-gray-900);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ett-body .ett-btn--primary { background: var(--heni-gray-900); border-color: var(--heni-gray-900); color: var(--heni-gray-50); }
.ett-body .ett-btn--primary:hover:not(:disabled) { background: var(--heni-gray-800); border-color: var(--heni-gray-800); color: #fff; }
.ett-body .ett-btn--primary:active:not(:disabled) { background: var(--heni-gray-700); }
.ett-body .ett-btn--ghost { background: #fff; border-color: var(--heni-gray-200); color: var(--heni-gray-900); }
.ett-body .ett-btn--ghost:hover { background: #fff; border-color: var(--heni-gray-700); color: var(--heni-gray-900); }
.ett-body .ett-btn--ghost-light { background: transparent; border-color: var(--heni-gray-200); color: var(--heni-gray-50); }
.ett-body .ett-btn--ghost-light:hover { background: rgb(0 0 0 / .4); border-color: var(--heni-gray-200); color: #fff; }
.ett-body .ett-btn:disabled { background: var(--heni-gray-100); border-color: var(--heni-gray-200); color: var(--heni-gray-500); }

/* ---- STATES ------------------------------------------------------------
   --ett-accent is HENI's dark hover gray (button/link hovers), so the colours
   the old accent also carried are set explicitly: link-blue focus ring, red
   for errors. */
.ett-body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--heni-link); }
.ett-body :is(input, textarea, select):invalid:not(:placeholder-shown),
.ett-body select:invalid:not(:focus) { border-color: var(--heni-error); }
.ett-body .ett-form-feedback.is-error { color: var(--heni-error); }
.ett-body .ett-form-feedback.is-success { color: var(--heni-gray-900); }

/* ---- PAGE TITLES -------------------------------------------------------
   Replaces the 90px+ serif display sizes with HENI's h1 (32 → 48px / 500). */
body .ett-press-fallback__header h1,
body .ett-single-press__header h1,
body .ett-commerce-heading h1,
body .post-type-archive-product .woocommerce-products-header__title,
body .woocommerce-shop .woocommerce-products-header__title,
body .woocommerce-shop h1.page-title {
	font: 500 clamp(2rem, 1.6rem + 1.6vw, 3rem) / 1.1 var(--heni-font);
	letter-spacing: 0;
	text-transform: none;
}
body .ett-shop-intro h2 {
	font: 600 clamp(1.5rem, 1.35rem + .5vw, 1.875rem) / 1.2 var(--heni-font);
	letter-spacing: 0;
}
body .ett-shop-intro p { font: 400 1rem / 1.5 var(--heni-font); }
body .ett-press-fallback__eyebrow,
body .ett-single-press__header > p,
body .ett-commerce-heading__eyebrow {
	font-family: var(--heni-font);
	letter-spacing: var(--heni-track-btn);
}

/* ---- WOOCOMMERCE: type only (layout is left to the existing polish layer) */
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product h2,
body .woocommerce ul.products li.product h3 {
	font: 600 1.125rem / 1.4 var(--heni-font) !important;
	letter-spacing: 0;
}
body .woocommerce ul.products li.product .price { font: 500 .875rem / 1.25 var(--heni-font) !important; letter-spacing: 0; }
body .woocommerce ul.products li.product .iona-shop-facts__artist { font: 500 .75rem / 1.25 var(--heni-font) !important; letter-spacing: var(--heni-track-btn); }
body .woocommerce ul.products li.product .iona-shop-facts__details { font: 400 .875rem / 1.4 var(--heni-font) !important; color: var(--heni-gray-600); }
body .woocommerce ul.products li.product .iona-shop-facts__edition { font: 500 .75rem / 1.25 var(--heni-font) !important; }
body .woocommerce ul.products li.product { border-color: var(--heni-gray-200) !important; }
body .wc-block-components-product-name { font: 500 1rem / 1.4 var(--heni-font) !important; }
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button {
	min-height: 3rem;
	font: 500 .875rem / 1 var(--heni-font) !important;
	letter-spacing: var(--heni-track-btn);
}
body .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover {
	background: var(--heni-gray-800) !important;
	border-color: var(--heni-gray-800) !important;
}

/* ---- HEADER (native fallback) -------------------------------------------
   HENI's top bar: #222, 48px, white uppercase nav at .14em with a 2px
   underline on hover. The live site renders the Elementor header template
   instead (see next block); this applies when no Elementor header is set. */
body .ett-header {
	background: var(--heni-gray-900);
	border-bottom: 0;
	color: #fff;
}
body .ett-header__inner {
	max-width: var(--heni-container);
	min-height: 3rem;
	padding: 0 var(--heni-pad);
	gap: 2rem;
}
body .ett-header__wordmark {
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .2em;
}
body .ett-header__brand .custom-logo { max-height: 28px; filter: brightness(0) invert(1); }
body .ett-nav__list { gap: 2rem; }
body .ett-nav__link,
body .ett-header__login {
	padding: .25rem 0;
	border-bottom: 2px solid transparent;
	color: #fff;
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: var(--heni-track-nav);
	line-height: 1.25rem;
}
body .ett-header__login { display: inline-flex; align-items: center; }
body .ett-nav__link::after { display: none; }
body .ett-nav__link:hover,
body .ett-nav__link:focus-visible,
body .current-menu-item > .ett-nav__link,
body .current_page_item > .ett-nav__link,
body .ett-header__login:hover {
	color: #fff;
	border-bottom-color: #fff;
}
body .ett-header__burger-line { background: #fff; }
body .ett-header--scrolled { border-bottom-color: transparent; }

/* ---- HEADER / FOOTER (live Elementor templates) -------------------------
   The structure of these templates is not visible to the theme, so only
   typography and the bar edge are restyled; colours stay light so the
   existing logo and icons keep their contrast. */
body .elementor-location-header.elementor-3633 {
	background: #fff;
	border-bottom: 1px solid var(--heni-gray-200);
}
body .elementor-location-header.elementor-3633 a,
body .elementor-location-header.elementor-3633 .sc_layouts_item_details {
	font-family: var(--heni-font);
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: var(--heni-track-nav);
}
body .elementor-location-footer {
	background: var(--heni-gray-50);
	border-top: 1px solid var(--heni-gray-200);
}
body .elementor-location-footer h2,
body .elementor-location-footer h3,
body .elementor-location-footer h4 {
	font-family: var(--heni-font) !important;
	font-size: .875rem !important;
	font-weight: 600 !important;
	letter-spacing: var(--heni-track-btn);
}
body .elementor-location-footer a,
body .elementor-location-footer p { font-family: var(--heni-font); line-height: 1.5; }
@media (max-width: 428px) {
	body .elementor-location-header.elementor-3633 a,
	body .elementor-location-header.elementor-3633 .sc_layouts_item_details { letter-spacing: .08em; }
}

/* ---- FOOTER (native fallback): HENI's dark #222 footer ------------------ */
body .ett-footer {
	background: var(--heni-gray-900);
	border-top: 0;
}
body .ett-footer__inner {
	max-width: var(--heni-container);
	padding: 4rem var(--heni-pad);
	align-items: flex-start;
	gap: 2rem;
}
body .ett-footer__copyright { color: var(--heni-gray-500); font-size: .875rem; font-weight: 500; }
body .ett-footer__list { gap: 2.5rem; flex-wrap: wrap; }
body .ett-footer__link {
	color: var(--heni-gray-500);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}
body .ett-footer__link:hover { color: #fff; }
body .ett-footer__social-link { color: #fff; }
body .ett-footer__social-link:hover { color: var(--heni-gray-300); }