/* Handmade Polska — H5 storefront design system.
   One phone-shaped column; on PC it is sized from the viewport height and every
   measurement scales with --u (one design pixel of a 390px reference phone). */

@font-face {
  font-family: "HP Display";
  src: url("/public/fonts/hp-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HP Display";
  src: url("/public/fonts/hp-display-500i.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ============ 1. Tokens ============ */
html.mall-ui {
  /* Column: ~9.5:16 of the viewport height, 420–720px, never wider than the window. */
  --col-fit: clamp(420px, 60dvh, 720px);
  --mall-col: min(100%, var(--col-fit));
  --col-left: calc(50% - var(--mall-col) / 2);
  /* One design pixel. 390px column = 1px; grows at ~half the rate of the column. */
  --u: calc(1px + (min(100vw, var(--col-fit)) - 390px) * .0012);

  --desk: #e7e2da;
  --paper: #f6f3ee;
  --surface: #fffdf9;
  --sunk: #efeae2;
  --ink: #1c1a17;
  --ink-2: #39342f;
  --ink-3: #635c53;
  --muted: #8a8378;
  --faint: #b3aca1;
  --line: rgba(28, 26, 23, .075);
  --line-2: rgba(28, 26, 23, .14);
  --accent: #7a2a33;
  --accent-hi: #8d3640;
  --accent-press: #5f1f27;
  --accent-soft: rgba(122, 42, 51, .08);
  --on-accent: #fbf6ef;
  --gold: #a8834f;
  --gold-hi: #d9be8f;
  --ok: #3f6a48;
  --ok-bg: #e4ede2;
  --warn: #8a5a17;
  --warn-bg: #f6ead6;
  --info: #3d5a78;
  --info-bg: #e2e9f1;
  --off: #8a8378;
  --off-bg: #ece8e2;

  --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "HP Display", "Cormorant Garamond", Georgia, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", serif;
  --font-num: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --t-2xs: calc(var(--u) * 10.5);
  --t-xs: calc(var(--u) * 11.5);
  --t-sm: calc(var(--u) * 12.5);
  --t-base: calc(var(--u) * 14);
  --t-md: calc(var(--u) * 15);
  --t-lg: calc(var(--u) * 17);
  --t-xl: calc(var(--u) * 20);
  --t-2xl: calc(var(--u) * 24);
  --t-3xl: calc(var(--u) * 30);

  --s-1: calc(var(--u) * 4);
  --s-2: calc(var(--u) * 8);
  --s-3: calc(var(--u) * 12);
  --s-4: calc(var(--u) * 16);
  --s-5: calc(var(--u) * 20);
  --s-6: calc(var(--u) * 24);
  --s-8: calc(var(--u) * 32);
  --s-10: calc(var(--u) * 40);
  --gx: calc(var(--u) * 18);

  --r-xs: calc(var(--u) * 8);
  --r-sm: calc(var(--u) * 12);
  --r-md: calc(var(--u) * 16);
  --r-lg: calc(var(--u) * 22);
  --r-xl: calc(var(--u) * 28);

  --top-h: calc(var(--u) * 56);
  --tab-h: calc(var(--u) * 60);
  --bar-h: calc(var(--u) * 70);
  --hit: calc(var(--u) * 40);
  --btn-h: calc(var(--u) * 50);
  --btn-h-sm: calc(var(--u) * 36);
  --chip-h: calc(var(--u) * 32);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --e1: 0 1px 2px rgba(40, 28, 16, .05);
  --e2: 0 1px 2px rgba(40, 28, 16, .04), 0 10px 26px -14px rgba(40, 28, 16, .22);
  --e3: 0 2px 6px rgba(40, 28, 16, .06), 0 26px 52px -22px rgba(40, 28, 16, .38);
  --ring: 0 0 0 calc(var(--u) * 4) rgba(122, 42, 51, .14);

  --d-1: 150ms;
  --d-2: 220ms;
  --d-3: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* legacy hooks used by older markup */
  --main-color: #7a2a33;
  --btn-color: #7a2a33;
  --van-base-font: var(--font);

  font-size: calc(var(--u) * 16);
  background: var(--desk);
  color-scheme: light;
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

/* Real phones: the column is the screen. */
@media (max-width: 480px) {
  html.mall-ui {
    --mall-col: 100%;
    --u: clamp(.9px, calc(100vw / 390), 1.1px);
    scrollbar-gutter: auto;
  }
}

/* ============ 2. Page, column and desk backdrop ============ */
html.mall-ui body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

html.mall-ui :where(button, input, select, textarea) {
  font-family: inherit;
}

html.mall-ui :where(a) {
  color: inherit;
}

html.mall-ui :where(button, a, [onclick], label) {
  -webkit-tap-highlight-color: transparent;
}

html.mall-ui :where([onclick], button) {
  cursor: pointer;
}

html.mall-ui :focus-visible {
  outline: 2px solid rgba(122, 42, 51, .55);
  outline-offset: 2px;
}

html.mall-ui ::selection {
  background: rgba(122, 42, 51, .16);
}

/* mall-responsive.css sets #app { max-width: 1000px }; the column rule wins here. */
html.mall-ui body #app,
html.mall-ui #app {
  position: relative;
  z-index: 1;
  width: var(--mall-col) !important;
  max-width: 100% !important;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto !important;
  background: var(--paper);
  overflow-x: clip;
}

html.mall-ui .mall-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 481px) {
  html.mall-ui body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(70% 55% at 50% 0%, rgba(255, 253, 248, .9), rgba(255, 253, 248, 0) 70%),
      radial-gradient(45% 60% at 0% 100%, rgba(122, 42, 51, .07), transparent 70%),
      radial-gradient(45% 60% at 100% 100%, rgba(168, 131, 79, .1), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      var(--desk);
  }

  html.mall-ui #app {
    box-shadow: 0 0 0 1px rgba(28, 26, 23, .06), 0 40px 120px -40px rgba(40, 28, 16, .38), 0 0 60px -20px rgba(40, 28, 16, .12);
  }
}

html.mall-ui .mall-desk {
  display: none;
}

@media (min-width: 1180px) {
  html.mall-ui .mall-desk {
    position: fixed;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(50% - var(--mall-col) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  html.mall-ui .mall-desk-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    opacity: .9;
  }

  html.mall-ui .mall-desk .mall-mark {
    width: clamp(44px, 2.4vw, 64px);
    height: clamp(53px, 2.9vw, 77px);
  }

  html.mall-ui .mall-desk .mall-wordmark {
    align-items: center;
  }

  html.mall-ui .mall-desk .mall-wordmark-main {
    font-size: clamp(30px, 1.75vw, 46px);
  }

  html.mall-ui .mall-desk .mall-wordmark-sub {
    font-size: clamp(10px, .55vw, 14px);
    margin-top: 6px;
  }

  html.mall-ui .mall-desk-rule {
    width: 28px;
    height: 1px;
    background: rgba(28, 26, 23, .2);
  }

  html.mall-ui .mall-desk p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(12px, .68vw, 16px);
    letter-spacing: .14em;
  }
}

/* ============ 3. Brand ============ */
html.mall-ui .mall-mark {
  flex: none;
  width: calc(var(--u) * 25);
  height: calc(var(--u) * 30);
  overflow: visible;
}

html.mall-ui .mall-mark-arch { fill: var(--accent); }
html.mall-ui .mall-mark-inner { fill: none; stroke: rgba(246, 239, 228, .32); stroke-width: .8; }
html.mall-ui .mall-mark-h { fill: none; stroke: #f6efe4; stroke-width: 1.7; stroke-linecap: round; }
html.mall-ui .mall-mark-pearl { fill: #f6efe4; }

html.mall-ui .mall-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1;
}

html.mall-ui .mall-wordmark-main {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 22);
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
}

html.mall-ui .mall-wordmark-sub {
  margin-top: calc(var(--u) * 3);
  padding-left: .1em;
  color: var(--muted);
  font-family: var(--font);
  font-size: calc(var(--u) * 8.5);
  font-weight: 600;
  letter-spacing: .48em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============ 4. Icons ============ */
html.mall-ui .mi {
  flex: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.14em;
  overflow: visible;
}

html.mall-ui .mi .fs { fill: currentColor; }
html.mall-ui .mi .soft { fill: currentColor; fill-opacity: .12; stroke: none; }
html.mall-ui .mi .x { stroke: var(--mi-knock, var(--surface)); }
html.mall-ui .mi .d { stroke-width: 2.4; }

/* ============ 5. Header ============ */
html.mall-ui .mall-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) calc(var(--gx) - var(--u) * 4) 0 var(--gx);
  box-sizing: border-box;
  background: rgba(246, 243, 238, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  transition: box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}

html.mall-ui .mall-top.is-scrolled {
  background: rgba(246, 243, 238, .92);
  box-shadow: 0 1px 0 var(--line), 0 10px 26px -20px rgba(40, 28, 16, .35);
}

html.mall-ui .mall-top.is-sub {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  padding-left: calc(var(--gx) - var(--u) * 10);
}

html.mall-ui .mall-top-lead {
  display: flex;
  align-items: center;
  min-width: 0;
}

html.mall-ui .mall-top-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-brand {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  transform-origin: left center;
  transition: transform var(--d-2) var(--ease);
}

html.mall-ui .mall-top.is-scrolled .mall-brand {
  transform: scale(.94);
}

html.mall-ui .mall-brand-img {
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 9);
  object-fit: cover;
}

html.mall-ui .mall-brand-text {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-top-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 2);
  min-width: 0;
}

html.mall-ui .mall-icon-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: calc(var(--u) * 22);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-icon-btn:hover { background: rgba(28, 26, 23, .05); }
}

html.mall-ui .mall-icon-btn:active {
  transform: scale(.9);
  background: rgba(28, 26, 23, .08);
}

/* Pills: inline-flex + line-height 1 + equal padding keeps text optically centred. */
html.mall-ui .mall-lang-btn,
html.mall-ui .mall-auth-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 32);
  margin-right: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 10);
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 249, .78);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
}

html.mall-ui .mall-lang-btn > span,
html.mall-ui .mall-auth-lang > span {
  display: block;
  line-height: 1;
}

html.mall-ui .mall-lang-btn .mi,
html.mall-ui .mall-auth-lang .mi {
  font-size: calc(var(--u) * 15);
  color: var(--ink-3);
  vertical-align: 0;
}

html.mall-ui .mall-lang-btn:active,
html.mall-ui .mall-auth-lang:active {
  transform: scale(.95);
}

@media (hover: hover) {
  html.mall-ui .mall-lang-btn:hover,
  html.mall-ui .mall-auth-lang:hover {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .22);
  }
}

html.mall-ui .mall-badge {
  position: absolute;
  top: calc(var(--u) * 3);
  right: calc(var(--u) * 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 4);
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--paper);
  color: #fff;
  font-family: var(--font-num);
  font-size: calc(var(--u) * 9.5);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

html.mall-ui .mall-badge[hidden] {
  display: none;
}

html.mall-ui .mall-badge.is-bump {
  animation: mall-bump var(--d-3) var(--ease-spring);
}

/* ============ 6. Tab bar (fixed, locked to the column) ============ */
html.mall-ui .mall-tab-space {
  height: calc(var(--tab-h) + var(--safe-b) + var(--s-6));
}

html.mall-ui .mall-tabbar {
  position: fixed;
  z-index: 60;
  bottom: 0;
  left: var(--col-left);
  display: flex;
  width: var(--mall-col);
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 0 calc(var(--u) * 6) var(--safe-b);
  box-sizing: border-box;
  background: rgba(255, 253, 249, .88);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: 0 -1px 0 var(--line), 0 -14px 34px -26px rgba(40, 28, 16, .4);
}

html.mall-ui .mall-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--d-2) var(--ease);
}

html.mall-ui .mall-tab-ico {
  position: relative;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  font-size: calc(var(--u) * 24);
  transition: transform var(--d-2) var(--ease-spring);
}

