/*
Theme Name: ENHONG
Theme URI: https://example.com/enhong-jewellery
Author: ENHONG
Author URI: https://example.com
Description: A calm, confident theme for jewellery manufacturers and wholesalers who win overseas wholesale and OEM/ODM custom inquiries. Deep wine and restrained gold, generous whitespace, product pricing in USD, bilingual English/Chinese, and a built-in inquiry chat widget. Fast by default: one stylesheet, one small script, no jQuery on the front end.
Version: 4.3.9
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enhong-jewellery
Tags: e-commerce, business, portfolio, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks, right-sidebar
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand — deep wine, taken from traditional gold-jewellery retail livery. */
	--eh-wine: #7a1220;
	--eh-wine-deep: #530b15;
	--eh-wine-dark: #3d0710;
	--eh-wine-light: #9a2534;
	--eh-wine-tint: #fbf3f4;

	/* Restrained metallic gold. Used for rules, eyebrows and numbers only. */
	--eh-gold: #bf9c4e;
	/*
	 * Text gold, not decorative gold: 5.6:1 on white (was 3.93).
	 * `--eh-gold` stays the ornamental shade.
	 */
	--eh-gold-deep: #6f5520;
	--eh-gold-light: #ddc78e;
	--eh-gold-tint: #f7f1e3;

	/* Neutrals — warm, never pure grey. */
	--eh-ink: #1b1714;
	--eh-ink-2: #4b433a;
	--eh-ink-3: #6f665b;
	/*
	 * 4.5:1 against white and cream.
	 *
	 * #938a7e measured 3.40:1 on white and 2.97:1 on cream — under AA for the
	 * 11-13px text this colour is used for (notes, meta, captions).
	 */
	--eh-muted: #6f665b;
	--eh-line: #e8e1d6;
	--eh-line-soft: #f0ebe2;
	--eh-white: #ffffff;
	--eh-cream: #fbf8f3;
	--eh-cream-2: #f5efe5;
	--eh-sand: #ece3d5;

	/* Semantic */
	--eh-success: #2f7d55;
	--eh-danger: #b3261e;
	--eh-whatsapp: #25d366;

	/* Typography */
	/*
	 * Display stack, with the numeric fallback ORDERED DELIBERATELY.
	 *
	 * The Google webfont is off by default, so "Cormorant Garamond" and
	 * "Playfair Display" resolve to nothing on a normal site and the browser moves
	 * down the list. Georgia came next — and Georgia's digits are OLD-STYLE by
	 * design: 3, 4, 5, 7 and 9 descend, 0 and 1 sit at x-height, every glyph has
	 * its own width. That is the "黄色数字扭曲" that survived four rounds of
	 * padding-figure fixes.
	 *
	 * font-variant-numeric: lining-nums is the right property and is declared on
	 * :root, but iOS Safari applies OpenType features to WEB fonts only. On a
	 * system font like Georgia it is silently ignored, which is why the numbers
	 * looked correct on a desktop browser and crooked on a phone.
	 *
	 * Times New Roman has lining figures, is present on iOS, Android, Windows and
	 * macOS, and keeps the serif character of the design. Putting it ahead of
	 * Georgia fixes the digits everywhere without downloading anything.
	 *
	 * DO NOT move Georgia back up this list.
	 */
	--eh-font-display: "Cormorant Garamond", "Playfair Display", "Times New Roman", Times, Georgia, "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
	--eh-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	--eh-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* Fluid type scale */
	--eh-fs-xs: 0.75rem;
	--eh-fs-sm: 0.8125rem;
	--eh-fs-base: 1rem;
	--eh-fs-md: 1.0625rem;
	--eh-fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
	--eh-fs-xl: clamp(1.35rem, 0.8vw + 1.15rem, 1.7rem);
	--eh-fs-2xl: clamp(1.7rem, 1.9vw + 1.25rem, 2.5rem);
	--eh-fs-3xl: clamp(2.1rem, 3.4vw + 1.3rem, 3.4rem);
	--eh-fs-4xl: clamp(2.5rem, 5.2vw + 1.2rem, 4.6rem);

	/* Space rhythm */
	--eh-sp-1: 0.25rem;
	--eh-sp-2: 0.5rem;
	--eh-sp-3: 0.75rem;
	--eh-sp-4: 1rem;
	--eh-sp-5: 1.5rem;
	--eh-sp-6: 2rem;
	--eh-sp-7: 3rem;
	--eh-sp-8: 4rem;
	--eh-sp-9: 6rem;
	--eh-section-y: clamp(3.5rem, 6vw, 6.5rem);

	/* Layout */
	--eh-container: 1280px;
	--eh-container-wide: 1560px;
	--eh-container-narrow: 880px;
	--eh-gutter: clamp(1.15rem, 3vw, 2.5rem);
	--eh-header-h: 76px;
	--eh-topbar-h: 38px;

	/* Surfaces */
	--eh-radius: 2px;
	--eh-radius-lg: 4px;
	--eh-radius-pill: 999px;
	--eh-shadow-sm: 0 1px 2px rgba(27, 23, 20, 0.04), 0 2px 8px rgba(27, 23, 20, 0.04);
	--eh-shadow: 0 4px 12px rgba(27, 23, 20, 0.06), 0 12px 32px rgba(27, 23, 20, 0.07);
	--eh-shadow-lg: 0 12px 32px rgba(27, 23, 20, 0.1), 0 32px 64px rgba(27, 23, 20, 0.1);
	--eh-ring: 0 0 0 3px rgba(191, 156, 78, 0.32);

	/* Motion */
	--eh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--eh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--eh-dur: 0.32s;
	--eh-dur-fast: 0.18s;

	--eh-z-header: 900;
	--eh-z-drawer: 950;
	/*
	 * Below the drawer: on a phone the menu covers the screen, and the chat
	 * bubble sat on top of it. 980 > 950 made the launcher clickable through
	 * the open menu.
	 */
	--eh-z-chat: 940;
	--eh-z-modal: 1000;

	/*
	 * Lining, tabular figures — set once, inherited everywhere.
	 *
	 * The display face (Cormorant Garamond) defaults to OLD-STYLE numerals: 1 and
	 * 2 sit at x-height, 9 and 0 descend, and every glyph has its own width. Any
	 * number set in it therefore looks crooked — "19", "2,000+" and "40+" each
	 * start at a different height even though their boxes are aligned.
	 *
	 * This was first fixed per selector, which is why it kept coming back: the
	 * hero statistics and the process steps were patched, and the media badge
	 * further down the page was not. Every new number added anywhere would have
	 * needed the same two lines again.
	 *
	 * font-variant-numeric INHERITS, so declaring it on the root covers every
	 * element that exists now and every one added later. Do not remove it and do
	 * not move it onto individual selectors — that is how this regressed twice.
	 *
	 * lining-nums  puts every digit on one baseline and cap height.
	 * tabular-nums gives them one width, so commas and plus signs stop shifting
	 *              the run.
	 */
	font-variant-numeric: lining-nums tabular-nums;

	/*
	 * Never fake a weight.
	 *
	 * The design asks for 600 in several places. System serif faces often ship
	 * only 400 and 700, so the browser synthesises the missing weight by smearing
	 * the glyph — which reads as "扭曲" on exactly the elements that carry numbers,
	 * because numbers are where the weight is most visible.
	 *
	 * With synthesis off the browser snaps to a real weight instead.
	 */
	font-synthesis: none;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--eh-header-h) + 12px);
}

body {
	margin: 0;
	background: var(--eh-white);
	color: var(--eh-ink);
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-base);
	line-height: 1.72;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.eh-no-scroll {
	overflow: hidden;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
	border-style: none;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--eh-line);
	margin: var(--eh-sp-7) 0;
}

::selection {
	background: var(--eh-wine);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--eh-gold-deep);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	font-family: var(--eh-font-display);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: var(--eh-ink);
}

h1 {
	font-size: var(--eh-fs-4xl);
	letter-spacing: -0.015em;
}

h2 {
	font-size: var(--eh-fs-3xl);
	letter-spacing: -0.012em;
}

h3 {
	font-size: var(--eh-fs-2xl);
}

h4 {
	font-size: var(--eh-fs-xl);
}

h5 {
	font-size: var(--eh-fs-lg);
	font-family: var(--eh-font-body);
	font-weight: 600;
}

h6 {
	font-size: var(--eh-fs-base);
	font-family: var(--eh-font-body);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

p {
	margin: 0 0 1.15em;
}

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

a {
	color: var(--eh-wine);
	text-decoration: none;
	transition: color var(--eh-dur-fast) var(--eh-ease);
}

a:hover {
	color: var(--eh-gold-deep);
}

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

small {
	font-size: var(--eh-fs-sm);
}

blockquote {
	margin: var(--eh-sp-6) 0;
	padding: var(--eh-sp-2) 0 var(--eh-sp-2) var(--eh-sp-5);
	border-left: 2px solid var(--eh-gold);
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-xl);
	font-style: italic;
	color: var(--eh-ink-2);
}

code,
kbd,
pre,
samp {
	font-family: var(--eh-font-num);
	font-size: 0.875em;
}

code {
	background: var(--eh-cream-2);
	padding: 0.15em 0.4em;
	border-radius: var(--eh-radius);
	color: var(--eh-wine);
}

pre {
	background: var(--eh-ink);
	color: var(--eh-cream);
	padding: var(--eh-sp-5);
	border-radius: var(--eh-radius-lg);
	overflow: auto;
}

pre code {
	background: none;
	color: inherit;
	padding: 0;
}

ul,
ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

li {
	margin-bottom: 0.4em;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--eh-sp-5);
	font-size: var(--eh-fs-md);
}

th,
td {
	padding: 0.75em 0.9em;
	text-align: left;
	border-bottom: 1px solid var(--eh-line);
	vertical-align: top;
}

th {
	font-weight: 600;
	font-size: var(--eh-fs-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eh-ink-2);
	background: var(--eh-cream);
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

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

.eh-container--wide {
	max-width: var(--eh-container-wide);
}

.eh-container--narrow {
	max-width: var(--eh-container-narrow);
}

.eh-section {
	padding-block: var(--eh-section-y);
	position: relative;
}

/* The page content wrapper. No visual styling, but it keeps the footer at the
   bottom on short pages (404, empty search) instead of floating mid-screen. */
.eh-main {
	display: block;
	min-height: 40vh;
}

.eh-section--tight {
	padding-block: clamp(2.5rem, 4vw, 4rem);
}

.eh-section--cream {
	background: var(--eh-cream);
}

.eh-section--cream-2 {
	background: var(--eh-cream-2);
}

.eh-section--wine {
	background: var(--eh-wine-dark);
	color: rgba(255, 255, 255, 0.84);
}

.eh-section--wine h2,
.eh-section--wine h3,
.eh-section--wine h4 {
	color: #fff;
}

.eh-grid {
	display: grid;
	gap: var(--eh-sp-5);
}

.eh-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eh-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eh-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.eh-center {
	text-align: center;
}

.eh-center-x {
	margin-inline: auto;
}

.eh-hairline {
	height: 1px;
	background: var(--eh-line);
	border: 0;
	margin: 0;
}

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

.eh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: calc(var(--eh-z-modal) + 1);
	background: var(--eh-wine);
	color: #fff;
	padding: 12px 20px;
	font-size: var(--eh-fs-sm);
	letter-spacing: 0.06em;
}

.eh-skip-link:focus {
	left: 0;
	color: #fff;
}

/* ==========================================================================
   5. Section headings and eyebrow labels
   ========================================================================== */

.eh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 var(--eh-sp-3);
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--eh-gold-deep);
}

.eh-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--eh-gold);
	flex: none;
}

.eh-eyebrow--plain::before {
	display: none;
}

.eh-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--eh-sp-6);
	margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

/*
 * 62ch is a measure for running text, not for headings.
 *
 * Applied to the wrapper it also capped the <h2>, so "Why buyers work with
 * us" broke after "with" on a desktop screen while the same heading fitted
 * on one line at a wider viewport. The limit now sits on the paragraph only.
 */
.eh-section-head__text {
max-width: none;
}

.eh-section-head h2 {
	margin-bottom: 0.35em;
}

.eh-section-head p {
	margin: 0;
		max-width: 62ch;
	color: var(--eh-ink-3);
	font-size: var(--eh-fs-md);
}

.eh-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.eh-section-head--center .eh-eyebrow {
	justify-content: center;
}

.eh-section-head--center .eh-section-head__text {
	margin-inline: auto;
}

.eh-section-head--wine p {
	color: rgba(255, 255, 255, 0.7);
}

.eh-section-head--wine .eh-eyebrow {
	color: var(--eh-gold-light);
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

/* Note: deliberately no `:visited` in this selector list. Author rules already
   outrank the user-agent `a:visited` colour, and adding the pseudo-class would
   raise specificity to (0,2,0), silently beating later single-class overrides
   such as the responsive `.eh-header__quote { display: none }`. */
.eh-btn,
button.eh-btn,
input[type="submit"].eh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.9em;
	border: 1px solid transparent;
	border-radius: var(--eh-radius);
	background: var(--eh-wine);
	color: #fff;
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background var(--eh-dur-fast) var(--eh-ease), color var(--eh-dur-fast) var(--eh-ease), border-color var(--eh-dur-fast) var(--eh-ease), transform var(--eh-dur-fast) var(--eh-ease), box-shadow var(--eh-dur-fast) var(--eh-ease);
	-webkit-appearance: none;
	appearance: none;
}

.eh-btn:hover {
	background: var(--eh-wine-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--eh-shadow);
}

.eh-btn:active {
	transform: translateY(0);
}

