/* Document normalization; component layouts live in their own stylesheets. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--myopal-color-background);
	color: var(--myopal-color-ink);
	font-family: var(--myopal-font-body);
	font-size: var(--myopal-text-base);
	font-weight: var(--myopal-weight-regular);
	line-height: var(--myopal-leading-body);
	overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl) {
	margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-weight: var(--myopal-weight-strong);
	line-height: var(--myopal-leading-heading);
	text-wrap: balance;
}

h1 { font-size: var(--myopal-text-heading); }
h2 { font-size: var(--myopal-text-xl); }
h3 { font-size: var(--myopal-text-lg); }
:where(h4, h5, h6) { font-size: var(--myopal-text-base); }

:where(ul, ol) {
	padding-inline-start: var(--myopal-space-6);
}

small { font-size: var(--myopal-text-sm); }
:where(b, strong) { font-weight: var(--myopal-weight-bold); }

a {
	color: var(--myopal-color-gold-ink);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 0.12em; }

:focus-visible {
	outline: 2px solid var(--myopal-color-focus);
	outline-offset: 4px;
}

:where(img, video) {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(svg, iframe) {
	max-width: 100%;
}

:where(button, input, select, textarea) {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
}

:where(input, select, textarea) {
	width: 100%;
	min-width: 0;
	min-height: var(--myopal-control-min-height);
	padding: var(--myopal-space-3) var(--myopal-space-4);
	border: 1px solid var(--myopal-color-border-strong);
	border-radius: var(--myopal-radius-sm);
	background: var(--myopal-color-surface-raised);
	color: var(--myopal-color-ink);
}

:where(input, textarea)::placeholder {
	color: var(--myopal-color-subtle);
	opacity: 1;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

:where(input[type="checkbox"], input[type="radio"]) {
	width: 1.25rem;
	height: 1.25rem;
	min-height: 0;
	padding: 0;
	vertical-align: middle;
	accent-color: var(--myopal-color-gold-ink);
}

:where(input[type="range"], input[type="color"]) {
	padding: var(--myopal-space-1);
	accent-color: var(--myopal-color-gold-ink);
}

input[type="hidden"] { display: none; }

:where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var(--myopal-control-min-height);
	padding: var(--myopal-space-3) var(--myopal-space-6);
	border: 1px solid transparent;
	border-radius: var(--myopal-radius-sm);
	background: var(--myopal-color-surface-dark);
	color: var(--myopal-color-on-dark);
	font-weight: var(--myopal-weight-medium);
	line-height: var(--myopal-leading-compact);
	text-align: center;
	cursor: pointer;
	transition: opacity var(--myopal-motion-duration) var(--myopal-motion-easing);
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):hover:not(:disabled) {
	opacity: 0.88;
}

:where(button, input, select, textarea):disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

:where(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--myopal-color-error);
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: var(--myopal-space-4);
	border: 1px solid var(--myopal-color-border);
	border-radius: var(--myopal-radius-sm);
}

legend {
	padding-inline: var(--myopal-space-2);
	font-weight: var(--myopal-weight-medium);
}

label { line-height: var(--myopal-leading-compact); }

.myopal-container {
	width: 100%;
	max-width: var(--myopal-content-wide);
	margin-inline: auto;
	padding-inline-start: max(var(--myopal-container-gutter), env(safe-area-inset-left, 0px));
	padding-inline-end: max(var(--myopal-container-gutter), env(safe-area-inset-right, 0px));
}

.myopal-flow > * + * { margin-block-start: var(--myopal-space-6); }

/* Shared WordPress accessibility utility; keyboard-focusable text stays visible. */
.screen-reader-text:not(:focus),
.myopal-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.myopal-skip-link:focus,
.screen-reader-text:focus {
	position: fixed;
	inset-block-start: max(var(--myopal-space-4), env(safe-area-inset-top, 0px));
	inset-inline-start: max(var(--myopal-space-4), env(safe-area-inset-left, 0px));
	z-index: var(--myopal-layer-notice);
	padding: var(--myopal-space-3) var(--myopal-space-4);
	border-radius: var(--myopal-radius-sm);
	background: var(--myopal-color-surface);
	color: var(--myopal-color-ink);
}

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

/* Shared optical box for all local Font Awesome assets. */
.myopal-icon { display: inline-block; width: var(--myopal-icon-size, 1.25rem); height: var(--myopal-icon-size, 1.25rem); flex: none; vertical-align: middle; fill: currentColor; }

/* Two right-arrow semantics, independent of the size of other Font Awesome icons. */
:root .myopal-icon.myopal-chevron{width:var(--myopal-chevron-size);height:var(--myopal-chevron-size);flex:none}.myopal-chevron--small{--myopal-chevron-size:var(--myopal-chevron-small)}.myopal-chevron--large{--myopal-chevron-size:var(--myopal-chevron-large)}
/* Shared dismiss control, used by notification toast and expandable action input. */
/* Icon controls retain their resting surface and keyboard focus; touch activation
   must not paint a browser tap rectangle over icons or open another control. */