html.mall-ui .mall-tab-ico .mi {
  position: absolute;
  inset: 0;
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

html.mall-ui .mall-tab-ico .is-f {
  opacity: 0;
  transform: scale(.7);
}

html.mall-ui .mall-tab.is-on {
  color: var(--accent);
}

html.mall-ui .mall-tab.is-on .is-o {
  opacity: 0;
  transform: scale(1.15);
}

html.mall-ui .mall-tab.is-on .is-f {
  opacity: 1;
  transform: none;
  animation: mall-tab-pop var(--d-3) var(--ease-spring) backwards;
}

html.mall-ui .mall-tab:active .mall-tab-ico {
  transform: scale(.86);
}

html.mall-ui .mall-tab-label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--t-2xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-tab.is-on .mall-tab-label {
  color: var(--ink);
  font-weight: 650;
}

@media (hover: hover) {
  html.mall-ui .mall-tab:not(.is-on):hover { color: var(--ink-3); }
}

/* ============ 7. Page frame, sections ============ */
html.mall-ui .mall-page {
  display: block;
  padding: calc(var(--u) * 6) var(--gx) 0;
  animation: mall-page-in var(--d-3) var(--ease) backwards;
}

html.mall-ui .mall-section {
  margin-top: calc(var(--u) * 38);
}

html.mall-ui .mall-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

html.mall-ui .mall-sec-titles {
  min-width: 0;
}

html.mall-ui .mall-kicker {
  display: block;
  margin-bottom: calc(var(--u) * 6);
  color: var(--muted);
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html.mall-ui .mall-sec-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-sec-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 2);
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

html.mall-ui .mall-sec-more .mi {
  font-size: calc(var(--u) * 15);
  transition: transform var(--d-2) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-sec-more:hover { color: var(--ink); }
  html.mall-ui .mall-sec-more:hover .mi { transform: translateX(3px); }
}

html.mall-ui .mall-h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}

html.mall-ui .mall-h2 small {
  color: var(--muted);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ============ 8. Buttons, chips, pills ============ */
html.mall-ui .mall-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  height: var(--btn-h);
  min-width: 0;
  padding: 0 calc(var(--u) * 22);
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  user-select: none;
  transition: transform var(--d-1) var(--ease), background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), color var(--d-2) var(--ease), opacity var(--d-2) var(--ease);
}

html.mall-ui .mall-btn .mi {
  font-size: 1.15em;
}

html.mall-ui .mall-btn:active {
  transform: scale(.97);
}

html.mall-ui .mall-btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -14px rgba(122, 42, 51, .85);
  color: var(--on-accent);
}

@media (hover: hover) {
  html.mall-ui .mall-btn-primary:hover { background: linear-gradient(180deg, #81303a, #6a232c); }
}

html.mall-ui .mall-btn-ink {
  background: var(--ink);
  box-shadow: 0 12px 24px -16px rgba(28, 26, 23, .8);
  color: var(--paper);
}

html.mall-ui .mall-btn-ghost {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
}

@media (hover: hover) {
  html.mall-ui .mall-btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .26); }
}

html.mall-ui .mall-btn-quiet {
  background: transparent;
  color: var(--ink-3);
}

html.mall-ui .mall-btn-sm {
  height: var(--btn-h-sm);
  padding: 0 calc(var(--u) * 16);
  font-size: var(--t-sm);
}

html.mall-ui .mall-btn-block {
  display: flex;
  width: 100%;
}

html.mall-ui .mall-btn[disabled],
html.mall-ui .mall-btn.is-disabled {
  background: #d8d1c6;
  box-shadow: none;
  color: #fff;
  pointer-events: none;
}

html.mall-ui .mall-btn.is-loading {
  color: transparent !important;
  pointer-events: none;
}

html.mall-ui .mall-btn.is-loading .mi {
  opacity: 0;
}

html.mall-ui .mall-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  margin: calc(var(--u) * -9) 0 0 calc(var(--u) * -9);
  border: 2px solid rgba(251, 246, 239, .35);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: mall-spin .7s linear infinite;
}

html.mall-ui .mall-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  opacity: .16;
  pointer-events: none;
  transform: scale(0);
  animation: mall-ripple var(--d-3) var(--ease) forwards;
}

html.mall-ui .mall-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

html.mall-ui .mall-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 36);
  max-width: 100%;
  padding: 0 calc(var(--u) * 16);
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mall-ui .mall-chip .mi {
  font-size: calc(var(--u) * 15);
  color: var(--muted);
}

html.mall-ui .mall-chip.is-hot .mi {
  color: var(--accent);
}

@media (hover: hover) {
  html.mall-ui .mall-chip:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
}

html.mall-ui .mall-chip:active {
  transform: scale(.96);
}

html.mall-ui .mall-chip.is-on {
  background: var(--ink);
  box-shadow: none;
  color: var(--paper);
}

html.mall-ui .mall-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 10);
  border-radius: 999px;
  background: var(--off-bg);
  color: var(--off);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

html.mall-ui .mall-status::before {
  content: "";
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: currentColor;
}

html.mall-ui .mall-status.is-wait { background: var(--warn-bg); color: var(--warn); }
html.mall-ui .mall-status.is-ok { background: var(--ok-bg); color: var(--ok); }
html.mall-ui .mall-status.is-info { background: var(--info-bg); color: var(--info); }
html.mall-ui .mall-status.is-done { background: #efe6d6; color: #6e5326; }
html.mall-ui .mall-status.is-off { background: var(--off-bg); color: var(--off); }
html.mall-ui .mall-status.is-bad { background: #f6e1df; color: #a1322a; }

/* ============ 9. Price ============ */
html.mall-ui .mall-price {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}

html.mall-ui .mall-price-int {
  font-size: calc(var(--u) * 16);
  font-weight: 650;
}

html.mall-ui .mall-price-dec {
  font-size: calc(var(--u) * 11.5);
  font-weight: 600;
}

html.mall-ui .mall-price-cur {
  margin-left: calc(var(--u) * 3);
  color: var(--muted);
  font-size: calc(var(--u) * 11);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ============ 10. Panels, lists ============ */
html.mall-ui .mall-panel {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
}

html.mall-ui .mall-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

html.mall-ui .mall-panel-head h2,
html.mall-ui .mall-panel-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .02em;
}

html.mall-ui .mall-panel-head a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

html.mall-ui .mall-panel-head a .mi {
  font-size: calc(var(--u) * 14);
}

html.mall-ui .mall-rows {
  margin: 0;
}

html.mall-ui .mall-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: calc(var(--u) * 7) 0;
  font-size: var(--t-sm);
}

html.mall-ui .mall-row > :first-child {
  flex: none;
  color: var(--muted);
}

html.mall-ui .mall-row > :last-child {
  min-width: 0;
  color: var(--ink-2);
  text-align: right;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-row.is-total {
  margin-top: calc(var(--u) * 6);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-2);
}

html.mall-ui .mall-row.is-total > :first-child {
  color: var(--ink);
  font-weight: 600;
}

html.mall-ui .mall-row.is-total .mall-price-int {
  font-size: calc(var(--u) * 20);
  color: var(--accent);
}

/* Empty states */
html.mall-ui .mall-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 40) var(--s-6) calc(var(--u) * 28);
  text-align: center;
}

html.mall-ui .mall-illus {
  width: calc(var(--u) * 168);
  height: calc(var(--u) * 126);
  margin-bottom: var(--s-4);
}

html.mall-ui .mall-illus .il-shadow { fill: rgba(28, 26, 23, .06); }
html.mall-ui .mall-illus .il-arch { fill: var(--sunk); stroke: var(--line-2); stroke-width: 1.2; }
html.mall-ui .mall-illus .il-obj { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round; }
html.mall-ui .mall-illus .il-line { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; }
html.mall-ui .mall-illus .il-soft { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-linecap: round; }
html.mall-ui .mall-illus .il-pearl { fill: #fff; stroke: var(--gold); stroke-width: 1.4; }
html.mall-ui .mall-illus .il-spark { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; opacity: .7; }

html.mall-ui .mall-empty-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.4;
}

html.mall-ui .mall-empty-hint {
  max-width: 22em;
  margin: calc(var(--u) * 6) 0 0;
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}

html.mall-ui .mall-empty-state .mall-btn {
  margin-top: var(--s-5);
}

html.mall-ui .mall-end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-8) 0 0;
  color: var(--faint);
  font-size: var(--t-xs);
  letter-spacing: .08em;
}

html.mall-ui .mall-end::before,
html.mall-ui .mall-end::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ============ 11. Forms ============ */
html.mall-ui :where(input:not([type=hidden], [type=radio], [type=checkbox], [type=submit], [type=button], .van-stepper__input), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 16);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  outline: none;
  background-color: var(--surface);
  color: var(--ink);
  font-size: max(16px, var(--t-md));
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}

@media (min-width: 481px) {
  html.mall-ui :where(input:not([type=hidden], [type=radio], [type=checkbox], [type=submit], [type=button], .van-stepper__input), textarea, select) {
    font-size: var(--t-md);
  }
}

html.mall-ui :where(input:not([type=hidden], [type=radio], [type=checkbox], [type=submit], [type=button], .van-stepper__input), textarea, select):focus {
  border-color: rgba(122, 42, 51, .45);
  background-color: #fff;
  box-shadow: var(--ring);
}

html.mall-ui :where(input, textarea)::placeholder {
  color: var(--faint);
  opacity: 1;
}

html.mall-ui input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 100px #fff;
  -webkit-text-fill-color: var(--ink);
}

html.mall-ui :where(textarea) {
  min-height: calc(var(--u) * 100);
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  line-height: 1.6;
  resize: vertical;
}

html.mall-ui :where(select) {
  padding-right: calc(var(--u) * 40);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a8378' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--u) * 16) center;
  background-size: calc(var(--u) * 12);
}

html.mall-ui input[type=radio],
html.mall-ui input[type=checkbox] {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
  margin: 0 calc(var(--u) * 8) 0 0;
  vertical-align: -.2em;
  accent-color: var(--accent);
}

html.mall-ui .mall-input {
  display: block;
  margin-bottom: var(--s-4);
}

html.mall-ui .mall-input:last-child {
  margin-bottom: 0;
}

html.mall-ui .mall-input-label {
  display: block;
  margin: 0 0 calc(var(--u) * 7) calc(var(--u) * 2);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
}

html.mall-ui .mall-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

html.mall-ui .mall-input-box > .mall-input-ico {
  position: absolute;
  left: calc(var(--u) * 15);
  z-index: 1;
  color: var(--muted);
  font-size: calc(var(--u) * 18);
  pointer-events: none;
}

html.mall-ui .mall-input-box > .mall-input-ico ~ input,
html.mall-ui .mall-input-box > .mall-input-ico ~ textarea {
  padding-left: calc(var(--u) * 44);
}

html.mall-ui .mall-input-box > .mall-input-suffix {
  position: absolute;
  right: calc(var(--u) * 6);
  display: inline-flex;
  align-items: center;
}

html.mall-ui .mall-input-box:has(> .mall-input-suffix) > input {
  padding-right: calc(var(--u) * 52);
}

html.mall-ui .mall-pw-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: calc(var(--u) * 19);
}

html.mall-ui .mall-pw-toggle .is-on-ico,
html.mall-ui .mall-pw-toggle.is-on .is-off-ico {
  display: none;
}

html.mall-ui .mall-pw-toggle.is-on .is-on-ico {
  display: inline-block;
}

html.mall-ui .mall-unit {
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 600;
  padding-right: calc(var(--u) * 10);
}

html.mall-ui .mall-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: calc(var(--u) * 48);
  color: var(--ink-2);
  font-size: var(--t-base);
  cursor: pointer;
}

html.mall-ui input.mall-switch {
  position: relative;
  flex: none;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 28);
  margin: 0;
  border-radius: 999px;
  background: var(--line-2);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--d-2) var(--ease);
}

html.mall-ui input.mall-switch::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 3);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  transition: transform var(--d-2) var(--ease-spring);
}

html.mall-ui input.mall-switch:checked {
  background: var(--accent);
}

html.mall-ui input.mall-switch:checked::before {
  transform: translateX(calc(var(--u) * 18));
}

/* Radio cards (payment methods) */
html.mall-ui .mall-radio-cards {
  display: grid;
  gap: calc(var(--u) * 10);
}

html.mall-ui .mall-radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  min-height: calc(var(--u) * 66);
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  box-sizing: border-box;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
  transition: box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}

html.mall-ui .mall-radio-card:active {
  transform: scale(.99);
}

html.mall-ui .mall-radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html.mall-ui .mall-radio-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 12);
  background: var(--sunk);
  color: var(--ink-2);
  font-size: calc(var(--u) * 20);
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

html.mall-ui .mall-radio-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

html.mall-ui .mall-radio-txt b {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
}