.eh-btn--gold {
	background: var(--eh-gold);
	color: #fff;
}

.eh-btn--gold:hover {
	background: var(--eh-gold-deep);
}

.eh-btn--outline {
	background: transparent;
	border-color: var(--eh-wine);
	color: var(--eh-wine);
}

.eh-btn--outline:hover {
	background: var(--eh-wine);
	color: #fff;
}

.eh-btn--light {
	background: #fff;
	color: var(--eh-wine);
}

.eh-btn--light:hover {
	background: var(--eh-gold-tint);
	color: var(--eh-wine-dark);
}

.eh-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
}

.eh-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

.eh-btn--whatsapp {
	background: var(--eh-whatsapp);
	color: #04310f;
}

.eh-btn--whatsapp:hover {
	background: #1eb958;
	color: #04310f;
}

.eh-btn--sm {
	padding: 0.72em 1.3em;
	font-size: 0.6875rem;
}

.eh-btn--lg {
	padding: 1.1em 2.4em;
}

.eh-btn--block {
	width: 100%;
}

.eh-btn[disabled],
.eh-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.eh-btn.is-loading::after {
	content: "";
	width: 13px;
	height: 13px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: eh-spin 0.7s linear infinite;
}

@keyframes eh-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Text link with an animated gold underline */
.eh-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--eh-fs-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--eh-wine);
	position: relative;
	padding-bottom: 2px;
}

.eh-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--eh-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--eh-dur) var(--eh-ease-out);
}

.eh-link:hover::after {
	transform: scaleX(1);
}

.eh-link svg {
	width: 14px;
	height: 14px;
	transition: transform var(--eh-dur-fast) var(--eh-ease);
}

.eh-link:hover svg {
	transform: translateX(3px);
}
/* ==========================================================================
   7. Forms
   ========================================================================== */

.eh-field {
	margin-bottom: var(--eh-sp-4);
}

.eh-field__label {
	display: block;
	margin-bottom: 0.45em;
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eh-ink-2);
}

.eh-field__label .eh-req {
	color: var(--eh-danger);
	margin-left: 2px;
}

.eh-field__hint {
	display: block;
	margin-top: 0.4em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.85em 1em;
	border: 1px solid var(--eh-line);
	border-radius: var(--eh-radius);
	background: #fff;
	color: var(--eh-ink);
	font-family: inherit;
	font-size: var(--eh-fs-base);
	line-height: 1.5;
	transition: border-color var(--eh-dur-fast) var(--eh-ease), box-shadow var(--eh-dur-fast) var(--eh-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236f665b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;
	padding-right: 2.6em;
}

input::placeholder,
textarea::placeholder {
	color: #b3aaa0;
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--eh-gold);
	box-shadow: var(--eh-ring);
	outline: none;
}

input[type="checkbox"],
input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0 0.55em 0 0;
	vertical-align: -3px;
	accent-color: var(--eh-wine);
	cursor: pointer;
}

.eh-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-2);
	cursor: pointer;
}

.eh-check input {
	flex: none;
	margin-top: 3px;
}

.eh-field--error input,
.eh-field--error textarea,
.eh-field--error select {
	border-color: var(--eh-danger);
}

.eh-field__error {
	display: block;
	margin-top: 0.35em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-danger);
}

.eh-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	pointer-events: none;
}

.eh-form-grid {
	display: grid;
	gap: 0 var(--eh-sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eh-form-grid .eh-field--full {
	grid-column: 1 / -1;
}

/* ==========================================================================
   8. Header
   ========================================================================== */

.eh-topbar {
	background: var(--eh-wine-dark);
	color: rgba(255, 255, 255, 0.76);
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.04em;
	position: relative;
	z-index: calc(var(--eh-z-header) + 1);
}

.eh-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-4);
	min-height: var(--eh-topbar-h);
}

.eh-topbar__group {
	display: flex;
	align-items: center;
	gap: var(--eh-sp-5);
	min-width: 0;
}

.eh-topbar a {
	color: rgba(255, 255, 255, 0.76);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
}

.eh-topbar a:hover {
	color: var(--eh-gold-light);
}

.eh-topbar svg {
	width: 14px;
	height: 14px;
	flex: none;
	opacity: 0.85;
}

.eh-topbar__note {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eh-lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.eh-lang__sep {
	opacity: 0.4;
}

.eh-lang__item {
	padding: 2px 4px;
	border-radius: var(--eh-radius);
}

.eh-lang__item.is-active {
	color: var(--eh-gold-light);
	font-weight: 600;
}

.eh-header {
	position: sticky;
	top: 0;
	z-index: var(--eh-z-header);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--eh-line-soft);
	transition: box-shadow var(--eh-dur) var(--eh-ease), background var(--eh-dur) var(--eh-ease);
}

.eh-header.is-stuck {
	box-shadow: 0 1px 2px rgba(27, 23, 20, 0.05), 0 8px 24px rgba(27, 23, 20, 0.06);
	background: rgba(255, 255, 255, 0.98);
}

.eh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-5);
	min-height: var(--eh-header-h);
}

.eh-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	flex: none;
	min-width: 0;
	color: var(--eh-ink);
}

.eh-brand:hover {
	color: var(--eh-ink);
}

.eh-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--eh-gold);
	color: var(--eh-gold-deep);
	font-family: var(--eh-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1;
	flex: none;
}

.eh-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	min-width: 0;
}

.eh-brand__name {
	font-family: var(--eh-font-display);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eh-brand__tag {
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eh-muted);
	white-space: nowrap;
}

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

/* Primary navigation */
.eh-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.eh-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.6vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eh-nav li {
	position: relative;
	margin: 0;
}

.eh-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.6em 0.15em;
	font-size: var(--eh-fs-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eh-ink-2);
	white-space: nowrap;
	position: relative;
}

.eh-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.35em;
	height: 1px;
	background: var(--eh-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--eh-dur) var(--eh-ease-out);
}

.eh-nav a:hover,
.eh-nav .current-menu-item > a,
.eh-nav .current-menu-ancestor > a,
.eh-nav .current_page_item > a {
	color: var(--eh-wine);
}

.eh-nav a:hover::after,
.eh-nav .current-menu-item > a::after,
.eh-nav .current-menu-ancestor > a::after,
.eh-nav .current_page_item > a::after {
	transform: scaleX(1);
}

.eh-nav .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 5px;
	height: 5px;
	margin-left: 0.45em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--eh-dur-fast) var(--eh-ease);
}

/* Dropdowns */
.eh-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 232px;
	padding: 0.5rem 0;
	background: #fff;
	border: 1px solid var(--eh-line);
	box-shadow: var(--eh-shadow);
	display: block;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--eh-dur) var(--eh-ease), transform var(--eh-dur) var(--eh-ease), visibility var(--eh-dur);
	z-index: 20;
}

.eh-nav li:hover > .sub-menu,
.eh-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.eh-nav .sub-menu li {
	width: 100%;
}

.eh-nav .sub-menu a {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0.62em 1.15em;
	font-size: var(--eh-fs-sm);
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--eh-ink-2);
}

.eh-nav .sub-menu a::after,
.eh-nav .sub-menu a::before {
	display: none;
}

.eh-nav .sub-menu a:hover {
	background: var(--eh-cream);
	color: var(--eh-wine);
}

.eh-nav .sub-menu .sub-menu {
	top: -0.5rem;
	left: 100%;
	transform: translate(6px, 0);
}

.eh-nav li:hover > .sub-menu .sub-menu {
	transform: translate(0, 0);
}

/* Header actions */
.eh-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.eh-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--eh-line);
	border-radius: var(--eh-radius);
	background: #fff;
	color: var(--eh-ink-2);
	cursor: pointer;
	transition: border-color var(--eh-dur-fast) var(--eh-ease), color var(--eh-dur-fast) var(--eh-ease), background var(--eh-dur-fast) var(--eh-ease);
	padding: 0;
}

.eh-icon-btn:hover {
	border-color: var(--eh-gold);
	color: var(--eh-wine);
	background: var(--eh-cream);
}

.eh-icon-btn svg {
	width: 18px;
	height: 18px;
}

.eh-burger {
	display: none;
}

.eh-burger__bars {
	position: relative;
	width: 18px;
	height: 12px;
}

.eh-burger__bars span {
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--eh-dur) var(--eh-ease-out), opacity var(--eh-dur-fast) var(--eh-ease);
}

.eh-burger__bars span:nth-child(1) {
	top: 0;
}

.eh-burger__bars span:nth-child(2) {
	top: 5px;
}

.eh-burger__bars span:nth-child(3) {
	top: 10px;
}

.eh-burger[aria-expanded="true"] .eh-burger__bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

.eh-burger[aria-expanded="true"] .eh-burger__bars span:nth-child(2) {
	opacity: 0;
}

.eh-burger[aria-expanded="true"] .eh-burger__bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* Search overlay */
.eh-search {
	position: fixed;
	inset: 0;
	z-index: var(--eh-z-drawer);
	background: rgba(27, 23, 20, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--eh-dur) var(--eh-ease), visibility var(--eh-dur);
}

.eh-search.is-open {
	opacity: 1;
	visibility: visible;
}

.eh-search__panel {
	background: #fff;
	padding: clamp(1.5rem, 4vw, 3rem) 0;
	transform: translateY(-14px);
	transition: transform var(--eh-dur) var(--eh-ease-out);
}

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

.eh-search__form {
	display: flex;
	gap: 0.6rem;
}

/*
 * The oversized serif treatment belongs to the search *overlay* only. Scoping it
 * under .eh-search matters: searchform.php reuses .eh-search__form for the
 * results page, the 404 page and empty archive states, and without the scope
 * those pages got a borderless 1.7rem serif input that looked broken.
 */
.eh-search .eh-search__form input[type="search"] {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-xl);
	padding: 0.5em 0.7em;
	border: 0;
	border-bottom: 1px solid var(--eh-line);
	border-radius: 0;
}

.eh-search .eh-search__form input[type="search"]:focus {
	box-shadow: none;
	border-bottom-color: var(--eh-gold);
}

/* Inline variant: an ordinary boxed field for page content. */
.eh-search__form--inline {
	max-width: 34rem;
}

.eh-search__form--inline input[type="search"] {
	padding: 0.85em 1em;
	border: 1px solid var(--eh-line);
	border-radius: var(--eh-radius);
	background: #fff;
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-base);
}

.eh-search__form--inline input[type="search"]:focus {
	border-color: var(--eh-gold);
	box-shadow: var(--eh-ring);
}

.eh-search__form--inline .eh-btn {
	flex: none;
}

.eh-search__hint {
	margin-top: var(--eh-sp-4);
	font-size: var(--eh-fs-sm);
	color: var(--eh-muted);
}

/* Instant search dropdown */
.eh-search__results {
	margin-top: var(--eh-sp-4);
	max-height: min(60vh, 460px);
	overflow-y: auto;
	border-top: 1px solid var(--eh-line-soft);
}

.eh-search__results[hidden] {
	display: none;
}

.eh-search__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 0.25rem;
	border-bottom: 1px solid var(--eh-line-soft);
	color: var(--eh-ink);
}

.eh-search__item:hover {
	background: var(--eh-cream);
	color: var(--eh-ink);
}

.eh-search__item img,
.eh-search__mark {
	width: 48px;
	height: 48px;
	flex: none;
	object-fit: cover;
	background: var(--eh-cream-2);
	border-radius: var(--eh-radius);
}

.eh-search__mark {
	display: grid;
	place-items: center;
	font-family: var(--eh-font-display);
	font-size: 1.15rem;
	color: var(--eh-gold-deep);
}

.eh-search__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.eh-search__title {
	font-family: var(--eh-font-display);
	font-size: 1.0625rem;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eh-search__meta {
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
	font-family: var(--eh-font-num);
}

.eh-search__empty {
	padding: 1rem 0.25rem;
	margin: 0;
	font-size: var(--eh-fs-sm);
	color: var(--eh-muted);
}

.eh-search__all {
	display: block;
	padding: 0.9rem 0.25rem;
	font-size: var(--eh-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--eh-wine);
}

.eh-search__all:hover {
	color: var(--eh-gold-deep);
}

/* Mobile drawer */
.eh-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(88vw, 400px);
	z-index: var(--eh-z-drawer);
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.4s var(--eh-ease-out);
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 48px rgba(27, 23, 20, 0.18);
	visibility: hidden;
}

.eh-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

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

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

.eh-drawer__foot {
	flex: none;
	padding: var(--eh-sp-4) var(--eh-sp-5);
	border-top: 1px solid var(--eh-line-soft);
	background: var(--eh-cream);
}

.eh-drawer nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-drawer nav li {
	margin: 0;
	border-bottom: 1px solid var(--eh-line-soft);
}

.eh-drawer nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.95em 0;
	font-size: var(--eh-fs-md);
	color: var(--eh-ink);
}

.eh-drawer nav a:hover {
	color: var(--eh-wine);
}

.eh-drawer .sub-menu {
	display: none;
	padding: 0 0 0.6rem 0.9rem;
	list-style: none;
	margin: 0;
	border-left: 1px solid var(--eh-line);
}

.eh-drawer .sub-menu.is-open {
	display: block;
}

.eh-drawer .sub-menu a {
	padding: 0.5em 0;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	border: 0;
}

.eh-drawer .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--eh-muted);
	border-bottom: 1px solid var(--eh-muted);
	transform: rotate(45deg);
	transition: transform var(--eh-dur) var(--eh-ease);
	flex: none;
	margin-left: 0.6em;
}

.eh-drawer .menu-item-has-children.is-open > a::after {
	transform: rotate(-135deg);
}

