:root {
  /* 决策#32：全站唯一品牌色 = MILO logo 青绿 #7ab8bc；改这一处全站跟着变 */
  --milo-brand: #7ab8bc;
  --brand: var(--milo-brand);
  --brand-dark: #43898d; /* 品牌青加深：带白字的交互(按钮/CTA/选中)专用，白字 4:1 可读(决策#32) */
  --brand-deep: #327e82; /* 品牌青最深：深色文字 / 强对比实底 */
  --brand-soft: #eaf5f5; /* 品牌青极浅：背景 tint */
  --ink: #22282b;
  --muted: #6f797d;
  --line: #e1ebeb;
  --surface: #ffffff;
  --page: #f4f8f8;
  --amber: #b8894a; /* 决策#32 辅助暖金：只用于价格 / 数据数字，别当品牌色用 */
  --green: #3f9e64;
  --danger: #c94f4f;
  --shadow: 0 14px 38px rgba(34, 78, 82, 0.14);
  --soft-shadow: 0 10px 26px rgba(34, 78, 82, 0.08);
  --font-sans: "Inter", "Noto Sans SC", "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-display: "Inter", "Noto Sans SC", "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --app-preview-width: 430px;
  /* 选款式页宽度与其他页面统一为手机宽度（老板反馈：各步骤尺寸要一致）；淘宝式2列款式卡在此宽度下自适应为手机小卡 */
  --app-style-preview-width: var(--app-preview-width);
  --app-font-scale: 1;
  --flow-choice-bottom-reserve: 72px;
  --flow-size-bottom-reserve: 112px;
}

body[data-app-font-size="xsmall"] {
  --app-font-scale: 0.86;
}

body[data-app-font-size="small"] {
  --app-font-scale: 0.92;
}

body[data-app-font-size="normal"] {
  --app-font-scale: 1;
}

body[data-app-font-size="large"] {
  --app-font-scale: 1.12;
}

body[data-app-font-size="xlarge"] {
  --app-font-scale: 1.22;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -12%, rgba(86, 188, 191, 0.18), transparent 34%),
    #e9f0f0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.phone-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 180px),
    var(--page);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.phone-shell.selection-summary-screen {
  padding-bottom: calc(176px + env(safe-area-inset-bottom));
}

.phone-shell.home-screen {
  padding-bottom: 24px;
}

.app-header {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(135deg, var(--brand-dark), var(--brand-deep));
  color: #fff;
  padding: 14px 16px 20px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.brand-home-trigger {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}

.brand-home-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 4px;
}

.brand-logo {
  display: block;
  width: 116px;
  height: auto;
  filter: brightness(0) invert(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-search-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: stretch;
  margin: 0;
}

.product-search-field {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(42, 150, 154, 0.2);
  border-radius: 12px;
  background: #fff;
  color: #202624;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  align-items: center;
  padding: 0 8px 0 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.product-search-field i {
  font-size: calc(13px * var(--app-font-scale));
  color: var(--brand-deep);
  opacity: 0.9;
}

.product-search-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
}

.product-search-field input::placeholder {
  color: rgba(38, 50, 49, 0.48);
}

.product-search-clear {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 9px;
  background: rgba(42, 150, 154, 0.1);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.product-search-field:focus-within {
  border-color: rgba(42, 150, 154, 0.54);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42, 150, 154, 0.12);
}

.product-search-results {
  position: relative;
  z-index: 12;
  margin: 12px 0 0;
  border: 1px solid rgba(42, 150, 154, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(22, 60, 62, 0.14);
  overflow: hidden;
}

.product-search-page {
  position: fixed;
  inset: 0;
  z-index: 80;
  width: min(100%, var(--app-preview-width));
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 248, 248, 0.98) 72px),
    var(--page);
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  overflow: auto;
  box-shadow: 0 0 0 1px rgba(42, 150, 154, 0.08), 0 20px 60px rgba(15, 50, 52, 0.18);
}

.product-search-page-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.product-search-back {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(42, 150, 154, 0.2);
  border-radius: 14px;
  background: #fff;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(38, 50, 49, 0.06);
}

.product-search-page-head h2 {
  margin: 0;
  font-size: calc(20px * var(--app-font-scale));
  letter-spacing: 0;
}

.product-search-page-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 700;
}

.product-search-page-field {
  height: 46px;
  border-radius: 14px;
}

.product-search-list {
  display: grid;
  max-height: 360px;
  overflow: auto;
}

.product-search-result {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(42, 150, 154, 0.1);
  background: #fff;
  color: #202624;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.product-search-result:last-child {
  border-bottom: 0;
}

.product-search-result:focus-visible {
  outline: 2px solid rgba(43, 150, 154, 0.42);
  outline-offset: -3px;
}

.product-search-thumb {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: #f7f8f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-search-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.product-search-copy strong {
  font-size: calc(13px * var(--app-font-scale));
  color: #202624;
}

.product-search-copy small {
  font-size: calc(11px * var(--app-font-scale));
  color: #697675;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-search-copy em {
  font-style: normal;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 900;
  color: var(--brand-deep);
}

.product-search-result > i {
  color: var(--brand-deep);
  font-size: calc(12px * var(--app-font-scale));
}

.product-search-empty {
  margin: 0;
  padding: 14px;
  color: #697675;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  text-align: center;
}

.product-search-recommend-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(248, 252, 251, 0.96), #fff 58%);
}

.product-search-recommend-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.product-search-recommend-head h3 {
  margin: 0;
  font-size: calc(16px * var(--app-font-scale));
  color: #202624;
  letter-spacing: 0;
}

.product-search-recommend-head p {
  margin: 4px 0 0;
  color: #697675;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 750;
  line-height: 1.45;
}

.product-search-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(42, 150, 154, 0.08);
  border: 1px solid rgba(42, 150, 154, 0.14);
  white-space: nowrap;
}

.product-search-sort-toggle button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b6867;
  min-height: 28px;
  padding: 0 9px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
  cursor: pointer;
}

.product-search-sort-toggle button.active {
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 8px 16px rgba(36, 125, 129, 0.22);
}

.product-search-recommend-list {
  display: grid;
  gap: 8px;
}

.product-search-recommend-card {
  width: 100%;
  border: 1px solid rgba(42, 150, 154, 0.13);
  border-radius: 14px;
  background: #fff;
  color: #202624;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(38, 50, 49, 0.05);
}

.product-search-recommend-card:focus-visible {
  outline: 2px solid rgba(43, 150, 154, 0.42);
  outline-offset: -3px;
}

.product-search-recommend-thumb {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: #f7f8f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-search-recommend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-search-recommend-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.product-search-recommend-copy strong {
  font-size: calc(14px * var(--app-font-scale));
  color: #202624;
  line-height: 1.2;
}

.product-search-recommend-copy small {
  color: #697675;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-search-recommend-copy em {
  color: var(--brand-deep);
  font-style: normal;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 900;
  line-height: 1.2;
}

.product-search-recommend-action {
  color: var(--brand-deep);
  display: inline-grid;
  justify-items: center;
}

.product-search-recommend-action i {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(42, 150, 154, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--app-font-scale));
}

.search-trigger,
.cart-trigger,
.language-trigger,
.profile-avatar-trigger,
.editor-trigger {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
  text-decoration: none;
}

.search-trigger {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.cart-trigger {
  min-width: 54px;
  padding: 0 8px;
}

.cart-trigger strong {
  min-width: 20px;
  min-height: 20px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  font-size: calc(11px * var(--app-font-scale));
}

.cart-trigger.active strong {
  background: #fff;
  color: var(--brand-dark);
}

.cart-trigger.cart-bump {
  animation: cart-trigger-bump 620ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

.cart-trigger.cart-bump strong {
  animation: cart-count-pop 620ms cubic-bezier(0.2, 0.78, 0.18, 1);
}

.profile-avatar-trigger {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.editor-trigger {
  min-width: 58px;
  padding: 0 9px;
}

.editor-trigger span {
  line-height: 1;
}

.profile-avatar-trigger img,
.profile-avatar-trigger span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-avatar-trigger img {
  object-fit: cover;
  display: block;
}

.profile-avatar-trigger span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.profile-avatar-trigger.is-guest span {
  font-size: calc(10px * var(--app-font-scale));
  letter-spacing: 0;
}

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

.quick-intro {
  display: grid;
  grid-template-columns: 1fr 112px;
  align-items: end;
  gap: 12px;
  margin-top: 20px;
}

.intro-copy-wrap {
  min-width: 0;
}

.eyebrow,
.section-kicker {
  margin: 0 0 5px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.section-kicker {
  color: var(--brand-dark);
}

.quick-intro h1 {
  margin: 0;
  font-size: calc(28px * var(--app-font-scale));
  line-height: 1.14;
  font-weight: 950;
  letter-spacing: 0;
  max-width: 12ch;
  text-wrap: balance;
  overflow-wrap: normal;
}

.intro-copy {
  margin: 11px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.55;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.trust-row span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.17);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
}

.intro-product-carousel {
  width: 112px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(24, 84, 88, 0.18);
}

.intro-product-carousel .intro-product {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  opacity: 1;
  transition: opacity 180ms ease;
}

.intro-product-carousel .intro-product.switching {
  opacity: 0.35;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  padding: 3px 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 5px 12px rgba(18, 74, 80, 0.12);
}

.hero-dot {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 99px;
  padding: 0;
  background: rgba(42, 151, 157, 0.28);
}

.hero-dot.active {
  width: 13px;
  background: var(--brand-dark);
}

.phone-shell.compact-header .app-header {
  position: sticky;
  top: 0;
  z-index: 18;
  padding: 8px 12px;
  box-shadow: 0 8px 18px rgba(29, 91, 94, 0.14);
}

.phone-shell.compact-header .topbar {
  min-height: 38px;
}

.phone-shell.compact-header .brand-logo {
  width: 86px;
}

.phone-shell.compact-header .quick-intro {
  display: none;
}

.step-track {
  position: sticky;
  top: 0;
  z-index: 12;
  padding: 12px 16px 10px;
  background: rgba(244, 248, 248, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(211, 226, 226, 0.72);
}

.phone-shell.compact-header .step-track {
  top: 54px;
  z-index: 17;
}

.phone-shell.home-screen .step-track {
  display: none;
}

.step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.step-meta span {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.step-meta strong {
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.step-dots {
  display: grid;
  grid-template-columns: repeat(var(--step-count, 4), 1fr);
  gap: 6px;
}

.step-dot {
  width: 100%;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #d9e7e7;
  cursor: default;
}

.step-dot.active,
.step-dot.complete {
  background: var(--brand);
}

.step-dot.clickable {
  cursor: pointer;
}

.step-dot.clickable:focus-visible {
  outline: 2px solid rgba(43, 156, 158, 0.34);
  outline-offset: 3px;
}

.selection-summary {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #dce9e9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.06);
}

.selection-summary strong,
.selection-summary small {
  display: block;
}

.selection-summary strong {
  margin: 2px 0;
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.selection-summary small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.section-block {
  margin: 12px 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

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

.section-heading h2 {
  margin: 0;
  font-size: calc(21px * var(--app-font-scale));
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.sort-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 34px;
  margin-top: 30px;
  border: 1px solid rgba(86, 188, 191, 0.22);
  border-radius: 999px;
  background: #eef8f8;
  padding: 3px;
}

.sort-toggle[hidden] {
  display: none;
}

.sort-toggle-button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 9px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}

.sort-toggle-button.active {
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 8px 14px rgba(43, 150, 154, 0.18);
}

.sort-toggle-button:active {
  transform: translateY(1px);
}

.heading-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.heading-actions .sort-toggle {
  margin-top: 0;
}

.sort-toggle-compact {
  min-height: 30px;
  padding: 2px;
}

.sort-toggle-compact .sort-toggle-button {
  min-height: 24px;
  padding: 0 8px;
  font-size: calc(10px * var(--app-font-scale));
}

[data-screen="stock-style"] .section-heading,
[data-screen="stock-size"] .section-heading {
  gap: 8px;
  margin-bottom: 8px;
}

[data-screen="stock-style"] .section-heading h2,
[data-screen="stock-size"] .section-heading h2 {
  font-size: calc(19px * var(--app-font-scale));
  line-height: 1.18;
}

[data-screen="stock-style"] .section-kicker,
[data-screen="stock-size"] .section-kicker {
  margin-bottom: 3px;
  font-size: calc(10px * var(--app-font-scale));
}

[data-screen="stock-style"] .section-lead {
  margin-top: 4px;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

[data-screen="stock-style"] .heading-actions {
  gap: 5px;
}

[data-screen="stock-style"] .sort-toggle-compact {
  min-height: 28px;
}

[data-screen="stock-style"] .sort-toggle-compact .sort-toggle-button {
  min-height: 22px;
  padding: 0 7px;
  font-size: calc(10px * var(--app-font-scale));
}

.section-lead {
  max-width: 320px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
}

.micro-note {
  flex: 0 0 auto;
  max-width: 128px;
  border-radius: 99px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 6px 8px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
  text-align: center;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-bottom: 12px;
}

.mode-option,
.product-card,
.choice-card,
.custom-category-card,
.pill-button,
.print-option,
.toggle-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.mode-option {
  min-height: 118px;
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.home-screen .mode-option {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  border-color: rgba(43, 150, 154, 0.34);
  background:
    radial-gradient(circle at 100% 14%, rgba(86, 188, 191, 0.2), transparent 28%),
    linear-gradient(135deg, #f2ffff, #ffffff);
  box-shadow: 0 12px 26px rgba(43, 150, 154, 0.12);
}

.home-screen .mode-option::after {
  content: "\f061";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-dark);
  color: #fff;
  font-family: "Font Awesome 6 Free";
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(43, 150, 154, 0.22);
  animation: quote-arrow-bounce 1.45s ease-in-out infinite;
}

.mode-option.selected,
.product-card.selected,
.choice-card.selected,
.custom-category-card.selected,
.pill-button.selected,
.print-option.selected,
.toggle-chip.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  box-shadow: 0 0 0 2px rgba(86, 188, 191, 0.14);
}

.choice-title {
  font-size: calc(20px * var(--app-font-scale));
  line-height: 1.15;
  font-weight: 950;
}

.choice-copy {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
}

.delivery-chip {
  min-height: 24px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: 5px 9px;
  background: var(--brand-dark);
  color: #fff;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 950;
  white-space: normal;
}

.home-quick-preview {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbffff, #f1f8f8);
  border: 1px solid rgba(86, 188, 191, 0.18);
}

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

.mini-section-head strong {
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.mini-section-head small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 850;
}

.home-product-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.home-preview-card {
  min-width: 0;
  border: 1px solid #d9e9e9;
  border-radius: 12px;
  background: #fff;
  padding: 6px;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.06);
}

.home-preview-card img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 9px;
  background: #eff5f5;
}

.home-preview-image-missing {
  width: 100%;
  aspect-ratio: 1;
}

.home-preview-card .catalog-image-placeholder {
  display: flex;
}

.home-preview-card span,
.home-preview-card strong,
.home-preview-card small {
  display: block;
}

.home-preview-card strong {
  margin-top: 6px;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.home-preview-card small {
  margin-top: 2px;
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 900;
}

.delivery-chip.muted {
  background: #edf2f2;
  color: var(--muted);
}

.home-brand-intro {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(86, 188, 191, 0.2);
}

.store-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(76px, 0.62fr);
  gap: 6px;
  margin: 0 0 13px;
  overflow: hidden;
  border-radius: 14px;
  background: #eef4f4;
  box-shadow: 0 8px 20px rgba(35, 70, 74, 0.1);
}

.store-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center; /* 竖版门店/仓库照居中裁切，不偏上 */
}

.store-gallery img[data-preview-image] {
  cursor: zoom-in;
}

.store-gallery img[data-preview-image]:focus-visible {
  outline: 3px solid rgba(86, 188, 191, 0.92);
  outline-offset: -3px;
}

.store-photo-main {
  min-height: 142px;
  aspect-ratio: 1.7;
}

.store-photo-stack {
  display: grid;
  gap: 6px;
}

.store-photo-stack img {
  min-height: 68px;
  aspect-ratio: 0.86; /* 竖版仓库照：缩略图改竖一点，少裁上下、看得更全 */
}

.store-gallery figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  border-radius: 999px;
  background: rgba(20, 52, 55, 0.72);
  color: #fff;
  padding: 5px 8px;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
  backdrop-filter: blur(8px);
}

.brand-intro-copy h3 {
  margin: 4px 0 6px;
  color: var(--ink);
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1.22;
  font-weight: 950;
  letter-spacing: 0;
}

.brand-intro-copy p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.5;
}

.brand-trust-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.brand-trust-item {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid rgba(86, 188, 191, 0.26);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(229, 249, 249, 0.82), rgba(255, 255, 255, 0.96));
  padding: 10px;
}

.brand-trust-item i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(15px * var(--app-font-scale));
}

.brand-trust-item strong,
.brand-trust-item small {
  display: block;
}

.brand-trust-item strong {
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 950;
}

.brand-trust-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.home-process-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.08fr repeat(3, minmax(0, 0.82fr));
  gap: 6px;
  align-items: center;
}

.home-process-strip strong,
.home-process-strip span {
  min-height: 30px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  text-align: center;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.home-process-strip strong {
  background: var(--brand-dark);
  color: #fff;
}

.home-process-strip span {
  background: #eef5f5;
  color: var(--brand-dark);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.product-card {
  min-height: 118px;
  padding: 10px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 10px 24px rgba(34, 78, 82, 0.06);
  cursor: pointer;
}

.product-card:focus-visible {
  outline: 3px solid rgba(31, 154, 158, 0.28);
  outline-offset: 2px;
}

.product-image-button {
  display: block;
  width: 100%;
  grid-row: 1 / span 3;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.product-image-button:focus-visible {
  outline: 3px solid rgba(31, 154, 158, 0.35);
  outline-offset: -3px;
}

.product-image-button img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: #f7fbfb;
}

.product-card .product-name {
  display: block;
  padding: 0;
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.product-card > small {
  display: block;
  min-height: 0;
  padding: 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.38;
}

.product-style-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  margin: 3px 0 0;
  padding-top: 0;
  border-top: 0;
}

.product-style-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.product-style-thumb {
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #edf5f5;
  box-shadow: 0 2px 8px rgba(28, 69, 72, 0.16);
}

.product-style-thumb {
  padding: 0;
  overflow: hidden;
  margin-left: 0;
  cursor: pointer;
}

.product-style-thumb:first-child {
  margin-left: 0;
}

.product-style-thumb.selected {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(86, 188, 191, 0.24), 0 2px 8px rgba(28, 69, 72, 0.16);
}

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

.product-style-thumb.icon-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
}

.product-quote-action {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(36, 124, 128, 0.18);
  border-radius: 9px;
  padding: 0;
  background: #edf8f7;
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
  flex: 0 0 auto;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-quote-action:focus-visible {
  border-radius: 6px;
  outline: 3px solid rgba(31, 154, 158, 0.28);
  outline-offset: 1px;
}

.choice-list,
.custom-category-list {
  display: grid;
  gap: 10px;
}

.custom-style-fallback {
  min-height: 74px;
  border-style: dashed;
  background: linear-gradient(180deg, rgba(232, 249, 249, 0.72), rgba(255, 255, 255, 0.96));
}

.custom-style-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(20px * var(--app-font-scale));
}

.choice-card,
.custom-category-card {
  width: 100%;
  min-height: 92px;
  padding: 10px;
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(34, 78, 82, 0.05);
}

.choice-card {
  min-height: 128px;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  padding: 12px;
  position: relative;
}

.choice-card img {
  width: 118px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 14px;
  background: #f7fbfb;
}

.choice-card-icon {
  width: 118px;
  aspect-ratio: 1;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(26px * var(--app-font-scale));
}

.catalog-image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(43, 154, 155, 0.05);
}

.catalog-image-placeholder i {
  font-size: calc(24px * var(--app-font-scale));
}

.product-card-media > .catalog-image-placeholder,
.product-search-thumb > .catalog-image-placeholder,
.product-search-recommend-thumb > .catalog-image-placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
  display: flex;
}

.product-search-image-missing,
.product-search-recommend-image-missing {
  flex: 1 1 auto;
}

[data-screen="stock-style"] .choice-card {
  min-height: 84px;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

[data-screen="stock-style"] .choice-card img,
[data-screen="stock-style"] .choice-card-icon {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 10px;
}

[data-screen="stock-style"] .choice-card img {
  object-fit: cover;
  background: #edf3f3;
}

[data-screen="stock-style"] .choice-card-copy {
  min-width: 0;
  display: block;
  padding-right: 76px;
}

[data-screen="stock-style"] .style-size-badge {
  right: 8px;
  top: 8px;
  padding: 4px 7px;
  font-size: calc(9px * var(--app-font-scale));
}

.choice-card strong,
.custom-category-card strong {
  display: block;
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.28;
  font-weight: 950;
}

.choice-card small,
.custom-category-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.42;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.style-size-badge {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(86, 188, 191, 0.13);
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}

.style-tags span {
  border-radius: 99px;
  background: #eef5f5;
  padding: 4px 7px;
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 900;
}

.custom-category-card {
  grid-template-columns: 58px 1fr;
}

.custom-category-media {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  overflow: hidden;
}

.custom-category-media.has-image {
  background: #f7fbfb;
}

.custom-category-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.custom-category-media i {
  color: var(--brand-dark);
  font-size: calc(18px * var(--app-font-scale));
}

.custom-category-card.selected .custom-category-media {
  box-shadow: inset 0 0 0 1px rgba(43, 154, 155, 0.24);
}

.context-strip {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 188, 191, 0.12), transparent 32%),
    #fbfdfd;
}

[data-screen="stock-size"] .context-strip {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 7px;
  padding: 8px;
  border-radius: 12px;
}

.stock-context-media {
  width: 70px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
}

[data-screen="stock-size"] .stock-context-media {
  width: 68px;
}

.stock-context-media > img,
.stock-context-media > .stock-context-image-placeholder {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
}

.stock-context-media > img {
  object-fit: contain;
  background: #fff;
}

.stock-context-image-placeholder {
  display: none;
}

.stock-context-media.image-missing > .stock-context-image-placeholder {
  display: inline-flex;
}

.stock-context-media.image-missing > img {
  visibility: hidden;
  cursor: default;
}

img[data-strict-catalog-image="1"].image-missing {
  visibility: hidden;
}

.context-strip img[data-preview-image] {
  cursor: zoom-in;
}

.context-strip img[data-preview-image]:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.context-strip strong,
.context-strip small {
  display: block;
}

.context-strip small {
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.42;
}

[data-screen="stock-size"] .context-strip strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.2;
}

[data-screen="stock-size"] .context-strip small {
  margin-top: 2px;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.25;
}

.quick-config-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid rgba(86, 188, 191, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(242, 251, 251, 0.94), rgba(255, 255, 255, 0.98));
}

[data-screen="stock-size"] .quick-config-panel {
  gap: 6px;
  margin-bottom: 7px;
  padding: 7px;
  border-radius: 12px;
}

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

.quick-config-row-single {
  grid-template-columns: minmax(0, 1fr);
}

