/* Device layouts. Load after site.css, modes.css and store.css. */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; }
img { max-width: 100%; }
.brand img { object-fit: contain; }
.brand-type { min-width: 0; }
.brand-name, .foot-brand { overflow-wrap: anywhere; }
.hero-grid > *, .section-title > *, .foot-grid > *, .price-list > *,
.culture-grid > *, .store-form-grid > *, .policy-grid > * { min-width: 0; }
.t-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-faces img { width: 100%; height: auto; }
.hero-vert { direction: ltr; writing-mode: vertical-rl; text-orientation: upright; }
.hero-sub, .section-title .body, .policy p, .policy li, .copyright-notice,
.foot-description, .store-dialog p, .cart-line h3 { overflow-wrap: anywhere; }
.tool-button, .store-action, .purchase-trigger, .mobile-toggle,
.store-close, .checkout-close, .cookie-actions button { min-height: 44px; }
.store-close, .checkout-close, .mobile-toggle { min-width: 44px; }
.store-dialog, .checkout-dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
.store-dialog input, .store-dialog select, .checkout-dialog select { font-size: 16px; }
.store-field input, .store-field select { min-height: 46px; }
.store-dialog .auth-tabs button { min-height: 44px; }
.store-dialog .text-button { min-height: 44px; padding: 8px 4px; }
.store-check input, .cart-delivery input { flex: 0 0 auto; }
.store-check span, .cart-delivery label { overflow-wrap: anywhere; }
.quantity-row { flex-wrap: wrap; }
.quantity-row input { min-height: 44px; }
.faq { display: grid; gap: 14px; }
.faq details { border: 1px solid var(--line); background: var(--cream); padding: 22px 26px; }
.faq summary { cursor: pointer; font: 400 23px/1.4 var(--serif); padding: 5px 24px 5px 0; }
.faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.faq details p, .faq details li { font: 14px/1.9 var(--sans); color: var(--gray); }
.faq details[open] summary { margin-bottom: 18px; }
.faq details p:last-child { margin-bottom: 0; }
.policy[id], .faq [id] { scroll-margin-top: 135px; }