html.mall-ui .mall-radio-txt small {
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-radio-dot {
  flex: none;
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: box-shadow var(--d-2) var(--ease-spring);
}

html.mall-ui .mall-radio-card:has(input:checked) {
  background: #fffaf6;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 22px -16px rgba(122, 42, 51, .6);
}

html.mall-ui .mall-radio-card:has(input:checked) .mall-radio-ico {
  background: var(--accent-soft);
  color: var(--accent);
}

html.mall-ui .mall-radio-card:has(input:checked) .mall-radio-dot {
  box-shadow: inset 0 0 0 calc(var(--u) * 6) var(--accent);
}

html.mall-ui .mall-radio-card:has(input:focus-visible) {
  outline: 2px solid rgba(122, 42, 51, .45);
  outline-offset: 2px;
}

html.mall-ui .mall-seg-radio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 4);
  border-radius: 999px;
  background: var(--sunk);
}

html.mall-ui .mall-seg-radio label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

html.mall-ui .mall-seg-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html.mall-ui .mall-seg-radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 34);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1;
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-seg-radio input:checked + span {
  background: var(--surface);
  box-shadow: var(--e2);
  color: var(--ink);
  font-weight: 600;
}

/* ============ 12. Overlays, sheets ============ */
html.mall-ui.mall-lock,
html.mall-ui.mall-lock body {
  overflow: hidden;
}

html.mall-ui .van-overlay.mall-overlay,
html.mall-ui .mall-lang-mask {
  position: fixed !important;
  inset: 0 auto 0 var(--col-left) !important;
  width: var(--mall-col) !important;
  height: auto !important;
  transform: none !important;
  background: rgba(22, 18, 14, .46) !important;
  animation: mall-fade-in var(--d-2) var(--ease) backwards;
}

html.mall-ui .van-overlay.mall-overlay {
  z-index: 90 !important;
}

html.mall-ui .mall-lang-mask {
  z-index: 100 !important;
  display: none;
}

html.mall-ui .van-overlay.mall-overlay.is-closing,
html.mall-ui .mall-lang-mask.is-closing {
  animation: mall-fade-out var(--d-2) var(--ease-in) forwards;
}

html.mall-ui .van-popup.mall-buy-sheet,
html.mall-ui .mall-lang-sheet {
  box-sizing: border-box;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  background: var(--paper) !important;
  box-shadow: 0 -24px 60px -24px rgba(22, 18, 14, .45);
  overscroll-behavior: contain;
  animation: mall-sheet-up var(--d-3) var(--ease) backwards;
}

html.mall-ui .van-popup.mall-buy-sheet {
  position: fixed !important;
  z-index: 91 !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--col-left) !important;
  width: var(--mall-col) !important;
  max-width: none !important;
  max-height: 88dvh;
  overflow-y: auto;
  padding-bottom: var(--safe-b);
  transform: none;
}

html.mall-ui .van-popup.mall-buy-sheet.is-closing,
html.mall-ui .mall-lang-mask.is-closing .mall-lang-sheet {
  animation: mall-sheet-down var(--d-2) var(--ease-in) forwards;
}

html.mall-ui .mall-sheet-grip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: calc(var(--u) * 10) 0 calc(var(--u) * 8);
  cursor: grab;
  touch-action: none;
}

html.mall-ui .mall-sheet-grip::before {
  content: "";
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 5);
  border-radius: 3px;
  background: rgba(28, 26, 23, .16);
}

html.mall-ui .mall-sheet-x {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 14);
  right: calc(var(--u) * 14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: calc(var(--u) * 17);
  transition: transform var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-sheet-x:active {
  transform: scale(.9);
}

/* Language sheet */
html.mall-ui .mall-lang-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: 84dvh;
}

html.mall-ui .mall-lang-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 var(--gx) var(--s-3);
}

html.mall-ui .mall-lang-head .mall-sheet-x {
  position: static;
}

html.mall-ui .mall-lang-head strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
}

html.mall-ui .mall-lang-head small {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  margin-top: calc(var(--u) * 4);
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.2;
}

html.mall-ui .mall-lang-head small .mi {
  color: var(--accent);
}

html.mall-ui .mall-lang-body {
  overflow-y: auto;
  padding: 0 var(--gx) calc(var(--s-6) + var(--safe-b));
  overscroll-behavior: contain;
}

html.mall-ui .mall-lang-region {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-2);
  color: var(--muted);
  font-size: var(--t-2xs);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html.mall-ui .mall-lang-region::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

html.mall-ui .mall-lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

html.mall-ui .mall-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: calc(var(--u) * 50);
  min-width: 0;
  padding: 0 calc(var(--u) * 14);
  box-sizing: border-box;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: 1.25;
  text-align: left;
  transition: transform var(--d-1) var(--ease), box-shadow var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}

html.mall-ui .mall-lang-item span {
  min-width: 0;
  padding: calc(var(--u) * 6) 0;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-lang-item .mi {
  color: var(--accent);
  font-size: calc(var(--u) * 18);
  opacity: 0;
  transform: scale(.5);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-spring);
}

@media (hover: hover) {
  html.mall-ui .mall-lang-item:hover { box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; }
}

html.mall-ui .mall-lang-item:active {
  transform: scale(.98);
}

html.mall-ui .mall-lang-item.on {
  background: #fffaf6;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  font-weight: 650;
}

html.mall-ui .mall-lang-item.on .mi {
  opacity: 1;
  transform: none;
}

/* ============ 13. Toasts & dialogs (jquery-weui, layer_mobile) ============ */
html.mall-ui .weui-mask_transparent {
  position: fixed;
  inset: 0;
  z-index: 4999;
}

html.mall-ui .weui-toast {
  position: fixed;
  z-index: 5000;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-width: calc(var(--u) * 120);
  max-width: calc(var(--mall-col) * .78);
  padding: calc(var(--u) * 16) calc(var(--u) * 20);
  box-sizing: border-box;
  border-radius: calc(var(--u) * 16);
  background: rgba(28, 26, 23, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .5);
  color: #f7f2ea;
  font-size: var(--t-base);
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

html.mall-ui .weui-toast.weui-toast--visible {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: mall-toast-in var(--d-2) var(--ease) backwards;
}

html.mall-ui .weui-toast--text {
  min-width: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius: 999px;
}

html.mall-ui .weui-toast--text .weui-icon_toast {
  display: none;
}

html.mall-ui .weui-toast_content {
  margin: 0;
  overflow-wrap: anywhere;
}

html.mall-ui .weui-icon_toast {
  display: block;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6 9.6 17 19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

html.mall-ui .weui-icon-cancel.weui-icon_toast {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

html.mall-ui .weui-icon-warn.weui-icon_toast {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.4h.01'/%3E%3C/svg%3E");
}

html.mall-ui .weui_loading_toast {
  min-width: 0;
  padding: calc(var(--u) * 18);
}

html.mall-ui .weui_loading_toast .weui-toast_content {
  display: none;
}

html.mall-ui .weui-loading.weui-icon_toast {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  background: none;
  -webkit-mask: none;
  mask: none;
  animation: mall-spin .7s linear infinite;
}

html.mall-ui.mall-busy .weui_loading_toast,
html.mall-ui.mall-busy .weui-mask_transparent {
  display: none !important;
}

html.mall-ui .weui-mask {
  position: fixed;
  z-index: 1000;
  inset: 0 auto 0 var(--col-left);
  width: var(--mall-col);
  background: rgba(22, 18, 14, .46);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-2) var(--ease), visibility var(--d-2) var(--ease);
}

html.mall-ui .weui-mask.weui-mask--visible {
  opacity: 1;
  visibility: visible;
}

html.mall-ui .weui-dialog {
  position: fixed;
  z-index: 5000;
  top: 50%;
  left: 50%;
  width: min(80vw, calc(var(--mall-col) * .82));
  max-width: calc(var(--u) * 340);
  overflow: hidden;
  border-radius: calc(var(--u) * 20);
  background: var(--surface);
  box-shadow: var(--e3);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility var(--d-2) var(--ease);
}

html.mall-ui .weui-dialog.weui-dialog--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

html.mall-ui .weui-dialog__hd { padding: calc(var(--u) * 24) calc(var(--u) * 20) calc(var(--u) * 6); }
html.mall-ui .weui-dialog__title { color: var(--ink); font-size: var(--t-lg); font-weight: 600; }
html.mall-ui .weui-dialog__bd { padding: 0 calc(var(--u) * 22) calc(var(--u) * 20); color: var(--ink-3); font-size: var(--t-base); line-height: 1.6; }
html.mall-ui .weui-dialog__ft { display: flex; border-top: 1px solid var(--line); }
html.mall-ui .weui-dialog__btn { flex: 1; display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 52); color: var(--accent); font-weight: 600; text-decoration: none; }
html.mall-ui .weui-dialog__btn + .weui-dialog__btn { border-left: 1px solid var(--line); }
html.mall-ui .weui-dialog__btn.default { color: var(--ink-3); font-weight: 500; }

html.mall-ui .layui-m-layershade {
  left: var(--col-left) !important;
  width: var(--mall-col) !important;
  background: rgba(22, 18, 14, .46) !important;
}

html.mall-ui .layui-m-layerchild {
  overflow: hidden;
  border-radius: calc(var(--u) * 20) !important;
  background: var(--surface) !important;
  box-shadow: var(--e3) !important;
  font-family: var(--font) !important;
}

html.mall-ui .layui-m-layercont {
  padding: calc(var(--u) * 28) calc(var(--u) * 24) calc(var(--u) * 22) !important;
  color: var(--ink-2) !important;
  font-size: var(--t-base) !important;
  line-height: 1.6 !important;
}

html.mall-ui .layui-m-layerbtn {
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

html.mall-ui .layui-m-layerbtn span[yes] { color: var(--accent) !important; font-weight: 600; }
html.mall-ui .layui-m-layerbtn span[no] { color: var(--ink-3) !important; }

/* ============ 14. Legacy markup fallbacks (boot.php inline pages) ============ */
:where(html.mall-ui) .block { display: block; }
:where(html.mall-ui) .inline-block { display: inline-block; }
:where(html.mall-ui) .inline { display: inline; }
:where(html.mall-ui) .flex-1 { flex: 1 1 0%; min-width: 0; }
:where(html.mall-ui) .gap-3 { gap: .75rem; }
:where(html.mall-ui) .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
:where(html.mall-ui) .break-all { word-break: break-all; }
:where(html.mall-ui) .m-4 { margin: 1rem; }
:where(html.mall-ui) .ml-4 { margin-left: 1rem; }
:where(html.mall-ui) .my-3 { margin-top: .75rem; margin-bottom: .75rem; }
:where(html.mall-ui) .px-2 { padding-left: .5rem; padding-right: .5rem; }
:where(html.mall-ui) .px-3 { padding-left: .75rem; padding-right: .75rem; }
:where(html.mall-ui) .px-4 { padding-left: 1rem; padding-right: 1rem; }
:where(html.mall-ui) .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
:where(html.mall-ui) .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
:where(html.mall-ui) .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
:where(html.mall-ui) .mt-3 { margin-top: .75rem; }

html.mall-ui .mall-nowrap {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .bg-white { background-color: var(--surface) !important; }
html.mall-ui .rounded-xl { border-radius: var(--r-lg) !important; }
html.mall-ui .rounded-lg { border-radius: var(--r-sm); }
html.mall-ui .bg-white.rounded-xl { box-shadow: inset 0 0 0 1px var(--line), var(--e1) !important; }
html.mall-ui .text-\[\#333\] { color: var(--ink) !important; }
html.mall-ui .text-\[\#444\] { color: var(--ink-2) !important; }
html.mall-ui .text-\[\#666\] { color: var(--ink-3) !important; }
html.mall-ui .text-\[\#999\] { color: var(--muted) !important; }
html.mall-ui .text-\[\#F56C6C\],
html.mall-ui .text-\[var\(--main-color\)\] { color: var(--accent) !important; }

html.mall-ui button[style*="background:var(--main-color)"],
html.mall-ui a[style*="background:var(--main-color)"],
html.mall-ui div.rounded-full[style*="background:var(--main-color)"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -14px rgba(122, 42, 51, .85);
  color: var(--on-accent) !important;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .03em;
  transition: transform var(--d-1) var(--ease);
}

html.mall-ui button[style*="background:var(--main-color)"]:active,
html.mall-ui div.rounded-full[style*="background:var(--main-color)"]:active {
  transform: scale(.97);
}

html.mall-ui .mall-invite-code {
  font-family: var(--font-num);
  letter-spacing: .14em;
}

/* ============ 15. Reveal, skeleton, fly-to-cart ============ */
html.mall-js .mall-reveal {
  opacity: 0;
  transform: translateY(calc(var(--u) * 12));
  transition: opacity var(--d-3) var(--ease) var(--rd, 0ms), transform var(--d-3) var(--ease) var(--rd, 0ms);
}

html.mall-js .mall-reveal.is-in {
  opacity: 1;
  transform: none;
}

html.mall-ui .mall-skel {
  position: relative;
  overflow: hidden;
  background: var(--sunk);
}

html.mall-ui .mall-skel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: mall-shimmer 1.3s var(--ease) infinite;
}

html.mall-ui .mall-skel:has(.mall-img.is-loaded)::before {
  display: none;
}

html.mall-js .mall-img {
  opacity: 0;
  transition: opacity var(--d-3) var(--ease), transform 480ms var(--ease);
}

html.mall-js .mall-img.is-loaded {
  opacity: 1;
}

html.mall-ui .mall-img.is-broken {
  opacity: 0 !important;
}

html.mall-ui .mall-skel:has(.is-broken) {
  background: var(--sunk) url("/public/image/brand/mark.svg") center / 22% no-repeat;
}

html.mall-ui .mall-fly {
  position: fixed;
  z-index: 9999;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent) center / cover;
  box-shadow: 0 0 0 2px #fff, 0 8px 18px -6px rgba(0, 0, 0, .4);
  pointer-events: none;
}

/* ============ 16. Product cards ============ */
html.mall-ui .mall-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 24) calc(var(--u) * 12);
}

html.mall-ui .mall-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

html.mall-ui .mall-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  isolation: isolate;
  transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .05);
  pointer-events: none;
}

html.mall-ui .mall-card-media .mall-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) {
  html.mall-ui .mall-card:hover .mall-card-media { box-shadow: var(--e2); transform: translateY(-2px); }
  html.mall-ui .mall-card:hover .mall-img { transform: scale(1.04); }
}

html.mall-ui .mall-card:active .mall-card-media {
  transform: scale(.98);
}

html.mall-ui .mall-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 11) calc(var(--u) * 2) 0;
}