.quick-config-row-single .quick-config-group {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.quick-config-row-single .quick-config-label {
  white-space: nowrap;
}

.quick-config-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

[data-screen="stock-size"] .quick-config-group {
  gap: 4px;
}

.stock-fixed-quantity {
  display: grid;
  gap: 0;
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.stock-fixed-quantity:empty,
.stock-fixed-quantity[hidden] {
  display: none;
}

.stock-fixed-quantity-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  gap: 8px;
}

.stock-fixed-quantity-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.stock-fixed-quantity-copy strong,
.stock-fixed-quantity-empty strong {
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.stock-fixed-quantity-copy small,
.stock-fixed-quantity-empty span {
  min-width: 0;
  color: var(--text);
  font-size: calc(11.5px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 900;
}

.stock-fixed-qty-control {
  width: 118px;
  justify-self: end;
}

/* T2-2（决策#60，②代码开发·最小功能版，视觉归③美化）：档位栏横向可滑——
   直显 --tier-visible-count 个（默认 4），其余左右滑 */
.stock-fixed-quantity-presets {
  --tier-visible-count: 4;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.stock-fixed-quantity-presets::-webkit-scrollbar {
  display: none;
}

.stock-fixed-quantity-presets .stock-fixed-qty-button {
  flex: 0 0 calc((100% - (var(--tier-visible-count) - 1) * 6px) / var(--tier-visible-count));
  scroll-snap-align: start;
}

/* 滑动提示克制：仅当档数超过直显数时右缘渐隐 */
.stock-fixed-quantity-presets.tiers-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  mask-image: linear-gradient(90deg, #000 90%, transparent);
}

/* 档位加载中占位（真轨 price-tiers 懒加载） */
.stock-fixed-quantity-presets .tier-loading-hint {
  padding: 6px 10px;
  color: var(--text-muted, #7a8a8a);
  font-size: calc(11px * var(--app-font-scale));
}

/* 每档单价（spec A4：每档显示该档单价） */
.stock-fixed-qty-button .tier-unit-price,
.price-tier .tier-unit-price {
  display: block;
  font-weight: 600;
  font-size: calc(10px * var(--app-font-scale));
  color: var(--text-muted, #7a8a8a);
}

/* 主档位栏选中态为深底白字；购物车价格梯选中态为浅底（brand-soft）深字——分开着色 */
.stock-fixed-qty-button.selected .tier-unit-price {
  color: rgba(255, 255, 255, 0.85);
}

.price-tier.selected .tier-unit-price {
  color: var(--brand-dark, #43898d);
}

/* T2-1：尺寸行档位提示（「按 N 件档计价」/「大批量可商谈」） */
.size-tier-note {
  display: inline-block;
  color: var(--brand-dark, #43898d);
  font-weight: 600;
}

.stock-fixed-quantity-presets-only {
  width: 100%;
}

.stock-fixed-qty-button {
  min-height: 32px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid #d6e4e4;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.15;
  font-weight: 950;
}

.stock-fixed-qty-button strong {
  font: inherit;
  line-height: 1.05;
}

.stock-fixed-qty-button.selected {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.stock-fixed-quantity-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 360px) {
  .stock-fixed-quantity-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-fixed-qty-control {
    width: 100%;
  }
}

.quick-config-label {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

[data-screen="stock-size"] .quick-config-label {
  font-size: calc(10px * var(--app-font-scale));
}

.segmented-control,
.color-list,
.pill-list,
.print-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.segmented-control::-webkit-scrollbar,
.color-list::-webkit-scrollbar,
.pill-list::-webkit-scrollbar,
.print-options::-webkit-scrollbar {
  display: none;
}

.stock-option-list {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 1px 1px 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stock-option-list::-webkit-scrollbar {
  display: none;
}

.stock-option-chip {
  flex: 0 0 auto;
  width: max-content;
  min-width: 64px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}

.stock-option-chip.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(36, 124, 128, 0.12);
}

.stock-option-chip:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.print-help {
  margin: 0;
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.35;
}

[data-screen="stock-size"] .print-help,
[data-screen="stock-size"] .compact-note {
  font-size: calc(9px * var(--app-font-scale));
  line-height: 1.25;
}

.segment,
.pill-button,
.print-option,
.toggle-chip {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 12px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

[data-screen="stock-size"] .segment,
[data-screen="stock-size"] .print-option {
  min-height: 30px;
  font-size: calc(11px * var(--app-font-scale));
}

.segmented-control.compact,
.print-options.compact {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}

.segmented-control.compact .segment,
.print-options.compact .print-option {
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  justify-content: center;
  text-align: center;
}

.segment {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.segment.selected {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.config-block {
  margin-top: 14px;
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.field-heading strong {
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.field-heading small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 800;
}

.helper-note {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.45;
}

.compact-note {
  margin: -2px 0 0;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.3;
}

.color-passive-note {
  margin: 2px 2px 8px;
}

.color-button {
  min-width: 88px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.color-button.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
}

.color-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(29, 43, 46, 0.15);
  background: var(--swatch);
}

.size-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  min-width: 0;
}

[data-screen="stock-size"] .size-list {
  gap: 7px;
  margin-top: 7px;
}

.size-row {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(34, 78, 82, 0.05);
}

[data-screen="stock-size"] .size-row {
  padding: 8px;
  border-radius: 12px;
}

.size-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 10px;
  align-items: center;
}

[data-screen="stock-size"] .size-main {
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
}

.size-row.active {
  border-color: var(--brand-dark);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 188, 191, 0.16), transparent 30%),
    var(--brand-soft);
}

.size-row.selected:not(.active) {
  border-color: #bfe4e3;
  background: #fbfefe;
}

.size-copy strong,
.size-copy small {
  display: block;
}

.size-copy strong {
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.28;
  font-weight: 950;
}

[data-screen="stock-size"] .size-copy strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.2;
}

.size-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.4;
}

[data-screen="stock-size"] .size-copy small {
  margin-top: 2px;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.28;
}

.size-copy .size-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
}

[data-screen="stock-size"] .size-copy .size-meta {
  column-gap: 6px;
  row-gap: 2px;
}

.size-copy .size-price {
  display: inline-flex;
  width: fit-content;
  margin-top: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eaf9f9;
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
  white-space: nowrap;
}

[data-screen="stock-size"] .size-copy .size-price {
  padding: 2px 8px;
  font-size: calc(13px * var(--app-font-scale));
}

.size-print-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f2fbfb;
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 950;
  white-space: nowrap;
}

.size-row-status {
  min-width: 68px;
  min-height: 34px;
  justify-self: end;
  border: 1px solid #d6e4e4;
  border-radius: 11px;
  background: #fff;
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.1;
  font-weight: 950;
}

.size-row-status.active {
  border-color: var(--brand-dark);
  background: #eaf9f9;
}

.size-row-status.selected {
  border-color: #bfe4e3;
  background: #f4fbfb;
}

.size-row-status.selected.active {
  background: var(--brand-dark);
  color: #fff;
}

.size-print-options {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(36, 124, 128, 0.12);
}

.size-active-price {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf9f9;
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.size-print-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.size-print-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.size-print-help {
  min-width: 0;
  text-align: right;
}

.size-collapse-button {
  flex: 0 0 auto;
  min-width: 60px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(36, 124, 128, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1;
  font-weight: 950;
}

.size-collapse-button:active {
  transform: translateY(1px);
}

.size-print-options .print-options.compact {
  width: 100%;
}

.size-print-options .print-option {
  min-height: 29px;
  border-radius: 8px;
}

.size-qty-options {
  gap: 4px;
}

.qty-control {
  height: 42px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  border: 1px solid #d6e4e4;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

[data-screen="stock-size"] .qty-control {
  height: 34px;
  grid-template-columns: 28px 1fr 28px;
  border-radius: 10px;
}

[data-screen="stock-size"] .size-row-qty-control {
  width: 104px;
  justify-self: end;
}

[data-screen="stock-size"] .size-restocking-status {
  width: 104px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid #e2c47f;
  border-radius: 10px;
  background: #fff8e6;
  color: #8a5a13;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 700;
  white-space: nowrap;
}

.qty-control button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  background: #f2f7f7;
  color: var(--brand-dark);
  font-size: calc(18px * var(--app-font-scale));
  font-weight: 950;
}

[data-screen="stock-size"] .qty-control button {
  font-size: calc(16px * var(--app-font-scale));
}

.qty-control button:disabled,
.cart-qty-control button:disabled {
  color: #a9b8b8;
  cursor: not-allowed;
  opacity: 0.55;
}

.qty-control span {
  text-align: center;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.qty-control input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  color: var(--ink);
  text-align: center;
  font: inherit;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
  outline: none;
}

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

.qty-control input[type="number"] {
  -moz-appearance: textfield;
}

.size-row-quick-qty {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(36, 124, 128, 0.12);
}

.size-row-qty-preset {
  min-width: 0;
  min-height: 32px;
  border: 1px solid #d6e4e4;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.1;
  font-weight: 950;
}

.size-row-qty-preset.selected {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.size-select-button {
  min-width: 72px;
  height: 34px;
  border: 1px solid #d6e4e4;
  border-radius: 10px;
  background: #f7fbfa;
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.size-selected-qty {
  min-width: 72px;
  height: 34px;
  border: 1px solid #8bd2d1;
  border-radius: 10px;
  background: #edfafa;
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.size-selected-qty:active {
  transform: translateY(1px);
}

.size-select-button:active {
  transform: translateY(1px);
}

.price-ladder {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  margin-top: 10px;
  padding: 10px 10px 9px;
  border-top: 1px solid #e0eeee;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(251, 255, 255, 0.92), rgba(242, 250, 250, 0.78));
}

.price-ladder-compact {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding: 0;
  border-top: 0;
  background: transparent;
}

[data-screen="stock-size"] .price-ladder-compact {
  margin-top: 5px;
}

.price-ladder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.price-ladder-head span {
  min-width: 0;
}

.price-ladder-head strong,
.price-ladder-head small {
  display: block;
}

.price-ladder-head strong {
  color: var(--amber);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.price-ladder-head small {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.2;
}

.price-ladder-current {
  flex: 0 0 auto;
  min-width: 122px;
  min-height: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  padding: 7px 9px;
  border: 1px solid #d7e8e8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.price-ladder-current small,
.price-ladder-current strong,
.price-ladder-current em {
  display: block;
  line-height: 1.12;
  font-style: normal;
}

.price-ladder-current small {
  color: var(--ink);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 950;
}

.price-ladder-current strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--amber);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 1000;
  text-align: right;
}

.price-ladder-current em {
  color: var(--muted);
  font-size: calc(9px * var(--app-font-scale));
  font-weight: 800;
}

.price-ladder-current.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(86, 188, 191, 0.2);
}

.price-ladder-grid {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.price-ladder-compact .price-ladder-grid {
  width: auto;
  justify-content: flex-end;
  padding: 0;
}

.price-ladder-grid::-webkit-scrollbar {
  display: none;
}

.price-tier {
  flex: 0 0 86px;
  scroll-snap-align: start;
  padding: 7px 4px;
  border: 1px solid #d7e8e8;
  border-radius: 10px;
  background: #fbffff;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.price-ladder-compact .price-tier {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
}

[data-screen="stock-size"] .price-ladder-compact .price-tier {
  min-width: 46px;
  min-height: 28px;
  padding: 4px 8px;
}

[data-screen="stock-size"] .price-ladder-grid {
  gap: 4px;
}

.price-tier strong,
.price-tier span,
.price-tier small {
  display: block;
}

.price-tier strong {
  color: var(--ink);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
  line-height: 1.15;
}

.price-tier span {
  margin-top: 3px;
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
  line-height: 1.18;
}

.price-tier small {
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(9px * var(--app-font-scale));
  line-height: 1.15;
}

.price-tier.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(86, 188, 191, 0.28), 0 8px 18px rgba(43, 150, 154, 0.12);
}

.custom-size-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px dashed #bdd4d4;
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--brand-dark);
  text-decoration: none;
  cursor: pointer;
}

.custom-size-box:hover,
.custom-size-box:focus-visible {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
}

.custom-size-entry-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(86, 188, 191, 0.18);
  color: var(--brand-dark);
}

.custom-size-box strong {
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 950;
}

.custom-size-box summary {
  min-height: 52px;
  padding: 12px;
  color: var(--brand-dark);
  cursor: pointer;
}

.custom-size-box summary strong,
.custom-size-box summary small {
  display: block;
}

.custom-size-box summary strong {
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 950;
}

.custom-size-box summary small {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 800;
}

.custom-size-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px 12px;
}

.custom-size-action {
  width: calc(100% - 24px);
  min-height: 44px;
  margin: 0 12px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-dark);
  color: #fff;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.custom-request-fields {
  display: grid;
  gap: 10px;
}

.sticker-shape-panel {
  display: grid;
  gap: 8px;
}

.sticker-shape-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sticker-shape-option {
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
  cursor: pointer;
}

.sticker-shape-option i,
.sticker-shape-option span {
  display: block;
}

.sticker-shape-option i {
  margin-bottom: 4px;
  color: var(--brand-dark);
}

.sticker-shape-option.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: 0 0 0 1px rgba(43, 157, 160, 0.14);
}

.custom-bag-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(190px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 190px;
  border: 1px dashed #b6d8d8;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfefe 0%, #f3fbfb 100%);
  padding: 12px;
  overflow: hidden;
}

.custom-bag-preview-copy {
  display: grid;
  gap: 5px;
  align-content: center;
}

.custom-bag-preview-copy strong {
  color: var(--brand-dark);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.custom-bag-preview-copy span {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.35;
}

.bag-preview-stage {
  --bag-front-w: 122px;
  --bag-front-half: 61px;
  --bag-h: 160px;
  --bag-depth: 26px;
  --bag-depth-half: 13px;
  --bag-depth-third: 9px;
  --bag-handle-w: 54px;
  position: relative;
  min-height: 190px;
}

.bag-preview-shape {
  position: absolute;
  inset: 0;
}

.custom-bag-preview.is-sticker .bag-preview-stage {
  min-height: 160px;
}

.custom-bag-preview.is-sticker .bag-preview-shape {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-bag-preview.is-sticker .bag-preview-face {
  position: relative;
  left: auto;
  bottom: auto;
  width: var(--bag-front-w);
  height: var(--bag-h);
  border-radius: 10px;
}

.custom-bag-preview.is-sticker.is-circle .bag-preview-face {
  border-radius: 50%;
}

.custom-bag-preview.is-sticker.is-custom .bag-preview-face {
  clip-path: polygon(18% 6%, 78% 0, 96% 38%, 78% 94%, 20% 88%, 0 42%);
  border-radius: 12px;
}

.custom-bag-preview.is-sticker .bag-preview-side,
.custom-bag-preview.is-sticker .bag-preview-handle,
.custom-bag-preview.is-sticker .bag-measure-depth {
  display: none;
}

.custom-bag-preview.is-sticker .bag-measure-width {
  left: calc(50% - var(--bag-front-half));
  bottom: calc(var(--bag-h) + 34px);
}

.custom-bag-preview.is-sticker .bag-measure-height {
  left: calc(50% + var(--bag-front-half) + 8px);
  bottom: calc((160px - var(--bag-h)) / 2);
}

.bag-preview-face,
.bag-preview-side {
  position: absolute;
  bottom: 20px;
  border: 2px dashed var(--brand-dark);
  background: rgba(86, 188, 191, 0.1);
  transition: width 0.2s ease, height 0.2s ease, left 0.2s ease;
}

.bag-preview-face {
  left: calc(50% - var(--bag-front-half) - var(--bag-depth-third));
  width: var(--bag-front-w);
  height: var(--bag-h);
  border-radius: 10px 10px 8px 8px;
}

.bag-preview-side {
  left: calc(50% + var(--bag-front-half) - var(--bag-depth-third));
  width: var(--bag-depth);
  height: var(--bag-h);
  border-left: 0;
  border-radius: 0 10px 8px 0;
  opacity: 0.75;
  transform: skewY(-8deg);
  transform-origin: left bottom;
}

.bag-preview-handle {
  position: absolute;
  left: 50%;
  top: -22px;
  width: var(--bag-handle-w);
  height: 36px;
  border: 2px dashed var(--brand-dark);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}

.bag-measure {
  position: absolute;
  z-index: 1;
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
  pointer-events: none;
}

.bag-measure span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  padding: 2px 7px;
  box-shadow: 0 6px 14px rgba(30, 70, 70, 0.08);
}

.bag-measure-width {
  left: calc(50% - var(--bag-front-half) - var(--bag-depth-third));
  bottom: calc(var(--bag-h) + 30px);
  width: var(--bag-front-w);
  text-align: center;
}

.bag-measure-width::before,
.bag-measure-depth::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  border-top: 1px dashed rgba(43, 157, 160, 0.65);
}

.bag-measure-height {
  left: calc(50% + var(--bag-front-half) + var(--bag-depth-half) + 4px);
  bottom: 20px;
  height: var(--bag-h);
  display: flex;
  align-items: center;
}

.bag-measure-height::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  border-left: 1px dashed rgba(43, 157, 160, 0.65);
}

.bag-measure-depth {
  left: calc(50% + var(--bag-front-half) - var(--bag-depth-third));
  bottom: 2px;
  width: max(var(--bag-depth), 54px);
  text-align: center;
}

.custom-qty-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.custom-qty-preset {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
  cursor: pointer;
}

.custom-qty-preset.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: 0 0 0 1px rgba(43, 157, 160, 0.12);
}

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

.custom-dimension-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.custom-dimension-row input {
  min-width: 0;
  padding: 0 9px;
}

.custom-size-grid label,
.single-field,
.lead-form label,
.profile-form label {
  display: grid;
  gap: 6px;
}

.custom-size-grid span,
.custom-dimension-row span,
.single-field span,
.lead-form span,
.profile-form label span {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.field-hint {
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
  line-height: 1.35;
}

input,
textarea {
  width: 100%;
  border: 1px solid #d8e5e5;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

input {
  min-height: 44px;
  padding: 0 11px;
}

textarea {
  resize: vertical;
  padding: 10px 11px;
  line-height: 1.45;
}

input:focus,
textarea:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(86, 188, 191, 0.18);
}

.upload-box {
  margin-top: 10px;
  border: 1px dashed #bcd4d4;
  border-radius: 14px;
  background: #fbfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  text-align: center;
}

.upload-box input {
  display: none;
}

.upload-main {
  width: 100%;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.upload-plus {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(43, 150, 154, 0.24);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(15px * var(--app-font-scale));
  box-shadow: 0 6px 14px rgba(43, 150, 154, 0.1);
}

.upload-whatsapp-link {
  min-height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #eaf8ef;
  color: #1f9d55;
  text-decoration: none;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
}

.upload-title {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.upload-copy {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.3;
}

#stock-upload-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

#stock-upload-box .upload-main {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon copy";
  align-items: center;
  justify-content: start;
  gap: 1px 8px;
  text-align: left;
}

#stock-upload-box .upload-plus {
  grid-area: icon;
}

#stock-upload-box .upload-title {
  grid-area: title;
}

#stock-upload-box .upload-copy {
  grid-area: copy;
}

#stock-upload-box .upload-whatsapp-link {
  white-space: nowrap;
}

.primary-submit {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #eaf1f1;
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.primary-submit {
  background: var(--brand-dark);
  color: #fff;
}

.primary-submit:disabled {
  opacity: 0.62;
}

.cart-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfd;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(34, 78, 82, 0.05);
}

.price-disclaimer {
  margin: 8px 12px 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f8f8;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.4;
}

.order-note-field {
  display: grid;
  gap: 6px;
  margin: 8px 12px 12px;
}

.order-note-field span {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.order-note-field textarea {
  min-height: 62px;
  max-height: 112px;
  resize: vertical;
}

.cart-heading {
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.cart-heading h3 {
  margin: 0;
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.cart-heading strong {
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.cart-list {
  display: grid;
  align-content: start;
  align-items: start;
  gap: 8px;
  padding: 10px;
}

.cart-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
}

#cart-sheet .section-kicker {
  display: none;
}

.cart-empty {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px * var(--app-font-scale));
  text-align: center;
  padding: 14px 4px;
}

.cart-item {
  display: grid;
  align-self: start;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 68px;
  padding: 8px;
  border: 1px solid #e1ebeb;
  border-radius: 12px;
  background: #fff;
}

.cart-item-selectable {
  grid-template-columns: 28px 52px minmax(0, 1fr);
}

.cart-select {
  grid-row: span 2;
  width: 28px;
  height: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cart-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cart-select-box {
  width: 20px;
  height: 20px;
  border: 2px solid #bdd5d5;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 4px #fff;
}

.cart-select input:checked + .cart-select-box {
  border-color: var(--brand);
  background: var(--brand);
}

.cart-select input:focus-visible + .cart-select-box {
  outline: 2px solid rgba(43, 150, 154, 0.32);
  outline-offset: 2px;
}

.cart-item-unselected {
  border-color: #e6eeee;
  background: #f8fbfb;
}

.cart-item-unselected img,
.cart-item-unselected .cart-product-thumb,
.cart-item-unselected .cart-copy,
.cart-item-unselected .cart-actions {
  opacity: 0.56;
}

.cart-product-link {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cart-product-thumb {
  grid-row: span 2;
  align-self: start;
  width: 52px;
  border-radius: 8px;
}

.cart-product-image-missing {
  display: flex;
  width: 52px;
  aspect-ratio: 1;
}

.cart-item img {
  width: 52px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfaf6 0%, #edf6f5 100%);
}

.cart-product-link:focus-visible {
  outline: 2px solid rgba(43, 150, 154, 0.34);
  outline-offset: 2px;
}

.cart-product-link:hover strong {
  color: var(--brand-deep);
}

.cart-flyer {
  position: fixed;
  z-index: 35;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(34, 78, 82, 0.24);
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.cart-flyer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}

.cart-flyer span {
  position: absolute;
  right: -7px;
  top: -7px;
  min-width: 23px;
  height: 23px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  background: var(--brand-dark);
  color: #fff;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(43, 150, 154, 0.24);
}

.cart-item strong,
.cart-item small {
  display: block;
}

.cart-copy {
  min-width: 0;
  align-self: start;
}

.cart-item strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 950;
}

.cart-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.order-summary-panel .cart-item {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
}

.order-summary-panel .cart-item img {
  width: 46px;
}

.order-summary-panel .cart-actions {
  grid-column: 2;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.order-summary-panel .cart-qty-control {
  flex-basis: 112px;
}

.order-print-controls[hidden] {
  display: none;
}

.order-print-card {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid rgba(36, 124, 128, 0.14);
  border-radius: 12px;
  background: #f7fcfc;
}

.order-print-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.order-print-copy strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 950;
}

.order-print-copy small {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 800;
  text-align: right;
}

.order-print-options,
.cart-line-print-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.order-print-option,
.cart-line-print-button {
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #d6e4e4;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.1;
  font-weight: 950;
}

.order-print-option.selected,
.cart-line-print-button.selected {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(43, 150, 154, 0.18);
}

.order-logo-upload-card {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 8px 0 10px;
  padding: 9px 10px;
  border: 1px dashed rgba(36, 124, 128, 0.3);
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fcfc 0%, #eefafa 100%);
}

.order-logo-upload-card.has-files {
  border-style: solid;
  background: #f7fcfc;
}

.order-logo-upload-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.order-logo-upload-main {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.order-logo-upload-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e5f7f7;
  color: var(--brand-dark);
  font-size: calc(14px * var(--app-font-scale));
}

.order-logo-upload-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.order-logo-upload-copy strong {
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.order-logo-upload-copy small {
  color: var(--muted);
  font-size: calc(9.5px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 800;
}

.order-logo-upload-action {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1;
  font-weight: 950;
  border: 1px solid rgba(36, 124, 128, 0.16);
}

.order-logo-file-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 0;
}

.order-logo-file-summary:empty {
  display: none;
}

.order-logo-file-empty,
.order-logo-file-count,
.order-logo-file-chip,
.order-logo-file-more {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1;
  font-weight: 850;
}

.order-logo-file-empty {
  color: var(--muted);
}

.order-logo-file-count {
  padding: 0 8px;
  background: #e5f7f7;
  color: var(--brand-dark);
}

.order-logo-file-chip {
  max-width: 100%;
  padding: 0 8px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(36, 124, 128, 0.12);
}

.order-logo-file-chip strong {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-logo-file-chip small {
  color: var(--muted);
}

.order-logo-file-more {
  padding: 0 7px;
  background: rgba(43, 150, 154, 0.1);
  color: var(--brand-dark);
}

.cart-line-print {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(36, 124, 128, 0.1);
  border-radius: 10px;
  background: #f7fcfc;
}

.cart-line-print:not(.expanded) {
  padding: 7px 9px;
}

.cart-line-print.expanded {
  gap: 8px;
}

.cart-line-print-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cart-line-print-current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cart-line-print.expanded .cart-line-print-current {
  display: grid;
  gap: 2px;
}

.cart-line-print-current small {
  color: var(--muted);
  font-size: calc(9.5px * var(--app-font-scale));
  line-height: 1.1;
  font-weight: 850;
}

.cart-line-print-current strong {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #e5f7f7;
  color: var(--brand-dark);
  font-size: calc(11.5px * var(--app-font-scale));
  line-height: 1.15;
  font-weight: 950;
}

.cart-line-print.expanded .cart-line-print-current strong {
  width: fit-content;
}

.cart-line-print-hint {
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(229, 246, 246, 0.78);
  color: var(--muted);
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 800;
}

.cart-line-print-toggle {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: #e9f7f7;
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1;
  font-weight: 950;
}

.cart-line-print-button {
  min-height: 32px;
  border-radius: 8px;
}

.cart-qty-control {
  flex: 0 0 118px;
  height: 32px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d6e4e4;
  border-radius: 9px;
  background: #fff;
}

.cart-qty-control button {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  background: #f2f7f7;
  color: var(--brand-dark);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 950;
}

.cart-qty-control input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  background: #fff;
  color: var(--ink);
  text-align: center;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

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

.cart-edit,
.cart-remove {
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  padding: 0 8px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.cart-edit {
  background: #edf8f7;
  color: var(--brand-dark);
}

.cart-remove {
  background: #f7eeee;
  color: var(--danger);
}

.cart-edit-sheet {
  max-height: 82vh;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-edit-sheet .sheet-handle {
  margin-bottom: 7px;
}

.cart-edit-sheet .sheet-heading {
  align-items: center;
  margin-bottom: 7px;
}

.cart-edit-sheet .section-kicker {
  display: none;
}

.cart-edit-sheet .sheet-heading h2 {
  font-size: calc(19px * var(--app-font-scale));
  line-height: 1.15;
}

.cart-edit-sheet .sheet-close {
  min-height: 32px;
  padding: 0 10px;
  font-size: calc(12px * var(--app-font-scale));
}

.cart-edit-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 2px 8px 8px;
}

.cart-edit-fixed-head {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  background: #fff;
  z-index: 2;
}

.cart-edit-current {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
}

.cart-edit-current img {
  width: 68px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfaf6 0%, #edf6f5 100%);
}

.cart-edit-image-missing {
  display: flex;
  width: 68px;
  aspect-ratio: 1;
}

.cart-edit-current span {
  min-width: 0;
}

.cart-edit-current small,
.cart-edit-current em {
  display: block;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-style: normal;
  line-height: 1.3;
  font-weight: 850;
}

.cart-edit-current small {
  display: none;
}

.cart-edit-current strong {
  display: block;
  margin: 0 0 2px;
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.18;
  font-weight: 950;
}

.cart-edit-section {
  display: grid;
  gap: 7px;
}

.cart-edit-section > strong {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.cart-edit-direction {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid #d9eeee;
  border-radius: 12px;
  background: #f7fcfb;
}

.cart-edit-option-row,
.cart-edit-tier-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 7px;
}

.cart-edit-option-row {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cart-edit-option-row::-webkit-scrollbar {
  display: none;
}

.cart-edit-option,
.cart-edit-tier,
.cart-edit-size {
  min-width: 0;
  border: 1px solid #dce9e9;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-weight: 950;
}

.cart-edit-option {
  flex: 0 0 auto;
  width: max-content;
  min-width: 64px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  font-size: calc(13px * var(--app-font-scale));
  letter-spacing: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}

.cart-edit-option.selected,
.cart-edit-tier.selected,
.cart-edit-size.selected {
  border-color: var(--brand-dark);
  background: #edfafa;
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(36, 124, 128, 0.12);
}

.cart-edit-size-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2px 8px 0;
}

.cart-edit-size-card {
  box-shadow: none;
}

.cart-edit-size-main {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.34fr);
}

.cart-edit-size-card .size-copy strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.22;
}

.cart-edit-size-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}

.cart-edit-size-title em {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.cart-edit-size-card.active .cart-edit-size-title em {
  color: inherit;
  opacity: 0.9;
}

.cart-edit-size-card .size-copy small {
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.28;
}

.cart-edit-size-meta {
  column-gap: 6px;
  row-gap: 4px;
}

.cart-edit-size-meta .size-price {
  flex: 0 0 auto;
}

.cart-edit-size-card.active {
  padding: 9px;
  border-color: var(--brand-dark);
  background: #f3fbfa;
  box-shadow: inset 0 0 0 1px rgba(36, 124, 128, 0.12);
}

.cart-edit-card-qty {
  height: 34px;
  grid-template-columns: 28px minmax(44px, 1fr) 28px;
}

.cart-edit-card-qty input {
  height: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  text-align: center;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
  box-shadow: none;
}

.cart-edit-card-qty input:focus {
  box-shadow: none;
}

.cart-edit-card-print {
  margin-top: 7px;
  padding-top: 7px;
}

.cart-edit-card-print .print-option {
  min-height: 32px;
  border: 1px solid #dce9e9;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.cart-edit-card-print .print-option.selected {
  border-color: var(--brand-dark);
  background: #edfafa;
  color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px rgba(36, 124, 128, 0.12);
}

.cart-edit-current-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  pointer-events: none;
}

.cart-edit-help {
  color: var(--muted);
  font-size: calc(9.5px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.25;
}

.cart-edit-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  margin-top: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.cart-edit-sheet .cart-sheet-actions {
  flex: 0 0 auto;
  position: relative;
  bottom: auto;
  padding: 8px 10px 8px;
  background: #fff;
  border-top: 1px solid #e4efef;
}

.cart-edit-sheet .summary-button {
  min-height: 38px;
  font-size: calc(12px * var(--app-font-scale));
}

.cart-edit-price span:empty,
.cart-edit-price strong:empty {
  display: none;
}

@media (max-width: 380px) {
  .cart-edit-current {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 74px;
  }

  .cart-edit-current img {
    width: 56px;
  }

  .cart-edit-current strong {
    font-size: calc(13px * var(--app-font-scale));
  }

  .cart-edit-size-main {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 7px;
  }

  .cart-edit-card-qty {
    grid-template-columns: 24px minmax(38px, 1fr) 24px;
  }

  .cart-edit-card-print .print-option {
    font-size: calc(11px * var(--app-font-scale));
  }
}

.lead-form {
  display: grid;
  gap: 11px;
  margin-top: 12px;
}

.order-options {
  display: grid;
  gap: 11px;
}

.order-optional-stack {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.order-summary-panel .optional-order-details {
  border-color: #d8e8e8;
  border-radius: 14px;
  background: #fff;
}

.order-summary-panel .optional-order-details summary {
  min-height: 48px;
  padding: 10px 12px;
}

.order-summary-panel .optional-order-details .order-options {
  padding: 0 10px 10px;
}

.order-summary-panel .order-option-block,
.order-summary-panel .pickup-packaging-fields,
.order-summary-panel .invoice-fields,
.order-summary-panel .address-fields {
  padding: 10px;
}

.order-summary-panel .order-choice {
  min-height: 62px;
  padding: 8px;
}

.optional-order-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfd;
  overflow: hidden;
}

.optional-order-details summary {
  min-height: 54px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  cursor: pointer;
  list-style: none;
}

.optional-order-details summary::-webkit-details-marker {
  display: none;
}

.optional-order-details summary::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand-dark);
  transition: transform 0.18s ease;
}

.optional-order-details[open] summary::after {
  transform: rotate(180deg);
}

.optional-order-details summary span {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.optional-order-details summary small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 850;
}

.optional-order-details .order-options {
  padding: 0 12px 12px;
}

.order-option-block {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfd;
}

.order-option-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.order-option-head span {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.order-option-head small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 900;
}

.order-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.order-choice {
  min-height: 74px;
  border: 1px solid #d8e5e5;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-areas:
    "icon title"
    "icon copy";
  align-items: center;
  column-gap: 8px;
  padding: 10px;
  text-align: left;
}

.order-choice i {
  grid-area: icon;
  color: var(--brand-dark);
  font-size: calc(20px * var(--app-font-scale));
}

.order-choice span {
  grid-area: title;
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.order-choice small {
  grid-area: copy;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 800;
}

.order-choice.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(43, 150, 154, 0.16);
}

.pickup-packaging-fields {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #bcd4d4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbffff 0%, #f6fbfb 100%);
}

.pickup-packaging-fields .order-choice {
  min-height: 64px;
}

.pickup-packaging-fields[hidden],
.invoice-fields[hidden],
.address-fields[hidden] {
  display: none;
}

.invoice-fields,
.address-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #bcd4d4;
  border-radius: 14px;
  background: #fff;
}

.invoice-fields label:nth-child(3),
.invoice-fields label:nth-child(4) {
  grid-column: 1 / -1;
}

.address-fields .full-field {
  grid-column: 1 / -1;
}

.success-message {
  margin: 0;
  border-radius: 8px;
  background: #eaf8ef;
  color: var(--green);
  padding: 11px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 900;
  line-height: 1.45;
}

.form-helper {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 750;
  line-height: 1.45;
}

.single-field {
  margin-top: 12px;
}

.request-summary {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdfd;
  padding: 12px;
}

.screen-stock-contact .section-lead {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #eef8f8;
  color: var(--brand-deep);
  font-weight: 850;
}

.request-summary strong,
.request-summary span {
  display: block;
}

.request-summary strong {
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 950;
}

.request-summary span {
  margin-top: 6px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
}

.success-panel {
  display: grid;
  gap: 14px;
}

.success-card,
.success-next {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.success-card {
  padding: 26px 20px 24px;
  text-align: center;
}

.success-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(30px * var(--app-font-scale));
}

.success-card h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: calc(24px * var(--app-font-scale));
  line-height: 1.18;
  font-weight: 950;
  letter-spacing: 0;
}

.success-card p:not(.section-kicker) {
  margin: 0 auto;
  max-width: 260px;
  color: var(--muted);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.55;
}

.success-quote-no {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 10px !important;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep) !important;
  padding: 7px 11px;
  font-size: 12px !important;
  font-weight: 950;
}

.success-next {
  padding: 16px;
}

.success-next h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 950;
}

.success-next ol {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.75;
}

.success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-client-cases {
  margin: 14px 22px 0;
  padding: 12px;
  border: 1px solid rgba(86, 188, 191, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 24px rgba(34, 78, 82, 0.06);
}

.phone-shell:not(.home-screen) .home-client-cases {
  display: none;
}

.client-cases-copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.client-cases-copy .section-kicker {
  margin: 0;
  flex: 0 0 auto;
  font-size: calc(10px * var(--app-font-scale));
}

.client-cases-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 1000;
}

.client-cases-copy p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.35;
  text-align: right;
}

.client-case-strip {
  margin-top: 10px;
  overflow: hidden;
}

.client-case-track {
  display: flex;
  gap: 7px;
  width: max-content;
  animation: client-case-marquee 36s linear infinite;
}

@keyframes client-case-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-case-track {
    animation: none;
  }
  .client-case-strip {
    overflow-x: auto;
  }
}

.client-case-thumb {
  flex: 0 0 auto;
  width: 86px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(86, 188, 191, 0.18);
  background: #fff;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.08);
}

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

.social-footer {
  margin: 14px 12px 0;
  padding: 12px 0 2px;
  text-align: center;
}

.phone-shell:not(.home-screen) .social-footer {
  display: none;
}

.phone-shell.screen-success .social-footer {
  display: block;
}

.social-copy {
  margin: 0 0 12px;
}