.eh-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27, 23, 20, 0.5);
	z-index: calc(var(--eh-z-drawer) - 1);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--eh-dur) var(--eh-ease), visibility var(--eh-dur);
}

.eh-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.eh-drawer__contact {
	margin-top: var(--eh-sp-5);
	padding-top: var(--eh-sp-5);
	border-top: 1px solid var(--eh-line);
	display: grid;
	gap: 0.7rem;
	font-size: var(--eh-fs-sm);
}

.eh-drawer__contact a,
.eh-drawer__contact span {
	display: flex;
	align-items: center;
	gap: 0.6em;
	color: var(--eh-ink-2);
}

.eh-drawer__contact svg {
	width: 15px;
	height: 15px;
	color: var(--eh-gold-deep);
	flex: none;
}
/* ==========================================================================
   9. Hero
   ========================================================================== */

.eh-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(470px, 74vh, 760px);
	background: var(--eh-wine-dark);
	color: rgba(255, 255, 255, 0.86);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Plain hero: pure wine gradient, nothing else.
 *
 * This used to carry a gold radial highlight in the top-right corner. It was
 * meant as a soft lift, but the owner asked for a clean wine backdrop twice and
 * a "soft" glow is still a glow — it reads as a smudge behind the headline and
 * it is not what "纯净" means. Only the wine ramp below belongs here.
 *
 * Do not add gradients, glows, rings or textures back. A site that wants
 * artwork behind the headline sets a hero image in the Customizer, which
 * switches to the .eh-hero__media branch and leaves this rule unused.
 */
.eh-hero--plain {
	background: linear-gradient(158deg, #5a0d1a 0%, var(--eh-wine) 46%, #3d0812 100%);
}

.eh-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.eh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.eh-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(46, 6, 12, 0.9) 0%, rgba(46, 6, 12, 0.72) 42%, rgba(46, 6, 12, 0.34) 100%);
}

.eh-hero--plain .eh-hero__scrim {
	display: none;
}

.eh-hero__inner {
	position: relative;
	padding-block: clamp(3rem, 8vw, 6rem);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	width: 100%;
}

.eh-hero__content {
	max-width: 42rem;
}

.eh-hero .eh-eyebrow {
	color: var(--eh-gold-light);
}

.eh-hero .eh-eyebrow::before {
	background: var(--eh-gold-light);
}

.eh-hero__title {
	color: #fff;
	font-size: var(--eh-fs-4xl);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.02em;
	margin: 0 0 0.55em;
	max-width: 20ch;
}

.eh-hero__title em {
	font-style: italic;
	color: var(--eh-gold-light);
}

.eh-hero__text {
	font-size: var(--eh-fs-lg);
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.8);
	max-width: 52ch;
	margin-bottom: var(--eh-sp-6);
}

.eh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	align-items: center;
}

.eh-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.eh-stat__num {
	display: block;
	font-family: var(--eh-font-display);
	font-size: clamp(1.75rem, 2.6vw, 2.6rem);
	font-weight: 600;
	line-height: 1;
	color: var(--eh-gold-light);
	letter-spacing: -0.01em;

	/*
	 * Lining, tabular figures.
	 *
	 * Cormorant Garamond defaults to OLD-STYLE numerals: 1 and 2 sit x-height,
	 * 9 and 0 descend, and every glyph has its own width. Set side by side, "19",
	 * "2,000+" and "40+" each start at a different height and the row reads as
	 * crooked even though the boxes are perfectly aligned — which is exactly what
	 * the owner reported as "扭曲的，看上去不整齐".
	 *
	 * lining-nums puts every digit on the same baseline and cap height;
	 * tabular-nums gives them one width so the comma and the plus stop shifting
	 * the row. Do not remove either keyword: they are the fix.
	 */
	font-variant-numeric: lining-nums tabular-nums;
}

/* Each stat keeps its own width so the numbers align on a baseline grid even
   when the labels wrap to two lines. */
.eh-stat {
	min-width: 8rem;
}

.eh-stat__label {
	display: block;
	margin-top: 0.45em;
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.eh-hero__aside {
	display: grid;
	gap: var(--eh-sp-4);
	align-content: end;
}

.eh-hero-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
}

.eh-hero-card__title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-xl);
	color: #fff;
	margin: 0 0 0.35em;
}

.eh-hero-card__text {
	font-size: var(--eh-fs-sm);
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1.1em;
}

.eh-hero-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--eh-fs-sm);
	color: rgba(255, 255, 255, 0.8);
}

.eh-hero-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0;
}

.eh-hero-card__list svg {
	width: 15px;
	height: 15px;
	color: var(--eh-gold-light);
	flex: none;
	margin-top: 4px;
}

.eh-banner {
	position: relative;
	background: linear-gradient(120deg, var(--eh-wine-dark) 0%, var(--eh-wine) 100%);
	color: rgba(255, 255, 255, 0.82);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	overflow: hidden;
}

.eh-banner--image {
	background-size: cover;
	background-position: center;
}

.eh-banner--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(46, 6, 12, 0.9), rgba(46, 6, 12, 0.55));
}

.eh-banner__inner {
	position: relative;
	max-width: 60rem;
}

.eh-banner h1 {
	color: #fff;
	margin-bottom: 0.3em;
	font-size: var(--eh-fs-3xl);
}

.eh-banner p {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--eh-fs-lg);
	max-width: 56ch;
	margin: 0;
}

.eh-breadcrumb {
	margin-bottom: var(--eh-sp-4);
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
}

.eh-breadcrumb a {
	color: rgba(255, 255, 255, 0.76);
}

.eh-breadcrumb a:hover {
	color: var(--eh-gold-light);
}

.eh-breadcrumb__sep {
	margin-inline: 0.5em;
	opacity: 0.5;
}

/* ==========================================================================
   10. Collection cards
   ========================================================================== */

.eh-collection-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--eh-cream-2);
	color: #fff;
	isolation: isolate;
}

.eh-collection-card__media {
	position: relative;
	display: block;
	/*
	 * Square, because the source is square.
	 *
	 * The card asked for 4/5 while the collection image is a 720x720
	 * square, so object-fit:cover had to cut about 20% off the sides and
	 * the jewellery looked clipped. Matching the ratio to the file means
	 * nothing is cropped.
	 */
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.eh-collection-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--eh-ease-out);
}

.eh-collection-card:hover .eh-collection-card__media img {
	transform: scale(1.055);
}

.eh-collection-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 8, 12, 0.82) 0%, rgba(30, 8, 12, 0.32) 42%, rgba(30, 8, 12, 0.06) 100%);
	transition: background var(--eh-dur) var(--eh-ease);
}

.eh-collection-card:hover .eh-collection-card__scrim {
	background: linear-gradient(to top, rgba(30, 8, 12, 0.88) 0%, rgba(30, 8, 12, 0.42) 48%, rgba(30, 8, 12, 0.12) 100%);
}

.eh-collection-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.1rem, 2vw, 1.7rem);
	z-index: 2;
}

.eh-collection-card__title {
	display: block;
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-xl);
	color: #fff;
	margin: 0 0 0.25em;
	line-height: 1.2;
}

.eh-collection-card__text {
	display: -webkit-box;
	font-size: var(--eh-fs-sm);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.eh-collection-card__count {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eh-gold-light);
}

.eh-collection-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.85em;
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--eh-dur) var(--eh-ease), transform var(--eh-dur) var(--eh-ease-out);
}

.eh-collection-card:hover .eh-collection-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.eh-collection-card__cta svg {
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   11. Product card
   ========================================================================== */

.eh-products {
	display: grid;
	gap: clamp(1.1rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.6rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eh-products--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--eh-line-soft);
	transition: border-color var(--eh-dur) var(--eh-ease), box-shadow var(--eh-dur) var(--eh-ease), transform var(--eh-dur) var(--eh-ease);
}

.eh-card:hover {
	border-color: var(--eh-sand);
	box-shadow: var(--eh-shadow);
	transform: translateY(-3px);
}

.eh-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--eh-cream);
}

.eh-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s var(--eh-ease-out);
}

.eh-card:hover .eh-card__media img {
	transform: scale(1.05);
}

.eh-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--eh-sand);
}

.eh-card__placeholder svg {
	width: 42%;
	height: auto;
	max-width: 96px;
}

.eh-card__badges {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: flex-start;
}

.eh-badge {
	display: inline-block;
	padding: 0.32em 0.7em;
	/* #fff on #7a1220 was 2.6:1; the deep wine reaches 10:1. */
	background: var(--eh-wine-deep);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}

.eh-badge--gold {
	background: var(--eh-gold);
	/* White on the gold was 1.5:1 at 10px; the ink colour is 5.9:1. */
	color: #2a2418;
}

.eh-badge--dark {
	background: rgba(27, 23, 20, 0.74);
}

.eh-badge--light {
	background: #fff;
	color: var(--eh-wine);
}

/*
 * Positioning context for the hover controls.
 *
 * The quick bar anchors to this box, which is exactly the image — not the whole
 * card. Without it the bar covered the price and the MOQ line, which are the
 * two things a buyer reads while comparing products.
 */
.eh-card__top {
	position: relative;
}

.eh-card__quick {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 1px;
	transform: translateY(101%);
	transition: transform 0.36s var(--eh-ease-out);
}

.eh-card:hover .eh-card__quick,
.eh-card:focus-within .eh-card__quick {
	transform: translateY(0);
}

.eh-card__quick a,
.eh-card__quick button {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0.85em 0.5em;
	border: 0;
	background: rgba(27, 23, 20, 0.9);
	color: #fff;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--eh-dur-fast) var(--eh-ease);
}

.eh-card__quick a:hover,
.eh-card__quick button:hover {
	background: var(--eh-wine);
	color: #fff;
}

.eh-card__quick svg {
	width: 14px;
	height: 14px;
}

.eh-card__body {
	padding: 1.05rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-align: center;
}

.eh-card__cat {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eh-gold-deep);
	margin-bottom: 0.5em;
}

.eh-card__title {
	font-family: var(--eh-font-display);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.28;
	margin: 0 0 0.35em;
	letter-spacing: 0;
}

.eh-card__title a {
	color: var(--eh-ink);
}

.eh-card__title a:hover {
	color: var(--eh-wine);
}

.eh-card__sku {
	font-family: var(--eh-font-num);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--eh-muted);
}

.eh-card__meta {
	margin-top: 0.55em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-ink-3);
}

.eh-card__foot {
	margin-top: auto;
	padding-top: 0.85rem;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.6em;
	flex-wrap: wrap;
}

/* ==========================================================================
   12. Price display and tier table
   ========================================================================== */

.eh-price {
	font-family: var(--eh-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--eh-wine);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.eh-price--range {
	font-size: 1rem;
}

.eh-price--request {
	font-size: var(--eh-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eh-ink-3);
}

.eh-price__cur {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--eh-muted);
	margin-left: 0.35em;
}

.eh-price__label {
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eh-price__note {
	display: block;
	margin-top: 0.35em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

/* Sub-parts emitted by Enhong_Core_Price. They inherit the .eh-price colour and
   weight; these rules only handle spacing and the "From" prefix. */
.eh-price__min,
.eh-price__max,
.eh-price__amount {
	font: inherit;
	color: inherit;
}

.eh-price__sep {
	margin-inline: 0.25em;
	opacity: 0.65;
}

.eh-price__from {
	margin-right: 0.3em;
	font-size: var(--eh-fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eh-muted);
}

.eh-price__suffix {
	margin-left: 0.3em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

.eh-tiers__note {
	margin-top: 0.5rem;
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

.eh-price-block {
	margin: var(--eh-sp-5) 0;
	padding: var(--eh-sp-4) var(--eh-sp-5);
	background: var(--eh-cream);
	border-left: 2px solid var(--eh-gold);
}

.eh-price-block .eh-price {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-family: var(--eh-font-display);
	font-weight: 600;
}

.eh-tiers {
	margin: var(--eh-sp-4) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border: 1px solid var(--eh-line);
}

.eh-tiers__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-4);
	padding: 0.6em 0.9em;
	font-size: var(--eh-fs-sm);
}

.eh-tiers__row + .eh-tiers__row {
	border-top: 1px solid var(--eh-line-soft);
}

.eh-tiers__row:nth-child(odd) {
	background: var(--eh-cream);
}

.eh-tiers__qty {
	color: var(--eh-ink-3);
}

.eh-tiers__price {
	font-weight: 600;
	color: var(--eh-wine);
	font-family: var(--eh-font-num);
	font-size: var(--eh-fs-sm);
}


/* ==========================================================================
   13. Feature grid ("why buyers work with us")
   ========================================================================== */

.eh-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--eh-line);
	border: 1px solid var(--eh-line);
}

.eh-feature {
	background: #fff;
	padding: clamp(1.5rem, 2.6vw, 2.4rem);
	transition: background var(--eh-dur) var(--eh-ease);
}

.eh-feature:hover {
	background: var(--eh-cream);
}

.eh-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--eh-sp-4);
	border: 1px solid var(--eh-gold-light);
	color: var(--eh-gold-deep);
	background: var(--eh-gold-tint);
}

.eh-feature__icon svg {
	width: 22px;
	height: 22px;
}

.eh-feature__title {
	font-size: var(--eh-fs-lg);
	font-family: var(--eh-font-display);
	font-weight: 600;
	margin: 0 0 0.4em;
}

.eh-feature__text {
	margin: 0;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	line-height: 1.75;
}

/* ==========================================================================
   14. Process steps
   ========================================================================== */

.eh-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	counter-reset: eh-step;
}