html.mall-ui .mall-card-title {
  display: -webkit-box;
  min-height: 2.9em;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
}

html.mall-ui .mall-card-sold {
  overflow: hidden;
  color: var(--faint);
  font-size: var(--t-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-card-flag,
html.mall-ui .mall-card-rank {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 8);
  left: calc(var(--u) * 8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 9);
  border-radius: 999px;
  line-height: 1;
}

html.mall-ui .mall-card-flag {
  background: rgba(28, 26, 23, .72);
  color: #fff;
  font-size: var(--t-2xs);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.mall-ui .mall-card-rank {
  min-width: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 7);
  box-sizing: border-box;
  background: rgba(255, 253, 249, .9);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .18);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(var(--u) * 15);
  font-weight: 600;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html.mall-ui .mall-card.is-rail:nth-child(-n+3) .mall-card-rank {
  background: var(--accent);
  color: var(--on-accent);
}

/* ============ 17. Home ============ */
html.mall-ui .mall-hero {
  position: relative;
  margin-top: calc(var(--u) * 4);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sunk);
  box-shadow: var(--e2);
  isolation: isolate;
}

html.mall-ui .mall-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

html.mall-ui .mall-hero-track::-webkit-scrollbar,
html.mall-ui .mall-rail::-webkit-scrollbar,
html.mall-ui .mall-seg-track::-webkit-scrollbar {
  display: none;
}

html.mall-ui .is-dragging {
  scroll-snap-type: none !important;
  cursor: grabbing;
  user-select: none;
}

html.mall-ui .mall-hero-slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 10 / 11;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

html.mall-ui .mall-hero-slide::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: var(--lqip) center / cover;
  filter: blur(14px);
}

html.mall-ui .mall-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  user-select: none;
}

html.mall-ui .mall-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 241, 233, .78) 0%, rgba(246, 241, 233, .35) 30%, rgba(246, 241, 233, 0) 52%);
}

html.mall-ui .mall-hero-slide.is-dark {
  color: #f6efe4;
}

html.mall-ui .mall-hero-slide.is-dark::after {
  background: linear-gradient(180deg, rgba(18, 12, 9, .62) 0%, rgba(18, 12, 9, .2) 38%, rgba(18, 12, 9, 0) 58%);
}

html.mall-ui .mall-hero-copy {
  position: absolute;
  z-index: 2;
  top: calc(var(--u) * 28);
  right: calc(var(--u) * 24);
  left: calc(var(--u) * 24);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 10);
}

html.mall-ui .mall-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  font-size: var(--t-2xs);
  font-weight: 650;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .82;
}

html.mall-ui .mall-hero-kicker::before {
  content: "";
  width: calc(var(--u) * 18);
  height: 1px;
  background: currentColor;
}

html.mall-ui :is(.mall-hero-title, .mall-sec-title, .mall-auth-title, .mall-od-status, .mall-empty-title, .mall-pd-title) {
  word-break: auto-phrase;
}

html.mall-ui .mall-hero-title {
  max-width: 12em;
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}

html.mall-ui .mall-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  height: calc(var(--u) * 38);
  margin-top: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 18);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5);
  transition: transform var(--d-2) var(--ease);
}

html.mall-ui .mall-hero-cta .mi {
  font-size: calc(var(--u) * 15);
  transition: transform var(--d-2) var(--ease);
}

html.mall-ui .mall-hero-slide.is-dark .mall-hero-cta {
  background: #f6efe4;
  color: var(--ink);
}

@media (hover: hover) {
  html.mall-ui .mall-hero-slide:hover .mall-hero-cta .mi { transform: translateX(3px); }
}

html.mall-ui .mall-hero-foot {
  position: absolute;
  z-index: 3;
  right: calc(var(--u) * 16);
  bottom: calc(var(--u) * 16);
  left: calc(var(--u) * 16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

html.mall-ui .mall-hero-count,
html.mall-ui .mall-hero-dots {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  border-radius: 999px;
  background: rgba(28, 26, 23, .32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  pointer-events: auto;
}

html.mall-ui .mall-hero-count {
  gap: calc(var(--u) * 6);
  font-family: var(--font-num);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-hero-count i {
  width: calc(var(--u) * 14);
  height: 1px;
  background: rgba(255, 255, 255, .6);
}

html.mall-ui .mall-hero-dots {
  gap: calc(var(--u) * 6);
}

html.mall-ui .mall-hero-dot {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  transition: width var(--d-3) var(--ease), background-color var(--d-3) var(--ease);
}

html.mall-ui .mall-hero-dot.is-on {
  width: calc(var(--u) * 20);
  background: #fff;
}

html.mall-ui .mall-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 22);
}

html.mall-ui .mall-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-width: 0;
  color: var(--ink-2);
  text-decoration: none;
}

html.mall-ui .mall-quick-ico {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgba(40, 28, 16, .3);
  color: var(--ink);
  font-size: calc(var(--u) * 22);
  transition: transform var(--d-2) var(--ease-spring), box-shadow var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-quick-item:hover .mall-quick-ico { color: var(--accent); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 20px -12px rgba(40, 28, 16, .4); }
}

html.mall-ui .mall-quick-item:active .mall-quick-ico {
  transform: scale(.9);
}

html.mall-ui .mall-quick-label {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: var(--t-xs);
  line-height: 1.3;
  text-align: center;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-rail {
  display: grid;
  grid-auto-columns: 40%;
  grid-auto-flow: column;
  gap: var(--s-3);
  margin: 0 calc(var(--gx) * -1);
  padding: 0 var(--gx) var(--s-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gx);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

html.mall-ui .mall-rail > .mall-card {
  scroll-snap-align: start;
}

html.mall-ui .mall-promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: calc(var(--u) * 34) 0 0;
  padding: var(--s-4) 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

html.mall-ui .mall-promise li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 7);
  min-width: 0;
  padding: 0 calc(var(--u) * 6);
  color: var(--ink-3);
  font-size: var(--t-2xs);
  line-height: 1.3;
  letter-spacing: .04em;
  text-align: center;
}

html.mall-ui .mall-promise li + li {
  border-left: 1px solid var(--line);
}

html.mall-ui .mall-promise .mi {
  color: var(--accent);
  font-size: calc(var(--u) * 20);
}

html.mall-ui .mall-more-all {
  margin-top: calc(var(--u) * 24);
}

html.mall-ui .mall-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 48);
  padding: calc(var(--u) * 30) 0 calc(var(--u) * 4);
  border-top: 1px solid var(--line);
  text-align: center;
}

html.mall-ui .mall-foot .mall-mark {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 34);
}

html.mall-ui .mall-foot .mall-wordmark {
  align-items: center;
}

html.mall-ui .mall-foot-tag,
html.mall-ui .mall-foot-copy {
  margin: 0;
  color: var(--muted);
  font-size: var(--t-xs);
  letter-spacing: .08em;
}

html.mall-ui .mall-foot-copy {
  color: var(--faint);
  font-size: var(--t-2xs);
}

/* ============ 18. List, toolbar, pager ============ */
html.mall-ui .mall-toolbar {
  position: sticky;
  z-index: 30;
  top: calc(var(--top-h) + var(--safe-t));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: calc(var(--u) * -6) calc(var(--gx) * -1) var(--s-4);
  padding: calc(var(--u) * 10) var(--gx);
  background: rgba(246, 243, 238, .9);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
}

html.mall-ui .mall-sort {
  display: inline-flex;
  gap: calc(var(--u) * 2);
  min-width: 0;
  padding: calc(var(--u) * 3);
  border-radius: 999px;
  background: var(--sunk);
}

html.mall-ui .mall-sort-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  height: calc(var(--u) * 30);
  padding: 0 calc(var(--u) * 13);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-sort-item.is-on {
  background: var(--surface);
  box-shadow: var(--e2);
  color: var(--ink);
  font-weight: 650;
}

html.mall-ui .mall-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  margin-right: calc(var(--u) * -3);
  color: var(--faint);
  font-size: calc(var(--u) * 10);
  line-height: 0;
}

html.mall-ui .mall-sort-arrows .mi {
  stroke-width: 2.4;
}

html.mall-ui .mall-sort-arrows .mi + .mi {
  margin-top: calc(var(--u) * -3);
}

html.mall-ui .mall-sort-item.is-asc .mall-sort-arrows .mi:first-child,
html.mall-ui .mall-sort-item.is-desc .mall-sort-arrows .mi:last-child {
  color: var(--accent);
}

html.mall-ui .mall-toolbar-count {
  flex: none;
  color: var(--muted);
  font-size: var(--t-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  margin: calc(var(--u) * 28) 0 var(--s-2);
}

html.mall-ui .mall-pager-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  height: calc(var(--u) * 42);
  padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 12);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-pager-btn .mi {
  font-size: calc(var(--u) * 16);
}

html.mall-ui .mall-pager-btn.is-next {
  justify-self: end;
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 16);
}

html.mall-ui .mall-pager-btn:active {
  transform: scale(.96);
}

html.mall-ui .mall-pager-btn.is-off {
  opacity: .38;
  pointer-events: none;
}

html.mall-ui .mall-pager-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 7);
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-pager-info i {
  margin: 0 calc(var(--u) * 5);
  color: var(--faint);
  font-style: normal;
}

html.mall-ui .mall-pager-bar {
  width: calc(var(--u) * 64);
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-2);
}

html.mall-ui .mall-pager-bar i {
  display: block;
  height: 100%;
  margin: 0;
  background: var(--ink);
}

/* ============ 19. Search ============ */
html.mall-ui .mall-search-form {
  padding-top: calc(var(--u) * 6);
}

html.mall-ui .mall-search-field {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--u) * 54);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e2);
  transition: box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-search-field:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(122, 42, 51, .42), var(--ring), var(--e2);
}

html.mall-ui .mall-search-field > .mi {
  position: absolute;
  left: calc(var(--u) * 19);
  color: var(--muted);
  font-size: calc(var(--u) * 20);
  pointer-events: none;
}

html.mall-ui .mall-search-field input.mall-search-input {
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 0 calc(var(--u) * 52);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

html.mall-ui .mall-search-input::-webkit-search-cancel-button {
  display: none;
}

html.mall-ui .mall-search-clear {
  position: absolute;
  right: calc(var(--u) * 9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: calc(var(--u) * 16);
  opacity: 0;
  pointer-events: none;
  transform: scale(.7);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease-spring);
}

html.mall-ui .mall-search-field.has-value .mall-search-clear {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

html.mall-ui .mall-search-hint {
  margin: calc(var(--u) * 10) calc(var(--u) * 6) 0;
  color: var(--muted);
  font-size: var(--t-xs);
}

html.mall-ui .mall-search-block {
  margin-top: calc(var(--u) * 28);
}

html.mall-ui .mall-search-block.is-center .mall-block-head,
html.mall-ui .mall-search-block.is-center .mall-chip-row {
  justify-content: center;
}

html.mall-ui .mall-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

html.mall-ui .mall-block-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: .08em;
}

html.mall-ui .mall-block-head button {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 6) 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1;
}