.social-title {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.social-slogan {
  margin: 0;
  color: var(--brand-dark);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 1000;
  line-height: 1.2;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  justify-content: center;
  gap: 13px;
}

.social-link {
  --social-accent: var(--brand-deep);
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: var(--social-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(64, 143, 146, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(233, 245, 243, 0.82));
  box-shadow: 0 10px 22px rgba(25, 74, 76, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.social-link::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background: rgba(47, 127, 131, 0.07);
  pointer-events: none;
}

.social-link::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 8px;
  width: 13px;
  height: 3px;
  border-radius: 999px;
  background: var(--social-accent);
  opacity: 0.82;
  pointer-events: none;
}

.social-link i {
  position: relative;
  z-index: 1;
  color: var(--social-accent);
  font-size: calc(20px * var(--app-font-scale));
  line-height: 1;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(64, 143, 146, 0.34);
  box-shadow: 0 14px 26px rgba(25, 74, 76, 0.14), 0 0 0 4px rgba(86, 188, 191, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.social-link:active {
  transform: translateY(1px) scale(0.98);
}

.social-link.facebook {
  --social-accent: #1877f2;
}

.social-link.tiktok {
  --social-accent: #14181b;
}

.social-link.tiktok::after {
  background: linear-gradient(90deg, #25f4ee, #fe2c55);
}

.social-link.tiktok i {
  text-shadow: -0.7px 0 #25f4ee, 0.7px 0 #fe2c55;
}

.social-link.instagram {
  --social-accent: #d62976;
}

/* Homepage European-light visual pass: calmer color, fewer nested card cues, stronger real-photo trust. */
.phone-shell.home-screen {
  background:
    linear-gradient(180deg, #faf8f3 0%, #f4f0e8 48%, #eef5f3 100%);
  color: #202624;
}

.phone-shell.home-screen .app-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.92) 0%, rgba(250, 247, 240, 0.96) 55%, rgba(233, 245, 242, 0.96) 100%);
  color: #202624;
  padding: 15px 16px 22px;
  border-bottom: 1px solid rgba(42, 58, 56, 0.08);
}

.phone-shell.home-screen .app-header::before {
  content: "";
  position: absolute;
  inset: auto -26px -72px 34%;
  height: 160px;
  border-radius: 50%;
  background: rgba(86, 188, 191, 0.16);
  pointer-events: none;
}

.phone-shell.home-screen .topbar,
.phone-shell.home-screen .quick-intro {
  position: relative;
  z-index: 1;
}

.phone-shell.home-screen .brand-logo {
  width: 104px;
  filter: none;
}

.phone-shell.home-screen .product-search-field {
  border-color: rgba(42, 58, 56, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: #263231;
  box-shadow: 0 8px 18px rgba(38, 50, 49, 0.06);
}

.phone-shell.home-screen .product-search-field input::placeholder {
  color: rgba(38, 50, 49, 0.54);
}

.phone-shell.home-screen .product-search-clear {
  background: rgba(42, 150, 154, 0.1);
  color: var(--brand-deep);
}

.phone-shell.home-screen .brand-home-trigger:focus-visible {
  outline-color: rgba(43, 150, 154, 0.42);
}

.phone-shell.home-screen .search-trigger,
.phone-shell.home-screen .cart-trigger,
.phone-shell.home-screen .language-trigger,
.phone-shell.home-screen .profile-avatar-trigger {
  border-color: rgba(42, 58, 56, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: #263231;
  box-shadow: 0 8px 18px rgba(38, 50, 49, 0.06);
}

.phone-shell.home-screen .cart-trigger strong {
  background: #f3f0e8;
  color: #263231;
}

.phone-shell.home-screen .profile-avatar-trigger span {
  background: #fff;
  color: var(--brand-deep);
}

.phone-shell.home-screen .quick-intro {
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.phone-shell.home-screen .quick-intro h1 {
  max-width: 11ch;
  color: #202624;
  font-size: calc(26px * var(--app-font-scale));
  line-height: 1.12;
  word-break: keep-all;
  overflow-wrap: normal;
}

.phone-shell.home-screen .intro-copy {
  max-width: 190px;
  margin-top: 12px;
  color: #5f6865;
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.55;
}

.phone-shell.home-screen .trust-row {
  gap: 7px;
  margin-top: 13px;
}

.phone-shell.home-screen .trust-row span {
  min-height: 22px;
  border: 1px solid rgba(42, 58, 56, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #3f4b49;
  padding: 0 7px;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 850;
}

.phone-shell.home-screen .intro-product-carousel {
  width: 112px;
  border: 1px solid rgba(42, 58, 56, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(38, 50, 49, 0.12);
}

.phone-shell.home-screen .intro-product-carousel .intro-product {
  padding: 10px;
}

.phone-shell.home-screen .hero-dots {
  bottom: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.phone-shell.home-screen .hero-dot {
  background: rgba(42, 58, 56, 0.18);
}

.phone-shell.home-screen .hero-dot.active {
  background: var(--brand-deep);
}

.phone-shell.home-screen .section-block[data-screen="home"] {
  margin: 0;
  padding: 16px 14px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.phone-shell.home-screen .section-heading {
  margin-bottom: 12px;
}

.phone-shell.home-screen .section-heading h2 {
  color: #202624;
  font-size: calc(20px * var(--app-font-scale));
  line-height: 1.2;
}

.phone-shell.home-screen .section-lead {
  color: #69716f;
}

.phone-shell.home-screen .mode-grid {
  margin-bottom: 0;
}

.phone-shell.home-screen .mode-option {
  min-height: 120px;
  border-color: rgba(42, 58, 56, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(38, 50, 49, 0.08);
}

.phone-shell.home-screen .mode-option.selected {
  border-color: rgba(43, 150, 154, 0.28);
  background: #fff;
  box-shadow: 0 18px 40px rgba(38, 50, 49, 0.1);
}

.phone-shell.home-screen .mode-option::after {
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  background: var(--brand-deep);
  box-shadow: 0 12px 24px rgba(36, 124, 128, 0.22);
  animation-duration: 1.85s;
}

.phone-shell.home-screen .choice-title {
  color: #202624;
  font-size: calc(21px * var(--app-font-scale));
}

.phone-shell.home-screen .choice-copy {
  max-width: 230px;
  color: #626d69;
}

.phone-shell.home-screen .delivery-chip {
  min-height: 24px;
  border-radius: 7px;
  background: var(--brand-deep);
  color: #fff;
  padding: 5px 10px;
}

.phone-shell.home-screen .home-brand-intro {
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

.phone-shell.home-screen .store-gallery {
  grid-template-columns: minmax(0, 1.6fr) minmax(76px, 0.62fr);
  gap: 5px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: #e8e2d8;
  box-shadow: 0 16px 34px rgba(38, 50, 49, 0.12);
}

.phone-shell.home-screen .store-photo-main {
  min-height: 164px;
  aspect-ratio: 1.12; /* 配合更高的右侧竖图缩略图，主图同步加高保持底边对齐 */
}

.phone-shell.home-screen .store-photo-stack {
  gap: 5px;
}

.phone-shell.home-screen .store-photo-stack img {
  min-height: 79px;
}

.phone-shell.home-screen .store-gallery figcaption {
  left: 10px;
  bottom: 10px;
  border-radius: 6px;
  background: rgba(25, 31, 30, 0.7);
  padding: 6px 9px;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 850;
}

.phone-shell.home-screen .section-kicker {
  color: var(--brand-deep);
  font-size: calc(10px * var(--app-font-scale));
  letter-spacing: 0;
}

.phone-shell.home-screen .brand-intro-copy h3 {
  margin-top: 5px;
  color: #202624;
  font-size: calc(18px * var(--app-font-scale));
  font-weight: 950;
}

.phone-shell.home-screen .brand-intro-copy p:not(.section-kicker) {
  color: #626d69;
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.55;
}

.phone-shell.home-screen .brand-trust-list {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgba(42, 58, 56, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
}

.phone-shell.home-screen .brand-trust-item {
  min-height: 56px;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid rgba(42, 58, 56, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 10px 12px;
}

.phone-shell.home-screen .brand-trust-item:last-child {
  border-bottom: 0;
}

.phone-shell.home-screen .brand-trust-item i {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #edf6f4;
  color: var(--brand-deep);
}

.phone-shell.home-screen .brand-trust-item strong {
  font-size: calc(12.5px * var(--app-font-scale));
}

.phone-shell.home-screen .brand-trust-item small {
  color: #69716f;
}

.phone-shell.home-screen .home-process-strip {
  margin-top: 14px;
  grid-template-columns: 1fr repeat(3, minmax(0, 0.72fr));
  gap: 5px;
}

.phone-shell.home-screen .home-process-strip strong,
.phone-shell.home-screen .home-process-strip span {
  min-height: 28px;
  border-radius: 7px;
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.home-screen .home-process-strip strong {
  background: #263231;
}

.phone-shell.home-screen .home-process-strip span {
  border: 1px solid rgba(42, 58, 56, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: #45504e;
}

.phone-shell.home-screen .home-client-cases {
  margin: 18px 14px 0;
  border-color: rgba(42, 58, 56, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.phone-shell.home-screen .client-case-thumb {
  border-color: rgba(42, 58, 56, 0.08);
  border-radius: 8px;
  box-shadow: none;
}

.phone-shell.home-screen .social-footer {
  margin-top: 18px;
}

.phone-shell.home-screen .social-slogan {
  color: var(--brand-deep);
}

.floating-whatsapp {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: auto;
  right: max(
    calc(14px + env(safe-area-inset-right)),
    calc((100vw - var(--app-preview-width)) / 2 + 14px)
  );
  bottom: calc(112px + env(safe-area-inset-bottom));
  left: auto;
  z-index: 45;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(24, 93, 55, 0.26), 0 0 0 4px rgba(122, 184, 188, 0.2);
  isolation: isolate;
  touch-action: manipulation;
  transform-origin: 50% 100%;
  animation: whatsapp-attention-bounce 5.2s ease-out infinite;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.floating-whatsapp::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}

.floating-whatsapp i {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: calc(25px * var(--app-font-scale));
  line-height: 1;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  border-color: #fff;
  outline: 3px solid rgba(67, 137, 141, 0.34);
  outline-offset: 3px;
  box-shadow: 0 15px 30px rgba(24, 93, 55, 0.3), 0 0 0 5px rgba(122, 184, 188, 0.24);
  transform: translateY(-2px) scale(1.02);
  animation: none;
}

.floating-whatsapp:active {
  transform: translateY(1px) scale(0.98);
  animation: none;
}

.bottom-summary {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: 100%;
  transform: translateX(-50%);
  display: block;
  padding: 14px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #dce9e9;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -12px 28px rgba(29, 62, 66, 0.12);
}

.phone-shell.home-screen .bottom-summary {
  display: none;
}

.phone-shell.screen-success .bottom-summary {
  display: none;
}

.bottom-summary.selection-hidden .selection-summary {
  display: none;
}

.bottom-summary .selection-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.055);
}

.phone-shell.screen-stock-contact .bottom-summary .selection-summary {
  display: none;
}

.bottom-summary .selection-summary strong {
  margin: 0;
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1.35;
}

.bottom-summary .selection-summary small {
  margin-top: 4px;
  font-size: calc(12px * var(--app-font-scale));
}

.bottom-summary .selection-summary small:empty {
  display: none;
}

.summary-label {
  display: block;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.bottom-summary .summary-label {
  display: none;
}

.summary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.summary-actions.has-back {
  grid-template-columns: 0.82fr 1.12fr 1.12fr;
}

.summary-actions.only-back {
  grid-template-columns: 1fr;
}

.summary-button {
  min-width: 76px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: var(--brand-dark);
  color: #fff;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

a.summary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(31, 154, 158, 0.36);
  outline-offset: 2px;
}

.summary-button:focus-visible,
.primary-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 154, 158, 0.28);
}

.summary-button.secondary {
  background: #edf3f3;
  color: var(--ink);
}

.summary-button[disabled] {
  opacity: 0.42;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(24, 38, 40, 0);
  transition: background 180ms ease;
}

.sheet-backdrop.open {
  background: rgba(24, 38, 40, 0.36);
}

.sheet-panel {
  width: 100%;
  max-height: 82vh;
  overflow: auto;
  padding: 9px 12px calc(14px + env(safe-area-inset-bottom));
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 0 -18px 40px rgba(25, 63, 66, 0.22);
  transform: translateY(104%);
  transition: transform 220ms ease;
}

.sheet-panel.cart-edit-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sheet-backdrop.open .sheet-panel {
  transform: translateY(0);
}

.image-preview {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 25, 27, 0.86);
  backdrop-filter: blur(10px);
}

.image-preview img {
  max-width: min(94vw, 820px);
  max-height: 78vh;
  display: block;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  cursor: zoom-out;
}

.image-preview-close {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: calc(18px * var(--app-font-scale));
}

.image-preview-caption {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100vw - 36px), 520px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.35;
  font-weight: 850;
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(106px + env(safe-area-inset-bottom));
  z-index: 55;
  width: min(calc(100% - 28px), 402px);
  transform: translate(-50%, 12px);
  border-radius: 8px;
  background: #253234;
  color: #fff;
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(27, 48, 51, 0.24);
  opacity: 0;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.45;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.open {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes cart-trigger-bump {
  0% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-2px) scale(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes cart-count-pop {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes quote-arrow-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-screen .mode-option::after,
  .cart-trigger.cart-bump,
  .cart-trigger.cart-bump strong {
    animation-duration: 1ms;
  }

  .cart-flyer {
    display: none;
  }
}

.sheet-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 99px;
  background: #dce7e7;
}

.sheet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sheet-heading h2 {
  margin: 0;
  font-size: calc(20px * var(--app-font-scale));
  font-weight: 950;
}

.sheet-copy {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
}

.sheet-close {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 0 12px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.profile-sheet {
  --profile-font-scale: 1;
  max-height: 88vh;
}

.profile-sheet[data-font-size="xsmall"] {
  --profile-font-scale: 0.86;
}

.profile-sheet[data-font-size="small"] {
  --profile-font-scale: 0.92;
}

.profile-sheet[data-font-size="large"] {
  --profile-font-scale: 1.12;
}

.profile-sheet[data-font-size="xlarge"] {
  --profile-font-scale: 1.22;
}

.profile-sheet.profile-subpage .sheet-heading {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 8px;
}

.profile-sheet.profile-subpage .sheet-heading > div {
  min-width: 0;
  justify-self: center;
  text-align: center;
}

.profile-sheet.profile-subpage .sheet-heading h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.profile-sheet.profile-subpage .profile-back-button,
.profile-sheet.profile-subpage .sheet-close {
  width: 100%;
  padding: 0 8px;
}

.profile-sheet.profile-subpage .profile-back-button {
  justify-self: start;
}

.profile-sheet.profile-subpage .sheet-close {
  justify-self: end;
}

@media (max-width: 360px) {
  .profile-sheet.profile-subpage .sheet-heading {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 4px;
  }

  .profile-sheet.profile-subpage .sheet-heading h2 {
    overflow: visible;
    font-size: calc(15px * var(--app-font-scale));
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .profile-sheet.profile-subpage .profile-back-button,
  .profile-sheet.profile-subpage .sheet-close {
    padding-inline: 4px;
    font-size: calc(11.5px * var(--app-font-scale));
  }
}

.profile-back-button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: #eef5f5;
  color: var(--brand-deep);
  padding: 0 12px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.profile-back-button[hidden] {
  display: none;
}

.profile-main-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  gap: 10px;
  margin-bottom: 12px;
  align-items: stretch;
}

.profile-main-tools[hidden] {
  display: none;
}

.profile-photo-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  cursor: pointer;
}

.profile-photo {
  width: 54px;
  min-width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--brand-dark);
  overflow: hidden;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-photo img,
.profile-photo > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-photo img {
  display: block;
  object-fit: cover;
}

.profile-photo > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 950;
}

.profile-photo-edit strong {
  display: block;
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
  line-height: 1.3;
}

.profile-photo-edit small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 850;
}

.profile-font-control {
  display: grid;
  grid-template-columns: auto minmax(92px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 132px;
  min-height: 46px;
  padding: 7px 14px;
  border: 1px solid rgba(18, 133, 135, 0.16);
  border-radius: 11px;
  background: #f5fbfb;
  --font-slider-progress: 50%;
}

.profile-font-edge {
  color: var(--brand-deep);
  font-weight: 650;
  line-height: 1;
  opacity: 0.72;
  user-select: none;
}

.profile-font-edge-small {
  font-size: calc(11px * var(--app-font-scale));
}

.profile-font-edge-large {
  font-size: calc(19px * var(--app-font-scale));
}

.profile-font-range {
  width: 100%;
  height: 28px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

.profile-font-range:focus {
  outline: none;
}

.profile-font-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0 var(--font-slider-progress), #d9eded var(--font-slider-progress) 100%);
}

.profile-font-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid rgba(18, 133, 135, 0.4);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12, 84, 86, 0.22);
  -webkit-appearance: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.profile-font-range:active::-webkit-slider-thumb {
  transform: scale(1.16);
  box-shadow: 0 2px 6px rgba(12, 84, 86, 0.28);
}

.profile-font-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(24, 162, 164, 0.16), 0 1px 3px rgba(12, 84, 86, 0.22);
}

.profile-font-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #d9eded;
}

.profile-font-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--brand);
}

.profile-font-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(18, 133, 135, 0.4);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(12, 84, 86, 0.22);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.profile-font-range:active::-moz-range-thumb {
  transform: scale(1.16);
  box-shadow: 0 2px 6px rgba(12, 84, 86, 0.28);
}

.profile-form {
  display: grid;
  gap: 10px;
}

.profile-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.profile-section-toggle {
  width: 100%;
  min-height: 50px;
  border: 0;
  background: #fbfdfd;
  color: var(--ink);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.profile-section-toggle i {
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  transition: transform 0.18s ease;
}

.profile-section-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.profile-field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 780;
  line-height: 1.35;
}

.profile-account-actions {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.profile-secondary-entry {
  display: grid;
  padding-top: 2px;
}

.profile-secondary-entry-button {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 900;
  text-align: left;
}

.profile-secondary-entry-button i {
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
}

.profile-phone-row {
  display: grid;
  grid-template-columns: minmax(82px, 104px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.profile-phone-row input {
  width: 100%;
  min-width: 0;
}

.profile-phone-row input:first-child {
  text-align: center;
  font-weight: 950;
  color: var(--brand-dark);
  background: #f6fbfb;
}

.profile-switch-row {
  position: relative;
  min-height: 72px;
  border: 1px solid rgba(111, 178, 178, 0.34);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbfb 100%);
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 14px 14px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(25, 81, 81, 0.06);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.profile-switch-row:hover {
  border-color: rgba(44, 143, 143, 0.5);
  box-shadow: 0 14px 30px rgba(25, 81, 81, 0.1);
}

.profile-switch-row:has(input[type="checkbox"]:checked) {
  border-color: rgba(44, 143, 143, 0.72);
  background: linear-gradient(135deg, #f3fbf9 0%, #e7f6f4 100%);
  box-shadow: 0 14px 32px rgba(44, 143, 143, 0.14);
}

.profile-switch-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.profile-switch-row strong {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.profile-switch-row small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 780;
  line-height: 1.35;
}

.profile-switch-control {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 32px;
}

.profile-switch-row input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 54px;
  height: 32px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  accent-color: var(--brand-dark);
}

.profile-switch-visual {
  position: relative;
  display: block;
  width: 54px;
  height: 32px;
  border-radius: 999px;
  background: #dce8e7;
  border: 1px solid rgba(96, 132, 132, 0.24);
  box-shadow: inset 0 2px 5px rgba(23, 54, 54, 0.1);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.profile-switch-visual::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(20, 61, 61, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.profile-switch-visual::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 11px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(96, 132, 132, 0.5);
  transition: background 0.18s ease, transform 0.18s ease;
}

.profile-switch-row input[type="checkbox"]:checked + .profile-switch-visual {
  background: linear-gradient(135deg, #2c8f8f 0%, #1f7578 100%);
  border-color: rgba(31, 117, 120, 0.86);
  box-shadow: inset 0 2px 6px rgba(13, 58, 58, 0.2), 0 8px 16px rgba(44, 143, 143, 0.22);
}

.profile-switch-row input[type="checkbox"]:checked + .profile-switch-visual::before {
  transform: translateX(22px);
  box-shadow: 0 5px 12px rgba(13, 58, 58, 0.28);
}

.profile-switch-row input[type="checkbox"]:checked + .profile-switch-visual::after {
  background: rgba(255, 255, 255, 0.82);
  transform: translateX(-24px);
}

.profile-switch-row input[type="checkbox"]:focus-visible + .profile-switch-visual {
  outline: 2px solid rgba(44, 143, 143, 0.5);
  outline-offset: 3px;
}

.profile-info-page {
  align-content: start;
}

.profile-info-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4fbfb;
}

.profile-policy-link-card {
  position: relative;
  padding-right: 44px;
  text-decoration: none;
  cursor: pointer;
}

.profile-policy-link-card i {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--brand-dark);
  font-size: calc(14px * var(--app-font-scale));
  transform: translateY(-50%);
}

.profile-policy-link-card:focus-visible {
  outline: 3px solid rgba(44, 143, 143, 0.45);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .profile-policy-link-card:hover {
    border-color: rgba(44, 143, 143, 0.36);
    background: #eef9f9;
  }
}

.profile-info-card.subtle {
  background: #fbfdfd;
}

.profile-contact-card {
  gap: 6px;
  background: #fff;
}

.profile-info-card strong {
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.profile-info-card small {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.45;
}

.profile-inline-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--brand-dark);
  color: #fff;
  padding: 0 12px;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
  text-decoration: none;
}

button.profile-inline-action {
  border: 0;
  cursor: pointer;
}

button.profile-inline-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.profile-inline-action i {
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1;
}

.profile-location-consent-card .profile-inline-action {
  justify-self: start;
}

.profile-logo-upload-card {
  display: grid;
  gap: 8px;
}

.profile-logo-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(18, 133, 135, 0.35);
  border-radius: 8px;
  background: #f8fdfd;
  cursor: pointer;
}

.profile-logo-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.profile-logo-upload-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e5f7f7;
  color: var(--brand-dark);
  font-size: calc(18px * var(--app-font-scale));
}

.profile-logo-upload strong,
.profile-logo-upload small {
  display: block;
}

.profile-logo-upload strong {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.profile-logo-upload small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.4;
}

.profile-logo-file-list {
  display: grid;
  gap: 6px;
}

.profile-logo-file,
.profile-logo-empty {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.profile-logo-empty {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--muted);
}

.profile-logo-file i,
.profile-logo-empty i {
  color: var(--brand-dark);
}

.profile-logo-file strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-logo-file small,
.profile-logo-empty small,
.profile-logo-upload-note {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 820;
}

.profile-logo-remove {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: #fff1f1;
  color: #c85258;
  padding: 0 10px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.profile-logo-demo {
  align-self: center;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 5px 8px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
}

.profile-contact-list {
  display: grid;
  gap: 8px;
}

.profile-contact-row {
  display: grid;
  gap: 2px;
}

.profile-contact-row.compact {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
}

.profile-contact-row small {
  color: var(--muted);
}

.profile-contact-link {
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.profile-about-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-about-tag {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(31, 157, 161, 0.2);
  border-radius: 8px;
  background: #edfafa;
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
}

.profile-map-card {
  min-height: 150px;
  display: grid;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef7f7;
  padding: 10px;
}

.profile-map-fallback {
  display: grid;
  gap: 3px;
  color: var(--brand-dark);
}

.profile-map-fallback strong {
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.profile-map-fallback small {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
}

.profile-map-card iframe {
  display: block;
  width: 100%;
  height: 128px;
  border: 0;
  border-radius: 6px;
}

.profile-support-tip {
  margin: 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.45;
}

.profile-sheet:not(.profile-subpage) .profile-section {
  border-radius: 12px;
}

.profile-sheet:not(.profile-subpage) .profile-section-toggle {
  min-height: 62px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
}

.profile-sheet:not(.profile-subpage) .profile-section-toggle i {
  color: var(--brand-deep);
  font-size: calc(13px * var(--app-font-scale));
}

.profile-sheet.profile-subpage .profile-section {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.profile-sheet.profile-subpage .profile-section-toggle {
  display: none;
}

.profile-sheet.profile-subpage .profile-section-body,
.profile-sheet.profile-subpage .profile-address-fields {
  display: grid;
  gap: 10px;
  padding: 0;
  border-top: 0;
}

.profile-empty {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 850;
  text-align: center;
}

.profile-quote-history-list {
  display: grid;
  gap: 8px;
}

.profile-quote-status-summary {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f4fbfb, #ffffff);
}

.profile-quote-status-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-quote-status-summary-head strong {
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.profile-quote-status-summary-head small {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 800;
  text-align: right;
}

.profile-quote-status-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  /* 关键：作为 grid item 默认 min-width:auto 会撑到内容宽被父级裁掉、滚不动；
     置 0 才缩到列宽、让内容在自身 overflow-x:auto 里横向滑动 */
  min-width: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.profile-quote-status-chips::-webkit-scrollbar {
  display: none;
}

.profile-quote-status-chip {
  min-width: 74px;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}

.profile-quote-status-chip b {
  color: var(--brand-dark);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 950;
  line-height: 1;
}

.profile-quote-status-chip small {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}

.profile-quote-status-chip.selected {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(42, 158, 160, 0.18);
}

.profile-quote-status-chip.selected b,
.profile-quote-status-chip.selected small {
  color: #fff;
}

.profile-quote-status-chip.is-disabled,
.profile-quote-status-chip:disabled {
  background: #f7fbfb;
  border-color: #e4eeee;
  box-shadow: none;
  cursor: default;
  opacity: 0.62;
}

.profile-quote-status-chip.is-disabled b,
.profile-quote-status-chip.is-disabled small,
.profile-quote-status-chip:disabled b,
.profile-quote-status-chip:disabled small {
  color: var(--muted);
}

.profile-subsection-heading {
  display: grid;
  gap: 3px;
}

.profile-subsection-heading strong {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.profile-subsection-heading small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.35;
}

.profile-preference-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(31, 157, 161, 0.18);
  border-radius: 10px;
  background: #eef8f8;
}

.profile-preference-tab {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-dark);
  font-weight: 950;
  box-shadow: none;
}

.profile-preference-tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(16, 86, 88, 0.08);
}

.profile-preference-panel {
  display: grid;
  gap: 10px;
}

.profile-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-choice-grid-quantity {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-choice-grid button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: var(--ink);
  font-weight: 920;
  box-shadow: 0 4px 12px rgba(16, 86, 88, 0.04);
}

.profile-choice-grid button.active {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
  box-shadow: 0 8px 18px rgba(42, 158, 160, 0.2);
}

.profile-invoice-history {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.profile-invoice-history-list {
  display: grid;
  gap: 8px;
}

.profile-invoice-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.profile-invoice-record span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-invoice-record span:last-child {
  justify-items: end;
  text-align: right;
}

.profile-invoice-record strong,
.profile-invoice-record b {
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.profile-invoice-record b {
  color: var(--brand-dark);
}

.profile-invoice-record small,
.profile-invoice-record em {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 800;
}

.profile-invoice-record em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-quote-record {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.profile-quote-record:hover {
  border-color: rgba(42, 158, 160, 0.34);
  background: #f4fbfb;
}

.profile-quote-record:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.profile-quote-record-gallery {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  overflow: hidden;
}

.profile-quote-record-gallery img,
.profile-quote-record-gallery .profile-quote-record-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 8px;
  background: var(--brand-soft);
}

.profile-quote-record-gallery img {
  object-fit: contain;
}

.profile-quote-record-gallery-count-1 img,
.profile-quote-record-gallery-count-1 .profile-quote-record-thumb {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

.profile-quote-record-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-quote-record-copy strong,
.profile-quote-record-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-quote-record-copy strong {
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.profile-quote-record-copy small,
.profile-quote-record-status small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 800;
}

.profile-quote-record-copy .profile-quote-record-more {
  color: var(--brand-dark);
}

.profile-quote-record-status {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.profile-quote-record-status b {
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.profile-quote-record-status.order-status-pickup b {
  color: #0f7f68;
}

.profile-quote-record-status.order-status-shipping b {
  color: var(--brand-dark);
}

@media (max-width: 460px) {
  .profile-quote-record-gallery {
    gap: 5px;
  }

  .profile-quote-record-gallery img,
  .profile-quote-record-gallery .profile-quote-record-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .profile-quote-record-gallery-count-1 img,
  .profile-quote-record-gallery-count-1 .profile-quote-record-thumb {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}

.order-detail-sheet {
  display: grid;
  gap: 12px;
}

.order-detail-body {
  display: grid;
  gap: 12px;
  align-content: start;
  grid-auto-rows: max-content;
}

.order-detail-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.order-detail-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.order-detail-row b {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 850;
}

.order-detail-row small {
  overflow: hidden;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-status-flow {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4fbfb;
}

.order-status-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-status-flow-head strong {
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.order-status-flow-head span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
}

.order-status-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 7px;
}

.order-status-step {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  color: var(--muted);
}

.order-status-step i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-style: normal;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
}

.order-status-step small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 850;
}

.order-status-step.completed i,
.order-status-step.active i {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.order-status-step.active small {
  color: var(--brand-dark);
  font-weight: 950;
}

.order-detail-body h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.order-detail-items {
  display: grid;
  gap: 8px;
}

.order-detail-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.order-detail-item img,
.order-detail-item .profile-quote-record-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: contain;
}

.order-detail-item .catalog-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-detail-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.order-detail-item strong,
.order-detail-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-detail-item strong {
  color: var(--ink);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.order-detail-item small {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
}

.order-detail-item-add {
  grid-column: 2 / 3;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--soft);
  color: var(--brand-dark);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 950;
}

.order-detail-item-add:active {
  transform: translateY(1px);
}

.order-detail-actions {
  display: grid;
}

.order-detail-actions .summary-button {
  min-height: 48px;
}

.order-detail-actions .summary-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.password-input-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.password-input-wrap input {
  border-radius: 8px 0 0 8px;
  border-right: 0;
}

.password-toggle {
  min-width: 82px;
  border: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
  cursor: pointer;
}

.password-toggle i {
  font-size: calc(12px * var(--app-font-scale));
}

.profile-password-block {
  display: grid;
  gap: 6px;
}

.password-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.password-field-heading > span,
.profile-password-hint,
.profile-password-reset p {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.profile-password-hint {
  line-height: 1.35;
}

.profile-password-reset {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(42, 158, 160, 0.18);
  border-radius: 8px;
  background: #f6fcfc;
}

.profile-password-reset p {
  margin: 0;
  line-height: 1.38;
}

.profile-password-page {
  gap: 12px;
  padding: 14px;
}

.profile-password-page .secondary-inline-button,
.profile-password-page .primary-submit {
  width: 100%;
}

.email-code-test-panel {
  margin-top: 12px;
}

.email-code-test-panel label {
  display: grid;
  gap: 6px;
}

.email-code-test-panel select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(26, 94, 105, 0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 850;
  padding: 0 10px;
}

.email-code-test-panel .secondary-inline-button,
.email-code-test-panel .primary-submit {
  width: 100%;
}

.secondary-inline-button {
  min-height: 38px;
  border: 1px solid rgba(42, 158, 160, 0.26);
  border-radius: 8px;
  background: #e9f9f9;
  color: var(--brand-dark);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 950;
}

.compact-submit {
  min-height: 42px;
  font-size: calc(13px * var(--app-font-scale));
}

.profile-form h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  font-weight: 950;
}

.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.profile-logout {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #f8eeee;
  color: var(--danger);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
}

.page-sheet-backdrop {
  align-items: stretch;
  background: #f6f8f7;
}

.page-sheet-backdrop.open {
  background: #f6f8f7;
}

#legal-sheet.page-sheet-backdrop {
  z-index: 65;
}

.page-sheet-backdrop .sheet-panel {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(104%);
}

.page-sheet-backdrop.open .sheet-panel {
  transform: translateX(0);
}

.page-sheet-backdrop .sheet-handle,
.page-sheet-backdrop .section-kicker {
  display: none;
}

.page-sheet-backdrop .sheet-heading {
  flex: 0 0 auto;
  align-items: center;
  min-height: 64px;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.page-sheet-backdrop .sheet-heading h2 {
  margin: 0;
  font-size: calc(20px * var(--app-font-scale));
  line-height: 1.15;
}

.page-sheet-backdrop .sheet-copy {
  margin-top: 4px;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.35;
}

.page-sheet-backdrop .sheet-close {
  min-height: 40px;
  border-radius: 8px;
}

.page-sheet-backdrop .cart-list,
.page-sheet-backdrop .profile-form,
.page-sheet-backdrop .order-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
}

.page-sheet-backdrop .profile-form {
  align-content: start;
  align-items: stretch;
  grid-auto-rows: max-content;
}

.page-sheet-backdrop .profile-section,
.page-sheet-backdrop .profile-actions {
  align-self: start;
}

.page-sheet-backdrop .profile-photo-edit {
  flex: 0 0 auto;
  margin: 10px 12px 0;
  padding: 9px;
}

.page-sheet-backdrop .profile-main-tools {
  flex: 0 0 auto;
  margin: 10px 12px 0;
}

.page-sheet-backdrop .profile-main-tools .profile-photo-edit {
  margin: 0;
  padding: 9px;
}

.page-sheet-backdrop .cart-sheet-actions,
.page-sheet-backdrop .order-detail-actions {
  flex: 0 0 auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
}

.page-sheet-backdrop .profile-actions {
  position: sticky;
  bottom: -10px;
  margin: 0 -12px -10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #fff;
  z-index: 1;
}

.profile-sheet .sheet-heading h2 {
  font-size: calc(20px * var(--profile-font-scale));
}

.profile-sheet .sheet-copy {
  font-size: calc(12px * var(--profile-font-scale));
}

.profile-sheet .profile-photo-edit strong,
.profile-sheet .profile-section-toggle {
  font-size: calc(15px * var(--profile-font-scale));
}

.profile-sheet .profile-photo-edit small,
.profile-sheet .profile-section-toggle i,
.profile-sheet .profile-section-body label > span,
.profile-sheet .profile-address-fields label > span,
.profile-sheet .profile-password-hint,
.profile-sheet .profile-empty {
  font-size: calc(12px * var(--profile-font-scale));
}

.profile-sheet .profile-section-body input,
.profile-sheet .profile-section-body textarea,
.profile-sheet .profile-address-fields input,
.profile-sheet .profile-section-body button,
.profile-sheet .profile-address-fields button,
.profile-sheet .profile-logout,
.profile-sheet .profile-inline-action {
  font-size: calc(14px * var(--profile-font-scale));
}

.profile-sheet .profile-info-card strong {
  font-size: calc(15px * var(--profile-font-scale));
}

.profile-sheet .profile-info-card small {
  font-size: calc(12px * var(--profile-font-scale));
}

.profile-sheet:not(.profile-subpage) .profile-section-toggle {
  min-height: calc(62px * var(--profile-font-scale));
}

.profile-sheet .profile-section-body,
.profile-sheet.profile-subpage .profile-section-body,
.profile-sheet.profile-subpage .profile-address-fields {
  gap: calc(10px * var(--profile-font-scale));
}

.page-sheet-backdrop .order-detail-sheet {
  gap: 0;
}

.language-picker {
  position: relative;
  display: block;
  max-height: 220px;
  margin-top: 14px;
  overflow-y: auto;
  padding: 10px 0 18px;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.no-script-language-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfa;
}

.no-script-language-option {
  padding: 7px 10px;
  border: 1px solid rgba(44, 158, 160, 0.25);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  text-decoration: none;
}

.no-script-language-option.active {
  background: var(--brand-dark);
  color: #fff;
}

.language-picker::-webkit-scrollbar {
  display: none;
}

.language-picker::before,
.language-picker::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  z-index: 1;
  height: 18px;
  pointer-events: none;
}

.language-picker::before {
  top: 0;
  margin-bottom: -18px;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}

.language-picker::after {
  bottom: 0;
  margin-top: -18px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

.language-option {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  text-align: left;
  scroll-snap-align: center;
  transition: color 160ms ease, background 160ms ease, min-height 160ms ease;
}

.language-option:last-child {
  border-bottom: 0;
}

.language-option span {
  font-size: calc(20px * var(--app-font-scale));
  font-weight: 950;
}

.language-option small {
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
}

.language-option.active {
  min-height: 76px;
  color: var(--brand-dark);
  background: linear-gradient(90deg, rgba(44, 158, 160, 0.12), rgba(44, 158, 160, 0));
}

.language-option.active span {
  font-size: calc(26px * var(--app-font-scale));
}

.language-option.active small {
  font-size: calc(13px * var(--app-font-scale));
}

.language-option.active::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand-dark);
}

.language-sheet-panel {
  max-height: min(46vh, 330px);
  overflow: hidden;
  padding: 7px 14px calc(12px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 42px rgba(18, 46, 48, 0.18);
}

.language-sheet-panel .sheet-handle {
  width: 48px;
  height: 4px;
  margin-bottom: 8px;
  background: rgba(44, 158, 160, 0.18);
}

.language-sheet-panel .sheet-heading {
  position: relative;
  display: block;
  min-height: 42px;
  margin: 0;
  padding: 2px 58px 8px;
  text-align: center;
}

.language-sheet-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, calc(21px * var(--app-font-scale)), 23px);
  line-height: 1.12;
  font-weight: 850;
}

.language-sheet-panel .sheet-close {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 54px;
  min-height: 40px;
  border-radius: 10px;
  background: rgba(44, 158, 160, 0.1);
  color: var(--brand-dark);
  font-size: clamp(14px, calc(15px * var(--app-font-scale)), 16px);
}

.language-sheet-panel .language-picker {
  display: grid;
  gap: 7px;
  max-height: 210px;
  margin-top: 0;
  padding: 8px;
  border: 1px solid rgba(44, 158, 160, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(44, 158, 160, 0.05), rgba(255, 255, 255, 0.92));
}

.language-sheet-panel .language-picker::before,
.language-sheet-panel .language-picker::after {
  display: none;
}

.language-sheet-panel .language-picker::before {
  margin-bottom: -12px;
}

.language-sheet-panel .language-picker::after {
  margin-top: -12px;
}

.language-sheet-panel .language-option {
  position: relative;
  min-height: 48px;
  justify-content: center;
  padding: 0 42px;
  border: 1px solid rgba(32, 50, 50, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(18, 46, 48, 0.04);
  text-align: center;
}

.language-sheet-panel .language-option span {
  font-size: clamp(16px, calc(17px * var(--app-font-scale)), 19px);
  font-weight: 800;
}

.language-sheet-panel .language-option.active {
  min-height: 50px;
  border-radius: 12px;
  border-color: rgba(44, 158, 160, 0.55);
  background: linear-gradient(90deg, rgba(44, 158, 160, 0.1), rgba(86, 188, 191, 0.14), rgba(44, 158, 160, 0.07));
  box-shadow: 0 8px 22px rgba(44, 158, 160, 0.12);
}

.language-sheet-panel .language-option.active span {
  font-size: clamp(18px, calc(19px * var(--app-font-scale)), 21px);
}

.language-sheet-panel .language-option.active::before {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  z-index: 1;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-58%) rotate(45deg);
}

.language-sheet-panel .language-option.active::after {
  position: absolute;
  right: 17px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--brand-dark);
}

.auth-sheet {
  max-height: 84vh;
  padding: 9px 14px calc(18px + env(safe-area-inset-bottom));
}

.auth-sheet-heading {
  align-items: flex-start;
}

.auth-sheet .section-kicker {
  color: var(--brand-dark);
  font-size: calc(10px * var(--app-font-scale));
  letter-spacing: 0.04em;
}

.auth-sheet h2 {
  font-size: calc(23px * var(--app-font-scale));
  line-height: 1.15;
}

.auth-form {
  display: grid;
  gap: 11px;
  margin-top: 8px;
}

.auth-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font: inherit;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 850;
}

.auth-form input:focus {
  border-color: rgba(42, 158, 160, 0.64);
  outline: 3px solid rgba(42, 158, 160, 0.12);
}

.auth-row-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}

.auth-link-button {
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--brand-dark);
  padding: 0;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 950;
}

.auth-submit {
  min-height: 48px;
  margin-top: 2px;
}

.auth-reset-panel {
  display: grid;
  gap: 10px;
}

.auth-reset-panel[hidden] {
  display: none;
}

.auth-reset-panel h3 {
  margin: 0 0 2px;
  color: var(--ink);
  font-size: calc(17px * var(--app-font-scale));
}

.auth-reset-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.auth-reset-panel input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 13px;
  font: inherit;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 850;
}

.auth-reset-panel input:focus {
  border-color: rgba(42, 158, 160, 0.64);
  outline: 3px solid rgba(42, 158, 160, 0.12);
}

.auth-reset-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 2px;
}

.auth-reset-actions button {
  min-height: 46px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 2px 12px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.45;
}

.auth-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

.auth-consent a {
  color: var(--brand-dark);
  font-weight: 950;
  text-decoration: none;
}

/* 报价第四步联系卡片内的 GDPR 同意行（#21）：复用 auth-consent 版式，仅调间距 */
.quote-consent {
  margin: 10px 2px 0;
}

.google-login-container {
  width: 100%;
  min-height: 48px;
  display: flex;
  justify-content: center;
}

#google-login-render {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
}

#google-login-render > div,
#google-login-render iframe {
  max-width: 100% !important;
}

.google-login-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(32, 50, 50, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.06);
}

.google-mark {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.google-mark svg {
  width: 20px;
  height: 20px;
}

.auth-helper {
  margin: 11px 2px 0;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.45;
  font-weight: 750;
  text-align: center;
}

.auth-unavailable {
  margin: 12px 0 0;
  border: 1px solid rgba(36, 124, 128, 0.22);
  border-radius: 8px;
  background: #f3f8f8;
  color: var(--ink);
  padding: 13px 14px;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.5;
  text-align: left;
}

/* Full-flow polish pass: cleaner B2B feel, clearer data, less visual noise on mobile. */
.phone-shell.compact-header .app-header {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark) 48%, var(--brand-deep) 100%);
}

.phone-shell.compact-header .search-trigger,
.phone-shell.compact-header .cart-trigger,
.phone-shell.compact-header .language-trigger,
.phone-shell.compact-header .profile-avatar-trigger {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.section-block {
  border-color: rgba(32, 50, 50, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(34, 78, 82, 0.06);
}

.section-heading h2 {
  color: #202624;
}

.product-card,
.choice-card,
.size-row,
.request-summary,
.optional-order-details,
.success-card,
.success-next {
  border-color: rgba(32, 50, 50, 0.1);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(34, 78, 82, 0.055);
}

.product-card {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  position: relative;
}

.product-image-button {
  grid-row: 1 / span 4;
  border-radius: 9px;
}

.product-image-button img {
  background: linear-gradient(180deg, #fbfaf6 0%, #edf6f5 100%);
}

.product-count-badge {
  position: absolute;
  right: 14px;
  top: 18px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid rgba(36, 124, 128, 0.18);
  border-radius: 999px;
  background: rgba(245, 251, 250, 0.94);
  color: var(--brand-deep);
  box-shadow: 0 4px 12px rgba(31, 111, 115, 0.12);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1;
  font-weight: 900;
  pointer-events: none;
}

.product-card .product-name {
  color: #202624;
  font-size: calc(15.5px * var(--app-font-scale));
  width: calc(100% - 54px);
  padding-right: 0;
}

.product-card > small {
  color: #69716f;
  width: calc(100% - 54px);
  padding-right: 0;
}

.product-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 1px;
  padding-right: 0;
}

.product-card-meta span {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(36, 124, 128, 0.18);
  border-radius: 999px;
  background: #f5fbfa;
  color: var(--brand-deep);
  padding: 0 7px;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1;
  font-weight: 900;
}

.product-quote-action {
  color: var(--brand-deep);
}

[data-screen="stock-style"] .choice-card {
  min-height: 78px;
  padding: 8px;
  border-radius: 10px;
}

[data-screen="stock-style"] .choice-card img,
[data-screen="stock-style"] .choice-card-icon {
  width: 60px;
  border-radius: 8px;
}

[data-screen="stock-style"] .choice-card-copy {
  padding-right: 68px;
}

.style-tags span,
.style-size-badge {
  border-radius: 999px;
  background: #f0f7f6;
  color: var(--brand-deep);
}

.choice-card.selected,
.product-card.selected,
.size-row.active,
.print-option.selected,
.toggle-chip.selected,
.segment.selected {
  border-color: var(--brand-deep);
  background: #f3fbfa;
  box-shadow: inset 0 0 0 1px rgba(36, 124, 128, 0.12), 0 10px 24px rgba(34, 78, 82, 0.06);
}

.print-option.selected,
.segment.selected {
  color: #1f6f73;
}

[data-screen="stock-size"] .section-block {
  margin-top: 10px;
  padding: 12px;
}

[data-screen="stock-size"] .context-strip {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  background: #fbfdfc;
}

[data-screen="stock-size"] .context-strip img {
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
}

[data-screen="stock-size"] .stock-context-media {
  width: 68px;
}

[data-screen="stock-size"] .quick-config-panel {
  padding: 6px;
}

.print-option,
.segment {
  border-radius: 9px;
}

[data-screen="stock-size"] .size-row {
  padding: 7px;
}

[data-screen="stock-size"] .size-main {
  grid-template-columns: minmax(0, 1fr) 72px;
}

[data-screen="stock-size"] .size-copy strong {
  font-size: calc(12.5px * var(--app-font-scale));
}

[data-screen="stock-size"] .size-copy small {
  font-size: calc(9.5px * var(--app-font-scale));
}

[data-screen="stock-size"] .qty-control {
  height: 32px;
  grid-template-columns: 26px 1fr 26px;
}

[data-screen="stock-size"] .price-ladder-compact {
  justify-content: flex-start;
}

[data-screen="stock-size"] .price-ladder-grid {
  width: 100%;
}

[data-screen="stock-size"] .price-ladder-compact .price-tier {
  flex: 1 1 0;
  min-width: 0;
  min-height: 27px;
  padding: 4px 5px;
  border-radius: 8px;
  font-size: calc(10px * var(--app-font-scale));
}

.price-tier.selected {
  border-color: var(--brand-deep);
  background: #e9f8f6;
}

.screen-stock-contact .section-lead {
  border-radius: 9px;
  background: #eef8f6;
}

.order-summary-panel .cart-item {
  border-radius: 9px;
  background: #fff;
}

.order-summary-panel .cart-item img {
  border-radius: 7px;
}

.cart-qty-control,
.qty-control {
  border-radius: 8px;
}

.cart-edit,
.cart-remove {
  border-radius: 7px;
}

.summary-actions.has-back {
  grid-template-columns: 0.72fr 1.02fr 1.16fr;
}

.summary-button {
  min-width: 0;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 8px;
  background: var(--brand-dark);
  box-shadow: 0 10px 20px rgba(43, 150, 154, 0.14);
  font-size: calc(13px * var(--app-font-scale));
  letter-spacing: 0;
  white-space: nowrap;
}

.summary-button.secondary {
  background: #eef3f2;
  color: #263231;
  box-shadow: none;
}

.phone-shell.home-screen .quick-intro h1 {
  max-width: none;
}

@media (max-width: 360px) {
  .phone-shell.home-screen .quick-intro {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px;
  }

  .phone-shell.home-screen .quick-intro h1 {
    font-size: calc(24px * var(--app-font-scale));
    line-height: 1.12;
  }

  .phone-shell.home-screen .intro-copy {
    max-width: none;
    font-size: calc(12px * var(--app-font-scale));
  }

  .phone-shell.home-screen .intro-product-carousel {
    width: 104px;
  }

  .quick-intro {
    grid-template-columns: 1fr 96px;
  }

  .intro-product-carousel {
    width: 96px;
  }

  .mode-grid,
  .product-grid,
  .home-product-preview,
  .brand-trust-list,
  .quick-config-row,
  .custom-bag-preview,
  .custom-size-grid,
  .invoice-fields,
  .address-fields,
  .order-option-grid {
    grid-template-columns: 1fr;
  }

  .custom-bag-preview {
    min-height: auto;
  }

}

@media (max-width: 260px) {
  html,
  body {
    overflow-x: hidden;
  }

  .phone-shell {
    overflow-x: hidden;
    box-shadow: none;
  }

  .app-header,
  .phone-shell.home-screen .app-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .topbar {
    gap: 6px;
  }

  .brand-logo,
  .phone-shell.home-screen .brand-logo {
    width: 68px;
  }

  .phone-shell.compact-header .brand-logo {
    width: 52px;
  }

  .header-actions {
    gap: 4px;
  }

  .search-trigger,
  .cart-trigger,
  .language-trigger,
  .profile-avatar-trigger {
    min-height: 30px;
    height: 30px;
    border-radius: 9px;
    gap: 3px;
    padding: 0 6px;
    font-size: calc(10px * var(--app-font-scale));
    white-space: nowrap;
  }

  .search-trigger {
    width: 30px;
    min-width: 30px;
    padding: 0;
  }

  .cart-trigger {
    min-width: 42px;
  }

  .cart-trigger strong {
    min-width: 16px;
    min-height: 16px;
    font-size: calc(9px * var(--app-font-scale));
  }

  .language-trigger {
    min-width: 46px;
  }

  .language-trigger i {
    font-size: calc(9px * var(--app-font-scale));
  }

  .profile-avatar-trigger {
    width: 30px;
    min-width: 30px;
  }

  .phone-shell.home-screen .quick-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }

  .phone-shell.home-screen .quick-intro h1 {
    max-width: none;
    font-size: calc(24px * var(--app-font-scale));
    line-height: 1.12;
  }

  .phone-shell.home-screen .intro-copy {
    max-width: none;
    font-size: calc(12px * var(--app-font-scale));
  }

  .phone-shell.home-screen .intro-product-carousel {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .phone-shell.home-screen .intro-product-carousel .intro-product {
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
  }

  .phone-shell.home-screen .trust-row span {
    padding: 0 5px;
    font-size: calc(9px * var(--app-font-scale));
  }

  .section-block {
    margin: 10px 8px;
    padding: 12px;
    border-radius: 10px;
  }

  .section-heading,
  [data-screen="stock-style"] .section-heading,
  [data-screen="stock-size"] .section-heading {
    display: block;
  }

  .section-heading h2,
  .phone-shell.home-screen .section-heading h2 {
    max-width: none;
    font-size: calc(21px * var(--app-font-scale));
    line-height: 1.16;
  }

  .section-lead {
    font-size: calc(12px * var(--app-font-scale));
  }

  .sort-toggle,
  .heading-actions {
    width: 100%;
    margin-top: 8px;
    justify-content: flex-start;
  }

  .sort-toggle-button {
    min-width: 0;
    flex: 1 1 0;
    padding: 0 8px;
  }

  .product-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }

  .product-image-button {
    grid-row: auto;
  }

  .product-image-button img {
    aspect-ratio: 1;
  }

  .product-style-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .product-card-meta {
    gap: 4px;
  }

  [data-screen="stock-style"] .choice-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
  }

  [data-screen="stock-style"] .choice-card img,
  [data-screen="stock-style"] .choice-card-icon {
    width: 52px;
  }

  [data-screen="stock-style"] .choice-card-copy {
    padding-right: 0;
  }

  [data-screen="stock-style"] .style-size-badge {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
  }

  .size-main,
  [data-screen="stock-size"] .size-main {
    grid-template-columns: 1fr;
  }

  .qty-control {
    justify-self: start;
  }

  .price-ladder-compact .price-ladder-grid,
  [data-screen="stock-size"] .price-ladder-grid {
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
  }

  [data-screen="stock-size"] .price-ladder-compact .price-tier {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .bottom-summary {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .bottom-summary .selection-summary {
    padding: 8px 10px;
  }

  .summary-actions {
    gap: 6px;
  }

  .summary-actions.has-back {
    grid-template-columns: 0.82fr 1fr 1fr;
  }

  .summary-button {
    min-height: 38px;
    padding: 0 4px;
    font-size: calc(12px * var(--app-font-scale));
  }
}

@media (min-width: 640px) {
  .phone-shell.screen-stock-style {
    width: min(100%, var(--app-style-preview-width));
  }

  .phone-shell.screen-stock-style .choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .phone-shell.screen-stock-style .choice-card {
    min-height: 116px;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
  }

  .phone-shell.screen-stock-style .choice-card img,
  .phone-shell.screen-stock-style .choice-card-icon {
    width: 76px;
    border-radius: 10px;
  }

  .phone-shell.screen-stock-style .choice-card-copy {
    padding-right: 0;
  }

  .phone-shell.screen-stock-style .style-size-badge {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-top: 0;
  }

  .phone-shell.screen-stock-style .style-tags {
    gap: 5px;
    margin-top: 7px;
  }
}

.phone-shell.screen-stock-product .section-block[data-screen="stock-product"],
.phone-shell.screen-stock-style .section-block[data-screen="stock-style"] {
  height: max(360px, calc(100dvh - var(--flow-sticky-total-height) - 8px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
}

.stock-choice-fixed-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  margin: -12px -12px 0;
  padding: 12px 12px 8px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 10px 18px rgba(34, 78, 82, 0.04);
}

.stock-choice-scroll-body {
  flex: 1 1 auto;
  min-height: 116px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 72px;
  scrollbar-width: thin;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-grid,
.phone-shell.screen-stock-style [data-screen="stock-style"] .choice-list {
  margin-top: 0;
}

.phone-shell.screen-stock-style [data-screen="stock-style"] .stock-choice-scroll-body .style-gallery {
  padding-bottom: 0;
}

/* Step 2: Taobao-style two-column product cards without a left navigation rail. */
[data-screen="stock-style"] #style-list.choice-list {
  display: block;
}

[data-screen="stock-style"] .style-large-card-layout {
  display: block;
  width: 100%;
}

[data-screen="stock-style"] .style-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
  padding-bottom: 98px;
}

[data-screen="stock-style"] .style-gallery-card.choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  text-align: left;
}

[data-screen="stock-style"] .style-gallery-media {
  display: block;
  position: relative;
  width: 100%;
  padding: 6px 6px 0;
}

[data-screen="stock-style"] .style-gallery-media > img,
[data-screen="stock-style"] .style-gallery-media > .choice-card-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfaf6 0%, #edf6f5 100%);
}

[data-screen="stock-style"] .style-gallery-media > img {
  object-fit: contain;
}

[data-screen="stock-style"] .style-gallery-media > .choice-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-deep);
  font-size: calc(30px * var(--app-font-scale));
}

