:root {
  --xh-surface-canvas: #fbf6ea;
  --xh-surface-warm: #fff8e8;
  --xh-surface-card: #fffdf6;
  --xh-surface-green: #eff5e7;
  --xh-text-primary: #4f321b;
  --xh-text-secondary: #7b5b33;
  --xh-text-muted: #9a7135;
  --xh-accent-flower: #f7b232;
  --xh-accent-flower-soft: #f5cf62;
  --xh-accent-orange: #c7521b;
  --xh-accent-orange-bright: #e87524;
  --xh-accent-leaf: #5e7b4d;
  --xh-accent-leaf-soft: #91aa6b;
  --xh-border-soft: #e8d9b9;
  --xh-gift-brown: #7b4a1d;
  --xh-shadow-soft: 0 10px 24px rgb(139 104 65 / 8%);
  --xh-shadow-card: 0 18px 38px rgb(178 123 34 / 12%);
  --xh-shadow-hero: 0 24px 58px rgb(178 123 34 / 16%);
  --xh-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gift-checkout-page,
.gift-status-page {
  display: grid;
  gap: 16px;
  padding-bottom: 96px;
}

.gift-checkout-form,
.gift-claim-form,
.gift-sender-actions {
  display: grid;
  gap: 14px;
}

.gift-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #fff;
  border-bottom: 1px solid #eadfce;
}

.gift-mode-tabs label {
  min-height: 48px;
  display: grid;
  place-items: center;
  color: #4f321b;
  cursor: pointer;
}

.gift-mode-tabs label.is-active {
  color: #167c63;
  box-shadow: inset 0 -3px #19aa83;
}

.gift-mode-tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gift-recipient-field,
.gift-claim-form label {
  display: grid;
  gap: 7px;
  color: #59442f;
  font-weight: 700;
}

.gift-recipient-field {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.gift-recipient-stepper {
  display: grid;
  grid-template-columns: 44px 64px 44px;
}

.gift-recipient-stepper button,
.gift-recipient-stepper input {
  min-height: 44px;
  border: 1px solid var(--xh-border-soft);
  background: var(--xh-surface-card);
  text-align: center;
}

.gift-recipient-stepper button {
  color: var(--xh-text-primary);
  font-size: 20px;
  cursor: pointer;
}

.gift-recipient-field input,
.gift-claim-form input,
.gift-claim-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e2d8cb;
  border-radius: 8px;
  background: #f8f6f3;
}

.gift-product-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 8px;
}

.gift-product-card img,
.gift-product-placeholder {
  width: 92px;
  height: 92px;
  border-radius: 6px;
  object-fit: cover;
}

.gift-product-placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background: #9b612f;
}

.gift-order-summary {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 8px;
}

.gift-order-summary div,
.gift-claim-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.gift-claim-row {
  padding: 10px 0;
  border-bottom: 1px solid #eee6dc;
  color: #6b5948;
}

.gift-validity-tip {
  margin-bottom: 64px;
  color: #7a6855;
  font-size: 13px;
}

.gift-sender-actions {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.gift-checkout-page .route-fixed-action {
  bottom: 12px;
}

.gift-claim-form button,
.gift-sender-actions button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--xh-accent-leaf);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.gift-sender-actions button[data-gift-cancel] {
  border: 1px solid var(--xh-border-soft);
  background: var(--xh-surface-card);
  color: var(--xh-accent-orange);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #efe1c8;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--xh-text-primary);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.stage {
  display: grid;
  min-height: 100dvh;
  padding: 20px 12px;
  background:
    radial-gradient(circle at 14% 10%, rgb(247 178 50 / 24%), transparent 27%),
    radial-gradient(circle at 88% 18%, rgb(94 123 77 / 16%), transparent 29%),
    linear-gradient(135deg, #f5e3bd 0%, #fbf1dc 46%, #eadab9 100%);
  place-items: start center;
}

.phone {
  position: relative;
  width: min(390px, 100%);
  height: min(1000px, calc(100dvh - 40px));
  min-height: min(1000px, calc(100dvh - 40px));
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 96px;
  border: 1px solid rgb(232 217 185 / 92%);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgb(255 248 232 / 98%) 0, rgb(251 246 234 / 96%) 320px, var(--xh-surface-canvas) 610px),
    var(--xh-surface-canvas);
  box-shadow: 0 32px 86px rgb(79 50 27 / 18%);
}

.paper-grain {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 20%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(#000 0, transparent 52%);
  pointer-events: none;
}

.warm-orbit {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.warm-orbit-a {
  top: 74px;
  right: -76px;
  width: 210px;
  height: 210px;
  background: rgb(247 178 50 / 17%);
}

.warm-orbit-b {
  top: 250px;
  left: -90px;
  width: 210px;
  height: 210px;
  background: rgb(94 123 77 / 12%);
}

.app-header,
.panel-wrap,
.bottom-tabs {
  position: relative;
  z-index: 1;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  background: var(--xh-surface-warm);
  box-shadow: 0 8px 18px rgb(79 50 27 / 8%);
}

.app-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
  color: var(--xh-text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.app-brand-divider {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  background: var(--xh-border-soft);
}

.search-stack {
  display: grid;
  align-items: center;
  grid-template-columns: 46px 1fr 48px;
  gap: 8px;
  margin-top: 6px;
}

.app-header-action,
.search-box,
.support-button {
  min-height: 38px;
  border: 1px solid rgb(232 217 185 / 92%);
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-soft);
}

.app-header-action {
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  color: var(--xh-text-secondary);
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.app-logo-image {
  width: 100%;
  height: 100%;
  padding: 2px;
  object-fit: contain;
}

.app-logo-mark {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 86%), transparent 34%),
    linear-gradient(145deg, var(--xh-accent-flower-soft), var(--xh-accent-orange-bright));
  color: var(--xh-text-primary);
  font-size: 18px;
  line-height: 1;
  place-items: center;
}

.app-header-back-text {
  display: none;
}

.app-header-action.is-back {
  width: 52px;
  border-radius: 18px;
  background: rgb(239 245 231 / 88%);
  color: var(--xh-accent-leaf);
}

.app-header-action.is-back .app-logo-image,
.app-header-action.is-back .app-logo-mark {
  display: none;
}

.app-header-action.is-back .app-header-back-text {
  display: inline;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border-radius: 20px;
}

.search-box svg,
.support-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--xh-text-primary);
  font-size: 13px;
}

.search-box input::placeholder {
  color: #9c7c4f;
}

.support-button {
  display: grid;
  width: 48px;
  padding: 0;
  border-radius: 20px;
  color: #6e5635;
  place-items: center;
}

.support-button span {
  color: var(--xh-text-primary);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.panel-wrap {
  padding: 0 18px 24px;
}

.home-carousel {
  position: relative;
  min-height: 214px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 18%, rgb(247 178 50 / 28%), transparent 32%),
    linear-gradient(140deg, rgb(255 253 246 / 92%) 0%, rgb(239 245 231 / 82%) 100%);
  box-shadow: var(--xh-shadow-hero);
}

.home-carousel-track {
  display: flex;
  height: 214px;
  transform: translateX(calc(var(--carousel-index, 0) * -100%));
  transition: transform 260ms var(--xh-ease);
}

.eyebrow,
.product-tag {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.home-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  color: inherit;
}

.home-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-carousel-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(79 50 27 / 78%) 0%, rgb(79 50 27 / 42%) 48%, rgb(79 50 27 / 10%) 100%),
    radial-gradient(circle at 78% 16%, rgb(247 178 50 / 24%), transparent 34%);
}