html.mall-ui .mall-block-head button .mi {
  font-size: calc(var(--u) * 14);
}

/* ============ 20. Product detail ============ */
html.mall-ui .mall-page.mall-pd {
  padding: 0;
}

html.mall-ui .mall-pd-top {
  position: sticky;
  z-index: 45;
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  height: calc(var(--top-h) + var(--safe-t));
  margin-bottom: calc((var(--top-h) + var(--safe-t)) * -1);
  padding: var(--safe-t) calc(var(--u) * 12) 0;
  box-sizing: border-box;
  transition: background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-pd-top.is-solid {
  background: rgba(246, 243, 238, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

html.mall-ui .mall-pd-top-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

html.mall-ui .mall-pd-top.is-solid .mall-pd-top-title {
  opacity: 1;
  transform: none;
}

html.mall-ui .mall-pd-top-tools {
  display: flex;
  gap: calc(var(--u) * 8);
}

html.mall-ui .mall-fab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 249, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .06), 0 8px 18px -10px rgba(0, 0, 0, .35);
  color: var(--ink);
  font-size: calc(var(--u) * 20);
  text-decoration: none;
  transition: transform var(--d-1) var(--ease), background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-fab:active {
  transform: scale(.9);
}

html.mall-ui .mall-pd-top.is-solid .mall-fab {
  background: transparent;
  box-shadow: none;
}

html.mall-ui .mall-fab .mall-badge {
  top: calc(var(--u) * -2);
  right: calc(var(--u) * -3);
}

html.mall-ui .mall-fab-like .is-f,
html.mall-ui .app-product-like .is-f {
  display: none;
}

html.mall-ui .mall-fab-like.liked,
html.mall-ui .app-product-like.liked {
  color: var(--accent);
}

html.mall-ui .mall-fab-like.liked .is-f,
html.mall-ui .app-product-like.liked .is-f {
  display: inline-block;
}

html.mall-ui .mall-fab-like.liked .is-o,
html.mall-ui .app-product-like.liked .is-o {
  display: none;
}

html.mall-ui .is-burst .mi {
  animation: mall-heart 420ms var(--ease-spring);
}

html.mall-ui .mall-fab-like::after,
html.mall-ui .app-product-like .app-product-like-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 0;
  pointer-events: none;
}

html.mall-ui .mall-fab-like.is-burst::after,
html.mall-ui .app-product-like.is-burst .app-product-like-icon::after {
  animation: mall-ring 480ms var(--ease) forwards;
}

html.mall-ui .mall-pd-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f1ece5;
}

html.mall-ui .app-product-gallery .swiper-container,
html.mall-ui .app-product-gallery .swiper-wrapper,
html.mall-ui .app-product-gallery .swiper-slide {
  width: 100%;
  height: 100%;
}

html.mall-ui .app-product-gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.mall-ui .app-product-gallery .swiper-pagination {
  bottom: calc(var(--r-xl) + var(--u) * 12) !important;
  left: 50% !important;
  width: auto !important;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 20);
  padding: 0 calc(var(--u) * 8);
  border-radius: 999px;
  background: rgba(28, 26, 23, .26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html.mall-ui .app-product-gallery .swiper-pagination:empty {
  display: none;
}

html.mall-ui .app-product-gallery .swiper-pagination-bullet {
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  margin: 0 !important;
  border-radius: 3px;
  background: #fff;
  opacity: .55;
  transition: width var(--d-3) var(--ease), opacity var(--d-3) var(--ease);
}

html.mall-ui .app-product-gallery .swiper-pagination-bullet-active {
  width: calc(var(--u) * 16);
  background: #fff;
  opacity: 1;
}

html.mall-ui .mall-pd-count {
  position: absolute;
  z-index: 5;
  right: calc(var(--u) * 16);
  bottom: calc(var(--r-xl) + var(--u) * 12);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 10);
  border-radius: 999px;
  background: rgba(28, 26, 23, .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .8);
  font-family: var(--font-num);
  font-size: var(--t-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-pd-count b {
  color: #fff;
  font-weight: 650;
}

html.mall-ui .mall-pd-count i {
  font-style: normal;
  opacity: .6;
}

html.mall-ui .mall-pd-main {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--r-xl) * -1);
  padding: calc(var(--u) * 24) var(--gx) 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--paper);
}

html.mall-ui .mall-pd-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

html.mall-ui .mall-pd-price .mall-price-int {
  font-size: calc(var(--u) * 30);
  letter-spacing: -.02em;
}

html.mall-ui .mall-pd-price .mall-price-dec {
  font-size: calc(var(--u) * 18);
}

html.mall-ui .mall-pd-price .mall-price-cur {
  margin-left: calc(var(--u) * 5);
  font-size: calc(var(--u) * 14);
}

html.mall-ui .mall-pill .mi {
  font-size: calc(var(--u) * 13);
}

html.mall-ui .mall-pd-title {
  margin: calc(var(--u) * 12) 0 0;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-pd-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10);
  margin-top: var(--s-4);
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}

html.mall-ui .app-product-like {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 34);
  margin-left: auto;
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 12);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1;
  transition: transform var(--d-1) var(--ease), background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .app-product-like:active {
  transform: scale(.94);
}

html.mall-ui .app-product-like-icon {
  position: relative;
  display: inline-flex;
  font-size: calc(var(--u) * 17);
}

html.mall-ui .app-product-like strong {
  color: var(--ink-2);
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .app-product-like.liked {
  background: #fff5f3;
  box-shadow: inset 0 0 0 1px rgba(122, 42, 51, .28);
}

html.mall-ui .app-product-like.liked strong {
  color: var(--accent);
}

html.mall-ui .mall-promise.is-card {
  margin-top: calc(var(--u) * 20);
  padding: calc(var(--u) * 14) 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

html.mall-ui .mall-pd-block {
  margin-top: var(--s-3);
  padding: calc(var(--u) * 20) calc(var(--u) * 18);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
}

html.mall-ui .mall-clamp {
  position: relative;
  max-height: calc(var(--u) * 300);
  overflow: hidden;
}

html.mall-ui .mall-clamp.is-clamped {
  -webkit-mask: linear-gradient(#000 65%, transparent);
  mask: linear-gradient(#000 65%, transparent);
}

html.mall-ui .mall-clamp.is-open {
  max-height: none;
}

html.mall-ui .mall-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
  margin: var(--s-3) auto 0;
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  border: 0;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
}

html.mall-ui .mall-more[hidden] {
  display: none;
}

html.mall-ui .mall-more .mi {
  transition: transform var(--d-2) var(--ease);
}

html.mall-ui .mall-more.is-open .mi {
  transform: rotate(180deg);
}

html.mall-ui .mall-pd-text {
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html.mall-ui .mall-pd-text p { margin: 0 0 .8em; }
html.mall-ui .mall-pd-text p:last-child { margin-bottom: 0; }

html.mall-ui .mall-pd-text img,
html.mall-ui .mall-pd-text video,
html.mall-ui .mall-pd-text iframe {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: var(--s-3) 0;
  border-radius: var(--r-sm);
}

html.mall-ui .mall-pd-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

html.mall-ui .mall-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

html.mall-ui .mall-chips .shop-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  height: var(--chip-h);
  padding: 0 calc(var(--u) * 14);
  border: 0;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}

html.mall-ui .mall-chips .shop-star em {
  color: var(--muted);
  font-family: var(--font-num);
  font-size: var(--t-2xs);
  font-style: normal;
}

html.mall-ui .mall-chips .shop-star:active {
  transform: scale(.95);
}

html.mall-ui .mall-chips .shop-star.on {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

html.mall-ui .mall-chips .shop-star.on em {
  color: rgba(246, 243, 238, .6);
}

html.mall-ui .mall-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 26) 0 calc(var(--u) * 8);
  color: var(--faint);
  font-size: var(--t-sm);
  text-align: center;
}

html.mall-ui .mall-empty[hidden] {
  display: none !important;
}

html.mall-ui .mall-empty .mi {
  font-size: calc(var(--u) * 28);
  color: var(--faint);
}

html.mall-ui .mall-comment {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}

html.mall-ui .mall-chips + .mall-comment,
html.mall-ui .mall-chips + .mall-empty + .mall-comment {
  margin-top: var(--s-3);
}

html.mall-ui .mall-comment-in {
  display: flex;
  gap: var(--s-3);
}

html.mall-ui .mall-comment-av {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: linear-gradient(145deg, #efe4d2, #d8c3a0);
  color: #5a4326;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
}

html.mall-ui .mall-comment-body {
  flex: 1;
  min-width: 0;
}

html.mall-ui .mall-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  color: var(--muted);
  font-size: var(--t-xs);
}

html.mall-ui .mall-comment-meta b {
  color: var(--ink-2);
  font-weight: 600;
}

html.mall-ui .mall-comment-meta .mall-status {
  height: calc(var(--u) * 20);
  font-size: var(--t-2xs);
}

html.mall-ui .mall-comment-meta time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-comment-text {
  margin-top: calc(var(--u) * 6);
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-comment-reply {
  margin-top: var(--s-2);
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
}

html.mall-ui .mall-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* Action bar */
html.mall-ui .mall-ab-space {
  height: calc(var(--bar-h) + var(--safe-b) + var(--s-6));
}

html.mall-ui .mall-actionbar {
  position: fixed;
  z-index: 58;
  bottom: 0;
  left: var(--col-left);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  width: var(--mall-col);
  height: calc(var(--bar-h) + var(--safe-b));
  padding: 0 calc(var(--u) * 14) var(--safe-b) calc(var(--u) * 8);
  box-sizing: border-box;
  background: rgba(255, 253, 249, .9);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: 0 -1px 0 var(--line), 0 -14px 34px -26px rgba(40, 28, 16, .45);
}

html.mall-ui .mall-ab-icon {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  color: var(--ink-2);
  font-size: var(--t-2xs);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--d-1) var(--ease), color var(--d-2) var(--ease);
}

html.mall-ui .mall-ab-icon span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.mall-ui .mall-ab-icon .mi {
  font-size: calc(var(--u) * 22);
}

html.mall-ui .mall-ab-icon:active {
  transform: scale(.9);
}

html.mall-ui .mall-ab-icon.is-on {
  color: var(--accent);
}

html.mall-ui .mall-ab-btns {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 8);
  min-width: 0;
  margin-left: calc(var(--u) * 4);
}

html.mall-ui .mall-ab-btns.is-single {
  grid-template-columns: 1fr;
}

html.mall-ui .mall-ab-btns .mall-btn,
html.mall-ui .mall-sheet-actions .mall-btn {
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 10);
  font-size: var(--t-base);
  white-space: normal;
}

/* Purchase sheet */
html.mall-ui .mall-sheet {
  padding: 0 calc(var(--u) * 20) calc(var(--u) * 22);
}

html.mall-ui .mall-sheet-head {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 16);
  padding-right: calc(var(--u) * 40);
}

html.mall-ui .mall-sheet-thumb {
  flex: none;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 100);
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--sunk);
  box-shadow: 0 0 0 1px var(--line), 0 14px 28px -16px rgba(40, 28, 16, .5);
}

html.mall-ui .mall-sheet-meta {
  flex: 1;
  min-width: 0;
  padding-bottom: calc(var(--u) * 2);
}

html.mall-ui .mall-sheet-unit,
html.mall-ui .mall-sheet-stock {
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-sheet-price {
  margin: calc(var(--u) * 4) 0;
  color: var(--accent);
  font-family: var(--font-num);
  font-size: calc(var(--u) * 26);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
}

html.mall-ui .mall-sheet-price.is-bump {
  animation: mall-bump var(--d-3) var(--ease);
}

html.mall-ui .mall-sheet-title {
  display: -webkit-box;
  margin-top: var(--s-4);
  overflow: hidden;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html.mall-ui .mall-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: calc(var(--u) * 18) 0 calc(var(--u) * 22);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

html.mall-ui .mall-sheet-label {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 600;
}

html.mall-ui .van-stepper.mall-stepper {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

html.mall-ui .mall-stepper .van-stepper__minus,
html.mall-ui .mall-stepper .van-stepper__plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: var(--sunk);
  color: var(--ink);
  font-size: calc(var(--u) * 17);
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  transition: transform var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-stepper .van-stepper__minus::before,
html.mall-ui .mall-stepper .van-stepper__minus::after,
html.mall-ui .mall-stepper .van-stepper__plus::before,
html.mall-ui .mall-stepper .van-stepper__plus::after {
  display: none;
}

html.mall-ui .mall-stepper .van-stepper__minus:active,
html.mall-ui .mall-stepper .van-stepper__plus:active {
  transform: scale(.9);
  background: #e4ddd2;
}

html.mall-ui .mall-stepper .van-stepper__input {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 38);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-md);
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-stepper .van-stepper__input:focus {
  outline: none;
}

html.mall-ui .mall-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 10);
}