[data-screen="stock-style"] .style-gallery-media > .catalog-image-placeholder {
  background: var(--brand-soft);
}

[data-screen="stock-style"] .style-gallery-copy.choice-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px 9px;
}

[data-screen="stock-style"] .style-parent-product {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--brand-deep);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-screen="stock-style"] .style-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

[data-screen="stock-style"] .style-gallery-card strong {
  min-width: 0;
  flex: 1 1 auto;
  color: #202624;
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.22;
}

[data-screen="stock-style"] .style-gallery-card small {
  margin-top: 0;
  color: #687575;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.32;
  min-height: calc(27px * var(--app-font-scale));
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-screen="stock-style"] .style-card-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--brand-deep);
  background: rgba(240, 250, 248, 0.96);
  border: 1px solid rgba(44, 158, 160, 0.16);
  font-size: calc(11px * var(--app-font-scale));
}

[data-screen="stock-style"] .style-gallery-card:hover,
[data-screen="stock-style"] .style-gallery-card:focus-visible {
  border-color: rgba(44, 158, 160, 0.46);
  box-shadow: 0 12px 28px rgba(33, 80, 83, 0.1);
}

[data-screen="stock-style"] .style-empty-state {
  display: grid;
  place-items: center;
  gap: 9px;
  min-height: 220px;
  margin: 2px 0 96px;
  padding: 28px 22px;
  border: 1px dashed rgba(44, 158, 160, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #1d3434;
  text-align: center;
}

[data-screen="stock-style"] .style-empty-state strong {
  font-size: calc(17px * var(--app-font-scale));
  line-height: 1.28;
}

[data-screen="stock-style"] .style-empty-state small {
  max-width: 320px;
  color: #647474;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.42;
}

@media (min-width: 640px) {
  .phone-shell.screen-stock-style {
    width: min(100%, var(--app-style-preview-width));
  }

  .phone-shell.screen-stock-style [data-screen="stock-style"] #style-list.choice-list {
    display: block;
  }

  .phone-shell.screen-stock-style [data-screen="stock-style"] .style-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .phone-shell.screen-stock-style [data-screen="stock-style"] .style-gallery-media > img,
  .phone-shell.screen-stock-style [data-screen="stock-style"] .style-gallery-media > .choice-card-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .phone-shell.screen-stock-style [data-screen="stock-style"] .style-gallery-card strong {
    font-size: calc(16px * var(--app-font-scale));
  }

  .phone-shell.screen-stock-style [data-screen="stock-style"] .style-card-topline {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
  }
}

@media (max-width: 380px) {
  [data-screen="stock-style"] .style-gallery-media > img,
  [data-screen="stock-style"] .style-gallery-media > .choice-card-icon {
    height: auto;
    aspect-ratio: 1;
  }
}

/* Proportion harmonization: keep every quote step on the same compact visual rhythm. */
:root {
  --flow-panel-radius: 12px;
  --flow-card-radius: 10px;
  --flow-panel-gap: 10px;
  --flow-panel-padding: 13px;
}

html {
  scroll-padding-top: 124px;
}

.wizard-panel {
  scroll-margin-top: 124px;
}

.phone-shell.compact-header .section-block.wizard-panel {
  margin: 12px 12px 0;
  padding: var(--flow-panel-padding);
  border-radius: var(--flow-panel-radius);
}

.phone-shell.compact-header .section-heading {
  gap: var(--flow-panel-gap);
  margin-bottom: var(--flow-panel-gap);
}

.phone-shell.compact-header .section-heading h2 {
  font-size: calc(20px * var(--app-font-scale));
  line-height: 1.18;
}

.phone-shell.compact-header .section-lead {
  margin-top: 5px;
}

.product-grid,
.choice-list,
.size-list,
.lead-form,
.order-summary-list,
.profile-quote-history-list {
  gap: var(--flow-panel-gap);
}

.product-card,
.choice-card,
.style-gallery-card.choice-card,
.size-row,
.request-summary,
.optional-order-details,
.order-summary-panel,
.order-summary-panel .cart-item,
.cart-item,
.upload-box,
.profile-section,
.profile-quote-record,
.success-card,
.success-next {
  border-radius: var(--flow-card-radius);
}

.phone-shell.screen-stock-product .product-card {
  min-height: 146px;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 11px;
}

.phone-shell.screen-stock-product .product-card .product-name {
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1.18;
}

.phone-shell.screen-stock-style [data-screen="stock-style"] .style-gallery {
  gap: var(--flow-panel-gap);
  padding-bottom: 0;
}

[data-screen="stock-style"] .style-gallery-copy.choice-card-copy {
  gap: 3px;
  padding: 7px 8px 8px;
}

[data-screen="stock-style"] .style-gallery-card .style-size-badge,
[data-screen="stock-style"] .style-gallery-card .style-tags span {
  padding: 3px 6px;
}