.eh-step {
	position: relative;
	padding-top: var(--eh-sp-5);
	border-top: 1px solid var(--eh-line);
	counter-increment: eh-step;
}

.eh-step::before {
	content: counter(eh-step, decimal-leading-zero);
	position: absolute;
	top: -0.85em;
	left: 0;
	padding-right: 0.7em;
	background: var(--eh-white);
	font-family: var(--eh-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--eh-gold);

}

.eh-section--cream .eh-step::before {
	background: var(--eh-cream);
}

.eh-section--cream-2 .eh-step::before {
	background: var(--eh-cream-2);
}

.eh-step__title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	font-weight: 600;
	margin: 0.35em 0 0.35em;
}

.eh-step__text {
	margin: 0;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	line-height: 1.72;
}

/* ==========================================================================
   15. Materials strip
   ========================================================================== */

.eh-materials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-materials li {
	margin: 0;
}

.eh-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 1.05em;
	border: 1px solid var(--eh-line);
	background: #fff;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-2);
	letter-spacing: 0.02em;
	transition: border-color var(--eh-dur-fast) var(--eh-ease), color var(--eh-dur-fast) var(--eh-ease), background var(--eh-dur-fast) var(--eh-ease);
}

.eh-chip:hover {
	border-color: var(--eh-gold);
	background: var(--eh-gold-tint);
	color: var(--eh-wine);
}

.eh-chip--active {
	border-color: var(--eh-wine);
	background: var(--eh-wine);
	color: #fff;
}

.eh-chip--active:hover {
	background: var(--eh-wine-deep);
	color: #fff;
}

.eh-chip__count {
	font-size: 0.625rem;
	color: var(--eh-muted);
}

.eh-chip--active .eh-chip__count {
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   16. Split intro block (about / custom)
   ========================================================================== */

.eh-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.eh-split--reverse .eh-split__media {
	order: 2;

	/* Load-bearing: The .eh-split__badge (the gold "19" panel) is absolutely positioned inside it. Without a positioned ancestor it anchors
	   to whatever else happens to be positioned and drifts out of the card. */
	position: relative;}

.eh-split__media {
	position: relative;
}

.eh-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eh-split__media--portrait img {
	aspect-ratio: 3 / 4;
}

.eh-split__frame {
	position: absolute;
	inset: 0;
	border: 1px solid var(--eh-gold-light);
	transform: translate(14px, 14px);
	z-index: -1;
	pointer-events: none;
}

.eh-split__badge {
	position: absolute;
	right: -1px;
	bottom: -1px;
	background: var(--eh-wine);
	color: #fff;
	padding: 1.1rem 1.4rem;
	text-align: center;
	min-width: 128px;
}

.eh-split__badge strong {
	display: block;
	font-family: var(--eh-font-display);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--eh-gold-light);
}

.eh-split__badge span {
	display: block;
	margin-top: 0.4em;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.74);
}

.eh-split__body h2 {
	margin-bottom: 0.5em;
}

.eh-split__body p {
	color: var(--eh-ink-3);
	font-size: var(--eh-fs-md);
}

.eh-checklist {
	list-style: none;
	margin: var(--eh-sp-5) 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.eh-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	margin: 0;
	font-size: var(--eh-fs-md);
	color: var(--eh-ink-2);
}

.eh-checklist svg {
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 5px;
	color: var(--eh-gold-deep);
}

/* ==========================================================================
   17. Call to action band
   ========================================================================== */

.eh-cta {
	position: relative;
	background: linear-gradient(115deg, var(--eh-wine-dark) 0%, var(--eh-wine) 62%, #93202f 100%);
	color: rgba(255, 255, 255, 0.84);
	overflow: hidden;
}

.eh-cta::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -10%;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(191, 156, 78, 0.2) 0%, rgba(191, 156, 78, 0) 62%);
	pointer-events: none;
}

.eh-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	/*
	 * The action column sizes to its buttons.
	 *
	 * It used to be a 0.65fr share, which came out at 385px. The English pair
	 * needs 384.2px — eight tenths of a pixel of slack — so at any slightly
	 * different width or zoom the two buttons wrapped onto separate lines while
	 * the Chinese pair, 49px narrower, stayed inline. The same design therefore
	 * looked different per language. Letting the column take its content width
	 * removes the coin-flip; the text column simply keeps the remainder.
	 */
	grid-template-columns: minmax(0, 1fr) max-content;
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.eh-cta h2 {
	color: #fff;
	font-size: var(--eh-fs-2xl);
	margin-bottom: 0.4em;
}

.eh-cta p {
	color: rgba(255, 255, 255, 0.76);
	margin: 0;
	max-width: 54ch;
}

.eh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	justify-content: flex-end;
}

/* ==========================================================================
   18. News / blog cards
   ========================================================================== */

.eh-news {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.eh-news-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--eh-line-soft);
	transition: border-color var(--eh-dur) var(--eh-ease), box-shadow var(--eh-dur) var(--eh-ease), transform var(--eh-dur) var(--eh-ease);
}

.eh-news-card:hover {
	border-color: var(--eh-sand);
	box-shadow: var(--eh-shadow);
	transform: translateY(-3px);
}

.eh-news-card__media {
	display: block;

	/*
	 * position: relative is load-bearing.
	 *
	 * .eh-card__placeholder is absolutely positioned with inset: 0, so it needs a
	 * positioned ancestor. Without this the placeholder escaped the card entirely
	 * and anchored to whatever ancestor happened to be positioned — which is why
	 * the decorative cube appeared to float over the section on a phone instead of
	 * sitting inside the empty thumbnail.
	 */
	position: relative;

	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--eh-cream);
}

.eh-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s var(--eh-ease-out);
}

.eh-news-card:hover .eh-news-card__media img {
	transform: scale(1.05);
}

.eh-news-card__body {
	padding: 1.25rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.eh-news-card__meta {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.6em;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eh-gold-deep);
}

.eh-news-card__meta time {
	color: var(--eh-muted);
}

.eh-news-card__title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

.eh-news-card__title a {
	color: var(--eh-ink);
}

.eh-news-card__title a:hover {
	color: var(--eh-wine);
}

.eh-news-card__excerpt {
	margin: 0 0 1rem;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	line-height: 1.72;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.eh-news-card__foot {
	margin-top: auto;
}

/* ==========================================================================
   19. Testimonials
   ========================================================================== */

.eh-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.eh-quote {
	background: #fff;
	border: 1px solid var(--eh-line-soft);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	display: flex;
	flex-direction: column;
}

.eh-quote__mark {
	font-family: var(--eh-font-display);
	font-size: 3rem;
	line-height: 0.7;
	color: var(--eh-gold-light);
	margin-bottom: 0.5rem;
}

.eh-quote__text {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	font-style: italic;
	line-height: 1.6;
	color: var(--eh-ink-2);
	margin: 0 0 1.25rem;
}

.eh-quote__author {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--eh-line-soft);
	font-size: var(--eh-fs-sm);
}

.eh-quote__author strong {
	display: block;
	color: var(--eh-ink);
}

.eh-quote__author span {
	color: var(--eh-muted);
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eh-quote__stars {
	color: var(--eh-gold);
	letter-spacing: 0.15em;
	margin-bottom: 0.6rem;
	font-size: var(--eh-fs-sm);
}


/* ==========================================================================
   20. Catalogue toolbar, filters and pagination
   ========================================================================== */

.eh-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-4);
	flex-wrap: wrap;
	padding-bottom: var(--eh-sp-4);
	margin-bottom: var(--eh-sp-6);
	border-bottom: 1px solid var(--eh-line);
}

.eh-toolbar__count {
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	margin: 0;
}

.eh-toolbar__count strong {
	color: var(--eh-ink);
}

.eh-toolbar__right {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.eh-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
}

.eh-sort select {
	width: auto;
	min-width: 190px;
	padding: 0.55em 2.4em 0.55em 0.85em;
	font-size: var(--eh-fs-sm);
}

.eh-filter-toggle {
	display: none;
}

.eh-layout {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
	align-items: start;
}

.eh-filters {
	position: sticky;
	top: calc(var(--eh-header-h) + 20px);
	align-self: start;
}

.eh-filter-group {
	border-bottom: 1px solid var(--eh-line);
	padding-bottom: var(--eh-sp-4);
	margin-bottom: var(--eh-sp-4);
}

.eh-filter-group:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.eh-filter-group__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0 0 0.85em;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eh-ink);
	text-align: left;
}

.eh-filter-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
	max-height: 320px;
	overflow-y: auto;
}

.eh-filter-group__list li {
	margin: 0;
}

.eh-filter-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	padding: 0.4em 0;
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-2);
	transition: color var(--eh-dur-fast) var(--eh-ease), padding var(--eh-dur-fast) var(--eh-ease);
}

.eh-filter-link:hover {
	color: var(--eh-wine);
	padding-left: 4px;
}

.eh-filter-link.is-active {
	color: var(--eh-wine);
	font-weight: 600;
}

.eh-filter-link.is-active::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--eh-gold);
	flex: none;
	margin-right: -0.2em;
}

.eh-filter-link__count {
	font-size: 0.6875rem;
	color: var(--eh-muted);
	font-family: var(--eh-font-num);
}

.eh-price-filter {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.eh-price-filter input {
	padding: 0.55em 0.7em;
	font-size: var(--eh-fs-sm);
	min-width: 0;
}

/* Pagination */
.eh-pagination {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	padding-top: var(--eh-sp-5);
	border-top: 1px solid var(--eh-line);
	display: flex;
	justify-content: center;
}

.eh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.6em;
	margin: 0 3px;
	border: 1px solid var(--eh-line);
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-2);
	transition: border-color var(--eh-dur-fast) var(--eh-ease), background var(--eh-dur-fast) var(--eh-ease), color var(--eh-dur-fast) var(--eh-ease);
}

.eh-pagination .page-numbers:hover {
	border-color: var(--eh-gold);
	color: var(--eh-wine);
}

.eh-pagination .page-numbers.current {
	background: var(--eh-wine);
	border-color: var(--eh-wine);
	color: #fff;
}

.eh-pagination .page-numbers.dots {
	border-color: transparent;
}

.eh-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-pagination ul li {
	margin: 0;
}

/* ==========================================================================
   21. Single product
   ========================================================================== */

.eh-product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
}

.eh-gallery {
	position: sticky;
	top: calc(var(--eh-header-h) + 20px);
}

.eh-gallery__main {
	position: relative;
	background: var(--eh-cream);
	border: 1px solid var(--eh-line-soft);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.eh-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eh-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 0.7rem;
}

.eh-gallery__thumb {
	position: relative;
	padding: 0;
	border: 1px solid var(--eh-line);
	background: var(--eh-cream);
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	transition: border-color var(--eh-dur-fast) var(--eh-ease);
}

.eh-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.72;
	transition: opacity var(--eh-dur-fast) var(--eh-ease);
}

.eh-gallery__thumb:hover img,
.eh-gallery__thumb.is-active img {
	opacity: 1;
}

.eh-gallery__thumb.is-active {
	border-color: var(--eh-wine);
}

.eh-gallery__zoom {
	position: absolute;
	right: 0.7rem;
	bottom: 0.7rem;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--eh-line);
	color: var(--eh-ink-2);
	cursor: pointer;
}

.eh-gallery__zoom:hover {
	background: #fff;
	color: var(--eh-wine);
}

.eh-gallery__zoom svg {
	width: 17px;
	height: 17px;
}

.eh-product__head {
	padding-bottom: var(--eh-sp-4);
	border-bottom: 1px solid var(--eh-line);
	margin-bottom: var(--eh-sp-4);
}

/* Right-hand column of the product grid. min-width:0 stops a long unbroken word
   in the spec table from forcing the grid wider than its track. */
.eh-product__info {
	min-width: 0;
}

.eh-product__cat {
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eh-gold-deep);
	margin-bottom: 0.6em;
}

.eh-product__title {
	font-size: var(--eh-fs-2xl);
	margin: 0 0 0.4em;
	line-height: 1.18;
}

.eh-product__sku {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--eh-font-num);
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
}

.eh-product__sku button {
	background: none;
	border: 0;
	padding: 2px;
	color: var(--eh-muted);
	cursor: pointer;
	line-height: 1;
}

.eh-product__sku button:hover {
	color: var(--eh-wine);
}

.eh-product__sku svg {
	width: 14px;
	height: 14px;
}

.eh-product__excerpt {
	color: var(--eh-ink-3);
	font-size: var(--eh-fs-md);
	margin-bottom: var(--eh-sp-5);
}

.eh-product__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--eh-sp-5);
	list-style: none;
	padding: 0;
}

.eh-product__flags li {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.04em;
	color: var(--eh-ink-2);
	background: var(--eh-cream);
	border: 1px solid var(--eh-line-soft);
	padding: 0.42em 0.8em;
}

.eh-product__flags svg {
	width: 14px;
	height: 14px;
	color: var(--eh-gold-deep);
}

.eh-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: var(--eh-sp-5) 0;
}

.eh-product__actions .eh-btn {
	flex: 1 1 auto;
	min-width: 168px;
}

/* Spec table */
.eh-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: var(--eh-fs-sm);
}

.eh-specs th,
.eh-specs td {
	padding: 0.7em 0;
	border-bottom: 1px solid var(--eh-line-soft);
	text-align: left;
	vertical-align: top;
	background: none;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--eh-fs-sm);
}

.eh-specs th {
	width: 38%;
	font-weight: 400;
	color: var(--eh-muted);
	white-space: nowrap;
	padding-right: var(--eh-sp-4);
}