/* ============ 21. Login / register ============ */
html.mall-ui body.mall-auth #app {
  background: var(--paper);
}

html.mall-ui .mall-auth-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--gx) calc(var(--u) * 32 + var(--safe-b));
  box-sizing: border-box;
  animation: mall-page-in var(--d-3) var(--ease) backwards;
}

html.mall-ui .mall-auth-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 calc(var(--gx) * -1);
  padding: calc(var(--u) * 14 + var(--safe-t)) var(--gx) calc(var(--u) * 92);
  overflow: hidden;
  isolation: isolate;
}

html.mall-ui .mall-auth-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 90%);
  mask-image: linear-gradient(#000 55%, transparent 90%);
}

html.mall-ui .mall-auth-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 -2px;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(246, 243, 238, .72) 0%, rgba(246, 243, 238, .35) 40%, rgba(246, 243, 238, .7) 72%, var(--paper) 94%);
}

html.mall-ui .mall-auth-top {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--u) * 36);
}

html.mall-ui .mall-auth-lang {
  height: calc(var(--u) * 36);
  margin: 0;
  padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 12);
  background: rgba(255, 253, 249, .7);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  font-size: var(--t-sm);
}

html.mall-ui .mall-auth-lang .mi:last-child {
  font-size: calc(var(--u) * 13);
  color: var(--muted);
}

html.mall-ui .mall-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 14);
  margin-top: calc(var(--u) * 40);
  color: var(--ink);
  text-decoration: none;
}

html.mall-ui .mall-auth-brand .mall-mark {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 62);
  filter: drop-shadow(0 14px 22px rgba(122, 42, 51, .28));
}

html.mall-ui .mall-auth-brand .mall-wordmark {
  align-items: center;
}

html.mall-ui .mall-auth-brand .mall-wordmark-main {
  font-size: calc(var(--u) * 34);
}

html.mall-ui .mall-auth-brand .mall-wordmark-sub {
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--u) * 10);
  color: var(--ink-3);
}

html.mall-ui .mall-auth-tag {
  margin: calc(var(--u) * 14) 0 0;
  color: var(--ink-3);
  font-size: var(--t-xs);
  letter-spacing: .12em;
}

html.mall-ui .mall-auth-form {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--u) * -64);
}

html.mall-ui .mall-auth-card {
  padding: calc(var(--u) * 26) calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: var(--r-xl);
  background: rgba(255, 253, 249, .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(40, 28, 16, .05), 0 30px 60px -30px rgba(40, 28, 16, .45);
}

html.mall-ui .mall-auth-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.2;
}

html.mall-ui .mall-auth-sub {
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 22);
  color: var(--muted);
  font-size: var(--t-sm);
  line-height: 1.5;
}

html.mall-ui .mall-float {
  position: relative;
  display: block;
  margin-bottom: calc(var(--u) * 14);
}

html.mall-ui .mall-float input {
  height: calc(var(--u) * 58);
  padding: calc(var(--u) * 20) calc(var(--u) * 48) 0 calc(var(--u) * 48);
  border-radius: var(--r-md);
  background: #fbf9f5;
}

html.mall-ui .mall-float-ico {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--u) * 16);
  display: inline-flex;
  color: var(--muted);
  font-size: calc(var(--u) * 19);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--d-2) var(--ease);
}

html.mall-ui .mall-float-label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--u) * 48);
  max-width: calc(100% - var(--u) * 96);
  overflow: hidden;
  color: var(--muted);
  font-size: var(--t-md);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  transform-origin: left center;
  pointer-events: none;
  transition: transform var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

html.mall-ui .mall-float input:focus ~ .mall-float-label,
html.mall-ui .mall-float input:not(:placeholder-shown) ~ .mall-float-label {
  color: var(--ink-3);
  transform: translateY(-122%) scale(.76);
}

html.mall-ui .mall-float:focus-within .mall-float-ico {
  color: var(--accent);
}

html.mall-ui .mall-float .mall-pw-toggle {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--u) * 8);
  transform: translateY(-50%);
}

html.mall-ui .mall-auth-forgot {
  display: flex;
  justify-content: flex-end;
  margin: calc(var(--u) * -4) 0 0;
}

html.mall-ui .mall-auth-forgot a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 4);
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  transition: color var(--d-1) var(--ease);
}

html.mall-ui .mall-auth-forgot a:active,
html.mall-ui .mall-auth-forgot a:hover {
  color: var(--accent);
}

html.mall-ui .mall-auth-card .loginbtn {
  height: calc(var(--u) * 54);
  margin-top: calc(var(--u) * 22);
  font-size: var(--t-md);
  letter-spacing: .08em;
}

html.mall-ui .mall-auth-card .loginbtn .mi {
  transition: transform var(--d-2) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-auth-card .loginbtn:hover .mi { transform: translateX(3px); }
}

html.mall-ui .mall-auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 22);
  color: var(--muted);
  font-size: var(--t-sm);
}

html.mall-ui .mall-auth-switch button {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 34);
  padding: 0 calc(var(--u) * 14);
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  transition: transform var(--d-1) var(--ease);
}

html.mall-ui .mall-auth-switch button:active {
  transform: scale(.96);
}

html.mall-ui .mall-promise.is-auth {
  margin-top: calc(var(--u) * 36);
  border-color: var(--line);
}

/* ============ 22. Member center ============ */
html.mall-ui .mall-profile {
  position: relative;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 18);
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 168, 119, .3), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(122, 42, 51, .5), transparent 62%),
    linear-gradient(155deg, #2c2622, #161311);
  box-shadow: var(--e3);
  color: #f4ede2;
  isolation: isolate;
}

html.mall-ui .mall-profile::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--u) * -30);
  right: calc(var(--u) * -40);
  width: calc(var(--u) * 200);
  height: calc(var(--u) * 240);
  border: 1px solid rgba(244, 237, 226, .1);
  border-radius: calc(var(--u) * 100) calc(var(--u) * 100) 0 0;
  box-shadow: 0 0 0 calc(var(--u) * 14) rgba(244, 237, 226, .03), 0 0 0 calc(var(--u) * 15) rgba(244, 237, 226, .07);
}

html.mall-ui .mall-profile-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

html.mall-ui .mall-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 58);
  height: calc(var(--u) * 58);
  border-radius: 50%;
  background: linear-gradient(145deg, #f5e9d4, #c6a372);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 0 0 5px rgba(201, 168, 119, .22), 0 10px 22px -10px rgba(0, 0, 0, .6);
  color: #3a2a1b;
  font-family: var(--font-display);
  font-size: calc(var(--u) * 28);
  font-weight: 600;
  line-height: 1;
}

html.mall-ui .mall-profile-id {
  flex: 1;
  min-width: 0;
}

html.mall-ui .mall-profile-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  font-size: var(--t-xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
}

html.mall-ui .mall-profile-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-level {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 9);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-hi), #b8945e);
  color: #2a1f18;
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

html.mall-ui .mall-profile-code {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 7);
  color: rgba(244, 237, 226, .62);
  font-size: var(--t-xs);
  letter-spacing: .04em;
}

html.mall-ui .mall-profile-code b {
  color: #f4ede2;
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: .14em;
}

html.mall-ui .mall-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: inherit;
  font-size: calc(var(--u) * 13);
  transition: background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}

html.mall-ui .mall-copy:active {
  transform: scale(.88);
}

html.mall-ui .mall-copy.is-done {
  background: rgba(201, 168, 119, .45);
  color: #fff;
}

html.mall-ui .mall-profile-set {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(244, 237, 226, .85);
  font-size: calc(var(--u) * 19);
  transition: background-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}

html.mall-ui .mall-profile-set:active {
  transform: scale(.9);
}

html.mall-ui .mall-profile-credit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 18);
  color: rgba(244, 237, 226, .6);
  font-size: var(--t-2xs);
  letter-spacing: .06em;
}

html.mall-ui .mall-profile-credit b {
  color: var(--gold-hi);
  font-family: var(--font-num);
  font-weight: 600;
}

html.mall-ui .mall-meter {
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

html.mall-ui .mall-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b8945e, #f3e3c3);
}

html.mall-ui .mall-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(var(--u) * 16);
  padding-top: calc(var(--u) * 16);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

html.mall-ui .mall-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 5);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

html.mall-ui .mall-stat + .mall-stat {
  border-left: 1px solid rgba(255, 255, 255, .1);
}

html.mall-ui .mall-stat-v {
  max-width: 100%;
  overflow: hidden;
  color: #fbf6ee;
  font-family: var(--font-num);
  font-size: var(--t-xl);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-stat-l {
  max-width: 100%;
  overflow: hidden;
  color: rgba(244, 237, 226, .58);
  font-size: var(--t-2xs);
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-profile-wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 10);
  margin-top: calc(var(--u) * 18);
}

html.mall-ui .mall-profile-wallet .mall-btn {
  height: calc(var(--u) * 40);
}

html.mall-ui .mall-btn.is-light {
  background: #f4ede2;
  color: #2a1f18;
}

html.mall-ui .mall-btn.is-glass {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #f4ede2;
}

html.mall-ui .mall-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--u) * 18) calc(var(--u) * 4);
}

html.mall-ui .mall-icon-grid.is-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html.mall-ui .mall-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

html.mall-ui .mall-icon-cell > span:last-child {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-icon-cell-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 15);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: calc(var(--u) * 22);
  transition: transform var(--d-2) var(--ease-spring), color var(--d-2) var(--ease), background-color var(--d-2) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-icon-cell:hover .mall-icon-cell-ico { color: var(--accent); background: #fff; }
}

html.mall-ui .mall-icon-cell:active .mall-icon-cell-ico {
  transform: scale(.9);
}

html.mall-ui .mall-icon-cell .mall-badge {
  top: calc(var(--u) * -5);
  right: calc(var(--u) * -6);
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--surface);
}

html.mall-ui .mall-new-dot,
html.mall-ui .mall-done-dot {
  position: absolute;
  top: calc(var(--u) * -3);
  right: calc(var(--u) * -3);
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

html.mall-ui .mall-done-dot {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  background: var(--ok);
  color: #fff;
  font-size: calc(var(--u) * 11);
}

html.mall-ui .mall-done-dot .mi {
  stroke-width: 2.6;
}

html.mall-ui .mall-menu {
  margin-top: var(--s-3);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
}

html.mall-ui .mall-menu-title {
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 4);
  color: var(--muted);
  font-size: var(--t-2xs);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html.mall-ui .mall-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  width: 100%;
  min-height: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 16);
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--t-base);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-menu-row + .mall-menu-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--u) * 58);
  height: 1px;
  background: var(--line);
}

@media (hover: hover) {
  html.mall-ui .mall-menu-row:hover { background: rgba(28, 26, 23, .025); }
}

html.mall-ui .mall-menu-row:active {
  background: var(--sunk);
}

html.mall-ui .mall-menu-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: calc(var(--u) * 10);
  background: var(--paper);
  color: var(--ink-2);
  font-size: calc(var(--u) * 17);
}

html.mall-ui .mall-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-menu-val {
  max-width: 45%;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--t-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-menu-chev {
  color: var(--faint);
  font-size: calc(var(--u) * 16);
}

html.mall-ui .mall-logout {
  margin-top: calc(var(--u) * 22);
  color: var(--ink-3);
}

/* ============ 23. Orders ============ */
html.mall-ui .mall-seg {
  position: sticky;
  z-index: 35;
  top: calc(var(--top-h) + var(--safe-t));
  background: rgba(246, 243, 238, .92);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}

html.mall-ui .mall-seg-track {
  position: relative;
  display: flex;
  gap: calc(var(--u) * 2);
  padding: 0 calc(var(--gx) - var(--u) * 8);
  overflow-x: auto;
  scrollbar-width: none;
}

html.mall-ui .mall-seg-item {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 46);
  padding: 0 calc(var(--u) * 9);
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--d-2) var(--ease);
}

html.mall-ui .mall-seg-item.is-on {
  color: var(--ink);
  font-weight: 650;
}