.phone-shell.screen-stock-size .section-block[data-screen="stock-size"] {
  padding: 12px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 116px;
  gap: 12px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-context-media {
  width: 96px;
  aspect-ratio: 1;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .quick-config-panel {
  margin-bottom: 0;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-list {
  gap: 8px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row {
  padding: 8px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row:not(.active) .size-main {
  min-height: 46px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active {
  padding: 7px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .size-main {
  min-height: 38px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .size-print-options {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px 8px;
  margin-top: 5px;
  padding-top: 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .size-active-price {
  min-height: 20px;
  padding: 1px 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .size-print-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .size-collapse-button {
  min-width: 54px;
  height: 30px;
  padding: 0 11px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .price-ladder-compact {
  grid-column: 1 / -1;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .price-ladder-grid {
  gap: 5px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active .price-ladder-compact .price-tier {
  min-height: 25px;
  padding: 3px 5px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy strong {
  font-size: calc(13.25px * var(--app-font-scale));
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-price-default {
  background: #f4faf9;
  color: var(--brand-deep);
}

.phone-shell.screen-stock-contact .lead-form {
  gap: 12px;
}

.phone-shell.screen-stock-contact .order-summary-panel {
  margin-top: 10px;
  padding: 11px;
}

.phone-shell.screen-stock-contact .order-optional-stack {
  grid-template-columns: 1fr;
  gap: 8px;
}

.phone-shell.screen-stock-contact .optional-order-details[open] {
  grid-column: 1 / -1;
}

.phone-shell.screen-stock-contact .optional-order-details summary {
  min-height: 66px;
  padding: 9px 10px;
  align-content: center;
}

.phone-shell.screen-stock-contact .optional-order-details summary span,
.phone-shell.screen-stock-contact .optional-order-details summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.phone-shell.screen-stock-contact .optional-order-details summary span {
  font-size: calc(13px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .optional-order-details summary small {
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item {
  padding: 9px;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item img {
  width: 50px;
  aspect-ratio: 1;
}

.phone-shell.screen-stock-contact .order-note-field {
  margin: 7px 2px 4px;
}

.phone-shell.screen-stock-contact .order-note-field textarea {
  min-height: 54px;
  padding: 8px 10px;
  font-size: calc(12px * var(--app-font-scale));
}

.bottom-summary {
  padding: 8px 11px calc(9px + env(safe-area-inset-bottom));
}

.bottom-summary .selection-summary {
  margin-bottom: 7px;
  padding: 8px 10px;
  border-radius: var(--flow-card-radius);
}

.summary-actions {
  gap: 8px;
}

.summary-button {
  min-height: 42px;
  border-radius: var(--flow-card-radius);
}

/* Home premium pass: quieter first screen and stronger Milan showroom trust section. */
.phone-shell.home-screen .app-header {
  background: #f8f5ef;
  padding: 15px 16px 24px;
}

.phone-shell.home-screen .app-header::before {
  display: none;
}

.phone-shell.home-screen .quick-intro {
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 16px;
  margin-top: 24px;
}

.phone-shell.home-screen .quick-intro h1 {
  max-width: 12ch;
  font-size: calc(27px * var(--app-font-scale));
  line-height: 1.1;
}

.phone-shell.home-screen .intro-copy {
  max-width: 226px;
  margin-top: 11px;
  color: #56615e;
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.5;
}

.phone-shell.home-screen .trust-row {
  gap: 6px;
  margin-top: 12px;
}

.phone-shell.home-screen .trust-row span {
  min-height: 24px;
  border-color: rgba(42, 58, 56, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #35413f;
  padding: 0 8px;
}

.phone-shell.home-screen .intro-product-carousel {
  width: 118px;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(38, 50, 49, 0.12);
}

.phone-shell.home-screen .intro-product-carousel .intro-product {
  padding: 9px;
}

.phone-shell.home-screen .section-block[data-screen="home"] {
  padding-top: 15px;
}

.phone-shell.home-screen .section-heading {
  margin-bottom: 10px;
}

.phone-shell.home-screen .section-heading h2 {
  font-size: calc(21px * var(--app-font-scale));
}

.phone-shell.home-screen .mode-option {
  min-height: 112px;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(38, 50, 49, 0.075);
}

.phone-shell.home-screen .mode-option.selected {
  box-shadow: 0 18px 36px rgba(38, 50, 49, 0.095);
}

.phone-shell.home-screen .choice-title {
  font-size: calc(20px * var(--app-font-scale));
}

.phone-shell.home-screen .choice-copy {
  max-width: 238px;
}

.phone-shell.home-screen .home-brand-intro {
  margin-top: 26px;
}

.phone-shell.home-screen .store-gallery {
  grid-template-columns: minmax(0, 1.6fr) minmax(82px, 0.62fr);
  gap: 4px;
  margin-bottom: 17px;
  border: 1px solid rgba(42, 58, 56, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(38, 50, 49, 0.13);
}

.phone-shell.home-screen .store-gallery img {
  filter: saturate(0.96) contrast(1.02);
}

.phone-shell.home-screen .store-photo-main {
  min-height: 176px;
  aspect-ratio: 1.62;
}

.phone-shell.home-screen .store-photo-stack {
  gap: 4px;
}

.phone-shell.home-screen .store-photo-stack img {
  min-height: 86px;
}

.phone-shell.home-screen .store-gallery figcaption {
  left: 9px;
  bottom: 9px;
  border-radius: 6px;
  background: rgba(20, 27, 26, 0.78);
  padding: 6px 9px;
  font-weight: 850;
}

.phone-shell.home-screen .brand-intro-copy {
  padding: 0 2px;
}

.phone-shell.home-screen .section-kicker {
  color: var(--brand-deep);
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.home-screen .brand-intro-copy h3 {
  margin-top: 5px;
  font-size: calc(19px * var(--app-font-scale));
  line-height: 1.18;
}

.phone-shell.home-screen .brand-intro-copy p:not(.section-kicker) {
  max-width: 34em;
  color: #5d6764;
}

.phone-shell.home-screen .home-stats-strip {
  gap: 0;
  margin-top: 12px;
  border-block: 1px solid rgba(42, 58, 56, 0.1);
}

.phone-shell.home-screen .home-stat {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 9px 4px;
}

.phone-shell.home-screen .home-stat + .home-stat {
  border-inline-start: 1px solid rgba(42, 58, 56, 0.1);
}

.phone-shell.home-screen .home-stat strong {
  font-size: calc(14px * var(--app-font-scale));
}

.phone-shell.home-screen .home-stat small {
  font-size: calc(9.5px * var(--app-font-scale));
  line-height: 1.25;
}

.phone-shell.home-screen .brand-trust-list {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(38, 50, 49, 0.055);
}

.phone-shell.home-screen .brand-trust-item {
  min-height: 58px;
  padding: 10px 12px;
}

.phone-shell.home-screen .brand-trust-item i {
  border-radius: 8px;
  background: #f0f4f2;
}

.phone-shell.home-screen .brand-trust-item strong {
  font-size: calc(12.75px * var(--app-font-scale));
}

.phone-shell.home-screen .home-process-strip {
  margin-top: 13px;
}

@media (max-width: 360px) {
  .phone-shell.home-screen .quick-intro {
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 12px;
  }

  .phone-shell.home-screen .intro-product-carousel {
    width: 106px;
  }

  .phone-shell.home-screen .quick-intro h1 {
    font-size: calc(24px * var(--app-font-scale));
  }

  .phone-shell.home-screen .store-photo-main {
    min-height: 154px;
  }

  .phone-shell.home-screen .store-photo-stack img {
    min-height: 75px;
  }
}

/* Typography premium pass: modern sans stack with calmer display weights. */
.phone-shell {
  font-variant-numeric: tabular-nums;
}

.quick-intro h1,
.section-heading h2,
.brand-intro-copy h3,
.choice-title,
.product-card .product-name,
.style-gallery-card strong,
.size-copy strong,
.cart-item strong,
.profile-section-toggle,
.success-card h2 {
  font-family: var(--font-display);
}

.phone-shell.home-screen .quick-intro h1 {
  font-weight: 850;
}

.section-heading h2,
.brand-intro-copy h3,
.choice-title,
.success-card h2 {
  font-weight: 850;
}

.product-card .product-name,
.style-gallery-card strong,
.size-copy strong,
.cart-item strong,
.profile-section-toggle span {
  font-weight: 850;
}

.summary-button,
.delivery-chip,
.trust-row span,
.brand-trust-item strong,
.home-process-strip strong,
.home-process-strip span,
.size-price,
.size-print-chip,
.price-tier strong {
  font-weight: 800;
}

/* Flow pages: keep the fixed top area compact so products appear earlier. */
:root {
  --flow-sticky-header-height: 44px;
  --flow-sticky-total-height: 90px;
}

html {
  scroll-padding-top: var(--flow-sticky-total-height);
}

.wizard-panel {
  scroll-margin-top: var(--flow-sticky-total-height);
}

.phone-shell.compact-header .app-header {
  padding: 6px 12px;
}

.phone-shell.compact-header .topbar {
  min-height: 32px;
}

.phone-shell.compact-header .brand-logo {
  width: 68px;
}

.phone-shell.compact-header .header-actions {
  gap: 6px;
}

.phone-shell.compact-header .search-trigger,
.phone-shell.compact-header .cart-trigger,
.phone-shell.compact-header .language-trigger,
.phone-shell.compact-header .profile-avatar-trigger {
  min-height: 32px;
  border-radius: 11px;
}

.phone-shell.compact-header .search-trigger,
.phone-shell.compact-header .cart-trigger,
.phone-shell.compact-header .language-trigger {
  padding: 0 9px;
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.compact-header .cart-trigger {
  min-width: 50px;
}

.phone-shell.compact-header .search-trigger {
  min-width: 32px;
  width: 32px;
  padding: 0;
}

.phone-shell.compact-header .cart-trigger strong {
  min-width: 18px;
  min-height: 18px;
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.compact-header .profile-avatar-trigger {
  width: 32px;
  min-width: 32px;
  height: 32px;
}

.phone-shell.compact-header .step-track {
  top: var(--flow-sticky-header-height);
  padding: 8px 14px 7px;
}

.phone-shell.compact-header .step-meta {
  margin-bottom: 6px;
}

.phone-shell.compact-header .step-meta span {
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.compact-header .step-meta strong {
  font-size: calc(13px * var(--app-font-scale));
}

.phone-shell.compact-header .step-dot {
  height: 4px;
}

.phone-shell.compact-header .section-block.wizard-panel {
  margin: 8px 12px 0;
  padding: 10px;
}

.phone-shell.compact-header .section-heading {
  gap: 8px;
  margin-bottom: 8px;
}

.phone-shell.compact-header .section-kicker {
  margin-bottom: 2px;
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.compact-header .section-heading h2 {
  font-size: calc(18px * var(--app-font-scale));
  line-height: 1.16;
}

.phone-shell.compact-header .section-lead {
  margin-top: 3px;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.28;
}

.phone-shell.compact-header .heading-actions {
  gap: 4px;
}

.phone-shell.compact-header .micro-note {
  min-height: 26px;
  padding: 0 10px;
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.compact-header .sort-toggle,
.phone-shell.compact-header .sort-toggle-compact {
  min-height: 28px;
  margin-top: 0;
  padding: 2px;
}

.phone-shell.compact-header .sort-toggle-button,
.phone-shell.compact-header .sort-toggle-compact .sort-toggle-button {
  min-height: 22px;
  padding: 0 8px;
  font-size: calc(10px * var(--app-font-scale));
}

/* Size step bottom bar: keep the active size card clear in short mobile viewports. */
.phone-shell.screen-stock-size.selection-summary-screen {
  padding-bottom: calc(148px + env(safe-area-inset-bottom));
}

.phone-shell.screen-stock-size .bottom-summary {
  padding: 6px 10px calc(7px + env(safe-area-inset-bottom));
}

.phone-shell.screen-stock-size .bottom-summary .selection-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  margin-bottom: 6px;
  padding: 7px 10px;
  border-radius: 10px;
}

.phone-shell.screen-stock-size .bottom-summary .selection-summary strong {
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.2;
}

.phone-shell.screen-stock-size .bottom-summary .selection-summary small {
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.25;
}

.phone-shell.screen-stock-size .summary-button {
  min-height: 39px;
  border-radius: 10px;
}

/* UX v2 quote-send flow: keep cart rows and the generated quote page compact. */
.cart-item {
  grid-template-rows: auto auto;
  min-height: 0;
}

.cart-copy {
  display: grid;
  gap: 3px;
}

.cart-copy small {
  margin-top: 0;
}

.cart-copy .cart-spec {
  color: #5f6f72;
}

.cart-copy .cart-price {
  color: var(--amber);
  font-weight: 850;
}

.cart-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(104px, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}

.cart-item:not(.cart-item-selectable) .cart-actions,
.order-summary-panel .cart-actions {
  grid-column: 2;
}

.cart-item-selectable .cart-actions {
  grid-column: 3;
}

.cart-qty-control,
.order-summary-panel .cart-qty-control {
  width: 100%;
  min-width: 104px;
  flex: initial;
  flex-basis: auto;
}

.cart-edit,
.cart-remove {
  min-width: 48px;
  padding: 0 9px;
}

.success-panel {
  gap: 10px;
}

.success-card {
  padding: 18px 16px;
}

.success-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 10px;
  font-size: calc(23px * var(--app-font-scale));
}

.success-card h2 {
  margin: 4px 0 6px;
  font-size: calc(21px * var(--app-font-scale));
}

.success-card p:not(.section-kicker) {
  max-width: 310px;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
}

.success-next {
  padding: 12px;
}

.success-next h3 {
  margin-bottom: 8px;
  font-size: calc(15px * var(--app-font-scale));
}

.success-quote-detail {
  display: grid;
  gap: 10px;
}

.quote-customer-info {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(43, 150, 154, 0.18);
  border-radius: 8px;
  background: #f4fbfb;
}

.quote-customer-info h4 {
  margin: 0;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.2;
}

.quote-customer-info dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.quote-customer-info div {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.quote-customer-info dt {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.25;
}

.quote-customer-info dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quote-detail-items {
  overflow: hidden;
  border-top: 1px solid #dbe8e7;
  border-bottom: 1px solid #dbe8e7;
  background: #fff;
}

.quote-detail-item {
  display: grid;
  gap: 3px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid #e4eeee;
  border-radius: 0;
  background: transparent;
}

.quote-detail-item:last-child {
  border-bottom: 0;
}

.quote-detail-item.has-image {
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.quote-detail-media {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
}

.quote-detail-thumb {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(43, 150, 154, 0.14);
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.quote-detail-media .quote-detail-image-missing {
  color: var(--brand-deep);
  font-size: calc(17px * var(--app-font-scale));
}

.quote-detail-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.quote-detail-title-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.quote-detail-title-row > small {
  flex: 0 0 auto;
  color: var(--brand-deep);
  font-size: calc(9px * var(--app-font-scale));
  font-weight: 900;
  line-height: 1;
}

.quote-detail-title-row > strong {
  min-width: 0;
}

.quote-detail-item strong {
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.25;
}

.quote-detail-item span,
.quote-detail-item small,
.quote-detail-empty,
.quote-detail-disclaimer,
.quote-send-panel p {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.4;
}

.quote-detail-item small {
  color: var(--brand-deep);
  font-weight: 850;
}

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

.quote-detail-price-row > strong {
  flex: 0 0 auto;
  color: var(--brand-deep);
  font-size: calc(11.5px * var(--app-font-scale));
  white-space: nowrap;
}

.quote-confirmation-summary {
  overflow: hidden;
  border: 1px solid #d7e7e5;
  border-radius: 8px;
  background: #fff;
}

.quote-detail-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 0;
  background: #eff8f7;
  color: var(--brand-deep);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 850;
}

.quote-detail-total span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.quote-detail-total span b {
  color: var(--brand-deep);
}

.quote-detail-total span small {
  color: var(--muted);
  font-size: calc(9.5px * var(--app-font-scale));
  font-weight: 750;
}

.quote-detail-total strong {
  font-size: calc(14px * var(--app-font-scale));
  white-space: nowrap;
}

.quote-confirmation-list {
  margin: 0;
  padding: 0 12px;
}

.quote-confirmation-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #e7eeee;
}

.quote-confirmation-row:last-child {
  border-bottom: 0;
}

.quote-confirmation-row dt,
.quote-confirmation-row dd {
  margin: 0;
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.35;
}

.quote-confirmation-row dt {
  color: var(--muted);
  font-weight: 760;
}

.quote-confirmation-row dd {
  min-width: 0;
  color: var(--ink);
  font-weight: 850;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.quote-confirmation-row.is-pending dd {
  color: #956b28;
}

.quote-confirmation-row.is-emphasized {
  margin: 0 -12px;
  padding: 10px 12px;
  border-bottom: 0;
  background: #f4fafa;
}

.quote-confirmation-row.is-emphasized dt,
.quote-confirmation-row.is-emphasized dd {
  color: var(--brand-deep);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 900;
}

.quote-detail-disclaimer,
.quote-send-panel p,
.quote-detail-empty {
  margin: 0;
}

.quote-detail-note {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f8f8;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.4;
}

.quote-detail-note strong {
  color: var(--brand-deep);
  font-size: calc(11px * var(--app-font-scale));
}

.quote-detail-note span {
  white-space: pre-wrap;
}

.quote-detail-tax-confirmation {
  min-height: 40px;
  margin: 0;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #deebea;
  border-bottom: 1px solid #deebea;
}

.quote-detail-tax-confirmation > strong {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
}

.quote-detail-tax-confirmation > span {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}

.quote-detail-tax-confirmation b {
  color: var(--brand-deep);
  font-size: calc(11px * var(--app-font-scale));
}

.quote-detail-tax-confirmation.is-pending b {
  color: #9b6f25;
}

.quote-detail-tax-confirmation small {
  color: var(--muted);
  font-size: calc(9.5px * var(--app-font-scale));
  line-height: 1.2;
}

.quote-send-actions {
  margin-top: 10px;
}

.quote-send-actions .summary-button {
  gap: 7px;
}

.quote-send-actions .summary-button i {
  flex: 0 0 auto;
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1;
}

.quote-send-actions .summary-button[aria-busy="true"] {
  opacity: 0.72;
  pointer-events: none;
}

.quote-snapshot-preview {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7ffff;
}

.quote-snapshot-preview[hidden] {
  display: none;
}

.quote-snapshot-preview img {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
  background: #fff;
}

.quote-snapshot-preview p {
  margin: 0;
  color: var(--muted);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 760;
  line-height: 1.45;
}

.phone-shell.screen-success .success-panel {
  gap: 8px;
}

.phone-shell.screen-success .success-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon quote";
  align-items: center;
  gap: 3px 10px;
  padding: 10px 12px;
  text-align: left;
}

.phone-shell.screen-success .success-icon {
  grid-area: icon;
  width: 38px;
  height: 38px;
  margin: 0;
  font-size: calc(16px * var(--app-font-scale));
}

.phone-shell.screen-success .success-card .section-kicker,
.phone-shell.screen-success .success-card > p:not(.section-kicker):not(.success-quote-no),
.phone-shell.screen-success .quote-detail-card > h3,
.phone-shell.screen-success .quote-send-panel > p {
  display: none;
}

.phone-shell.screen-success .success-card h2 {
  grid-area: title;
  margin: 0;
  font-size: calc(18px * var(--app-font-scale));
  line-height: 1.15;
}

.phone-shell.screen-success .success-quote-no {
  grid-area: quote;
  margin: 1px 0 0 !important;
  padding: 5px 8px;
  font-size: 11px !important;
}

.phone-shell.screen-success .success-next {
  padding: 10px 12px;
}

.quote-save-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-color: rgba(86, 188, 191, 0.22);
  background: linear-gradient(135deg, rgba(232, 251, 249, 0.95), rgba(255, 255, 255, 0.94));
}

.quote-save-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.quote-save-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(86, 188, 191, 0.16);
  color: var(--brand-deep);
  font-size: calc(15px * var(--app-font-scale));
}

.quote-save-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 900;
}

.quote-save-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.25;
  font-weight: 720;
}

.quote-save-action {
  min-height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(28, 139, 145, 0.2);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-deep);
  padding: 0 12px;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.08);
}

.quote-save-action .google-mark {
  width: 21px;
  height: 21px;
}

.quote-save-action .google-mark svg {
  width: 19px;
  height: 19px;
}

.quote-save-action .google-mark[hidden] {
  display: none;
}

.quote-save-panel.is-authenticated .quote-save-action {
  background: #fff;
  color: var(--brand-deep);
}

.phone-shell.screen-success .success-quote-detail {
  gap: 8px;
}

.phone-shell.screen-success .quote-detail-item {
  padding: 10px 2px;
}

.phone-shell.screen-success .quote-detail-disclaimer {
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.3;
}

.phone-shell.screen-success .quote-send-actions {
  margin-top: 8px;
}

.quote-contact-toggle {
  width: 100%;
  min-height: 34px;
  margin-top: 9px;
  border: 0;
  background: transparent;
  color: var(--brand-deep);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  transition: background 180ms ease, color 180ms ease;
}

.quote-contact-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

.quote-contact-toggle.is-open {
  background: #eef9f8;
}

.quote-contact-toggle.is-open::after {
  transform: translateY(2px) rotate(225deg);
}

.quote-contact-form {
  display: grid;
  gap: 8px;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 220ms ease, opacity 180ms ease, transform 180ms ease, margin-top 180ms ease;
}

.quote-contact-form.is-open {
  margin-top: 8px;
  opacity: 1;
  transform: translateY(0);
}

.quote-contact-form[hidden] {
  display: none;
}

.quote-contact-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 850;
}

.quote-contact-form input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
}

.quote-contact-form .compact-submit,
.success-continue-wide {
  min-height: 40px;
}

.success-continue-wide.summary-button.secondary {
  border: 1px solid #89c2c1;
  background: #afd7d5;
  color: #245e62;
  box-shadow: 0 8px 18px rgba(67, 137, 141, 0.12);
}

.success-continue-wide.summary-button.secondary:hover {
  background: #a3cfcd;
}

.success-continue-wide.summary-button.secondary:active {
  background: #98c8c6;
}

.cart-edit-quantity-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.62fr);
}

.cart-edit-quantity-row .cart-edit-qty {
  grid-template-columns: 42px minmax(52px, 1fr) 42px;
}

.cart-edit-qty input {
  font-size: calc(16px * var(--app-font-scale));
  line-height: 1;
}

.cart-edit-size-list .cart-edit-size-card {
  height: auto !important;
  min-block-size: 86px !important;
  min-height: 86px !important;
  overflow: hidden;
}

.cart-edit-size-list .cart-edit-size-card.active {
  min-block-size: 240px !important;
  min-height: 240px !important;
}

@media (max-width: 430px) {
  .quote-save-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-save-action {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .quote-save-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-save-action {
    width: 100%;
  }

  .cart-edit-quantity-row {
    grid-template-columns: minmax(0, 1fr) minmax(128px, 0.72fr);
    gap: 5px;
  }

  .cart-edit-quantity-row .cart-edit-qty {
    grid-template-columns: 34px minmax(48px, 1fr) 34px;
  }
}

[data-screen="stock-size"] .context-strip img.orientation-fallback {
  transition: object-position 160ms ease, filter 160ms ease;
}

[data-screen="stock-size"] .context-strip img.orientation-vertical.orientation-fallback {
  object-fit: contain;
  object-position: center;
  filter: none;
}

[data-screen="stock-size"] .context-strip img.orientation-horizontal.orientation-fallback {
  object-fit: cover;
  object-position: 76% 72%;
  filter: saturate(1.03) contrast(1.02);
}

.phone-shell.screen-stock-size .section-block[data-screen="stock-size"] {
  height: max(438px, calc(100dvh - var(--flow-sticky-total-height) - 8px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.stock-size-fixed-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  margin: -12px -12px 0;
  padding: 12px 12px 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%);
  box-shadow: 0 10px 18px rgba(34, 78, 82, 0.04);
}

.stock-size-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px 16px;
  scrollbar-width: thin;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .custom-size-entry {
  margin-top: 10px;
}

/* UX v1 repair: keep size cards readable inside the internal scroller. */
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row,
.phone-shell.screen-stock-size [data-screen="stock-size"] .custom-size-entry {
  flex: 0 0 auto;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-list {
  flex: 0 0 auto;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row:not(.active) {
  min-height: 62px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row:not(.active) .size-main {
  min-height: 44px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row .size-main {
  grid-template-columns: minmax(0, 1fr) 118px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row-qty-control {
  width: 118px;
  justify-self: end;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row.active {
  min-height: 62px;
  overflow: hidden;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy strong,
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy small {
  overflow: visible;
  text-overflow: clip;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-size-scroll-body {
  gap: 8px;
  padding: 0 2px 16px;
}

.phone-shell.screen-stock-size .section-block[data-screen="stock-size"] {
  height: max(438px, calc(100dvh - var(--flow-sticky-total-height) - 96px));
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .custom-size-entry {
  align-items: center;
  min-height: 72px;
  margin-top: 2px;
  border-style: solid;
  background: #f8ffff;
  box-shadow: 0 10px 24px rgba(34, 78, 82, 0.08);
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .phone-shell.viewport-landscape:not(.screen-stock-style) {
    width: min(100%, var(--app-preview-width));
  }

  .phone-shell.viewport-landscape:not(.screen-stock-style) .bottom-summary,
  .phone-shell.viewport-landscape:not(.screen-stock-style) .sheet-panel,
  .phone-shell.viewport-landscape:not(.screen-stock-style) .page-sheet-backdrop .sheet-panel {
    width: min(100%, var(--app-preview-width));
  }

  .phone-shell.viewport-landscape.screen-stock-style .bottom-summary,
  .phone-shell.viewport-landscape.screen-stock-style .sheet-panel,
  .phone-shell.viewport-landscape.screen-stock-style .page-sheet-backdrop .sheet-panel {
    width: min(100%, var(--app-style-preview-width));
  }

}

#delivery-options-details .order-option-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#delivery-options-details .order-choice {
  min-height: 72px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "icon"
    "title"
    "copy";
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
  text-align: center;
}

#delivery-options-details .order-choice i {
  font-size: calc(22px * var(--app-font-scale));
}

#delivery-options-details .order-choice span {
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.15;
}

#delivery-options-details .order-choice small {
  font-size: calc(9.5px * var(--app-font-scale));
  line-height: 1.2;
}

html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* ===== 首页新增模块：热门袋型 / 数据条 / FAQ / 页脚 ===== */

.home-hot-products {
  margin-top: 16px;
}

.hot-products-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: calc(16px * var(--app-font-scale));
}

.hot-products-heading p {
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: calc(12px * var(--app-font-scale));
}

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

.home-hot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.home-hot-card:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .home-hot-card:hover {
    border-color: rgba(86, 188, 191, 0.55);
    box-shadow: 0 12px 26px rgba(34, 78, 82, 0.12);
    transform: translateY(-2px);
  }
}

.home-hot-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f9f9;
}

.home-hot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms ease;
}

.home-hot-media img.active {
  opacity: 1;
}

.home-hot-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(45, 116, 120, 0.42);
  font-size: 2rem;
  opacity: 0;
  transition: opacity 600ms ease;
}

.home-hot-placeholder.active {
  opacity: 1;
}

.home-hot-name {
  font-weight: 700;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.25;
  text-align: center;
}

.home-hot-price {
  color: var(--amber);
  font-weight: 700;
  font-size: calc(12px * var(--app-font-scale));
}

@media (max-width: 380px) {
  .home-hot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-stats-strip {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.home-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}

.home-stat strong {
  color: var(--brand-deep);
  font-size: calc(17px * var(--app-font-scale));
  line-height: 1.1;
}

.home-stat small {
  color: var(--muted);
  font-size: calc(11px * var(--app-font-scale));
}

.home-faq {
  margin: 14px 22px 0;
  padding: 12px;
  border: 1px solid rgba(86, 188, 191, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 24px rgba(34, 78, 82, 0.06);
}

.phone-shell:not(.home-screen) .home-faq {
  display: none;
}

.home-faq .section-kicker {
  margin: 0 0 6px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  color: var(--brand-dark);
  font-size: 12px;
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.faq-item[open] summary i {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0 2px 12px;
  color: var(--muted);
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.65;
}

.site-footer {
  margin: 16px 22px 0;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #17393a;
  color: #d9ecec;
}

.phone-shell:not(.home-screen) .site-footer {
  display: none;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.site-footer-title-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.site-footer-block strong {
  display: block;
  color: #fff;
  font-size: calc(13px * var(--app-font-scale));
  margin-bottom: 0;
}

.site-footer-block p {
  margin: 0 0 4px;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.55;
  color: #bfdcdc;
}

.site-footer-block p[data-i18n="footerStoreHours"] {
  white-space: pre-line;
}

.site-footer-block a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 700;
}

.site-footer-block a[href^="https://wa.me/"] .fa-whatsapp {
  color: #25d366;
  font-size: 1.12em;
  vertical-align: -0.05em;
  filter: drop-shadow(0 0 4px rgba(37, 211, 102, 0.24));
}

/* 门店标题旁地图按钮：只保留定位图标，避免挤占地址正文。 */
.footer-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(122, 184, 188, 0.42);
  border-radius: 50%;
  background: rgba(122, 184, 188, 0.09);
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.footer-map-btn i {
  font-size: 1.05em;
}
.footer-map-btn:hover,
.footer-map-btn:focus-visible {
  background: rgba(122, 184, 188, 0.18);
  border-color: rgba(122, 184, 188, 0.72);
  transform: translateY(-1px);
}

.site-footer-legal {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: calc(11px * var(--app-font-scale));
  color: #9dbcbc;
  text-align: center;
}

.site-footer-address {
  margin: 6px 0 0;
  color: #9dbcbc;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 380px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* 确认页联系方式卡（任务⑥）：必填信息，置于可选收货/发票之上 */
.order-contact-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.order-contact-card .order-option-head {
  margin-bottom: 8px;
}

.order-contact-login-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(122, 184, 188, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(122, 184, 188, 0.12), rgba(255, 255, 255, 0.9));
}

.order-contact-login-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.order-contact-login-copy strong {
  color: var(--ink);
  font-size: calc(12.5px * var(--app-font-scale));
  font-weight: 950;
}

.order-contact-login-copy small {
  color: var(--muted);
  font-size: calc(10.8px * var(--app-font-scale));
  font-weight: 750;
  line-height: 1.35;
}

.order-contact-google-login {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid rgba(32, 50, 50, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  font-size: calc(11.5px * var(--app-font-scale));
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(34, 78, 82, 0.08);
  cursor: pointer;
}

.order-contact-google-login .google-mark {
  width: 20px;
  height: 20px;
}

.order-contact-google-login .google-mark svg {
  width: 18px;
  height: 18px;
}

.order-contact-google-login:focus-visible {
  outline: 3px solid rgba(18, 133, 140, 0.35);
  outline-offset: 2px;
}

.order-contact-login-choice.is-authenticated {
  background: rgba(122, 184, 188, 0.13);
}

.order-contact-fields {
  display: grid;
  gap: 8px;
}

@media (max-width: 460px) {
  .order-contact-login-choice {
    align-items: stretch;
    flex-direction: column;
  }

  .order-contact-google-login {
    width: 100%;
  }
}

/* 单价紧跟尺寸标题显示（老板需求：单价显示在尺寸后方，所有行含选中行都显示） */
.size-price-inline {
  margin-left: 8px;
  font-weight: 700;
  font-size: calc(12px * var(--app-font-scale));
  vertical-align: 2px;
  white-space: nowrap;
}

/* ===== 合规三件套（任务⑧）===== */

/* 同意勾选 */
.privacy-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}

.privacy-consent-row input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.privacy-consent-link,
.cookie-banner-policy,
.site-footer-links a {
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* 页脚政策链接 */
.site-footer-links {
  margin: 12px 0 0;
  text-align: center;
  font-size: calc(12px * var(--app-font-scale));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.site-footer-links a {
  color: var(--brand);
}

/* Cookie 横幅 */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-preview-width);
  z-index: 60;
  box-sizing: border-box;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: #17393a;
  color: #e4f1f1;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -14px 34px rgba(12, 40, 42, 0.32);
}

.cookie-banner-text {
  margin: 0 0 12px;
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.6;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cookie-banner-policy {
  margin-right: auto;
  color: var(--brand);
  font-size: calc(12px * var(--app-font-scale));
}

.cookie-banner-btn {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #e4f1f1;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 700;
  cursor: pointer;
}

.cookie-banner-btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #063536;
}

/* 政策页 */
.legal-sheet {
  max-height: 88vh;
}

.legal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legal-heading h3 {
  margin: 0;
  font-size: calc(17px * var(--app-font-scale));
  color: var(--ink);
}

.legal-body {
  overflow-y: auto;
  padding: 4px 2px 24px;
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.7;
  color: var(--text, #3a4a4a);
}

.legal-body h4 {
  margin: 16px 0 4px;
  font-size: calc(14px * var(--app-font-scale));
  color: var(--ink);
}

.legal-body p,
.legal-body li {
  margin: 4px 0;
  color: var(--muted);
}

.legal-body ul,
.legal-body ol {
  margin: 4px 0;
  padding-left: 20px;
}

.legal-updated {
  color: #9aa8a8;
  font-size: calc(12px * var(--app-font-scale));
}

.legal-change-pref {
  margin-top: 20px;
  width: 100%;
  border: 1px solid var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-radius: 10px;
  padding: 11px;
  font-weight: 700;
  font-size: calc(13px * var(--app-font-scale));
  cursor: pointer;
}

/* ============================================================
   变体色卡选择器（颜色 / 版式通用）—— 欧洲克制 + 品牌青绿选中
   决策：把固定的竖/横版式升级成可点选色卡，数量自适应
   ============================================================ */
.variant-picker-panel { margin-top: 10px; }
.variant-picker-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.variant-picker-label { font-size: calc(13px * var(--app-font-scale)); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.variant-picker-hint { font-size: calc(11px * var(--app-font-scale)); color: var(--muted); }
.variant-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.variant-card {
  flex: 1 1 64px; min-width: 60px; max-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 9px 6px 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.variant-card:hover { border-color: #cfe0e0; }
.variant-card:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.variant-swatch { width: 100%; aspect-ratio: 1; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.variant-name { font-size: calc(11.5px * var(--app-font-scale)); color: var(--ink); letter-spacing: 0.02em; }
.variant-card.selected { border-color: var(--brand-dark); box-shadow: 0 0 0 1px var(--brand-dark); }
.variant-card.selected::after {
  content: "\2713"; position: absolute; top: 5px; right: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-dark); color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* 实拍图版色卡：图卡替代色块（每变体一张产品实拍图） */
.variant-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 7px; overflow: hidden;
  background: #faf7f0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); display: block;
}
.variant-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 微调(老板反馈)：色卡缩小成「小色板」——小色块+色名，一排横放 5+，明显是颜色选择器、不与顶部主图重复 */
.variant-picker .variant-card { flex: 0 0 auto; width: 54px; min-width: 54px; max-width: 54px; padding: 6px 5px 7px; gap: 5px; }
.variant-picker .variant-swatch { width: 100%; aspect-ratio: 1; border-radius: 6px; }
.variant-picker .variant-name { font-size: calc(10.5px * var(--app-font-scale)); }
.variant-picker .variant-card.selected::after { top: 3px; right: 4px; width: 15px; height: 15px; font-size: 9px; }

/* 老板微调③：尺寸行默认只显尺寸+单价，点行才展开数量框+数量档 */
.size-row.collapsed .size-main { cursor: pointer; }
.size-row-pick { font-size: calc(12px * var(--app-font-scale)); color: var(--brand-dark); letter-spacing: 0.02em; white-space: nowrap; flex: 0 0 auto; }
.size-row-tiers { display: flex; gap: 7px; margin-top: 11px; }
.size-tier { flex: 1; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: calc(11.5px * var(--app-font-scale)); font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.size-tier:hover { border-color: #cfe0e0; }
.size-tier.selected { border-color: var(--brand-dark); background: var(--brand-soft); color: var(--brand-dark); }

/* 老板 2026-07-10 定案（示意图批准）：款式缩略图=小方形、固定宽、左对齐不撑满；配合主图收小 */
.variant-picker .variant-card { flex: 0 0 auto; width: 48px; min-width: 48px; max-width: 48px; padding: 6px 4px 7px; gap: 5px; }
.variant-picker .variant-name { font-size: calc(10.5px * var(--app-font-scale)); }
.variant-picker .variant-card.selected::after { top: 4px; right: 5px; width: 16px; height: 16px; font-size: 10px; }

/* =========================================================================
   上线精修 finish —— stock-size 第三步（老板批准的大色卡+尺寸直接显示版）
   只调视觉 finish：不改结构/布局形态/档位(100-200-500-1000)/提交逻辑。
   审美：品牌 #7ab8bc 体系、欧洲克制、以「字距+留白+层级」做高级感，
   本页内收敛全线 950 超黑字重、拉开主次对比（全站 950 基调不动，仅本页）。
   集中一处、高特异性（.phone-shell.screen-stock-size 运行时 scope），便于审查/回滚。
   ========================================================================= */

/* --- ① 字体层级：拉开主次、加宽字距、收超黑字重（本页内） --- */
/* 顶部主图卡 */
.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip strong {
  font-weight: 700;
  letter-spacing: 0.006em;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip small {
  font-weight: 500;
  letter-spacing: 0.014em;
}
/* 尺寸名（主信息，仍最重但不再促销黑） */
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy strong {
  font-weight: 760;
  letter-spacing: 0.004em;
}
/* 用途·重量（次要信息，明确退后） */
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy .size-meta,
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy small {
  font-weight: 500;
  letter-spacing: 0.012em;
}
/* 单价 chip（关键数据，中等重、更透气） */
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-copy .size-price {
  font-weight: 720;
  letter-spacing: 0.008em;
  padding: 2px 8px;
}

/* --- ② 色卡：选中态更精致（单层青绿环 + 极轻 lift）、圆角更柔、名字细字 --- */
/* 注：带 page scope，与①④⑤⑥一致；variant-picker 是可复用组件，防将来复用到别屏时样式外泄 */
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker .variant-card {
  border-radius: 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker .variant-card.selected {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 1px var(--brand-dark), 0 6px 14px rgba(43, 150, 154, 0.12);
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker .variant-name {
  font-weight: 520;
}

/* --- ③ 数量档 pill：全圆角更精致、选中态克制（青绿浅底+深字，不用刺眼实心） --- */
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity-presets .stock-fixed-qty-button {
  border-radius: 999px;
  border-color: var(--line);
  color: var(--brand-dark);
  font-weight: 640;
  letter-spacing: 0.02em;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity-presets .stock-fixed-qty-button.selected {
  border-color: var(--brand-dark);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity-presets .stock-fixed-qty-button.selected .tier-unit-price {
  color: var(--text-muted, #7a8a8a);
}

/* --- ④ 步进器：边框并入 --line 体系、按钮字重克制 --- */
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row-qty-control {
  border-color: var(--line);
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row-qty-control button {
  font-weight: 700;
}

/* --- ⑤ 间距节奏：顶部卡→颜色→档位→尺寸列表 段间距统一（14），内间距统一（9-10） --- */
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker-panel {
  margin-top: 14px;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker-head {
  margin-bottom: 9px;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity {
  margin: 14px 0 10px;
}

/* --- ⑥ 顶部主图卡：收窄图卡、收紧高度、去底距，平衡右侧留白（不改形态，仅比例） --- */
.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip {
  grid-template-columns: 148px minmax(0, 1fr);
  min-height: 166px;
  gap: 14px;
  margin-bottom: 0;
}
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-context-media {
  width: 140px;
}

/* 2026-07-10: top controls use 2/5 of the panel; the size list keeps 3/5. */
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-size-fixed-head {
  flex: 0 0 40%;
  max-height: 40%;
  overflow: hidden;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-size-scroll-body {
  flex: 1 1 60%;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .section-heading {
  margin-bottom: 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip {
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 112px;
  gap: 12px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-context-media {
  width: 100px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker-panel {
  margin-top: 8px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity {
  margin: 8px 0 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity-presets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity-presets .stock-fixed-qty-button {
  flex: 0 0 calc((100% - (var(--tier-visible-count) - 1) * 6px) / var(--tier-visible-count));
  min-width: 72px;
}

/* 2026-07-11: a single large image is driven by the active size row. */
.phone-shell.screen-stock-size [data-screen="stock-size"] .variant-picker-panel {
  display: none;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity {
  flex: 0 0 auto;
  margin: 8px 0 8px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity:not([hidden]) {
  display: grid;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-option-panel,
.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-orientation-panel {
  margin: 8px 0 0;
  padding: 6px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-size-fixed-head {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 5;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .context-strip {
  grid-template-columns: minmax(150px, 44%) minmax(0, 1fr);
  min-height: 201px;
  gap: 16px;
  margin-bottom: 8px;
  padding: 12px;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .stock-context-media {
  width: 100%;
  max-width: 184px;
  aspect-ratio: 1;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row[data-size-preview] {
  cursor: pointer;
}

.phone-shell.screen-stock-size [data-screen="stock-size"] .size-row[data-size-preview]:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: -2px;
}

/* =========================================================================
   契约v2 真数据接线：变体卡新态 + 数量档 MOQ 置灰（feat/variant-color-picker）
   ========================================================================= */
/* 无图无色的纯版式变体：沿用统一目录图片占位。 */
.variant-thumb-placeholder {
  background: var(--brand-soft);
}

.variant-thumb.catalog-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* available=false（零可报价 SKU）：置灰不可选（§6.6） */
.variant-card.unavailable {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.variant-card.unavailable:hover { border-color: var(--line); }
/* 数量档低于起订量：置灰 + 起订提示（§6.2） */
.stock-fixed-qty-button.below-moq {
  opacity: 0.45;
  cursor: not-allowed;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.stock-fixed-qty-button.below-moq .tier-moq-hint {
  font-size: calc(8.5px * var(--app-font-scale));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* priceable=false：面议标注（区别于计价中占位） */
.size-price-unpriceable {
  background: #f6f3ee;
  color: var(--muted);
  font-weight: 600;
}

/* 变体版式徽章（总控建议常驻,兜老板「同色不同版式区分」痛点）——克制小标,不压实拍图 */
.variant-visual { position: relative; display: block; width: 100%; }
.variant-orient {
  position: absolute; top: 4px; left: 4px;
  padding: 1px 5px;
  font-size: calc(9px * var(--app-font-scale));
  font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--brand-dark);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(67, 137, 141, 0.14);
  pointer-events: none;
}

/* 2026-07-11: one clear decision per card on step one. */
.phone-shell.screen-stock-product [data-screen="stock-product"] .stock-choice-fixed-head {
  padding-bottom: 11px;
  box-shadow: none;
  border-bottom: 1px solid rgba(32, 50, 50, 0.08);
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin: 0;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .stock-product-heading-copy {
  min-width: 0;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .stock-product-heading-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 20px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .section-lead {
  max-width: 32em;
  margin-top: 5px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-tabs {
  display: grid;
  grid-template-columns: auto auto;
  width: max-content;
  max-width: 100%;
  gap: 3px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(67, 137, 141, 0.18);
  border-radius: 10px;
  background: #edf6f5;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-tabs button {
  min-width: 0;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #43898d;
  font: inherit;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.12;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  touch-action: manipulation;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-tabs button.active {
  background: #fff;
  color: #202624;
  box-shadow: 0 4px 12px rgba(34, 78, 82, 0.1);
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-tabs button:focus-visible {
  outline: 3px solid #43898d;
  outline-offset: 2px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .stock-choice-scroll-body {
  padding: 10px 2px 96px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-grid {
  gap: 10px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card {
  appearance: none;
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 40px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid rgba(32, 50, 50, 0.11);
  border-radius: 14px;
  background: #fff;
  color: #202624;
  font: inherit;
  text-align: left;
  box-shadow: 0 7px 18px rgba(34, 78, 82, 0.05);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-media {
  width: 96px;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(180deg, #fbfaf6 0%, #edf6f5 100%);
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-card .product-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 2px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-subhead button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(67, 137, 141, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #43898d;
  font: inherit;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  cursor: pointer;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-subhead span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: right;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-subhead strong {
  overflow: hidden;
  color: #202624;
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-subhead small {
  color: #69716f;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.2;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px dashed rgba(67, 137, 141, 0.24);
  border-radius: 14px;
  color: #69716f;
  background: rgba(255, 255, 255, 0.72);
  font-size: calc(14px * var(--app-font-scale));
  font-weight: 700;
  text-align: center;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-entry-error {
  color: #9b3b35;
  background: #fff8f5;
  border-color: rgba(155, 59, 53, 0.22);
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: center;
}

.phone-shell.screen-stock-product [data-screen="stock-product"][data-product-entry-stage="filters"] .product-entry-card {
  min-height: 108px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"][data-product-entry-stage="products"] .product-card {
  min-height: 112px;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card .product-name {
  width: auto;
  padding: 0;
  color: #202624;
  font-size: calc(17px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 850;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-copy small {
  display: block;
  margin: 0;
  color: #69716f;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.45;
  font-weight: 520;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-arrow {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(67, 137, 141, 0.2);
  border-radius: 12px;
  background: #eaf6f6;
  color: #43898d;
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
}

.phone-shell.screen-stock-product [data-screen="stock-product"] .product-card:focus-visible {
  outline: 3px solid #43898d;
  outline-offset: 2px;
}

@media (hover: hover) {
  .phone-shell.screen-stock-product [data-screen="stock-product"] .product-card:hover {
    border-color: rgba(67, 137, 141, 0.34);
    background: #fbfefe;
    box-shadow: 0 9px 22px rgba(34, 78, 82, 0.09);
  }
}

@media (max-width: 360px) {
  .phone-shell.screen-stock-product [data-screen="stock-product"] .product-card {
    grid-template-columns: 82px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 8px;
  }

  .phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-media {
    width: 82px;
  }

  .phone-shell.screen-stock-product [data-screen="stock-product"] .product-card-arrow {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-shell.screen-stock-product [data-screen="stock-product"] .product-card {
    transition: none;
  }
}

/* Homepage V1.1 release: restrained conversion and consent polish. */
html.home-v11 .phone-shell.home-screen .app-header {
  padding: 12px 14px 18px;
}

html.home-v11 .phone-shell.home-screen .quick-intro {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  margin-top: 16px;
}

html.home-v11 .phone-shell.home-screen .quick-intro h1 {
  max-width: 13ch;
  font-size: calc(25px * var(--app-font-scale));
  line-height: 1.08;
}

html.home-v11 .phone-shell.home-screen .intro-copy {
  margin-top: 7px;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.42;
}

html.home-v11 .phone-shell.home-screen .trust-row {
  gap: 5px;
  margin-top: 9px;
}

html.home-v11 .phone-shell.home-screen .trust-row span {
  min-height: 22px;
  padding: 0 7px;
  font-size: calc(9.5px * var(--app-font-scale));
}

html.home-v11 .phone-shell.home-screen .intro-product-carousel {
  width: 112px;
  border: 1px solid rgba(42, 58, 56, 0.1);
  box-shadow: 0 10px 24px rgba(38, 50, 49, 0.1);
}

html.home-v11 .phone-shell.home-screen .section-block[data-screen="home"] {
  padding: 13px 14px 0;
}

html.home-v11 .phone-shell.home-screen .section-heading {
  margin-bottom: 8px;
}

html.home-v11 .phone-shell.home-screen .section-heading h2 {
  font-size: calc(20px * var(--app-font-scale));
}

html.home-v11 .phone-shell.home-screen .section-lead {
  line-height: 1.42;
}

html.home-v11 .phone-shell.home-screen .mode-option {
  min-height: 104px;
  justify-content: flex-start;
  gap: 5px;
  padding: 10px 60px 10px 12px;
  border-color: rgba(67, 137, 141, 0.34);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 50, 49, 0.075);
}

html.home-v11 .phone-shell.home-screen .mode-option.selected {
  border-color: rgba(67, 137, 141, 0.48);
  background: #fff;
  box-shadow: 0 8px 22px rgba(38, 50, 49, 0.085);
}

html.home-v11 .phone-shell.home-screen .mode-option::after {
  right: 11px;
  bottom: 11px;
  width: 36px;
  height: 36px;
  box-shadow: 0 8px 18px rgba(36, 124, 128, 0.2);
}

html.home-v11 .phone-shell.home-screen .choice-title {
  font-size: calc(18.5px * var(--app-font-scale));
}

html.home-v11 .phone-shell.home-screen .choice-copy {
  max-width: 244px;
  font-size: calc(11.75px * var(--app-font-scale));
  line-height: 1.36;
}

html.home-v11 .phone-shell.home-screen .delivery-chip {
  min-height: 24px;
  padding: 4px 9px;
  font-size: calc(10.5px * var(--app-font-scale));
}

html.home-v11 .home-hot-products {
  margin-top: 14px;
}

html.home-v11 .hot-products-heading p {
  margin: 3px 0 8px;
}

html.home-v11 .home-hot-grid {
  gap: 8px;
}

html.home-v11 .home-hot-card {
  height: 100%;
  gap: 4px;
  padding: 8px 7px 9px;
  border-radius: 8px;
  box-shadow: none;
}

html.home-v11 .home-hot-media {
  border-radius: 6px;
  background: #f7faf9;
}

html.home-v11 .home-hot-name {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html.home-v11 .home-hot-price {
  margin-top: auto;
  color: #95692f;
}

html.home-v11 .site-footer {
  margin: 14px 14px 10px;
  padding: 14px 13px 12px;
  border-radius: 8px;
}

html.home-v11 .site-footer-grid {
  gap: 12px;
}

html.home-v11 .site-footer-block p {
  margin-bottom: 3px;
  font-size: calc(11.5px * var(--app-font-scale));
  line-height: 1.45;
}

html.home-v11 .site-footer-legal,
html.home-v11 .site-footer-address {
  font-size: calc(10.5px * var(--app-font-scale));
}

html.home-v11 .cookie-banner {
  bottom: 10px;
  width: calc(100% - 20px);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  border: 1px solid rgba(42, 58, 56, 0.14);
  border-radius: 8px;
  background: #fff;
  color: #26312f;
  box-shadow: 0 14px 36px rgba(18, 43, 43, 0.2);
}

html.home-v11 .cookie-banner-text {
  margin: 0 0 8px;
  font-size: calc(11.5px * var(--app-font-scale));
  line-height: 1.45;
}

html.home-v11 .cookie-banner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

html.home-v11 .cookie-banner-policy {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--brand-deep);
  font-size: calc(11px * var(--app-font-scale));
}

html.home-v11 .cookie-banner-btn {
  min-height: 42px;
  border-color: rgba(42, 58, 56, 0.16);
  border-radius: 7px;
  background: #f3f7f6;
  color: #26312f;
  padding: 8px 10px;
  font-size: calc(12px * var(--app-font-scale));
}

html.home-v11 .cookie-banner-btn.primary {
  border-color: #43898d;
  background: #43898d;
  color: #fff;
}

html.home-v11 body:has(.cookie-banner:not([hidden])) .phone-shell {
  padding-bottom: 146px;
}

html.home-v11 body:has(.cookie-banner:not([hidden])) .floating-whatsapp {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}

@media (max-width: 360px) {
  html.home-v11 .phone-shell.home-screen .quick-intro {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
  }

  html.home-v11 .phone-shell.home-screen .quick-intro h1 {
    font-size: calc(23px * var(--app-font-scale));
  }

  html.home-v11 .phone-shell.home-screen .intro-product-carousel {
    width: 100px;
  }

  html.home-v11 .cookie-banner {
    bottom: 6px;
    width: calc(100% - 12px);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  html.home-v11 .cookie-banner-btn {
    min-height: 40px;
    font-size: calc(11.5px * var(--app-font-scale));
  }
}

/* Global WhatsApp contact: brief two-step cue, followed by a long visual rest. */
@keyframes whatsapp-attention-bounce {
  0%,
  12%,
  100% {
    transform: translateY(0) scale(1);
  }
  3% {
    transform: translateY(-4px) scale(1.02);
  }
  6% {
    transform: translateY(0) scale(1);
  }
  9% {
    transform: translateY(-2px) scale(1.01);
  }
}

body:has(.sheet-backdrop:not([hidden]):not(#profile-sheet)) .floating-whatsapp,
body:has(.image-preview:not([hidden])) .floating-whatsapp,
body:has(.cookie-banner:not([hidden])) .floating-whatsapp,
.floating-whatsapp.is-avoiding {
  animation: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.86);
}

@media (prefers-reduced-motion: reduce) {
  .phone-shell .floating-whatsapp {
    animation: none;
  }
}

/* 2026-07-11: runtime viewport adapter.
   JS marks portrait/landscape first; portrait surfaces must use the real screen width,
   including vertical Windows displays that still report a desktop pointer. */
.phone-shell.viewport-portrait {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.phone-shell.viewport-portrait .bottom-summary,
.phone-shell.viewport-portrait .sheet-panel,
.phone-shell.viewport-portrait .page-sheet-backdrop .sheet-panel {
  width: 100%;
  max-width: none;
}

.phone-shell.viewport-portrait.screen-stock-product .section-block[data-screen="stock-product"],
.phone-shell.viewport-portrait.screen-stock-style .section-block[data-screen="stock-style"] {
  height: max(360px, calc(100dvh - var(--flow-sticky-total-height) - var(--flow-choice-bottom-reserve)));
}

.phone-shell.viewport-portrait.screen-stock-size .section-block[data-screen="stock-size"] {
  height: max(380px, calc(100dvh - var(--flow-sticky-total-height) - var(--flow-size-bottom-reserve)));
}

.phone-shell.viewport-portrait .stock-choice-scroll-body,
.phone-shell.viewport-portrait .stock-size-scroll-body {
  min-height: 0;
}

.phone-shell.viewport-landscape.screen-stock-product .section-block[data-screen="stock-product"],
.phone-shell.viewport-landscape.screen-stock-style .section-block[data-screen="stock-style"] {
  height: max(300px, calc(100dvh - var(--flow-sticky-total-height) - var(--flow-choice-bottom-reserve)));
}

.phone-shell.viewport-landscape.screen-stock-size .section-block[data-screen="stock-size"] {
  height: max(320px, calc(100dvh - var(--flow-sticky-total-height) - var(--flow-size-bottom-reserve)));
}

@media (orientation: portrait) and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .phone-shell.viewport-portrait {
    width: 100%;
  }

  .phone-shell.viewport-portrait .bottom-summary,
  .phone-shell.viewport-portrait .sheet-panel,
  .phone-shell.viewport-portrait .page-sheet-backdrop .sheet-panel {
    width: 100%;
  }
}

@media (orientation: landscape) and (max-height: 680px) {
  .phone-shell.viewport-landscape.compact-header .app-header {
    padding-block: 4px;
  }

  .phone-shell.viewport-landscape.compact-header .step-track {
    padding-block: 6px;
  }

  .phone-shell.viewport-landscape.screen-stock-size [data-screen="stock-size"] .context-strip {
    min-height: 96px;
    gap: 10px;
    padding: 9px;
  }

  .phone-shell.viewport-landscape.screen-stock-size [data-screen="stock-size"] .stock-context-media {
    max-width: 88px;
  }

  .phone-shell.viewport-landscape.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity {
    margin: 6px 0;
  }

  .phone-shell.viewport-landscape .bottom-summary {
    padding-top: 8px;
  }
}

/* ===== 提交需求页 V2：正式表单结构与视觉 ===== */
.phone-shell.screen-stock-contact .order-logo-upload-card {
  margin: 6px 2px 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #d3dfde;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-logo-upload-card.has-files {
  border-bottom-color: #b8d2d0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-logo-upload-card input {
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: auto;
}

.phone-shell.screen-stock-contact .order-logo-upload-main {
  min-height: 58px;
  padding: 8px 0;
  gap: 10px;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon,
.phone-shell.screen-stock-contact .optional-summary-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(23, 79, 83, 0.08);
  border-radius: 8px;
  background: #dff3f1;
  color: #247a7e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.phone-shell.screen-stock-contact .order-logo-upload-icon::after,
.phone-shell.screen-stock-contact .optional-summary-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.14;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon i,
.phone-shell.screen-stock-contact .optional-summary-icon i {
  position: relative;
  z-index: 1;
  font-size: calc(16px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-logo-upload-copy strong {
  font-size: calc(13px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-logo-upload-copy small {
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-logo-upload-action {
  min-height: 32px;
  max-width: 116px;
  padding: 0 9px;
  overflow: hidden;
  border-color: #c2d9d7;
  border-radius: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-shell.screen-stock-contact .order-logo-upload-main:focus-within {
  border-radius: 8px;
  outline: 3px solid rgba(35, 111, 116, 0.26);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .order-logo-file-summary:not(:empty) {
  padding: 0 0 8px 48px;
}

.phone-shell.screen-stock-contact .order-note-details {
  margin: 0 2px;
  border: 0;
  border-bottom: 1px solid #d3dfde;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-note-details summary,
.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  grid-template-areas: "icon copy arrow";
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
}

.phone-shell.screen-stock-contact .order-note-details summary::after,
.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary::after {
  grid-area: arrow;
}

.phone-shell.screen-stock-contact .optional-summary-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.phone-shell.screen-stock-contact .optional-summary-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-shell.screen-stock-contact .optional-summary-copy strong {
  color: var(--ink);
  font-size: calc(13px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 950;
}

.phone-shell.screen-stock-contact .optional-summary-copy small {
  grid-column: auto;
  color: var(--muted);
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.3;
  font-weight: 800;
}

.phone-shell.screen-stock-contact .order-note-icon {
  background: #f8e9e9;
  color: #a24f57;
}

.phone-shell.screen-stock-contact .optional-order-details-delivery .optional-summary-icon {
  background: #e6f0f8;
  color: #32758c;
}

.phone-shell.screen-stock-contact .optional-order-details-invoice .optional-summary-icon {
  background: #f8eedc;
  color: #98702e;
}

.phone-shell.screen-stock-contact .order-note-body {
  padding: 0 2px 10px 48px;
}

.phone-shell.screen-stock-contact .order-note-field {
  margin: 0;
}

.phone-shell.screen-stock-contact .order-note-field textarea {
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  border-color: #c7d9d7;
  border-radius: 8px;
  background: #fff;
  font-size: max(16px, calc(12px * var(--app-font-scale)));
}

.phone-shell.screen-stock-contact .price-disclaimer {
  margin: 8px 2px 2px;
  border: 1px solid rgba(122, 184, 188, 0.12);
  background: #f4f8f8;
}

.phone-shell.screen-stock-contact .order-contact-card {
  margin-top: 12px;
  border-color: #cedddb;
  border-radius: 10px;
  background: #fcfdfd;
  box-shadow: 0 4px 14px rgba(29, 67, 67, 0.05);
}

.phone-shell.screen-stock-contact .order-contact-login-choice {
  border: 0;
  border-left: 3px solid #5aa6a9;
  border-radius: 0;
  background: #f2f8f7;
  box-shadow: inset 0 0 0 1px rgba(70, 139, 141, 0.055);
}

.phone-shell.screen-stock-contact .order-contact-google-login {
  min-height: 42px;
  border-radius: 8px;
  border-color: #c6d8d6;
  box-shadow: 0 3px 9px rgba(28, 75, 75, 0.06);
}

.phone-shell.screen-stock-contact .order-contact-fields input,
.phone-shell.screen-stock-contact .invoice-fields input,
.phone-shell.screen-stock-contact #shipping-fields input {
  min-height: 48px;
  font-size: max(16px, calc(12px * var(--app-font-scale)));
}

.phone-shell.screen-stock-contact .order-optional-stack {
  gap: 0;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #cedddb;
  border-radius: 10px;
  background: #fcfdfd;
  box-shadow: 0 4px 14px rgba(29, 67, 67, 0.05);
}

.phone-shell.screen-stock-contact .order-optional-heading {
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.phone-shell.screen-stock-contact .order-optional-heading > div {
  display: grid;
  gap: 2px;
}

.phone-shell.screen-stock-contact .order-optional-heading strong {
  color: var(--ink);
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.2;
}

.phone-shell.screen-stock-contact .order-optional-heading small {
  color: var(--muted);
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.3;
}

.phone-shell.screen-stock-contact .order-optional-heading > span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  background: #f0f4f3;
  color: #6b7876;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 850;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details {
  border: 0;
  border-top: 1px solid #d3dfde;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
  padding: 0 0 10px 48px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice {
  min-height: 62px;
}

.phone-shell.screen-stock-contact .pickup-packaging-fields {
  gap: 10px;
  margin-top: 10px;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #d5e1df;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .pickup-store-link {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  margin: -2px -4px 0;
  padding: 4px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.phone-shell.screen-stock-contact .pickup-store-link:hover {
  background: #f2f8f7;
}

.phone-shell.screen-stock-contact .pickup-store-link:focus-visible {
  outline: 3px solid rgba(35, 111, 116, 0.26);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .pickup-store-leading,
.phone-shell.screen-stock-contact .pickup-store-map-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e6f0f8;
  color: #32758c;
}

.phone-shell.screen-stock-contact .pickup-store-leading {
  width: 34px;
  height: 34px;
  border: 1px solid #c7dce1;
}

.phone-shell.screen-stock-contact .pickup-store-map-icon {
  width: 32px;
  height: 32px;
  justify-self: end;
  background: #dff3f1;
  color: #3f898d;
}

.phone-shell.screen-stock-contact .pickup-store-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-shell.screen-stock-contact .pickup-store-copy strong {
  color: var(--ink);
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.2;
}

.phone-shell.screen-stock-contact .pickup-store-copy small {
  color: var(--muted);
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .invoice-fields label:nth-child(3),
.phone-shell.screen-stock-contact .invoice-fields label:nth-child(4) {
  grid-column: 1 / -1;
}

@media (max-width: 360px) {
  .phone-shell.screen-stock-contact #next-step {
    padding-inline: 5px;
    font-size: calc(12px * var(--app-font-scale));
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }

  .phone-shell.screen-stock-contact .cart-remove {
    width: 48px;
    min-width: 48px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .phone-shell.screen-stock-contact .cart-remove::before {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-size: calc(14px * var(--app-font-scale));
    font-weight: 900;
  }

  .phone-shell.screen-stock-contact .order-logo-upload-main,
  .phone-shell.screen-stock-contact .order-note-details summary,
  .phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
    gap: 8px;
  }

  .phone-shell.screen-stock-contact .order-logo-upload-action {
    max-width: 94px;
    padding-inline: 6px;
  }

  .phone-shell.screen-stock-contact .order-note-body,
  .phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
    padding-left: 0;
  }

  .phone-shell.screen-stock-contact #delivery-options-details .order-option-grid,
  .phone-shell.screen-stock-contact .pickup-packaging-fields .order-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stock contact quotation polish: scoped visual layer only, no flow changes. */
.phone-shell.screen-stock-contact {
  background:
    linear-gradient(180deg, rgba(122, 184, 188, 0.13) 0, rgba(247, 251, 250, 0.94) 168px, #f3f7f6 100%);
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] {
  padding: 12px 12px 112px;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-heading {
  margin: 0 0 10px;
  padding: 2px 2px 0;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-kicker {
  margin-bottom: 3px;
  color: #35868a;
  font-weight: 760;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] h2 {
  color: #182528;
  font-size: calc(22px * var(--app-font-scale));
  font-weight: 860;
  line-height: 1.16;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-lead {
  width: fit-content;
  max-width: 100%;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px solid #d5ebe8;
  border-radius: 8px;
  background: #eef8f5;
  color: #2d777d;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 680;
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .order-summary-panel,
.phone-shell.screen-stock-contact .order-contact-card,
.phone-shell.screen-stock-contact .order-optional-stack {
  border: 1px solid #d7e8e6;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(41, 84, 88, 0.08);
}

.phone-shell.screen-stock-contact .order-summary-panel {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 13px;
  overflow: hidden;
}

.phone-shell.screen-stock-contact .order-summary-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #409399, #7ab8bc 46%, #c49757);
}

.phone-shell.screen-stock-contact .cart-heading {
  align-items: center;
  margin: 0;
  padding: 2px 0 10px;
  border-bottom: 1px solid #e3eeee;
}

.phone-shell.screen-stock-contact .cart-heading h3 {
  color: #182528;
  font-size: calc(17px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.2;
}

.phone-shell.screen-stock-contact #order-cart-count {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #edf8f6;
  color: #2c7d82;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact #order-cart-list {
  display: grid;
  gap: 10px;
}

.phone-shell.screen-stock-contact .order-fee-summary {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d7e8e6;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfefe, #f4fbfa);
}

.phone-shell.screen-stock-contact .order-fee-summary[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .order-fee-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  gap: 9px;
  align-items: center;
}

.phone-shell.screen-stock-contact .order-fee-toggle {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d4e5e3;
  border-radius: 7px;
  background: #fff;
  color: #2f8584;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .order-fee-toggle i {
  transition: transform 180ms ease;
}

.phone-shell.screen-stock-contact .order-fee-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.phone-shell.screen-stock-contact .order-fee-toggle:focus-visible {
  outline: 2px solid rgba(47, 133, 132, 0.34);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .order-fee-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #e8f5ef;
  color: #2f8584;
  font-size: calc(15px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-fee-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-shell.screen-stock-contact .order-fee-copy strong {
  color: #1f2c2f;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.2;
}

.phone-shell.screen-stock-contact .order-fee-copy small {
  color: #6f7b7e;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 720;
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .order-fee-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.phone-shell.screen-stock-contact .order-fee-more {
  display: grid;
  gap: 7px;
}

.phone-shell.screen-stock-contact .order-fee-more[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .order-fee-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: 8px;
  align-items: center;
  min-height: 26px;
  padding: 5px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
}

.phone-shell.screen-stock-contact .order-fee-row dt,
.phone-shell.screen-stock-contact .order-fee-row dd {
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .order-fee-row dt {
  color: #6e7b7e;
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-fee-row dd {
  color: #1f2c2f;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 820;
  text-align: right;
}

.phone-shell.screen-stock-contact .order-fee-tax-row {
  position: relative;
  overflow: visible;
}

.phone-shell.screen-stock-contact .order-fee-tax-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.phone-shell.screen-stock-contact .tax-info-toggle {
  width: 24px;
  height: 24px;
  display: inline-grid;
  flex: 0 0 24px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3c8f91;
  font: inherit;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .tax-info-toggle:hover,
.phone-shell.screen-stock-contact .tax-info-toggle[aria-expanded="true"] {
  background: #e4f3f2;
}

.phone-shell.screen-stock-contact .tax-info-toggle:focus-visible,
.phone-shell.screen-stock-contact .tax-preference-options button:focus-visible {
  outline: 2px solid rgba(47, 133, 132, 0.4);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .order-fee-tax-control {
  display: grid;
  gap: 4px;
  justify-items: end;
}

.phone-shell.screen-stock-contact .tax-preference-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(62px, 1fr));
  width: min(100%, 164px);
  padding: 2px;
  border: 1px solid #cfe2e1;
  border-radius: 7px;
  background: #edf5f4;
}

.phone-shell.screen-stock-contact .tax-preference-options button {
  min-width: 0;
  min-height: 27px;
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #607174;
  font: inherit;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .tax-preference-options button.selected {
  background: #3f9092;
  color: #fff;
  box-shadow: 0 2px 6px rgba(31, 93, 96, 0.18);
}

.phone-shell.screen-stock-contact #fee-tax {
  color: #566669;
  font-size: calc(9.5px * var(--app-font-scale));
  font-weight: 720;
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .tax-info-popover {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
  padding: 9px 10px;
  border: 1px solid #b9d8d6;
  border-radius: 7px;
  background: #eef9f8;
  color: #365f61;
  box-shadow: 0 8px 18px rgba(34, 84, 87, 0.12);
  text-align: left;
}

.phone-shell.screen-stock-contact .tax-info-popover[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .tax-info-popover p {
  margin: 0;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 650;
  line-height: 1.45;
}

.phone-shell.screen-stock-contact .order-fee-total {
  border: 1px solid rgba(47, 136, 141, 0.18);
  background: #eef9f7;
}

.phone-shell.screen-stock-contact .order-fee-total dt,
.phone-shell.screen-stock-contact .order-fee-total dd {
  color: #267a7f;
  font-weight: 880;
}

.phone-shell.screen-stock-contact .order-fee-note {
  margin: 0;
  color: #7a6b3f;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 720;
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 10px;
  border: 1px solid #dcebea;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fbfdfc);
  box-shadow: 0 7px 16px rgba(25, 67, 70, 0.05);
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item > img,
.phone-shell.screen-stock-contact .order-summary-panel .cart-item img {
  width: 58px;
  height: 58px;
  border: 1px solid #e8f1ef;
  border-radius: 7px;
  background: #fbfbf7;
  object-fit: contain;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item > span:not(.cart-actions) {
  min-width: 0;
}

.phone-shell.screen-stock-contact .cart-item-title {
  color: #1c2b2d;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .cart-item-meta {
  margin-top: 4px;
  color: #6c7b80;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .cart-item-price {
  margin-top: 5px;
  color: #9b6a2f;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 760;
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin-top: 0;
}

.phone-shell.screen-stock-contact .cart-qty-control {
  height: 36px;
  min-width: 0;
  border-color: #cddfdf;
  border-radius: 8px;
  background: #f8fbfa;
  overflow: hidden;
}

.phone-shell.screen-stock-contact .cart-qty-control button {
  width: 41px;
  color: #2c7d82;
  font-weight: 820;
}

.phone-shell.screen-stock-contact .cart-qty-control input {
  min-width: 52px;
  color: #1f2b2e;
  font-weight: 760;
}

.phone-shell.screen-stock-contact .cart-remove {
  height: 36px;
  min-width: 64px;
  border: 0;
  border-radius: 8px;
  background: #fff0ee;
  color: #ba4e4a;
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-logo-upload-card {
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-logo-upload-main {
  padding: 10px;
  border: 1px dashed #b8dddd;
  border-radius: 8px;
  background: #f7fcfb;
}

.phone-shell.screen-stock-contact .order-logo-upload-main:hover {
  border-color: #7ab8bc;
  background: #f0faf8;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon,
.phone-shell.screen-stock-contact .optional-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon::after,
.phone-shell.screen-stock-contact .optional-summary-icon::after {
  display: none;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon {
  background: #dff2ef;
  color: #2d868a;
}

.phone-shell.screen-stock-contact .order-logo-upload-copy strong,
.phone-shell.screen-stock-contact .optional-summary-copy strong {
  color: #1b2a2d;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 820;
}

.phone-shell.screen-stock-contact .order-logo-upload-copy small,
.phone-shell.screen-stock-contact .optional-summary-copy small {
  color: #64777a;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.3;
}

.phone-shell.screen-stock-contact .order-logo-upload-action {
  min-height: 32px;
  border: 1px solid #bdd8d9;
  border-radius: 8px;
  background: #ffffff;
  color: #2b7d82;
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-note-details {
  border-top: 1px solid #e0eceb;
  border-bottom: 1px solid #e0eceb;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-note-details summary {
  padding: 10px 0;
}

.phone-shell.screen-stock-contact .order-note-icon {
  background: #fff0f1;
  color: #bd5662;
}

.phone-shell.screen-stock-contact .order-note-body {
  padding: 0 0 11px 46px;
}

.phone-shell.screen-stock-contact .order-note-field textarea {
  min-height: 88px;
  border-color: #d0e3e2;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2b2e;
  line-height: 1.45;
}

.phone-shell.screen-stock-contact .price-disclaimer {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid #e2eceb;
  border-left: 3px solid #c49757;
  border-radius: 8px;
  background: #fffdf8;
  color: #627174;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.45;
}

.phone-shell.screen-stock-contact .order-contact-card {
  display: grid;
  gap: 11px;
  margin-top: 2px;
  padding: 13px;
}

.phone-shell.screen-stock-contact .order-contact-card .order-option-head {
  margin: 0;
  padding: 0 0 9px;
  border-bottom: 1px solid #e2eeee;
}

.phone-shell.screen-stock-contact .order-contact-card .order-option-head span {
  color: #182528;
  font-size: calc(17px * var(--app-font-scale));
  font-weight: 830;
}

.phone-shell.screen-stock-contact .order-contact-card .order-option-head small {
  color: #5f7477;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 650;
}

.phone-shell.screen-stock-contact .order-contact-login-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d9eae8;
  border-left: 3px solid #7ab8bc;
  border-radius: 8px;
  background: #f7fbfa;
}

.phone-shell.screen-stock-contact .order-contact-login-copy strong {
  color: #1e2a2d;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
}

.phone-shell.screen-stock-contact .order-contact-login-copy small {
  color: #68787c;
  font-size: calc(11px * var(--app-font-scale));
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .order-contact-google-login {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d2e3e2;
  border-radius: 8px;
  background: #ffffff;
  color: #2b5559;
  box-shadow: 0 4px 12px rgba(28, 70, 74, 0.06);
  white-space: nowrap;
}

.phone-shell.screen-stock-contact .order-contact-fields {
  gap: 9px 10px;
}

.phone-shell.screen-stock-contact .order-contact-fields label,
.phone-shell.screen-stock-contact .invoice-fields label,
.phone-shell.screen-stock-contact #shipping-fields label {
  gap: 5px;
}

.phone-shell.screen-stock-contact .order-contact-fields label > span,
.phone-shell.screen-stock-contact .invoice-fields label > span,
.phone-shell.screen-stock-contact #shipping-fields label > span {
  color: #243437;
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-contact-fields input,
.phone-shell.screen-stock-contact .invoice-fields input,
.phone-shell.screen-stock-contact #shipping-fields input {
  min-height: 46px;
  border: 1px solid #cddfdf;
  border-radius: 8px;
  background: #ffffff;
  color: #1d2a2d;
  font-weight: 620;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.phone-shell.screen-stock-contact .quote-consent {
  margin: 0;
  padding-top: 2px;
}

.phone-shell.screen-stock-contact .order-optional-stack {
  gap: 0;
  margin-top: 2px;
  padding: 13px;
}

.phone-shell.screen-stock-contact .order-optional-heading {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid #e1eeee;
}

.phone-shell.screen-stock-contact .order-optional-heading strong {
  color: #182528;
  font-size: calc(17px * var(--app-font-scale));
  font-weight: 830;
}

.phone-shell.screen-stock-contact .order-optional-heading small,
.phone-shell.screen-stock-contact .order-optional-heading > span {
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-optional-heading > span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f6f5;
  color: #6a7779;
  font-weight: 740;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details {
  border-bottom: 1px solid #e2eeee;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details:last-child {
  border-bottom: 0;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
  padding: 10px 0;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
  padding: 0 0 12px 46px;
}

.phone-shell.screen-stock-contact .optional-order-details-delivery .optional-summary-icon {
  background: #e1f2fb;
  color: #2c7890;
}

.phone-shell.screen-stock-contact .optional-order-details-invoice .optional-summary-icon {
  background: #fff5df;
  color: #a36f23;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-option-grid,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-option-grid {
  gap: 8px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice {
  min-height: 58px;
  padding: 9px;
  border-color: #d3e4e3;
  border-radius: 8px;
  background: #ffffff;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice.active,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.active,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.active {
  border-color: #2f888d;
  background: #f0faf8;
  box-shadow: 0 0 0 1px rgba(47, 136, 141, 0.16);
}

.phone-shell.screen-stock-contact .pickup-store-link {
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  margin: 8px 0 10px;
  padding: 9px;
  border-color: #d6e8e7;
  border-radius: 8px;
  background: #f7fbfa;
}

.phone-shell.screen-stock-contact .pickup-store-leading,
.phone-shell.screen-stock-contact .pickup-store-map-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.phone-shell.screen-stock-contact .pickup-store-leading {
  background: #e2f1ef;
  color: #2e8287;
}

.phone-shell.screen-stock-contact .pickup-store-map-icon {
  background: #ffffff;
  color: #2e8287;
}

.phone-shell.screen-stock-contact .pickup-store-copy strong {
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
}

.phone-shell.screen-stock-contact .pickup-store-copy small {
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .invoice-fields,
.phone-shell.screen-stock-contact #shipping-fields {
  gap: 9px;
}

@media (max-width: 380px) {
  .phone-shell.screen-stock-contact [data-screen="stock-contact"] {
    padding-inline: 10px;
  }

  .phone-shell.screen-stock-contact .order-contact-login-choice {
    grid-template-columns: 1fr;
  }

  .phone-shell.screen-stock-contact .order-contact-google-login {
    width: 100%;
    justify-content: center;
  }

  .phone-shell.screen-stock-contact .order-summary-panel .cart-actions {
    grid-template-columns: 1fr;
  }

  .phone-shell.screen-stock-contact .cart-remove {
    width: 100%;
  }

  .phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options,
  .phone-shell.screen-stock-contact .order-note-body {
    padding-left: 0;
  }
}

/* Stock contact quotation polish: quieter quotation-sheet styling. */
.phone-shell.screen-stock-contact {
  --contact-paper: #f5f8f7;
  --contact-card: #fffefd;
  --contact-line: #d8e3e1;
  --contact-line-strong: #bccfcd;
  --contact-ink: #182426;
  --contact-muted: #6a7778;
  --contact-teal: #43898d;
  --contact-teal-soft: #eef7f6;
  --contact-gold: #9a6a2d;
  --contact-danger: #a8524d;
  background: var(--contact-paper);
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] {
  padding: 12px 12px 108px;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-heading {
  margin-bottom: 9px;
  padding: 0;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-kicker {
  margin-bottom: 2px;
  color: var(--contact-teal);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] h2 {
  color: var(--contact-ink);
  font-size: calc(22px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1.16;
}

.phone-shell.screen-stock-contact [data-screen="stock-contact"] .section-lead {
  width: auto;
  margin-top: 8px;
  padding: 0 0 0 9px;
  border: 0;
  border-left: 2px solid var(--contact-teal);
  border-radius: 0;
  background: transparent;
  color: var(--contact-muted);
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 620;
  line-height: 1.42;
}

.phone-shell.screen-stock-contact .order-summary-panel,
.phone-shell.screen-stock-contact .order-contact-card,
.phone-shell.screen-stock-contact .order-optional-stack {
  border: 1px solid var(--contact-line);
  border-radius: 8px;
  background: var(--contact-card);
  box-shadow: 0 8px 22px rgba(31, 59, 61, 0.045);
}

.phone-shell.screen-stock-contact .order-summary-panel {
  gap: 9px;
  padding: 12px;
}

.phone-shell.screen-stock-contact .order-summary-panel::before {
  height: 2px;
  background: linear-gradient(90deg, var(--contact-teal) 0 72%, var(--contact-gold) 72% 100%);
}

.phone-shell.screen-stock-contact .cart-heading {
  padding: 2px 0 9px;
  border-bottom-color: #e4ecea;
}

.phone-shell.screen-stock-contact .cart-heading h3,
.phone-shell.screen-stock-contact .order-contact-card .order-option-head span,
.phone-shell.screen-stock-contact .order-optional-heading strong {
  color: var(--contact-ink);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 800;
}

.phone-shell.screen-stock-contact #order-cart-count {
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid #d6e6e4;
  border-radius: 999px;
  background: #f6fbfa;
  color: var(--contact-teal);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact #order-cart-count .order-cart-count-number {
  display: inline-block;
  color: #d84a3f;
  font-size: 1.14em;
  font-weight: 860;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.phone-shell.screen-stock-contact #order-print-controls {
  padding: 8px;
  border: 1px solid #e0e9e7;
  border-radius: 8px;
  background: #fbfdfc;
}

.phone-shell.screen-stock-contact .order-print-controls .order-option-head {
  margin-bottom: 7px;
}

.phone-shell.screen-stock-contact .order-print-controls .order-option-head span {
  color: var(--contact-ink);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-print-controls .order-option-head small {
  color: var(--contact-muted);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 560;
}

.phone-shell.screen-stock-contact #order-print-controls .order-option-grid {
  gap: 7px;
}

.phone-shell.screen-stock-contact #order-print-controls .order-choice {
  min-height: 34px;
  padding: 7px 8px;
  border-color: #d7e4e2;
  border-radius: 7px;
  background: #ffffff;
  color: var(--contact-ink);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 720;
  box-shadow: none;
}

.phone-shell.screen-stock-contact #order-print-controls .order-choice.active {
  border-color: var(--contact-teal);
  background: var(--contact-teal);
  color: #fff;
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-color: var(--contact-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-item > img,
.phone-shell.screen-stock-contact .order-summary-panel .cart-item img {
  width: 54px;
  height: 54px;
  border-color: #e5ecea;
  border-radius: 6px;
  background: #faf8f3;
}

.phone-shell.screen-stock-contact .cart-item-title {
  color: var(--contact-ink);
  font-size: calc(12.5px * var(--app-font-scale));
  font-weight: 780;
}

.phone-shell.screen-stock-contact .cart-item-meta {
  color: var(--contact-muted);
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .cart-item-price {
  color: var(--contact-gold);
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .order-summary-panel .cart-actions {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
}

.phone-shell.screen-stock-contact .cart-qty-control {
  height: 34px;
  border-color: #d4e2e0;
  border-radius: 7px;
  background: #fff;
}

.phone-shell.screen-stock-contact .cart-qty-control button {
  width: 38px;
  background: #f1f6f5;
  color: var(--contact-teal);
  font-size: calc(16px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .cart-qty-control button:disabled {
  color: #9aa7a8;
}

.phone-shell.screen-stock-contact .cart-qty-control input {
  color: var(--contact-ink);
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .cart-remove {
  height: 34px;
  min-width: 58px;
  border-radius: 7px;
  background: #fbf2f0;
  color: var(--contact-danger);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .order-line-print-row {
  padding: 8px;
  border-radius: 7px;
  background: #f7faf9;
}

.phone-shell.screen-stock-contact .order-line-print-label {
  color: var(--contact-muted);
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-line-print-value {
  border-radius: 999px;
  background: #edf6f5;
  color: var(--contact-teal);
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .order-logo-upload-main {
  padding: 10px;
  border: 1px solid var(--contact-line);
  border-radius: 7px;
  background: #fff;
}

.phone-shell.screen-stock-contact .order-logo-upload-main:hover {
  border-color: var(--contact-teal);
  background: #fbfdfc;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon,
.phone-shell.screen-stock-contact .optional-summary-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #d6e4e2;
  border-radius: 7px;
  background: #f7faf9;
  color: var(--contact-teal);
}

.phone-shell.screen-stock-contact .order-logo-upload-copy strong,
.phone-shell.screen-stock-contact .optional-summary-copy strong {
  color: var(--contact-ink);
  font-size: calc(12.5px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-logo-upload-copy small,
.phone-shell.screen-stock-contact .optional-summary-copy small {
  color: var(--contact-muted);
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-logo-upload-action {
  min-height: 30px;
  border-color: #d2e0de;
  border-radius: 7px;
  background: #fff;
  color: var(--contact-teal);
  font-size: calc(11px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .order-note-details {
  border-top-color: #e3ebe9;
  border-bottom-color: #e3ebe9;
}

.phone-shell.screen-stock-contact .order-note-details summary,
.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
  min-height: 50px;
  padding: 8px 0;
}

.phone-shell.screen-stock-contact .order-note-details summary {
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  padding-inline: 8px 19px;
}

.phone-shell.screen-stock-contact .order-note-icon,
.phone-shell.screen-stock-contact .optional-order-details-delivery .optional-summary-icon,
.phone-shell.screen-stock-contact .optional-order-details-invoice .optional-summary-icon {
  background: #f7faf9;
  color: var(--contact-teal);
}

.phone-shell.screen-stock-contact .order-note-field textarea {
  min-height: 78px;
  border-color: var(--contact-line);
  border-radius: 7px;
}

.phone-shell.screen-stock-contact .price-disclaimer {
  padding: 9px 10px;
  border-color: #e5e0d7;
  border-left-width: 2px;
  border-radius: 7px;
  background: #fffdf8;
  color: #6f6a60;
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-contact-card {
  gap: 10px;
  padding: 12px;
}

.phone-shell.screen-stock-contact .order-contact-card .order-option-head {
  padding-bottom: 8px;
  border-bottom-color: #e4ecea;
}

.phone-shell.screen-stock-contact .order-contact-card .order-option-head small {
  color: var(--contact-muted);
  font-weight: 560;
}

.phone-shell.screen-stock-contact .order-contact-login-choice {
  padding: 9px;
  border-color: var(--contact-line);
  border-left: 2px solid var(--contact-teal);
  border-radius: 7px;
  background: #fbfdfc;
}

.phone-shell.screen-stock-contact .order-contact-login-copy strong {
  color: var(--contact-ink);
  font-size: calc(11.5px * var(--app-font-scale));
  font-weight: 760;
}

.phone-shell.screen-stock-contact .order-contact-login-copy small {
  color: var(--contact-muted);
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-contact-google-login {
  min-height: 36px;
  padding: 8px 10px;
  border-color: #d3dfdd;
  border-radius: 7px;
  background: #fff;
  color: var(--contact-ink);
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-contact-fields {
  padding: 0;
  border: 0;
  gap: 8px 9px;
}

.phone-shell.screen-stock-contact .order-contact-fields label > span,
.phone-shell.screen-stock-contact .invoice-fields label > span,
.phone-shell.screen-stock-contact #shipping-fields label > span {
  color: var(--contact-ink);
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 720;
}

.phone-shell.screen-stock-contact .order-contact-fields input,
.phone-shell.screen-stock-contact .invoice-fields input,
.phone-shell.screen-stock-contact #shipping-fields input {
  min-height: 43px;
  border-color: #d2e0de;
  border-radius: 7px;
  background: #fff;
  color: var(--contact-ink);
  font-size: calc(13px * var(--app-font-scale));
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-contact-fields input:focus,
.phone-shell.screen-stock-contact .invoice-fields input:focus,
.phone-shell.screen-stock-contact #shipping-fields input:focus,
.phone-shell.screen-stock-contact .order-note-field textarea:focus {
  border-color: var(--contact-teal);
  outline: 2px solid rgba(67, 137, 141, 0.16);
  outline-offset: 0;
}

.phone-shell.screen-stock-contact .quote-consent {
  color: var(--contact-muted);
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-optional-stack {
  padding: 12px;
}

.phone-shell.screen-stock-contact .order-optional-heading {
  padding-bottom: 8px;
  border-bottom-color: #e4ecea;
}

.phone-shell.screen-stock-contact .order-optional-heading small,
.phone-shell.screen-stock-contact .order-optional-heading > span {
  color: var(--contact-muted);
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-optional-heading > span {
  border: 1px solid #e2e9e7;
  background: #fff;
  font-weight: 650;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details {
  border-bottom-color: #e4ecea;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
  padding: 0 0 10px 44px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice {
  min-height: 54px;
  padding: 8px;
  border-color: var(--contact-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice.active,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.active,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.active {
  border-color: var(--contact-teal);
  background: #f7fbfa;
  box-shadow: none;
}

.phone-shell.screen-stock-contact .pickup-store-link {
  margin: 8px 0 10px;
  padding: 8px;
  border-color: var(--contact-line);
  border-radius: 7px;
  background: #fbfdfc;
}

.phone-shell.screen-stock-contact .pickup-store-leading,
.phone-shell.screen-stock-contact .pickup-store-map-icon {
  border: 1px solid #d5e2e0;
  border-radius: 7px;
  background: #fff;
  color: var(--contact-teal);
}

.phone-shell.screen-stock-contact .bottom-summary {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 20px rgba(31, 59, 61, 0.08);
}

.phone-shell.screen-stock-contact #next-step {
  border-radius: 8px;
  background: var(--contact-teal);
  box-shadow: none;
}

.phone-shell.screen-stock-contact #prev-step {
  border-radius: 8px;
  box-shadow: none;
}

/* Stock contact preview: make optional choices visibly selected and tactile. */
.phone-shell.screen-stock-contact #delivery-options-details .order-choice,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice {
  position: relative;
  overflow: hidden;
  padding-right: 30px;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice:active,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice:active,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice:active {
  transform: scale(0.985);
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice.selected,
.phone-shell.screen-stock-contact #delivery-options-details .order-choice.active,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.selected,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.active,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.selected,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.active {
  border-color: var(--contact-teal);
  background: linear-gradient(180deg, #fbfffe 0%, #eef8f6 100%);
  box-shadow:
    0 0 0 2px rgba(47, 136, 141, 0.12),
    inset 0 0 0 1px rgba(47, 136, 141, 0.08);
  animation: contactChoiceSelect 220ms ease-out;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice.selected::after,
.phone-shell.screen-stock-contact #delivery-options-details .order-choice.active::after,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.selected::after,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.active::after,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.selected::after,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.active::after {
  content: "\f00c";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--contact-teal);
  color: #fff;
  font-family: "Font Awesome 6 Free";
  font-size: calc(9px * var(--app-font-scale));
  font-weight: 900;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(47, 136, 141, 0.18);
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice.selected i,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.selected i,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice.selected i {
  color: var(--contact-teal);
}

.phone-shell.screen-stock-contact .optional-order-details:has(.order-choice.selected) > summary {
  color: var(--contact-teal);
}

.phone-shell.screen-stock-contact .optional-order-details:has(.order-choice.selected) > summary .optional-summary-icon {
  border-color: rgba(47, 136, 141, 0.22);
  background: #e8f6f4;
  color: var(--contact-teal);
}

@keyframes contactChoiceSelect {
  0% {
    box-shadow:
      0 0 0 0 rgba(47, 136, 141, 0),
      inset 0 0 0 1px rgba(47, 136, 141, 0.08);
    transform: scale(0.99);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(47, 136, 141, 0.12),
      inset 0 0 0 1px rgba(47, 136, 141, 0.08);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-shell.screen-stock-contact #delivery-options-details .order-choice,
  .phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice,
  .phone-shell.screen-stock-contact #invoice-options-details .order-choice {
    transition: none;
  }

  .phone-shell.screen-stock-contact #delivery-options-details .order-choice.selected,
  .phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice.selected,
  .phone-shell.screen-stock-contact #invoice-options-details .order-choice.selected {
    animation: none;
  }
}

/* Local prototype: one-line summary state for optional fulfillment info. */
.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  min-height: 62px;
  border-radius: 8px;
  padding: 9px 8px;
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.phone-shell.screen-stock-contact .optional-summary-copy {
  min-width: 0;
}

.phone-shell.screen-stock-contact .optional-state-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.phone-shell.screen-stock-contact .optional-status-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 20px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8f5f3;
  color: var(--contact-teal);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 760;
  line-height: 1;
}

.phone-shell.screen-stock-contact .optional-status-badge[data-status="pending"] {
  background: #fff4db;
  color: #8d5d1b;
}

.phone-shell.screen-stock-contact .optional-status-badge[data-status="later"] {
  background: #f1f5f4;
  color: var(--contact-muted);
}

.phone-shell.screen-stock-contact .optional-edit-label {
  color: #7a8989;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 640;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details[open] {
  margin-top: 6px;
  padding-top: 2px;
  border-bottom-color: #d8e7e4;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details[open] > summary {
  margin-bottom: 8px;
  background: #f3faf8;
  box-shadow: inset 3px 0 0 rgba(47, 136, 141, 0.34);
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
  padding-left: 0;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-option-grid,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-option-grid,
.phone-shell.screen-stock-contact #invoice-options-details .order-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phone-shell.screen-stock-contact .pickup-store-link {
  margin-top: 2px;
}

.phone-shell.screen-stock-contact .pickup-choice-wrap {
  position: relative;
  min-width: 0;
}

.phone-shell.screen-stock-contact .pickup-choice-wrap > .order-choice {
  width: 100%;
  height: 100%;
  padding-right: 28px;
  padding-bottom: 20px;
}

.phone-shell.screen-stock-contact .pickup-card-map-link {
  position: absolute;
  right: 8px;
  bottom: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #cfe1df;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--contact-teal);
  font-size: calc(9.5px * var(--app-font-scale));
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(31, 59, 61, 0.08);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.phone-shell.screen-stock-contact .pickup-card-map-link::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
}

.phone-shell.screen-stock-contact .pickup-card-map-link:hover {
  border-color: var(--contact-teal);
  background: #f2fbf9;
}

.phone-shell.screen-stock-contact .pickup-card-map-link:active {
  transform: scale(0.95);
}

.phone-shell.screen-stock-contact .pickup-card-map-link:focus-visible {
  outline: 2px solid rgba(67, 137, 141, 0.36);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .pickup-choice-wrap:has(.order-choice.selected) .pickup-card-map-link {
  border-color: rgba(67, 137, 141, 0.28);
  background: var(--contact-teal);
  color: #ffffff;
}

.phone-shell.screen-stock-contact .expected-delivery-card {
  display: grid;
  gap: 9px;
  padding: 11px 0 12px;
  border-bottom: 1px solid #e2eeee;
}

.phone-shell.screen-stock-contact .expected-delivery-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 11px;
  padding: 0 4px 0 8px;
}

.phone-shell.screen-stock-contact .expected-delivery-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e8f5ef;
  color: #2f8584;
  font-size: calc(14px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .expected-delivery-copy {
  min-width: 0;
  display: block;
}

.phone-shell.screen-stock-contact .expected-delivery-copy strong {
  color: #1f2c2f;
  font-size: calc(13px * var(--app-font-scale));
  font-weight: 850;
  line-height: 1.2;
}

.phone-shell.screen-stock-contact .expected-delivery-value {
  min-height: 28px;
  max-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 4px 10px;
  border-radius: 8px;
  background: #edf7f7;
  color: #2f7f80;
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.phone-shell.screen-stock-contact .expected-delivery-scroll {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-left: 51px;
  padding: 0 0 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.phone-shell.screen-stock-contact .expected-delivery-scroll::-webkit-scrollbar {
  display: none;
}

.phone-shell.screen-stock-contact .expected-delivery-choice {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #cfe1df;
  border-radius: 999px;
  background: #ffffff;
  color: #2b6f74;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  scroll-snap-align: start;
}

.phone-shell.screen-stock-contact .expected-delivery-choice.selected {
  border-color: #2f888d;
  background: #2f888d;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(47, 136, 141, 0.16);
}

.phone-shell.screen-stock-contact .expected-delivery-choice:focus-visible {
  outline: 3px solid rgba(47, 136, 141, 0.24);
  outline-offset: 2px;
}

.phone-shell.screen-stock-contact .expected-delivery-tip {
  margin: 0 0 0 51px;
  color: #7a6b3f;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 720;
  line-height: 1.35;
}

/* Local prototype: keep quantity +/- symbols visually centered in every stepper. */
.phone-shell .qty-control button,
.phone-shell .cart-qty-control button {
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.phone-shell .qty-step-symbol {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  transform: translateY(-0.06em);
  pointer-events: none;
}

/* Keep real order quantities legible without forcing the action row to wrap. */
.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-actions {
  grid-template-columns: minmax(124px, 132px) 50px;
  justify-content: start;
  align-items: center;
  gap: 6px;
}

.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-qty-control {
  width: 100%;
  min-width: 0;
  height: 32px;
  grid-template-columns: 30px minmax(64px, 1fr) 30px;
}

.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-qty-control button {
  width: 30px;
}

.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-qty-control input {
  min-width: 64px;
  padding-inline: 2px;
  font-size: calc(12px * var(--app-font-scale));
  font-variant-numeric: tabular-nums;
}

.price-loading {
  min-width: 3.8em;
  color: var(--text-muted, #6f8082);
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 700;
  opacity: 0.9;
}

.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-remove {
  width: 50px;
  min-width: 0;
  height: 32px;
  padding: 0 6px;
}

@media (max-width: 360px) {
  .phone-shell.screen-stock-contact .expected-delivery-scroll {
    margin-left: 0;
  }

  .phone-shell.screen-stock-contact .expected-delivery-tip {
    margin-left: 0;
  }

  .phone-shell.screen-stock-contact #delivery-options-details .order-option-grid,
  .phone-shell.screen-stock-contact .pickup-packaging-fields .order-option-grid,
  .phone-shell.screen-stock-contact #invoice-options-details .order-option-grid {
    grid-template-columns: 1fr;
  }
}

/* Local prototype: balance the final confirmation page proportions. */
.phone-shell.screen-stock-contact [data-screen="stock-contact"] {
  padding-inline: 11px;
}

.phone-shell.screen-stock-contact .order-summary-panel {
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
}

.phone-shell.screen-stock-contact .cart-heading {
  min-height: 40px;
  padding: 1px 0 8px;
}

.phone-shell.screen-stock-contact #order-cart-count {
  min-height: 24px;
  padding: 4px 8px;
}

.phone-shell.screen-stock-contact #order-cart-list:has(.cart-empty) {
  padding: 8px 8px 11px;
}

.phone-shell.screen-stock-contact #order-cart-list:has(.cart-empty) .cart-empty {
  padding: 11px 4px;
  font-size: calc(12px * var(--app-font-scale));
  line-height: 1.35;
}

.phone-shell.screen-stock-contact .order-note-details summary {
  min-height: 46px;
  padding-block: 7px;
}

.phone-shell.screen-stock-contact .order-optional-stack {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
}

.phone-shell.screen-stock-contact .order-optional-heading {
  align-items: center;
  padding-bottom: 7px;
}

.phone-shell.screen-stock-contact .order-optional-heading strong {
  font-size: calc(15px * var(--app-font-scale));
  line-height: 1.15;
}

.phone-shell.screen-stock-contact .order-optional-heading small {
  margin-top: 2px;
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .order-optional-heading > span {
  min-height: 23px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  line-height: 1;
}

.phone-shell.screen-stock-contact .order-logo-upload-card {
  margin: 8px 0;
  padding: 0;
  border-style: solid;
  border-color: #dce9e7;
  background: #fbfdfc;
}

.phone-shell.screen-stock-contact .order-logo-upload-main {
  min-height: 52px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px;
  border: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-logo-upload-icon,
.phone-shell.screen-stock-contact .optional-summary-icon,
.phone-shell.screen-stock-contact .expected-delivery-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: calc(14px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-logo-upload-copy strong,
.phone-shell.screen-stock-contact .optional-summary-copy strong,
.phone-shell.screen-stock-contact .expected-delivery-copy strong {
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.18;
}

.phone-shell.screen-stock-contact .order-logo-upload-copy small,
.phone-shell.screen-stock-contact .optional-summary-copy small {
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.25;
}

.phone-shell.screen-stock-contact .order-logo-upload-action {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: calc(10.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .expected-delivery-card {
  gap: 8px;
  padding: 9px 0 10px;
}

.phone-shell.screen-stock-contact .expected-delivery-head {
  grid-template-columns: 32px minmax(0, 1fr) auto 10px;
  gap: 9px;
  padding: 0;
}

.phone-shell.screen-stock-contact .expected-delivery-scroll {
  --expected-delivery-gap: 6px;
  gap: var(--expected-delivery-gap);
  margin-left: 0;
  padding: 0 8px 1px;
  scroll-padding-inline: 8px;
}

.phone-shell.screen-stock-contact .expected-delivery-choice {
  flex-basis: calc((100% - (var(--expected-delivery-gap) * 2)) / 4);
  min-width: 0;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: calc(11px * var(--app-font-scale));
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-shell.screen-stock-contact .expected-delivery-tip {
  margin-left: 41px;
  font-size: calc(9.6px * var(--app-font-scale));
  line-height: 1.3;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details summary {
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  min-height: 54px;
  gap: 9px;
  padding: 8px 6px;
  border-radius: 8px;
}

.phone-shell.screen-stock-contact .optional-state-line {
  gap: 5px;
  margin-top: 3px;
}

.phone-shell.screen-stock-contact .optional-status-badge {
  min-height: 19px;
  padding: 3px 7px;
  font-size: calc(9.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .optional-edit-label {
  font-size: calc(9.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details[open] > summary {
  margin-bottom: 7px;
}

.phone-shell.screen-stock-contact .order-optional-stack .optional-order-details .order-options {
  padding-bottom: 9px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice {
  min-height: 52px;
  padding: 7px 28px 7px 7px;
  border-radius: 8px;
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice i,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice i,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice i {
  font-size: calc(18px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice span,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice span,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice span {
  font-size: calc(11.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact #delivery-options-details .order-choice small,
.phone-shell.screen-stock-contact .pickup-packaging-fields .order-choice small,
.phone-shell.screen-stock-contact #invoice-options-details .order-choice small {
  font-size: calc(9.2px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .pickup-choice-wrap > .order-choice {
  padding-bottom: 18px;
}

.phone-shell.screen-stock-contact .pickup-card-map-link {
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  font-size: calc(8.5px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .bottom-summary {
  gap: 8px;
  padding: 10px 11px calc(10px + env(safe-area-inset-bottom));
}

.phone-shell.screen-stock-contact .bottom-summary button {
  min-height: 44px;
  font-size: calc(13px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .floating-whatsapp {
  right: max(
    calc(5px + env(safe-area-inset-right)),
    calc((100vw - var(--app-preview-width)) / 2 + 5px)
  );
  bottom: calc(80px + env(safe-area-inset-bottom));
  width: 36px;
  height: 36px;
  border-width: 2px;
  box-shadow:
    0 7px 18px rgba(24, 93, 55, 0.2),
    0 0 0 3px rgba(122, 184, 188, 0.12);
}

.phone-shell.screen-stock-contact .floating-whatsapp i {
  font-size: calc(18px * var(--app-font-scale));
}

@media (max-width: 360px) {
  .phone-shell.screen-stock-contact .expected-delivery-head {
    padding-left: 0;
  }

  .phone-shell.screen-stock-contact .expected-delivery-scroll,
  .phone-shell.screen-stock-contact .expected-delivery-tip {
    margin-left: 0;
  }

  .phone-shell.screen-stock-contact .expected-delivery-choice {
    padding-inline: 4px;
    font-size: calc(10.5px * var(--app-font-scale));
  }
}

/* =========================================================================
   首页手机端修复(老板 2026-07-15 勾选:标记图 1/3/4)——③视觉,基于 origin/main de2abd5
   集中追加、可整块回滚。2(热门卡起价)是数据/逻辑问题,归代码开发,不在此。
   ========================================================================= */

/* --- 1. 意/英文大标题过长:降字号+放宽换行,中文不受影响(app.js 会随语言设 html[lang]) --- */
html.home-v11[lang="it"] .phone-shell.home-screen .quick-intro h1,
html.home-v11[lang="en"] .phone-shell.home-screen .quick-intro h1 {
  max-width: 17ch;
  font-size: calc(22px * var(--app-font-scale));
  line-height: 1.14;
}

/* --- 3. WhatsApp 悬浮钮遮挡:首页底部留出按钮高度,滚到底时页脚链接能滑出按钮区 --- */
html.home-v11 .phone-shell.home-screen {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* --- 4. 图片加载中不塌陷/不闪白:给首页各图媒体补占位底色(与既有比例约束配合) --- */
.store-gallery img,
.home-client-cases img,
.home-hot-media img {
  background: #eef2f1;
}

/* 2026-07-17: stock-size portrait split, about 40% controls / 60% size list. */
@media (max-width: 640px) {
  .phone-shell.viewport-portrait.screen-stock-size .step-track {
    padding-block: 5px;
  }

  .phone-shell.viewport-portrait.screen-stock-size .step-meta {
    margin-bottom: 4px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .stock-size-fixed-head {
    padding-top: 8px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .section-heading {
    margin-bottom: 4px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .section-heading > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .section-kicker {
    margin: 0;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .context-strip {
    grid-template-columns: 106px minmax(0, 1fr);
    min-height: 116px;
    gap: 10px;
    margin-bottom: 0;
    padding: 6px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .stock-context-media {
    width: 102px;
    max-width: 102px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .stock-option-panel,
  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .stock-orientation-panel {
    margin: 4px 0 0;
    padding: 4px 6px;
  }

  .phone-shell.viewport-portrait.screen-stock-size [data-screen="stock-size"] .stock-fixed-quantity {
    margin: 4px 0;
  }
}

.site-footer-location span {
  display: inline-block;
  margin-top: 1px;
}

/* 2026-07-23 homepage A: spacious default version selected for quote-dev. */
html.home-v11 .phone-shell.home-screen {
  background:
    linear-gradient(180deg, #fbfaf6 0%, #f6f2eb 42%, #eef6f4 100%);
}

html.home-v11 .phone-shell.home-screen .app-header {
  padding: 18px 18px 28px;
  border-bottom-color: rgba(42, 58, 56, 0.06);
}

html.home-v11 .phone-shell.home-screen .section-block[data-screen="home"] {
  padding-inline: 16px;
  padding-top: 20px;
}

html.home-v11 .phone-shell.home-screen .quick-intro {
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 18px;
  margin-top: 24px;
}

html.home-v11 .phone-shell.home-screen .quick-intro h1 {
  max-width: 14ch;
  font-size: calc(26px * var(--app-font-scale));
  line-height: 1.12;
}

html.home-v11 .phone-shell.home-screen .intro-copy {
  margin-top: 10px;
  line-height: 1.58;
}

html.home-v11 .phone-shell.home-screen .trust-row {
  margin-top: 13px;
}

html.home-v11 .phone-shell.home-screen .mode-option {
  min-height: 116px;
  padding: 14px 64px 14px 14px;
  box-shadow: 0 10px 24px rgba(38, 50, 49, 0.06);
}

html.home-v11 .phone-shell.home-screen .home-hot-products {
  margin-top: 24px;
}

html.home-v11 .phone-shell.home-screen .home-hot-grid {
  gap: 12px;
}

html.home-v11 .phone-shell.home-screen .home-hot-card {
  padding: 10px 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}

html.home-v11 .phone-shell.home-screen .home-brand-intro {
  margin-top: 30px;
}

html.home-v11 .phone-shell.home-screen .home-faq {
  margin-top: 22px;
}

html.home-v11 .phone-shell.home-screen .social-footer {
  margin-top: 24px;
}

html.home-v11 .phone-shell.home-screen .social-slogan {
  max-width: 18em;
  margin-inline: auto;
  line-height: 1.35;
}

html.home-v11 .phone-shell.home-screen .site-footer {
  margin-top: 22px;
}

html.home-v11 .phone-shell.home-screen .site-footer-location {
  line-height: 1.42;
}

@media (max-width: 380px) {
  html.home-v11 .phone-shell.home-screen .quick-intro {
    grid-template-columns: minmax(0, 1fr) 102px;
  }
}

/* 2026-07-24: Step 4 keeps only subtotal/weight/delivery time; optional fields live on the result page. */
.phone-shell.screen-stock-contact .order-fee-summary.is-compact-only {
  gap: 0;
  padding: 6px 8px;
  border-color: #d9e6e4;
  background: #fff;
  box-shadow: none;
}

.phone-shell.screen-stock-contact .order-fee-summary.is-compact-only .order-fee-subtotal-list {
  gap: 0;
}

.phone-shell.screen-stock-contact .order-fee-summary.is-compact-only .order-fee-row {
  min-height: 30px;
  padding: 5px 4px;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-stock-contact .order-fee-summary.is-compact-only .order-fee-row + .order-fee-row {
  border-top: 1px solid #e7eeee;
}

.phone-shell.screen-stock-contact .stock-expected-delivery-slot:not(:empty) {
  margin-top: 10px;
}

.phone-shell.screen-stock-contact .stock-expected-delivery-slot .expected-delivery-card {
  margin: 0;
}

.phone-shell.screen-success .quote-supplement-panel {
  display: grid;
  gap: 12px;
  border-color: #d4e2e0;
  background: #fff;
  box-shadow: 0 6px 18px rgba(34, 78, 82, 0.05);
}

.phone-shell.screen-success .quote-supplement-panel[hidden] {
  display: none;
}

.phone-shell.screen-success .floating-whatsapp {
  display: none;
}

.phone-shell.screen-success .success-supplement-fields,
.phone-shell.screen-success .order-optional-stack {
  display: grid;
  gap: 0;
}

.phone-shell.screen-success .order-optional-stack {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.phone-shell.screen-success .order-logo-upload-card {
  gap: 6px;
  margin: 0;
  padding: 9px 2px 10px;
  border: 0;
  border-bottom: 1px solid #dfe9e8;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-success .order-logo-upload-main {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
}

.phone-shell.screen-success .order-logo-upload-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: #e8f5f1;
}

.phone-shell.screen-success .order-logo-upload-copy strong {
  font-size: calc(12.5px * var(--app-font-scale));
}

.phone-shell.screen-success .order-logo-upload-copy small {
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.screen-success .order-logo-upload-action {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 7px;
  white-space: nowrap;
}

.phone-shell.screen-success .success-invoice-entry {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 9px;
  padding: 9px 3px;
  border: 0;
  border-bottom: 1px solid #dfe9e8;
  border-radius: 0;
  background: transparent;
  color: #1f2c2f;
  text-align: left;
}

.phone-shell.screen-success .success-invoice-entry[hidden] {
  display: none;
}

.phone-shell.screen-success .success-invoice-entry-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.phone-shell.screen-success .success-invoice-entry-copy strong {
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 850;
}

.phone-shell.screen-success .success-invoice-entry-copy small {
  overflow: hidden;
  color: #6f7b7e;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.3;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-shell.screen-success .success-invoice-entry .optional-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8f5f3;
  color: #2f7f80;
  font-size: calc(9.5px * var(--app-font-scale));
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.phone-shell.screen-success .success-invoice-entry .optional-status-badge[data-status="pending"] {
  background: #fff4db;
  color: #8d5d1b;
}

.phone-shell.screen-success .success-invoice-entry .optional-status-badge[data-status="later"] {
  background: #f1f5f4;
  color: #6f7b7e;
}

.phone-shell.screen-success .success-invoice-entry-chevron {
  justify-self: end;
  color: #39898a;
  font-size: calc(11px * var(--app-font-scale));
}

.phone-shell.screen-success .order-note-details,
.phone-shell.screen-success .order-optional-stack .optional-order-details {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #dfe9e8;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.phone-shell.screen-success .order-note-details summary,
.phone-shell.screen-success .order-optional-stack .optional-order-details summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy arrow";
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
}

.phone-shell.screen-success .order-note-details summary::after,
.phone-shell.screen-success .order-optional-stack .optional-order-details summary::after {
  grid-area: arrow;
}

.phone-shell.screen-success .optional-summary-icon {
  display: none;
}

.phone-shell.screen-success .optional-summary-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phone-shell.screen-success .optional-summary-copy strong {
  color: #1f2c2f;
  font-size: calc(12.5px * var(--app-font-scale));
  line-height: 1.2;
  font-weight: 850;
}

.phone-shell.screen-success .optional-summary-copy small {
  grid-column: auto;
  color: #6f7b7e;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.3;
  font-weight: 700;
}

.phone-shell.screen-success .order-note-body,
.phone-shell.screen-success .order-optional-stack .optional-order-details .order-options {
  padding: 0 2px 11px;
}

.phone-shell.screen-success .order-note-field {
  margin: 0;
}

.phone-shell.screen-success .order-note-field textarea,
.phone-shell.screen-success .invoice-fields input,
.phone-shell.screen-success #shipping-fields input {
  width: 100%;
  min-height: 44px;
  border-color: #cbdad8;
  border-radius: 7px;
  background: #fff;
  font-size: max(16px, calc(12px * var(--app-font-scale)));
}

.phone-shell.screen-success .order-note-field textarea {
  min-height: 76px;
  padding: 10px 11px;
}

.phone-shell.screen-success #delivery-options-details .order-option-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.phone-shell.screen-success #delivery-options-details .order-choice {
  min-height: 58px;
}

.phone-shell.screen-success .pickup-packaging-fields {
  margin-top: 9px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid #dfe9e8;
  border-radius: 0;
  background: transparent;
}

.phone-shell.screen-success .invoice-fields label:nth-child(3),
.phone-shell.screen-success .invoice-fields label:nth-child(4) {
  grid-column: 1 / -1;
}

.phone-shell.screen-success .success-supplement-save {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
}

.phone-shell.screen-success .success-supplement-save:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.phone-shell.screen-success .success-supplement-status {
  min-height: 17px;
  margin: -4px 0 0;
  color: #6f7b7e;
  font-size: calc(10px * var(--app-font-scale));
  line-height: 1.3;
  text-align: center;
}

.phone-shell.screen-success .success-supplement-status[data-status="saved"] {
  color: #24735d;
}

.phone-shell.screen-success .success-supplement-status[data-status="error"] {
  color: #a0464c;
}

@media (max-width: 380px) {
  .phone-shell.screen-success .order-logo-upload-main {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .phone-shell.screen-success .order-logo-upload-copy small {
    font-size: calc(9px * var(--app-font-scale));
  }

  .phone-shell.screen-success .order-logo-upload-action {
    padding-inline: 7px;
  }

}

/* Step 4 simple quote: one fulfillment choice, one address action, one primary total. */
.phone-shell.screen-stock-contact .stock-delivery-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #d3e4e2;
  border-radius: 8px;
  background: #fff;
}

.phone-shell.screen-stock-contact .stock-delivery-card[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .stock-delivery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.phone-shell.screen-stock-contact .stock-delivery-head h3,
.phone-shell.screen-stock-contact .stock-delivery-head small {
  margin: 0;
}

.phone-shell.screen-stock-contact .stock-delivery-head h3 {
  color: #1f2c2f;
  font-size: calc(14px * var(--app-font-scale));
  line-height: 1.3;
}

.phone-shell.screen-stock-contact .stock-delivery-head small {
  color: #788487;
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .simple-delivery-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.phone-shell.screen-stock-contact .simple-delivery-options button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 7px;
  border: 1px solid #ccdddc;
  border-radius: 7px;
  background: #fff;
  color: #273437;
  font: inherit;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .simple-delivery-options button.selected {
  border-color: #3e8f91;
  background: #e8f6f4;
  color: #267a7f;
  box-shadow: inset 0 0 0 1px rgba(62, 143, 145, 0.15);
}

.phone-shell.screen-stock-contact .stock-shipping-address {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #e1eceb;
}

.phone-shell.screen-stock-contact .stock-shipping-address[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .stock-shipping-address span {
  min-width: 0;
  overflow: hidden;
  color: #68777a;
  font-size: calc(10.5px * var(--app-font-scale));
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-shell.screen-stock-contact .stock-shipping-address button {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #bcd6d4;
  border-radius: 7px;
  background: #f5fbfa;
  color: #2f8584;
  font: inherit;
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 800;
}

.phone-shell.screen-stock-contact .order-fee-summary {
  gap: 7px;
  padding: 10px 11px;
  background: #fff;
}

.phone-shell.screen-stock-contact .order-fee-primary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phone-shell.screen-stock-contact .order-fee-primary h3,
.phone-shell.screen-stock-contact .order-fee-primary strong {
  margin: 0;
}

.phone-shell.screen-stock-contact .order-fee-primary h3 {
  color: #667579;
  font-size: calc(12px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .order-fee-primary strong {
  color: #267a7f;
  font-size: calc(18px * var(--app-font-scale));
  line-height: 1.15;
}

.phone-shell.screen-stock-contact .order-fee-more {
  padding-bottom: 9px;
  border-bottom: 1px solid #e0ebea;
}

.phone-shell.screen-stock-contact .expected-delivery-head::-webkit-details-marker {
  display: none;
}

.phone-shell.screen-stock-contact .expected-delivery-chevron {
  color: #39898a;
}

.phone-shell.screen-stock-contact .expected-delivery-card > summary {
  cursor: pointer;
  list-style: none;
}

.phone-shell.screen-stock-contact .expected-delivery-body {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid #e0ebea;
}

.shipping-address-sheet {
  width: min(100%, 560px);
  max-height: min(88vh, 720px);
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
}

.shipping-address-sheet .sheet-heading p {
  margin: 3px 0 0;
  color: #738083;
  font-size: 12px;
}

.shipping-address-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 0 4px;
}

.shipping-address-fields label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #5d6c70;
  font-size: 11px;
  font-weight: 750;
}

.shipping-address-fields label.full-field {
  grid-column: 1 / -1;
}

.shipping-address-fields input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 9px 10px;
  border: 1px solid #cddfdd;
  border-radius: 7px;
  background: #fff;
  color: #243235;
  font: inherit;
}

.shipping-address-fields input:focus {
  border-color: #3e8f91;
  outline: 2px solid rgba(62, 143, 145, 0.16);
}

.shipping-address-error {
  min-height: 18px;
  margin: 4px 0;
  color: #b84f4f;
  font-size: 11px;
  font-weight: 700;
}

.shipping-address-actions {
  display: grid;
  grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.4fr);
  gap: 8px;
  padding-top: 4px;
}

.invoice-info-sheet {
  width: min(100%, 560px);
  max-height: min(88vh, 720px);
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
}

.invoice-info-sheet .invoice-sheet-options {
  padding-bottom: 10px;
  border-bottom: 1px solid #e1eceb;
}

.invoice-info-sheet .invoice-sheet-fields {
  gap: 10px;
  margin-top: 10px;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: #f5faf9;
}

.invoice-info-sheet .invoice-sheet-fields label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #506064;
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 750;
}

.invoice-info-sheet .invoice-sheet-fields input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #cddfdd;
  border-radius: 7px;
  background: #fff;
  color: #243235;
  font-size: max(16px, calc(12px * var(--app-font-scale)));
}

.invoice-info-sheet .invoice-sheet-fields input:focus {
  border-color: #3e8f91;
  outline: 2px solid rgba(62, 143, 145, 0.16);
}

.invoice-info-error {
  min-height: 18px;
  margin: 6px 0 2px;
  color: #b84f4f;
  font-size: calc(10.5px * var(--app-font-scale));
  font-weight: 700;
}

.invoice-info-save {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
}

.invoice-info-save[hidden] {
  display: none;
}

@media (max-width: 380px) {
  .shipping-address-fields {
    grid-template-columns: 1fr;
  }

  .shipping-address-fields label.full-field {
    grid-column: auto;
  }
}

@media (max-width: 380px) {
  .invoice-info-sheet .invoice-sheet-fields {
    grid-template-columns: 1fr;
  }

  .invoice-info-sheet .invoice-sheet-fields label:nth-child(3),
  .invoice-info-sheet .invoice-sheet-fields label:nth-child(4) {
    grid-column: auto;
  }
}

/* Step 4 uses compact triggers; packaging and delivery timing are chosen in dedicated sheets. */
.phone-shell.screen-stock-contact .stock-pickup-packaging {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 0;
  border: 0;
  border-top: 1px solid #e1eceb;
  border-radius: 0;
  background: transparent;
  color: #5e6f72;
  font: inherit;
  font-size: calc(10.5px * var(--app-font-scale));
  text-align: left;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .stock-pickup-packaging[hidden] {
  display: none;
}

.phone-shell.screen-stock-contact .stock-pickup-packaging strong {
  min-width: 0;
  overflow: hidden;
  color: #263538;
  font-size: calc(11.5px * var(--app-font-scale));
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-shell.screen-stock-contact .stock-pickup-packaging i {
  color: #34898a;
  font-size: calc(10px * var(--app-font-scale));
}

.phone-shell.screen-stock-contact .expected-delivery-card {
  display: block;
  padding: 0;
}

.phone-shell.screen-stock-contact .expected-delivery-head {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding-inline: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.phone-shell.screen-stock-contact .expected-delivery-title-line {
  width: 100%;
  max-width: 100%;
  display: block;
}

.phone-shell.screen-stock-contact .expected-delivery-head > .expected-delivery-chevron {
  justify-self: end;
  color: #34898a;
  font-size: calc(10px * var(--app-font-scale));
  transform: none;
}

@media (max-width: 360px) {
  .phone-shell.screen-stock-contact .expected-delivery-head {
    grid-template-columns: 32px minmax(0, 1fr) auto 9px;
    gap: 7px;
    padding-inline: 8px;
  }

  .phone-shell.screen-stock-contact .expected-delivery-value {
    max-width: 125px;
    padding-inline: 8px;
    font-size: calc(10px * var(--app-font-scale));
  }
}

#order-cart-list .cart-product-thumb:not(:disabled) {
  cursor: zoom-in;
}

.quote-choice-sheet {
  width: min(100%, 560px);
  max-height: min(82vh, 620px);
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
}

.quote-choice-sheet .sheet-heading {
  margin-bottom: 10px;
}

.quote-choice-sheet .sheet-heading p {
  margin: 3px 0 0;
  color: #738083;
  font-size: calc(11px * var(--app-font-scale));
}

.quote-sheet-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 0;
}

.quote-sheet-choice,
.phone-shell.screen-stock-contact .quote-choice-sheet .expected-delivery-choice {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #cadfdd;
  border-radius: 7px;
  background: #fff;
  color: #2b3a3d;
  font: inherit;
  font-size: calc(12px * var(--app-font-scale));
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.quote-sheet-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.quote-sheet-choice > i {
  color: #34898a;
  font-size: calc(17px * var(--app-font-scale));
  text-align: center;
}

.quote-sheet-choice > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.packaging-sheet-choice {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 82px;
  padding: 8px;
}

.packaging-choice-media {
  position: relative;
  width: 64px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #dbe8e6;
  border-radius: 6px;
  background: #fff;
  place-items: center;
}

.packaging-choice-media > i {
  color: #34898a;
  font-size: calc(21px * var(--app-font-scale));
}

.packaging-choice-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

.packaging-choice-media > img[hidden] {
  display: none;
}

.packaging-choice-copy {
  align-content: center;
}

.quote-sheet-choice strong,
.quote-sheet-choice small {
  min-width: 0;
}

.quote-sheet-choice small {
  color: #718083;
  font-size: calc(10px * var(--app-font-scale));
  font-weight: 650;
}

.quote-sheet-choice.selected,
.phone-shell.screen-stock-contact .quote-choice-sheet .expected-delivery-choice.selected {
  border-color: #3e8f91;
  background: #e8f6f4;
  color: #267a7f;
  box-shadow: inset 0 0 0 1px rgba(62, 143, 145, 0.14);
}

.quote-sheet-choice.selected > i,
.quote-sheet-choice.selected small {
  color: #267a7f;
}

.phone-shell.screen-stock-contact .quote-choice-sheet .expected-delivery-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  margin: 0;
  padding: 4px 0;
}

.phone-shell.screen-stock-contact .quote-choice-sheet .expected-delivery-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.phone-shell.screen-stock-contact .quote-choice-sheet .quote-sheet-tip {
  margin: 8px 0 0;
  padding-top: 9px;
  border-top: 1px solid #e1eceb;
  text-align: center;
}

@media (max-width: 340px) {
  .quote-sheet-options,
  .phone-shell.screen-stock-contact .quote-choice-sheet .expected-delivery-scroll {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-27 critical-flow fixes: stable quantity controls and visible recovery states. */
.phone-shell .cart-qty-control,
.phone-shell.screen-stock-contact .cart-qty-control,
.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-qty-control {
  width: 124px;
  min-width: 124px;
  grid-template-columns: 30px minmax(64px, 1fr) 30px;
  flex: 0 0 124px;
}

.phone-shell .cart-qty-control input,
.phone-shell.screen-stock-contact .cart-qty-control input,
.phone-shell.screen-stock-contact .order-summary-panel #order-cart-list .cart-qty-control input {
  width: 100%;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 360px) {
  #cart-sheet .cart-item-selectable .cart-actions {
    grid-column: 2 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  #cart-sheet .cart-item-selectable .cart-qty-control {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    grid-template-columns: 30px minmax(64px, 1fr) 30px;
  }

  #cart-sheet .cart-item-selectable .cart-edit,
  #cart-sheet .cart-item-selectable .cart-remove {
    width: 100%;
    min-width: 0;
  }
}

.print-quantity-warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #e6c993;
  border-radius: 8px;
  background: #fff8e9;
  color: #6e4c14;
  font-size: 13px;
  line-height: 1.35;
}

.print-quantity-warning button,
.price-retry-button {
  border: 1px solid #9ac8c8;
  border-radius: 7px;
  background: #f2fbfa;
  color: var(--brand-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.print-quantity-warning button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
}

.price-retry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 8px;
  white-space: nowrap;
}

.size-price.price-retry-button {
  margin-inline-start: 8px;
  font-size: 12px;
}

.tier-unit-price.price-retry-button {
  width: auto;
  min-width: 0;
  margin-top: 2px;
  font-size: 11px;
}

@media (max-width: 390px) {
  .print-quantity-warning {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Mobile Safari: prevent focus and double-tap auto zoom without disabling pinch zoom. */
@media (max-width: 767px), (pointer: coarse) {
  .phone-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  .phone-shell select,
  .phone-shell textarea {
    font-size: max(
      16px,
      calc(14px * var(--app-font-scale)),
      calc(14px * var(--profile-font-scale, 1))
    ) !important;
  }

  .phone-shell :is(
    button,
    a[href],
    input,
    select,
    textarea,
    [role="button"],
    [role="radio"],
    label[for]
  ) {
    touch-action: manipulation;
  }
}

/* 2026-07-25: low-risk site audit fixes. */
.hero-dot,
.step-dot {
  position: relative;
}

.hero-dot::after {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.step-dot::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.stock-fixed-quantity-presets.tiers-scrollable {
  padding-right: 24px;
  scroll-padding-right: 24px;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: inset -22px 0 18px -20px rgba(29, 91, 94, 0.48);
}

.stock-fixed-quantity-presets.tiers-scrollable::after {
  content: "›";
  position: sticky;
  right: 0;
  z-index: 2;
  flex: 0 0 18px;
  min-width: 18px;
  min-height: 100%;
  display: grid;
  place-items: center;
  margin-left: -18px;
  border-radius: 999px 0 0 999px;
  background: rgba(246, 251, 250, 0.94);
  color: var(--brand-dark);
  font-size: calc(18px * var(--app-font-scale));
  font-weight: 900;
  pointer-events: none;
}

.phone-shell.screen-stock-contact #order-cart-count {
  max-width: min(100%, 350px);
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 0;
  white-space: normal;
  line-height: 1.35;
  text-align: right;
}

.phone-shell.screen-stock-contact #order-cart-count .order-cart-count-segment,
.phone-shell.screen-stock-contact #order-cart-count .order-cart-count-separator {
  white-space: nowrap;
}

.phone-shell.screen-stock-contact #order-cart-count .order-cart-count-separator {
  padding-inline: 3px;
}

.legal-heading {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  align-items: center;
}

.legal-heading h3 {
  text-align: center;
}

.legal-heading .sheet-back,
.legal-heading .sheet-close {
  width: 72px;
  min-height: 40px;
  border: 1px solid #d7e8e6;
  border-radius: 8px;
  background: #eef7f6;
  color: var(--brand-dark);
  font-weight: 850;
}

@media (max-width: 340px) {
  .summary-actions.has-back {
    grid-template-columns: 0.72fr 0.9fr 1.38fr;
  }

  .summary-button {
    min-height: 48px;
    padding: 5px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
}

/* 必填项引导高亮（QA 2026-07-29 发现#4）：提示只闪 2 秒且不指路，客户以为按钮坏了。
   点确认时滚动到缺的那一项并闪一下边框，第二次点同样会闪（不是一次性）。 */
@keyframes milo-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 71, 8, 0); }
  25%, 75% { box-shadow: 0 0 0 4px rgba(181, 71, 8, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(181, 71, 8, 0.3); }
}

.milo-needs-attention {
  border-radius: 12px;
  animation: milo-attention-pulse 1.1s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .milo-needs-attention {
    animation: none;
    box-shadow: 0 0 0 3px rgba(181, 71, 8, 0.28);
  }
}