.eh-specs th svg {
	width: 14px;
	height: 14px;
	margin-right: 0.5em;
	vertical-align: -2px;
	color: var(--eh-gold-deep);
	opacity: 0.9;
}

.eh-specs td {
	color: var(--eh-ink);
	font-weight: 500;
}

.eh-specs tr:last-child th,
.eh-specs tr:last-child td {
	border-bottom: 0;
}

.eh-product__accordion {
	margin-top: var(--eh-sp-6);
	border-top: 1px solid var(--eh-line);
}

.eh-acc {
	border-bottom: 1px solid var(--eh-line);
}

.eh-acc__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-4);
	width: 100%;
	padding: 1.05em 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	font-weight: 600;
	color: var(--eh-ink);
	text-align: left;
}

.eh-acc__btn:hover {
	color: var(--eh-wine);
}

.eh-acc__btn svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--eh-gold-deep);
	transition: transform var(--eh-dur) var(--eh-ease);
}

.eh-acc.is-open .eh-acc__btn svg {
	transform: rotate(45deg);
}

.eh-acc__panel {
	display: none;
	padding-bottom: var(--eh-sp-5);
}

.eh-acc.is-open .eh-acc__panel {
	display: block;
}

.eh-acc__panel > *:last-child {
	margin-bottom: 0;
}

.eh-related {
	margin-top: clamp(3rem, 6vw, 5.5rem);
	padding-top: clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--eh-line);
}

/* Inquiry panel anchored on the product page */
.eh-inquiry-panel {
	margin-top: var(--eh-sp-5);
	padding: clamp(1.25rem, 2.4vw, 1.9rem);
	background: var(--eh-cream);
	border: 1px solid var(--eh-line);
}

.eh-inquiry-form {
	display: block;
}

/* Compact variant used inside the product page panel: single column, so the
   form does not fight the narrow sidebar width. */
.eh-inquiry-panel .eh-form-grid {
	grid-template-columns: minmax(0, 1fr);
}

.eh-inquiry-panel__title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	margin: 0 0 0.25em;
}

.eh-inquiry-panel__note {
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-3);
	margin: 0 0 var(--eh-sp-4);
}

.eh-notice {
	padding: 0.9em 1.1em;
	border-left: 2px solid var(--eh-success);
	background: #f2f8f4;
	font-size: var(--eh-fs-sm);
	color: #1f5c3c;
	margin-bottom: var(--eh-sp-4);
}

.eh-notice--error {
	border-left-color: var(--eh-danger);
	background: #fdf3f2;
	color: #7d211a;
}


/* ==========================================================================
   22. Entry content (blog, single, pages)
   ========================================================================== */

.eh-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.eh-content--full {
	grid-template-columns: minmax(0, 1fr);
}

.eh-content--narrow {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--eh-container-narrow);
	margin-inline: auto;
}

.eh-entry {
	min-width: 0;
}

.eh-entry__header {
	margin-bottom: var(--eh-sp-6);
}

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

.eh-entry__meta a {
	color: var(--eh-gold-deep);
}

.eh-entry__meta a:hover {
	color: var(--eh-wine);
}

.eh-entry__title {
	margin: 0 0 0.35em;
}

.eh-entry__thumb {
	margin-bottom: var(--eh-sp-6);

	/* Load-bearing: Its overlay chips are absolutely positioned. Without a positioned ancestor it anchors
	   to whatever else happens to be positioned and drifts out of the card. */
	position: relative;}

.eh-entry__thumb img {
	width: 100%;
	border-radius: var(--eh-radius);
}

.eh-prose {
	font-size: var(--eh-fs-md);
	color: var(--eh-ink-2);
	line-height: 1.82;
}

.eh-prose > *:first-child {
	margin-top: 0;
}

.eh-prose h2,
.eh-prose h3,
.eh-prose h4 {
	margin-top: 1.8em;
	margin-bottom: 0.55em;
	color: var(--eh-ink);
}

.eh-prose h2 {
	font-size: var(--eh-fs-2xl);
}

.eh-prose h3 {
	font-size: var(--eh-fs-xl);
}

.eh-prose a {
	color: var(--eh-wine);
	text-decoration: underline;
	text-decoration-color: var(--eh-gold-light);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.eh-prose a:hover {
	text-decoration-color: var(--eh-wine);
}

.eh-prose img {
	border-radius: var(--eh-radius);
	margin: var(--eh-sp-5) 0;
}

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

.eh-prose li {
	margin-bottom: 0.55em;
}

.eh-prose blockquote {
	margin: var(--eh-sp-6) 0;
}

.eh-prose figure {
	margin: var(--eh-sp-6) 0;
}

.eh-prose figcaption {
	margin-top: 0.6em;
	font-size: var(--eh-fs-sm);
	color: var(--eh-muted);
	text-align: center;
}

.eh-prose .wp-block-quote,
.eh-prose .wp-block-pullquote {
	border-left: 2px solid var(--eh-gold);
}

.eh-prose .alignwide {
	margin-inline: calc(-1 * var(--eh-sp-6));
	max-width: none;
}

.eh-prose .alignfull {
	margin-inline: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.eh-prose .alignleft {
	float: left;
	margin: 0 var(--eh-sp-5) var(--eh-sp-4) 0;
}

.eh-prose .alignright {
	float: right;
	margin: 0 0 var(--eh-sp-4) var(--eh-sp-5);
}

.eh-prose .aligncenter {
	margin-inline: auto;
	display: block;
}

.eh-prose .wp-caption,
.eh-prose .wp-caption-text {
	font-size: var(--eh-fs-sm);
	color: var(--eh-muted);
}

.eh-entry__footer {
	margin-top: var(--eh-sp-7);
	padding-top: var(--eh-sp-5);
	border-top: 1px solid var(--eh-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eh-sp-4);
}

.eh-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-tags li {
	margin: 0;
}

.eh-tags a {
	display: inline-block;
	padding: 0.3em 0.75em;
	border: 1px solid var(--eh-line);
	font-size: var(--eh-fs-xs);
	color: var(--eh-ink-3);
	letter-spacing: 0.04em;
}

.eh-tags a:hover {
	border-color: var(--eh-gold);
	color: var(--eh-wine);
	background: var(--eh-gold-tint);
}

.eh-share {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eh-muted);
}

.eh-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--eh-line);
	color: var(--eh-ink-3);
}

.eh-share a:hover {
	border-color: var(--eh-gold);
	color: var(--eh-wine);
	background: var(--eh-gold-tint);
}

.eh-share svg {
	width: 15px;
	height: 15px;
}

/* Post navigation */
.eh-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--eh-line);
	border: 1px solid var(--eh-line);
	margin-top: var(--eh-sp-7);
}

.eh-postnav a {
	background: #fff;
	padding: 1.2rem 1.35rem;
	display: block;
	transition: background var(--eh-dur-fast) var(--eh-ease);
}

.eh-postnav a:hover {
	background: var(--eh-cream);
}

.eh-postnav__label {
	display: block;
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eh-muted);
	margin-bottom: 0.4em;
}

.eh-postnav__item {
	display: block;
	min-width: 0;
}

.eh-postnav__title {
	display: block;
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	color: var(--eh-ink);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eh-postnav__item--next {
	text-align: right;
}

/* ==========================================================================
   23. Sidebar and widgets
   ========================================================================== */

.eh-sidebar {
	position: sticky;
	top: calc(var(--eh-header-h) + 20px);
	display: grid;
	gap: var(--eh-sp-5);
}

.eh-widget {
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--eh-line);
	background: #fff;
}

.eh-widget__title {
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eh-ink);
	margin: 0 0 1em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--eh-line-soft);
}

.eh-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-widget li {
	margin: 0 0 0.55em;
	font-size: var(--eh-fs-sm);
}

.eh-widget li:last-child {
	margin-bottom: 0;
}

.eh-widget a {
	color: var(--eh-ink-2);
}

.eh-widget a:hover {
	color: var(--eh-wine);
}

.eh-widget select,
.eh-widget input[type="search"],
.eh-widget input[type="text"] {
	font-size: var(--eh-fs-sm);
	padding: 0.6em 0.8em;
}

.eh-widget__post {
	display: flex;
	gap: 0.85rem;
	margin-bottom: 0.9rem;
}

.eh-widget__post:last-child {
	margin-bottom: 0;
}

.eh-widget__post img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	flex: none;
}

.eh-widget__post-title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-base);
	line-height: 1.35;
	margin: 0 0 0.2em;
}

.eh-widget__post time {
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

.eh-widget--cta {
	background: var(--eh-wine);
	border-color: var(--eh-wine);
	color: rgba(255, 255, 255, 0.8);
}

.eh-widget--cta .eh-widget__title {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

.eh-widget--cta p {
	font-size: var(--eh-fs-sm);
	color: rgba(255, 255, 255, 0.76);
}

/* ==========================================================================
   24. Comments
   ========================================================================== */

.eh-comments {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--eh-line);
}

.eh-comments__title,
.eh-comment-reply-title {
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-xl);
	margin: 0 0 1.25em;
}

.eh-comment-list {
	list-style: none;
	margin: 0 0 var(--eh-sp-6);
	padding: 0;
}

.eh-comment-list .children {
	list-style: none;
	margin: var(--eh-sp-4) 0 0;
	padding-left: clamp(1rem, 3vw, 2.5rem);
	border-left: 1px solid var(--eh-line);
}

.eh-comment {
	margin-bottom: var(--eh-sp-5);
}

.eh-comment__body {
	padding: 1.15rem 1.3rem;
	background: var(--eh-cream);
	border: 1px solid var(--eh-line-soft);
}

.eh-comment__meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.6em;
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
}

.eh-comment__meta img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.eh-comment__author {
	font-weight: 600;
	color: var(--eh-ink);
	font-size: var(--eh-fs-sm);
}

.eh-comment__content {
	font-size: var(--eh-fs-sm);
	color: var(--eh-ink-2);
}

.eh-comment__content > *:last-child {
	margin-bottom: 0;
}

.eh-comment__actions {
	margin-top: 0.6em;
	font-size: var(--eh-fs-xs);
}

.eh-comment__actions a {
	color: var(--eh-gold-deep);
}

.eh-comment-respond {
	margin-top: var(--eh-sp-6);
}

.comment-form {
	display: grid;
	gap: var(--eh-sp-4);
}

.comment-form label {
	display: block;
	margin-bottom: 0.35em;
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eh-ink-2);
}

.comment-form p {
	margin: 0;
}

.comment-form .form-submit {
	margin: 0;
}

.comment-form-comment textarea {
	min-height: 150px;
}

.eh-password-form {
	max-width: 460px;
	display: grid;
	gap: var(--eh-sp-4);
}


/* ==========================================================================
   25. Contact page
   ========================================================================== */

.eh-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 4.5vw, 4.5rem);
	align-items: start;
}

.eh-contact__intro h2 {
	margin-bottom: 0.45em;
}

.eh-contact__intro p {
	color: var(--eh-ink-3);
	font-size: var(--eh-fs-md);
}

.eh-channels {
	display: grid;
	gap: 1px;
	background: var(--eh-line);
	border: 1px solid var(--eh-line);
	margin-top: var(--eh-sp-5);
}

.eh-channel {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: #fff;
	color: var(--eh-ink-2);
	transition: background var(--eh-dur-fast) var(--eh-ease);
}

.eh-channel:hover {
	background: var(--eh-cream);
	color: var(--eh-ink-2);
}

.eh-channel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--eh-gold-light);
	background: var(--eh-gold-tint);
	color: var(--eh-gold-deep);
}

.eh-channel__icon svg {
	width: 18px;
	height: 18px;
}

.eh-channel__label {
	display: block;
	font-size: var(--eh-fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--eh-muted);
	margin-bottom: 0.15em;
}

.eh-channel__value {
	display: block;
	font-size: var(--eh-fs-md);
	color: var(--eh-ink);
	font-weight: 500;
	word-break: break-word;
}

.eh-channel--whatsapp .eh-channel__icon {
	background: #e8faf0;
	border-color: #a9e8c6;
	color: #128c4a;
}

.eh-map {
	margin-top: var(--eh-sp-5);
	border: 1px solid var(--eh-line);
	background: var(--eh-cream);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

/* A map URL that cannot be framed becomes one button, not an empty box. */
.eh-map-link {
	margin-top: var(--eh-sp-5);
}

.eh-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.eh-form-card {
	background: #fff;
	border: 1px solid var(--eh-line);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--eh-shadow-sm);
}

.eh-form-card > h2,
.eh-form-card > h3 {
	margin-top: 0;
}

.eh-form-note {
	margin-top: var(--eh-sp-4);
	font-size: var(--eh-fs-xs);
	color: var(--eh-muted);
	line-height: 1.65;
}

/* ==========================================================================
   26. Footer
   ========================================================================== */

.eh-footer {
	background: var(--eh-wine-dark);
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--eh-fs-sm);
	margin-top: auto;
}

.eh-footer a {
	color: rgba(255, 255, 255, 0.76);
}

.eh-footer a:hover {
	color: var(--eh-gold-light);
}

