/* Design gallery composition: editorial works and private plans retain distinct hierarchy. */
.myopal-design { width:100%; max-width:var(--myopal-content-wide); margin-inline:auto; background:var(--myopal-color-background); padding-bottom:var(--myopal-space-12); }
.myopal-design-hero { padding:3rem 1.4rem 3.75rem; text-align:center; background:var(--myopal-catalog-dark); color:var(--myopal-color-on-dark); }
.myopal-design-hero > p { font-size:.6875rem; letter-spacing:.18em; color:var(--myopal-color-gold); }
.myopal-design-hero :is(h1,h2) { max-width:24ch; margin:1rem auto .75rem; font-size:clamp(1.4rem,4.5vw,2.5rem); font-weight:400; line-height:1.3; }
.myopal-design-hero > span { font-size:.8125rem; color:#ffffffb8; }
.myopal-design-content { display:flex; flex-direction:column; gap:var(--myopal-space-5); padding:var(--myopal-space-5) var(--myopal-container-gutter); }
.myopal-design-hero + .myopal-design-content { position:relative; margin-top:-1.1rem; border-radius:var(--myopal-radius-lg) var(--myopal-radius-lg) 0 0; background:var(--myopal-color-background); }
.myopal-design-heading h1 { font-size:1.5rem; margin-bottom:.6rem; }.myopal-design-heading p { font-size:.875rem; color:var(--myopal-color-muted); }
.myopal-design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem .75rem; margin:0; padding:0; list-style:none; }
.myopal-design-grid--editorial > :nth-child(5n + 1) { grid-column:1 / -1; }
.myopal-design-grid--editorial > .myopal-design-card--plan:nth-child(5n + 1) .myopal-design-card-image { aspect-ratio:3 / 2; }
.myopal-design-card { position:relative; min-width:0; overflow:hidden; border-radius:var(--myopal-radius-md); background:var(--myopal-color-surface); box-shadow:var(--myopal-shadow-card); }
.myopal-design-card-image { display:grid; place-items:center; aspect-ratio:1; overflow:hidden; background:#ece7df; text-decoration:none; }.myopal-design-card-image img { width:100%; height:100%; object-fit:cover; }.myopal-design-card--plan .myopal-design-card-image img { object-fit:contain; }
.myopal-design-card-copy { padding:.8rem; }.myopal-design-card-copy a { color:inherit; text-decoration:none; }.myopal-design-card-copy h2 { font-size:.875rem; line-height:1.5; overflow-wrap:anywhere; }.myopal-design-card-copy small { font-size:.6875rem; color:var(--myopal-color-muted); }
.myopal-design-no-image { padding:1rem; font-size:.8rem; color:var(--myopal-color-muted); }
.myopal-design-count { font-size:.75rem; color:var(--myopal-color-muted); margin:0; }.myopal-design-empty { padding:3rem 1rem; text-align:center; }.myopal-design-empty h2 { font-size:1.15rem; }.myopal-design-empty p { margin-block:1rem; font-size:.875rem; color:var(--myopal-color-muted); }
.myopal-design-detail { max-width:42rem; }.myopal-design-detail .myopal-media-slide img { object-fit:contain; }.myopal-design-detail-content { gap:.85rem; }
.myopal-design-panel { padding:1.15rem; border-radius:var(--myopal-radius-md); background:var(--myopal-color-surface); box-shadow:var(--myopal-shadow-card); }.myopal-design-panel .myopal-design-work-title { font-size:1.2rem; line-height:1.4; overflow-wrap:anywhere; }.myopal-design-panel h2 { font-size:1rem; margin-bottom:.75rem; }.myopal-design-panel p { font-size:.8125rem; color:var(--myopal-color-muted); }.myopal-design-panel a:not(.myopal-action) { font-size:.8125rem; }.myopal-design-source { color:var(--myopal-color-gold-ink); margin-bottom:.5rem; font-size:.75rem; }.myopal-design-prose { font-size:.875rem; overflow-wrap:anywhere; }.myopal-design-prose > * + * { margin-top:.8rem; }
.myopal-design-actions {display:flex;align-items:center;gap:var(--myopal-space-3);}
.myopal-design-actions :is(button,a) { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.25rem; min-width:3rem; min-height:2.75rem; background:none; color:inherit; border:0; padding:.25rem; text-decoration:none; font-size:.6875rem; }.myopal-design-actions .myopal-favorite-form { margin:0; }.myopal-design-actions .myopal-favorite-control::before { content:none; }.myopal-design-actions .myopal-icon { width:1.125rem; height:1.125rem; }
.myopal-design-actions .myopal-design-enquiry { flex:1; flex-direction:row; gap:.65rem; padding:.7rem; background:var(--myopal-catalog-gold); color:var(--myopal-color-black); border-radius:var(--myopal-radius-pill); font-size:.8125rem; }
.myopal-plan-visibility { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem; font-size:.75rem; border-top:1px solid var(--myopal-color-border); }.myopal-plan-visibility > span { flex:1; min-width:6rem; }.myopal-plan-visibility small { display:block; color:var(--myopal-color-muted); font-size:.6875rem; }.myopal-plan-visibility [role=switch] { min-height:2rem; padding:.35rem .7rem; border-radius:var(--myopal-radius-pill); background:#e9e2d7; color:var(--myopal-color-muted); }.myopal-plan-visibility [aria-checked=true] { background:var(--myopal-color-gold-ink); color:white; }
.myopal-plan-select { position:absolute; top:.5rem; left:.5rem; padding:.4rem; background:var(--myopal-color-surface); border-radius:.5rem; font-size:.75rem; }.myopal-plan-select input { width:1rem; height:1rem; margin:0 .4rem 0 0; }
.myopal-plan-management { display:flex; gap:1rem; align-items:center; position:sticky; bottom:1rem; padding:.75rem; background:var(--myopal-color-surface); border-radius:var(--myopal-radius-pill); box-shadow:var(--myopal-shadow-overlay); }.myopal-plan-management form { flex:1; }.myopal-plan-management button { font-size:.8rem; width:100%; }.myopal-design [hidden] { display:none; }.myopal-design output { flex-basis:100%; font-size:.75rem; }.myopal-design [role=alert] { color:var(--myopal-color-error); }
@media(min-width:48rem) { .myopal-design-grid--editorial > .myopal-design-card--plan:nth-child(5n + 1) .myopal-design-card-image { aspect-ratio:2 / 1; } .myopal-design-content { padding:2rem; gap:1.5rem; }.myopal-design-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }.myopal-design-grid--editorial { grid-template-columns:repeat(4,minmax(0,1fr)); }.myopal-design-grid--editorial > :nth-child(5n + 1) { grid-column:span 4; }.myopal-design--plans .myopal-design-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }



/* Official works crop only their ordinary display; shared full-screen previews stay complete. */
.myopal-design-card:not(.myopal-design-card--plan) .myopal-design-card-image { position:relative; aspect-ratio:1; }
.myopal-design-card:not(.myopal-design-card--plan) .myopal-design-card-image img { position:absolute; inset:0; min-width:0; min-height:0; }
.myopal-design-card:not(.myopal-design-card--plan) img, .myopal-design-detail--official .myopal-media-slide img { object-fit:cover; object-position:center; }
.myopal-custom-service .myopal-design-content { max-width:56rem; margin-inline:auto; }.myopal-custom-service .myopal-design-hero > span { max-width:48ch; display:block; margin-inline:auto; line-height:1.8; }
.myopal-custom-service .myopal-design-hero > h2 { margin:0 auto 1rem; }
.myopal-custom-methods .myopal-segmented { border-radius:var(--myopal-radius-lg); }
.myopal-custom-methods .myopal-segmented > a { display:flex; align-items:center; justify-content:center; line-height:1.5; }
.myopal-custom-title-row { display:flex; align-items:center; gap:1rem; justify-content:space-between; }.myopal-custom-title-row h2 { flex:1; margin:0; }.myopal-custom-title-row a { display:inline-flex; align-items:center; white-space:nowrap; gap:.25rem; font-size:.7rem; }
.myopal-custom-summary, .myopal-custom-method, .myopal-custom-service .myopal-design-panel { display:flex; flex-direction:column; gap:1rem; }.myopal-custom-service .myopal-design-panel > h2 { margin:0; }.myopal-custom-summary p, .myopal-custom-service p { line-height:1.8; }
.myopal-custom-steps { display:flex; flex-direction:column; gap:.85rem; list-style:none; padding:0; margin:0; }.myopal-custom-steps li { display:flex; align-items:baseline; gap:var(--myopal-space-3); font-size:var(--myopal-text-sm); line-height:1.7; }.myopal-custom-steps .myopal-step-number { color:var(--myopal-color-gold-ink); font-weight:600; font-variant-numeric:tabular-nums; flex:0 0 1.6rem; }.myopal-custom-steps .myopal-step-copy{min-width:0}
.myopal-custom-note { padding-top:1rem; border-top:1px solid var(--myopal-color-border); font-size:.75rem; }
.myopal-custom-method[role=tabpanel] { animation:myopal-custom-in .28s ease; }.myopal-custom-method[hidden] { display:none; }.myopal-custom-fees { padding:1rem; background:var(--myopal-color-background); border-radius:var(--myopal-radius-md); }.myopal-custom-fees h3 { font-size:.85rem; margin-bottom:.5rem; }
.myopal-custom-notices { display:flex; flex-direction:column; gap:1rem; margin:0; padding-left:1.2rem; font-size:.8rem; line-height:1.8; color:var(--myopal-color-muted); }.myopal-custom-notices li::marker { color:var(--myopal-color-gold-ink); }
.myopal-custom-enquiry {display:flex;align-items:center;gap:var(--myopal-space-2);text-decoration:none;}
@keyframes myopal-custom-in { from { opacity:0; transform:translateY(.5rem); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .myopal-custom-tabs::before { transition:none; }.myopal-custom-method[role=tabpanel] { animation:none; } }

/* Four-step overview is distinct from the complete seven-step service flow. */
.myopal-custom-summary .myopal-custom-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.myopal-custom-summary .myopal-custom-steps li { flex-direction:column; gap:.5rem; padding:.85rem; background:var(--myopal-color-background); border:1px solid var(--myopal-color-border); border-radius:var(--myopal-radius-md); overflow-wrap:anywhere; }
.myopal-custom-summary .myopal-step-number { flex-basis:auto; }

/* Two discoverable entry cards; complete card is the link, never nested controls. */
.myopal-design-banners { display:grid; grid-auto-flow:column; grid-auto-columns:88%; gap:.85rem; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:.6rem; }
.myopal-design-banner { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; padding:1.4rem; border-radius:var(--myopal-radius-lg); background:var(--myopal-color-surface); border:1px solid var(--myopal-color-border); color:var(--myopal-color-ink); text-decoration:none; scroll-snap-align:start; }
.myopal-design-banner > span { font-size:.65rem; letter-spacing:.12em; color:var(--myopal-color-gold-ink); }
.myopal-design-banner h2 { margin:0; font-size:clamp(1.1rem,3vw,1.5rem); line-height:1.4; font-weight:500; }
.myopal-design-banner p { font-size:.8125rem; line-height:1.6; color:var(--myopal-color-muted); }
.myopal-design-banner strong { display:flex; align-items:center; gap:.5rem; font-weight:500; font-size:.75rem; margin-top:auto; padding-top:.5rem; }
.myopal-design-banner--primary { background:radial-gradient(ellipse at top right,#b58e4240,transparent 75%),var(--myopal-color-black); color:var(--myopal-color-gold-light); }
.myopal-design-banner--primary > span,.myopal-design-banner--primary p { color:#dfcda8; }
.myopal-design--plans .myopal-design-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr)); }
.myopal-design-history-action { padding:.65rem; }
.myopal-custom-title-row { flex-wrap:wrap; }
.myopal-custom-title-row > h2 { min-width:min(100%,12rem); }
.myopal-plan-management { flex-wrap:wrap; border-radius:var(--myopal-radius-md); }
@media(min-width:48rem) { .myopal-design-banners { grid-auto-columns:minmax(0,1fr); }.myopal-design--plans .myopal-design-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); } }