.home-carousel-copy {
  position: absolute;
  inset: 18px 96px 20px 18px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.home-carousel-copy small {
  color: rgb(255 248 232 / 86%);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.35;
}

.home-carousel-copy strong {
  color: var(--xh-text-primary);
  color: #fff8e8;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

.home-carousel-copy em {
  color: rgb(255 248 232 / 90%);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.home-carousel-dots {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 6px;
}

.home-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 253 246 / 72%);
}

.home-carousel-dots button.is-active {
  width: 22px;
  background: var(--xh-accent-flower);
}

.section-title p,
.product-row p,
.story-card p {
  margin: 0;
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.section-title h2 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.section-title h2 {
  margin: 0;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.price-row strong {
  color: var(--xh-accent-orange);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.price-row button {
  min-width: 72px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--xh-accent-leaf);
  color: white;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
  transition:
    opacity 140ms var(--xh-ease),
    transform 140ms var(--xh-ease);
}

.route-board {
  margin-top: 16px;
}

.route-list {
  display: grid;
  gap: 10px;
}

.route-card {
  display: grid;
  align-items: center;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgb(232 217 185 / 70%);
  border-radius: 18px;
  background: rgb(255 253 246 / 80%);
  box-shadow: var(--xh-shadow-soft);
}

.route-card-main {
  background:
    radial-gradient(circle at 90% 18%, rgb(247 178 50 / 26%), transparent 30%),
    rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
}

.route-index {
  display: grid;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--xh-accent-flower-soft), var(--xh-accent-orange-bright));
  color: rgb(255 253 246 / 96%);
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.route-card strong {
  display: block;
  color: var(--xh-text-primary);
  font-size: 15px;
  line-height: 1.3;
}

.route-card small {
  display: block;
  margin-top: 3px;
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.shortcut-grid a {
  display: grid;
  min-height: 72px;
  padding: 8px 4px;
  border: 1px solid rgb(232 217 185 / 66%);
  border-radius: 16px;
  background: rgb(255 253 246 / 72%);
  color: #5c4831;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  justify-items: center;
}

.flower-icon,
.flower-tab {
  --petal-main: var(--xh-accent-flower);
  --petal-light: var(--xh-accent-flower-soft);
  --petal-deep: var(--xh-accent-orange-bright);
  --leaf-main: var(--xh-accent-leaf);
  position: relative;
  display: grid;
  overflow: visible;
  border: 1px solid rgb(255 255 255 / 78%);
  background:
    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 86%), transparent 28%),
    linear-gradient(145deg, rgb(255 253 246 / 92%), rgb(255 239 186 / 78%) 44%, rgb(239 245 231 / 78%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 90%),
    0 10px 18px rgb(125 79 24 / 13%);
  isolation: isolate;
  place-items: center;
}

.flower-icon {
  width: 44px;
  height: 44px;
  border-radius: 17px;
}

.flower-tab {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    0 5px 10px rgb(125 79 24 / 10%);
}

.flower-icon::before,
.flower-icon::after {
  position: absolute;
  z-index: 0;
  width: 21px;
  height: 14px;
  border-radius: 999px 999px 999px 180px;
  background: linear-gradient(135deg, var(--petal-light), var(--petal-main) 58%, var(--petal-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
  content: "";
}

.flower-icon::before {
  top: 8px;
  left: 8px;
  transform: rotate(-35deg);
}

.flower-icon::after {
  top: 9px;
  right: 8px;
  transform: rotate(36deg) scaleX(-1);
}

.flower-petal,
.flower-leaf,
.flower-core,
.icon-mark,
.tab-mark {
  position: absolute;
  z-index: 1;
  display: block;
}

.flower-petal {
  width: 17px;
  height: 14px;
  border-radius: 999px 999px 999px 150px;
  background: linear-gradient(145deg, var(--petal-light), var(--petal-main) 62%, var(--petal-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 58%);
}

.flower-petal-a {
  top: 10px;
  left: 13px;
  transform: rotate(-82deg);
}

.flower-petal-b {
  top: 17px;
  left: 7px;
  transform: rotate(-158deg);
}

.flower-petal-c {
  top: 18px;
  right: 7px;
  transform: rotate(22deg);
}

.flower-leaf {
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 12px;
  border-radius: 999px 999px 999px 120px;
  background: linear-gradient(135deg, var(--xh-accent-leaf-soft), var(--xh-accent-leaf));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%);
  transform: rotate(-28deg);
}

.flower-core {
  top: 18px;
  left: 18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff6c9, var(--xh-gift-brown) 72%);
  box-shadow: 0 2px 5px rgb(79 50 27 / 18%);
}

.icon-mark {
  right: 9px;
  bottom: 9px;
  color: rgb(255 253 246 / 96%);
}

.icon-mark-grid {
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: currentcolor;
  box-shadow:
    8px 0 0 currentcolor,
    0 8px 0 currentcolor,
    8px 8px 0 currentcolor;
}

.icon-mark-hot {
  width: 12px;
  height: 16px;
  border-radius: 10px 10px 11px 11px;
  background: linear-gradient(180deg, #fff6c9, var(--xh-accent-orange));
  clip-path: polygon(52% 0, 84% 35%, 72% 100%, 22% 100%, 10% 46%);
}

.icon-mark-play {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentcolor;
}

.icon-mark-ticket {
  width: 16px;
  height: 11px;
  border: 2px solid currentcolor;
  border-radius: 4px;
  background:
    radial-gradient(circle at 0 50%, transparent 0 3px, currentcolor 3px 4px, transparent 4px),
    radial-gradient(circle at 100% 50%, transparent 0 3px, currentcolor 3px 4px, transparent 4px);
}

.flower-icon-hot {
  --petal-main: var(--xh-accent-orange-bright);
  --petal-light: #ffe1b8;
  --petal-deep: var(--xh-accent-orange);
}

.flower-icon-content {
  --petal-main: #c99a5d;
  --petal-light: #f5e3c4;
  --petal-deep: var(--xh-gift-brown);
}

.flower-icon-coupon {
  --petal-main: var(--xh-accent-leaf-soft);
  --petal-light: #e7f3cf;
  --petal-deep: var(--xh-accent-leaf);
}

.flower-tab .flower-petal {
  width: 13px;
  height: 10px;
}

.flower-tab .flower-petal-a {
  top: 7px;
  left: 9px;
}

.flower-tab .flower-petal-b {
  top: 13px;
  left: 6px;
}

.flower-tab .flower-leaf {
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 9px;
}

.flower-tab .flower-core {
  top: 13px;
  left: 13px;
  width: 6px;
  height: 6px;
}

.tab-mark {
  right: 6px;
  bottom: 6px;
  color: rgb(255 253 246 / 96%);
}

.tab-mark-home {
  width: 11px;
  height: 9px;
  border: 2px solid currentcolor;
  border-top: 0;
  border-radius: 2px 2px 4px 4px;
}

.tab-mark-home::before {
  position: absolute;
  top: -6px;
  left: -1px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
  content: "";
  transform: rotate(45deg);
}

.tab-mark-grid {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: currentcolor;
  box-shadow:
    6px 0 0 currentcolor,
    0 6px 0 currentcolor,
    6px 6px 0 currentcolor;
}

.tab-mark-play {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentcolor;
}

.tab-mark-cart {
  width: 12px;
  height: 8px;
  border: 2px solid currentcolor;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.tab-mark-cart::before {
  position: absolute;
  top: -5px;
  left: -1px;
  width: 11px;
  height: 5px;
  border-top: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
  content: "";
  transform: skewX(-14deg);
}

.tab-mark-me {
  width: 13px;
  height: 11px;
  border-radius: 8px 8px 5px 5px;
  background: currentcolor;
  clip-path: polygon(50% 0, 69% 22%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 31% 22%);
}

.tab-button.is-active .flower-tab {
  background:
    radial-gradient(circle at 34% 24%, rgb(255 255 255 / 88%), transparent 28%),
    linear-gradient(145deg, rgb(255 247 216 / 96%), rgb(239 245 231 / 86%));
  transform: translateY(-1px);
}

.trust-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgb(145 170 107 / 22%);
  border-radius: 16px;
  background: rgb(239 245 231 / 74%);
}

.trust-band span {
  color: #536d44;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.coupon-board,
.product-section,
.content-preview,
.story-card {
  margin-top: 20px;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title h2 {
  margin: 0;
}

.section-title p {
  text-align: right;
}

.coupon-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.coupon-list article,
.product-row,
.story-card {
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 17px;
  background: rgb(255 253 246 / 86%);
  box-shadow: var(--xh-shadow-card);
}

.coupon-list article {
  padding: 14px;
  background:
    radial-gradient(circle at 80% 20%, rgb(255 255 255 / 56%), transparent 28%),
    linear-gradient(135deg, rgb(255 242 184 / 86%), rgb(255 253 246 / 88));
}

.coupon-list article:nth-child(2) {
  background:
    radial-gradient(circle at 80% 20%, rgb(255 255 255 / 56%), transparent 28%),
    linear-gradient(135deg, rgb(231 243 207 / 86%), rgb(255 253 246 / 88));
}

.coupon-list strong {
  display: block;
  color: var(--xh-accent-orange);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.coupon-list span,
.coupon-list small {
  display: block;
  margin-top: 6px;
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.coupon-list small {
  color: var(--xh-text-muted);
  font-weight: 800;
}

.vertical-product-list {
  display: grid;
  gap: 10px;
}

.product-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 10px 10px;
  color: inherit;
}

.product-row-detail {
  display: grid;
  align-items: center;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  color: inherit;
}

.product-row-detail > div {
  min-width: 0;
}

.product-action-stack {
  display: grid;
  gap: 8px;
}

.product-action-stack button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 12px;
  background: rgb(255 253 246 / 92%);
  color: var(--xh-accent-leaf);
  place-items: center;
}

.product-action-stack button:last-child {
  color: var(--xh-accent-orange);
}

.product-action-stack svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.home-product-purchase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
  margin-left: 100px;
}

.home-product-purchase-row > strong {
  flex: 0 0 auto;
  color: var(--xh-accent-orange);
  font-size: 17px;
  line-height: 1;
}

.product-action-stack.is-text {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.product-action-stack.is-text button {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.product-feature {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-thumb {
  position: relative;
  min-height: 88px;
  overflow: hidden;
  border-radius: 15px;
}

.product-thumb-gold {
  background: linear-gradient(135deg, #fff2b8, #f7b232 55%, #c7521b);
}

.product-thumb-green {
  background: linear-gradient(135deg, #e7f3cf, #91aa6b 50%, #5e7b4d);
}

.product-thumb span {
  position: absolute;
  right: 15px;
  bottom: 16px;
  width: 54px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 253 246 / 88%);
  box-shadow: 0 10px 18px rgb(79 50 27 / 16%);
}

.product-tag {
  margin-bottom: 4px;
}

.product-row h3,
.story-card h3 {
  margin: 4px 0 4px;
  color: var(--xh-text-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.28;
}

.product-row .price-row {
  margin-top: 8px;
}

.home-product-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 10px;
}

.home-product-heading h2 {
  flex: 0 0 auto;
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.home-category-scroll {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.home-category-scroll::-webkit-scrollbar {
  display: none;
}

.home-category-scroll button {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--xh-text-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
}

.home-category-scroll button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 var(--xh-accent-leaf);
  color: var(--xh-accent-leaf);
  font-weight: 800;
}

.home-category-empty {
  margin: 12px 0 0;
  color: var(--xh-text-secondary);
  font-size: 13px;
  text-align: center;
}

.home-feature-section {
  margin-top: 18px;
}

.home-feature-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}

.home-feature-tabs button {
  display: grid;
  min-height: 52px;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--xh-text-primary);
  font: inherit;
  text-align: center;
}

.home-feature-tabs strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.home-feature-tabs small {
  color: var(--xh-text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.home-feature-tabs button[aria-pressed="true"] strong {
  color: var(--xh-accent-leaf);
}

.home-feature-tabs button[aria-pressed="true"] small {
  justify-self: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: #27c9ab;
  color: #fff;
}

.home-feature-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.home-feature-product-card {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 12px;
  background: rgb(255 253 246 / 86%);
  box-shadow: var(--xh-shadow-card);
}

.home-feature-product-card > a {
  display: grid;
  min-width: 0;
  color: inherit;
}

.home-feature-product-card .product-main-image,
.home-feature-product-card .route-product-art {
  aspect-ratio: 1;
  min-height: 0;
  object-fit: contain;
}

.home-feature-card-meta {
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--xh-accent-leaf);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-feature-product-card h3 {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-feature-product-card a > p:not(.home-feature-card-meta) {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-feature-product-card strong {
  display: block;
  margin-top: 7px;
  color: var(--xh-accent-orange);
  font-size: 17px;
  line-height: 1;
}

.home-feature-product-card .home-product-purchase-row {
  margin: 7px 0 0;
}

.home-feature-product-card .home-product-purchase-row > strong {
  margin: 0;
}

.home-feature-product-card .product-action-stack {
  gap: 5px;
}

.home-feature-product-card .product-action-stack:not(.is-text) {
  position: absolute;
  right: 6px;
  bottom: 10px;
}

.home-feature-product-card .product-action-stack:not(.is-text) button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.home-feature-product-card .product-action-stack:not(.is-text) svg {
  width: 15px;
  height: 15px;
}

.home-feature-empty {
  margin: 0;
  padding: 16px 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  text-align: center;
}

.supplier-home-feature-tags {
  margin: 0;
}

.supplier-home-feature-tags legend {
  padding: 0;
  color: var(--xh-text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.supplier-home-feature-tags > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.supplier-home-feature-tags label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--xh-text-secondary);
  font-size: 12px;
}

.supplier-product-form .supplier-home-feature-tags input[type='checkbox'] {
  flex: 0 0 13px;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 0;
  padding: 0;
  border: 1px solid #777;
  border-radius: 4px;
  appearance: none;
  accent-color: var(--xh-accent-flower);
  -webkit-appearance: none;
  background: #fff;
}

.supplier-product-form .supplier-home-feature-tags input[type='checkbox']:checked {
  border-color: var(--xh-accent-flower);
  background: var(--xh-accent-flower);
  box-shadow: inset 0 0 0 3px #fff;
}

.supplier-home-feature-tags small {
  display: block;
  margin-top: 6px;
  color: var(--xh-text-muted);
  font-size: 12px;
}

.product-row .price-row button {
  min-width: 48px;
  min-height: 34px;
}

.story-card {
  display: grid;
  align-items: center;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 13px;
}

.story-thumb {
  display: block;
  width: 92px;
  height: 82px;
  border-radius: 16px;
  object-fit: cover;
  background:
    radial-gradient(circle at 38% 28%, rgb(255 255 255 / 62%), transparent 25%),
    linear-gradient(135deg, var(--xh-accent-flower-soft), var(--xh-accent-orange-bright));
}

.route-panel[hidden],
.home-panel[hidden] {
  display: none;
}

.api-state,
.api-source-note {
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 17px;
  background: rgb(255 253 246 / 86%);
  box-shadow: var(--xh-shadow-soft);
}

.api-state {
  display: grid;
  gap: 6px;
  min-height: 76px;
  align-content: center;
  margin-top: 16px;
  padding: 14px;
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.api-state strong {
  color: var(--xh-text-primary);
  font-size: 15px;
}

.api-state span {
  color: var(--xh-text-secondary);
}

.api-state a {
  display: inline-grid;
  justify-self: start;
  min-height: 34px;
  align-items: center;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--xh-accent-leaf);
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.api-state-loading {
  color: var(--xh-text-muted);
}

.api-state-loading::before {
  width: 28px;
  height: 28px;
  border: 3px solid rgb(247 178 50 / 26%);
  border-top-color: var(--xh-accent-flower);
  border-radius: 999px;
  content: "";
  animation: api-state-spin 900ms linear infinite;
}

.api-state-empty {
  background: rgb(239 245 231 / 72%);
}

.api-state-error {
  border-color: rgb(199 82 27 / 22%);
  background: rgb(255 248 232 / 90%);
}

.cart-added-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1200;
  min-width: 144px;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 8px;
  transform: translate(-50%, -50%);
  background: rgb(67 51 37 / 90%);
  box-shadow: 0 8px 24px rgb(67 51 37 / 20%);
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  opacity: 1;
  pointer-events: none;
  transition: opacity 2s ease;
}

.cart-added-toast.is-fading {
  opacity: 0;
}

.api-source-note {
  margin: 0 0 10px;
  padding: 9px 11px;
  color: var(--xh-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

@keyframes api-state-spin {
  to {
    transform: rotate(360deg);
  }
}

.route-page {
  display: grid;
  gap: 12px;
  padding-top: 18px;
}

.route-page-hero,
.route-card-block,
.route-product-row,
.route-category-layout,
.product-media-layout,
.route-video-block,
.route-stats,
.order-confirm-products,
.voucher-qr-card,
.supplier-status-card,
.supplier-application-form,
.supplier-application-summary,
.support-thread,
.support-form,
.route-fixed-action {
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
}

.route-page-hero {
  display: grid;
  gap: 6px;
  padding: 16px;
  background:
    radial-gradient(circle at 88% 18%, rgb(247 178 50 / 22%), transparent 34%),
    linear-gradient(135deg, rgb(255 253 246 / 92%), rgb(239 245 231 / 78%));
}

.route-page-hero p,
.route-page-hero span,
.route-card-block p,
.route-product-row p,
.route-action-grid small,
.route-fixed-action span {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.route-page-hero h1 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.18;
}

.route-page-hero-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.route-page-hero-title-row h1 {
  min-width: 0;
}

.route-page-hero-identity {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgb(94 123 77 / 32%);
  border-radius: 8px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.route-card-block {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.order-confirm-products,
.support-thread,
.support-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.voucher-qr-card {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px;
  text-align: center;
}

.voucher-qr-card img,
.voucher-qr-placeholder {
  width: 180px;
  height: 180px;
  border-radius: 18px;
  background: rgb(255 253 246 / 96%);
}

.voucher-qr-card img {
  object-fit: contain;
}

.voucher-qr-placeholder {
  display: grid;
  align-items: center;
  color: var(--xh-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.voucher-qr-card p {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.support-message-list {
  display: grid;
  gap: 10px;
}

.support-message {
  display: grid;
  gap: 4px;
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgb(239 245 231 / 82%);
}

.support-message-support {
  justify-self: end;
  background: rgb(255 248 232 / 92%);
}

.support-message strong,
.support-message time,
.support-message p {
  margin: 0;
}

.support-message strong {
  color: var(--xh-text-primary);
  font-size: 13px;
}

.support-message p {
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.support-message time {
  color: var(--xh-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.support-form input,
.support-form textarea {
  width: 100%;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 12px;
  background: rgb(255 253 246 / 96%);
  color: var(--xh-text-primary);
  font: inherit;
  padding: 10px 12px;
}

.support-form textarea {
  min-height: 92px;
  resize: vertical;
}

.supplier-product-form {
  gap: 16px;
}

.supplier-product-section {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgb(232 217 185 / 62%);
}

.supplier-product-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.supplier-product-section-heading {
  display: grid;
  gap: 3px;
}

.supplier-product-section-heading h2,
.supplier-product-section-heading p {
  margin: 0;
}

.supplier-product-section-heading h2 {
  color: var(--xh-text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.supplier-product-section-heading p,
.supplier-product-field {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.supplier-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-product-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.supplier-product-field-wide {
  grid-column: 1 / -1;
}

.supplier-product-tag-editor {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.supplier-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.supplier-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgb(247 178 50 / 62%);
  border-radius: 999px;
  background: rgb(255 248 232 / 96%);
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.supplier-product-tag span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-product-tag span:last-child {
  color: var(--xh-accent-orange);
  font-size: 15px;
  line-height: 1;
}

.supplier-product-form .supplier-product-field input,
.supplier-product-form .supplier-product-field select,
.supplier-product-form .supplier-product-field textarea {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 12px;
  outline: 0;
  background: rgb(255 253 246 / 96%);
  color: var(--xh-text-primary);
  font: inherit;
  padding: 10px 12px;
}

.supplier-product-form .supplier-product-field textarea {
  min-height: 92px;
}

.supplier-product-form .supplier-product-field input:focus,
.supplier-product-form .supplier-product-field select:focus,
.supplier-product-form .supplier-product-field textarea:focus {
  border-color: rgb(247 178 50 / 80%);
  box-shadow: 0 0 0 3px rgb(247 178 50 / 16%);
}

.supplier-product-region-grid,
.supplier-product-sku-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.supplier-product-region-grid select,
.supplier-product-sku-grid input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 12px;
  outline: 0;
  background: rgb(255 253 246 / 96%);
  color: var(--xh-text-primary);
  font: inherit;
  padding: 10px 12px;
}

.supplier-product-region-grid select:focus,
.supplier-product-sku-grid input:focus {
  border-color: rgb(247 178 50 / 80%);
  box-shadow: 0 0 0 3px rgb(247 178 50 / 16%);
}

.supplier-product-media-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 12px;
  background: rgb(255 253 246 / 64%);
}

.supplier-product-media-group h3,
.supplier-product-media-group p {
  margin: 0;
}

.supplier-product-media-group h3 {
  color: var(--xh-text-primary);
  font-size: 14px;
  font-weight: 800;
}

.supplier-product-media-group p,
.supplier-product-media-control small,
.supplier-product-media-status {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.supplier-product-media-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.supplier-product-media-control {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.supplier-product-media-control > span:first-child {
  color: var(--xh-text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.supplier-product-media-control > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

.supplier-product-form .supplier-product-media-control button,
.supplier-product-form .supplier-product-secondary-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--xh-accent-leaf);
  border-radius: 12px;
  background: transparent;
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.supplier-product-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.supplier-product-media-previews {
  display: grid;
  gap: 8px;
}

.supplier-product-media-preview:empty {
  display: none;
}

.supplier-product-media-item {
  position: relative;
  width: 82px;
  height: 82px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--xh-border-soft);
  border-radius: 8px;
  background: var(--xh-surface-warm);
}

.supplier-product-media-item img,
.supplier-product-media-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.supplier-product-media-item button,
.supplier-product-icon-button {
  display: grid;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(79 50 27 / 80%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}

.supplier-product-media-item > .supplier-product-media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
}

.supplier-product-media-sortable {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.supplier-product-media-sortable:active,
.supplier-product-media-sortable.is-dragging {
  cursor: grabbing;
  opacity: 0.58;
}

.supplier-product-media-sortable.is-drop-target {
  border-color: var(--xh-accent-leaf);
  box-shadow: 0 0 0 3px rgb(145 170 107 / 22%);
}

.supplier-product-media-drag-handle {
  position: absolute;
  bottom: 5px;
  left: 5px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgb(79 50 27 / 84%);
}

.supplier-product-sku-list {
  display: grid;
  gap: 10px;
}

.supplier-product-sku-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 12px;
  background: rgb(255 253 246 / 64%);
}

.supplier-product-sku-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--xh-text-primary);
  font-size: 14px;
}

.supplier-product-sku-row-heading .supplier-product-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.supplier-product-sku-grid label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.supplier-product-draft-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.supplier-product-review-progress {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  border-left: 3px solid var(--xh-accent-leaf);
  padding: 10px 12px;
  background: var(--xh-surface-green);
  color: var(--xh-text-secondary);
}

.supplier-product-review-progress strong,
.supplier-product-review-progress span,
.supplier-product-review-progress p,
.supplier-product-review-progress small {
  margin: 0;
}

.supplier-product-review-progress strong {
  color: var(--xh-accent-leaf);
  font-size: 13px;
}

.supplier-product-review-progress span,
.supplier-product-review-progress p,
.supplier-product-review-progress small {
  font-size: 12px;
  line-height: 1.45;
}

.supplier-product-review-progress.is-rejected {
  border-left-color: var(--xh-accent-orange);
  background: var(--xh-surface-warm);
}

.supplier-product-review-progress.is-rejected strong,
.supplier-product-review-reason {
  color: var(--xh-accent-orange);
}

.supplier-product-draft-action {
  display: grid;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.supplier-product-draft-action--edit {
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
}

.supplier-product-draft-action--submit {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: #fffdf6;
}

.supplier-product-draft-action--edit:hover,
.supplier-product-draft-action--edit:focus-visible {
  background: var(--xh-accent-leaf-soft);
  color: #fffdf6;
}

.supplier-product-draft-action--submit:hover,
.supplier-product-draft-action--submit:focus-visible {
  filter: brightness(0.92);
}

.support-form button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: var(--xh-accent-leaf);
  color: white;
  font-size: 14px;
  font-weight: 900;
}

button.content-card-action {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--xh-accent-leaf);
  font: inherit;
  text-align: left;
}

.route-fixed-action button {
  display: grid;
  min-width: 64px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--xh-accent-leaf);
  color: white;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

button[data-supplier-withdraw],
button[data-city-partner-withdraw]:not(.primary-action-button),
button[data-order-confirm-receipt],
button[data-supplier-product-submit]:not([class]) {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--xh-accent-leaf);
  color: #fffdf6;
  font: inherit;
  font-weight: 800;
}

button[data-gift-cancel],
button[data-cart-selected-toggle],
button[data-cart-delete],
button[data-address-delete] {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

form[data-supplier-ship-form] button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--xh-accent-leaf);
  color: #fffdf6;
  font: inherit;
  font-weight: 800;
}

button[data-gift-cancel],
button[data-cart-delete],
button[data-address-delete] {
  color: var(--xh-accent-orange);
}

.primary-action-button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--xh-accent-leaf);
  color: #fffdf6;
  font: inherit;
  font-weight: 800;
}

.support-form-status {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.route-card-block h3,
.route-product-row h3 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;
}

.route-chip {
  color: var(--xh-accent-orange);
  font-weight: 800;
}

.order-confirm-address {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
}

.order-confirm-address h2,
.address-list-header h1,
.address-list-item h2,
.address-list-detail {
  margin: 0;
  color: var(--xh-text-primary);
  font-weight: 800;
}

.order-confirm-address h2 {
  font-size: 18px;
}

.order-confirm-address-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--xh-text-muted);
  font-size: 16px;
  font-weight: 700;
}

.order-confirm-address-link > span:last-child {
  color: var(--xh-accent-leaf);
  font-size: 25px;
  line-height: 1;
}

.address-list-page {
  display: grid;
  gap: 12px;
}

.address-list-header {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.address-list-header h1 {
  font-size: 25px;
  line-height: 1.18;
}

.address-list-add {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--xh-accent-orange);
  font-size: 16px;
  font-weight: 800;
}

.address-list-items {
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
}

.address-list-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px 96px 18px 18px;
}

.address-list-item + .address-list-item {
  border-top: 1px solid rgb(232 217 185 / 72%);
}

.address-list-detail {
  color: var(--xh-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.address-list-item h2 {
  font-size: 18px;
  line-height: 1.42;
}

.address-list-badge {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgb(247 178 50 / 14%);
  color: var(--xh-accent-orange);
  font-size: 12px;
  font-weight: 800;
}

.address-list-actions {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  gap: 6px;
  transform: translateY(-50%);
}

.address-list-edit,
.address-list-actions .address-list-delete {
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--xh-surface-green);
  place-items: center;
}

.address-list-edit {
  color: var(--xh-accent-leaf);
}

.address-list-actions .address-list-delete {
  color: var(--xh-accent-orange);
}

.address-list-edit svg,
.address-list-actions .address-list-delete svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.address-list-actions .address-list-delete:disabled {
  opacity: 0.55;
}

.address-list-select {
  display: grid;
  width: 100%;
  gap: 8px;
  padding: 0 44px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.address-list-select:focus-visible {
  outline: 2px solid var(--xh-accent-leaf);
  outline-offset: 4px;
}

.address-region-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.address-region-field select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 12px;
  outline: 0;
  background: rgb(255 253 246 / 96%);
  color: var(--xh-text-primary);
  font: inherit;
  padding: 10px 8px;
}

.address-region-field select:focus {
  border-color: rgb(247 178 50 / 80%);
  box-shadow: 0 0 0 3px rgb(247 178 50 / 16%);
}

.address-default-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--xh-text-primary);
  font-weight: 800;
}

.address-default-field input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--xh-accent-leaf);
}

.route-list-block {
  display: grid;
  gap: 10px;
}

.route-product-row {
  display: grid;
  align-items: center;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 10px;
  color: inherit;
  transition:
    opacity 140ms var(--xh-ease),
    transform 140ms var(--xh-ease);
}

.route-product-row strong {
  display: block;
  margin-top: 6px;
  color: var(--xh-accent-orange);
  font-size: 17px;
  line-height: 1;
}

.product-main-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 74px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 15px;
  object-fit: cover;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 88%), transparent 28%),
    radial-gradient(circle at 66% 62%, rgb(94 123 77 / 20%), transparent 34%),
    linear-gradient(145deg, rgb(255 248 232 / 96%), rgb(247 178 50 / 28));
}

.product-thumb-image {
  width: 74px;
  height: 74px;
  min-height: 74px;
}

.product-source-link {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  color: var(--xh-accent-leaf);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.load-more-sentinel {
  min-height: 40px;
  border: 1px solid rgb(145 170 107 / 34%);
  border-radius: 999px;
  background: rgb(239 245 231 / 82%);
  color: var(--xh-accent-leaf);
  font-size: 13px;
  font-weight: 900;
}

.load-more-sentinel[hidden],
.js-paged-product[hidden] {
  display: none;
}

.route-product-art,
.route-video-block {
  position: relative;
  min-height: 74px;
  overflow: hidden;
  border-radius: 15px;
}

.route-product-art::after,
.route-video-block::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 28px;
  border-radius: 999px;
  background: rgb(255 253 246 / 80%);
  box-shadow: 0 10px 18px rgb(79 50 27 / 16%);
  content: "";
}

.route-product-art-gold,
.route-detail-gold .product-main-square {
  background: linear-gradient(135deg, #fff2b8, var(--xh-accent-flower) 55%, var(--xh-accent-orange));
}

.route-product-art-green {
  background: linear-gradient(135deg, #e7f3cf, var(--xh-accent-leaf-soft) 50%, var(--xh-accent-leaf));
}

.route-product-art-orange {
  background: linear-gradient(135deg, #ffe1b8, var(--xh-accent-orange-bright), var(--xh-gift-brown));
}

.route-filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.route-filter-row button,
.route-filter-row a {
  display: inline-grid;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.route-filter-row a[aria-current="true"],
.route-category-layout a[aria-current="true"] {
  border-color: rgb(199 82 27 / 28%);
  background: rgb(255 242 184 / 88%);
  color: var(--xh-accent-orange);
}

.order-list-page,
.order-list-cards {
  display: grid;
  gap: 12px;
}

.order-list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}

.order-list-heading p,
.order-list-heading h1,
.order-list-heading span {
  margin: 0;
}

.order-list-heading p {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.order-list-heading h1 {
  color: var(--xh-text-primary);
  font-size: 24px;
  line-height: 1.2;
}

.order-list-heading span {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.order-list-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
}

.order-list-filters a {
  display: grid;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  background: rgb(255 253 246 / 78%);
  color: var(--xh-text-secondary);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.order-list-filters a[aria-current="true"] {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: #fffdf6;
}

.order-list-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-card);
}

.order-list-supplier {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.order-list-supplier span {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.order-list-supplier strong {
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-list-supplier a {
  color: var(--xh-text-muted);
  font-size: 22px;
  line-height: 1;
}

.order-list-supplier em {
  color: var(--xh-accent-orange);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.order-list-product {
  display: grid;
  min-width: 0;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.order-list-product > img,
.order-list-product-placeholder {
  display: block;
  width: 82px;
  height: 82px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(145deg, rgb(255 248 232 / 96%), rgb(239 245 231 / 86%));
}

.order-list-product-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.order-list-product-copy h2,
.order-list-product-copy p {
  margin: 0;
}

.order-list-product-copy h2 {
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-list-product-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--xh-text-muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.order-list-price {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.2;
}

.order-list-price strong {
  color: var(--xh-text-primary);
  font-size: 14px;
}

.order-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.order-list-tags span {
  padding: 2px 5px;
  border: 1px solid rgb(199 82 27 / 38%);
  border-radius: 6px;
  color: var(--xh-accent-orange);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.order-list-logistics {
  margin: 0;
  padding: 9px 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--xh-surface-green);
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-list-footer {
  display: grid;
  gap: 10px;
  justify-items: end;
  padding-top: 2px;
  border-top: 1px solid rgb(232 217 185 / 56%);
}

.order-list-footer > span {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.order-list-footer > span strong {
  color: var(--xh-text-primary);
  font-size: 17px;
}

.order-list-footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.order-list-action {
  display: grid;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgb(232 217 185 / 90%);
  border-radius: 999px;
  background: var(--xh-surface-card);
  color: var(--xh-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.order-list-action-primary {
  border-color: var(--xh-accent-orange);
  color: var(--xh-accent-orange);
}

.order-list-action:disabled {
  opacity: 0.55;
}

.supplier-order-page,
.supplier-order-cards {
  display: grid;
  gap: 12px;
}

.supplier-order-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}

.supplier-order-heading p,
.supplier-order-heading h1,
.supplier-order-heading span {
  margin: 0;
}

.supplier-order-heading p {
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.supplier-order-heading h1 {
  color: var(--xh-text-primary);
  font-size: 24px;
  line-height: 1.2;
}

.supplier-order-heading > span {
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.supplier-order-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: none;
}

.supplier-order-filters a {
  display: grid;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  background: rgb(255 253 246 / 78%);
  color: var(--xh-text-secondary);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.supplier-order-filters a[aria-current="true"] {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: var(--xh-surface-card);
}

.supplier-order-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-card);
}

.supplier-order-card > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
}

.supplier-order-card > header > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.supplier-order-card > header span,
.supplier-order-card > header time {
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.supplier-order-card > header strong {
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-order-card > header em {
  color: var(--xh-text-secondary);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.supplier-order-card > header time {
  grid-column: 1 / -1;
}

.supplier-order-products {
  display: grid;
  gap: 10px;
}

.supplier-order-product {
  display: grid;
  min-width: 0;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.supplier-order-product > img,
.supplier-order-product-placeholder {
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 12px;
  background: var(--xh-surface-green);
  object-fit: cover;
}

.supplier-order-product > div,
.supplier-order-product > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.supplier-order-product h2,
.supplier-order-product p {
  margin: 0;
}

.supplier-order-product h2 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 14px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.supplier-order-product p,
.supplier-order-product small {
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.supplier-order-product > span {
  justify-items: end;
  color: var(--xh-text-primary);
}

.supplier-order-product > span strong {
  font-size: 14px;
}

.supplier-order-receiver {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--xh-surface-green);
}

.supplier-order-receiver > span,
.supplier-order-receiver strong,
.supplier-order-receiver p {
  margin: 0;
}

.supplier-order-receiver > span,
.supplier-order-receiver p {
  color: var(--xh-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.supplier-order-receiver > span {
  font-weight: 800;
}

.supplier-order-receiver > div {
  display: grid;
  gap: 4px;
}

.supplier-order-receiver strong {
  color: var(--xh-text-secondary);
  font-size: 13px;
}

.supplier-order-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
  border-top: 1px solid rgb(232 217 185 / 56%);
}

.supplier-order-card > footer > span {
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.supplier-order-card > footer strong {
  color: var(--xh-text-primary);
  font-size: 16px;
}

.supplier-order-ship-button,
.supplier-order-shipment-form button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--xh-accent-leaf);
  color: var(--xh-surface-card);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
}

.supplier-order-ship-button {
  min-width: 72px;
}

.supplier-order-shipment-form {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.supplier-order-shipment-form[hidden] {
  display: none;
}

.supplier-order-shipment-form label {
  display: grid;
  gap: 6px;
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.supplier-order-shipment-field {
  display: grid;
  gap: 6px;
}

.supplier-order-shipment-field > label {
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.supplier-order-tracking-field {
  position: relative;
  display: block;
}

.supplier-order-shipment-form input:not([type="hidden"]) {
  min-width: 0;
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgb(232 217 185 / 90%);
  border-radius: 10px;
  background: var(--xh-surface-card);
  color: var(--xh-text-primary);
  font: inherit;
}

.supplier-order-tracking-field input {
  padding-right: 52px;
}

.supplier-order-shipment-form .supplier-order-scan-button {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  width: 40px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
}

.supplier-order-scan-button svg,
.supplier-order-scan-panel header button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.supplier-order-scan-dialog {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(79 50 27 / 45%);
}

.supplier-order-scan-dialog[hidden] {
  display: none;
}

.supplier-order-scan-panel {
  display: grid;
  width: min(100%, 340px);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgb(232 217 185 / 92%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-card);
}

.supplier-order-scan-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.supplier-order-scan-panel h2,
.supplier-order-scan-panel p {
  margin: 0;
}

.supplier-order-scan-panel h2 {
  color: var(--xh-text-primary);
  font-size: 17px;
}

.supplier-order-shipment-form .supplier-order-scan-panel header button {
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
}

.supplier-order-scan-camera {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--xh-text-primary);
}

.supplier-order-scan-camera video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.supplier-order-scan-panel p {
  min-height: 20px;
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.supplier-order-shipment-form .supplier-order-scan-cancel {
  width: auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgb(232 217 185 / 90%);
  border-radius: 10px;
  background: var(--xh-surface-card);
  color: var(--xh-text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.content-filter-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.content-registration-link,
.content-article-category-scroll a {
  display: inline-grid;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.content-registration-link {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: #fff;
}

.content-article-category-scroll {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.content-article-category-scroll a {
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
}

.content-article-category-scroll a[aria-current="true"] {
  border-color: rgb(199 82 27 / 28%);
  background: rgb(255 242 184 / 88%);
  color: var(--xh-accent-orange);
}

.category-catalog-page {
  display: grid;
  gap: 12px;
}

.category-catalog-page > h1 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 22px;
  line-height: 1.3;
}

.category-catalog-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.category-catalog-menu {
  position: static;
}

.category-catalog-menu summary,
.category-catalog-toolbar > a {
  display: grid;
  min-height: 38px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 8px;
  background: rgb(255 253 246 / 88%);
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.category-catalog-menu summary {
  list-style: none;
  cursor: pointer;
}

.category-catalog-menu summary::-webkit-details-marker {
  display: none;
}

.category-catalog-toolbar > a[aria-current="true"],
.category-catalog-menu[open] summary {
  border-color: rgb(199 82 27 / 28%);
  background: rgb(255 242 184 / 88%);
  color: var(--xh-accent-orange);
}

.category-catalog-menu-panel {
  position: absolute;
  z-index: 5;
  top: 46px;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(300px, 86vw);
  max-height: 300px;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgb(232 217 185 / 84%);
  border-radius: 8px;
  background: rgb(255 253 246 / 98%);
  box-shadow: var(--xh-shadow-card);
}

.category-catalog-menu-panel a {
  display: grid;
  min-height: 36px;
  align-items: center;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.category-catalog-menu-panel a[aria-current="true"] {
  background: rgb(255 242 184 / 88%);
  color: var(--xh-accent-orange);
}

.route-category-layout {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: visible;
  padding: 10px;
}

.category-filter-control {
  position: relative;
  display: grid;
  align-items: start;
  grid-template-columns: 42px 1fr;
  gap: 10px;
}

.category-menu-toggle {
  z-index: 2;
  display: grid;
  width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgb(145 170 107 / 38%);
  border-radius: 16px;
  background: rgb(239 245 231 / 94%);
  color: var(--xh-accent-leaf);
  box-shadow: var(--xh-shadow-soft);
}

.category-menu-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}

.category-menu-icon::before,
.category-menu-icon::after {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  content: "";
}

.category-menu-icon::before {
  background:
    linear-gradient(var(--xh-accent-leaf), var(--xh-accent-leaf)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--xh-accent-leaf), var(--xh-accent-leaf)) 11px 0 / 7px 7px no-repeat,
    linear-gradient(var(--xh-accent-leaf), var(--xh-accent-leaf)) 0 11px / 7px 7px no-repeat,
    linear-gradient(var(--xh-accent-leaf), var(--xh-accent-leaf)) 11px 11px / 7px 7px no-repeat;
}

.category-menu-icon::after {
  opacity: 0.36;
  box-shadow: inset 0 0 0 2px var(--xh-accent-flower);
}

.category-filter-main {
  min-width: 0;
}

.category-chip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.category-chip-row a,
.category-chip-row span {
  display: grid;
  min-height: 42px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgb(232 217 185 / 76%);
  border-radius: 14px;
  background: rgb(239 245 231 / 78%);
  color: var(--xh-accent-leaf);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.category-menu-panel {
  position: absolute;
  z-index: 4;
  top: 58px;
  right: 0;
  left: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgb(232 217 185 / 84%);
  border-radius: 18px;
  background: rgb(255 253 246 / 96%);
  box-shadow: 0 18px 40px rgb(79 50 27 / 16%);
  transform-origin: top center;
  transition:
    opacity 180ms var(--xh-ease),
    transform 220ms var(--xh-ease);
}

.category-menu-panel[hidden] {
  display: none;
}

.category-menu-grid,
.route-action-grid,
.route-steps,
.route-stats {
  display: grid;
  gap: 8px;
}

.category-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-menu-grid a,
.route-action-grid a,
.route-action-grid button {
  display: grid;
  min-height: 42px;
  align-items: center;
  border: 0;
  border-radius: 13px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.crmeb-category-page {
  display: grid;
  height: min(720px, calc(100dvh - 176px));
  min-height: 520px;
  gap: 10px;
}

.crmeb-category-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.crmeb-category-search {
  display: grid;
  min-height: 48px;
  align-items: center;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgb(232 217 185 / 80%);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--xh-shadow-soft);
}

.crmeb-category-search-icon {
  position: relative;
  width: 18px;
  height: 18px;
  color: #555;
}

.crmeb-category-search-icon::before {
  position: absolute;
  inset: 1px 4px 4px 1px;
  border: 2px solid currentcolor;
  border-radius: 999px;
  content: "";
}

.crmeb-category-search-icon::after {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentcolor;
  content: "";
  transform: rotate(45deg);
  transform-origin: center;
}

.crmeb-category-search input {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font-size: 14px;
  font-weight: 700;
}

.crmeb-category-search input::placeholder {
  color: #999;
}

.crmeb-category-shell {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--xh-shadow-card);
}

.crmeb-category-aside {
  width: 92px;
  flex: 0 0 92px;
  overflow-y: auto;
  background: #f7f7f7;
}

.crmeb-category-aside a {
  display: grid;
  min-height: 50px;
  align-items: center;
  padding: 0 8px;
  border-left: 3px solid transparent;
  color: #424242;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transition:
    background 180ms var(--xh-ease),
    color 180ms var(--xh-ease);
}

.crmeb-category-aside a[aria-current="true"] {
  border-left-color: var(--xh-accent-orange);
  background: #fff;
  color: var(--xh-accent-orange);
  font-weight: 900;
}

.crmeb-category-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0 8px 88px;
  background: #fff;
}

.crmeb-category-section {
  padding-top: 10px;
}

.crmeb-category-section-title {
  display: grid;
  min-height: 45px;
  align-items: center;
  grid-template-columns: minmax(22px, 1fr) auto minmax(22px, 1fr);
  gap: 12px;
  color: #333;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.crmeb-category-section-title span {
  height: 1px;
  background: #f0f0f0;
}

.crmeb-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 14px;
  padding-bottom: 10px;
}

.crmeb-category-tile {
  display: grid;
  min-height: 104px;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 6px 2px;
  border-radius: 14px;
  color: #333;
  text-align: center;
}

.crmeb-category-tile:focus-visible,
.crmeb-category-search input:focus-visible {
  outline: 2px solid rgb(199 82 27 / 58%);
  outline-offset: 2px;
}

.crmeb-category-picture {
  display: grid;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(239 245 231 / 86%);
  place-items: center;
}

.crmeb-category-picture img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.crmeb-category-picture-fallback {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 44% 34%, rgb(255 255 255 / 72%) 0 16%, transparent 17%),
    linear-gradient(135deg, var(--xh-accent-flower-soft), var(--xh-accent-leaf-soft));
}

.crmeb-category-tile-name {
  display: -webkit-box;
  width: 68px;
  overflow: hidden;
  color: #333;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.route-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-action-grid a {
  display: grid;
  min-height: 64px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgb(232 217 185 / 70%);
  border-radius: 16px;
  background: rgb(239 245 231 / 72%);
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
}

.route-steps {
  margin: 0;
  padding: 14px 14px 14px 36px;
  border: 1px solid rgb(145 170 107 / 28%);
  border-radius: 18px;
  background: rgb(239 245 231 / 72%);
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.route-video-block {
  min-height: 160px;
}

.product-media-layout {
  position: relative;
  padding: 12px;
  background:
    radial-gradient(circle at 88% 18%, rgb(247 178 50 / 18%), transparent 32%),
    rgb(255 253 246 / 88%);
}

.product-main-square {
  position: relative;
  width: calc(100% - 70px);
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 88%), transparent 28%),
    radial-gradient(circle at 66% 62%, rgb(94 123 77 / 22%), transparent 34%),
    linear-gradient(145deg, rgb(255 248 232 / 96%), rgb(247 178 50 / 28));
}

.product-main-square .product-main-image {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.product-thumb-rail {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 54px;
  gap: 8px;
  align-content: start;
}

.product-thumb-button {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 86%), transparent 28%),
    linear-gradient(145deg, rgb(255 248 232 / 96%), rgb(145 170 107 / 22%));
}

.product-thumb-button.is-active {
  border-color: var(--xh-accent-leaf);
  box-shadow: 0 0 0 2px rgb(145 170 107 / 18%);
}

.product-thumb-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-spec-table {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 18px;
  background: rgb(255 253 246 / 86%);
  box-shadow: var(--xh-shadow-card);
}

.product-spec-table div {
  display: grid;
  grid-template-columns: 84px 1fr;
  min-height: 40px;
  border-bottom: 1px solid rgb(232 217 185 / 58%);
}

.product-spec-table div:last-child {
  border-bottom: 0;
}

.product-spec-table dt,
.product-spec-table dd {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
}

.product-spec-table dt {
  color: var(--xh-text-muted);
  font-weight: 900;
}

.product-spec-table dd {
  color: var(--xh-text-secondary);
  font-weight: 700;
}

.product-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 14px 14px 32px;
  border: 1px solid rgb(145 170 107 / 28%);
  border-radius: 18px;
  background: rgb(239 245 231 / 72%);
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.product-detail-image-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.product-detail-image-list img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 8px;
  background: rgb(255 253 246 / 86%);
}

.product-qualification {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgb(145 170 107 / 34%);
  border-radius: 18px;
  background: rgb(239 245 231 / 72%);
}

.product-qualification-heading h2 {
  margin: 4px 0 0;
  color: var(--xh-text-primary);
  font-size: 18px;
}

.product-qualification-meta {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 12px;
  background: rgb(255 253 246 / 82%);
}

.product-qualification-meta div {
  display: grid;
  grid-template-columns: 84px 1fr;
  border-bottom: 1px solid rgb(232 217 185 / 58%);
}

.product-qualification-meta div:last-child { border-bottom: 0; }
.product-qualification-meta dt,
.product-qualification-meta dd { margin: 0; padding: 9px 10px; font-size: 12px; line-height: 1.45; }
.product-qualification-meta dt { color: var(--xh-text-muted); font-weight: 900; }
.product-qualification-meta dd { color: var(--xh-text-secondary); font-weight: 700; }

.product-qualification-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.product-qualification-images img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 10px;
  background: rgb(255 253 246 / 86%);
}

.product-reviews {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgb(232 217 185 / 82%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-soft);
}

.product-reviews-heading,
.product-review-item > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-reviews-heading h2 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 18px;
}

.product-reviews-heading strong {
  color: var(--xh-accent-leaf);
  font-size: 13px;
}

.product-review-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.product-review-tags span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--xh-surface-warm);
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.product-review-list {
  display: grid;
  gap: 16px;
}

.product-review-item {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgb(232 217 185 / 62%);
}

.product-review-item > header > div {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.product-review-avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font-size: 14px;
  font-weight: 900;
  place-items: center;
}

.product-review-item header strong {
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-review-item time,
.product-review-spec {
  color: var(--xh-text-muted);
  font-size: 11px;
}

.product-review-stars {
  color: var(--xh-accent-flower);
  font-size: 12px;
}

.product-review-content,
.product-review-spec,
.product-review-empty {
  margin: 0;
  line-height: 1.55;
}

.product-review-content {
  color: var(--xh-text-primary);
  font-size: 14px;
}

.product-review-empty {
  color: var(--xh-text-muted);
  font-size: 13px;
}

.product-review-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.product-review-media img,
.product-review-media video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--xh-surface-warm);
  object-fit: cover;
}

.review-create-page,
.review-form {
  display: grid;
  gap: 12px;
}

.review-create-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 2px 4px;
}

.review-create-heading h1 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 22px;
}

.review-create-heading span,
.review-media-hint {
  color: var(--xh-text-muted);
  font-size: 12px;
}

.review-product-summary,
.review-rating,
.review-content-field,
.review-public-toggle {
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-soft);
}

.review-product-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
}

.review-product-summary img,
.review-product-placeholder {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--xh-surface-warm);
  object-fit: cover;
}

.review-product-summary div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.review-product-summary strong {
  overflow: hidden;
  color: var(--xh-text-primary);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-product-summary span,
.review-public-toggle small {
  color: var(--xh-text-muted);
  font-size: 12px;
}

.review-rating {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px;
}

.review-rating legend {
  float: left;
  width: 88px;
  padding: 0;
  color: var(--xh-text-primary);
  font-size: 14px;
  font-weight: 800;
}

.review-rating > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.review-rating label {
  position: relative;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  color: var(--xh-border-soft);
  cursor: pointer;
  font-size: 29px;
  place-items: center;
}

.review-rating input {
  position: absolute;
  opacity: 0;
}

.review-rating label:has(input:checked),
.review-rating label:has(input:checked) ~ label {
  color: var(--xh-border-soft);
}

.review-rating > div:has(input[value='1']:checked) label:nth-child(-n+1),
.review-rating > div:has(input[value='2']:checked) label:nth-child(-n+2),
.review-rating > div:has(input[value='3']:checked) label:nth-child(-n+3),
.review-rating > div:has(input[value='4']:checked) label:nth-child(-n+4),
.review-rating > div:has(input[value='5']:checked) label:nth-child(-n+5) {
  color: var(--xh-accent-flower);
}

.review-content-field {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.review-content-field > span {
  color: var(--xh-text-primary);
  font-size: 14px;
  font-weight: 800;
}

.review-content-field textarea {
  min-height: 148px;
  padding: 0;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--xh-text-primary);
  font: inherit;
  line-height: 1.6;
}

.review-media-picker {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  border: 1px dashed var(--xh-border-soft);
  border-radius: 8px;
  background: var(--xh-surface-card);
  color: var(--xh-text-secondary);
  cursor: pointer;
  font-size: 11px;
  place-content: center;
  place-items: center;
}

.review-media-picker > span {
  color: var(--xh-accent-leaf);
  font-size: 25px;
  line-height: 1;
}

.review-media-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.review-public-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.review-public-toggle > span {
  display: grid;
  gap: 3px;
}

.review-public-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--xh-accent-leaf);
}

.review-submit-bar {
  padding-top: 4px;
}

.review-submit-bar button,
.review-return-link {
  display: grid;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--xh-accent-leaf);
  color: white;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  place-items: center;
}

.review-submit-bar button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.category-product-feed {
  display: grid;
  gap: 10px;
}

.content-feed {
  display: grid;
  gap: 10px;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.content-feed-list {
  display: grid;
  gap: 10px;
}

.activity-carousel {
  position: relative;
  overflow: hidden;
  min-height: 284px;
  border: 1px solid rgb(232 217 185 / 82%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 18%, rgb(247 178 50 / 20%), transparent 35%),
    rgb(255 253 246 / 92%);
  box-shadow: var(--xh-shadow-hero);
}

.activity-carousel-track {
  display: flex;
  height: 100%;
  min-height: 284px;
  transform: translateX(calc(var(--activity-carousel-index, 0) * -100%));
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.activity-carousel-slide {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 284px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.activity-carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-carousel-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(255 253 246 / 94%) 0%, rgb(255 253 246 / 78%) 44%, rgb(255 253 246 / 16%) 100%),
    linear-gradient(180deg, rgb(79 50 27 / 4%), rgb(79 50 27 / 18%));
}

.activity-carousel-copy {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 78%;
  gap: 10px;
  padding: 30px 24px 28px;
}

.activity-carousel-copy small {
  color: var(--xh-accent-orange);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.activity-carousel-copy strong {
  color: var(--xh-text-primary);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
}

.activity-carousel-copy em {
  color: var(--xh-text-secondary);
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.52;
}

.activity-carousel-copy b {
  color: var(--xh-accent-leaf);
  font-size: 16px;
  line-height: 1.35;
}

.activity-carousel-dots {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.activity-carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(123 91 51 / 30%);
}

.activity-carousel-dots button.is-active {
  width: 20px;
  background: var(--xh-accent-leaf);
}

.content-feed-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
  color: inherit;
  text-decoration: none;
}

.activity-list-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 90%);
  box-shadow: var(--xh-shadow-card);
  color: inherit;
  text-decoration: none;
}

.activity-list-card h3 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.activity-list-card p,
.activity-list-card strong {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.activity-list-card p {
  color: var(--xh-text-secondary);
}

.activity-list-card strong {
  color: var(--xh-accent-orange);
}

.content-feed-card-video {
  background:
    radial-gradient(circle at 88% 18%, rgb(199 82 27 / 18%), transparent 32%),
    rgb(255 253 246 / 90%);
}

.content-feed-card h3 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.content-feed-card p {
  margin: 0;
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-card-action,
.content-type-pill {
  width: fit-content;
  color: var(--xh-accent-leaf);
  font-size: 12px;
  font-weight: 900;
}

.content-card-action {
  min-height: 24px;
  color: var(--xh-accent-leaf);
}

.content-type-pill {
  color: var(--xh-accent-orange);
}

.content-detail-article {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 76%);
  border-radius: 20px;
  background: rgb(255 253 246 / 90%);
  box-shadow: var(--xh-shadow-card);
}

.content-detail-image,
.content-video-player {
  display: block;
  width: 100%;
  border-radius: 16px;
  background: var(--xh-surface-green);
  object-fit: cover;
}

.content-detail-image {
  aspect-ratio: 16 / 10;
}

.content-video-player {
  aspect-ratio: 16 / 9;
}

.content-paragraphs {
  display: grid;
  min-width: 0;
  gap: 10px;
  overflow-wrap: anywhere;
}

.content-paragraphs > *,
.content-paragraphs section,
.content-paragraphs div,
.content-paragraphs p,
.content-paragraphs ul,
.content-paragraphs ol,
.content-paragraphs blockquote,
.content-paragraphs figure {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100% !important;
}

.content-paragraphs [style*="width"] {
  width: auto !important;
}

/* ponytail: retain rich text while keeping its widest children inside the article card. */
.content-paragraphs img,
.content-paragraphs video {
  display: block;
  max-width: 100%;
  height: auto;
}

.content-paragraphs iframe {
  display: block;
  max-width: 100%;
}

.content-paragraphs table,
.content-paragraphs pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.content-paragraphs p,
.content-source-note {
  margin: 0;
  color: var(--xh-text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.content-source-note {
  padding-top: 10px;
  border-top: 1px dashed rgb(232 217 185 / 82%);
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.activity-rule-panel,
.registration-gate,
.registration-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 76%);
  border-radius: 20px;
  background: rgb(255 253 246 / 90%);
  box-shadow: var(--xh-shadow-card);
}

.activity-rule-panel h2,
.activity-rule-panel h3,
.registration-gate h2,
.registration-form h2 {
  margin: 0;
  color: var(--xh-text-primary);
}

.activity-rule-panel p,
.registration-gate p {
  margin: 0;
  color: var(--xh-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.activity-product-groups {
  display: grid;
  gap: 10px;
}

.activity-product-groups article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: var(--xh-surface-warm);
}

.activity-product-groups strong,
.activity-refund-note {
  color: var(--xh-accent-orange);
}

.registration-form label {
  display: grid;
  gap: 6px;
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
}

.registration-form input,
.registration-form select {
  min-height: 44px;
  border: 1px solid var(--xh-border-soft);
  border-radius: 12px;
  background: var(--xh-surface-warm);
  color: var(--xh-text-primary);
  padding: 0 12px;
  font: inherit;
}

.registration-form small {
  color: var(--xh-text-muted);
}

.registration-form button,
.supplier-application-form button,
.logout-button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: var(--xh-accent-leaf);
  color: #fffdf6;
  font: inherit;
  font-weight: 800;
}

.logout-button {
  width: 100%;
  background: var(--xh-accent-orange);
}

.route-video-block {
  background:
    radial-gradient(circle at 44% 40%, rgb(255 253 246 / 42%), transparent 24%),
    linear-gradient(135deg, var(--xh-gift-brown), var(--xh-accent-orange-bright));
}

.route-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 13px 8px;
  background: var(--xh-surface-green);
}

.supplier-finance-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-stats article {
  display: grid;
  gap: 4px;
  text-align: center;
}

.route-stat-link {
  display: grid;
  gap: 4px;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.route-stat-link:focus-visible {
  outline: 2px solid var(--xh-accent-orange);
  outline-offset: 3px;
}

.message-list,
.message-section {
  display: grid;
  gap: 10px;
}

.message-actions,
.message-item-actions {
  display: grid;
  gap: 8px;
}

.message-action-button {
  display: grid;
  min-height: 42px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgb(232 217 185 / 70%);
  border-radius: 13px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.message-action-button:hover,
.message-action-button:focus-visible {
  background: var(--xh-accent-leaf-soft);
  color: #fffdf6;
}

.message-invite-detail {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(145 170 107 / 28%);
  border-radius: 13px;
  background: rgb(239 245 231 / 72%);
}

.message-invite-detail[hidden] {
  display: none;
}

.message-invite-detail p {
  margin: 0;
}

.message-section h2 {
  margin: 10px 0 0;
  color: var(--xh-text);
  font-size: 16px;
}

.message-item time {
  color: var(--xh-text-muted);
  font-size: 12px;
}

.route-stats strong {
  color: var(--xh-accent-leaf);
  font-size: 19px;
  font-weight: 800;
}

.route-stats span {
  color: var(--xh-text-muted);
  font-size: 11px;
  font-weight: 800;
}

.supplier-status-card,
.supplier-application-form,
.supplier-application-summary {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.supplier-status-card {
  background: var(--xh-surface-green);
}

.supplier-status-card p,
.supplier-status-card span,
.supplier-status-card strong {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.supplier-status-card h2,
.supplier-application-form h2,
.supplier-application-summary h2 {
  margin: 0;
  color: var(--xh-text-primary);
}

.supplier-application-form label {
  display: grid;
  gap: 6px;
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
}

.supplier-application-form .agreement-confirmation {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 8px;
}

.supplier-application-form .agreement-confirmation input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--xh-accent-leaf);
}

.supplier-application-form input,
.supplier-application-form select,
.supplier-application-form textarea {
  min-height: 44px;
  border: 1px solid var(--xh-border-soft);
  border-radius: 12px;
  background: var(--xh-surface-warm);
  color: var(--xh-text-primary);
  padding: 10px 12px;
  font: inherit;
}

.supplier-application-form textarea {
  resize: vertical;
}

.supplier-application-form small {
  color: var(--xh-text-muted);
  font-size: 12px;
}

.qualification-image-upload {
  display: grid;
  gap: 8px;
}

.supplier-application-form .qualification-image-upload > input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.qualification-image-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.supplier-application-form .qualification-image-upload-button {
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--xh-accent-leaf);
  border-radius: 10px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font-size: 13px;
}

.qualification-image-upload-status {
  min-width: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.qualification-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qualification-image-preview:empty {
  display: none;
}

.qualification-image-preview img {
  width: 72px;
  height: 72px;
  border: 1px solid var(--xh-border-soft);
  border-radius: 8px;
  object-fit: cover;
}

.supplier-application-form .qualification-image-urls[hidden] {
  display: none;
}

.supplier-application-grid {
  display: grid;
  gap: 8px;
}

.supplier-application-readonly {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: var(--xh-surface-warm);
}

.supplier-application-readonly span {
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.supplier-application-readonly strong {
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.route-fixed-action {
  position: sticky;
  bottom: 94px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
}

.route-fixed-action strong {
  color: var(--xh-accent-orange);
}

.route-fixed-action a {
  display: grid;
  min-width: 92px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--xh-accent-leaf);
  color: white;
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.auth-panel,
.auth-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 18px;
  background: rgb(255 253 246 / 86%);
  box-shadow: var(--xh-shadow-card);
}

.auth-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 999px;
  background: rgb(255 253 246 / 72%);
  box-shadow: var(--xh-shadow-soft);
}

.auth-switcher a {
  display: grid;
  min-height: 36px;
  align-items: center;
  border-radius: 999px;
  color: var(--xh-text-muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.auth-switcher a[aria-current="page"] {
  background: var(--xh-accent-leaf);
  color: white;
}

.auth-wechat-button,
.auth-form button {
  min-height: 42px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(135deg, var(--xh-accent-leaf), var(--xh-accent-leaf-soft));
  color: #fffdf6;
  font-size: 14px;
  font-weight: 900;
}

.auth-provider-note,
.auth-form-status,
.auth-form a {
  margin: 0;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.auth-form-status[data-status="error"] {
  color: var(--xh-accent-orange);
}

.auth-form-status[data-status="success"] {
  color: var(--xh-accent-leaf);
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--xh-text-secondary);
  font-size: 12px;
  font-weight: 900;
}

.auth-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgb(232 217 185 / 92%);
  border-radius: 16px;
  outline: 0;
  background: rgb(255 248 232 / 88%);
  color: var(--xh-text-primary);
}

.auth-code-row {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 104px;
  gap: 8px;
}

.auth-code-row button {
  min-height: 42px;
  background: linear-gradient(135deg, var(--xh-accent-flower), var(--xh-accent-orange-bright));
}

.auth-agreement-card,
.auth-agreement-dialog-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px !important;
  color: var(--xh-text-secondary);
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.65;
}

.auth-agreement-card input,
.auth-agreement-dialog-check input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--xh-accent-leaf);
}

.auth-agreement-card strong,
.auth-agreement-dialog-check strong {
  color: var(--xh-accent-leaf);
}

.auth-agreement-document {
  white-space: nowrap;
}

.auth-agreement-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  padding: 20px;
  background: rgb(79 50 27 / 52%);
  place-items: center;
}

.auth-agreement-modal[hidden] {
  display: none;
}

.auth-agreement-dialog {
  display: grid;
  width: min(340px, 100%);
  gap: 20px;
  padding: 28px 24px 24px;
  border-radius: 20px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-hero);
}

.auth-agreement-dialog h2,
.auth-agreement-dialog p {
  margin: 0;
}

.auth-agreement-dialog h2 {
  color: var(--xh-text-primary);
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
}

.auth-agreement-dialog > p:not(.auth-agreement-dialog-status) {
  color: var(--xh-text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.auth-agreement-dialog > p .auth-agreement-document {
  font-weight: inherit;
}

.auth-agreement-dialog-check {
  min-height: 44px;
}

.auth-agreement-dialog-status:not(:empty) {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--xh-text-primary);
  color: var(--xh-surface-card);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.auth-agreement-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-agreement-dialog-actions .auth-agreement-dialog-cancel,
.auth-agreement-dialog-actions .auth-agreement-dialog-continue {
  min-width: 0;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 15px;
}

.auth-agreement-dialog-actions .auth-agreement-dialog-cancel {
  border: 1px solid var(--xh-accent-leaf);
  background: var(--xh-surface-card);
  color: var(--xh-accent-leaf);
}

.auth-agreement-dialog-actions .auth-agreement-dialog-continue {
  border: 1px solid var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: var(--xh-surface-card);
}

.change-password-form {
  gap: 16px;
}

.change-password-form input[readonly] {
  background: var(--xh-surface-green);
  color: var(--xh-text-secondary);
}

.password-rule {
  margin: -4px 2px 0;
  color: var(--xh-accent-leaf);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
}

.change-password-form button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.bottom-tabs {
  position: fixed;
  z-index: 20;
  bottom: 12px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  width: min(362px, calc(100vw - 28px));
  padding: 9px 9px calc(9px + env(safe-area-inset-bottom));
  border: 1px solid rgb(232 217 185 / 86%);
  border-radius: 24px;
  background: rgb(255 253 246 / 92%);
  box-shadow: 0 16px 36px rgb(79 50 27 / 14%);
  transform: translateX(-50%);
}

.bottom-tabs[hidden] {
  display: none;
}

.phone.has-product-detail-action {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.product-detail-action {
  position: fixed;
  z-index: 30;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 44px 44px 40px minmax(84px, 0.7fr);
  width: min(390px, calc(100vw - 16px));
  min-height: 64px;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: rgb(255 253 246 / 96%);
  box-shadow: 0 12px 30px rgb(79 50 27 / 18%);
  transform: translateX(-50%);
}

.product-detail-action :is(a, button) {
  display: grid;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgb(94 123 77 / 34%);
  border-radius: 12px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}

.product-detail-price-quantity {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--xh-text-primary);
}

.product-detail-price-quantity > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-quantity-control {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 20px 26px 20px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgb(94 123 77 / 34%);
  border-radius: 8px;
  background: var(--xh-surface-green);
}

.product-detail-action .product-detail-quantity-control button {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--xh-accent-leaf);
  font-size: 16px;
  line-height: 1;
}

.product-detail-quantity-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--xh-text-primary);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}

.product-detail-quantity-control input::-webkit-inner-spin-button,
.product-detail-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.product-detail-action .product-detail-cart {
  width: 44px;
  color: var(--xh-text-secondary);
}

.product-detail-cart svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.product-detail-action .product-detail-buy {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
  color: #fffdf6;
}

.product-sku-picker {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  align-items: end;
  background: rgb(27 32 24 / 42%);
}

.product-sku-picker[hidden] {
  display: none;
}

.product-sku-picker-panel {
  width: min(390px, 100vw);
  margin: 0 auto;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--xh-surface-card);
  box-shadow: 0 -12px 32px rgb(79 50 27 / 18%);
}

.product-sku-picker-header,
.product-sku-option,
.product-sku-confirm {
  display: flex;
  align-items: center;
}

.product-sku-picker-header {
  justify-content: space-between;
  margin-bottom: 14px;
}

.product-sku-picker-header h2 {
  margin: 0;
  color: var(--xh-text-primary);
  font-size: 18px;
}

.product-sku-picker-header button {
  border: 0;
  background: transparent;
  color: var(--xh-text-muted);
  font-size: 24px;
}

.product-sku-option-list {
  display: grid;
  gap: 8px;
  max-height: min(42vh, 320px);
  overflow: auto;
}

.product-sku-option {
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgb(94 123 77 / 24%);
  border-radius: 10px;
  background: var(--xh-surface-green);
  color: var(--xh-text-primary);
  text-align: left;
}

.product-sku-option.is-selected {
  border-color: var(--xh-accent-leaf);
  box-shadow: inset 0 0 0 1px var(--xh-accent-leaf);
}

.product-sku-option small {
  color: var(--xh-text-muted);
}

.product-sku-confirm {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--xh-accent-leaf);
  color: #fffdf6;
  font-weight: 800;
}

.tab-button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  padding: 5px 0;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
  place-items: center;
  transition:
    background-color 180ms var(--xh-ease),
    color 180ms var(--xh-ease),
    transform 140ms var(--xh-ease);
}

.tab-button.is-active {
  background: rgb(239 245 231 / 82%);
  color: var(--xh-accent-leaf);
}

.tab-button:focus-visible,
.price-row button:focus-visible,
.app-header-action:focus-visible,
.support-button:focus-visible,
.shortcut-grid a:focus-visible {
  outline: 3px solid rgb(247 178 50 / 46%);
  outline-offset: 3px;
}

.tab-button:active,
.price-row button:active,
.shortcut-grid a:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .stage {
    padding: 0;
    background: var(--xh-surface-canvas);
  }

  .phone {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .supplier-product-grid {
    grid-template-columns: 1fr;
  }

  .supplier-product-field-wide {
    grid-column: auto;
  }

  .supplier-product-region-grid,
  .supplier-product-sku-grid,
  .supplier-product-media-controls {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .api-state-loading::before {
    animation: none;
  }

  .cart-added-toast {
    transition: none;
  }
}

@media (max-width: 370px) {
  .product-thumb-rail {
    width: 44px;
    gap: 4px;
  }

  .product-detail-action {
    grid-template-columns: minmax(82px, 1fr) 38px 38px 38px minmax(76px, 0.7fr);
    gap: 5px;
    padding: 7px;
  }

  .product-detail-price-quantity {
    gap: 4px;
  }

  .product-detail-price-quantity > strong {
    font-size: 16px;
  }

  .product-detail-quantity-control {
    grid-template-columns: 18px 23px 18px;
  }

  .home-carousel,
  .home-carousel-track {
    min-height: 196px;
    height: 196px;
  }

  .home-carousel-copy {
    inset: 16px 68px 18px 16px;
  }

  .home-carousel-copy strong {
    font-size: 24px;
  }

  .shortcut-grid {
    gap: 6px;
  }

  .section-title {
    display: block;
  }

  .section-title p {
    margin-top: 4px;
    text-align: left;
  }

  .product-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 购物车参考布局 */
.phone.is-cart-page { background: #f5f5f5; }
.phone.is-cart-page .app-header { display: none; }
.phone.is-cart-page .panel-wrap { padding: 0; }
.phone.is-cart-page .route-page { padding: 0; }
.cart-route-page { min-height: 100%; padding: max(12px, env(safe-area-inset-top)) 0 126px; background: #f5f5f5; color: #1f1f1f; }
.cart-page-header { padding: 15px 16px 11px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.cart-page-title-row { display: grid; align-items: center; grid-template-columns: auto minmax(0, 1fr) 32px auto; gap: 10px; }
.cart-page-title-row h1 { margin: 0; color: #171717; font-size: 26px; font-weight: 850; line-height: 1.1; white-space: nowrap; }
.cart-page-title-row h1 small { color: #4b4b4b; font-size: 15px; font-weight: 500; }
.cart-page-location { min-width: 0; overflow: hidden; color: #9a9a9a; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cart-page-search { display: grid; width: 30px; height: 30px; color: #171717; place-items: center; }
.cart-page-search svg { width: 23px; height: 23px; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-width: 1.8; }
.cart-page-manage { min-width: 42px; min-height: 34px; padding: 0; border: 0; background: transparent; color: #171717; font-size: 15px; font-weight: 700; }
.cart-page-coupon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; background: #fff; color: #f05a19; font-size: 12px; line-height: 1.4; }
.cart-page-coupon a, .cart-store-action { color: #f05a19; font-weight: 700; white-space: nowrap; }
.cart-store-list { display: grid; gap: 10px; padding: 10px 10px 0; }
.cart-store-card { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgb(0 0 0 / 3%); }
.cart-store-header { display: flex; align-items: center; gap: 9px; padding: 15px 14px 8px; }
.cart-store-title { display: flex; min-width: 0; align-items: center; gap: 5px; flex: 1; }
.cart-store-title strong { overflow: hidden; color: #202020; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cart-store-badge { color: #f32918; font-size: 16px; font-weight: 850; }
.cart-store-action { font-size: 13px; }
.cart-store-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 14px 7px 47px; color: #f05a19; font-size: 12px; }
.cart-store-promo span:last-child { color: #4a4a4a; }
.cart-product-row { display: grid; grid-template-columns: 31px 104px minmax(0, 1fr); gap: 8px; padding: 11px 14px 15px; border-top: 1px solid #f4f4f4; }
.cart-product-row.is-selected .cart-product-price { color: #f45113; }
.cart-select-button { display: grid; width: 30px; height: 44px; margin-top: 21px; padding: 0; border: 0; background: transparent; place-items: center; }
.cart-select-button[data-cart-selected-toggle] { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.cart-selection-circle { display: inline-grid; width: 24px; height: 24px; border: 1.5px solid #d5d5d5; border-radius: 50%; background: #fff; place-items: center; }
.cart-select-button .cart-selection-circle { width: 13px; height: 13px; border-width: 1px; }
.cart-select-button.is-selected .cart-selection-circle, .cart-select-all input:checked + .cart-selection-circle { border-color: #ff5b16; background: #ff5b16; }
.cart-select-button.is-selected .cart-selection-circle::after, .cart-select-all input:checked + .cart-selection-circle::after { width: 9px; height: 5px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; transform: rotate(-45deg) translate(1px, -1px); }
.cart-select-button.is-selected .cart-selection-circle::after { width: 5px; height: 3px; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.cart-product-media { width: 104px; height: 104px; overflow: hidden; border-radius: 12px; background: #f3f3f3; }
.cart-product-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-product-image-placeholder { background: linear-gradient(135deg, #f7e6d8, #f2f2f2 45%, #e8ecef); }
.cart-product-content { min-width: 0; }
.cart-product-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cart-product-title-line h3 { display: -webkit-box; min-width: 0; margin: 0; overflow: hidden; color: #222; font-size: 16px; font-weight: 800; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cart-product-spec { margin: 6px 0 0; overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cart-product-spec { color: #777; }
.cart-quantity-pill { display: inline-flex; min-width: 50px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 2px; border: 1px solid #dedede; border-radius: 10px; color: #1f1f1f; font-size: 17px; line-height: 1; }
.cart-quantity-pill input { width: 21px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; text-align: center; }
.cart-product-price-row { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; margin-top: 6px; }
.cart-product-price { color: #f45113; font-size: 23px; font-weight: 850; line-height: 1; }
.cart-manage-action { display: none; min-height: 30px; margin-top: 8px; padding: 0 11px; border: 1px solid #f1c7b5; border-radius: 999px; background: #fff; color: #e84e16; font-size: 12px; }
.cart-route-page.is-managing .cart-manage-action { display: inline-flex; align-items: center; }
.cart-invalid-section { margin: 10px; padding: 13px 14px; border-radius: 14px; background: #fff; color: #777; font-size: 12px; }
.cart-invalid-section strong { color: #333; font-size: 14px; }
.cart-invalid-section p { margin: 7px 0 0; }
.cart-checkout-bar { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%; z-index: 19; display: grid; width: min(390px, 100vw); align-items: center; grid-template-columns: auto 1fr auto; gap: 12px; margin: 0; padding: 12px 14px; background: rgb(255 255 255 / 98%); box-shadow: 0 -4px 14px rgb(0 0 0 / 7%); transform: translateX(-50%); }
.cart-select-all { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; color: #555; font-size: 14px; white-space: nowrap; }
.cart-select-all input { position: absolute; opacity: 0; pointer-events: none; }
.cart-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; color: #333; font-size: 14px; }
.cart-total strong { color: #f45113; font-size: 22px; font-weight: 850; }
.cart-checkout-button { display: grid; min-width: 112px; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #ff5a0b; color: #fff; font-size: 16px; font-weight: 850; place-items: center; }
@media (max-width: 420px) {
  .cart-page-title-row { grid-template-columns: auto minmax(0, 1fr) 28px auto; gap: 7px; }
  .cart-page-title-row h1 { font-size: 24px; }
  .cart-product-row { grid-template-columns: 28px 92px minmax(0, 1fr); gap: 7px; padding-inline: 10px; }
  .cart-product-media { width: 92px; height: 92px; }
  .cart-product-title-line h3 { font-size: 15px; }
  .cart-product-spec { font-size: 13px; }
  .cart-checkout-button { min-width: 96px; padding-inline: 17px; }
}


.phone.is-cart-page .bottom-tabs {
  bottom: 0;
  width: min(390px, 100vw);
  gap: 0;
  padding: 6px 5px calc(7px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid #ededed;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 6%);
}

.phone.is-cart-page .tab-button {
  min-height: 62px;
  border-radius: 0;
  color: #3d3d3d;
  font-size: 11px;
  font-weight: 700;
}

.phone.is-cart-page .tab-button.is-active {
  background: transparent;
  color: #f45113;
}

.phone.is-cart-page .flower-tab,
.phone.is-cart-page .tab-button.is-active .flower-tab {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: currentcolor;
  transform: none;
}

.phone.is-cart-page .flower-tab .flower-petal,
.phone.is-cart-page .flower-tab .flower-leaf,
.phone.is-cart-page .flower-tab .flower-core {
  display: none;
}

.phone.is-cart-page .flower-tab .tab-mark {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  color: currentcolor;
  transform: translate(-50%, -50%);
}


.cart-route-page {
  padding-top: max(24px, env(safe-area-inset-top));
}

.cart-page-header {
  padding-block: 18px 13px;
}

.cart-page-location {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cart-page-location svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.cart-store-list {
  gap: 12px;
  padding: 12px 12px 0;
}

.cart-store-card {
  border-radius: 19px;
}

.cart-store-header {
  padding: 17px 15px 10px;
}

.cart-store-select {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  place-items: center;
}

.cart-store-select.is-selected .cart-selection-circle {
  border-color: #ff5b16;
  background: #ff5b16;
}

.cart-store-select.is-selected .cart-selection-circle::after {
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg) translate(1px, -1px);
}

.cart-back-to-top {
  position: fixed;
  right: max(12px, calc(50% - 182px));
  bottom: calc(162px + env(safe-area-inset-bottom));
  z-index: 17;
  display: grid;
  width: 54px;
  height: 62px;
  padding: 0;
  border: 1px solid #e1e1e1;
  border-radius: 28px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 3px 11px rgb(0 0 0 / 9%);
  color: #777;
  place-items: center;
}

.cart-back-to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cart-back-to-top span {
  color: currentcolor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}


/* 购物车项目标准组件 */
.cart-route-page {
  display: grid;
  min-height: 0;
  gap: 12px;
  padding: 0 0 134px;
  background: transparent;
  color: var(--xh-text-primary);
}

.cart-page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  color: var(--xh-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.cart-page-manage {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(232 217 185 / 78%);
  border-radius: 999px;
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.cart-page-coupon {
  border: 1px solid rgb(145 170 107 / 34%);
  border-radius: 14px;
  background: var(--xh-surface-green);
  color: var(--xh-text-secondary);
  box-shadow: var(--xh-shadow-soft);
}

.cart-page-coupon a,
.cart-store-action {
  color: var(--xh-accent-leaf);
}

.cart-store-list {
  gap: 12px;
  padding: 0;
}

.cart-store-card {
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: rgb(255 253 246 / 88%);
  box-shadow: var(--xh-shadow-card);
}

.cart-store-header {
  padding: 14px 14px 8px;
}

.cart-store-title strong {
  color: var(--xh-text-primary);
}

.cart-store-badge,
.cart-store-promo {
  color: var(--xh-accent-orange);
}

.cart-store-promo span:last-child {
  color: var(--xh-text-muted);
}

.cart-product-row {
  border-top-color: rgb(232 217 185 / 56%);
}

.cart-product-media {
  border: 1px solid rgb(232 217 185 / 78%);
  background: var(--xh-surface-warm);
}

.cart-product-image-placeholder {
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 88%), transparent 28%),
    linear-gradient(145deg, var(--xh-surface-warm), rgb(247 178 50 / 28%));
}

.cart-product-title-line h3 {
  color: var(--xh-text-primary);
}

.cart-product-spec,
.cart-product-price-row span {
  color: var(--xh-text-muted);
}

.cart-quantity-pill {
  border-color: rgb(94 123 77 / 34%);
  background: var(--xh-surface-green);
  color: var(--xh-accent-leaf);
}

.cart-product-price {
  color: var(--xh-accent-orange);
}

.cart-select-button.is-selected .cart-selection-circle,
.cart-select-all input:checked + .cart-selection-circle,
.cart-store-select.is-selected .cart-selection-circle {
  border-color: var(--xh-accent-leaf);
  background: var(--xh-accent-leaf);
}

.cart-manage-action {
  border-color: rgb(199 82 27 / 32%);
  background: var(--xh-surface-card);
  color: var(--xh-accent-orange);
}

.cart-invalid-section {
  margin: 0;
  border: 1px solid rgb(199 82 27 / 22%);
  border-radius: 14px;
  background: rgb(255 248 232 / 90%);
  color: var(--xh-text-muted);
}

.cart-invalid-section strong {
  color: var(--xh-text-primary);
}

.cart-back-to-top {
  position: sticky;
  right: auto;
  bottom: 164px;
  justify-self: end;
  border-color: rgb(145 170 107 / 34%);
  border-radius: 18px;
  background: var(--xh-surface-green);
  box-shadow: var(--xh-shadow-soft);
  color: var(--xh-accent-leaf);
}

.cart-checkout-bar {
  position: sticky;
  bottom: 94px;
  left: auto;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgb(232 217 185 / 72%);
  border-radius: 18px;
  background: var(--xh-surface-card);
  box-shadow: var(--xh-shadow-card);
  transform: none;
}

.cart-select-all,
.cart-total {
  color: var(--xh-text-muted);
}

.cart-total strong {
  color: var(--xh-accent-orange);
}

.cart-checkout-button {
  background: var(--xh-accent-leaf);
  color: #fffdf6;
}

@media (max-width: 420px) {
  .cart-checkout-bar {
    bottom: 94px;
  }
}


.cart-checkout-bar {
  position: static;
  width: auto;
  margin: 0;
  transform: none;
  background: var(--xh-surface-card);
}

.cart-back-to-top {
  display: none;
}


.cart-quantity-pill {
  display: grid;
  min-width: 92px;
  height: 32px;
  grid-template-columns: 28px 36px 28px;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgb(94 123 77 / 34%);
  background: var(--xh-surface-green);
}

.cart-quantity-pill button,
.cart-quantity-pill input {
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--xh-accent-leaf);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
}

.cart-quantity-pill button {
  cursor: pointer;
}

.cart-quantity-pill input {
  width: 36px;
  min-width: 36px;
  border-right: 1px solid rgb(94 123 77 / 22%);
  border-left: 1px solid rgb(94 123 77 / 22%);
  outline: 0;
  -moz-appearance: textfield;
}

.cart-quantity-pill input::-webkit-inner-spin-button,
.cart-quantity-pill input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}