.eh-footer__top {
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
	display: grid;
	/* Brand · contact details · QR codes. The old Products/Support link columns
	   were dropped: they duplicated the header nav and buried the part that
	   matters, which is how to actually reach a person. */
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

/* Used when there is no QR block to show: two columns, not three with a gap. */
.eh-footer__top--two {
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.eh-footer__brand .eh-brand {
	color: #fff;
	margin-bottom: 1.1rem;
}

.eh-footer__brand .eh-brand__name {
	color: #fff;
}

.eh-footer__brand .eh-brand__tag {
	color: rgba(255, 255, 255, 0.5);
}

.eh-footer__brand .eh-brand__mark {
	border-color: rgba(191, 156, 78, 0.55);
	color: var(--eh-gold-light);
}

.eh-footer__about {
	margin: 0 0 1.4rem;
	max-width: 42ch;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.66);
}

.eh-footer__col h3 {
	font-family: var(--eh-font-body);
	font-size: var(--eh-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 1.15em;
}

.eh-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.62rem;
}

.eh-footer__col li {
	margin: 0;
}

.eh-footer__contact {
	display: grid;
	gap: 0.85rem;
}

.eh-footer__contact > div {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	line-height: 1.6;
}

.eh-footer__contact svg {
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 4px;
	color: var(--eh-gold);
}


/*
 * Social channels.
 *
 * One row of pills: icon and platform name together, sized by their content.
 * They used to be 5.25rem squares with the label stacked under the icon, which
 * on a phone turned the footer into a wall of boxes and pushed the contact
 * details below the fold. A pill keeps the name — the name is why the row is
 * readable without recognising seven logos — and takes half the height.
 *
 * The platform name comes from the anchor's title attribute via ::after, so the
 * markup stays a plain link and nothing is hard-coded in the stylesheet.
 */
.eh-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-footer__social li {
	margin: 0;
}

.eh-footer__social a,
.eh-footer__social-placeholder {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	height: 3rem;
	padding: 0 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--eh-radius-pill, 999px);
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	line-height: 1;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.eh-footer__social a svg,
.eh-footer__social-placeholder svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.eh-footer__social a::after,
.eh-footer__social-placeholder::after {
	content: attr(title);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
}

/*
 * Equal-width social buttons.
 *
 * "X (Twitter)" is the longest label, so the others came out shorter and the
 * row looked ragged. Every button now takes the same width and centres its
 * content, which lines the icons up in a column.
 */
.eh-footer__social a,
.eh-footer__social-placeholder {
	min-width: 8.75rem;
	justify-content: center;
}

.eh-footer__social a:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--eh-gold);
	color: var(--eh-gold-light);
}

/*
 * Not-yet-configured state.
 *
 * Same geometry as a real pill, visibly inert, and only ever printed for a
 * signed-in admin (see footer.php) — a visitor must never be shown the setup
 * instructions for a site they are just browsing.
 */
.eh-footer__social-placeholder {
	/*
	 * Solid, not dashed.
	 *
	 * The dashes read as a wireframe —「像没做完的页面」 — and this row is visible to
	 * visitors before any address is filled in. A dimmer version of the real pill
	 * looks deliberate; the owner still sees which ones are not wired up because
	 * they do not react to hover.
	 */
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.42);
	cursor: default;
}

.eh-footer__social--empty {
	opacity: 0.9;
}

.eh-footer__social-hint {
	margin: 0.85rem 0 0;
	max-width: 22rem;
	font-size: var(--eh-fs-xs);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------------ *
 * Footer address banner
 * ------------------------------------------------------------------ */

.eh-footer__address {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
	padding: clamp(1rem, 2vw, 1.4rem) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.eh-footer__address-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	color: var(--eh-gold-light);
	background: rgba(191, 156, 78, 0.14);
	border: 1px solid rgba(191, 156, 78, 0.35);
	border-radius: var(--eh-radius-pill);
}

.eh-footer__address-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.eh-footer__address-label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* Deliberately large. This is the line a customer reads to decide whether they
   can visit, so it outranks the phone number and the opening hours. */
.eh-footer__address-value {
	font-family: var(--eh-font-display);
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--eh-cream);
	overflow-wrap: anywhere;
}


/* ------------------------------------------------------------------ *
 * Footer QR consultation block
 * ------------------------------------------------------------------ */

.eh-qr {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0.25rem;
}

.eh-qr__item {
	margin: 0;
	text-align: center;
	max-width: 148px;
}

.eh-qr__frame {
	display: block;
	padding: 7px;
	background: #fff;
	border-radius: var(--eh-radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.eh-qr__frame img {
	display: block;
	width: 132px;
	height: 132px;
	object-fit: contain;
	background: #fff;
}

.eh-qr__frame--hint {
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.28);
	box-shadow: none;
	color: var(--eh-gold-light);
}

.eh-qr__caption {
	margin: 0.55rem 0 0;
	font-size: var(--eh-fs-xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

.eh-qr--empty {
	display: block;
}

.eh-qr--empty .eh-btn {
	margin-top: 0.85rem;
}

/* Two stacked codes would make the column taller than the contact list, so on
   narrow screens they sit side by side and never wrap awkwardly. */
@media (max-width: 1180px) {
	.eh-qr {
		flex-wrap: nowrap;
	}
}


.eh-footer__subscribe input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

.eh-footer__subscribe input[type="email"]:focus {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--eh-gold);
	box-shadow: none;
}

.eh-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--eh-fs-xs);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.54);
}

.eh-footer__bottom p {
	margin: 0;
}

.eh-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-footer__bottom li {
	margin: 0;
}

.eh-footer__bottom a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.eh-footer__bottom a:hover {
	color: var(--eh-gold-light);
	border-bottom-color: currentColor;
}

/*
 * Accepted payment methods.
 *
 * These were outlined boxes, and a hairline rectangle under the copyright reads
 * as a disabled form field. A filled pill without a border reads as a label,
 * and the row sits on one baseline with the rest of the bottom bar.
 */
.eh-footer__pay {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-left: auto;
}

.eh-footer__pay span {
	display: inline-block;
	padding: 0.3em 0.66em;
	border-radius: var(--eh-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.055);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.62);
}

/* ==========================================================================
   28. Utilities
   ========================================================================== */

.eh-mt-0 {
	margin-top: 0 !important;
}

.eh-mb-0 {
	margin-bottom: 0 !important;
}

.eh-mt-4 {
	margin-top: var(--eh-sp-4) !important;
}

.eh-mt-5 {
	margin-top: var(--eh-sp-5) !important;
}

.eh-mt-6 {
	margin-top: var(--eh-sp-6) !important;
}

.eh-mb-4 {
	margin-bottom: var(--eh-sp-4) !important;
}

.eh-mb-5 {
	margin-bottom: var(--eh-sp-5) !important;
}

.eh-mb-6 {
	margin-bottom: var(--eh-sp-6) !important;
}

.eh-text-muted {
	color: var(--eh-muted);
}

.eh-text-wine {
	color: var(--eh-wine);
}

.eh-text-gold {
	color: var(--eh-gold-deep);
}

.eh-text-sm {
	font-size: var(--eh-fs-sm);
}

.eh-text-center {
	text-align: center;
}

.eh-nowrap {
	white-space: nowrap;
}

.eh-hidden {
	display: none !important;
}

.eh-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-block: var(--eh-sp-6);
	color: var(--eh-gold);
}

.eh-divider::before,
.eh-divider::after {
	content: "";
	height: 1px;
	width: min(120px, 20vw);
	background: linear-gradient(to right, transparent, var(--eh-gold-light), transparent);
}

.eh-divider svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Reveal-on-scroll (only when JS is available and motion is welcome) */
.eh-js .eh-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--eh-ease-out), transform 0.7s var(--eh-ease-out);
}

.eh-js .eh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Safety net for a main.js that never ran.
 *
 * The hiding above is keyed on html.eh-js, which the inline head script sets
 * unconditionally so there is no flash of visible-then-hidden content. The cost
 * of that choice is that a main.js failing to load or parse leaves every
 * .eh-reveal block at opacity 0 — permanently blank sections. The head script
 * therefore adds .eh-reveal-fallback after three seconds unless the reveal
 * code has reported itself ready, and this rule undoes the hiding.
 */
.eh-reveal-fallback .eh-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ==========================================================================
   29. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.eh-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.eh-nav ul {
		gap: 0.9rem;
	}

	.eh-nav a {
		font-size: 0.75rem;
	}

	.eh-footer__top {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	}

	.eh-footer__brand {
		grid-column: 1 / -1;
	}

	.eh-footer__col--qr {
		grid-column: 1 / -1;
	}

	.eh-qr {
		flex-wrap: wrap;
	}
}

@media (max-width: 1024px) {
	.eh-nav {
		display: none;
	}

	.eh-burger {
		display: inline-flex;
	}

	.eh-header__inner {
		min-height: 66px;
	}

	:root {
		--eh-header-h: 66px;
	}

	.eh-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-hero__aside {
		display: none;
	}

	.eh-hero {
		min-height: auto;
	}

	.eh-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-filters {
		position: static;
		display: none;
		padding: 1.25rem 1.35rem;
		border: 1px solid var(--eh-line);
		background: var(--eh-cream);
		margin-bottom: var(--eh-sp-5);
	}

	.eh-filters.is-open {
		display: block;
	}

	.eh-filter-toggle {
		display: inline-flex;
	}

	.eh-product {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-gallery {
		position: static;
	}

	.eh-content {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-sidebar {
		position: static;
	}

	.eh-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-cta__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-cta__actions {
		justify-content: flex-start;
	}

	.eh-materials-grid,
	.eh-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-split--reverse .eh-split__media {
		order: 0;
	}

	.eh-split__frame {
		display: none;
	}

	.eh-features,
	.eh-steps,
	.eh-news,
	.eh-quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eh-products--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	:root {
		--eh-topbar-h: 34px;
	}

	.eh-topbar__note,
	.eh-topbar__group--left .eh-topbar__hide-sm {
		display: none;
	}

	/* The header CTA is the first thing to go: the same button sits in the
	   drawer footer, and on a phone the brand mark needs the room. */
	.eh-header__quote {
		display: none;
	}

	/*
	 * Phone layout. The goal is density: a visitor scrolling on a phone should
	 * see roughly the same amount of content per screen as on a desktop, not one
	 * enormous card at a time. Two columns for the repeating blocks, tighter
	 * section padding, and the long horizontal strips become swipeable rows.
	 */
	:root {
		--eh-section-y: 2.75rem;
	}

	.eh-products,
	.eh-products--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 0.75rem;
	}

	.eh-card__body {
		padding: 0.85rem 0.75rem 1rem;
	}

	.eh-card__title {
		font-size: 1.0625rem;
	}

	.eh-card__quick {
		transform: none;
		position: static;
		margin-top: auto;
	}

	.eh-card__quick a,
	.eh-card__quick button {
		font-size: 0.625rem;
		padding: 0.7em 0.35em;
	}

	/* Repeating blocks: two across, like the desktop grid. */
	.eh-features,
	.eh-steps,
	.eh-news,
	.eh-quotes,
	.eh-grid--3,
	.eh-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eh-feature,
	.eh-quote {
		padding: 1.1rem 1rem;
	}

	.eh-feature__icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0.7rem;
	}

	.eh-feature__icon svg {
		width: 18px;
		height: 18px;
	}

	.eh-feature__title,
	.eh-step__title {
		font-size: 1rem;
	}

	.eh-feature__text,
	.eh-step__text {
		font-size: 0.8125rem;
		line-height: 1.65;
	}

	.eh-step {
		padding-top: 1.1rem;
	}

	.eh-step::before {
		font-size: 1.25rem;
	}

	.eh-quote__text {
		font-size: 0.9375rem;
	}

	.eh-news-card__body {
		padding: 0.9rem 0.9rem 1.1rem;
	}

	.eh-news-card__title {
		font-size: 1rem;
	}

	.eh-news-card__excerpt {
		display: none;
	}

	/* Collections and materials become horizontal swipe rows. */
	.eh-grid--collections {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 68%;
		grid-template-columns: none;
		gap: 0.75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.35rem;
	}

	.eh-grid--collections::-webkit-scrollbar {
		display: none;
	}

	.eh-grid--collections > * {
		scroll-snap-align: start;
	}

	.eh-collection-card__body {
		padding: 1rem;
	}

	.eh-collection-card__title {
		font-size: 1.05rem;
	}

	.eh-collection-card__text {
		display: none;
	}

	.eh-collection-card__cta {
		opacity: 1;
		transform: none;
		margin-top: 0.5rem;
	}

	.eh-materials {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.35rem;
	}

	.eh-materials::-webkit-scrollbar {
		display: none;
	}

	.eh-chip {
		white-space: nowrap;
		padding: 0.5em 0.85em;
		font-size: 0.8125rem;
	}

	/* Only the first four featured products on a phone — the section links to
	   the full catalogue anyway, and scrolling past eight cards is tiring.
	   Scoped by an explicit modifier rather than a body class so it can never
	   clip the catalogue archive, which uses the same .eh-products grid. */
	.eh-products--limited > .eh-card:nth-child(n + 5) {
		display: none;
	}

	.eh-hero {
		min-height: auto;
	}

	.eh-hero__inner {
		padding-block: 2.25rem 1.75rem;
	}

	.eh-hero__title {
		font-size: clamp(1.85rem, 8vw, 2.4rem);
	}

	.eh-hero__text {
		font-size: 0.9375rem;
		margin-bottom: 1.5rem;
	}

	.eh-hero__actions .eh-btn {
		padding: 0.8em 1.4em;
	}

	.eh-hero__stats {
		margin-top: 1.5rem;
		padding-top: 1.25rem;
		gap: 1rem 1.75rem;
	}

	.eh-stat__num {
		font-size: 1.4rem;
	}

	.eh-stat__label {
		font-size: 0.625rem;
	}

	.eh-section-head {
		margin-bottom: 1.5rem;
	}

	.eh-section-head h2 {
		font-size: 1.65rem;
	}

	.eh-section-head p {
		font-size: 0.9375rem;
	}

	.eh-split__badge {
		padding: 0.8rem 1rem;
		min-width: 104px;
	}

	.eh-split__badge strong {
		font-size: 1.5rem;
	}

	.eh-cta__inner {
		padding-block: 2.25rem;
	}

	.eh-cta h2 {
		font-size: 1.55rem;
	}

	.eh-footer__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	/*
	 * Reserve the bottom-right corner for the chat launcher.
	 *
	 * It is position:fixed, so it floats over whatever happens to be at the end
	 * of the page — on a phone that was the address line, with the 「LIVE CHAT」
	 * label sitting across the town name. Padding at the end of the footer lifts
	 * the last rows clear of it without touching the launcher itself.
	 */
	.eh-footer {
		padding-bottom: 5.5rem;
	}

	/*
	 * QR block: one row, not a stamp with half the width empty.
	 *
	 * As a column the 132px code sat alone against the left edge and the rest of
	 * the line was dead space. Side by side with its caption the block fills the
	 * measure and the caption is read at the same glance as the code.
	 */
	.eh-footer__col--qr .eh-qr__item {
		display: flex;
		align-items: center;
		gap: 1.1rem;
		max-width: none;
		text-align: left;
	}

	.eh-footer__col--qr .eh-qr__frame {
		flex: none;
	}

	.eh-footer__col--qr .eh-qr__caption {
		margin: 0;
	}

	.eh-footer__brand {
		grid-column: auto;
	}

	.eh-footer__bottom {
		flex-direction: column;
		gap: 1.1rem;
		align-items: flex-start;
		text-align: left;
	}

	.eh-footer__pay {
		margin-left: 0;
	}

	.eh-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--eh-sp-4);
	}

	.eh-hero__stats {
		gap: 1.25rem 2rem;
	}

	.eh-stat__num {
		font-size: 1.6rem;
	}

	.eh-postnav {
		grid-template-columns: minmax(0, 1fr);
	}

	.eh-postnav__item--next {
		text-align: left;
	}

	.eh-prose .alignleft,
	.eh-prose .alignright {
		float: none;
		margin: 0 0 var(--eh-sp-4);
		width: 100%;
	}

	.eh-gallery__thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.eh-toolbar {
		gap: 0.75rem;
	}

	.eh-sort select {
		min-width: 150px;
	}

	.eh-chat__panel {
		width: calc(100vw - 1.8rem);
		height: min(76vh, 520px);
	}

	.eh-chat__launcher-text {
		display: none;
	}

	.eh-chat__launcher {
		padding: 0.95em;
	}

	.eh-chat__launcher svg {
		width: 22px;
		height: 22px;
	}
}

