/* Native header geometry. Uploaded logos keep their original proportions. */
.lg-site-header .header__container-top-wrap{display:grid!important}
.lg-site-header .header__logo-image{width:var(--desktop-size,240px)!important;max-width:280px!important;max-height:none!important;height:auto!important;object-fit:contain;mix-blend-mode:multiply}
.lg-site-header .header__logo-link{display:inline-flex;align-items:center;justify-content:center}
.lg-site-header .header__logo{justify-self:center;min-width:0}
.lg-site-header .header__logo{grid-area:logo!important;grid-column:2!important;grid-row:1!important;position:relative!important;inset:auto!important;transform:none!important;justify-content:center!important;align-self:center}
.lg-site-header .header-nav{grid-area:nav!important}
.lg-site-header .header-action-bar.left{grid-area:action-bar-left!important;margin:0!important}
.lg-site-header .header-action-bar.right{grid-area:action-bar-right!important;margin:0!important}
@media(min-width:960px){
 .lg-site-header .header__container-top-wrap{grid-template-areas:"nav logo action-bar-right"!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;column-gap:26px!important;padding-block:12px!important;min-height:100px}
 .lg-site-header .header-action-bar.left{display:none!important}
 .lg-site-header .header-action-bar.right{justify-self:end;min-width:0}
 .lg-site-header .header-nav{justify-self:start;gap:0}
 .lg-site-header .header-nav__menu-item>a{font-size:13px}
}
@media(min-width:960px) and (max-width:1150px){.lg-site-header .header__logo-image{max-width:205px!important}.lg-site-header .header__container-top-wrap{column-gap:18px!important;padding-inline:24px!important}.lg-site-header .header-nav__menu-item{padding-inline:8px!important}.lg-site-header .header-nav__menu-item>a{font-size:12px}}
@media(max-width:959px){
 .lg-site-header .header__container-top-wrap{grid-template-areas:"action-bar-left logo action-bar-right"!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;column-gap:8px!important;min-height:74px;padding:10px 20px!important}
 .lg-site-header .header__logo-image{width:var(--mobile-size,150px)!important;max-width:min(200px,calc(100vw - 230px))!important;max-height:none!important}
 .lg-site-header .header-action-bar.left{justify-self:start;justify-content:flex-start;width:auto!important;gap:0}
 .lg-site-header .header-action-bar.right{justify-self:end;justify-content:flex-end;gap:6px!important}
 .lg-site-header .header-action-bar.left .header-action-bar__user{display:none!important}
 .lg-site-header .header-action-bar.right>.header-action-bar__user,.lg-site-header .header-action-bar.right>.header-action-bar__search{display:inline-flex!important}
 .lg-site-header .header-action-bar.right>.header-action-bar__search.hidden-mobile,.lg-site-header .header-action-bar.left .header-action-bar__search{display:none!important}
 .lg-site-header .header-action-bar.right>.header-action-bar__user{order:1}.lg-site-header .header-action-bar.right>.header-action-bar__cart{order:2}.lg-site-header .header-action-bar.right>.header-action-bar__search{order:3}
 .lg-site-header .header-action-bar .button--icon{width:24px!important;height:28px!important;min-width:24px!important;min-height:28px!important;padding:0!important}
 .lg-site-header .header-action-bar .button--icon svg{width:20px;height:20px}
}
/* Hide only the custom page content while its existing enhancement is prepared. */
html[data-lg-pending] #MainContent{min-height:70vh;background:#faf9fc!important;position:relative}
html[data-lg-pending] #MainContent>.main-page,html[data-lg-pending] #MainContent .main-page__content,html[data-lg-pending] #diy-app{visibility:hidden}
html[data-lg-pending] #MainContent:before{content:"正在準備你的晶石體驗…";position:absolute;top:28vh;left:24px;right:24px;text-align:center;color:#8b7552;font:13px/2 "Microsoft JhengHei",sans-serif;letter-spacing:.12em;visibility:visible}
html[data-lg-route="five"] .main-page__content{--bg:#faf9fc;--card:#faf9fc;--ink:#34333f;--muted:#827057;--accent:#8b6a36;--line:#dad5e3;--border:#dad5e3;color:#34333f}
[data-lg-element-app]{--bg:#faf9fc!important;--card:#faf9fc!important;--ink:#34333f!important;--muted:#827057!important;--accent:#8b6a36!important;--line:#dad5e3!important;--border:#dad5e3!important;background:#faf9fc!important;color:#34333f!important}
[data-lg-element-app] .wrap{background:transparent!important}
@media(prefers-reduced-motion:reduce){html[data-lg-pending] *{transition:none!important}}

/* User-specified clockwise display order: metal, wood, water, fire, earth. */
.lg-orbit-metal{left:50%;top:14.8%}.lg-orbit-wood{left:83.4%;top:39.2%}.lg-orbit-water{left:70.6%;top:78.4%}.lg-orbit-fire{left:29.4%;top:78.4%}.lg-orbit-earth{left:16.6%;top:39.2%}

/* Quiet text-only homepage actions, desktop and mobile. */
.lg-site :is(.lg-hero,.lg-story,.lg-guide,.lg-reading,.lg-closing--design) a:is(.lg-button,.lg-text-link){border-radius:8px!important;min-height:48px;line-height:1.7;letter-spacing:.06em;gap:0;box-sizing:border-box}
.lg-site .lg-story a.lg-text-link{border:1px solid #c9bda3;background:#f8f4eb;min-width:180px;padding:12px 24px;justify-content:center;text-decoration:none}
@media(max-width:767px){
 .lg-site .lg-hero .lg-actions{gap:12px}
 .lg-site .lg-hero a.lg-button,.lg-site .lg-hero a.lg-text-link{width:100%;min-height:50px;padding:13px 20px;font-size:14px;font-weight:400;justify-content:center}
 .lg-site .lg-hero a.lg-text-link{border:1px solid #c9bea7;background:rgba(250,248,243,.85);color:#524a3b}
 .lg-site .lg-guide a.lg-button{display:flex;width:100%;max-width:320px;margin-inline:auto;padding:13px 20px;font-size:14px}
 .lg-site .lg-story a.lg-text-link{width:min(100%,260px);min-height:48px;font-size:14px}
}

/* v1.09: homepage actions and editable bracelet guide */
.lg-design-guide{padding:88px 0;background:#faf9fc;color:#57536b}
.lg-design-guide header{text-align:center;margin:0 auto 38px;max-width:720px}
.lg-design-guide h2{font-size:clamp(26px,2.8vw,38px);font-weight:400;line-height:1.6;margin:0}
.lg-design-guide ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lg-design-guide li{min-width:0}.lg-design-guide__image{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:12px}
.lg-design-guide .lg-design-guide__step{font-size:12px;letter-spacing:.12em;margin:20px 0 10px;color:#746b5e}
.lg-design-guide h3{font-size:19px;line-height:1.6;font-weight:500;margin:0 0 10px}
.lg-design-guide li>p:last-child{font-size:14px;line-height:1.9;margin:0;color:#67635c}
.lg-design-guide__action{text-align:center;margin-top:36px}
.lg-site .lg-hero .lg-actions{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
.lg-site .lg-hero .lg-actions>a,.lg-site .lg-story a.lg-text-link,.lg-site .lg-guide a.lg-button,.lg-site .lg-design-guide a.lg-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;min-width:164px;box-sizing:border-box;padding:13px 26px;border:1px solid #57536b;border-radius:10px;font-size:14px;line-height:1.5;letter-spacing:.04em;text-decoration:none;background:#57536b;color:#fff;box-shadow:none;gap:0}
.lg-site .lg-hero .lg-actions>a.lg-text-link,.lg-site .lg-story a.lg-text-link{background:rgba(255,255,255,.7);color:#57536b;border-color:#8d897e}
.lg-site .lg-hero .lg-actions>a:before,.lg-site .lg-hero .lg-actions>a:after,.lg-site .lg-story a.lg-text-link:after{display:none!important}
.lg-site .lg-hero .lg-actions>a:hover,.lg-site .lg-guide a.lg-button:hover,.lg-site .lg-design-guide a.lg-button:hover{filter:brightness(1.12)}
.lg-site .lg-hero .lg-actions>a:focus-visible,.lg-site .lg-story a:focus-visible,.lg-design-guide a:focus-visible{outline:3px solid #a99bcb;outline-offset:4px}
@media(max-width:1023px){.lg-design-guide ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
@media(max-width:600px){.lg-design-guide{padding:54px 0}.lg-design-guide ol{gap:26px 16px}.lg-design-guide h3{font-size:17px}.lg-design-guide li>p:last-child{font-size:13px}.lg-site .lg-hero .lg-actions{flex-direction:column;gap:12px}.lg-site .lg-hero .lg-actions>a{width:100%;min-height:50px}.lg-design-guide__image{aspect-ratio:1/1}}