/* Desktop layout also fits iPad and other tablets without a forced 1180px canvas. */
@media (min-width: 768px) {
  html:not([data-view="mobile"]):not(.view-mobile) body { min-width: 0; max-width: none; width: 100%; }
  html:not([data-view="mobile"]):not(.view-mobile) .site-tools { width: 100%; min-width: 0; }
  html:not([data-view="mobile"]):not(.view-mobile) .navlinks { flex-wrap: wrap; }
  html:not([data-view="mobile"]):not(.view-mobile) .navlinks a { min-height: 44px; display: inline-flex; align-items: center; }
  html:not([data-view="mobile"]):not(.view-mobile) .language-switch a { min-height: 36px; display: inline-flex; align-items: center; }
}
@media (min-width: 768px) and (max-width: 1320px) {
  html:not([data-view="mobile"]):not(.view-mobile) .wrapper,
  html:not([data-view="mobile"]):not(.view-mobile) .slim { padding-left: 30px; padding-right: 30px; }
  html:not([data-view="mobile"]):not(.view-mobile) .nav { height: auto; min-height: 104px; gap: 6px 24px; padding-top: 14px; padding-bottom: 10px; flex-wrap: wrap; }
  html:not([data-view="mobile"]):not(.view-mobile) .brand { margin-right: auto; }
  html:not([data-view="mobile"]):not(.view-mobile) .nav-end { order: 1; }
  html:not([data-view="mobile"]):not(.view-mobile) .navlinks { order: 2; width: 100%; gap: 0 23px; position: static; display: flex; }
  html:not([data-view="mobile"]):not(.view-mobile) .navlinks a { font-size: 10px; letter-spacing: .1em; }
  html:not([data-view="mobile"]):not(.view-mobile) .nav-note { display: none; }
  html:not([data-view="mobile"]):not(.view-mobile) .mobile-toggle { display: none; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 565px; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-copy { padding: 54px 24px 54px 0; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero h1 { font-size: clamp(45px, 6.2vw, 68px); }
  html:not([data-view="mobile"]):not(.view-mobile)[lang^="zh"] .hero h1 { font-size: clamp(38px, 5vw, 55px); }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-sub { font-size: 17px; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-actions { gap: 18px; flex-wrap: wrap; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-art { min-height: 565px; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-talisman { height: 62%; left: 32%; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-talisman.side { height: 53%; left: 7%; }
  html:not([data-view="mobile"]):not(.view-mobile) .hero-talisman.third { height: 51%; left: 60%; }
  html:not([data-view="mobile"]):not(.view-mobile) .collection .t-grid,
  html:not([data-view="mobile"]):not(.view-mobile) .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not([data-view="mobile"]):not(.view-mobile) .intro-text { padding: 60px 8%; }
  html:not([data-view="mobile"]):not(.view-mobile) .intro-symbol { padding: 32px; }
  html:not([data-view="mobile"]):not(.view-mobile) .ritual-grid,
  html:not([data-view="mobile"]):not(.view-mobile) .split-hero { gap: 36px; }
  html:not([data-view="mobile"]):not(.view-mobile) .section-title { gap: 22px; }
  html:not([data-view="mobile"]):not(.view-mobile) .section-title .body { max-width: 340px; }
  html:not([data-view="mobile"]):not(.view-mobile) .price-card { padding: 28px; }
  html:not([data-view="mobile"]):not(.view-mobile) .price-card h2 { font-size: 36px; }
  html:not([data-view="mobile"]):not(.view-mobile) .culture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not([data-view="mobile"]):not(.view-mobile) .story-panel { padding: 66px 36px; }
  html:not([data-view="mobile"]):not(.view-mobile) .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
  html:not([data-view="mobile"]):not(.view-mobile) .foot-brand { font-size: 44px; }
}

/* Manual mobile view retains the dedicated phone composition at any viewport. */
html:is([data-view="mobile"], .view-mobile) body { min-width: 0; width: 100%; max-width: 480px; margin: 0 auto; }
html:is([data-view="mobile"], .view-mobile) .site-tools { width: 100%; min-width: 0; }
html:is([data-view="mobile"], .view-mobile) .wrapper,
html:is([data-view="mobile"], .view-mobile) .slim { padding-left: 18px; padding-right: 18px; }
html:is([data-view="mobile"], .view-mobile) .topline { padding: 8px 16px; font-size: 9px; line-height: 1.6; letter-spacing: .1em; text-align: center; }
html:is([data-view="mobile"], .view-mobile) .tools-row { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; padding-bottom: 10px; }
html:is([data-view="mobile"], .view-mobile) .language-switch { justify-content: center; gap: 16px; }
html:is([data-view="mobile"], .view-mobile) .language-switch a { display: inline-flex; align-items: center; min-height: 36px; font-size: 11px; }
html:is([data-view="mobile"], .view-mobile) .store-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html:is([data-view="mobile"], .view-mobile) .tool-button { font-size: 11px; line-height: 1.4; padding: 10px 8px; }
html:is([data-view="mobile"], .view-mobile) .nav { height: 76px; min-height: 76px; padding-top: 0; padding-bottom: 0; gap: 12px; }
html:is([data-view="mobile"], .view-mobile) .brand { gap: 10px; min-width: 0; }
html:is([data-view="mobile"], .view-mobile) .brand img { width: 44px; height: 44px; flex: 0 0 44px; }
html:is([data-view="mobile"], .view-mobile) .brand-name { font-size: 22px; letter-spacing: .11em; }
html:is([data-view="mobile"], .view-mobile) .brand-cn { font-size: 10px; letter-spacing: .28em; }
html:is([data-view="mobile"], .view-mobile) .nav-note { display: none; }
html:is([data-view="mobile"], .view-mobile) .mobile-toggle { display: block; padding: 6px; line-height: 1; }
html:is([data-view="mobile"], .view-mobile) .navlinks { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--ivory); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 96px); overflow: auto; }
html:is([data-view="mobile"], .view-mobile) .navlinks.open { display: flex; }
html:is([data-view="mobile"], .view-mobile) .navlinks a { display: flex; align-items: center; min-height: 46px; font-size: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
html:is([data-view="mobile"], .view-mobile) .hero-grid { display: block; min-height: 0; }
html:is([data-view="mobile"], .view-mobile) .hero-copy { padding: 42px 0 38px; }
html:is([data-view="mobile"], .view-mobile) .hero h1 { font-size: clamp(48px, 12vw, 62px); line-height: 1.03; margin: 24px 0 22px; }
html:is([data-view="mobile"], .view-mobile)[lang^="zh"] .hero h1 { font-size: clamp(38px, 10.5vw, 48px); line-height: 1.4; letter-spacing: .02em; }
html:is([data-view="mobile"], .view-mobile) .hero-sub { font-size: 17px; line-height: 1.7; margin-bottom: 0; }
html:is([data-view="mobile"], .view-mobile) .hero-actions { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 26px; }
html:is([data-view="mobile"], .view-mobile) .hero-actions .button { min-width: 0; width: 100%; }
html:is([data-view="mobile"], .view-mobile) .hero-actions .plain-link { align-self: flex-start; padding-top: 8px; padding-bottom: 8px; }
html:is([data-view="mobile"], .view-mobile) .hero-caption { margin-top: 27px; letter-spacing: .17em; }
html:is([data-view="mobile"], .view-mobile) .hero-art { height: 420px; min-height: 0; }
html:is([data-view="mobile"], .view-mobile) .hero-talisman { height: 72%; top: 14%; left: 34%; }
html:is([data-view="mobile"], .view-mobile) .hero-talisman.side { height: 61%; top: 20%; left: 9%; }
html:is([data-view="mobile"], .view-mobile) .hero-talisman.third { height: 58%; top: 21%; left: 63%; }
html:is([data-view="mobile"], .view-mobile) .hero-vert { right: 12px; bottom: 16px; font-size: 10px; letter-spacing: .17em; }
html:is([data-view="mobile"], .view-mobile) .art-caption { left: 14px; bottom: 16px; max-width: 75%; font-size: 9px; letter-spacing: .12em; }
html:is([data-view="mobile"], .view-mobile) .rulebar { grid-template-columns: 1fr; gap: 0; padding-top: 8px; padding-bottom: 8px; }
html:is([data-view="mobile"], .view-mobile) .rulebar span { padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .12em; }
html:is([data-view="mobile"], .view-mobile) .rulebar span:last-child { border: 0; }
html:is([data-view="mobile"], .view-mobile) section.section { padding: 58px 0; }
html:is([data-view="mobile"], .view-mobile) .section-title { display: block; margin-bottom: 28px; }
html:is([data-view="mobile"], .view-mobile) .section-title h2 { font-size: 40px; line-height: 1.12; }
html:is([data-view="mobile"], .view-mobile)[lang^="zh"] .section-title h2 { font-size: 34px; line-height: 1.45; }
html:is([data-view="mobile"], .view-mobile) .section-title .body { margin-top: 20px; font-size: 15px; line-height: 1.8; }
html:is([data-view="mobile"], .view-mobile) .intro { display: block; }
html:is([data-view="mobile"], .view-mobile) .intro-symbol { min-height: 220px; padding: 30px; border-right: 0; border-bottom: 1px solid var(--line); }
html:is([data-view="mobile"], .view-mobile) .intro-symbol img { width: 180px; max-width: 72%; }
html:is([data-view="mobile"], .view-mobile) .intro-text { padding: 42px 20px; }
html:is([data-view="mobile"], .view-mobile) .philosophy-quote { font-size: 29px !important; line-height: 1.6 !important; }
html:is([data-view="mobile"], .view-mobile) .intro-text .philosophy-line { font-size: 17px; line-height: 1.9; }
html:is([data-view="mobile"], .view-mobile) .collection .t-grid,
html:is([data-view="mobile"], .view-mobile) .t-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
html:is([data-view="mobile"], .view-mobile) .t-card { padding: 14px; }
html:is([data-view="mobile"], .view-mobile) .t-faces { gap: 18px; padding: 18px 12px 14px; }
html:is([data-view="mobile"], .view-mobile) .t-faces figure { display: flex; flex-direction: column; align-items: center; }
html:is([data-view="mobile"], .view-mobile) .t-faces img { width: 100%; max-height: 390px; object-fit: contain; }
html:is([data-view="mobile"], .view-mobile) .t-faces figcaption { font-size: 11px; margin-top: 10px; }
html:is([data-view="mobile"], .view-mobile) .t-card h3 { font-size: 28px; }
html:is([data-view="mobile"], .view-mobile) .t-card-info { padding: 20px 2px 8px; }
html:is([data-view="mobile"], .view-mobile) .t-card .sub { font-size: 10px; line-height: 1.8; }
html:is([data-view="mobile"], .view-mobile) .t-card .chip { display: inline; font-size: 11px; }
html:is([data-view="mobile"], .view-mobile) .t-card.large .t-description { min-height: 0; font-size: 13px; line-height: 1.9; margin-top: 10px; }
html:is([data-view="mobile"], .view-mobile) .purchase-trigger { font-size: 12px; letter-spacing: .04em; padding: 14px; }
html:is([data-view="mobile"], .view-mobile) .shop-note { display: grid; gap: 18px; margin-top: 26px; }
html:is([data-view="mobile"], .view-mobile) .shop-note .plain-link { justify-self: start; }
html:is([data-view="mobile"], .view-mobile) .home-bundles { margin-top: 44px; padding-top: 30px; }
html:is([data-view="mobile"], .view-mobile) .home-bundles .section-title h2 { font-size: 32px; }
html:is([data-view="mobile"], .view-mobile) .bundle-grid,
html:is([data-view="mobile"], .view-mobile) .readings-strip,
html:is([data-view="mobile"], .view-mobile) .readings-strip:has([data-product="bazi-basic"]) { grid-template-columns: minmax(0, 1fr); }
html:is([data-view="mobile"], .view-mobile) .reading-tile { padding: 28px 22px; min-height: 0; gap: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
html:is([data-view="mobile"], .view-mobile) .reading-tile:last-child { border-bottom: 0; }
html:is([data-view="mobile"], .view-mobile) .reading-tile h3 { font-size: 29px; line-height: 1.3; overflow-wrap: anywhere; }
html:is([data-view="mobile"], .view-mobile) .reading-tile p { font-size: 13px; line-height: 1.8; }
html:is([data-view="mobile"], .view-mobile) .shipping-panel { display: grid; gap: 22px; padding: 24px 20px; margin-top: 30px; }
html:is([data-view="mobile"], .view-mobile) .shipping-panel .plain-link { display: inline-block; white-space: normal; margin-top: 14px; }
html:is([data-view="mobile"], .view-mobile) .offers-panel button { width: 100%; }
html:is([data-view="mobile"], .view-mobile) .ritual-grid,
html:is([data-view="mobile"], .view-mobile) .story-band,
html:is([data-view="mobile"], .view-mobile) .split-hero,
html:is([data-view="mobile"], .view-mobile) .culture-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
html:is([data-view="mobile"], .view-mobile) .dark-section h2 { font-size: 42px; }
html:is([data-view="mobile"], .view-mobile)[lang^="zh"] .dark-section h2 { font-size: 36px; line-height: 1.45; }
html:is([data-view="mobile"], .view-mobile) .dark-section p { font-size: 15px; }
html:is([data-view="mobile"], .view-mobile) .ritual-steps { margin-top: 8px; }
html:is([data-view="mobile"], .view-mobile) .ritual-step { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
html:is([data-view="mobile"], .view-mobile) .story-band { gap: 0; }
html:is([data-view="mobile"], .view-mobile) .story-panel { padding: 50px 20px; }
html:is([data-view="mobile"], .view-mobile) .story-panel h2 { font-size: 42px; }
html:is([data-view="mobile"], .view-mobile) .story-art { min-height: 290px; height: 290px; }
html:is([data-view="mobile"], .view-mobile) .marquee { padding: 32px 18px; font-size: 20px; line-height: 1.5; }
html:is([data-view="mobile"], .view-mobile) .page-heading { padding: 48px 0 34px; }
html:is([data-view="mobile"], .view-mobile) .page-heading h1 { font-size: 48px; overflow-wrap: anywhere; }
html:is([data-view="mobile"], .view-mobile)[lang^="zh"] .page-heading h1 { font-size: 39px; line-height: 1.4; }
html:is([data-view="mobile"], .view-mobile) .page-heading p { font-size: 17px; line-height: 1.8; }
html:is([data-view="mobile"], .view-mobile) .price-list,
html:is([data-view="mobile"], .view-mobile) .policy-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
html:is([data-view="mobile"], .view-mobile) .price-card { padding: 27px 22px; }
html:is([data-view="mobile"], .view-mobile) .price-card h2 { font-size: 33px; line-height: 1.3; }
html:is([data-view="mobile"], .view-mobile) .price-card p { min-height: 0; }
html:is([data-view="mobile"], .view-mobile) .policy { padding: 26px 22px; }
html:is([data-view="mobile"], .view-mobile) .policy h2 { font-size: 27px; line-height: 1.4; }
html:is([data-view="mobile"], .view-mobile) .split-hero h2 { font-size: 39px; }
html:is([data-view="mobile"], .view-mobile) .split-hero img { width: 65%; margin-top: 15px; }
html:is([data-view="mobile"], .view-mobile) .faq details { padding: 20px; }
html:is([data-view="mobile"], .view-mobile) .faq summary { font-size: 21px; min-height: 44px; }
html:is([data-view="mobile"], .view-mobile) footer { padding: 50px 0 25px; }
html:is([data-view="mobile"], .view-mobile) .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
html:is([data-view="mobile"], .view-mobile) .foot-grid > div:first-child { grid-column: auto; }
html:is([data-view="mobile"], .view-mobile) .foot-brand { font-size: 44px; letter-spacing: .08em; }
html:is([data-view="mobile"], .view-mobile) .foot-description { font-size: 17px; margin-top: 22px; }
html:is([data-view="mobile"], .view-mobile) .foot-h { margin-bottom: 12px; }
html:is([data-view="mobile"], .view-mobile) .foot-grid a, html:is([data-view="mobile"], .view-mobile) .footer-cookie { padding: 5px 0; min-height: 44px; overflow-wrap: anywhere; line-height: 2; }
html:is([data-view="mobile"], .view-mobile) .foot-bottom { display: grid; gap: 12px; margin-top: 30px; }
html:is([data-view="mobile"], .view-mobile) .copyright-notice { font-size: 11px; line-height: 1.9; }
html:is([data-view="mobile"], .view-mobile) .store-dialog,
html:is([data-view="mobile"], .view-mobile) .checkout-dialog { width: min(460px, calc(100% - 16px)); max-height: calc(100dvh - 16px); margin: auto; }
html:is([data-view="mobile"], .view-mobile) .store-panel { padding: 54px 20px 24px; }
html:is([data-view="mobile"], .view-mobile) .checkout-panel { padding: 54px 20px 24px; }
html:is([data-view="mobile"], .view-mobile) .store-panel h2 { font-size: 29px; line-height: 1.3; margin: 6px 0 24px; overflow-wrap: anywhere; }
html:is([data-view="mobile"], .view-mobile) .checkout-dialog h2 { font-size: 31px; }
html:is([data-view="mobile"], .view-mobile) .store-form-grid { grid-template-columns: minmax(0, 1fr); }
html:is([data-view="mobile"], .view-mobile) .store-form-grid .wide { grid-column: auto; }
html:is([data-view="mobile"], .view-mobile) .auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html:is([data-view="mobile"], .view-mobile) .auth-tabs button { width: 100%; padding: 10px 6px; }
html:is([data-view="mobile"], .view-mobile) .cart-line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
html:is([data-view="mobile"], .view-mobile) .cart-line > span { justify-self: end; font-size: 19px; }
html:is([data-view="mobile"], .view-mobile) .cart-line h3 { font-size: 23px; }
html:is([data-view="mobile"], .view-mobile) .cart-delivery { min-width: 0; padding: 14px; }
html:is([data-view="mobile"], .view-mobile) .cart-delivery label { min-height: 44px; padding: 7px 0; margin: 3px 0; }
html:is([data-view="mobile"], .view-mobile) .coupon-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
html:is([data-view="mobile"], .view-mobile) .coupon-row .store-action { margin: 0 0 16px; }
html:is([data-view="mobile"], .view-mobile) .cart-totals div { gap: 14px; font-size: 13px; }
html:is([data-view="mobile"], .view-mobile) .cart-totals dt { min-width: 0; }
html:is([data-view="mobile"], .view-mobile) .cart-totals dd { flex: 0 0 auto; text-align: right; }
html:is([data-view="mobile"], .view-mobile) .cart-totals .total { font-size: 24px; }
html:is([data-view="mobile"], .view-mobile) .member-turnstile { overflow-x: auto; max-width: 100%; }
html:is([data-view="mobile"], .view-mobile) .cookie-banner { left: 8px; right: 8px; bottom: 8px; max-width: 464px; max-height: 60dvh; overflow: auto; padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
html:is([data-view="mobile"], .view-mobile) .cookie-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
html:is([data-view="mobile"], .view-mobile) .store-toast { width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; }
html:is([data-view="mobile"], .view-mobile) .admin-card { padding: 22px 18px; }
html:is([data-view="mobile"], .view-mobile) .policy[id],
html:is([data-view="mobile"], .view-mobile) .faq [id],
html:is([data-view="mobile"], .view-mobile) #live-program { scroll-margin-top: 96px; }

/* Automatic phone fallback also works before view.js loads. */
@media (max-width: 767px) {
  html:not([data-view="desktop"]):not(.view-desktop) body { min-width: 0; width: 100%; max-width: 480px; margin: 0 auto; }
  html:not([data-view="desktop"]):not(.view-desktop) .site-tools { width: 100%; min-width: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .wrapper,
  html:not([data-view="desktop"]):not(.view-desktop) .slim { padding-left: 18px; padding-right: 18px; }
  html:not([data-view="desktop"]):not(.view-desktop) .topline { padding: 8px 16px; font-size: 9px; line-height: 1.6; letter-spacing: .1em; text-align: center; }
  html:not([data-view="desktop"]):not(.view-desktop) .tools-row { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 8px; padding-bottom: 10px; }
  html:not([data-view="desktop"]):not(.view-desktop) .language-switch { justify-content: center; gap: 16px; }
  html:not([data-view="desktop"]):not(.view-desktop) .language-switch a { display: inline-flex; align-items: center; min-height: 36px; font-size: 11px; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .tool-button { font-size: 11px; line-height: 1.4; padding: 10px 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .nav { height: 76px; min-height: 76px; padding-top: 0; padding-bottom: 0; gap: 12px; }
  html:not([data-view="desktop"]):not(.view-desktop) .brand { gap: 10px; min-width: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .brand img { width: 44px; height: 44px; flex: 0 0 44px; }
  html:not([data-view="desktop"]):not(.view-desktop) .brand-name { font-size: 22px; letter-spacing: .11em; }
  html:not([data-view="desktop"]):not(.view-desktop) .brand-cn { font-size: 10px; letter-spacing: .28em; }
  html:not([data-view="desktop"]):not(.view-desktop) .nav-note { display: none; }
  html:not([data-view="desktop"]):not(.view-desktop) .mobile-toggle { display: block; padding: 6px; line-height: 1; }
  html:not([data-view="desktop"]):not(.view-desktop) .navlinks { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--ivory); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; border-bottom: 1px solid var(--line); max-height: calc(100dvh - 96px); overflow: auto; }
  html:not([data-view="desktop"]):not(.view-desktop) .navlinks.open { display: flex; }
  html:not([data-view="desktop"]):not(.view-desktop) .navlinks a { display: flex; align-items: center; min-height: 46px; font-size: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-grid { display: block; min-height: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-copy { padding: 42px 0 38px; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero h1 { font-size: clamp(48px, 12vw, 62px); line-height: 1.03; margin: 24px 0 22px; }
  html:not([data-view="desktop"]):not(.view-desktop)[lang^="zh"] .hero h1 { font-size: clamp(38px, 10.5vw, 48px); line-height: 1.4; letter-spacing: .02em; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-sub { font-size: 17px; line-height: 1.7; margin-bottom: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-actions { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 26px; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-actions .button { min-width: 0; width: 100%; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-actions .plain-link { align-self: flex-start; padding-top: 8px; padding-bottom: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-caption { margin-top: 27px; letter-spacing: .17em; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-art { height: 420px; min-height: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-talisman { height: 72%; top: 14%; left: 34%; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-talisman.side { height: 61%; top: 20%; left: 9%; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-talisman.third { height: 58%; top: 21%; left: 63%; }
  html:not([data-view="desktop"]):not(.view-desktop) .hero-vert { right: 12px; bottom: 16px; font-size: 10px; letter-spacing: .17em; }
  html:not([data-view="desktop"]):not(.view-desktop) .art-caption { left: 14px; bottom: 16px; max-width: 75%; font-size: 9px; letter-spacing: .12em; }
  html:not([data-view="desktop"]):not(.view-desktop) .rulebar { grid-template-columns: 1fr; gap: 0; padding-top: 8px; padding-bottom: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .rulebar span { padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .12em; }
  html:not([data-view="desktop"]):not(.view-desktop) .rulebar span:last-child { border: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) section.section { padding: 58px 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .section-title { display: block; margin-bottom: 28px; }
  html:not([data-view="desktop"]):not(.view-desktop) .section-title h2 { font-size: 40px; line-height: 1.12; }
  html:not([data-view="desktop"]):not(.view-desktop)[lang^="zh"] .section-title h2 { font-size: 34px; line-height: 1.45; }
  html:not([data-view="desktop"]):not(.view-desktop) .section-title .body { margin-top: 20px; font-size: 15px; line-height: 1.8; }
  html:not([data-view="desktop"]):not(.view-desktop) .intro { display: block; }
  html:not([data-view="desktop"]):not(.view-desktop) .intro-symbol { min-height: 220px; padding: 30px; border-right: 0; border-bottom: 1px solid var(--line); }
  html:not([data-view="desktop"]):not(.view-desktop) .intro-symbol img { width: 180px; max-width: 72%; }
  html:not([data-view="desktop"]):not(.view-desktop) .intro-text { padding: 42px 20px; }
  html:not([data-view="desktop"]):not(.view-desktop) .philosophy-quote { font-size: 29px !important; line-height: 1.6 !important; }
  html:not([data-view="desktop"]):not(.view-desktop) .intro-text .philosophy-line { font-size: 17px; line-height: 1.9; }
  html:not([data-view="desktop"]):not(.view-desktop) .collection .t-grid,
  html:not([data-view="desktop"]):not(.view-desktop) .t-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card { padding: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-faces { gap: 18px; padding: 18px 12px 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-faces figure { display: flex; flex-direction: column; align-items: center; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-faces img { width: 100%; max-height: 390px; object-fit: contain; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-faces figcaption { font-size: 11px; margin-top: 10px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card h3 { font-size: 28px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card-info { padding: 20px 2px 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card .sub { font-size: 10px; line-height: 1.8; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card .chip { display: inline; font-size: 11px; }
  html:not([data-view="desktop"]):not(.view-desktop) .t-card.large .t-description { min-height: 0; font-size: 13px; line-height: 1.9; margin-top: 10px; }
  html:not([data-view="desktop"]):not(.view-desktop) .purchase-trigger { font-size: 12px; letter-spacing: .04em; padding: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .shop-note { display: grid; gap: 18px; margin-top: 26px; }
  html:not([data-view="desktop"]):not(.view-desktop) .shop-note .plain-link { justify-self: start; }
  html:not([data-view="desktop"]):not(.view-desktop) .home-bundles { margin-top: 44px; padding-top: 30px; }
  html:not([data-view="desktop"]):not(.view-desktop) .home-bundles .section-title h2 { font-size: 32px; }
  html:not([data-view="desktop"]):not(.view-desktop) .bundle-grid,
  html:not([data-view="desktop"]):not(.view-desktop) .readings-strip,
  html:not([data-view="desktop"]):not(.view-desktop) .readings-strip:has([data-product="bazi-basic"]) { grid-template-columns: minmax(0, 1fr); }
  html:not([data-view="desktop"]):not(.view-desktop) .reading-tile { padding: 28px 22px; min-height: 0; gap: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  html:not([data-view="desktop"]):not(.view-desktop) .reading-tile:last-child { border-bottom: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .reading-tile h3 { font-size: 29px; line-height: 1.3; overflow-wrap: anywhere; }
  html:not([data-view="desktop"]):not(.view-desktop) .reading-tile p { font-size: 13px; line-height: 1.8; }
  html:not([data-view="desktop"]):not(.view-desktop) .shipping-panel { display: grid; gap: 22px; padding: 24px 20px; margin-top: 30px; }
  html:not([data-view="desktop"]):not(.view-desktop) .shipping-panel .plain-link { display: inline-block; white-space: normal; margin-top: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .offers-panel button { width: 100%; }
  html:not([data-view="desktop"]):not(.view-desktop) .ritual-grid,
  html:not([data-view="desktop"]):not(.view-desktop) .story-band,
  html:not([data-view="desktop"]):not(.view-desktop) .split-hero,
  html:not([data-view="desktop"]):not(.view-desktop) .culture-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  html:not([data-view="desktop"]):not(.view-desktop) .dark-section h2 { font-size: 42px; }
  html:not([data-view="desktop"]):not(.view-desktop)[lang^="zh"] .dark-section h2 { font-size: 36px; line-height: 1.45; }
  html:not([data-view="desktop"]):not(.view-desktop) .dark-section p { font-size: 15px; }
  html:not([data-view="desktop"]):not(.view-desktop) .ritual-steps { margin-top: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .ritual-step { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .story-band { gap: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .story-panel { padding: 50px 20px; }
  html:not([data-view="desktop"]):not(.view-desktop) .story-panel h2 { font-size: 42px; }
  html:not([data-view="desktop"]):not(.view-desktop) .story-art { min-height: 290px; height: 290px; }
  html:not([data-view="desktop"]):not(.view-desktop) .marquee { padding: 32px 18px; font-size: 20px; line-height: 1.5; }
  html:not([data-view="desktop"]):not(.view-desktop) .page-heading { padding: 48px 0 34px; }
  html:not([data-view="desktop"]):not(.view-desktop) .page-heading h1 { font-size: 48px; overflow-wrap: anywhere; }
  html:not([data-view="desktop"]):not(.view-desktop)[lang^="zh"] .page-heading h1 { font-size: 39px; line-height: 1.4; }
  html:not([data-view="desktop"]):not(.view-desktop) .page-heading p { font-size: 17px; line-height: 1.8; }
  html:not([data-view="desktop"]):not(.view-desktop) .price-list,
  html:not([data-view="desktop"]):not(.view-desktop) .policy-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html:not([data-view="desktop"]):not(.view-desktop) .price-card { padding: 27px 22px; }
  html:not([data-view="desktop"]):not(.view-desktop) .price-card h2 { font-size: 33px; line-height: 1.3; }
  html:not([data-view="desktop"]):not(.view-desktop) .price-card p { min-height: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .policy { padding: 26px 22px; }
  html:not([data-view="desktop"]):not(.view-desktop) .policy h2 { font-size: 27px; line-height: 1.4; }
  html:not([data-view="desktop"]):not(.view-desktop) .split-hero h2 { font-size: 39px; }
  html:not([data-view="desktop"]):not(.view-desktop) .split-hero img { width: 65%; margin-top: 15px; }
  html:not([data-view="desktop"]):not(.view-desktop) .faq details { padding: 20px; }
  html:not([data-view="desktop"]):not(.view-desktop) .faq summary { font-size: 21px; min-height: 44px; }
  html:not([data-view="desktop"]):not(.view-desktop) footer { padding: 50px 0 25px; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-grid > div:first-child { grid-column: auto; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-brand { font-size: 44px; letter-spacing: .08em; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-description { font-size: 17px; margin-top: 22px; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-h { margin-bottom: 12px; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-grid a, html:not([data-view="desktop"]):not(.view-desktop) .footer-cookie { padding: 5px 0; min-height: 44px; overflow-wrap: anywhere; line-height: 2; }
  html:not([data-view="desktop"]):not(.view-desktop) .foot-bottom { display: grid; gap: 12px; margin-top: 30px; }
  html:not([data-view="desktop"]):not(.view-desktop) .copyright-notice { font-size: 11px; line-height: 1.9; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-dialog,
  html:not([data-view="desktop"]):not(.view-desktop) .checkout-dialog { width: min(460px, calc(100% - 16px)); max-height: calc(100dvh - 16px); margin: auto; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-panel { padding: 54px 20px 24px; }
  html:not([data-view="desktop"]):not(.view-desktop) .checkout-panel { padding: 54px 20px 24px; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-panel h2 { font-size: 29px; line-height: 1.3; margin: 6px 0 24px; overflow-wrap: anywhere; }
  html:not([data-view="desktop"]):not(.view-desktop) .checkout-dialog h2 { font-size: 31px; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-form-grid { grid-template-columns: minmax(0, 1fr); }
  html:not([data-view="desktop"]):not(.view-desktop) .store-form-grid .wide { grid-column: auto; }
  html:not([data-view="desktop"]):not(.view-desktop) .auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .auth-tabs button { width: 100%; padding: 10px 6px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-line > span { justify-self: end; font-size: 19px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-line h3 { font-size: 23px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-delivery { min-width: 0; padding: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-delivery label { min-height: 44px; padding: 7px 0; margin: 3px 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .coupon-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .coupon-row .store-action { margin: 0 0 16px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-totals div { gap: 14px; font-size: 13px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-totals dt { min-width: 0; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-totals dd { flex: 0 0 auto; text-align: right; }
  html:not([data-view="desktop"]):not(.view-desktop) .cart-totals .total { font-size: 24px; }
  html:not([data-view="desktop"]):not(.view-desktop) .member-turnstile { overflow-x: auto; max-width: 100%; }
  html:not([data-view="desktop"]):not(.view-desktop) .cookie-banner { left: 8px; right: 8px; bottom: 8px; max-width: 464px; max-height: 60dvh; overflow: auto; padding: 18px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html:not([data-view="desktop"]):not(.view-desktop) .cookie-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html:not([data-view="desktop"]):not(.view-desktop) .store-toast { width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; }
  html:not([data-view="desktop"]):not(.view-desktop) .admin-card { padding: 22px 18px; }
  html:not([data-view="desktop"]):not(.view-desktop) .policy[id],
  html:not([data-view="desktop"]):not(.view-desktop) .faq [id],
  html:not([data-view="desktop"]):not(.view-desktop) #live-program { scroll-margin-top: 96px; }
  
}

/* Compact tablet windows retain desktop mode without forcing horizontal overflow. */
@media (max-width: 767px) {
  html[data-view="desktop"] body { min-width: 0; }
  html[data-view="desktop"] .site-tools { width: 100vw; min-width: 0; }
  html[data-view="desktop"] .tools-row { gap: 8px; padding-left: 16px; padding-right: 16px; }
  html[data-view="desktop"] .store-dialog,
  html[data-view="desktop"] .checkout-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  html[data-view="desktop"] .store-panel,
  html[data-view="desktop"] .checkout-panel { padding: 54px 18px 24px; }
  html[data-view="desktop"] .store-form-grid,
  html[data-view="desktop"] .coupon-row { grid-template-columns: minmax(0, 1fr); }
  html[data-view="desktop"] .auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html[data-view="desktop"] .cookie-banner { padding: 18px; max-height: 60dvh; overflow: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t-card, .button, .purchase-trigger { transition: none; }
}