.myopal-design-banner { position:relative; isolation:isolate; overflow:hidden; }
.myopal-design-banner > .myopal-home-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.22; }
.myopal-design-banner--primary::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#15130fed,#15130f70); }

/* Shared result and guideline controls. */
.myopal-result-confirm{width:min(90vw,28rem);border:0;border-radius:1rem;padding:1.5rem;color:var(--myopal-color-ink);background:var(--myopal-color-surface)}
.myopal-result-confirm::backdrop{background:rgb(0 0 0 / .5)}
.myopal-result-confirm form{margin-top:1.25rem}
.myopal-design-card-copy p{font-size:.875rem;line-height:1.5;margin:.4rem 0;color:var(--myopal-color-muted)}

.myopal-design-copy h2{margin:0 0 .75rem;font-size:1.25rem;overflow-wrap:anywhere}.myopal-design-copy p{margin:.5rem 0;line-height:1.65;overflow-wrap:anywhere}.myopal-design-copy p:empty{display:none}.myopal-design-meta{font-size:.8rem;color:var(--myopal-color-muted)}

.myopal-design-detail-content,[data-workspace-result]{display:flex;flex-direction:column;gap:var(--myopal-space-4)}
.myopal-design-detail-content > *,[data-workspace-result] > *{margin-block:0}
.myopal-design-actions--saved{display:grid}.myopal-design-actions--saved .myopal-action {flex-direction:row;}
.myopal-design--plans .myopal-collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--myopal-space-3)}.myopal-design--plans .myopal-plan-management{position:static;margin-top:var(--myopal-space-4)}

.myopal-design-copy-heading{display:flex;align-items:center;gap:var(--myopal-space-3);margin-bottom:var(--myopal-space-3)}
.myopal-design-copy-heading h2{flex:1;min-width:0;margin:0}