@font-face { font-family: "Marcellus"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
/* Aesthea — tokens.css compiled from tokens.json for local use (2026-10-21). Edit tokens.json, not this file. */
:root, [data-theme="light"] {
  --neutral-0: #FFFFFF;
  --neutral-50: #F6F6F6;
  --neutral-100: #F3F0EC;
  --neutral-200: #EBEBEB;
  --neutral-300: #D3D3D1;
  --neutral-400: #B8B8B5;
  --neutral-500: #8C8C8C;
  --neutral-600: #7A7774;
  --neutral-700: #66615E;
  --neutral-800: #484440;
  --neutral-900: #201D1A;
  --neutral-950: #171513;
  --brand-50: #FAF7F2;
  --brand-100: #F4EDE5;
  --brand-200: #EADCCB;
  --brand-300: #BEA493;
  --brand-400: #80604B;
  --brand-500: #6D4F40;
  --brand-600: #604438;
  --brand-700: #57453B;
  --brand-800: #44332C;
  --brand-900: #30211C;
  --status-error: #C43131;
  --status-warning: #B1844F;
  --bg-base: var(--neutral-0);
  --bg-white: var(--neutral-0);
  --bg-section: var(--brand-50);
  --surface-brand: var(--brand-50);
  --surface-card: var(--neutral-0);
  --surface-muted: var(--neutral-200);
  --surface-subtle: var(--neutral-50);
  --surface-fill-selected: var(--brand-100);
  --surface-editorial: var(--brand-500);
  --surface-inverse: var(--brand-900);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-subtle: var(--neutral-700);
  --text-tertiary: var(--neutral-700);
  --text-disabled: var(--neutral-300);
  --text-brand: var(--brand-500);
  --text-eyebrow: var(--brand-500);
  --text-inverse: var(--neutral-0);
  --text-on-editorial-muted: var(--brand-200);
  --border-subtle: var(--neutral-200);
  --border-base: var(--brand-200);
  --border-strong: var(--neutral-600);
  --border-brand: var(--brand-500);
  --action-primary: var(--brand-500);
  --action-primary-hover: var(--brand-700);
  --action-primary-active: var(--brand-800);
  --action-secondary: var(--brand-100);
  --action-secondary-hover: var(--brand-200);
  --action-secondary-text: var(--brand-800);
  --action-outline-text: var(--brand-500);
  --action-disabled: var(--neutral-200);
  --control-border: var(--neutral-600);
  --control-border-hover: var(--neutral-800);
  --control-border-focus: var(--brand-500);
  --choice-border: var(--neutral-600);
  --choice-checked: var(--brand-500);
  --price-sale: var(--brand-800);
  --price-compare: var(--neutral-700);
  --price-trade: var(--brand-500);
  --rating-star: var(--neutral-900);
  --badge-neutral-bg: var(--brand-100);
  --badge-neutral-text: var(--brand-800);
  --badge-set-bg: var(--brand-500);
  --badge-set-text: var(--neutral-0);
  --badge-new-bg: var(--brand-100);
  --badge-new-text: var(--brand-800);
  --badge-bestseller-bg: var(--brand-900);
  --badge-bestseller-text: var(--neutral-0);
  --badge-sale-bg: var(--brand-800);
  --badge-sale-text: var(--neutral-0);
  --count-badge-bg: var(--brand-500);
  --delivery-extended-text: var(--neutral-700);
  --feedback-error-text: var(--status-error);
  --feedback-error-bg: #FBF1F1;
  --feedback-warning-text: var(--neutral-800);
  --feedback-warning-bg: #F8F2EA;
  --feedback-success-text: var(--brand-500);
  --feedback-success-bg: var(--brand-50);
  --other-overlay: rgba(23, 21, 19, 0.48);
  --overlay-strong: rgba(23, 21, 19, 0.64);
  --header-gradient: rgba(48, 33, 28, 0.72);
  --logo-ink: var(--brand-500);
  --focus-ring-color: var(--brand-800);
  --focus-ring-inverse-color: var(--neutral-0);
  --shadow-card: 0 0 0 0 rgba(0, 0, 0, 0);
  --shadow-overlay: 0 16px 40px rgba(23, 21, 19, 0.14);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #44332C;
  --focus-ring-inverse: 0 0 0 2px #30211C, 0 0 0 4px #FFFFFF;
}
:root {
  --padding-lr: 48px;
  --padding-lr-t: 24px;
  --page-gutter-m: 16px;
  --padding-tb: 96px;
  --padding-tb-t: 64px;
  --padding-tb-m: 48px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 999px;
  --display-1: 64px;
  --display-1-t: 52px;
  --display-1-m: 40px;
  --display-2: 52px;
  --display-2-t: 44px;
  --display-2-m: 36px;
  --heading-h1: 52px;
  --heading-h1-t: 44px;
  --heading-h1-m: 36px;
  --heading-h2: 46px;
  --heading-h2-t: 38px;
  --heading-h2-m: 32px;
  --heading-h3: 36px;
  --heading-h3-t: 32px;
  --heading-h3-m: 28px;
  --heading-h4: 26px;
  --heading-h4-m: 24px;
  --heading-h5: 22px;
  --heading-h5-m: 20px;
  --heading-h6: 18px;
  --heading-h6-m: 17px;
  --body-large: 20px;
  --body-large-m: 18px;
  --body-base: 16px;
  --body-base-m: 16px;
  --body-small: 14px;
  --body-small-m: 14px;
  --body-caption: 12px;
  --price-large-m: 24px;
  --zh-display-1: 56px;
  --zh-display-1-t: 44px;
  --zh-display-1-m: 34px;
  --zh-display-2: 44px;
  --zh-display-2-t: 38px;
  --zh-display-2-m: 30px;
  --zh-heading-h1: 44px;
  --zh-heading-h1-t: 38px;
  --zh-heading-h1-m: 30px;
  --zh-heading-h2: 36px;
  --zh-heading-h2-t: 30px;
  --zh-heading-h2-m: 26px;
  --zh-heading-h3: 30px;
  --zh-heading-h3-t: 26px;
  --zh-heading-h3-m: 24px;
  --zh-heading-h4: 24px;
  --zh-heading-h4-m: 21px;
  --zh-heading-h5: 20px;
  --zh-heading-h5-m: 18px;
  --zh-heading-h6: 17px;
  --zh-heading-h6-m: 16px;
  --zh-body-base-m: 15px;
  --zh-body-small-m: 13px;
  --control-lg: 52px;
  --control-md: 44px;
  --control-sm: 36px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-btn-md: 18px;
  --icon-btn-lg: 20px;
  --bp-mobile: 390px;
  --bp-tablet: 800px;
  --bp-desktop: 1440px;
  --bp-max-mobile: 599px;
  --bp-max-tablet: 1023px;
  --container-max: 1344px;
  --grid-gap: 24px;
  --grid-gap-m: 16px;
  --z-header: 100;
  --z-drawer: 300;
  --z-toast: 500;
  --font-title: "Marcellus", "Times New Roman", serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-zh-title: "Marcellus", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --font-zh-text: "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.display { font-family: var(--font-title); font-size: 64px; line-height: 1.2; font-weight: 400; }
.heading-h1 { font-family: var(--font-title); font-size: 52px; line-height: 1.2; font-weight: 400; }
.heading-h2 { font-family: var(--font-title); font-size: 46px; line-height: 1.2; font-weight: 400; }
.heading-h3 { font-family: var(--font-title); font-size: 36px; line-height: 1.25; font-weight: 400; }
.heading-h4 { font-family: var(--font-title); font-size: 26px; line-height: 1.3; font-weight: 400; }
.heading-h5 { font-family: var(--font-title); font-size: 22px; line-height: 1.35; font-weight: 400; }
.heading-h6 { font-family: var(--font-title); font-size: 18px; line-height: 1.4; font-weight: 400; }
.body-large { font-family: var(--font-text); font-size: 20px; line-height: 1.6; font-weight: 300; }
.body-base { font-family: var(--font-text); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-small { font-family: var(--font-text); font-size: 14px; line-height: 1.6; font-weight: 400; }
.caption { font-family: var(--font-text); font-size: 12px; line-height: 1.5; font-weight: 400; }
.label { font-family: var(--font-text); font-size: 12px; line-height: 1.5; font-weight: 500; }
.button { font-family: var(--font-text); font-size: 14px; line-height: 1.2; font-weight: 500; }
.price { font-family: var(--font-text); font-size: 18px; line-height: 1.3; font-weight: 400; }
.price-large { font-family: var(--font-title); font-size: 28px; line-height: 1.25; font-weight: 400; }
.zh-display { font-family: var(--font-zh-title); font-size: 56px; line-height: 1.25; font-weight: 400; }
.zh-heading-h1 { font-family: var(--font-zh-title); font-size: 44px; line-height: 1.3; font-weight: 400; }
.zh-heading-h2 { font-family: var(--font-zh-title); font-size: 36px; line-height: 1.35; font-weight: 400; }
.zh-heading-h3 { font-family: var(--font-zh-title); font-size: 30px; line-height: 1.4; font-weight: 400; }
.zh-heading-h6 { font-family: var(--font-zh-title); font-size: 17px; line-height: 1.5; font-weight: 400; }
.zh-body { font-family: var(--font-zh-text); font-size: 16px; line-height: 1.75; font-weight: 400; }
.zh-body-small { font-family: var(--font-zh-text); font-size: 14px; line-height: 1.7; font-weight: 400; }
.zh-label { font-family: var(--font-zh-text); font-size: 13px; line-height: 1.4; font-weight: 500; }