:is(.myopal-icon-control,.myopal-icon-button,.myopal-close-button,.myopal-header-action,.myopal-member-capsule a,.myopal-favorite-control,.myopal-footer-social a,.myopal-footer-social button,.myopal-preview-tools button,.myopal-media-dots button),:where(a,button,summary):has(>.myopal-icon):not(.myopal-action):not(.button){-webkit-tap-highlight-color:transparent}
.myopal-icon-control{appearance:none;border:0;background:transparent;color:inherit}
[data-dialog-focus][tabindex="-1"]:focus{outline:none}
.myopal-icon-button,.myopal-close-button{display:grid;place-items:center;width:var(--myopal-control-min-height);min-width:var(--myopal-control-min-height);height:var(--myopal-control-min-height);padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.myopal-icon-button .myopal-icon,.myopal-close-button .myopal-icon{width:var(--myopal-close-icon);height:var(--myopal-close-icon)}.myopal-icon-button:focus-visible,.myopal-close-button:focus-visible{outline:2px solid var(--myopal-color-focus);outline-offset:1px}.myopal-dismissible{position:relative;min-height:var(--myopal-control-min-height);padding-inline-end:calc(var(--myopal-control-min-height) + .5rem)}.myopal-dismissible>.myopal-close-button{position:absolute;top:0;right:0}

/* Indeterminate inline feedback, shared by result and saved-plan copy. */
.myopal-spinner{display:inline-block;flex:none;width:1rem;height:1rem;border:2px solid var(--myopal-color-border);border-top-color:var(--myopal-color-gold-ink);border-radius:50%;animation:myopal-inline-spin 1s linear infinite}
.myopal-spinner[hidden]{display:none}
.myopal-loading-text[aria-busy=true]{background:linear-gradient(90deg,var(--myopal-color-muted) 30%,var(--myopal-color-surface) 48%,var(--myopal-color-muted) 66%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:myopal-copy-wipe 6.5s linear infinite}
.myopal-status.myopal-loading-copy{min-height:3.3em}
.myopal-loading-text.myopal-loading-rotation[aria-busy=true]{animation-name:myopal-copy-rotate}
@keyframes myopal-inline-spin{to{transform:rotate(360deg)}}
@keyframes myopal-copy-wipe{0%,6%{background-position:100% 0}88%,100%{background-position:-100% 0}}
@keyframes myopal-copy-rotate{0%{background-position:100% 0;opacity:0}6%{background-position:100% 0;opacity:1}88%{background-position:-100% 0;opacity:1}96%,100%{background-position:-100% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.myopal-spinner,.myopal-loading-text[aria-busy=true]{animation:none}.myopal-loading-text[aria-busy=true]{background:none;color:var(--myopal-color-muted)}}

/* Native dialogs provide modal focus, Escape handling and an inert background. */
.myopal-sheet {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: 40rem;
	max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px));
	margin: 0 auto;
	padding: 1.0625rem 1.0625rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-radius: 1.0625rem 1.0625rem 0 0;
	background: #fffdf8;
	color: #111;
	box-shadow: 0 -0.5625rem 1.5625rem rgb(0 0 0 / 22%);
	overscroll-behavior: contain;
}
.myopal-sheet::backdrop { background: rgb(0 0 0 / 42%); }
body:has(.myopal-sheet[open]) { overflow: hidden; }
.myopal-sheet-heading { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 2.5rem; }
.myopal-sheet-heading h2 { margin: 0; font: 600 0.9375rem/1.4 var(--myopal-font-body); }
.myopal-sheet-heading button:not(.myopal-close-button) { position: absolute; border:0; border-radius:0; min-height: 2.75rem; padding: 0.5rem; background: none; color: #9a7334; font-size: 0.8125rem; }
.myopal-sheet-close,.myopal-sheet-heading>.myopal-close-button { position:absolute; inset-inline-start: -0.5rem; }
.myopal-sheet-reset { inset-inline-end: -0.5rem; }
.myopal-sheet-options { display: grid; gap: 0.6875rem; margin-block-start: 0.6875rem; }
.myopal-sheet-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-width: 0;
	min-height: 2.375rem;
	padding: 0.375rem 0.5rem;
	border: 1px solid rgb(0 0 0 / 10%);
	border-radius: 0.5rem;
	background: #fff;
	color: #222;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
}
.myopal-sheet-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.myopal-sheet-option:has(:focus-visible) { outline: 2px solid var(--myopal-color-focus); outline-offset: 2px; }
.myopal-sheet-option:has(:checked),
.myopal-sheet-option[aria-pressed="true"] { border-color: #c89f4a; background: linear-gradient(135deg, #fff6df, #f3dfae); color: #111; font-weight: 600; }
.myopal-sheet-option[aria-disabled] { color: #888; }
.myopal-sheet-option small { color: #888; font-size: 0.625rem; font-weight: 400; }
.myopal-sheet-option[hidden] { display: none; }
.myopal-sheet-note { padding-block: 0.25rem; font-size: 0.6875rem; line-height: 1.65; color: #8a7a62; }
.myopal-sheet-footer { flex-shrink: 0; margin-block-start: 0.875rem; }
.myopal-sheet-footer button { width: 100%; min-height: 2.4375rem; padding: 0.5rem; border-radius: 0.5625rem; background: #111; color: #f3d188; font-size: 0.875rem; font-weight: 600; }
.myopal-sheet--filter { height: 76dvh; padding: 0; overflow: hidden; background: #f7f3ea; }
.myopal-sheet--filter > form { display: flex; flex-direction: column; height: 100%; }
.myopal-sheet--filter .myopal-sheet-heading { min-height: 3.375rem; border-bottom: 1px solid #00000014; background: #fffdf8; }
.myopal-sheet--filter .myopal-sheet-reset { inset-inline-end: 0.5625rem; }
.myopal-sheet--filter :is(.myopal-sheet-close,.myopal-sheet-heading>.myopal-close-button) { inset-inline-start: 0.5625rem; }
.myopal-sheet-drag { display: grid; place-items: center; gap: 0.375rem; padding: 0.5rem 3rem; touch-action: none; }
.myopal-sheet-drag > span { width: 2.25rem; height: 0.25rem; border-radius: 999px; background: #00000024; }
.myopal-filter-body { display: grid; grid-template-columns: minmax(5.5rem, 24%) minmax(0, 1fr); flex: 1; min-height: 0; border-bottom: 1px solid #00000014; }
.myopal-filter-rail { overflow-y: auto; overscroll-behavior: contain; border-inline-end: 1px solid #00000014; background: #fbf7ef; }
.myopal-filter-rail button { position: relative; display: block; width: 100%; padding: 0.875rem 0.5rem 0.875rem 1.125rem; border: 0; border-radius: 0; background: none; color: #333; text-align: start; font-size: 0.8125rem; font-weight: 400; }
.myopal-filter-rail button[hidden] { display:none; }
.myopal-filter-rail [aria-current] { box-shadow: inset 3px 0 #d4af37; background: linear-gradient(90deg, #f8e8c2, #fbf7ef); color: #9a7334; font-weight: 600; }
.myopal-filter-rail :is([data-selected],.is-selected)::after { content: ""; position: absolute; inset-inline-end: 0.5rem; inset-block-start: 48%; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #d4af37; }
.myopal-filter-sections { overflow-y: auto; overscroll-behavior: contain; padding: 1.0625rem 0.875rem; background: #fffdf8; }
.myopal-filter-section { min-width:0; margin:0; border:0; padding:0; padding-block-end: 1.75rem; scroll-margin-top: 0.5rem; }
.myopal-filter-section :is(h3,legend) { margin: 0 0 0.875rem; font: 600 0.9375rem/1.4 var(--myopal-font-body); color: #9a7334; }
.myopal-filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6875rem; margin-block-end: 1.625rem; }
.myopal-filter-options .myopal-sheet-option { min-height: 2.0625rem; padding: 0.375rem 0.25rem; border-radius: 0.4375rem; font-size: 0.75rem; overflow-wrap: anywhere; }
.myopal-sheet--filter .myopal-sheet-footer { margin: 0; padding: 0.6875rem 1.0625rem calc(0.6875rem + env(safe-area-inset-bottom, 0px)); background: #fffdf8; }

.myopal-price-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.myopal-price-inputs label{display:grid;gap:.4rem;min-width:0;margin:0;font-size:.75rem}
.myopal-price-inputs input{width:100%;min-width:0;min-height:var(--myopal-control-min-height);padding:.6rem .45rem}
.myopal-filter-error{margin:0;padding:.5rem 1rem;color:var(--myopal-color-error);font-size:.75rem}
.myopal-filter-error:empty{display:none}
/* Native bottom sheets retain their semantic layout and share motion only. */
dialog[data-myopal-sheet][open]{animation:myopal-sheet-enter 260ms ease-out}
dialog[data-myopal-sheet][open]::backdrop{animation:myopal-sheet-backdrop-in 260ms ease-out}
dialog[data-myopal-sheet][data-sheet-closing]{animation:myopal-sheet-exit 220ms ease-in both;pointer-events:none}
dialog[data-myopal-sheet][data-sheet-closing]::backdrop{animation:myopal-sheet-backdrop-out 220ms ease-in both}
@keyframes myopal-sheet-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes myopal-sheet-exit{from{transform:var(--myopal-sheet-start,translateY(0))}to{transform:translateY(100%)}}
@keyframes myopal-sheet-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes myopal-sheet-backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){dialog[data-myopal-sheet][open],dialog[data-myopal-sheet][open]::backdrop{animation:none}}