.commerce-utility { display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:0;border:0;background:none;color:#824362;position:absolute;top:5.25vw;right:19.5%;z-index:55; }
.commerce-utility button { font:500 clamp(12px,.9vw,15px)/1.5 'Noto Serif TC',serif;border:0;background:none;color:inherit;padding:5px 0;text-shadow:0 1px 4px #fff; }
.commerce-utility button.active { color:#800d3b;box-shadow:0 2px #d83b82; }
.utility-brand,.utility-home,.utility-bag { display:none; }
body:has(.commerce-page.active) .utility-brand { display:block;flex:none;width:288px;height:70px;margin-right:auto;padding:0; }
body:has(.commerce-page.active) .utility-brand::before { content:'';display:block;width:288px;height:70px;background:url('../home-approved-reference.png') -228px -20px / 1672px 941px no-repeat; }
body:has(.commerce-page.active) .utility-home { display:block; }
body:has(#shop.active) .utility-bag { display:block;border-left:1px solid #efc5a5;padding-left:22px;color:#800d3b; }
body:has(.commerce-page.active) .commerce-utility { position:relative;top:auto;right:auto;min-height:94px;padding:12px clamp(24px,5.5vw,84px);border-bottom:1px solid #f0d0d9;background:linear-gradient(110deg,#fff5f7,#fffafd 60%,#fcebf2); }
body:has(.commerce-page.active) .commerce-utility button:not(.utility-brand) { min-height:44px;font-size:15px; }
body:has(.commerce-page.active)>.head { display:none; }
body:has(.home-reference-page.active) .commerce-utility { right:14.7%; }
body:has(#free.active) .commerce-utility { right:16.1%; }
body:has(#daily.active,#zodiac.active) .commerce-utility { right:20.5%; }
body:has(.commerce-page.active) main { width:100%;max-width:none;padding:0;margin:0; }
.commerce-page { background:#fff;color:#77566e;overflow-wrap:anywhere; }
.commerce-page h1,.commerce-page h2,.commerce-page h3,.commerce-dialog h2,.commerce-dialog h3 { color:#800d3b;font-family:'Noto Serif TC','PMingLiU',serif;font-weight:700; }
.commerce-page h1 { font-size:clamp(36px,4.65vw,72px);line-height:1.38;letter-spacing:.015em;margin:0 0 22px; }
.member-hero { max-width:1536px;margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) 100px minmax(0,.95fr);gap:30px;padding:22px clamp(28px,6vw,96px) 18px;align-items:center; }
.member-editorial h1 { line-height:1.25; }
.member-editorial>p { font-size:clamp(18px,1.7vw,26px);margin:18px 0 25px;line-height:1.8; }
.commerce-page .commerce-disclosure { position:relative;padding-top:22px;font-size:16px;line-height:1.8; }
.commerce-disclosure::before { content:'';position:absolute;top:0;left:0;width:65px;height:1px;background:#d2a47e; }
.member-editorial .commerce-primary { margin-top:12px;min-width:335px;min-height:72px;font-size:24px; }
.member-motif { text-align:center; }
.member-motif>svg { width:100px;height:190px;fill:#cfaa7b; }
.moon-line { fill:none;stroke:#cfaa7b;stroke-width:1; }
.commerce-primary,.commerce-secondary { display:inline-flex;gap:16px;align-items:center;justify-content:center;min-height:46px;padding:10px 26px;border:1px solid #c63b74;border-radius:12px;font:500 17px/1.5 'Noto Serif TC',serif;background:#c63b74;color:white;transition:background .2s,transform .2s; }
.commerce-secondary { background:#fff;color:#b12860;border-radius:99px; }
.commerce-primary svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5; }
.commerce-primary:hover:not(:disabled) { background:#bd306d;transform:translateY(-1px); }
.commerce-secondary:hover { background:#fff4f8; }
.commerce-primary:disabled { background:#f7e7ee;border-color:#ecd3dd;color:#896575;cursor:not-allowed; }
.commerce-utility button:focus-visible,.commerce-page button:focus-visible,.commerce-dialog button:focus-visible { outline:3px solid #a41e5b;outline-offset:4px; }
.member-auth { border:1px solid #dcb18a;border-radius:15px;padding:24px clamp(20px,4vw,80px);text-align:center;background:#fff;line-height:1.5; }
.member-auth h2 { font-size:36px;line-height:1.35;margin:0 0 3px; }
.auth-welcome { margin:0 0 18px;font-size:16px; }
.social-login { display:grid;gap:10px; }
.social-login button { display:flex;align-items:center;justify-content:center;gap:16px;border:1px solid #a87798;border-radius:9px;background:#fff;color:#633752;padding:8px 12px;min-height:42px;font:500 16px/1.4 'Noto Serif TC',serif; }
.provider-icon { display:inline-flex;flex:none;width:24px;height:24px; }
.provider-icon svg { display:block;width:100%;height:100%; }
.auth-divider { display:flex;align-items:center;gap:12px;font-size:15px;margin:16px 0; }
.auth-divider::before,.auth-divider::after { content:'';flex:1;height:1px;background:#c8a7bc; }
.member-auth label { display:grid;gap:4px;text-align:left;font-size:15px;margin:8px 0; }
.member-auth input { width:100%;min-width:0;border:1px solid #d3c9d1;border-radius:9px;background:#fff;color:#563746;padding:9px 12px;font:16px/1.4 sans-serif; }
.member-auth input:focus-visible { outline:2px solid #d3467f;outline-offset:2px; }
.member-auth form>.commerce-primary { width:100%;margin-top:4px; }
.auth-text-button { border:0;background:none;color:#b43569;text-decoration:underline;font:15px/1.5 'Noto Serif TC',serif;padding:6px; }
.member-auth form>.auth-text-button { display:block;margin-left:auto;padding:4px 6px; }
.auth-warning { margin:10px 0 0;font-size:13px;line-height:1.6;color:#a34774; }
.member-auth [role="status"] { margin:12px 0 0;color:#723153;font-size:14px;line-height:1.7; }
.member-auth [role="status"]:empty { display:none; }
.membership-plans { display:grid;grid-template-columns:.8fr 1fr 1fr;gap:20px;padding:26px clamp(24px,5.5vw,84px);background:#fdf0f2; }
.plans-intro { align-self:center; }
.plans-intro h2 { margin:0 0 18px;font-size:30px;line-height:1.45; }
.plans-intro p { margin:0 0 18px;font-size:16px; }
.plans-intro small { font-size:13px; }
.membership-plan { border:1px solid #dcb18a;border-radius:15px;background:#fff;padding:20px 28px;text-align:center; }
.membership-plan>svg { width:28px;height:36px;fill:#cfaa7b; }
.membership-plan h3 { font-size:30px;margin:3px 0 8px; }
.membership-plan p { margin:8px 0 18px;font-size:16px; }
.membership-plan .commerce-primary { width:100%; }
.membership-plan small { display:block;margin-top:18px;font-size:15px; }
.shop-hero { display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:310px;max-width:1536px;margin:auto;background:#fbf5f5;overflow:hidden; }
.shop-hero>div { padding:35px clamp(28px,7.7vw,118px);padding-right:10px; }
.shop-hero h1 { font-size:clamp(32px,3.2vw,50px);margin-bottom:10px;white-space:nowrap; }
.shop-hero>div>p { font-size:clamp(18px,1.6vw,25px);margin:10px 0 28px; }
.shop-hero img { display:block;width:100%;height:310px;object-fit:cover;object-position:center 57%;mask-image:linear-gradient(90deg,transparent,#000 18%); }
.shop-filters { display:flex;justify-content:center;gap:12px;padding:18px 18px 20px; }
.shop-filters button { min-width:120px;border:1px solid #e8b495;background:#fff;color:#77566e;border-radius:99px;padding:9px 20px;font:17px/1.5 'Noto Serif TC',serif; }
.shop-filters button[aria-pressed="true"] { background:#cc296b;color:#fff;border-color:#cc296b; }
.shop-products { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;max-width:1536px;padding:0 clamp(28px,8vw,122px);margin:auto; }
.shop-product { text-align:center;min-width:0; }
.shop-product[hidden] { display:none; }
.shop-product>img { width:100%;height:auto;aspect-ratio:1.2;object-fit:cover;display:block; }
.shop-product h2 { margin:10px 0 2px;font-size:24px; }
.shop-product p { margin:2px 0 14px;font-size:15px; }
.shop-product .commerce-secondary { min-height:42px;font-size:16px; }
.shop-footnote { border-top:1px solid #e8b495;margin:40px clamp(20px,4vw,60px) 0;padding:18px 0 28px;text-align:center;font-size:14px; }
.commerce-dialog { width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #e7b69e;border-radius:20px;background:#fff;color:#77566e;overflow-wrap:anywhere;box-shadow:0 30px 110px #3d123933; }
.commerce-dialog::backdrop { background:#4b264955;backdrop-filter:blur(8px); }
.commerce-dialog>header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; }
.commerce-dialog>header h2 { font-size:24px;line-height:1.4;margin:0; }
.commerce-dialog>header button { flex:none;width:40px;height:40px;border:1px solid #e7c5d4;border-radius:50%;background:#fff;color:#943059;font-size:25px; }
.commerce-dialog .member-auth { border:0;padding:4px; }
.commerce-dialog .product-detail-image { display:block;width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:9px; }
.commerce-dialog-body>.commerce-primary { width:100%; }
.bag-item { display:grid;grid-template-columns:100px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid #edd5df; }
.bag-item img { width:100px;height:110px;object-fit:cover;border-radius:9px; }
.bag-item h3,.bag-item p { margin:0 0 8px; }
.bag-actions { display:flex;gap:8px; }
.bag-actions button { min-width:38px;min-height:38px;padding:4px 10px;border:1px solid #e8b6ce;border-radius:7px;background:#fff;color:#91355d; }
.bag-actions button:disabled { opacity:.5; }
.empty-bag { padding:30px 0;text-align:center; }
.mobile-break { display:none; }
@media(max-width:760px) { .commerce-utility { display:none; } body:has(.commerce-page.active) .commerce-utility { display:flex; } }
@media(max-width:1000px) { .member-hero { grid-template-columns:1.1fr 1fr;gap:24px; }.member-motif { display:none; }.member-auth { padding:22px; }.member-editorial .commerce-primary { min-width:0; }.membership-plans { grid-template-columns:1fr 1fr; }.plans-intro { grid-column:1/-1; }.shop-hero h1 { white-space:normal; } }
@media(max-width:600px) {
  .commerce-utility { min-height:44px;gap:18px;padding:5px 16px;flex-wrap:wrap; }
  .commerce-utility button { font-size:14px; }
  body:has(.commerce-page.active) .utility-brand { flex-basis:100%;height:56px; }
  body:has(.commerce-page.active) .utility-brand::before { width:230.4px;height:56px;background-size:1337.6px 752.8px;background-position:-182.4px -16px; }
  body:has(.commerce-page.active) .utility-home { margin-right:auto; }
  body:has(#shop.active) .utility-bag { border-left:0;padding-left:0;flex-basis:100%;text-align:right;border-top:1px solid #f2dce4; }
  .member-hero { display:block;padding:34px 22px 28px; }
  .member-editorial h1 { font-size:36px; }
  .member-editorial>p { font-size:18px; }
  .member-editorial .commerce-primary { width:100%;min-height:50px;font-size:18px; }
  .member-auth { margin-top:30px;padding:24px; }
  .member-auth h2 { font-size:30px; }
  .membership-plans { grid-template-columns:1fr;padding:28px 22px;gap:18px; }
  .membership-plan { padding:22px; }
  .shop-hero { grid-template-columns:1fr; }
  .shop-hero>div { padding:34px 22px 8px; }
  .shop-hero h1 { font-size:33px;line-height:1.5; }
  .shop-hero img { height:230px;mask-image:none; }
  .shop-filters { gap:8px;padding:22px 16px; }
  .shop-filters button { min-width:0;flex:1;padding:9px 10px;font-size:16px; }
  .shop-products { grid-template-columns:1fr;gap:34px;padding:0 22px; }
  .shop-product>img { aspect-ratio:1.2; }
  .shop-footnote { font-size:13px;text-align:left; }
  .commerce-dialog { padding:18px; }
  .commerce-dialog .member-auth { margin-top:0; }
  .mobile-break { display:block; }
}
@media(prefers-reduced-motion:reduce) { .commerce-primary,.commerce-secondary { transition:none; } }

/* Membership keeps the homepage sky, complete brand and its two original links. */
.commerce-utility .original-brand { display:none; }
body:has(#member.active) .commerce-utility {
  padding-inline:clamp(24px,13.60799vw,218px);
  background:#fff5f7 url('../extended-header-sky-v1.png') center top / 100% auto no-repeat;
}
body:has(#member.active) .commerce-utility > button:not(.utility-brand,.utility-home,[data-page='member']) { display:none; }
body:has(#member.active) .commerce-utility > :is(.utility-home,[data-page='member']) { display:block;flex:none;white-space:nowrap; }
body:has(#member.active) .utility-brand {
  flex:0 1 auto;width:clamp(280px,24.968789vw,400px);max-width:100%;height:auto;aspect-ratio:400 / 66;
  margin:0 auto 0 0;padding:0;box-shadow:none;
}
body:has(#member.active) .utility-brand::before { content:none; }
body:has(#member.active) .utility-brand .original-brand { display:block;width:100%;height:100%; }
@media(max-width:760px) { body:has(#member.active) .commerce-utility { padding-inline:24px; } }
@media(max-width:600px) {
  body:has(#member.active) .utility-brand { flex-basis:100%;min-width:0;max-width:100%;aspect-ratio:auto; }
  body:has(#member.active) .utility-brand .original-brand { width:min(280px,100%);height:auto;aspect-ratio:400 / 66; }
}