/* Global shell only. Business components and the finished homepage are separate. */
body.myopal-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}



.myopal-header-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--myopal-space-6);
}

.myopal-branding { flex: 1; min-width: 0; }

.myopal-site-title {
	display: inline-block;
	max-width: 100%;
	font-family: var(--myopal-font-display);
	font-size: var(--myopal-text-xl);
	line-height: var(--myopal-leading-heading);
	letter-spacing: 0.04em;
	color: var(--myopal-color-on-dark);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.myopal-branding .custom-logo-link { display: inline-block; }

.myopal-branding .custom-logo {
	width: auto;
	max-width: min(100%, var(--myopal-logo-max-width));
	height: auto;
	max-height: 4rem;
	object-fit: contain;
}

body.myopal-site > #myopal-main,.myopal-customer-surface > #myopal-main { flex: 1 0 auto; min-width: 0; }
.myopal-main { padding-block: var(--myopal-page-space); }

.myopal-main:focus { outline: none; }

.myopal-placeholder {
	max-width: var(--myopal-content-reading);
	padding-block: var(--myopal-space-8);
}

.myopal-eyebrow {
	color: var(--myopal-color-gold-ink);
	font-size: var(--myopal-text-xs);
	font-weight: var(--myopal-weight-strong);
	letter-spacing: var(--myopal-tracking-label);
	line-height: var(--myopal-leading-compact);
}

.myopal-placeholder h1 {
	font-family: var(--myopal-font-display);
	font-weight: var(--myopal-weight-regular);
}

.myopal-placeholder-description {
	max-width: 48ch;
	color: var(--myopal-color-muted);
	font-size: var(--myopal-text-lg);
}

.myopal-entry { max-width: var(--myopal-content-reading); }
.myopal-entry + .myopal-entry { margin-block-start: var(--myopal-space-12); }

/* Original store footer: brand contacts, policies and copyright. */
/* Footer shares the site surface, focus and dialog tokens. */
.myopal-site-footer { padding:1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom,0px)); background:var(--myopal-color-surface); border-top:1px solid var(--myopal-color-border); color:var(--myopal-color-muted); font-size:.75rem; }
/* One shell clearance contract; JS measures actual fixed controls when available. */
body.myopal-site { --myopal-fixed-bottom-clearance: 0px; padding-block-end: var(--myopal-fixed-bottom-clearance); }
.myopal-footer-inner { display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
.myopal-footer-social,.myopal-footer-policies { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.myopal-footer-social > :is(a,button) { display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:0; border-radius:var(--myopal-radius-pill); background:transparent; color:var(--myopal-channel-color); text-decoration:none; }
.myopal-footer-social .myopal-icon { width:1.35rem; height:1.35rem; }
.myopal-footer-policies a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.4rem .65rem; border-radius:var(--myopal-radius-sm); color:var(--myopal-color-muted); text-decoration:none; }
.myopal-footer-policies a:hover,.myopal-footer-social > :is(a,button):hover { background:var(--myopal-color-background); }
.myopal-footer-policies a:hover { color:var(--myopal-color-ink); }
.myopal-footer-copyright { margin:0; }
.myopal-footer-contact { position:fixed; inset:0; width:min(22rem,calc(100% - 2rem)); max-height:calc(100dvh - 3rem); margin:auto; padding:3rem 1.25rem 1.25rem; overflow:auto; border:1px solid var(--myopal-color-border); border-radius:var(--myopal-radius-lg); background:var(--myopal-color-surface); color:var(--myopal-color-ink); box-shadow:var(--myopal-shadow-overlay); text-align:center; }
.myopal-footer-contact::backdrop { background:#0006; }
.myopal-footer-contact > button { position:absolute; top:.25rem; right:.25rem; display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:0; border-radius:var(--myopal-radius-pill); background:none; color:inherit; }
.myopal-footer-contact img { width:auto; height:min(18.75rem,55dvh); margin-inline:auto; object-fit:contain; }
.myopal-footer-contact p { margin:.75rem 0 0; }

/* Shared actions and two-destination route navigation, scoped to explicit components. */
.myopal-action { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--myopal-action-height); padding:var(--myopal-action-padding); border:1px solid var(--myopal-color-gold); border-radius:var(--myopal-radius-pill); background:var(--myopal-action-background); color:var(--myopal-action-foreground); font-size:var(--myopal-action-font-size); font-weight:var(--myopal-weight-strong); text-align:center; text-decoration:none; cursor:pointer; }
.myopal-action--secondary { background:var(--myopal-action-secondary-background); color:var(--myopal-action-secondary-foreground); border-color:var(--myopal-color-border); }
.myopal-action:hover { filter:brightness(.94); }
.myopal-segmented { --myopal-segment:0; --myopal-segment-motion:.18s; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); position:relative; isolation:isolate; padding:.25rem; background:var(--myopal-color-background); border:1px solid var(--myopal-color-border); border-radius:var(--myopal-radius-pill); }
.myopal-segmented:has(:nth-child(2):is([aria-current],[aria-selected="true"])) { --myopal-segment:1; }
.myopal-segmented:not([data-custom-tabs])::before, .myopal-segmented[data-custom-tabs][role="tablist"]::before { content:''; position:absolute; inset:.25rem auto .25rem .25rem; width:calc(50% - .25rem); border-radius:inherit; background:var(--myopal-color-surface); box-shadow:var(--myopal-shadow-card); transform:translateX(calc(var(--myopal-segment) * 100%)); transition:transform var(--myopal-segment-motion) ease; z-index:-1; }
.myopal-segmented :is(a,button) { padding:.75rem .4rem; min-width:0; border:0; background:transparent; cursor:pointer; text-align:center; color:var(--myopal-color-muted); font-size:.8125rem; text-decoration:none; overflow-wrap:anywhere; }
.myopal-segmented :is([aria-current],[aria-selected="true"]) { color:var(--myopal-color-ink); font-weight:600; }
.myopal-confirm { width:min(25rem,calc(100% - 2rem)); padding:1.5rem; border:1px solid var(--myopal-color-border); border-radius:var(--myopal-radius-lg); background:var(--myopal-color-background); color:var(--myopal-color-ink); }
.myopal-confirm::backdrop { background:#0008; }
.myopal-confirm h2 { font-size:1.125rem; margin-bottom:1rem; }
.myopal-confirm p { font-size:.875rem; margin-bottom:1.5rem; }
.myopal-confirm form { display:flex; flex-wrap:wrap; gap:.75rem; }
.myopal-confirm button { flex:1; }
@media(prefers-reduced-motion:reduce) { .myopal-segmented { --myopal-segment-motion:0s; } }

.myopal-action--danger { background:var(--myopal-action-danger-background); border-color:var(--myopal-action-danger-foreground); color:var(--myopal-action-danger-foreground); }

.myopal-segmented :is(a,button):focus-visible { outline:2px solid var(--myopal-color-focus); outline-offset:2px; border-radius:inherit; }
/* Shared entry-card geometry; each module keeps its data and rendering. */
:is(.myopal-account-row,.myopal-member-link-card) { display:flex; align-items:center; justify-content:space-between; min-width:0; gap:.875rem; font-size:.875rem; text-decoration:none; overflow-wrap:anywhere; }
:is(.myopal-account-row,.myopal-member-link-card) > span { min-width:0; }
:is(.myopal-account-row,.myopal-member-link-card) > .myopal-icon:last-child { flex-shrink:0; }

/* Shared rounded collection surface: Products, Designs and saved/archived plans. */
.myopal-collection-panel { position: relative; display: flex; flex-direction: column; gap: var(--myopal-space-5); width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.5rem var(--myopal-container-gutter) 1.5rem; border-radius: 1.5rem 1.5rem 0 0; background: var(--myopal-color-background); }

.myopal-action:disabled,.myopal-action[aria-disabled="true"]{opacity:.55;cursor:not-allowed}.myopal-action:focus-visible{outline:2px solid var(--myopal-color-focus);outline-offset:3px}

/* Shared action contract: two equal columns, including form-owned actions. */
.myopal-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;align-items:stretch}
.myopal-action-row>form{display:flex;flex-direction:column;margin:0;min-width:0}
.myopal-action-row .myopal-action{display:flex;align-items:center;justify-content:center;min-width:0;min-height:var(--myopal-action-height,44px);height:100%;width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;text-decoration:none;line-height:1.4}
.myopal-action-row>form>output:empty{display:none}.myopal-action-row>form>.myopal-action{flex:1}
.myopal-action-row [hidden]{display:none!important}.myopal-action-row:has(>:only-child){grid-template-columns:minmax(0,1fr)}
.myopal-status{font-size:.875rem;line-height:1.6;overflow-wrap:anywhere}.myopal-status:empty{display:none}.myopal-status[data-error=true]{color:var(--myopal-color-error)}
.myopal-action[aria-busy=true]{opacity:.65;cursor:wait}.myopal-action:focus-visible{outline:2px solid var(--myopal-color-gold-ink);outline-offset:3px}
.myopal-action-footer{position:relative;z-index:5;background:var(--myopal-color-surface);border-top:1px solid var(--myopal-color-border);padding:1rem 1rem max(1rem,env(safe-area-inset-bottom,0px))}


html{scroll-padding-bottom:calc(var(--myopal-fixed-bottom-clearance,0px) + 1rem)}

/* Compact filter variant: the hit area stays generous; the selected label has no filled pill. */
.myopal-segmented.myopal-segmented--compact{display:flex;gap:var(--myopal-space-3);padding:0;border:0;border-radius:0;background:transparent;min-width:0}
.myopal-segmented.myopal-segmented--compact::before{display:none}
.myopal-segmented--compact :is(a,button){position:relative;min-height:var(--myopal-control-min-height);padding:.5rem .125rem;white-space:nowrap;border-radius:0;font-size:var(--myopal-text-sm)}
.myopal-segmented--compact [aria-pressed=true]{color:var(--myopal-color-gold-ink);font-weight:600}
.myopal-segmented--compact [aria-pressed=true]::after{content:'';position:absolute;inset:auto .125rem .3rem;height:2px;background:var(--myopal-color-gold);border-radius:var(--myopal-radius-pill)}