:root {
  --muye-font-sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans", "Noto Sans SC", "Hiragino Sans GB", "Yu Gothic", sans-serif;
  --muye-font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --muye-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --muye-ink: #142019;
  --muye-paper: #f0ece3;
  --muye-surface: #fbfaf6;
  --muye-muted: #68726a;
  --muye-line: #cbc8bd;
  --muye-accent: #ceda70;
  --muye-focus: #a5b64e;
  --muye-ease: cubic-bezier(.2, .72, .2, 1);
  --muye-shadow-soft: 0 24px 64px rgb(20 32 25 / 9%);
}

html {
  font-family: var(--muye-font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:lang(zh), html:lang(ja) {
  --muye-font-sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", "Yu Gothic", sans-serif;
  --muye-font-editorial: "Songti SC", "STSong", "Yu Mincho", Georgia, serif;
}

body, button, input, select, textarea { font-family: var(--muye-font-sans); }
body { color: var(--muye-ink); }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
p, li, label, input, textarea, select, button { line-height: 1.55; }
input, select, textarea, button, a { -webkit-tap-highlight-color: transparent; }

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: 7px;
  color: var(--muye-ink);
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
  color: #8a918b;
  opacity: 1;
}
:where(button, .button) { font-weight: 720; }
:where(button:disabled) { cursor: not-allowed; }

button, a, input, select, textarea {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .25s var(--muye-ease), opacity .2s ease;
}

button:not(:disabled), a[href] { cursor: pointer; }
button:not(:disabled):active, a[href]:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--muye-focus) !important; outline-offset: 3px !important; }
::selection { color: #111610; background: #d6df84; }

article, .account-card, .payment-card, .product-card, .help-results, .support-contact {
  transition: transform .35s var(--muye-ease), box-shadow .35s var(--muye-ease), border-color .25s ease;
}

:where(.payment-card, .checkout-card, .help-results, .support-contact, .collection-help) {
  border-radius: 12px;
}

:where(.payment-card, .checkout-card, .help-results, .support-contact, .collection-help) :is(input, select, textarea) {
  background: #fdfcf8;
}

:where(.button, form > button, .fit-check-card button, .support-contact button) {
  border-radius: 7px;
}

.payment-card,
.checkout-card,
.help-results,
.support-contact,
.collection-help {
  border-color: var(--muye-line) !important;
  box-shadow: var(--muye-shadow-soft);
}

.payment-card :is(input, select, textarea),
#checkout-form :is(input, select, textarea),
.fit-check-card :is(input, select, textarea),
.support-contact :is(input, select, textarea) {
  min-height: 46px;
  border-color: #adb3ac;
  background: #fff;
}

.payment-card > button,
#checkout-form > button,
.fit-check-card button,
.support-contact button {
  min-height: 48px;
  letter-spacing: .02em;
}

.breadcrumb,
.eyebrow,
.form-eye,
.top {
  font-family: var(--muye-font-mono) !important;
  letter-spacing: .14em;
}

.product-card,
.product-preview-card,
.series-grid article,
.recommend-grid article {
  overflow: hidden;
  border-radius: 10px;
  border-color: rgb(20 32 25 / 16%);
}

.product-card img, .product-preview-card img, .series-row img, .series-grid article img, .recommend-grid article img {
  transition: transform .7s var(--muye-ease), filter .35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .product-preview-card:hover, .series-grid article:hover, .recommend-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgb(20 32 25 / 10%);
  }
  .product-card:hover img, .product-preview-card:hover img, .series-row a:hover img, .series-grid article:hover img, .recommend-grid article:hover img { transform: scale(1.025); }
  :where(.button, button):not(:disabled):hover { filter: brightness(1.04); }
}

@media (max-width: 700px) {
  body { overflow-wrap: anywhere; }
  input, select, textarea { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}