@media (max-width: 480px) {
	.eh-brand__tag {
		display: none;
	}

	.eh-brand__name {
		font-size: 1.2rem;
	}

	.eh-product__actions .eh-btn {
		min-width: 0;
		flex: 1 1 100%;
	}

	.eh-topbar__group {
		gap: 0.85rem;
	}

	.eh-news-card__body {
		padding: 1.05rem;
	}
}

/* ==========================================================================
   30. Accessibility, motion preferences and print
   ========================================================================== */


/* ------------------------------------------------------------------ *
 * Phone density pass
 *
 * The desktop proportions are deliberate and were signed off — this block must
 * never be moved out of the media query. On a phone the same numbers read as
 * empty space: the hero filled a whole screen before a visitor saw a single
 * product, and the three headline statistics wrapped onto two rows, so the
 * third one looked stranded rather than grouped.
 *
 * Targets, in order of how much they were complained about:
 *   1. the hero, so products start appearing on the first scroll
 *   2. the statistic row, so 19 / 2,000+ / 40+ sit on one line and read as a set
 *   3. section padding, trimmed slightly so blocks feel related
 * ------------------------------------------------------------------ */

@media (max-width: 780px) {
	/* 1. Hero: tighter rhythm, smaller eyebrow, less dead space around the CTAs. */
	.eh-hero__inner {
		padding-block: 1.75rem 1.5rem;
		gap: 1.5rem;
	}

	.eh-hero .eh-eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
		margin-bottom: 0.75rem;
	}

	.eh-hero__title {
		margin-bottom: 0.75rem;
	}

	.eh-hero__text {
		font-size: 0.9375rem;
		line-height: 1.6;
		margin-bottom: 1.25rem;
	}

	.eh-hero__actions {
		gap: 0.6rem;
	}

	.eh-hero__actions .eh-btn {
		padding: 0.75em 1.25em;
		font-size: 0.75rem;
	}

	/* 2. Statistics: three across, never wrapping to a ragged second row. */
	.eh-hero__stats {
		gap: 0.75rem;
		margin-top: 1.25rem;
		padding-top: 1rem;
	}

	/*
	 * Equal thirds, via flex — NOT grid-template-columns.
	 *
	 * .eh-hero__stats is a flex container, so the grid-template-columns rule that
	 * used to sit here did nothing at all. Each statistic then sized itself to its
	 * own contents, which measured 143px / 114px / 123px on a 390px screen: the
	 * figures were aligned and still looked crooked because their boxes differed.
	 *
	 * flex: 1 1 0 ignores content width and splits the row evenly. That is the
	 * actual fix for "黄色数字扭曲" on a phone — the lining figures were only half
	 * of it.
	 */
	.eh-stat {
		flex: 1 1 0;
		min-width: 0;
	}

	/*
	 * The labels were the real mess, not the figures.
	 *
	 * At 0.14em letter-spacing "YEARS OF MANUFACTURING" wrapped to two lines
	 * while "40+" beside it wrapped differently, and "COUNTRIES SHIPPED TO" ran
	 * past the right edge entirely — so the row read as crooked even with three
	 * equal columns and perfectly aligned digits.
	 *
	 * Uppercase tracking is a desktop luxury. On a phone the labels get a much
	 * tighter measure, a smaller size, and a shared height so the three blocks
	 * end level with each other.
	 */
	.eh-stat__label {
		font-size: 0.5rem;
		letter-spacing: 0.05em;
		line-height: 1.35;
		hyphens: none;
		overflow-wrap: anywhere;
	}

	.eh-hero__stats {
		align-items: stretch;
	}

	.eh-stat__num {
		font-size: 1.5rem;
	}

	/*
	 * Equal-width statistics on a phone.
	 *
	 * .eh-stat carries `min-width: 8rem` for the desktop row, where it stops the
	 * three figures from crowding. On a 390px screen that minimum is wider than
	 * the grid track, so the first column grew to 143px while the other two
	 * stayed at 128px — measured, not guessed. The figures were perfectly
	 * aligned vertically and still looked crooked, because their boxes were not
	 * the same size. That is the "扭曲的，看上去不整齐" the owner kept reporting,
	 * and it was never a font problem after the lining figures were fixed.
	 */

	.eh-stat__label {
		font-size: 0.625rem;
		line-height: 1.35;
	}

	/* 3. Sections: a little less air between blocks. */
	.eh-section {
		padding-block: 2.25rem;
	}

	.eh-section__head {
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 420px) {
	/* Very narrow phones: the third statistic label is the first thing to crowd. */
	.eh-stat__label {
		font-size: 0.5625rem;
	}

	.eh-hero__title {
		font-size: clamp(1.7rem, 8.5vw, 2.1rem);
	}
}


/* ------------------------------------------------------------------ *
 * Phone layout for the repeating grids
 *
 * These were the two blocks that did not collapse: the news grid stayed at
 * three columns and the testimonial row squeezed its cards into slivers, so on a
 * phone the text wrapped one or two characters per line. A multi-column grid
 * that never collapses is not a responsive layout, it is a desktop layout with a
 * narrow window.
 * ------------------------------------------------------------------ */

@media (max-width: 780px) {
	/*
	 * One row, scrolled sideways — matching the desktop shape.
	 *
	 * Stacking the cards vertically made the section as tall as the number of
	 * posts: five articles pushed everything below them off the page. A single
	 * row that scrolls keeps the block exactly one card tall however many posts
	 * exist, which is what the desktop grid already does with its columns.
	 */
	.eh-news {
		display: flex;
		grid-template-columns: none;
		gap: 0.9rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		padding-bottom: 0.5rem;
		scrollbar-width: thin;
	}

	.eh-news > .eh-news-card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* The date and category labels are the first thing to wrap awkwardly. */
	.eh-news-card__meta {
		flex-wrap: wrap;
		gap: 0.4em 0.7em;
	}

	.eh-news-card__body {
		padding: 1rem 1.05rem 1.25rem;
	}
}

@media (max-width: 1024px) and (min-width: 781px) {
	/* Two up on a tablet rather than three cramped columns. */
	.eh-news {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

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

	.eh-js .eh-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.eh-header,
	.eh-topbar,
	.eh-footer,
	.eh-chat,
	.eh-drawer,
	.eh-overlay,
	.eh-search,
	.eh-card__quick,
	.eh-pagination {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 11pt;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	.eh-hero {
		background: none !important;
		color: #000;
		min-height: auto;
	}

	.eh-hero__title,
	.eh-hero__text,
	.eh-stat__num,
	.eh-stat__label {
		color: #000 !important;
	}
}

/* ------------------------------------------------------------------ *
 * Testimonials: a fixed-height shelf, not a wall
 *
 * The owner's note: "设置的太大了，如果有很多评价呢？那不得占满全屏幕". Ten
 * full-height cards pushed every section below them off the page, so the block
 * stopped being social proof and became the page.
 *
 * Two changes fix that without hiding anything: the cards are smaller, and the
 * row scrolls sideways instead of growing downwards. The section is now the same
 * height whether the site has three reviews or thirty.
 * ------------------------------------------------------------------ */

.eh-quotes {
	/*
	 * Flex, not grid.
	 *
	 * The first attempt used `grid-auto-flow: column` with
	 * `grid-auto-columns: minmax(15rem, 1fr)`. On a phone that collapsed the
	 * columns to a sliver: the text wrapped one character per line and the
	 * section became unreadable — the owner's "手机端则是被挤压变形了".
	 *
	 * A flex row with an explicit basis is predictable at every width, which is
	 * the whole point of the block: it must not need a different layout per
	 * device to stay legible.
	 */
	display: flex;
	gap: 0.85rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	padding-bottom: 0.5rem;

	/* Room for the scrollbar so it never overlaps the last card. */
	scrollbar-width: thin;
}

/* Cards keep a readable measure and never shrink below it. */
.eh-quotes > .eh-quote {
	flex: 0 0 clamp(15rem, 30%, 22rem);
	min-width: 0;
}

/* Two rows of five on wider screens, so ten cards use the space instead of
   running off to the right. */
@media (min-width: 900px) {
	.eh-quotes {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		overflow-x: visible;
	}

	/* Grid children: let the track decide the width. */
	.eh-quotes > .eh-quote {
		flex: initial;
	}
}

.eh-quote {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0.9rem 0.95rem;
	background: var(--eh-white);
	border: 1px solid var(--eh-line);
	border-radius: var(--eh-radius);
}

.eh-quote__stars {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	color: var(--eh-gold);
	line-height: 1;
}

.eh-quote__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.62;
	color: var(--eh-ink-2);

	/* Keep every card the same height whatever the quote length. */
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.eh-quote__author {
	margin-top: auto;
	padding-top: 0.6rem;
	border-top: 1px solid var(--eh-line);
	font-size: 0.6875rem;
	line-height: 1.45;
}

.eh-quote__author strong {
	display: block;
	font-size: 0.75rem;
	color: var(--eh-ink);
}

.eh-quote__author span {
	color: var(--eh-ink-3);
}

/* Phones: one card at a time, swiped. */
@media (max-width: 780px) {
	/* One card at a time, with the next one peeking so the swipe is discoverable. */
	.eh-quotes > .eh-quote {
		flex: 0 0 82%;
	}

	.eh-quote {
		padding: 0.8rem 0.85rem;
	}
}

/* ------------------------------------------------------------------ *
 * Homepage section wrappers
 *
 * These exist so the phone layout can order the sections differently from the
 * desktop one. The base rules are plain block flow — desktop is unchanged — and
 * the phone rules are printed inline by enhong_mobile_order_css(), because they
 * depend on a theme mod and are a handful of integers.
 *
 * They are declared here as well as generated there so the classes have a
 * defined base behaviour rather than existing only inside a conditional block.
 * ------------------------------------------------------------------ */

.eh-home-sections {
	display: block;
}

.eh-home-section {
	display: block;
}

/* ==================================================================== *
 * PAGE SECTION ORDER (About, Custom)
 *
 * A flex column so the CSS `order` value on each block decides the visual
 * sequence. The markup keeps the template's original order, which means a
 * page with no arrangement saved renders exactly as it always did.
 * ==================================================================== */

.eh-page-sections {
	display: flex;
	flex-direction: column;
}

.eh-page-block {
	display: block;
}



/* ==================================================================== *
 * BLOCK WIDGETS
 *
 * WordPress renders widgets as blocks since 5.8, and blocks ignore the
 * theme's before_widget / before_title arguments — they bring their own
 * markup and their own headings. So a block widget landed inside an
 * .eh-widget shell that the theme styles, with entirely unstyled default
 * WordPress content inside it: a search box with square corners and blue
 * focus ring, bare lists, default buttons. Everything worked and nothing
 * matched, which reads as unfinished.
 *
 * These rules style the blocks a sidebar actually contains so they inherit
 * the theme's typography, spacing and colour instead of WordPress's.
 * ==================================================================== */

.eh-sidebar .eh-widget > *:first-child,
.eh-sidebar .eh-widget .wp-block-widget-title {
	margin-top: 0;
}

.eh-sidebar .eh-widget > *:last-child {
	margin-bottom: 0;
}

/* Headings a block widget brings for itself. */
.eh-sidebar .eh-widget h2,
.eh-sidebar .eh-widget h3,
.eh-sidebar .eh-widget .wp-block-heading {
	margin: 0 0 var(--eh-sp-3);
	font-family: var(--eh-font-display);
	font-size: var(--eh-fs-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--eh-ink);
}

/* Lists: search results, recent posts, categories, archives. */
.eh-sidebar .eh-widget ul,
.eh-sidebar .eh-widget ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eh-sidebar .eh-widget li {
	margin: 0 0 var(--eh-sp-2);
	padding: 0;
	line-height: 1.55;
}

.eh-sidebar .eh-widget li:last-child {
	margin-bottom: 0;
}

.eh-sidebar .eh-widget .wp-block-latest-posts__list li,
.eh-sidebar .eh-widget .wp-block-archives-list li,
.eh-sidebar .eh-widget .wp-block-categories-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--eh-sp-2);
	border-bottom: 1px solid var(--eh-line-soft);
	padding-bottom: var(--eh-sp-2);
}

