/* LHARI App 0.2.0 - screens from the approved island prototype (IslandFloat), phones and touch tablets
 * (loaded with media=LHARI_App::MEDIA). Values below are the prototype's own; the tablet block at the end
 * only re-arranges them for the wider screen. */

/* ---- the WordPress page steps aside while a screen is open ---- */
/* Two IDs outrank the Norbu Visual Polish footer rule (body.norbu-series-template .norbu-trust-footer and
 * friends set display:block !important on home, collection, About and standard pages). */
html.lha-on body [data-lha-hide]:not(#lha):not(#lhi) { display: none !important; }
html.lha-on body {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: #F5F0E8 !important;
}
html.lha-product .lhi-head .lhi-mark,
html.lha-product .lhi-head [data-back] { opacity: 0 !important; pointer-events: none !important; }

#lha:empty { display: none; }
#lha {
	position: relative;
	min-height: 100vh;
	background: #F5F0E8;
	color: #1A1814;
	font-family: Manrope, "LHARI Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
#lha *, #lha *::before, #lha *::after { box-sizing: border-box; }

/* ---- theme defaults (Hello Elementor reset, Elementor kit) kept out: no pink hover/focus, no pill borders.
 * One ID-level rule outranks the theme's button:hover/:focus, and every component class outranks it in turn,
 * so a tapped (sticky-hover) chip keeps its own colours. ---- */
#lha button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#lha a, #lha a:hover, #lha a:focus, #lha a:active { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#lha button:active, #lha a:active { transform: scale(0.93); }
#lha :focus { outline: none; }
#lha :focus-visible { outline: 2px solid #1A1814; outline-offset: 2px; }
#lha :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus-visible { outline: none; } /* fields show focus themselves */
#lha [tabindex="-1"]:focus, #lha [tabindex="-1"]:focus-visible { outline: none; } /* headings take focus for screen readers only */
#lha h1, #lha p, #lha dl, #lha dd, #lha figure, #lha blockquote { margin: 0; }
#lha img { display: block; max-width: none; border: 0; border-radius: 0; box-shadow: none; }

/* ---- screen entrances (prototype lhIn / lhPush / lhRise) ---- */
@keyframes lhaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lhaPush { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes lhaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#lha .lha-pre { opacity: 0; }
#lha .lha-anim-in { animation: lhaIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
#lha .lha-anim-push { animation: lhaPush 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
#lha .lha-rise { animation: lhaRise 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.lha-screen { background: #F5F0E8; min-height: 100vh; }

/* ---- shared type ---- */
#lha .lha-head { padding: calc(90px + env(safe-area-inset-top, 0px)) 20px 6px; display: flex; flex-direction: column; gap: 8px; }
#lha .lha-eyebrow { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: #8E6F3D; }
#lha .lha-h1 { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 42px; font-weight: 500; line-height: 1; letter-spacing: normal; color: #1A1814; text-transform: none; }
#lha .lha-h1-tight { line-height: 0.98; }
#lha .lha-count { font-size: 12px; color: #6B6358; }
#lha .lha-p { font-size: 14px; line-height: 1.65; color: #2A2722; }
#lha .lha-small { font-size: 12px; line-height: 1.55; color: #6B6358; }
#lha .lha-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #6B6358; }
#lha .lha-label small { font-size: 10px; letter-spacing: normal; text-transform: none; font-weight: 500; }
#lha .lha-kicker { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #8E6F3D; margin-top: 3px; }

/* ---- shop ---- */
#lha .lha-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 14px 20px 18px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
#lha .lha-chips::-webkit-scrollbar { display: none; }
#lha .lha-chip {
	flex-shrink: 0;
	height: 36px;
	padding: 0 16px;
	border-radius: 18px;
	border: 1px solid rgba(17, 17, 17, 0.18);
	background: transparent;
	color: #111111;
	font-family: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 13px;
	font-weight: 500;
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#lha .lha-chip.is-on { background: #111111; color: #FFFFFF; border-color: #111111; }
#lha .lha-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 12px;
	row-gap: 26px;
	padding: 0 20px calc(160px + env(safe-area-inset-bottom, 0px));
}
#lha .lha-card { display: flex; flex-direction: column; gap: 7px; text-align: left; }
#lha .lha-card:active { transform: scale(0.97); }
#lha .lha-card-img { display: block; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #2A2722; }
#lha .lha-card-img img { width: 100%; height: 100%; object-fit: cover; }
#lha .lha-card-img { position: relative; }
#lha .lha-sold { position: absolute; left: 8px; top: 8px; padding: 5px 8px 4px; border-radius: 999px; background: rgba(245, 240, 232, .94); color: #2A2722; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
#lha .lha-card.is-out .lha-card-img img { filter: saturate(.45); opacity: .7; }
#lha .lha-card.is-out .lha-card-price { color: #8A847A; }
#lha .lha-card-name { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.15; }
#lha .lha-card-price { font-size: 12.5px; font-weight: 600; color: #2A2722; margin-top: auto; } /* prices line up when a name wraps */
#lha .lha-card.is-small { gap: 6px; }
#lha .lha-card.is-small .lha-card-name { font-size: 14px; }
#lha .lha-card.is-small .lha-card-price { font-size: 11.5px; }
#lha .lha-empty { padding: 40px 20px 160px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
#lha .lha-empty[hidden] { display: none; }
#lha .lha-empty p { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.25; color: #2A2722; }
#lha .lha-btn-dark { height: 44px; padding: 0 20px; border-radius: 22px; background: #111111; color: #FFFFFF; font-family: Geist, -apple-system, sans-serif; font-size: 13px; font-weight: 500; }

/* ---- product ---- */
#lha .lha-back {
	position: fixed;
	top: calc(14px + env(safe-area-inset-top, 0px));
	left: 16px;
	z-index: 10008;
}
#lha .lha-back a {
	width: 42px;
	height: 42px;
	border-radius: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111111;
	background: rgba(250, 248, 244, 0.84);
	box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12), inset 0 0 0 1px rgba(17, 17, 17, 0.06);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#lha .lha-back a { transition: background-color 450ms ease, box-shadow 450ms ease, color 450ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