html.mall-ui .mall-seg-ink {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform var(--d-3) var(--ease), width var(--d-3) var(--ease);
}

html.mall-ui .mall-orders {
  padding-top: calc(var(--u) * 14);
}

html.mall-ui .mall-order {
  margin-bottom: var(--s-3);
  padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
  cursor: pointer;
  transition: box-shadow var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}

@media (hover: hover) {
  html.mall-ui .mall-order:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--e2); }
}

html.mall-ui .mall-order:active {
  transform: scale(.995);
}

html.mall-ui .mall-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: calc(var(--u) * 12);
  border-bottom: 1px dashed var(--line-2);
}

html.mall-ui .mall-order-no {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-order-no .mi {
  font-size: calc(var(--u) * 14);
}

html.mall-ui .mall-order-item {
  display: grid;
  grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  padding-top: var(--s-3);
  color: inherit;
  text-decoration: none;
}

html.mall-ui .mall-order-thumb {
  display: block;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: var(--r-sm);
}

html.mall-ui .mall-order-thumb .mall-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.mall-ui .mall-order-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-order-qty {
  margin-top: calc(var(--u) * 4);
  color: var(--muted);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-order-price .mall-price-int {
  font-size: calc(var(--u) * 14);
}

html.mall-ui .mall-order-sum {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 14);
  color: var(--muted);
  font-size: var(--t-xs);
}

html.mall-ui .mall-price.is-total .mall-price-int {
  font-size: calc(var(--u) * 18);
}

html.mall-ui .mall-order-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 14);
  padding-top: calc(var(--u) * 14);
  border-top: 1px solid var(--line);
  cursor: default;
}

html.mall-ui .mall-order-actions form {
  margin: 0;
}

html.mall-ui .mall-order-actions .mall-btn-quiet {
  padding: 0 calc(var(--u) * 10);
  color: var(--muted);
  font-weight: 500;
}

html.mall-ui .mall-order-actions .mall-btn-sm {
  min-width: calc(var(--u) * 92);
}

/* ============ 24. Order detail ============ */
html.mall-ui .mall-od-hero {
  position: relative;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 20);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, #2c2622, #171412);
  box-shadow: var(--e3);
  color: #f4ede2;
}

html.mall-ui .mall-od-hero.is-wait { background: linear-gradient(155deg, #4a3417, #24180c); }
html.mall-ui .mall-od-hero.is-ok { background: linear-gradient(155deg, #2e4433, #141f17); }
html.mall-ui .mall-od-hero.is-info { background: linear-gradient(155deg, #2c3d52, #121a24); }
html.mall-ui .mall-od-hero.is-done { background: linear-gradient(155deg, #4b3b22, #1d160c); }

html.mall-ui .mall-od-hero-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
}

html.mall-ui .mall-od-hero-ico {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: calc(var(--u) * 22);
}

html.mall-ui .mall-od-status {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
}

html.mall-ui .mall-od-no {
  margin-top: calc(var(--u) * 4);
  color: rgba(244, 237, 226, .6);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: calc(var(--u) * 20) 0 0;
  padding: 0;
  list-style: none;
}

html.mall-ui .mall-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 6);
  min-width: 0;
  color: rgba(244, 237, 226, .45);
  font-size: var(--t-2xs);
  text-align: center;
}

html.mall-ui .mall-steps li::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 5);
  right: 50%;
  left: -50%;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}

html.mall-ui .mall-steps li:first-child::before {
  display: none;
}

html.mall-ui .mall-steps li.is-done::before {
  background: rgba(244, 237, 226, .55);
}

html.mall-ui .mall-steps i {
  position: relative;
  z-index: 1;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  border-radius: 50%;
  background: #2a2420;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
}

html.mall-ui .mall-steps li.is-done {
  color: #f4ede2;
}

html.mall-ui .mall-steps li.is-done i {
  background: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(217, 190, 143, .2);
}

html.mall-ui .mall-steps span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-steps time {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

html.mall-ui .mall-od-ship {
  padding-top: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 6);
}

html.mall-ui .mall-od-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--u) * 12) 0;
  color: inherit;
  text-decoration: none;
}

html.mall-ui .mall-od-line + .mall-od-line {
  border-top: 1px solid var(--line);
}

html.mall-ui .mall-od-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: calc(var(--u) * 18);
}

html.mall-ui .mall-od-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

html.mall-ui .mall-od-txt b {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 600;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-od-txt b em {
  margin-left: calc(var(--u) * 6);
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-od-txt small {
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-rows.is-sep {
  margin-top: var(--s-3);
  padding-top: calc(var(--u) * 6);
  border-top: 1px solid var(--line);
}

html.mall-ui .mall-row-copy {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(var(--u) * 6);
  font-family: var(--font-num);
}

html.mall-ui .mall-link-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  height: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 8);
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font);
  font-size: var(--t-2xs);
  font-weight: 600;
  line-height: 1;
}

html.mall-ui .mall-od-actions {
  margin-top: var(--s-4);
}

html.mall-ui .mall-refund {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: 0;
}

html.mall-ui .mall-refund .mall-panel-head {
  margin-bottom: 0;
}

html.mall-ui .mall-seg-radio.is-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ============ 25. Wallet, forms, feeds ============ */
html.mall-ui .mall-balance-hero {
  position: relative;
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 22) calc(var(--u) * 20);
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 168, 119, .28), transparent 55%),
    linear-gradient(155deg, #2c2622, #171412);
  box-shadow: var(--e3);
  color: #f4ede2;
}

html.mall-ui .mall-balance-hero.is-due {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(217, 190, 143, .28), transparent 55%),
    linear-gradient(155deg, #8a3540, #4e171e);
}

html.mall-ui .mall-balance-hero .mall-kicker {
  color: rgba(244, 237, 226, .62);
}

html.mall-ui .mall-balance-v .mall-price {
  color: #fbf6ee;
}

html.mall-ui .mall-balance-v .mall-price-int {
  font-size: calc(var(--u) * 36);
  letter-spacing: -.02em;
}

html.mall-ui .mall-balance-v .mall-price-dec {
  font-size: calc(var(--u) * 20);
}

html.mall-ui .mall-balance-v .mall-price-cur {
  color: rgba(244, 237, 226, .6);
  font-size: calc(var(--u) * 15);
}

html.mall-ui .mall-balance-hero p {
  margin: calc(var(--u) * 8) 0 0;
  color: rgba(244, 237, 226, .6);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-form {
  display: block;
}

html.mall-ui .mall-form > .mall-btn,
html.mall-ui .mall-form > button.mall-btn {
  margin-top: calc(var(--u) * 22);
}

html.mall-ui .mall-form-gap {
  height: var(--s-5);
}

html.mall-ui .mall-panel-head.is-inner {
  margin-top: var(--s-5);
}

html.mall-ui .mall-fill-btn {
  height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1;
}

html.mall-ui .mall-amounts {
  margin: calc(var(--u) * -4) 0 0;
}

html.mall-ui .mall-amounts .mall-chip {
  flex: 1 1 0;
  min-width: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 6);
  font-family: var(--font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-feed {
  display: flex;
  flex-direction: column;
}

html.mall-ui .mall-feed-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--u) * 12) 0;
}

html.mall-ui .mall-feed-item + .mall-feed-item {
  border-top: 1px solid var(--line);
}

html.mall-ui .mall-feed-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: var(--sunk);
  color: var(--ink-3);
  font-size: calc(var(--u) * 17);
}

html.mall-ui .mall-feed-ico.is-in {
  background: var(--ok-bg);
  color: var(--ok);
}

html.mall-ui .mall-feed-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

html.mall-ui .mall-feed-main b {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-feed-main small {
  color: var(--muted);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-feed-amt {
  flex: none;
  color: var(--ink);
  font-family: var(--font-num);
  font-size: var(--t-md);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-feed-amt.is-in {
  color: var(--ok);
}

html.mall-ui .mall-me-mini {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: calc(var(--u) * 6) 0 var(--s-1);
  padding: var(--s-2) calc(var(--u) * 4);
}

html.mall-ui .mall-me-mini .mall-avatar {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  font-size: calc(var(--u) * 22);
  box-shadow: 0 0 0 3px var(--surface), 0 8px 18px -10px rgba(40, 28, 16, .5);
}

html.mall-ui .mall-me-mini b {
  display: block;
  color: var(--ink);
  font-size: var(--t-lg);
  font-weight: 650;
}

html.mall-ui .mall-me-mini small {
  color: var(--muted);
  font-size: var(--t-xs);
}

html.mall-ui .mall-lock-hero {
  display: flex;
  justify-content: center;
  padding: calc(var(--u) * 18) 0 calc(var(--u) * 6);
}

html.mall-ui .mall-lock-hero span {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 64);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e2);
  color: var(--accent);
  font-size: calc(var(--u) * 28);
}

/* Payment */
html.mall-ui .mall-acct-head {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 10);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}

html.mall-ui .mall-acct-head .mi {
  flex: none;
  margin-top: .15em;
  color: var(--accent);
  font-size: calc(var(--u) * 18);
}

html.mall-ui .mall-acct-head p {
  margin: 0;
}

html.mall-ui .mall-acct-list,
html.mall-ui .mall-acct-inline {
  margin-top: var(--s-3);
  padding: calc(var(--u) * 4) calc(var(--u) * 14);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

html.mall-ui .mall-acct-inline {
  margin-top: var(--s-4);
}

html.mall-ui .mall-acct-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--u) * 8);
  margin: 0 !important;
  padding: calc(var(--u) * 11) 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.4;
}

html.mall-ui .mall-acct-row + .mall-acct-row {
  border-top: 1px dashed var(--line-2);
}

html.mall-ui .mall-acct-row .mi {
  grid-row: span 2;
  justify-self: center;
  color: var(--muted);
  font-size: calc(var(--u) * 17);
}

html.mall-ui .mall-acct-k {
  color: var(--muted);
  font-size: var(--t-2xs);
  letter-spacing: .04em;
}

html.mall-ui .mall-acct-v {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-acct-mark {
  margin-left: calc(var(--u) * 4);
  color: var(--warn);
  font-family: var(--font);
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: 600;
}

/* Addresses */
html.mall-ui .mall-addr-card {
  margin-bottom: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
}

html.mall-ui .mall-addr-card.is-default {
  box-shadow: inset 0 0 0 1.5px rgba(168, 131, 79, .5), var(--e2);
}

html.mall-ui .mall-addr-top {
  display: flex;
  gap: var(--s-3);
}

html.mall-ui .mall-addr-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: calc(var(--u) * 18);
}

html.mall-ui .mall-addr-main {
  flex: 1;
  min-width: 0;
}

html.mall-ui .mall-addr-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}

html.mall-ui .mall-addr-who b {
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
}

html.mall-ui .mall-addr-who span {
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-addr-who .mall-status {
  height: calc(var(--u) * 20);
  font-size: var(--t-2xs);
  font-style: normal;
}

html.mall-ui .mall-addr-txt {
  margin: calc(var(--u) * 6) 0 0;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-addr-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--u) * 4);
  margin-top: var(--s-3);
  padding-top: calc(var(--u) * 8);
  border-top: 1px solid var(--line);
}

html.mall-ui .mall-addr-actions form {
  margin: 0;
}

html.mall-ui .mall-addr-actions .mall-btn {
  padding: 0 calc(var(--u) * 10);
  color: var(--ink-3);
  font-weight: 500;
}

html.mall-ui .mall-addr-add {
  margin-top: var(--s-5);
}

/* Tracking */
html.mall-ui .mall-track-form,
html.mall-ui .mall-redeem {
  padding-top: calc(var(--u) * 6);
}

html.mall-ui .mall-track-go {
  position: absolute;
  right: calc(var(--u) * 7);
  height: calc(var(--u) * 40);
}

html.mall-ui .mall-track-form .mall-search-input,
html.mall-ui .mall-redeem .mall-search-input {
  padding-right: calc(var(--u) * 100);
}

html.mall-ui .mall-track-hero {
  margin-top: var(--s-4);
}

html.mall-ui .mall-track-hero .mall-kicker {
  margin-bottom: calc(var(--u) * 4);
  color: rgba(244, 237, 226, .55);
}

html.mall-ui .mall-track-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(244, 237, 226, .62);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-track-meta span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 6);
}

html.mall-ui .mall-track-meta b {
  color: #f4ede2;
  font-family: var(--font-num);
  letter-spacing: .06em;
}

html.mall-ui .mall-track-warn {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  margin-top: var(--s-3);
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  color: #f3c7c2;
  font-size: var(--t-xs);
}