.eh-sidebar .eh-widget a {
	color: var(--eh-ink-2);
	text-decoration: none;
	transition: color 0.15s ease;
}

.eh-sidebar .eh-widget a:hover,
.eh-sidebar .eh-widget a:focus-visible {
	color: var(--eh-wine);
}

/* Dates and counts beside a list item. */
.eh-sidebar .eh-widget .wp-block-latest-posts__post-date,
.eh-sidebar .eh-widget .wp-block-archives-list .count,
.eh-sidebar .eh-widget .wp-block-categories-list .count {
	flex: none;
	font-size: var(--eh-fs-sm);
	color: var(--eh-muted);
}

/* Search. */
.eh-sidebar .eh-widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--eh-sp-2);
	border: 0;
	padding: 0;
}

.eh-sidebar .eh-widget input[type="search"],
.eh-sidebar .eh-widget input[type="text"],
.eh-sidebar .eh-widget input[type="email"],
.eh-sidebar .eh-widget input[type="url"],
.eh-sidebar .eh-widget select,
.eh-sidebar .eh-widget textarea {
	width: 100%;
	min-width: 0;
	padding: 0.6em 0.8em;
	font-family: inherit;
	font-size: var(--eh-fs-base);
	color: var(--eh-ink);
	background: var(--eh-white);
	border: 1px solid var(--eh-line);
	border-radius: var(--eh-radius);
	-webkit-appearance: none;
	appearance: none;
}

.eh-sidebar .eh-widget input:focus,
.eh-sidebar .eh-widget select:focus,
.eh-sidebar .eh-widget textarea:focus {
	outline: 2px solid var(--eh-gold);
	outline-offset: 1px;
	border-color: var(--eh-gold);
	box-shadow: none;
}

/* Buttons, including the search submit. */
.eh-sidebar .eh-widget button,
.eh-sidebar .eh-widget input[type="submit"],
.eh-sidebar .eh-widget .wp-block-search__button,
.eh-sidebar .eh-widget .wp-block-button__link {
	flex: none;
	padding: 0.6em 1.1em;
	font-family: inherit;
	font-size: var(--eh-fs-base);
	font-weight: 600;
	line-height: 1.2;
	color: var(--eh-white);
	background: var(--eh-wine);
	border: 1px solid var(--eh-wine);
	border-radius: var(--eh-radius);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.eh-sidebar .eh-widget button:hover,
.eh-sidebar .eh-widget input[type="submit"]:hover,
.eh-sidebar .eh-widget .wp-block-search__button:hover,
.eh-sidebar .eh-widget .wp-block-button__link:hover {
	background: var(--eh-wine-deep);
	border-color: var(--eh-wine-deep);
	color: var(--eh-white);
}

/* Tag cloud. */
.eh-sidebar .eh-widget .wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eh-sp-2);
}

.eh-sidebar .eh-widget .wp-block-tag-cloud a {
	padding: 0.25em 0.7em;
	font-size: var(--eh-fs-sm) !important;
	background: var(--eh-cream-2);
	border: 1px solid var(--eh-line);
	border-radius: 999px;
}

.eh-sidebar .eh-widget .wp-block-tag-cloud a:hover {
	background: var(--eh-gold-tint);
	border-color: var(--eh-gold);
	color: var(--eh-wine);
}

/* Paragraph and quote blocks a widget may contain. */
.eh-sidebar .eh-widget p {
	margin: 0 0 var(--eh-sp-3);
	line-height: 1.7;
	color: var(--eh-ink-2);
}

.eh-sidebar .eh-widget blockquote {
	margin: 0;
	padding-left: var(--eh-sp-3);
	border-left: 2px solid var(--eh-gold);
	color: var(--eh-ink-3);
}

.eh-sidebar .eh-widget img {
	max-width: 100%;
	height: auto;
	border-radius: var(--eh-radius);
}

/* ------------------------------------------------------------------ *
 * Round-2 review fixes
 * ------------------------------------------------------------------ */

/*
 * A5: the inquiry redirect lands on #inquiry.
 *
 * scroll-margin keeps the notice below the fixed header instead of tucked
 * underneath it, which is what would happen with a plain anchor.
 */
.eh-anchor {
	display: block;
	scroll-margin-top: 6rem;
}

/*
 * C1: the submenu toggle sits beside its link, not inside it.
 *
 * The link keeps the full row so a thumb can hit it; the button is a separate
 * 44px target on the right edge.
 */
.eh-drawer .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.eh-drawer .menu-item-has-children > a {
	flex: 1 1 auto;
	min-width: 0;
}

.eh-drawer__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.eh-drawer .menu-item-has-children > .sub-menu {
	flex: 0 0 100%;
}

/*
 * C3: the small print that carries real conditions was unreadable.
 *
 * .eh-price__note rendered at 12px in rgb(147,138,126) on the cream ground —
 * 3.2:1, below the 4.5:1 that ordinary text needs. It is not decoration: it is
 * where the MOQ and the "ex-works, excludes shipping" condition live, which is
 * exactly what a buyer is checking. Darkened to the ink scale; the warm hue is
 * kept so it still belongs to the palette.
 */
.eh-price__note,
.eh-price__label {
	color: var(--eh-ink-2);
}

.eh-price__cur {
	color: var(--eh-ink-2);
}

/*
 * The gold footer button had white-on-gold at about 2.1:1 because a broader
 * footer link rule made the label translucent. The text is now the wine that
 * the surrounding design already uses on gold, opaque, at full weight.
 */
.eh-footer a.eh-btn--gold {
	color: var(--eh-wine);
}

/*
 * C4: touch targets.
 *
 * The header icon buttons measured 40x40 and the copy-SKU control 18x20. Both
 * are ordinary thumb targets on a phone. The icons themselves are unchanged —
 * only the hit area grows.
 */
.eh-icon-btn,
#eh-search-toggle,
#eh-drawer-toggle {
	min-width: 44px;
	min-height: 44px;
}

.eh-product__sku button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
}

/*
 * C4: the inline inquiry submit was 39.8px tall — a hair under the target and
 * the primary action on the page.
 */
.eh-inquiry-form button[type="submit"] {
	min-height: 44px;
}

/*
 * Copy inside the wine CTA widget inherited a dark ink and vanished on red.
 *
 * Measured before this fix: background rgb(122,18,32) against text
 * rgb(75,67,58) — a contrast ratio around 1.1:1, effectively unreadable. A
 * later, more specific rule was winning, so this one is scoped to the widget
 * and marked important on purpose.
 */
.eh-widget--cta,
.eh-widget--cta p,
.eh-widget--cta h2,
.eh-widget--cta .eh-widget__title {
	color: #fff !important;
}

.eh-widget--cta p {
	color: rgba(255, 255, 255, 0.9) !important;
}

/*
 * Phone: keep the paired buttons on one row in both languages.
 *
 * Measured at 390px: the English hero buttons were 206px and 176px against a
 * 353px container, so they wrapped onto two lines, while the Chinese pair at
 * 137px and 114px stayed inline. The same design looked different per language.
 * Both now share the row and give up a little type size instead of wrapping.
 */
@media (max-width: 640px) {
	.eh-hero__actions,
	.eh-cta__actions {
		flex-wrap: nowrap !important;
	}

	.eh-hero__actions .eh-btn,
	.eh-cta__actions .eh-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		white-space: nowrap !important;
		font-size: 11px !important;
		letter-spacing: 0.03em !important;
		padding-inline: 8px !important;
	}

	.eh-hero__actions .eh-btn svg,
	.eh-cta__actions .eh-btn svg {
		width: 12px !important;
		height: 12px !important;
	}
}

/*
 * Hide the "19 Years of manufacturing" badge on the home About split.
 *
 * The markup stays: the numbers and labels come from shared settings that are
 * also used by the hero stats, so deleting the block would risk removing data
 * another section depends on. Hiding keeps the page clean and the data intact.
 */
.eh-split__media--portrait .eh-split__badge {
	display: none !important;
}

/*
 * The footer and hero-stat pencils were reachable in the HTML but invisible.
 *
 * .eh-edit-link is position:absolute, opacity:0, and only revealed by hovering
 * a parent that appears in a fixed list. The footer address was not in that
 * list and its container was not positioned, so the pencil sat at the top-right
 * of the viewport at opacity 0 — measured at x=1353, y=4, and never visible.
 * These two places have no other affordance, so their pencils are always shown.
 */
.eh-footer__address,
.eh-footer__bottom,
.eh-stat {
	position: relative;
}

.eh-footer__address .eh-edit-link,
.eh-footer__bottom .eh-edit-link,
.eh-stat .eh-edit-link {
	position: static;
	opacity: 1;
	transform: none;
	margin-inline-start: 0.45rem;
	vertical-align: middle;
}

.eh-stat .eh-edit-link {
	margin-top: 0.5rem;
}

/*
 * Replace-image button on the two About photos.
 *
 * The picture was settable in the Customizer but had no visible affordance on
 * the page, so the owner could not find it. This pencil sits on the image and
 * always shows for an editor.
 */
.eh-split__media {
	position: relative;
}

.eh-media-edit {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	opacity: 1;
	transform: none;
	z-index: 45;
}

/*
 * The footer address links to the map when a map URL is set.
 * Without this the link inherits the body colour and shows no affordance.
 */
a.eh-footer__address-value,
a.eh-footer__address-icon--link {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}

a.eh-footer__address-value:hover,
a.eh-footer__address-icon--link:hover {
	color: var(--eh-gold-light, #d8b877);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

a.eh-footer__address-icon--link {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Footer: platforms first, brand and blurb last.
 *
 * The left column used to start with the logo and a paragraph, then trail off
 * into empty space while the right column filled its height. The two columns
 * read as unaligned. Turning the brand column into a flex stack puts the
 * platform buttons on the same top line as the contact column, and lets
 * margin-top:auto drop the logo and the blurb into the space that was empty.
 *
 * Phones keep the original order: there the column is short, nothing is
 * empty, and a platform list above the logo would read as a mistake.
 * ------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.eh-footer__brand {
		display: flex;
		flex-direction: column;
	}

	.eh-footer__brand .eh-footer__social {
		order: -1;
		margin-bottom: 2rem;
	}

	/*
	 * Centre the brand block in the space the platform list leaves behind.
	 *
	 * It used to sit flush against the bottom, which read as one more row of a
	 * grid rather than as a block with air around it. auto on both sides splits
	 * the leftover evenly, so the logo lands halfway up that space.
	 */
	.eh-footer__brand .eh-brand {
		margin-top: auto;
		margin-bottom: 0.75rem;
	}

	/*
	 * The blurb is one line, not two.
	 *
	 * It used to be capped at about 290px, so the sentence always wrapped.
	 * The column is 731px wide and the sentence measures 618px, which fits on
	 * one line as long as the cap is lifted. Side by side with the logo it does
	 * not fit (the logo takes 269px and leaves 442px), so the row stays stacked
	 * and only the wrap is removed.
	 */
	.eh-footer__brand .eh-footer__about {
		max-width: none;
		width: auto;
		white-space: nowrap;
		margin: 0;
	}
}

/*
 * 触控目标
 *
 * .eh-btn 在手机上实测只有 32px 高。WCAG 2.5.5 与两家手机系统的建议都是
 * 至少 44px；32px 的按钮在小屏上用拇指点是容易点偏的。
 */
@media (max-width: 780px) {
  .eh-btn,
  button.eh-btn,
  input[type="submit"].eh-btn {
    min-height: 44px;
  }
}

/* Utility classes replacing the last static inline styles. */
.eh-eyebrow--gold {
	color: var(--eh-gold-light);
}

.eh-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eh-hero__actions--center {
	justify-content: center;
}

.eh-block-gap {
	margin-top: var(--eh-sp-8);
}

.eh-empty-state {
	padding-block: var(--eh-sp-8);
}

.eh-empty-state--narrow {
	padding-block: var(--eh-sp-7);
}

.eh-section-head--gap {
	margin-top: var(--eh-sp-8);
}

/* Page block ordering without inline styles. */
.eh-page-block--order-0 {
	order: 0;
}

.eh-page-block--order-1 {
	order: 1;
}

.eh-page-block--order-2 {
	order: 2;
}

.eh-page-block--order-3 {
	order: 3;
}

.eh-page-block--order-4 {
	order: 4;
}

.eh-page-block--order-5 {
	order: 5;
}

.eh-page-block--order-6 {
	order: 6;
}

.eh-page-block--order-7 {
	order: 7;
}

.eh-page-block--order-8 {
	order: 8;
}

.eh-page-block--order-9 {
	order: 9;
}