html.lha-hero #lha .lha-back a { background: rgba(20, 18, 15, 0.3); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
#lha .lha-back svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#lha .lha-gallery { position: relative; background: #2A2722; }
#lha .lha-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
#lha .lha-track::-webkit-scrollbar { display: none; }
#lha .lha-slide { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; background: #2A2722; }
#lha .lha-film { object-fit: contain; background: #0C0B0A; } /* the maker's own upright film, shown whole */
#lha .lha-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
#lha .lha-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.45); transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease; }
#lha .lha-dots i.is-on { width: 16px; background: #FFFFFF; }
#lha .lha-pbody { padding: 24px 20px 0; display: flex; flex-direction: column; gap: 12px; }
#lha .lha-h1-product { font-size: 36px; }
#lha .lha-price { display: flex; align-items: baseline; gap: 10px; }
#lha .lha-price span { font-size: 16px; font-weight: 700; }
#lha .lha-price small { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #6B6358; }
#lha .lha-pbody .lha-p { margin-top: 4px; }
/* Sizes (pieces made in wrist sizes, 2026-10-28) */
#lha .lha-size { display: grid; gap: 10px; margin-top: 14px; }
#lha .lha-size-h { display: flex; align-items: baseline; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #1A1814; }
#lha .lha-size-h span + span { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: #6B6358; }
#lha .lha-size-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 8px; }
#lha .lha-size-b { min-width: 0; height: 44px; padding: 0 6px; white-space: nowrap; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.22); color: #1A1814; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s; }
#lha .lha-size-b:active { transform: scale(0.96); }
#lha .lha-size-b.is-on { background: #1A1814; color: #FBF7EE; box-shadow: inset 0 0 0 1px #1A1814; }
#lha .lha-size-b[aria-disabled="true"] { color: #8C8478; text-decoration: line-through; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.1); }
#lha .lha-size-b:focus-visible { outline: 2px solid #8E6F3D; outline-offset: 2px; }
#lha .lha-size-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#lha .lha-size-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: #F3DED6; color: #6E2A1B; font-size: 13px; }
#lha .lha-size.is-need .lha-size-row { animation: lha-size-nudge 0.42s ease; }
@keyframes lha-size-nudge { 20% { transform: translateX(-5px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { #lha .lha-size.is-need .lha-size-row { animation: none; } }
#lha .lha-details:empty { display: none; }
#lha .lha-details { border-top: 1px solid rgba(26, 24, 20, 0.1); margin-top: 8px; }
#lha .lha-acc { border-bottom: 1px solid rgba(26, 24, 20, 0.1); }
#lha .lha-acc summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: #1A1814;
	cursor: pointer;
}
#lha .lha-acc summary::-webkit-details-marker { display: none; }
#lha .lha-acc summary::after { content: "+"; font-size: 18px; font-weight: 400; letter-spacing: 0; color: #6B6358; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
#lha .lha-acc[open] summary::after { transform: rotate(45deg); }
#lha .lha-acc-body { padding: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: #2A2722; }
#lha .lha-acc-body * { max-width: 100%; font-family: inherit; }
#lha .lha-acc-body p, #lha .lha-acc-body dl, #lha .lha-acc-body figure { margin: 0 0 10px; }
#lha .lha-acc-body dt { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #6B6358; }
#lha .lha-acc-body dd { margin: 2px 0 10px; }
#lha .lha-acc-body img { width: 100%; height: auto; border-radius: 4px; }
#lha .lha-more {
	align-self: flex-start;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: #2A2722;
}
/* Reviews (from the product page, reviews.php): summary, the two newest, the way to all of them. */
#lha .lha-rv:empty { display: none; }
#lha .lha-rv { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(26, 24, 20, 0.1); animation: lhaRvIn 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lhaRvIn { from { opacity: 0; transform: translateY(8px); } }
#lha .lha-rv-quiet { margin: 0; font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.25; color: #3D3830; }
#lha .lha-rv-sum { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; color: #1A1814; }
#lha .lha-rv-sum b { font-weight: 700; }
#lha .lha-rv-sum span { color: #6B6358; text-decoration: underline; text-underline-offset: 3px; }
#lha .lha-rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#lha .lha-rv-list li { padding: 14px 16px; border-radius: 14px; background: #FBF7EE; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.08); display: flex; flex-direction: column; gap: 8px; }
#lha .lha-rv-list p { margin: 0; font-size: 14px; line-height: 1.55; color: #2A2722; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#lha .lha-rv-list span:last-child { font-size: 12px; color: #6B6358; }
@media (prefers-reduced-motion: reduce) { #lha .lha-rv { animation: none; } }
#lha .lha-related { padding: 40px 20px calc(170px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
#lha .lha-related-title { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 26px; font-weight: 500; }
#lha .lha-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#lha .lha-product > .lha-pbody:last-child { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }

/* ---- custom studio (Mobile board of the 2026-10 redesign) ----
 * A progress line under the island head, one step per screen, and a price bar with a summary sheet at the
 * bottom; the island's pill steps aside while this screen is open. */
html.lha-custom #lhi .lhi-island { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease; }
#lha .lha-vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
#lha .lha-custom { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
#lha .lha-prog { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 9px; padding: calc(74px + env(safe-area-inset-top, 0px)) 20px 12px; background: rgba(245, 240, 232, 0.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#lha .lha-segs { display: flex; gap: 6px; }
#lha .lha-seg { flex: 1 1 0; height: 3px; border-radius: 3px; background: rgba(26, 24, 20, 0.12); overflow: hidden; }
#lha .lha-seg i { display: block; height: 100%; background: #1A1814; transition: width 600ms cubic-bezier(0.2, 0.6, 0.2, 1); }
#lha .lha-prog > span { font-size: 12px; color: #6B6358; }
#lha .lha-cbody { padding: 14px 20px 30px; display: flex; flex-direction: column; gap: 18px; }
#lha .lha-ch1 { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1; color: #1A1814; }
#lha .lha-custom .lha-p { font-size: 15px; line-height: 1.6; color: #3D3830; }

#lha .lha-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#lha .lha-opt { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border-radius: 16px; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px rgba(26, 24, 20, 0.1); transition: box-shadow 300ms ease, transform 200ms ease; }
#lha .lha-opt.is-on { box-shadow: 0 0 0 2px #1A1814; }
#lha .lha-opt:active { transform: scale(0.97); }
#lha .lha-opt-img { display: block; height: 190px; background: #2A2722; }
#lha .lha-opt-img img { width: 100%; height: 100%; object-fit: cover; }
#lha .lha-opt-img.is-nk img { object-position: center 35%; }
#lha .lha-opt-c { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
#lha .lha-opt-t { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 26px; line-height: 1; }
#lha .lha-opt-c b { font-size: 15px; font-weight: 600; }
#lha .lha-opt-c small { font-size: 12px; color: #6B6358; }
#lha .lha-tick { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 999px; background: #1A1814; color: #FBF7EE; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.4); transition: opacity 200ms, transform 500ms cubic-bezier(0.34, 1.3, 0.64, 1); }
#lha .lha-tick svg, #lha .lha-received svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#lha .lha-opt.is-on .lha-tick { opacity: 1; transform: none; }
#lha .lha-how { margin-top: 6px; padding: 16px 18px; border-radius: 16px; background: #ECE3D1; display: flex; flex-direction: column; gap: 10px; }
#lha .lha-how .lha-eyebrow { color: #7A5E30; }
#lha .lha-how ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
#lha .lha-how li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
#lha .lha-how li span { grid-row: span 2; width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px #1A1814; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
#lha .lha-how li:first-child span { background: #1A1814; color: #FBF7EE; box-shadow: none; }
#lha .lha-how li b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.15; }
#lha .lha-how li small { font-size: 13px; line-height: 1.5; color: #3D3830; }

#lha .lha-ring { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; transition: opacity 300ms; }
#lha .lha-ring svg { position: absolute; width: 200px; height: 200px; }
#lha .lha-wc { transition: r 550ms cubic-bezier(0.34, 1.3, 0.64, 1); }
#lha .lha-ring > span { position: relative; display: flex; flex-direction: column; align-items: center; }
#lha .lha-ring b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-weight: 400; font-size: 44px; line-height: 1; }
#lha .lha-ring small { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6B6358; }
#lha .is-dim { opacity: 0.35; }
#lha .lha-rngw { transition: opacity 300ms; }
#lha .lha-rng { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; touch-action: pan-y; }
#lha .lha-rng::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(26, 24, 20, 0.18); }
#lha .lha-rng::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -13.5px; border-radius: 999px; background: #1A1814; box-shadow: 0 0 0 7px rgba(26, 24, 20, 0.08); }
#lha .lha-rng::-moz-range-track { height: 3px; background: rgba(26, 24, 20, 0.18); }
#lha .lha-rng::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 999px; background: #1A1814; }
#lha .lha-ticks { display: flex; justify-content: space-between; font-size: 12px; color: #6B6358; }
#lha .lha-unsure { height: 46px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.2); font-size: 13px; font-weight: 600; transition: background-color 240ms, color 240ms, box-shadow 240ms; }
#lha .lha-unsure.is-on { background: #1A1814; color: #FBF7EE; box-shadow: none; }
#lha .lha-measure { border-top: 1px solid rgba(26, 24, 20, 0.12); }
#lha .lha-measure summary { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 600; }

#lha .lha-body-svg { display: flex; justify-content: center; height: 230px; overflow: hidden; }
#lha .lha-body-svg svg { width: 220px; height: 260px; }
#lha .lha-arc { fill: none; stroke: rgba(26, 24, 20, 0.16); stroke-width: 1.6; }
#lha .lha-arc.is-on { stroke: #1A1814; stroke-width: 3; stroke-dasharray: 420; animation: lhaArc 900ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes lhaArc { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
#lha .lha-lrows { border-top: 1px solid rgba(26, 24, 20, 0.1); }
#lha .lha-lrow { width: 100%; min-height: 56px; border-bottom: 1px solid rgba(26, 24, 20, 0.1); padding: 6px 2px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; color: #3D3830; }
#lha .lha-lrow:active { transform: none; background: rgba(26, 24, 20, 0.04); }
#lha .lha-rd { width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.2px rgba(26, 24, 20, 0.4); transition: box-shadow 300ms; }
#lha .lha-lrow.is-on .lha-rd { box-shadow: inset 0 0 0 4.5px #1A1814; }
#lha .lha-lrow-c { display: flex; flex-direction: column; }
#lha .lha-lrow-c b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 23px; font-weight: 400; line-height: 1.1; color: #1A1814; }
#lha .lha-lrow-c small { font-size: 12px; color: #6B6358; }
#lha .lha-lrow-r { font-size: 13px; font-weight: 600; }

#lha .lha-drop { width: 100%; height: 170px; border: 1.5px dashed rgba(26, 24, 20, 0.28); border-radius: 18px; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #3D3830; text-align: center; padding: 0 16px; cursor: pointer; }
#lha .lha-drop:active { background: #F7F0E1; }
#lha .lha-drop[hidden], #lha .lha-upbusy[hidden], #lha .lha-updone[hidden] { display: none; }
#lha .lha-drop svg { width: 30px; height: 30px; fill: none; stroke: #8E6F3D; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
#lha .lha-drop b { font-size: 16px; font-weight: 600; }
#lha .lha-drop span { font-size: 13px; color: #6B6358; }
#lha .lha-upbusy { height: 110px; padding: 0 20px; border-radius: 18px; background: #FFFFFF; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
#lha .lha-upbusy > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
#lha .lha-upbusy > div span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lha .lha-upbusy > div span:last-child { color: #6B6358; }
#lha .lha-upbusy > i { display: block; height: 3px; border-radius: 3px; background: rgba(26, 24, 20, 0.1); overflow: hidden; }
#lha .lha-upbusy > i b { display: block; height: 100%; width: 0; background: #8E6F3D; transition: width 120ms linear; }
#lha .lha-updone { position: relative; height: 220px; border-radius: 18px; overflow: hidden; background: #E6DBC4; animation: lhaRise 600ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
#lha .lha-updone img { width: 100%; height: 100%; object-fit: cover; }
#lha .lha-updone-pdf { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 14px; font-weight: 600; color: #7A5E30; text-align: center; }
#lha .lha-received { position: absolute; left: 12px; bottom: 12px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(23, 21, 18, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FBF7EE; display: flex; align-items: center; gap: 6px; font-size: 12px; }
#lha .lha-replace { position: absolute; right: 12px; bottom: 12px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(245, 240, 232, 0.94); display: flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
#lha .lha-note { display: flex; flex-direction: column; gap: 10px; }
#lha .lha-note label { font-size: 15px; font-weight: 600; }
#lha .lha-note label span { font-weight: 400; color: #6B6358; }
#lha .lha-ta { width: 100%; min-height: 96px; padding: 14px 16px; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.16); font: 16px/1.55 Manrope, "LHARI Sans Fallback", -apple-system, sans-serif; color: #1A1814; resize: none; outline: none; -webkit-appearance: none; appearance: none; }
#lha .lha-ta:focus { box-shadow: inset 0 0 0 1.5px #1A1814; }
#lha .lha-pchs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
#lha .lha-pchs::-webkit-scrollbar { display: none; }
#lha .lha-pch { flex: none; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(26, 24, 20, 0.06); font-size: 13px; font-weight: 600; color: #3D3830; white-space: nowrap; }
#lha .lha-ant { padding: 12px 16px 12px 12px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.1); display: flex; gap: 14px; align-items: center; transition: background-color 400ms; }
#lha .lha-ant.is-on { background: #F4EAD5; }
#lha .lha-ant-img { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; }
#lha .lha-ant-img img { width: 100%; height: 100%; object-fit: cover; }
#lha .lha-ant-c { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
#lha .lha-ant-c label { font-size: 14px; font-weight: 600; }
#lha .lha-ant-c small { font-size: 12px; line-height: 1.5; color: #5E574D; }
#lha .lha-sw { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 50px; height: 30px; margin: 0; border: 0; border-radius: 999px; background: rgba(26, 24, 20, 0.2); transition: background-color 300ms; }
#lha .lha-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 500ms cubic-bezier(0.34, 1.3, 0.64, 1); }
#lha .lha-sw:checked { background: #1A1814; }
#lha .lha-sw:checked::after { transform: translateX(20px); }

#lha .lha-rv-card { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: #FFFFFF; }
#lha .lha-rv-card > img, #lha .lha-rv-img { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; object-fit: cover; }
#lha .lha-rv-img img { width: 100%; height: 100%; object-fit: cover; }
#lha .lha-rv-card > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#lha .lha-rv-card b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1; }
#lha .lha-rv-card small { font-size: 13px; color: #5E574D; }
#lha .lha-edit { margin-left: auto; font-size: 13px; color: #6B6358; text-decoration: underline; text-underline-offset: 3px; }
#lha .lha-terms { margin: 0; padding: 0; list-style: none; }
#lha .lha-terms li { padding: 14px 0; border-top: 1px solid rgba(26, 24, 20, 0.1); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
#lha .lha-terms li span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7A5E30; padding-top: 3px; }
#lha .lha-terms li span:last-child { font-size: 14px; line-height: 1.55; color: #3D3830; }
#lha .lha-email { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
#lha .lha-email input { height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.2); font: 16px Manrope, "LHARI Sans Fallback", -apple-system, sans-serif; color: #1A1814; outline: none; -webkit-appearance: none; appearance: none; }
#lha .lha-email input:focus { box-shadow: inset 0 0 0 1.5px #1A1814; }
#lha .lha-agree { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: #ECE3D1; font-size: 14px; line-height: 1.55; color: #3D3830; }
#lha .lha-agree input { width: 22px; height: 22px; margin: 0; accent-color: #1A1814; flex: none; }
#lha .lha-err { font-size: 13px; font-weight: 500; line-height: 1.45; color: #8f2f24; }
#lha .lha-err[hidden] { display: none; }

#lha .lha-cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10007; display: flex; gap: 12px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(245, 240, 232, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid rgba(26, 24, 20, 0.12); animation: lhaBar 500ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes lhaBar { from { transform: translateY(100%); } to { transform: none; } }
#lha .lha-anim-push .lha-cbar, #lha .lha-anim-in .lha-cbar { animation: none; }
#lha .lha-cbar-sum { height: 56px; padding: 0 6px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
#lha .lha-cbar-sum span { display: flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6358; }
#lha .lha-cbar-sum svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms cubic-bezier(0.34, 1.3, 0.64, 1); }
#lha .lha-cbar-sum.is-open svg { transform: rotate(180deg); }
#lha .lha-cbar-sum b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 28px; font-weight: 400; line-height: 1; }
#lha .lha-cbar-go { flex: 1 1 auto; height: 56px; padding: 0 18px; border-radius: 999px; background: #1A1814; color: #FBF7EE; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: background-color 240ms, color 240ms, transform 200ms; }
#lha .lha-cbar-go[disabled] { background: rgba(26, 24, 20, 0.12); color: #6B6358; cursor: not-allowed; }
#lha .lha-scrim { position: fixed; inset: 0; z-index: 10011; background: rgba(23, 21, 18, 0.4); opacity: 0; pointer-events: none; transition: opacity 450ms; }
#lha .lha-scrim.is-on { opacity: 1; pointer-events: auto; }
#lha .lha-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10012; padding: 12px 22px calc(30px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #FBF7EE; transform: translateY(105%); transition: transform 550ms cubic-bezier(0.2, 0.6, 0.2, 1); box-shadow: 0 -20px 50px -20px rgba(26, 24, 20, 0.4); }
#lha .lha-sheet.is-on { transform: none; }
#lha .lha-sheet > i { display: block; width: 40px; height: 4px; border-radius: 4px; background: rgba(26, 24, 20, 0.2); margin: 0 auto 18px; }
#lha .lha-sheet-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
#lha .lha-sheet-h b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 30px; font-weight: 400; }
#lha .lha-sheet-h span { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6358; }
#lha .lha-sheet dl { margin: 0 0 16px; display: grid; grid-template-columns: 110px minmax(0, 1fr); font-size: 14px; }
#lha .lha-sheet dt, #lha .lha-sheet dd { padding: 12px 0; border-top: 1px solid rgba(26, 24, 20, 0.1); }
#lha .lha-sheet dt { color: #6B6358; }
#lha .lha-sheet dd { margin: 0; text-align: right; }
#lha .lha-sheet p { font-size: 13px; color: #5E574D; }

#lha .lha-cdone { padding: calc(110px + env(safe-area-inset-top, 0px)) 26px calc(60px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
#lha .lha-ok { width: 92px; height: 92px; animation: lhaRing 800ms cubic-bezier(0.34, 1.3, 0.64, 1) both; }
#lha .lha-ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: lhaCk 700ms 350ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }
@keyframes lhaRing { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lhaCk { to { stroke-dashoffset: 0; } }
#lha .lha-dsteps { margin: 14px 0 0; padding: 0; list-style: none; width: 100%; text-align: left; }
#lha .lha-dsteps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(26, 24, 20, 0.1); font-size: 14px; color: #5E574D; }
#lha .lha-dsteps li > span:first-child { width: 22px; height: 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.3); }
#lha .lha-dsteps .is-done { background: #1A1814; box-shadow: none !important; }
#lha .lha-dsteps .is-cur { box-shadow: inset 0 0 0 1.5px #1A1814 !important; }
#lha .lha-dsteps b { color: #1A1814; }
#lha .lha-cta { width: 100%; height: 52px; margin-top: 4px; border-radius: 26px; background: #111111; color: #FFFFFF; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
#lha .lha-cta-light { background: #F4EFE6; color: #1A1814; margin-top: 8px; }
#lha .lha-cta-o { background: transparent; color: #1A1814; box-shadow: inset 0 0 0 1px rgba(26, 24, 20, 0.2); margin-top: 10px; }

/* the six pieces (their original pictures), swipe; pictures load as they near the screen */
#lha .lha-story { padding: 30px 0 0; content-visibility: auto; contain-intrinsic-size: auto 720px; }
#lha .lha-story-head { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
#lha .lha-h2 { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.04; color: #1A1814; }
#lha .lha-h2 em { font-style: italic; }
#lha .lha-studies { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 4px 20px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
#lha .lha-studies::-webkit-scrollbar { display: none; }
#lha .lha-study { flex: 0 0 72%; margin: 0; scroll-snap-align: start; border-radius: 20px; overflow: hidden; background: #FBF7EE; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06); transform: scale(0.96); opacity: 0.72; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease, box-shadow 420ms ease; }
#lha .lha-study.is-on { transform: none; opacity: 1; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 18px 36px -24px rgba(17, 17, 17, 0.45); }
#lha .lha-study picture { display: block; aspect-ratio: 3 / 4; background: #E6DBC4; }
#lha .lha-study img { display: block; width: 100%; height: 100%; object-fit: cover; }
#lha .lha-study figcaption { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
#lha .lha-study figcaption span { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #8E6F3D; }
#lha .lha-study figcaption b { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 22px; font-weight: 500; line-height: 1.1; color: #1A1814; }
#lha .lha-study figcaption small { font-size: 12px; line-height: 1.5; color: #6B6358; }
#lha .lha-sdots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 0; }
#lha .lha-sdots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(26, 24, 20, 0.18); transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms ease; }
#lha .lha-sdots i.is-on { width: 18px; background: #1A1814; }
#lha .lha-fine { padding: 14px 20px 0; font-size: 10px; line-height: 1.5; color: #8E8474; }
#lha .lha-why { margin: 40px 12px 0; border-radius: 26px; overflow: hidden; background: #202422; color: #F2EDE3; content-visibility: auto; contain-intrinsic-size: auto 700px; }
#lha .lha-why-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
#lha .lha-why-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
#lha .lha-why-copy { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 26px; }
#lha .lha-why .lha-eyebrow { color: #A9C0C6; }
#lha .lha-why .lha-h2 { color: #F4EFE6; }
#lha .lha-why p { font-size: 13px; line-height: 1.75; color: #C8C6BE; }
#lha .lha-faq { margin: 32px 20px 0; border-top: 1px solid rgba(26, 24, 20, 0.12); content-visibility: auto; contain-intrinsic-size: auto 300px; }
#lha .lha-faq summary { font-family: "Cormorant Garamond", "LHARI Serif Fallback", Georgia, serif; font-size: 20px; letter-spacing: 0; text-transform: none; font-weight: 500; min-height: 60px; gap: 14px; }
#lha .lha-faq .lha-acc-body { font-size: 14px; }

/* ---- tablets (this file only loads on phones and touch tablets, so 700px and up means a tablet; iPad mini
 * portrait is 744px wide and falls under the phone query, so the switch sits below 768px) ----
 * Same type, colours and motion as the phone; the wider screen gets a centred column (shop, Custom Studio)
 * or two columns (product: gallery left and pinned, details right). --lha-pad keeps content within 1100px. */
@media (min-width: 700px) {
	#lha .lha-screen { --lha-pad: max(40px, calc((100% - 1100px) / 2)); }
	#lha .lha-head { padding: calc(104px + env(safe-area-inset-top, 0px)) var(--lha-pad) 8px; gap: 10px; }
	#lha .lha-h1 { font-size: 52px; }
	#lha .lha-chips { padding: 18px var(--lha-pad) 24px; }
	#lha .lha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; padding: 0 var(--lha-pad) calc(170px + env(safe-area-inset-bottom, 0px)); }
	#lha .lha-card { gap: 9px; }
	#lha .lha-card-name { font-size: 19px; }
	#lha .lha-card-price { font-size: 13px; }
	#lha .lha-empty { padding: 48px var(--lha-pad) 170px; }

	#lha .lha-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
	#lha .lha-product .lha-gallery { grid-column: 1; grid-row: 1; position: sticky; top: 0; }
	#lha .lha-product .lha-pbody { grid-column: 2; grid-row: 1; max-width: 520px; padding: calc(96px + env(safe-area-inset-top, 0px)) 40px 0 36px; }
	#lha .lha-product .lha-related { grid-column: 1 / -1; padding: 64px var(--lha-pad) calc(170px + env(safe-area-inset-bottom, 0px)); }
	#lha .lha-product > .lha-pbody:last-child { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }
	#lha .lha-h1-product { font-size: 42px; }
	#lha .lha-related-title { font-size: 30px; }
	#lha .lha-grid3 { gap: 20px; }

	#lha .lha-custom .lha-prog,
	#lha .lha-custom .lha-cbody,
	#lha .lha-custom .lha-story-head,
	#lha .lha-custom .lha-fine,
	#lha .lha-custom .lha-faq { max-width: 640px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
	#lha .lha-custom .lha-prog { max-width: none; padding-left: max(40px, calc((100% - 560px) / 2)); padding-right: max(40px, calc((100% - 560px) / 2)); }
	#lha .lha-custom .lha-faq { padding: 0; }
	#lha .lha-studies { padding-left: max(40px, calc((100% - 640px) / 2 + 40px)); scroll-padding-left: max(40px, calc((100% - 640px) / 2 + 40px)); }
	#lha .lha-study { flex-basis: 300px; }
	#lha .lha-why { max-width: 640px; margin: 48px auto 0; display: grid; grid-template-columns: 0.9fr 1fr; }
	#lha .lha-why-img { aspect-ratio: auto; height: 100%; }
	#lha .lha-ch1 { font-size: 48px; }
	#lha .lha-opt-img { height: 240px; }
	#lha .lha-cbar { padding-left: max(16px, calc((100% - 600px) / 2)); padding-right: max(16px, calc((100% - 600px) / 2)); }
	#lha .lha-sheet { left: 50%; right: auto; width: 560px; margin-left: -280px; }
}
@media (min-width: 1024px) {
	#lha .lha-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#lha .lha-product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
	#lha .lha-product .lha-pbody { padding-left: 48px; }
}

@media (prefers-reduced-motion: reduce) {
	#lha .lha-anim-in, #lha .lha-anim-push, #lha .lha-rise { animation: none !important; }
	#lha button, #lha .lha-chip, #lha .lha-opt, #lha .lha-sheet, #lha .lha-seg i { transition: none !important; }
	#lha .lha-cbar, #lha .lha-arc.is-on { animation: none !important; }
	#lha .lha-study, #lha .lha-sdots i { transition: none !important; }
}