html.mall-ui .mall-track-ends {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
}

html.mall-ui .mall-track-ends > div:last-child {
  text-align: right;
}

html.mall-ui .mall-track-ends b {
  display: block;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-track-arrow {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: calc(var(--u) * 16);
}

html.mall-ui .mall-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

html.mall-ui .mall-timeline li {
  position: relative;
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
}

html.mall-ui .mall-timeline li::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 14);
  bottom: 0;
  left: calc(var(--u) * 5);
  width: 1px;
  background: var(--line-2);
}

html.mall-ui .mall-timeline li:last-child {
  padding-bottom: 0;
}

html.mall-ui .mall-timeline li:last-child::before {
  display: none;
}

html.mall-ui .mall-timeline i {
  flex: none;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin-top: calc(var(--u) * 4);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--faint);
}

html.mall-ui .mall-timeline li.is-now i {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

html.mall-ui .mall-timeline div {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  min-width: 0;
}

html.mall-ui .mall-timeline b {
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 600;
}

html.mall-ui .mall-timeline li.is-now b {
  color: var(--ink);
}

html.mall-ui .mall-timeline span,
html.mall-ui .mall-timeline time {
  color: var(--muted);
  font-size: var(--t-xs);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-map-label {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  margin: calc(var(--u) * -6) 0 var(--s-3);
  color: var(--muted);
  font-size: var(--t-xs);
}

html.mall-ui .mall-map {
  height: calc(var(--u) * 280);
  overflow: hidden;
  border-radius: var(--r-md);
  background: #e9eef0;
  box-shadow: inset 0 0 0 1px var(--line);
  isolation: isolate;
  z-index: 0;
}

html.mall-ui .mall-map.leaflet-container {
  background: #e9eef0;
}

html.mall-ui .mall-map-note {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  margin: var(--s-2) 0 0;
  color: var(--muted);
  font-size: var(--t-xs);
  line-height: 1.5;
}

html.mall-ui .mall-map-note[hidden] {
  display: none;
}

/* Articles */
html.mall-ui .mall-article-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 16);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-article-row + .mall-article-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: calc(var(--u) * 58);
  height: 1px;
  background: var(--line);
}

html.mall-ui .mall-article-row:active {
  background: var(--sunk);
}

html.mall-ui .mall-article-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

html.mall-ui .mall-article-main b {
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html.mall-ui .mall-article-main time {
  color: var(--muted);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-article {
  padding: calc(var(--u) * 22) calc(var(--u) * 20);
}

html.mall-ui .mall-article-title {
  margin: 0 0 var(--s-4);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Cart */
html.mall-ui .mall-cart-item {
  position: relative;
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
}

html.mall-ui .mall-cart-thumb {
  flex: none;
  display: block;
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  border-radius: var(--r-sm);
}

html.mall-ui .mall-cart-thumb .mall-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.mall-ui .mall-cart-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: calc(var(--u) * 26);
}

html.mall-ui .mall-cart-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

html.mall-ui .mall-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

html.mall-ui .mall-qty {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

html.mall-ui .mall-qty button {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--e1);
  color: var(--ink);
  font-size: calc(var(--u) * 14);
  transition: transform var(--d-1) var(--ease);
}

html.mall-ui .mall-qty button:active {
  transform: scale(.88);
}

html.mall-ui .mall-qty input {
  width: calc(var(--u) * 34);
  min-height: 0;
  height: calc(var(--u) * 28);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-num);
  font-size: var(--t-sm);
  font-weight: 650;
  text-align: center;
}

html.mall-ui .mall-qty input:focus {
  box-shadow: none;
}

html.mall-ui .mall-cart-del {
  position: absolute;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 8);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  color: var(--faint);
  font-size: calc(var(--u) * 16);
  transition: color var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}

html.mall-ui .mall-cart-del:active,
html.mall-ui .mall-cart-del:hover {
  background: var(--sunk);
  color: var(--accent);
}

html.mall-ui .mall-cart-save {
  margin-top: var(--s-1);
  color: var(--ink-3);
}

html.mall-ui .mall-cart-form.is-dirty .mall-cart-save {
  background: var(--ink);
  box-shadow: none;
  color: var(--paper);
}

html.mall-ui .mall-checkout-space {
  height: calc(var(--bar-h) + var(--s-2));
}

html.mall-ui .mall-checkout-bar {
  position: fixed;
  z-index: 58;
  bottom: calc(var(--tab-h) + var(--safe-b));
  left: var(--col-left);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: var(--mall-col);
  height: var(--bar-h);
  padding: 0 calc(var(--u) * 14) 0 var(--gx);
  box-sizing: border-box;
  background: rgba(255, 253, 249, .92);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: 0 -1px 0 var(--line), 0 1px 0 var(--line);
}

html.mall-ui .mall-checkout-sum {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}

html.mall-ui .mall-checkout-sum small {
  color: var(--muted);
  font-size: var(--t-2xs);
}

html.mall-ui .mall-checkout-sum .mall-price-int {
  font-size: calc(var(--u) * 22);
}

html.mall-ui .mall-checkout-bar .mall-btn {
  height: calc(var(--u) * 48);
  min-width: calc(var(--u) * 140);
}

/* Coupons */
html.mall-ui .mall-section.is-tight {
  margin-top: calc(var(--u) * 26);
}

html.mall-ui .mall-tickets {
  display: grid;
  gap: var(--s-3);
}

html.mall-ui .mall-ticket {
  --notch: calc(var(--u) * 9);
  --cut: 31%;
  position: relative;
  display: grid;
  grid-template-columns: var(--cut) minmax(0, 1fr) auto;
  align-items: center;
  min-height: calc(var(--u) * 96);
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 22px -16px rgba(40, 28, 16, .35);
}

html.mall-ui .mall-ticket::before,
html.mall-ui .mall-ticket::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(var(--cut) - var(--notch));
  width: calc(var(--notch) * 2);
  height: calc(var(--notch) * 2);
  border-radius: 50%;
  background: var(--paper);
}

html.mall-ui .mall-ticket::before {
  top: calc(var(--notch) * -1);
  box-shadow: inset 0 -1px 0 var(--line);
}

html.mall-ui .mall-ticket::after {
  bottom: calc(var(--notch) * -1);
  box-shadow: inset 0 1px 0 var(--line);
}

html.mall-ui .mall-ticket-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: calc(var(--u) * 4);
  padding: var(--s-3) calc(var(--u) * 6);
  border-radius: var(--r-md) 0 0 var(--r-md);
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(217, 190, 143, .3), transparent 60%),
    linear-gradient(155deg, var(--accent-hi), #5e1d26);
  color: var(--on-accent);
  text-align: center;
}

html.mall-ui .mall-ticket-stub::after {
  content: "";
  position: absolute;
  top: calc(var(--notch) + 4px);
  right: 0;
  bottom: calc(var(--notch) + 4px);
  border-right: 1.5px dashed rgba(251, 246, 239, .35);
}

html.mall-ui .mall-ticket-amt {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 3);
  line-height: 1;
}

html.mall-ui .mall-ticket-amt b {
  font-family: var(--font-num);
  font-size: calc(var(--u) * 32);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

html.mall-ui .mall-ticket-amt small {
  font-size: var(--t-xs);
  opacity: .75;
}

html.mall-ui .mall-ticket-cond {
  font-size: var(--t-2xs);
  opacity: .82;
}

html.mall-ui .mall-ticket-main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  min-width: 0;
  padding: var(--s-3) var(--s-4);
}

html.mall-ui .mall-ticket-main b {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.mall-ui .mall-ticket-main small {
  color: var(--muted);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-ticket-act {
  padding-right: var(--s-4);
}

html.mall-ui .mall-ticket.is-used {
  opacity: .6;
}

html.mall-ui .mall-ticket.is-used .mall-ticket-stub {
  background: linear-gradient(155deg, #9a948b, #6f6a63);
}

/* Sign-in */
html.mall-ui .mall-sign-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  margin-top: calc(var(--u) * 4);
  padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 18);
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201, 168, 119, .3), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(122, 42, 51, .5), transparent 62%),
    linear-gradient(155deg, #2c2622, #161311);
  box-shadow: var(--e3);
  color: #f4ede2;
}

html.mall-ui .mall-sign-pts .mall-kicker {
  color: rgba(244, 237, 226, .6);
}

html.mall-ui .mall-sign-pts b {
  display: block;
  font-family: var(--font-num);
  font-size: calc(var(--u) * 38);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-sign-pts small {
  display: block;
  margin-top: calc(var(--u) * 6);
  color: rgba(244, 237, 226, .62);
  font-size: var(--t-xs);
}

html.mall-ui .mall-sign-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #f8ecd6, #c8a46c);
  box-shadow: 0 0 0 calc(var(--u) * 6) rgba(217, 190, 143, .16), 0 14px 30px -12px rgba(0, 0, 0, .6);
  color: #2a1f18;
  text-decoration: none;
  transition: transform var(--d-2) var(--ease-spring);
}

html.mall-ui .mall-sign-btn:active {
  transform: scale(.94);
}

html.mall-ui .mall-sign-btn .mi {
  font-size: calc(var(--u) * 22);
}

html.mall-ui .mall-sign-btn em {
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  padding: 0 calc(var(--u) * 8);
}

html.mall-ui .mall-sign-btn small {
  font-family: var(--font-num);
  font-size: var(--t-2xs);
  font-weight: 600;
  opacity: .7;
}

html.mall-ui .mall-sign-btn.is-done {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #f4ede2;
}

html.mall-ui .mall-sign-btn.is-done .mi {
  color: var(--gold-hi);
}

html.mall-ui .mall-sign-tip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(244, 237, 226, .62);
  font-size: var(--t-xs);
}

html.mall-ui .mall-sign-tip .mi {
  color: var(--gold-hi);
}

html.mall-ui .mall-cal-title {
  font-family: var(--font-display) !important;
  font-size: var(--t-xl) !important;
  letter-spacing: .02em;
}

html.mall-ui .mall-cal-title i {
  color: var(--accent);
  font-style: normal;
}

html.mall-ui .mall-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--u) * 6);
}

html.mall-ui .mall-cal-wd {
  padding-bottom: calc(var(--u) * 4);
  color: var(--muted);
  font-size: var(--t-2xs);
  font-weight: 600;
  text-align: center;
}

html.mall-ui .mall-cal-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

html.mall-ui .mall-cal-day.is-future {
  color: var(--faint);
}

html.mall-ui .mall-cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
  font-weight: 700;
}

html.mall-ui .mall-cal-day.is-signed {
  background: var(--accent);
  color: var(--on-accent);
}

html.mall-ui .mall-cal-day.is-signed b {
  display: none;
}

html.mall-ui .mall-cal-day .mi {
  font-size: calc(var(--u) * 15);
  stroke-width: 2.2;
}

/* Brands */
html.mall-ui .mall-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-2);
}

html.mall-ui .mall-brand-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: calc(var(--u) * 22) var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--e1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

html.mall-ui .mall-brand-tile:active {
  transform: scale(.98);
}

html.mall-ui .mall-brand-arch {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 64);
  height: calc(var(--u) * 76);
  overflow: hidden;
  border-radius: calc(var(--u) * 32) calc(var(--u) * 32) calc(var(--u) * 6) calc(var(--u) * 6);
  background: linear-gradient(155deg, var(--accent-hi), #5e1d26);
  color: var(--on-accent);
}

html.mall-ui .mall-brand-arch b {
  font-family: var(--font-display);
  font-size: calc(var(--u) * 30);
  font-weight: 600;
}

html.mall-ui .mall-brand-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.mall-ui .mall-brand-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  text-align: center;
}

/* Simple lists rendered by boot.php callbacks */
html.mall-ui .mall-simple > .bg-white,
html.mall-ui .mall-page > .bg-white {
  margin-bottom: var(--s-3);
  padding: var(--s-4) !important;
  color: var(--ink-2);
}

html.mall-ui .mall-page.p-4 {
  padding-top: var(--s-4);
}

/* @@PAGES@@ */

/* ============ 99. Motion ============ */
@keyframes mall-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mall-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mall-fade-out { to { opacity: 0; } }
@keyframes mall-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mall-sheet-down { to { transform: translateY(100%); } }
@keyframes mall-spin { to { transform: rotate(360deg); } }
@keyframes mall-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes mall-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes mall-tab-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mall-toast-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes mall-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes mall-heart { 0% { transform: scale(1); } 30% { transform: scale(.7); } 65% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes mall-ring { from { transform: scale(.4); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }
@keyframes mall-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

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