:root {
  --ink: #20242a;
  --muted: #6b7280;
  --line: #eceff3;
  --paper: #ffffff;
  --soft: #f6f7f9;
  --orange: #ff6b2c;
  --yellow: #ffd83d;
  --blue: #1978ff;
  --green: #18a058;
  --shadow: 0 14px 40px rgba(27, 32, 44, 0.09);
}

/* Customer quotation center: independent from cart and formal orders */
.order-inquiry-icon::before {
  content: "";
  position: absolute;
  inset: 2px 1px 3px;
  border: 1.7px solid currentColor;
  border-radius: 4px 4px 6px 6px;
}

.order-inquiry-icon::after {
  content: "¥";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

#inquiries.order-center-panel.active {
  display: block;
}

.quote-request-center {
  color: #152238;
}

.quote-request-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 216, 61, .38), transparent 26%),
    linear-gradient(135deg, #fffbea 0%, #fff 53%, #f4f8fd 100%);
  border: 1px solid #e1e7ef;
  border-left: 5px solid #ffd83d;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.quote-request-eyebrow,
.quote-decision-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #c58d00;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
}

.quote-request-hero h2 {
  margin: 0;
  color: #0f1c30;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.15;
}

.quote-request-hero p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.75;
}

.quote-request-route-badge {
  display: grid;
  min-width: 244px;
  gap: 4px;
  padding: 13px 17px;
  background: rgba(255, 250, 222, .94);
  border: 1px solid #f1cb34;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(180, 132, 0, .1);
}

.quote-request-route-badge b {
  color: #8a6300;
  font-size: 14px;
}

.quote-request-route-badge span {
  color: #6b7280;
  font-size: 12px;
}

.quote-request-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
  padding: 14px;
  overflow: visible;
  background:
    radial-gradient(circle at 7% 0, rgba(255, 216, 61, .13), transparent 24%),
    linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.quote-request-steps::before {
  content: none;
}

.quote-request-steps > span {
  --step-accent: #e4b600;
  --step-soft: #fff8d8;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 11px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 100% 0, var(--step-soft), transparent 42%),
    #fff;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.quote-request-steps > span::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  background: var(--step-accent);
  border-radius: 0 3px 3px 0;
  content: "";
}

.quote-request-steps > span:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -24px;
  display: grid;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #9aa5b3;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .07);
  content: "›";
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.quote-request-steps > span:nth-child(2) {
  --step-accent: #ec9f16;
  --step-soft: #fff4dd;
}

.quote-request-steps > span:nth-child(3) {
  --step-accent: #3b82c4;
  --step-soft: #edf7ff;
}

.quote-request-steps > span:nth-child(4) {
  --step-accent: #2e9c72;
  --step-soft: #ebfaf3;
}

.quote-request-steps > span:hover {
  border-color: var(--step-accent);
  box-shadow: 0 9px 20px rgba(15, 23, 42, .09);
  transform: translateY(-2px);
}

.quote-request-steps b {
  display: grid;
  width: 42px;
  height: 42px;
  grid-row: 1 / 3;
  place-items: center;
  color: #172033;
  background: linear-gradient(145deg, #fff9d5, #ffe45a);
  border: 1px solid #ebc22c;
  border-radius: 12px;
  box-shadow: 0 5px 12px rgba(206, 157, 0, .14);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 950;
}

.quote-request-steps > span:nth-child(2) b {
  background: linear-gradient(145deg, #fff6e4, #ffc95b);
  border-color: #e9aa2b;
}

.quote-request-steps > span:nth-child(3) b {
  color: #175487;
  background: linear-gradient(145deg, #f1f8ff, #cfe9ff);
  border-color: #9dccf2;
}

.quote-request-steps > span:nth-child(4) b {
  color: #176a4b;
  background: linear-gradient(145deg, #f0fff8, #c9f0df);
  border-color: #9cd9bf;
}

.quote-request-steps strong {
  color: #172033;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.25;
}

.quote-request-steps small {
  overflow: hidden;
  color: #718096;
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.quote-request-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: #f4f7fb;
  border-bottom: 1px solid #dde5ef;
}

.quote-request-view-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 16px;
  color: #66758a;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.quote-request-view-tabs button::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
}

.quote-request-view-tabs button > span {
  display: grid;
  width: 38px;
  height: 38px;
  grid-row: 1 / 3;
  place-items: center;
  color: #172033;
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 950;
}

.quote-request-view-tabs button b {
  color: #263449;
  font-size: 16px;
  line-height: 1.15;
}

.quote-request-view-tabs button small {
  overflow: hidden;
  color: #8490a1;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-view-tabs button.active {
  color: #111827;
  background: #fff;
  border-color: #e5c23c;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

.quote-request-view-tabs button.active::after {
  background: #ffd83d;
}

.quote-request-view-tabs button.active > span {
  background: linear-gradient(180deg, #ffe96c, #ffd83d);
  border-color: #efc21b;
}

.quote-request-workspace[data-quote-request-view="compose"] .quote-request-board,
.quote-request-workspace[data-quote-request-view="records"] .quote-request-composer {
  display: none;
}

.quote-request-composer,
.quote-request-board {
  position: relative;
  min-width: 0;
  padding: 20px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quote-request-composer {
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

.quote-request-board {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 216, 61, .08), transparent 24%),
    #fff;
}

.quote-request-composer::before,
.quote-request-board::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffd83d, rgba(255, 216, 61, 0));
  border-radius: 0 0 5px 5px;
}

.quote-request-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf1f5;
}

.quote-request-section-head > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  min-width: 0;
  align-items: center;
}

.quote-request-section-head > div > strong {
  color: #111827;
  font-size: 19px;
  line-height: 1.2;
}

.quote-request-section-head > div > small {
  overflow: hidden;
  color: #758399;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-section-head > button,
.quote-request-detail-head > button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  color: #273449;
  background: #f7f9fc;
  border: 1px solid #d9e2ed;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.quote-request-section-head > button:hover,
.quote-request-detail-head > button:hover {
  background: #fff5ba;
  border-color: #ffd83d;
}

.quote-request-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.quote-request-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.quote-request-field > span,
.quote-request-files legend {
  color: #25324a;
  font-size: 13px;
  font-weight: 850;
}

.quote-request-field > span button {
  float: right;
  padding: 0;
  color: #9a7300;
  background: transparent;
  border: 0;
  font: 850 11px/1 inherit;
  cursor: pointer;
}

.quote-request-field > span button:hover {
  color: #111827;
  text-decoration: underline;
}

.quote-request-field input,
.quote-request-field select,
.quote-request-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  color: #172033;
  background: #fbfcfe;
  border: 1px solid #d6e0ec;
  border-radius: 10px;
  outline: none;
  font: 650 14px/1.45 inherit;
}

.quote-request-field textarea {
  resize: vertical;
}

.quote-request-field :is(input, select, textarea):focus {
  background: #fff;
  border-color: #e9bd14;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .2);
}

.quote-request-product-field {
  position: relative;
  z-index: 12;
}

.quote-request-recent-products {
  display: grid;
  gap: 9px;
  margin: 0 0 14px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #fffdf2, #f7faff);
  border: 1px solid #e5d89a;
  border-radius: 11px;
}

.quote-request-recent-products[hidden] {
  display: none !important;
}

.quote-request-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-request-recent-head > div {
  display: grid;
  gap: 2px;
}

.quote-request-recent-head strong {
  color: #1e2a3d;
  font-size: 12px;
}

.quote-request-recent-head small {
  color: #78869a;
  font-size: 10px;
}

.quote-request-recent-head > span {
  padding: 4px 8px;
  color: #765b00;
  background: #fff2ad;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.quote-request-recent-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quote-request-recent-list button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  color: #273449;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.quote-request-recent-list button:hover,
.quote-request-recent-list button.is-active {
  background: #fff9d9;
  border-color: #e4bf2b;
  box-shadow: inset 3px 0 0 #f2c31c;
}

.quote-request-recent-list button > i {
  display: grid;
  width: 30px;
  height: 30px;
  overflow: hidden;
  place-items: center;
  color: #172033;
  background: #ffdc3f;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.quote-request-recent-list button > i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-request-recent-list button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.quote-request-recent-list button strong,
.quote-request-recent-list button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-recent-list button strong {
  color: #1c283a;
  font-size: 11px;
}

.quote-request-recent-list button small {
  color: #7a8799;
  font-size: 9px;
}

.quote-request-recent-list button em {
  color: #826500;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.quote-request-product-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quote-request-product-field > span small {
  color: #8a96a6;
  font-size: 11px;
  font-weight: 600;
}

.quote-request-product-search {
  position: relative;
}

.quote-request-product-search > i {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 15px;
  height: 15px;
  border: 2px solid #7c899c;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-58%);
}

.quote-request-product-search > i::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: #7c899c;
  border-radius: 2px;
  content: "";
  transform: rotate(45deg);
}

.quote-request-field .quote-request-product-search input {
  height: 50px;
  padding: 11px 76px 11px 43px;
  background: #fff;
  border-color: #cfd9e7;
  font-size: 15px;
  font-weight: 700;
}

.quote-request-product-search input::-webkit-search-cancel-button {
  display: none;
}

.quote-request-product-search > button {
  position: absolute;
  top: 50%;
  right: 9px;
  min-height: 32px;
  padding: 0 12px;
  color: #59687b;
  background: #f3f6fa;
  border: 1px solid #dce4ee;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transform: translateY(-50%);
}

.quote-request-product-search > button:hover {
  color: #172033;
  background: #fff4bd;
  border-color: #e8c537;
}

.quote-request-product-search > button[hidden],
.quote-request-product-suggestions[hidden] {
  display: none !important;
}

.quote-request-product-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% - 4px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 390px;
  overflow: auto;
  padding: 7px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid #d5dfeb;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(31, 45, 66, .18);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.quote-request-product-results-head {
  position: sticky;
  z-index: 2;
  top: -7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  color: #314057;
  background: rgba(249, 251, 254, .96);
  border-bottom: 1px solid #e4eaf1;
  font-size: 11px;
}

.quote-request-product-results-head span {
  font-weight: 900;
}

.quote-request-product-results-head small {
  color: #8995a5;
}

.quote-request-product-suggestions > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  color: #243147;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.quote-request-product-suggestions > button:last-child {
  border-bottom: 0;
}

.quote-request-product-suggestions > button:hover,
.quote-request-product-suggestions > button:focus-visible {
  background: #fff9d8;
  outline: none;
}

.quote-request-product-suggestions > button.is-selected {
  background: #fff6bd;
  box-shadow: inset 3px 0 0 #f0bd00;
}

.quote-request-product-suggestions > button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #1d2737;
  background: linear-gradient(145deg, #ffe45d, #ffc92e);
  border: 1px solid #efc019;
  border-radius: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 950;
}

.quote-request-product-suggestions > button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.quote-request-product-suggestions > button strong {
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-product-suggestions > button small {
  color: #78869a;
  font-size: 10px;
}

.quote-request-product-suggestions > button em {
  max-width: 240px;
  overflow: hidden;
  padding: 5px 8px;
  color: #56657a;
  background: #f3f6fa;
  border-radius: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-product-empty {
  display: grid;
  min-height: 110px;
  place-content: center;
  gap: 5px;
  color: #7c899a;
  text-align: center;
}

.quote-request-product-empty b {
  color: #2b374b;
  font-size: 13px;
}

.quote-request-product-empty span {
  font-size: 11px;
}

.quote-request-product-custom-profile {
  display: grid;
  gap: 10px;
  margin: 0 0 13px;
  padding: 12px;
  background: linear-gradient(135deg, #fffdf1, #f8fbff);
  border: 1px solid #e5d996;
  border-radius: 11px;
}

.quote-request-product-custom-profile[hidden] {
  display: none !important;
}

.quote-request-product-custom-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quote-request-product-custom-head > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: #172033;
  background: #ffdc3f;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 950;
}

.quote-request-product-custom-head > div {
  display: grid;
  gap: 2px;
}

.quote-request-product-custom-head strong {
  color: #1c283b;
  font-size: 13px;
}

.quote-request-product-custom-head small {
  color: #7d899a;
  font-size: 10px;
}

.quote-request-product-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.quote-request-product-custom-grid p {
  display: grid;
  min-width: 0;
  gap: 4px;
  margin: 0;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid #e5eaf0;
  border-radius: 8px;
}

.quote-request-product-custom-grid b {
  color: #344157;
  font-size: 10px;
}

.quote-request-product-custom-grid span {
  overflow: hidden;
  color: #647187;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.quote-request-files {
  min-width: 0;
  margin: 3px 0 14px;
  padding: 0;
  border: 0;
}

.quote-request-files legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
}

.quote-request-files legend > span {
  color: #263449;
  font-size: 13px;
  font-weight: 900;
}

.quote-request-files legend em {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  margin-left: 5px;
  padding: 0 7px;
  color: #7c6400;
  background: #fff4ba;
  border: 1px solid #ead269;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  vertical-align: 1px;
}

.quote-request-files legend small {
  float: none;
  color: #8a96a6;
  font-size: 10px;
  font-weight: 500;
}

.quote-request-file-toolbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg, rgba(255, 248, 210, .88), rgba(249, 251, 254, .94));
  border: 1px solid #eadfba;
  border-radius: 10px;
}

.quote-request-file-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.quote-request-file-toolbar strong {
  color: #263449;
  font-size: 12px;
}

.quote-request-file-toolbar span {
  color: #7b8798;
  font-size: 10px;
  line-height: 1.45;
}

.quote-request-file-toolbar button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 11px;
  color: #536174;
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.quote-request-file-toolbar button:not(:disabled):hover {
  color: #b73a29;
  background: #fff5f2;
  border-color: #f1b7ad;
}

.quote-request-file-toolbar button:disabled {
  color: #a8b1bd;
  background: rgba(255, 255, 255, .56);
  cursor: not-allowed;
}

.quote-request-file-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.quote-request-file-toolbar-actions button[hidden] {
  display: none !important;
}

#quoteRequestReloadFiles {
  color: #6f5700;
  background: #fff7ca;
  border-color: #e7cb59;
}

#quoteRequestUploadFiles {
  color: #172033;
  background: #ffdc3f;
  border-color: #e7bd16;
  box-shadow: 0 3px 0 rgba(192, 147, 0, .16);
}

#quoteRequestUploadFiles:not(:disabled):hover {
  color: #111827;
  background: #ffd326;
  border-color: #d8ad00;
}

.quote-request-file-choices {
  display: grid;
  max-height: 190px;
  gap: 7px;
  overflow: auto;
  padding: 9px;
  background: linear-gradient(180deg, #fbfcfe, #f7f9fc);
  border: 1px dashed #cbd8e7;
  border-radius: 10px;
  scrollbar-width: thin;
}

.quote-request-file-choices label {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  background: #fff;
  border: 1px solid #e4eaf1;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.quote-request-file-choices label:hover {
  background: #fffdf3;
  border-color: #ead477;
}

.quote-request-file-choices label.is-selected {
  background: #fff9d8;
  border-color: #e2bd28;
  box-shadow: inset 3px 0 0 #f2c51f;
}

.quote-request-file-choices input {
  width: 16px;
  height: 16px;
  accent-color: #f0be00;
}

.quote-request-file-choices label > span {
  display: grid;
  min-width: 0;
}

.quote-request-file-choices b,
.quote-request-file-choices small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-file-choices b {
  color: #263449;
  font-size: 12px;
}

.quote-request-file-choices small {
  color: #8a96a6;
  font-size: 10px;
}

.quote-request-files-empty {
  display: grid;
  width: 100%;
  min-height: 96px;
  grid-column: 1 / -1;
  place-content: center;
  place-items: center;
  justify-self: stretch;
  gap: 4px;
  padding: 12px;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.quote-request-files-empty b {
  color: #334155;
}

.quote-request-files-empty.is-cleared {
  background: #fbfcfe;
  border-radius: 8px;
}

.quote-request-submit-hint {
  margin: 0 0 12px;
  padding: 11px 12px;
  color: #775b00;
  background: #fff9dc;
  border-left: 3px solid #ffd83d;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.55;
}

.quote-request-submit {
  width: 100%;
  min-height: 48px;
  color: #111827;
  background: linear-gradient(180deg, #ffe45e 0%, #ffd62b 100%);
  border: 1px solid #efbf00;
  border-radius: 11px;
  box-shadow: 0 9px 18px rgba(233, 181, 0, .16);
  font: 900 15px/1 inherit;
  cursor: pointer;
}

.quote-request-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(233, 181, 0, .23);
}

.quote-request-submit:disabled {
  color: #9aa5b3;
  background: #edf1f5;
  border-color: #e0e5eb;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.quote-request-status-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  padding: 2px 2px 7px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.quote-request-status-tabs button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 13px;
  color: #5c697b;
  background: #f7f9fc;
  border: 1px solid #e0e7ef;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.quote-request-status-tabs button.active {
  color: #111827;
  background: linear-gradient(180deg, #ffe867, #ffd83d);
  border-color: #e9b900;
  box-shadow: 0 5px 12px rgba(229, 176, 0, .16);
}

.quote-request-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 506px;
  overflow: auto;
  padding: 2px 6px 8px 2px;
  scrollbar-width: thin;
}

.quote-request-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
  min-height: 125px;
  padding: 16px 16px 14px;
  color: #253247;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 216, 61, .13), transparent 36%),
    linear-gradient(145deg, #fffdf7, #fff 65%);
  border: 1px solid #dde5ef;
  border-left: 5px solid #ffd83d;
  border-radius: 13px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.quote-request-card:hover,
.quote-request-card.active {
  transform: translateY(-2px);
  border-color: #e2b700;
  box-shadow: 0 14px 26px rgba(15, 23, 42, .09);
}

.quote-request-card.status-converted { border-left-color: #22a06b; }
.quote-request-card.status-rejected,
.quote-request-card.status-expired { border-left-color: #cbd5e1; }
.quote-request-card.status-needs_requote { border-left-color: #f97316; }

.quote-request-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  color: #805d00;
  background: #fff6c4;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.quote-request-card > strong {
  max-width: calc(100% - 70px);
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-card > small,
.quote-request-card > p {
  overflow: hidden;
  margin: 0;
  color: #7c899a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e1e7ef;
}

.quote-request-card > div span {
  color: #f04b2d;
  font-size: 18px;
  font-weight: 950;
}

.quote-request-card > div em {
  color: #607087;
  font-size: 11px;
  font-style: normal;
}

@media (min-width: 1100px) {
  .quote-request-composer .quote-request-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quote-request-composer .quote-request-file-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quote-request-empty,
.quote-request-detail-loading {
  display: grid;
  grid-column: 1 / -1;
  min-height: 220px;
  place-content: center;
  gap: 7px;
  padding: 25px;
  color: #77859a;
  background: #f8fafc;
  border: 1px dashed #cad6e5;
  border-radius: 12px;
  text-align: center;
}

.quote-request-empty b,
.quote-request-detail-loading b {
  color: #243249;
  font-size: 15px;
}

.quote-request-empty button {
  justify-self: center;
  margin-top: 8px;
  padding: 8px 18px;
  color: #111827;
  background: #ffd83d;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
}

.quote-request-detail {
  margin-top: 16px;
  padding: 18px;
  background: #f8fafc;
  border: 1px solid #dbe4ef;
  border-radius: 13px;
}

.quote-request-detail[hidden] {
  display: none !important;
}

.quote-request-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.quote-request-detail-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.quote-request-detail-head small {
  color: #758399;
  font-size: 11px;
}

.quote-request-detail-status {
  padding: 5px 9px;
  color: #7c5b00;
  background: #fff2ad;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.quote-request-product-summary {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e1e8f0;
  border-radius: 10px;
}

.quote-request-product-media {
  display: grid;
  width: 72px;
  height: 72px;
  overflow: hidden;
  place-items: center;
  color: #8a6800;
  background: #fff6bd;
  border-radius: 9px;
  font-weight: 900;
}

.quote-request-product-media :is(img, .product-art) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-request-product-summary > div:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.quote-request-product-summary strong {
  color: #111827;
  font-size: 15px;
}

.quote-request-product-summary small,
.quote-request-product-summary p {
  margin: 0;
  color: #6d7c91;
  font-size: 11px;
  line-height: 1.5;
}

.quote-request-specs,
.quote-offer-breakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.quote-request-specs > span,
.quote-offer-breakdown > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
}

.quote-request-specs small,
.quote-offer-breakdown small {
  color: #8491a3;
  font-size: 9px;
}

.quote-request-specs b,
.quote-offer-breakdown b {
  overflow: hidden;
  color: #243249;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-request-context {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 8px;
  margin-bottom: 12px;
}

.quote-request-context > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 9px;
}

.quote-request-context small {
  color: #8491a3;
  font-size: 9px;
}

.quote-request-context b {
  color: #243249;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.quote-request-context span {
  overflow: hidden;
  color: #6d7c91;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-offer-card {
  margin-bottom: 12px;
  padding: 14px;
  background: #fffdf2;
  border: 1px solid #f0cf53;
  border-radius: 11px;
}

.quote-offer-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.quote-offer-card > header > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.quote-offer-card > header span {
  color: #745700;
  font-size: 11px;
  font-weight: 850;
}

.quote-offer-card > header strong {
  color: #f04b2d;
  font-size: 24px;
}

.quote-offer-card > header em {
  color: #7e650f;
  font-size: 10px;
  font-style: normal;
}

.quote-offer-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.quote-offer-card dl > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  padding-top: 7px;
  border-top: 1px dashed #eadb9e;
  font-size: 11px;
}

.quote-offer-card dt { color: #887234; }
.quote-offer-card dd { margin: 0; color: #253247; font-weight: 700; }

.quote-offer-waiting {
  display: grid;
  gap: 4px;
  min-height: 110px;
  place-content: center;
  margin-bottom: 12px;
  color: #7a8798;
  background: #fff;
  border: 1px dashed #cbd7e5;
  border-radius: 10px;
  text-align: center;
}

.quote-offer-waiting b { color: #253247; }

.quote-converted-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 13px 14px;
  background: #effbf6;
  border: 1px solid #bce9d3;
  border-radius: 10px;
}

.quote-converted-result > div:first-child {
  display: grid;
  gap: 3px;
}

.quote-converted-result b { color: #146c4a; font-size: 13px; }
.quote-converted-result span { color: #5b766b; font-size: 10px; }
.quote-converted-result > div:last-child { display: flex; gap: 7px; }

.quote-request-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}

.quote-request-detail-actions button,
.quote-converted-result button {
  min-height: 36px;
  padding: 0 13px;
  color: #263449;
  background: #fff;
  border: 1px solid #d5dfeb;
  border-radius: 8px;
  font: 850 11px/1 inherit;
  cursor: pointer;
}

.quote-request-detail-actions button.primary,
.quote-converted-result button.primary {
  color: #111827;
  background: #ffd83d;
  border-color: #e3b600;
}

.quote-request-detail-actions button.danger {
  color: #bd3724;
  background: #fff6f4;
  border-color: #f3c0b8;
}

.quote-version-history {
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
}

.quote-version-history > header {
  display: flex;
  justify-content: space-between;
  padding: 11px 13px;
  background: #f6f8fb;
  border-bottom: 1px solid #e1e7ee;
}

.quote-version-history > header strong { font-size: 12px; }
.quote-version-history > header span { color: #7c899a; font-size: 10px; }
.quote-version-history > div { display: grid; }

.quote-version-history article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 13px;
  border-bottom: 1px solid #edf1f5;
}

.quote-version-history article:last-child { border-bottom: 0; }
.quote-version-history article > b { color: #9a7300; font-size: 11px; }
.quote-version-history article > div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.quote-version-history article strong { color: #202e43; font-size: 12px; }
.quote-version-history article span { overflow: hidden; color: #758399; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.quote-version-history time { color: #8a96a6; font-size: 9px; }
.quote-version-history p { margin: 0; padding: 18px; color: #8491a3; font-size: 11px; text-align: center; }

.quote-decision-dialog {
  width: min(520px, calc(100vw - 28px));
  max-width: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.quote-decision-dialog::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}

.quote-decision-modal {
  position: relative;
  display: grid;
  gap: 13px;
  padding: 28px;
  background: #fff;
  border: 1px solid #dfe6ee;
  border-top: 5px solid #ffd83d;
  border-radius: 16px;
  box-shadow: 0 28px 65px rgba(15, 23, 42, .25);
}

.quote-decision-modal h2 { margin: 0; color: #152238; font-size: 22px; }
.quote-decision-modal > p { margin: 0; color: #6c7a8e; font-size: 13px; line-height: 1.65; }
.quote-decision-modal > label { display: grid; gap: 7px; }
.quote-decision-modal > label span { color: #334155; font-size: 12px; font-weight: 850; }
.quote-decision-modal textarea { width: 100%; padding: 11px; border: 1px solid #d7e0ea; border-radius: 9px; outline: 0; font: 13px/1.55 inherit; resize: vertical; }
.quote-decision-modal textarea:focus { border-color: #e9bd14; box-shadow: 0 0 0 3px rgba(255, 216, 61, .2); }
.quote-decision-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.quote-decision-actions button { min-height: 42px; border: 1px solid #d8e1eb; border-radius: 9px; font: 900 13px/1 inherit; cursor: pointer; }
.quote-decision-actions button:first-child { color: #4f5d70; background: #f4f6f8; }
.quote-decision-actions button:last-child { color: #111827; background: #ffd83d; border-color: #e4b800; }
.quote-decision-dialog[data-decision="reject"] .quote-decision-actions button:last-child { color: #fff; background: #d94732; border-color: #c83723; }

.detail-btn.detail-btn-inquiry,
.stock-inquiry {
  color: #182238;
  background: #fff6c6;
  border: 1px solid #ebc436;
  font-weight: 900;
}

.detail-btn.detail-btn-inquiry:hover,
.stock-inquiry:hover {
  background: #ffe45e;
  border-color: #d9ad00;
}

@media (max-width: 1180px) {
  .quote-request-list { grid-template-columns: 1fr; }
  .quote-request-specs,
  .quote-offer-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .quote-request-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-request-steps > span::after { display: none !important; }
  .quote-request-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}

@media (max-width: 640px) {
  .quote-request-hero { align-items: stretch; padding: 21px 18px; flex-direction: column; }
  .quote-request-route-badge { min-width: 0; }
  .quote-request-steps { grid-template-columns: 1fr; }
  .quote-request-steps > span { min-height: 70px; }
  .quote-request-view-tabs {
    gap: 5px;
    padding: 7px;
  }
  .quote-request-view-tabs button {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 54px;
    padding: 8px 10px;
  }
  .quote-request-view-tabs button > span {
    width: 30px;
    height: 30px;
  }
  .quote-request-view-tabs button b { font-size: 14px; }
  .quote-request-view-tabs button small { display: none; }
  .quote-request-composer,
  .quote-request-board { padding: 15px; border-radius: 0; }
  .quote-request-form-grid,
  .quote-request-list { grid-template-columns: 1fr; }
  .quote-request-section-head { align-items: flex-start; }
  .quote-request-section-head > div > small { white-space: normal; }
  .quote-request-files legend small { display: block; float: none; margin-top: 3px; }
  .quote-request-detail { padding: 12px; }
  .quote-request-detail-head { align-items: flex-start; flex-direction: column-reverse; }
  .quote-request-product-summary { grid-template-columns: 58px minmax(0, 1fr); }
  .quote-request-product-media { width: 58px; height: 58px; }
  .quote-request-specs,
  .quote-offer-breakdown { grid-template-columns: 1fr 1fr; }
  .quote-request-context { grid-template-columns: 1fr; }
  .quote-converted-result { align-items: stretch; flex-direction: column; }
  .quote-converted-result > div:last-child,
  .quote-request-detail-actions { display: grid; grid-template-columns: 1fr; }
  .quote-request-detail-actions button,
  .quote-converted-result button { width: 100%; }
  .quote-version-history article { grid-template-columns: 30px minmax(0, 1fr); }
  .quote-version-history time { grid-column: 2; }
  .quote-decision-modal { padding: 24px 18px 18px; }
  .quote-decision-actions { grid-template-columns: 1fr; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  scrollbar-gutter: stable;
}

:where(html, body, .header-order-list, .quote-sku-suggestions, .product-detail-main, .order-sidebar, .customer-service-chat, .customer-service-profile, .company-carousel-viewport) {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .78) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 42px;
  background:
    linear-gradient(180deg, rgba(203, 213, 225, .86), rgba(148, 163, 184, .86))
    content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 1), rgba(100, 116, 139, 1))
    content-box;
}

*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

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

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #edf0f3;
  backdrop-filter: none;
}

.topbar {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) minmax(280px, 520px) auto;
  align-items: center;
  gap: 16px;
  max-width: none;
  min-height: 68px;
  margin: 0 auto;
  padding: 0 max(22px, calc((100vw - 1880px) / 2 + 22px));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
}

.brand-mascot,
.avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #111827;
  font-weight: 900;
  background: linear-gradient(135deg, #fff 0%, #ffe479 38%, #ff6b2c 100%);
  border: 2px solid #111827;
  border-radius: 50%;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.brand strong {
  display: block;
  color: #111318;
  font-size: 18px;
  font-weight: 900;
}

.brand small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.9vw, 34px);
  min-width: 0;
  color: #2f3742;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 2px;
  transition: color 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 3px;
  background: var(--yellow);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: #111318;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.main-nav a.nav-no-indicator::after {
  display: none;
}

.main-nav a.nav-template-muted,
.main-nav a.nav-template-muted:hover,
.main-nav a.nav-template-muted.active {
  color: #6f737b;
  font-weight: 500;
}

.main-nav a.nav-template-muted::after {
  display: none;
}

.search {
  display: flex;
  align-items: center;
  justify-self: end;
  width: min(100%, 620px);
  height: 40px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e6eb;
  border-radius: 999px;
}

.search::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 16px;
  border: 2px solid #a8b0bc;
  border-radius: 50%;
  box-shadow: 8px 8px 0 -6px #a8b0bc;
}

.search input {
  width: 100%;
  min-width: 0;
  padding: 0 14px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #556070;
  font-size: 14px;
}

.search button,
.login-pill {
  display: inline-grid;
  min-width: 64px;
  height: 32px;
  place-items: center;
  margin-right: 4px;
  color: #fff;
  background: #202329;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.login-pill {
  min-width: 58px;
  width: auto;
  padding: 0 15px;
  margin: 0;
  font-size: 14px;
}

.login-pill.is-member {
  min-width: 72px;
  color: #1f2329;
  background: var(--yellow);
}

.login-pill[hidden],
.register-pill[hidden] {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

.header-tool {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 38px;
  min-height: 50px;
  padding: 5px 6px;
  color: #111318;
  font-size: 12px;
  line-height: 1;
}

.header-tool:hover,
.more-menu.is-open .more-trigger {
  background: #f7f8fb;
  border-radius: 6px;
}

.message-tool {
  position: relative;
  text-decoration: none;
}

.message-count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  color: #fff;
  background: #ff4d4f;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
}

.order-count-badge {
  right: -6px;
  min-width: 18px;
  max-width: none;
  width: auto;
  padding: 0 6px;
  white-space: nowrap;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.message-tool:hover {
  background: transparent;
  border-radius: 0;
}

.header-tool i {
  position: relative;
  display: block;
  width: 21px;
  height: 21px;
}

.more-menu {
  position: relative;
}

.more-trigger i {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 4px;
}

.more-trigger i::before,
.more-trigger i::after {
  content: "";
}

.more-trigger i,
.more-trigger i::before,
.more-trigger i::after,
.more-trigger span::before {
  border-radius: 2px;
}

.more-trigger i::before,
.more-trigger i::after,
.more-trigger span::before,
.more-trigger span::after {
  display: none;
}

.more-trigger i {
  background:
    linear-gradient(#111318 0 0) 0 0 / 7px 7px no-repeat,
    linear-gradient(#111318 0 0) 14px 0 / 7px 7px no-repeat,
    linear-gradient(#111318 0 0) 0 14px / 7px 7px no-repeat,
    linear-gradient(#111318 0 0) 14px 14px / 7px 7px no-repeat;
}

.more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: -24px;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: 265px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(21, 27, 38, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.more-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 34px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e8edf4;
  border-top: 1px solid #e8edf4;
  transform: rotate(45deg);
}

.more-menu:hover .more-panel,
.more-menu:focus-within .more-panel,
.more-menu.is-open .more-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.more-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 9px 12px;
  border-radius: 4px;
  color: #394250;
}

.more-item:hover {
  transform: translateX(2px);
}

.more-item i {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #fff;
  border-radius: 4px;
}

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

.more-item strong {
  color: #374151;
  font-size: 14px;
  line-height: 1.25;
}

.more-item small {
  margin-top: 4px;
  color: #8b95a5;
  font-size: 12px;
  line-height: 1.25;
}

.cart-entry {
  background: #fff0f1;
}

.batch-entry {
  background: #e8fbf8;
}

.multi-entry {
  background: #edf7ff;
}

.material-entry {
  background: #f3e9ff;
}

.cart-entry i::before {
  content: "";
  width: 17px;
  height: 14px;
  border: 3px solid #ff6b72;
  border-top: 0;
  border-radius: 2px 2px 4px 4px;
}

.cart-entry i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  width: 7px;
  height: 3px;
  border-left: 2px solid #ff6b72;
  border-top: 2px solid #ff6b72;
  transform: skewX(-12deg);
}

.batch-entry i::before,
.multi-entry i::before {
  content: "";
  width: 18px;
  height: 19px;
  border: 3px solid currentColor;
  border-radius: 2px;
}

.batch-entry i::after,
.multi-entry i::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
  transform: translateY(4px);
}

.batch-entry i {
  color: #27c7bf;
}

.multi-entry i {
  color: #6fc5f2;
}

.material-entry i::before {
  content: "";
  width: 20px;
  height: 16px;
  background: #b675ef;
  border-radius: 2px;
}

.material-entry i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  width: 12px;
  height: 4px;
  background: #d3a3ff;
  border-radius: 2px 2px 0 0;
}

.order-menu {
  position: relative;
}

.order-tool {
  text-decoration: none;
}

.order-tool i {
  width: 21px;
  height: 21px;
  border: 1.7px solid #111318;
  border-radius: 4px;
}

.order-tool i::before,
.order-tool i::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 1.7px;
  background: #111318;
  border-radius: 999px;
}

.order-tool i::before {
  top: 7px;
  box-shadow: 0 5px 0 #111318;
}

.order-tool i::after {
  top: 17px;
  left: 8px;
  right: 8px;
}

.order-tool:hover {
  color: #111318;
}

.order-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: -72px;
  z-index: 42;
  width: 390px;
  max-width: min(390px, calc(100vw - 28px));
  padding: 14px;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(21, 27, 38, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.order-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 86px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e8edf4;
  border-top: 1px solid #e8edf4;
  transform: rotate(45deg);
}

.order-menu.is-open .order-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.order-menu.is-open .order-tool {
  background: #f7f8fb;
  border-radius: 6px;
}

.order-panel-head {
  display: grid;
  gap: 4px;
  padding: 3px 2px 12px;
  border-bottom: 1px solid #eef1f5;
}

.order-panel-head strong {
  color: #111827;
  font-size: 15px;
}

.order-panel-head small {
  color: #7b8494;
  font-size: 12px;
  line-height: 1.5;
}

.header-order-list {
  display: grid;
  gap: 9px;
  max-height: 270px;
  overflow: auto;
  padding: 12px 0;
}

.header-order-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #edf1f5;
  border-radius: 7px;
}

.header-order-item .product-art {
  width: 46px;
  height: 42px;
  min-height: 0;
  border-radius: 7px;
}

.header-order-item .cart-product-thumb {
  width: 46px;
  height: 42px;
  border-radius: 7px;
}

.header-order-item strong,
.header-order-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-order-item strong {
  color: #111827;
  font-size: 13px;
}

.header-order-item span {
  margin-top: 3px;
  color: #7b8494;
  font-size: 11px;
}

.header-order-item b {
  color: #ff6b2c;
  font-size: 13px;
}

.header-order-more,
.header-order-empty {
  padding: 14px;
  color: #6b7280;
  background: #f8fafc;
  border: 1px dashed #dce3ec;
  border-radius: 7px;
  text-align: center;
  font-size: 12px;
}

.header-order-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 12px;
  color: #7b8494;
  background: #fff7eb;
  border: 1px solid #ffd5a5;
  border-radius: 7px;
}

.header-order-total b {
  color: #ff6b2c;
  font-size: 21px;
}

.header-order-actions {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 9px;
  margin-top: 10px;
}

.header-order-actions a,
.header-order-actions button {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.header-order-primary {
  color: #fff;
  background: #202329;
}

.header-order-actions button {
  color: #ff4d3d;
  background: #fff2ee;
  border: 1px solid #ffc7bd;
}

.message-icon {
  display: block;
  width: 21px;
  height: 21px;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.message-icon path {
  fill: none;
  stroke: #111318;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.message-tool::before,
.message-tool::after {
  position: absolute;
  left: 50%;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.message-tool::before {
  content: "";
  top: calc(100% + 1px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #202329;
}

.message-tool::after {
  content: "通知消息";
  top: calc(100% + 7px);
  min-width: 70px;
  padding: 8px 10px;
  color: #fff;
  background: #202329;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 8px 18px rgba(17, 19, 24, 0.18);
}

.message-tool:hover::before,
.message-tool:hover::after,
.message-tool:focus-visible::before,
.message-tool:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.message-menu {
  position: relative;
}

.message-menu .message-tool::before,
.message-menu .message-tool::after {
  display: none;
}

.message-menu.is-open .message-tool {
  background: #f7f8fb;
  border-radius: 6px;
}

.message-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 376px;
  max-width: calc(100vw - 12px);
  height: 100vh;
  color: #111827;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -18px 0 44px rgba(17, 24, 39, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateX(102%);
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.message-menu.is-open .message-drawer {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.message-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #edf0f4;
}

.message-drawer-head strong {
  font-size: 16px;
  font-weight: 900;
}

.message-drawer-head button {
  position: relative;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.message-drawer-head button::before,
.message-drawer-head button::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  width: 16px;
  height: 1.6px;
  background: #111318;
  border-radius: 99px;
}

.message-drawer-head button::before {
  transform: rotate(45deg);
}

.message-drawer-head button::after {
  transform: rotate(-45deg);
}

.message-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 8px;
}

.message-tabs button {
  min-width: 44px;
  height: 24px;
  padding: 0 13px;
  color: #6b7280;
  background: #f1f2f4;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.message-tabs button.active {
  color: #fff;
  background: #2f3136;
}

.message-drawer-body {
  min-height: 0;
  overflow: auto;
  padding: 8px 16px 18px;
}

.message-empty-state {
  display: grid;
  min-height: 430px;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: #969da8;
  text-align: center;
}

.message-empty-illustration {
  position: relative;
  width: 156px;
  height: 132px;
}

.message-empty-illustration::before {
  content: "";
  position: absolute;
  left: 42px;
  bottom: 18px;
  width: 74px;
  height: 64px;
  background: linear-gradient(135deg, #f4f6fa, #e6eaf0);
  clip-path: polygon(0 18%, 56% 0, 100% 22%, 100% 100%, 0 100%);
}

.message-empty-illustration::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 3px;
  width: 116px;
  height: 12px;
  background: #f2f4f7;
  border-radius: 50%;
}

.message-empty-lid,
.message-empty-side {
  position: absolute;
  z-index: 1;
  background: #eef1f6;
}

.message-empty-lid {
  left: 36px;
  top: 16px;
  width: 78px;
  height: 48px;
  clip-path: polygon(12% 0, 100% 30%, 78% 100%, 0 72%);
  transform: rotate(18deg);
}

.message-empty-side {
  right: 24px;
  bottom: 32px;
  width: 44px;
  height: 52px;
  clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 84%);
  opacity: 0.9;
}

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

.message-card {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #edf1f5;
  border-radius: 8px;
  cursor: pointer;
}

.message-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #111827;
  font-size: 13px;
}

.message-card strong em {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #6b7280;
  background: #eef1f5;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
}

.message-card span {
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
}

.message-card small {
  color: #9aa3af;
  font-size: 11px;
}

.message-card:hover {
  border-color: #d8dee8;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.07);
}

.message-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid #edf0f4;
}

.message-drawer-foot button,
.message-drawer-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3f4856;
  background: transparent;
  border: 0;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.message-drawer-foot i {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

.message-drawer-foot button i::before,
.message-drawer-foot button i::after,
.message-drawer-foot a i::before,
.message-drawer-foot a i::after {
  content: "";
  position: absolute;
  border: 1.4px solid #5f6876;
}

.message-drawer-foot button i::before {
  left: 2px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

.message-drawer-foot button i::after {
  left: 7px;
  top: 2px;
  width: 5px;
  height: 5px;
  border-left: 0;
  border-bottom: 0;
}

.message-drawer-foot a i::before {
  left: 3px;
  top: 2px;
  width: 8px;
  height: 10px;
  border-radius: 50% 50% 4px 4px;
  border-bottom: 0;
}

.message-drawer-foot a i::after {
  left: 5px;
  bottom: 1px;
  width: 4px;
  height: 2px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.register-pill {
  display: inline-grid;
  min-width: 58px;
  height: 32px;
  place-items: center;
  color: #596272;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.member-avatar-button {
  position: relative;
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  padding: 2px;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 16px;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(211, 168, 33, 0.16);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.member-avatar-button[hidden] {
  display: none;
}

.member-avatar-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  transform: none;
  pointer-events: none;
}

.member-avatar-button:hover {
  box-shadow:
    0 4px 11px rgba(15, 23, 42, 0.2),
    0 0 0 3px rgba(255, 216, 61, 0.24);
  transform: translateY(-1px);
}

.member-avatar-button:focus-visible {
  outline: 3px solid rgba(255, 194, 0, 0.38);
  outline-offset: 2px;
}

.member-menu {
  position: relative;
  display: grid;
  place-items: center;
}

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

.member-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 180;
  width: 326px;
  overflow: hidden;
  color: #566171;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 0 0 11px 11px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.member-menu-panel::before {
  position: absolute;
  top: -7px;
  right: 24px;
  width: 14px;
  height: 14px;
  content: "";
  background: #fff8e7;
  border-top: 1px solid #e5e9ef;
  border-left: 1px solid #e5e9ef;
  transform: rotate(45deg);
}

.member-menu.is-open .member-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.member-menu-summary {
  display: grid;
  gap: 11px;
  padding: 17px 13px 14px;
  background: linear-gradient(135deg, #fffdf6 0%, #fff2d2 100%);
  border-bottom: 1px dashed #d9dee6;
}

.member-menu-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.member-menu-title-row > strong {
  overflow: hidden;
  color: #101820;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-menu-center {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 28px;
  padding: 0 11px;
  color: #8b5c11;
  background: #ffe4a3;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.member-menu-center span {
  color: #7b4510;
  font-size: 10px;
}

.member-menu-level {
  justify-self: start;
  padding: 3px 8px;
  color: #ffe59e;
  background: #373b42;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.member-menu-expiry {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 0 11px;
  color: #8a6d53;
  background: rgba(255, 255, 255, 0.68);
  border-radius: 5px;
  font-size: 12px;
}

.member-menu-expiry b {
  color: #795a3f;
  font-weight: 700;
}

.member-menu-links {
  display: grid;
  padding: 5px 0;
}

.member-menu-links > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  color: #626c79;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  text-align: left;
  cursor: pointer;
}

.member-menu-links > button:hover {
  color: #1e2732;
  background: #fffaf0;
}

.member-menu-links > button:last-child {
  border-bottom: 0;
}

.member-menu-links svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.member-menu-links span {
  font-size: 14px;
}

.member-menu-links i {
  color: #6d7681;
  font-size: 23px;
  font-style: normal;
  line-height: 1;
}

.member-menu-links .member-menu-logout {
  margin-top: 5px;
  color: #ff4a53;
  border-top: 1px dashed #d9dee6;
}

.member-menu-links .member-menu-logout:hover {
  color: #ed2934;
  background: #fff5f5;
}

.category-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  max-width: none;
  min-height: 96px;
  margin: 0 auto;
  padding: 16px max(34px, calc((100vw - 1760px) / 2 + 34px));
  color: #334155;
  background:
    linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #e8eef6;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
  font-size: 14px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.category-bar::-webkit-scrollbar {
  display: none;
}

.category-chip {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  flex: 0 0 202px;
  gap: 12px;
  min-width: 0;
  height: 66px;
  padding: 10px 14px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  color: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.category-chip::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: #ff6b2c;
  transition: width 0.16s ease;
}

.category-chip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 40px;
  line-height: 1.15;
}

.category-chip strong,
.category-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-chip strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.category-chip small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.category-chip i {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #5b6573;
  background:
    linear-gradient(135deg, #fff8e5, #edf5ff);
  border: 1px solid #dfe8f3;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(15, 23, 42, 0.06);
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.category-chip i.category-thumb,
.category-chip i.category-thumb-fallback {
  overflow: hidden;
  padding: 3px;
  color: inherit;
  background: #fff;
}

.category-thumb::before,
.category-thumb::after,
.category-thumb-fallback::before,
.category-thumb-fallback::after {
  display: none !important;
}

.category-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.2s ease;
}

.category-thumb-fallback {
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #eef4fb) !important;
}

.category-mini-card {
  position: relative;
  display: block;
  width: 78%;
  height: 72%;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(135deg, #fffaf0 0%, #f3f8ff 100%);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2), 0 5px 10px rgba(15, 23, 42, 0.08);
}

.category-mini-card::before {
  content: "";
  position: absolute;
  left: 13%;
  top: 18%;
  width: 62%;
  height: 44%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  transform: rotate(-6deg);
}

.category-mini-card::after {
  content: "";
  position: absolute;
  right: 14%;
  bottom: 18%;
  width: 34%;
  height: 28%;
  border-radius: 5px;
  background: linear-gradient(135deg, #9bdcff, #b9f5ce);
  box-shadow: -8px -5px 0 rgba(148, 163, 184, 0.16);
}

.category-chip em {
  position: absolute;
  top: 9px;
  right: 10px;
  display: grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  padding: 0 8px;
  color: #667085;
  background: #f4f7fb;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}

.category-chip:hover {
  color: #111827;
  background: #fff;
  border-color: #ffd98a;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.category-chip.active {
  color: #111827;
  background:
    linear-gradient(135deg, #fff2b8 0%, #fffdf4 64%, #fff 100%);
  border-color: #ffd25a;
  box-shadow: 0 16px 34px rgba(245, 188, 0, 0.18);
}

.category-chip.active::after {
  width: 38px;
}

.category-chip.active i {
  color: #ffe66d;
  background: #1f242c;
  border-color: #1f242c;
  transform: translateY(-1px);
}

.category-chip:hover i.category-thumb img,
.category-chip.active i.category-thumb img {
  transform: scale(1.08);
}

.category-chip.active i.category-thumb,
.category-chip.active i.category-thumb-fallback {
  background: #fff;
  border-color: #ffd25a;
  box-shadow: 0 10px 22px rgba(245, 188, 0, 0.2);
}

.category-chip.active em {
  color: #111827;
  background: #ffd83d;
}

.category-chip:focus-visible {
  outline: 3px solid rgba(255, 224, 77, 0.45);
  outline-offset: 2px;
}

.category-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.category-mega.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-inner {
  position: relative;
  width: 100%;
  min-height: 374px;
  padding: 34px max(44px, calc((100vw - 1320px) / 2 + 44px));
  background: #fff;
  border-top: 1px solid #eff1f4;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 18px 36px rgba(12, 18, 28, 0.12);
}

.mega-content {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 410px;
  gap: 34px;
  max-width: 1320px;
  margin: 0 auto;
}

.mega-left {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 24px;
  border-right: 1px dashed #e2e6ec;
}

.mega-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  min-height: 38px;
  align-items: center;
  border-bottom: 1px dashed #e2e6ec;
}

.mega-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 16px;
  color: #111827;
  background: #f7f7f7;
  border: 0;
  border-radius: 7px;
  font-weight: 900;
  cursor: pointer;
}

.mega-group span {
  color: #b2bac5;
  font-weight: 500;
}

.mega-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  min-width: 0;
}

.mega-items button,
.mega-recommend-list button {
  padding: 0;
  color: #69717d;
  background: transparent;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}

.mega-items button:hover,
.mega-recommend-list button:hover {
  color: var(--orange);
}

.mega-recommend {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px 24px;
  align-content: start;
}

.mega-recommend strong {
  grid-column: 1 / 2;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.mega-recommend-list {
  grid-column: 1 / 2;
  display: grid;
  gap: 18px;
  align-content: start;
}

.mega-preview {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.mega-preview .product-art {
  width: 300px;
  height: 296px;
  min-height: 0;
  border-radius: 12px;
}

.mega-preview span {
  color: #68707c;
  font-size: 13px;
}

.mega-close {
  position: absolute;
  top: 18px;
  right: 28px;
  width: 24px;
  height: 24px;
  color: #7d8794;
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.category-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.category-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cat-icon::before,
.cat-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  background: currentColor;
  border-radius: 2px;
}

.cat-all::before {
  inset: 6px;
  background: transparent;
  border: 1px solid currentColor;
}

.cat-card::before {
  left: 6px;
  right: 6px;
  top: 8px;
  height: 2px;
}

.cat-card::after {
  left: 6px;
  right: 8px;
  bottom: 8px;
  height: 2px;
}

.cat-sheet::before,
.cat-book::before {
  left: 8px;
  top: 6px;
  width: 2px;
  height: 12px;
}

.cat-sheet::after,
.cat-book::after {
  left: 13px;
  top: 6px;
  width: 2px;
  height: 12px;
}

.cat-tag {
  transform: rotate(-20deg);
}

.cat-tag::before {
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.cat-poster::before {
  left: 6px;
  top: 6px;
  width: 12px;
  height: 9px;
  background: transparent;
  border: 1px solid currentColor;
}

.cat-box::before {
  left: 6px;
  top: 8px;
  width: 12px;
  height: 9px;
  background: transparent;
  border-top: 2px solid currentColor;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.cat-office::before {
  left: 6px;
  top: 7px;
  width: 12px;
  height: 10px;
  background: transparent;
  border: 1px solid currentColor;
}

.cat-home::before {
  left: 8px;
  top: 10px;
  width: 8px;
  height: 7px;
}

.cat-home::after {
  left: 8px;
  top: 5px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.cat-spark::before,
.cat-season::before {
  left: 11px;
  top: 5px;
  width: 2px;
  height: 14px;
}

.cat-spark::after,
.cat-season::after {
  left: 5px;
  top: 11px;
  width: 14px;
  height: 2px;
}

.cat-sample::before {
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
}

.cat-icon.category-thumb::before,
.cat-icon.category-thumb::after,
.cat-icon.category-thumb-fallback::before,
.cat-icon.category-thumb-fallback::after {
  content: none !important;
  display: none !important;
}

.notice-strip {
  display: grid;
  min-height: 50px;
  place-items: center;
  padding: 0 24px;
  color: #fff;
  background: #6b351f;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.notice-strip a {
  margin-left: 12px;
  color: #fff;
  text-decoration: underline;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(650px, 0.92fr) minmax(620px, 1.08fr);
  align-items: stretch;
  height: 430px;
  min-height: 430px;
  max-height: 430px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 92%, rgba(255, 216, 61, 0.95) 0 55px, transparent 57px),
    linear-gradient(90deg, #ff6f32 0%, #ff7d2f 50%, #ffc72d 100%);
}

.hero[data-theme="pvc"] {
  background:
    radial-gradient(circle at 0% 92%, rgba(255, 238, 88, 0.95) 0 55px, transparent 57px),
    linear-gradient(90deg, #fff66b 0%, #fff493 45%, #fff 100%);
}

.hero[data-theme="pvc"] .hero-copy,
.hero[data-theme="pvc"] .hero-subtitle {
  color: #111827;
}

.hero[data-theme="box"] {
  background:
    radial-gradient(circle at 0% 92%, rgba(255, 216, 61, 0.95) 0 55px, transparent 57px),
    linear-gradient(90deg, #ff8147 0%, #ffb133 50%, #ffe174 100%);
}

.hero[data-theme="card"] {
  background:
    radial-gradient(circle at 0% 92%, rgba(255, 216, 61, 0.95) 0 55px, transparent 57px),
    linear-gradient(90deg, #1579ff 0%, #2ba7ff 48%, #ffd955 100%);
}

.hero-copy {
  z-index: 2;
  align-self: center;
  display: grid;
  align-content: center;
  height: 430px;
  min-height: 0;
  padding: 34px 28px 42px max(48px, calc((100vw - 1500px) / 2 + 72px));
  color: #fff;
}

.hero h1 {
  margin: 0;
  max-width: 600px;
  min-height: 162px;
  font-size: clamp(58px, 5.2vw, 84px);
  line-height: 0.93;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255, 106, 39, 0.2);
}

.hero-subtitle {
  max-width: 620px;
  min-height: 52px;
  margin: 14px 0 16px;
  color: #fff;
  font-size: clamp(17px, 1.45vw, 25px);
  line-height: 1.45;
  font-weight: 900;
}

.hero-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 44px;
  max-width: 620px;
}

.hero-badges span {
  display: inline-grid;
  min-height: 44px;
  place-items: center;
  padding: 0 20px;
  color: #fff;
  border-radius: 999px;
  font-size: clamp(17px, 1.42vw, 25px);
  font-weight: 900;
  white-space: nowrap;
}

.hero-badges span:first-child {
  background: #ff3dc4;
}

.hero-badges span:last-child {
  background: #087cff;
}

.primary-action,
.secondary-action {
  display: inline-grid;
  min-width: 132px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  font-weight: 800;
}

.primary-action {
  color: var(--blue);
  background: #fff;
}

.secondary-action {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.hero-stage {
  position: relative;
  height: 430px;
  min-height: 430px;
}

.spark-shape {
  position: absolute;
  right: 3%;
  top: 36px;
  width: min(40vw, 540px);
  height: 315px;
  background: #ffe14b;
  clip-path: polygon(8% 18%, 35% 22%, 48% 0, 58% 24%, 91% 8%, 76% 42%, 100% 58%, 70% 66%, 76% 100%, 52% 78%, 30% 100%, 30% 70%, 0 60%, 25% 42%);
}

.speech-bubble {
  position: absolute;
  left: -26px;
  top: 38px;
  z-index: 4;
  display: grid;
  min-width: 220px;
  min-height: 104px;
  place-items: center;
  color: #fff;
  background: #0778ff;
  border: 6px solid #fff;
  border-radius: 54% 46% 52% 48%;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.07);
  font-size: 23px;
  font-weight: 900;
  line-height: 1.16;
  transform: rotate(-3deg);
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 40px;
  bottom: -30px;
  width: 46px;
  height: 42px;
  background: #0778ff;
  border-right: 6px solid #fff;
  border-bottom: 6px solid #fff;
  clip-path: polygon(0 0, 100% 18%, 20% 100%);
}

.eyes {
  position: absolute;
  right: 21%;
  top: 4px;
  z-index: 4;
  display: flex;
  gap: 8px;
  transform: rotate(7deg);
}

.eyes i {
  position: relative;
  width: 62px;
  height: 86px;
  background: #fff;
  border: 5px solid #111;
  border-radius: 50%;
}

.eyes i::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 28px;
  width: 22px;
  height: 39px;
  background: #111;
  border-radius: 50%;
}

.poster-stack {
  position: absolute;
  right: 9%;
  bottom: 18px;
  z-index: 3;
  width: min(45vw, 650px);
  height: 312px;
  transform-origin: center bottom;
}

.print-poster {
  position: absolute;
  display: grid;
  align-content: start;
  width: 190px;
  height: 258px;
  padding: 18px;
  background: #ffe98a;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 40px rgba(103, 47, 0, 0.22);
}

.print-poster span {
  color: #2a6d95;
  font-size: 18px;
  font-weight: 900;
}

.print-poster i,
.print-poster b {
  display: block;
  width: 100%;
  border-radius: 8px;
}

.print-poster i {
  height: 136px;
  margin-top: 16px;
  background:
    radial-gradient(circle at 20% 30%, #ff615f 0 11px, transparent 12px),
    radial-gradient(circle at 72% 36%, #25aef4 0 15px, transparent 16px),
    radial-gradient(circle at 48% 66%, #ffdb4d 0 18px, transparent 19px),
    linear-gradient(135deg, #fff0b2, #70c88f);
}

.print-poster b {
  height: 27px;
  margin-top: 16px;
  background: linear-gradient(90deg, #fb703f, #ffd955);
}

.poster-one {
  left: 0;
  top: 30px;
  transform: rotate(-14deg);
}

.poster-two {
  left: 190px;
  top: 0;
  z-index: 2;
  width: 215px;
  height: 292px;
  background: #ffd75c;
  transform: rotate(-7deg);
}

.poster-three {
  right: 0;
  top: 68px;
  z-index: 3;
  width: 215px;
  height: 258px;
  background: #166be8;
  transform: rotate(10deg);
}

.poster-three span {
  color: #ffd955;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 34px;
  height: 58px;
  margin-top: -29px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-arrow::before,
.hero-arrow::after {
  content: "";
  position: absolute;
  left: 14px;
  width: 3px;
  height: 31px;
  background: #222;
  border-radius: 4px;
}

.hero-prev {
  left: 12px;
}

.hero-next {
  right: 12px;
}

.hero-prev::before {
  top: 3px;
  transform: rotate(42deg);
}

.hero-prev::after {
  bottom: 3px;
  transform: rotate(-42deg);
}

.hero-next::before {
  top: 3px;
  transform: rotate(-42deg);
}

.hero-next::after {
  bottom: 3px;
  transform: rotate(42deg);
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.hero-dots span,
.hero-dots button {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(90, 71, 48, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.24s ease, background 0.24s ease;
}

.hero-dots .active,
.hero-dots button.active {
  width: 48px;
  background: rgba(90, 71, 48, 0.24);
}

.hero-dots button i {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: inherit;
  background: rgba(90, 71, 48, 0.76);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-dots button.active i {
  display: block;
}

.print-sample {
  position: absolute;
  display: grid;
  align-content: start;
  width: 178px;
  height: 238px;
  padding: 18px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 24px 40px rgba(119, 47, 0, 0.28);
  transform: rotate(-13deg);
}

.print-sample span {
  color: var(--blue);
  font-weight: 900;
}

.print-sample i,
.print-sample b {
  display: block;
  width: 100%;
  border-radius: 7px;
}

.print-sample i {
  height: 112px;
  margin-top: 18px;
  background:
    radial-gradient(circle at 22% 34%, #ff6767 0 14px, transparent 15px),
    radial-gradient(circle at 70% 42%, #4bc2ff 0 16px, transparent 17px),
    linear-gradient(135deg, #f8f1c7, #7bd16f);
}

.print-sample b {
  height: 26px;
  margin-top: 16px;
  background: linear-gradient(90deg, #ff7e45, #ffe779);
}

.sample-two {
  right: 22%;
  top: 78px;
  transform: rotate(11deg);
}

.sample-three {
  right: 8%;
  top: 120px;
  transform: rotate(6deg);
}

.sample-one {
  right: 40%;
  top: 58px;
}

.quick-board,
.ranking-section,
.products-section,
.quote-section,
.service-section {
  max-width: 1380px;
  margin: 0 auto;
  padding: 34px 28px;
}

.quick-board {
  display: grid;
  grid-template-columns: 1.25fr 2.55fr 0.62fr 1.25fr;
  gap: 14px;
  margin-top: 0;
  padding-top: 16px;
  padding-bottom: 18px;
  background: #f6f7f9;
}

.news-panel,
.new-panel,
.account-panel,
.download-panel,
.quote-form,
.product-layout {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.news-panel,
.new-panel,
.account-panel,
.download-panel {
  padding: 16px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tabs button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #68707c;
  background: #f1f3f6;
}

.tabs .active {
  color: #fff;
  background: #1f2329;
}

.news-panel ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-panel li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #4b5563;
  font-size: 14px;
}

.news-panel b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: var(--orange);
  border-radius: 50%;
  font-size: 12px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.section-head h2 {
  margin: 0;
  font-size: 18px;
}

.section-head p,
.section-head a {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.section-head.centered {
  display: block;
  margin-bottom: 34px;
  text-align: center;
}

.section-head.centered h2 {
  font-size: 28px;
}

.mini-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mini-card {
  min-width: 0;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.mini-art {
  height: 82px;
  margin-bottom: 8px;
  border-radius: 7px;
}

.mini-card .product-art {
  aspect-ratio: 4 / 3;
  min-height: 0;
  margin-bottom: 8px;
  border-radius: 7px;
}

.product-card .product-art.image-wide .product-art-main,
.product-card .product-art.image-tall .product-art-main,
.mini-card .product-art.image-wide .product-art-main,
.mini-card .product-art.image-tall .product-art-main {
  padding: 8px;
}

.mini-card strong,
.product-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-panel {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-content: start;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.account-login {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.account-login a,
.account-login button {
  display: grid;
  min-width: 54px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #1f2329;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}

.account-login a:last-child,
.account-login button:last-child {
  color: #4b5563;
  background: #fff;
  border: 1px solid #dde3ec;
}

.account-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.account-actions a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #f6f7f9;
  font-weight: 700;
  font-size: 12px;
}

.account-actions a:nth-child(5) {
  color: #fff;
  background: #087cff;
}

.account-actions a:nth-child(6) {
  color: #fff;
  background: #ff5656;
}

.account-actions a:nth-child(7) {
  background: #ffe2a5;
}

.account-actions a:nth-child(8) {
  color: #fff;
  background: #58c86a;
}

.download-panel {
  display: grid;
  gap: 9px;
  align-content: stretch;
}

.download-panel a {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(58px, 1fr) 22px;
  gap: 6px;
  align-items: center;
  min-height: 46px;
  padding: 7px;
  overflow: hidden;
  color: #182230;
  background: #f7fbff;
  border: 1px solid #dfeaf5;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.download-panel a:hover {
  background: #fff;
  border-color: #ffd58a;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.download-panel a i {
  position: relative;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16), 0 6px 12px rgba(15, 23, 42, 0.08);
}

.download-panel a i::before,
.download-panel a i::after {
  content: "";
  position: absolute;
  border-radius: 3px;
}

.download-panel a i::before {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #ff6b2c, #ffd23f);
  transform: rotate(-8deg);
}

.download-panel a i::after {
  right: 4px;
  bottom: 4px;
  width: 8px;
  height: 8px;
  background: rgba(22, 115, 230, 0.18);
  transform: rotate(7deg);
}

.download-panel a span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.download-panel a strong,
.download-panel a small {
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.download-panel a strong {
  color: #182230;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.12;
}

.download-panel a small {
  color: #667085;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.12;
}

.download-panel a:nth-child(2) {
  background: #fbf7ff;
}

.download-panel a:nth-child(2) i::before {
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd);
}

.download-panel a:nth-child(3) {
  background: #f2fbef;
}

.download-panel a:nth-child(3) i::before {
  background: linear-gradient(135deg, #22c55e, #bbf7d0);
}

.download-panel a:nth-child(4) {
  background: #fff7ed;
}

.download-panel a:nth-child(4) i::before {
  background: linear-gradient(135deg, #f97316, #fed7aa);
}

.download-panel a::after {
  content: "›";
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #a5adba;
  background: #fff;
  border-radius: 50%;
}

.ranking-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, 1fr);
  gap: 16px;
}

.rank-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 102px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.rank-card.featured {
  grid-row: span 3;
  grid-template-columns: 1fr;
  align-content: end;
  min-height: 330px;
  background: linear-gradient(145deg, #fff47c, #fff 74%);
}

.rank-number {
  color: #c4cad4;
  font-size: 30px;
  font-weight: 900;
}

.product-art {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  isolation: isolate;
  background: #f8fafc;
  border-radius: 8px;
}

.product-art.has-image {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.9)),
    #f8fafc;
}

.product-art-backdrop,
.product-art-main {
  display: block;
  image-rendering: auto;
}

.product-art-backdrop {
  position: absolute;
  inset: -14%;
  z-index: 0;
  width: 128%;
  height: 128%;
  object-fit: cover;
  filter: blur(18px) saturate(1.1);
  opacity: 0.23;
  transform: scale(1.04);
}

.product-art-main {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: contain;
  padding: 12px;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

.product-art.image-tall .product-art-main {
  padding: 8px;
}

.product-art.image-wide .product-art-main {
  padding: 16px;
}

.product-art.image-low-res .product-art-main {
  filter: contrast(1.03) saturate(1.04) drop-shadow(0 10px 18px rgba(15, 23, 42, 0.12));
}

.product-art.image-error .product-art-main {
  display: none;
}

.product-art.has-image::before,
.product-art.has-image::after {
  display: none;
}

.product-art.no-image {
  display: none;
}

.art-box {
  background: linear-gradient(135deg, #fff0cf, #ffd6bb);
}

.art-card {
  background: linear-gradient(135deg, #e5f3ff, #0f79e8);
}

.art-sticker {
  background: linear-gradient(135deg, #fff4c7, #fdfefe);
}

.art-poster {
  background: linear-gradient(135deg, #ffe6ef, #e9f5ff);
}

.product-art::before,
.product-art::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 8px;
}

.product-art::before {
  left: 18%;
  top: 20%;
  width: 64%;
  height: 52%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 14px 22px rgba(25, 36, 55, 0.12);
  transform: rotate(-6deg);
}

.product-art::after {
  left: 34%;
  top: 35%;
  width: 34%;
  height: 28%;
  background: linear-gradient(135deg, #9bdcff, #b9f5ce);
  box-shadow: -10px -6px 0 rgba(148, 163, 184, 0.14);
  transform: rotate(9deg);
}

.rank-info {
  min-width: 0;
}

.rank-info strong {
  display: block;
  margin-bottom: 6px;
}

.stars {
  color: #ffb900;
  font-size: 13px;
}

.product-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 292px) 1fr;
  gap: 0;
  padding: 18px;
}

.category-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 16px 12px 0;
  border-right: 1px solid var(--line);
}

.category-list-head {
  display: grid;
  gap: 4px;
  padding: 4px 4px 8px;
}

.category-list-head span {
  color: #ff6b2c;
  font-size: 12px;
  font-weight: 1000;
}

.category-list-head strong {
  color: #0b1220;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.15;
}

.side-category {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 16px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 10px 12px;
  color: #4b5563;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.side-category-icon {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fff7ea, #f4f7fb);
  border: 1px solid #e3eaf3;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.side-category-icon::before {
  content: "";
  width: 28px;
  height: 22px;
  background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 7px;
  box-shadow: 7px 6px 0 rgba(56, 189, 248, 0.16);
  transform: rotate(-8deg);
}

.side-category-thumb {
  padding: 3px;
  background: #fff;
}

.side-category-thumb::before {
  display: none;
}

.side-category-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.2s ease;
}

.side-category-icon.category-thumb::before,
.side-category-icon.category-thumb-fallback::before {
  content: none !important;
  display: none !important;
}

.side-category-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.side-category-copy strong {
  overflow: hidden;
  color: #182230;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-category-copy small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-category-count {
  display: grid;
  min-width: 30px;
  height: 24px;
  place-items: center;
  padding: 0 8px;
  color: #667085;
  background: #f4f7fb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.side-category-arrow {
  color: #98a2b3;
  font-size: 18px;
  line-height: 1;
}

.side-category.active,
.side-category:hover {
  color: var(--orange);
  background: linear-gradient(135deg, #fff8ed, #fff);
  border-color: #ffd89a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.side-category.active .side-category-icon {
  background: #fff2d8;
  border-color: #ffd56a;
  box-shadow: 0 10px 22px rgba(255, 184, 0, 0.18);
}

.side-category.active .side-category-thumb,
.side-category:hover .side-category-thumb {
  border-color: #ffd56a;
}

.side-category.active .side-category-thumb img,
.side-category:hover .side-category-thumb img {
  transform: scale(1.06);
}

.side-category.active .side-category-copy strong,
.side-category:hover .side-category-copy strong {
  color: #ff6b2c;
}

.side-category.active .side-category-count {
  color: #111827;
  background: #ffd83d;
}

.side-category.active .side-category-arrow,
.side-category:hover .side-category-arrow {
  color: #ff6b2c;
}

.product-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-left: 18px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.product-card:hover {
  border-color: #ffd18a;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.11);
  transform: translateY(-3px);
}

.product-card .product-art {
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 8px 8px 0 0;
  background: #f8fafc;
  border: 0;
}

.product-card .product-art-backdrop {
  display: none;
}

.product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  object-fit: cover;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.product-card:hover .product-art.has-image .product-art-main {
  filter: saturate(1.03) contrast(1.02);
  transform: scale(1.025);
}

.product-art-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 32px;
  padding: 0;
  color: #fff;
  background: linear-gradient(180deg, #ff5a5f, #ff4757);
  border: 0;
  border-radius: 8px 0 8px 0;
  box-shadow: 0 8px 16px rgba(255, 71, 87, 0.25);
  font-size: 13px;
  font-weight: 950;
}

.product-card .product-art-badge {
  display: inline-flex;
}

.product-card .product-art.has-image::after {
  display: none;
}

.product-body {
  display: grid;
  flex: 1;
  gap: 11px;
  padding: 15px 14px 14px;
}

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

.product-title-row > strong {
  display: -webkit-box;
  min-height: 42px;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-title-row > span {
  max-width: 74px;
  overflow: hidden;
  padding: 4px 7px;
  color: #f05a28;
  background: #fff4e8;
  border: 1px solid #ffe0bd;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-body p {
  display: -webkit-box;
  min-height: 42px;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  max-height: 58px;
  overflow: hidden;
}

.tag-row span {
  padding: 5px 8px;
  color: #1280e8;
  background: #eaf5ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

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

.product-order-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 7px;
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
}

.product-order-strip em {
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.product-order-strip strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 11px;
  color: #4b5563;
  background: linear-gradient(135deg, #fff8ed 0%, #fff 72%);
  border: 1px solid #ffe1ba;
  border-radius: 8px;
}

.product-sku-code {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.product-sku-code em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.product-sku-code strong {
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sku-price {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #111827;
  line-height: 1.15;
}

.sku-price em,
.sku-price small {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.sku-price strong {
  color: #f05a28;
  font-size: 20px;
  font-weight: 950;
}

.sku-price strong b {
  margin-left: 2px;
  color: #f05a28;
  font-size: 12px;
  font-weight: 900;
}

.sku-price.pending {
  justify-items: start;
  padding: 6px 9px;
  color: #8a5a00;
  background: #fff7d6;
  border: 1px solid #ffe39b;
  border-radius: 8px;
}

.sku-price.pending strong {
  color: #8a5a00;
  font-size: 13px;
}

.sku-price.pending em,
.sku-price.pending small {
  color: #a16207;
}

.product-quote {
  min-height: 38px;
  color: #1f2329;
  background: #fff4e6;
  border: 1px solid #ffd5a5;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

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

.card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #1f2329;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.card-actions .product-detail {
  order: 1;
}

.card-actions .product-quote {
  order: 2;
  color: #fff;
  background: #1f2329;
  border-color: #1f2329;
}

.card-actions .product-cart {
  grid-column: 1 / -1;
  order: 4;
  min-height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #126de5, #0f5fca);
  border-color: #0f68db;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(15, 104, 219, 0.2);
}

.card-actions .product-cart::before {
  content: "";
  width: 15px;
  height: 13px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-top-width: 3px;
  border-radius: 3px 3px 4px 4px;
  background:
    radial-gradient(circle, currentColor 52%, transparent 56%) 2px 8px / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 52%, transparent 56%) 9px 8px / 4px 4px no-repeat;
  box-sizing: border-box;
}

.card-actions .product-cart:hover {
  background: #0b5fca;
  border-color: #0b5fca;
  box-shadow: 0 10px 22px rgba(15, 104, 219, 0.28);
  transform: translateY(-1px);
}

.card-actions .product-cart:active {
  transform: translateY(0);
}

.card-actions .product-favorite {
  order: 3;
  color: #8a5a00;
  background: #fff7d6;
  border-color: #ffe68a;
}

.card-actions .product-detail:hover,
.card-actions .product-favorite:hover {
  border-color: #f7c56e;
  background: #fffaf0;
  transform: translateY(-1px);
}

.card-actions .product-quote:hover {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

.products-section .product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 28px 24px;
  padding-left: 18px;
}

.product-pagination {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0 18px;
}

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

.product-pagination button {
  min-width: 88px;
  height: 34px;
  padding: 0 14px;
  color: #344054;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.product-pagination button:hover:not(:disabled) {
  color: #111827;
  background: #fffaf0;
  border-color: #ffc44d;
  box-shadow: 0 8px 18px rgba(255, 196, 77, 0.18);
  transform: translateY(-1px);
}

.product-pagination button:disabled {
  color: #a4acb8;
  background: #f8fafc;
  cursor: not-allowed;
}

.product-pagination span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.product-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 3px 8px 3px 10px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.product-page-jump:focus-within {
  background: #fff;
  border-color: #ffbd45;
  box-shadow: 0 0 0 3px rgba(255, 196, 77, 0.16), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.product-page-input {
  width: 42px;
  height: 26px;
  padding: 0 5px;
  color: #0f172a;
  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
  border: 1px solid #d6e0ee;
  border-radius: 6px;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  outline: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.product-page-input:focus {
  border-color: #ffb12b;
  box-shadow: 0 0 0 2px rgba(255, 177, 43, 0.14), inset 0 1px 1px rgba(15, 23, 42, 0.04);
}

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

.products-section .product-card {
  align-self: start;
  min-height: 0;
  background: #fff;
  border-color: #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.products-section .product-card:hover {
  border-color: #ffd18a;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.products-section .product-card .product-art {
  aspect-ratio: 1 / 1;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96)),
    #fff;
  border-bottom: 1px solid #eef2f7;
  border-radius: 8px 8px 0 0;
}

.products-section .product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  border-radius: 7px;
  object-fit: contain;
}

.products-section .product-card:hover .product-art.has-image .product-art-main {
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.018);
}

.products-section .product-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 13px 16px 16px;
}

.products-section .product-title-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.products-section .product-title-row::before {
  content: "推荐";
  justify-self: start;
  padding: 4px 9px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.products-section .product-title-row > strong {
  display: -webkit-box;
  width: 100%;
  min-height: 42px;
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.42;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.products-section .product-title-row > span {
  display: none;
}

.products-section .product-body p {
  display: -webkit-box;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  overflow: hidden;
  color: #7f8a99;
  font-size: 12px;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.products-section .product-order-strip {
  display: none;
}

.products-section .tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: start;
  gap: 6px 7px;
  min-height: 46px;
  max-height: 46px;
  overflow: hidden;
}

.products-section .tag-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 78px;
  min-width: 42px;
  height: 21px;
  padding: 0 8px;
  overflow: hidden;
  color: #2474b7;
  background: linear-gradient(180deg, #f6fbff, #edf6ff);
  border: 1px solid #dceeff;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.products-section .tag-row span:nth-child(n+5) {
  display: none;
}

.products-section .tag-row span:first-child {
  color: #0f5fa8;
  background: linear-gradient(180deg, #ebf6ff, #dff0ff);
  border-color: #cfe8ff;
}

.products-section .tag-row span:nth-child(3) {
  color: #0b6b54;
  background: linear-gradient(180deg, #eefcf7, #e3f8f1);
  border-color: #ccefe2;
}

.products-section .product-price-panel {
  display: none;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.products-section .product-sku-code,
.products-section .sku-price em,
.products-section .sku-price small,
.products-section .sku-price.pending em,
.products-section .sku-price.pending small {
  display: none;
}

.products-section .sku-price,
.products-section .sku-price.pending {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.products-section .sku-price strong,
.products-section .sku-price.pending strong {
  color: #ff4f00;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.products-section .sku-price strong b {
  display: none;
}

.products-section .card-actions {
  position: static;
  z-index: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.products-section .product-card:hover .card-actions,
.products-section .product-card:focus-within .card-actions {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.products-section .card-actions .product-detail,
.products-section .card-actions .product-cart,
.products-section .card-actions .product-favorite {
  display: none;
}

.products-section .card-actions .product-quote {
  width: 100%;
  min-height: 42px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #1d2939);
  border: 1px solid #111827;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  font-size: 14px;
  font-weight: 900;
}

.products-section .card-actions .product-quote:hover {
  background: linear-gradient(135deg, #0b1220, #182233);
  border-color: #0f172a;
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.22);
  transform: translateY(-2px);
}

.empty-products {
  padding: 40px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px dashed #dce1e8;
  border-radius: 8px;
  text-align: center;
}

.order-login-required {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 36px;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 218, 55, .18), transparent 170px),
    linear-gradient(180deg, #fffdf4, #fff);
  text-align: center;
}

.order-login-required::before {
  content: "单";
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  place-items: center;
  border: 1px solid #e5bb12;
  border-radius: 16px;
  color: #172234;
  background: #ffdf55;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(153, 116, 0, .14);
}

.order-login-required b {
  color: #172234;
  font-size: 19px;
}

.order-login-required span {
  max-width: 480px;
  color: #778395;
  font-size: 13px;
  line-height: 1.7;
}

.order-login-required button {
  min-width: 132px;
  height: 40px;
  margin-top: 6px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #171e28;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(23, 30, 40, .16);
}

.order-login-required button:hover { background: #2a323d; }

.quote-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  align-items: stretch;
  gap: 24px;
  margin-top: 28px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(255, 216, 61, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e5ebf3;
  border-radius: 14px;
}

.eyebrow {
  color: var(--orange);
  font-weight: 800;
}

.quote-workbench {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.quote-copy-head {
  max-width: 760px;
}

.quote-copy h2 {
  max-width: 680px;
  margin: 10px 0;
  font-size: 34px;
  line-height: 1.18;
}

.quote-copy p {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.8;
}

.quote-product-preview {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  min-height: 258px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.quote-preview-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 220px;
  place-items: center;
  color: #667085;
  background:
    linear-gradient(135deg, rgba(255, 216, 61, 0.12), transparent 34%),
    #f8fafc;
  border: 1px dashed #dbe3ee;
  border-radius: 10px;
  font-weight: 800;
}

.quote-preview-media {
  min-width: 0;
}

.quote-preview-media .product-art {
  display: grid;
  aspect-ratio: 1 / 1;
  min-height: 0;
  place-items: center;
  background:
    radial-gradient(circle at 50% 70%, rgba(255, 107, 44, 0.16), transparent 30%),
    linear-gradient(135deg, #fff2df, #f5f8ff 72%);
  border-radius: 10px;
}

.quote-preview-media .product-art-backdrop {
  display: none;
}

.quote-preview-media .product-art.has-image .product-art-main {
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 82%;
  max-height: 82%;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 24px 18px rgba(140, 70, 37, 0.18));
}

.quote-preview-media .product-art-badge {
  display: inline-flex;
}

.quote-preview-media .product-art.has-image::after {
  content: "";
  position: absolute;
  display: block;
  top: auto;
  left: 22%;
  right: 22%;
  bottom: 12%;
  z-index: 2;
  width: auto;
  height: 18px;
  background: rgba(130, 75, 43, 0.16);
  border-radius: 50%;
}

.quote-preview-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.quote-preview-eyebrow {
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  color: #ff6b2c;
  background: #fff3e8;
  border: 1px solid #ffd7b8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-preview-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #111827;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quote-preview-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #5b6677;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quote-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quote-preview-tags span {
  padding: 4px 8px;
  color: #0f68db;
  background: #eaf5ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.quote-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quote-preview-stats span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e7edf5;
  border-radius: 8px;
}

.quote-preview-stats em,
.quote-preview-price span {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.quote-preview-stats b {
  overflow: hidden;
  color: #111827;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-preview-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #ffe1a6;
  border-radius: 8px;
}

.quote-preview-price strong {
  color: #ff5a1f;
  font-size: 24px;
  line-height: 1;
}

.quote-preview-price small {
  margin-left: 3px;
  color: #ff5a1f;
  font-size: 12px;
}

.quote-flow-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quote-flow-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quote-flow-row b {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #111827;
  background: #ffd83d;
  border-radius: 999px;
  font-size: 12px;
}

.metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.metric-row span {
  min-width: 120px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 8px;
}

.metric-row strong {
  display: block;
  font-size: 24px;
}

.quote-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  padding: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.quote-form-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 4px;
}

.quote-form-head span {
  color: #ff6b2c;
  font-size: 12px;
  font-weight: 1000;
}

.quote-form-head strong {
  color: #111827;
  font-size: 18px;
  font-weight: 1000;
}

.quote-form label,
.order-dialog label,
.workflow-card label {
  display: grid;
  gap: 8px;
  color: #4b5563;
  font-size: 14px;
}

.quote-form label {
  min-width: 0;
  padding: 10px;
  color: #111827;
  background: #f8fafc;
  border: 1px solid #e9eef5;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.quote-form .quote-field-full {
  grid-column: 1 / -1;
  background: #fff;
  border-color: #dfe7f0;
}

.quote-form label:focus-within,
.detail-config label:focus-within {
  background: #fff;
  border-color: #ffc247;
  box-shadow: 0 8px 18px rgba(255, 194, 71, 0.14), 0 0 0 3px rgba(255, 216, 61, 0.16);
}

.quote-form input,
.quote-form select,
.order-dialog input,
.workflow-card input,
.workflow-card select,
.workflow-card textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid #dce1e8;
  border-radius: 8px;
  outline: 0;
}

.quote-form input,
.quote-form select,
.detail-config input,
.detail-config select {
  display: block;
  height: 44px;
  min-height: 44px;
  min-width: 0;
  color: #17202a;
  background-color: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 14px;
  font-weight: 800;
  line-height: 44px;
  outline: 0;
  outline-offset: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-form select,
.detail-config select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #475467 50%),
    linear-gradient(135deg, #475467 50%, transparent 50%),
    linear-gradient(180deg, #f8fafc, #eef3f8);
  background-position:
    calc(100% - 20px) 21px,
    calc(100% - 15px) 21px,
    calc(100% - 36px) 50%;
  background-size: 5px 5px, 5px 5px, 1px 22px;
  background-repeat: no-repeat;
}

.quote-sku-field {
  position: relative;
  z-index: 12;
  gap: 7px;
  padding: 10px;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-color: #e0e8f2;
  border-radius: 10px;
}

.quote-form .quote-sku-field:focus-within {
  background: #fff;
  border-color: #cfdceb;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.quote-product-search {
  position: relative;
  min-width: 0;
}

.quote-form .quote-product-search input[type="search"] {
  height: 42px;
  min-height: 42px;
  padding: 0 76px 0 38px;
  color: #172027;
  background: #fff;
  border: 1px solid #d7e2ee;
  border-radius: 8px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
  line-height: 42px;
  appearance: none;
  -webkit-appearance: none;
}

.quote-form .quote-product-search input[type="search"]:focus {
  border-color: #5595d0;
  box-shadow: 0 0 0 3px rgba(85, 149, 208, .14);
}

.quote-form .quote-product-search input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.quote-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 2px solid #8a98a8;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-50%);
}

.quote-search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #8a98a8;
  transform: rotate(45deg);
}

.quote-form .quote-search-clear,
.quote-form .quote-search-toggle {
  position: absolute;
  top: 1px;
  z-index: 3;
  width: 34px;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: #7b8794;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quote-form .quote-search-clear {
  right: 37px;
  opacity: 0;
  pointer-events: none;
}

.quote-product-search input:not(:placeholder-shown) ~ .quote-search-clear {
  opacity: 1;
  pointer-events: auto;
}

.quote-form .quote-search-clear::before,
.quote-form .quote-search-clear::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.quote-form .quote-search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.quote-form .quote-search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.quote-form .quote-search-toggle {
  right: 1px;
  border-left: 1px solid #e3ebf3;
  border-radius: 0 7px 7px 0;
  background: #fbfcfe;
}

.quote-form .quote-search-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -62%) rotate(45deg);
}

.quote-form .quote-search-clear:hover,
.quote-form .quote-search-toggle:hover {
  color: #2c6eb8;
  background: #f4f8fc;
}

/* Poster-style commercial product cards */
.products-section .product-grid {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 26px 22px;
  padding-left: 18px;
}

.products-section .product-card {
  overflow: hidden;
  border-color: #e6edf5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.products-section .product-card .product-art {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  background: #f4f7fa;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.products-section .product-card .product-art-backdrop {
  display: none;
}

.products-section .product-card .product-art.has-image .product-art-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.products-section .product-card .product-art.image-wide .product-art-main,
.products-section .product-card .product-art.image-tall .product-art-main {
  padding: 0;
  object-fit: cover;
}

.products-section .product-card:hover .product-art.has-image .product-art-main {
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.012);
}

.products-section .product-card .product-art-badge {
  top: 0;
  left: 0;
  z-index: 4;
  width: auto;
  min-width: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 0 0 10px 0;
  font-size: 13px;
  box-shadow: 0 10px 20px rgba(255, 71, 87, .22);
}

.products-section .product-body {
  gap: 8px;
  padding: 14px 16px 15px;
}

@media (max-width: 1180px) {
  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

@media (max-width: 680px) {
  .products-section .product-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .products-section .product-card .product-art {
    min-height: 260px;
  }
}

.quote-sku-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 60;
  display: none;
  max-height: 268px;
  overflow: auto;
  padding: 7px;
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  scrollbar-width: thin;
  scrollbar-color: #c8d2dc transparent;
}

.quote-sku-suggestions.is-open {
  display: grid;
  gap: 3px;
}

.quote-form .quote-sku-suggestions button {
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  color: #1f2937;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
  text-align: left;
  line-height: 1.25;
}

.quote-form .quote-sku-suggestions button:hover,
.quote-form .quote-sku-suggestions button:focus-visible {
  color: #172027;
  background: #f6f9fc;
  border-color: #e5edf5;
  outline: none;
}

.quote-sku-suggestions strong {
  overflow: hidden;
  color: #172027;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-form .quote-sku-suggestions span,
.quote-sku-empty {
  color: #73808c;
  font-size: 11px;
  font-weight: 700;
}

.quote-sku-empty {
  padding: 12px 10px;
  text-align: center;
}

.quote-form input:hover,
.quote-form select:hover,
.detail-config input:hover,
.detail-config select:hover {
  border-color: #cbd5e1;
}

.quote-form input:focus,
.quote-form select:focus,
.detail-config input:focus,
.detail-config select:focus,
.quote-form input:focus-visible,
.quote-form select:focus-visible,
.detail-config input:focus-visible,
.detail-config select:focus-visible,
.order-dialog input:focus,
.workflow-card input:focus,
.workflow-card select:focus,
.workflow-card textarea:focus {
  border-color: #ff9f2e;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 2px rgba(255, 159, 46, 0.16);
  outline: 0;
}

.workflow-card textarea {
  min-height: 94px;
  padding: 10px 12px;
  resize: vertical;
}

.quote-form button,
.submit-order,
.workflow-card button {
  min-height: 44px;
  color: #fff;
  background: #1f2329;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.quote-form > button[type="submit"],
.quote-form .quote-form-head,
.quote-form .ghost-button,
.quote-form .quote-result {
  grid-column: 1 / -1;
}

.quote-form > button[type="submit"] {
  margin-top: 2px;
  background: linear-gradient(180deg, #242830, #16191f);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.16);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.quote-form > button[type="submit"]:hover {
  background: linear-gradient(180deg, #111827, #05070a);
  box-shadow: 0 14px 26px rgba(17, 24, 39, 0.2);
  transform: translateY(-1px);
}

.quote-form .ghost-button {
  color: var(--ink);
  background: linear-gradient(135deg, #fff8dc, #fff2bd);
  border: 1px solid #ffe28a;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.quote-form .ghost-button:not(:disabled):hover {
  border-color: #ffd23d;
  box-shadow: 0 10px 20px rgba(255, 180, 0, 0.14);
  transform: translateY(-1px);
}

.quote-form .ghost-button:disabled {
  color: #9ca3af;
  background: #f3f4f6;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.quote-result {
  display: grid;
  gap: 12px;
  min-height: 168px;
  padding: 16px;
  color: #435064;
  background:
    linear-gradient(135deg, rgba(255, 226, 61, 0.24), transparent 46%),
    linear-gradient(180deg, #fffef8, #fff9e8);
  border: 1px solid #ffdf78;
  border-radius: 10px;
  line-height: 1.45;
  font-weight: 750;
}

.quote-result strong {
  color: var(--orange);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0;
}

.quote-result-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
}

.quote-result-main span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.quote-result-main strong {
  grid-column: 1 / 2;
}

.quote-result-main em {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 6px 10px;
  color: #0f6b3d;
  background: #e9f8ef;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.quote-result-detail {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.quote-result-line {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  color: #46566b;
  font-size: 13px;
}

.quote-result-line b {
  color: #6b7280;
  font-size: 12px;
}

.quote-result-line i {
  overflow: hidden;
  color: #344054;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quote-result-tier i {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  overflow: visible;
  white-space: normal;
}

.quote-result-product i,
.quote-result-rule i {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.quote-result-product {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.quote-result-product em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.service-section {
  padding-bottom: 72px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.service-grid div {
  min-height: 128px;
  padding: 20px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.service-grid strong {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}

.service-grid span {
  color: var(--muted);
  line-height: 1.7;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 112px;
  padding: 30px max(28px, calc((100vw - 1240px) / 2 + 28px));
  color: #d4d8de;
  background: #202326;
}

.site-footer > div strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.site-footer > div span {
  display: block;
  margin-top: 8px;
  color: #8f96a3;
  line-height: 1.5;
}

.site-footer > span,
.footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  color: #c7ced8;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.site-footer a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}

.site-footer > span a:first-child,
.footer-policy-link {
  max-width: min(420px, 100%);
  justify-content: flex-end;
  min-height: auto;
  padding: 0;
  color: #c7ced8;
  background: transparent;
  border: 0;
  white-space: normal;
  text-align: right;
}

.site-footer > span a:first-child:hover,
.footer-policy-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer a:last-child,
.footer-admin-link {
  min-width: 136px;
  color: #202326;
  background: var(--yellow);
  border-color: transparent;
  font-weight: 800;
}

.site-footer a:last-child:hover,
.footer-admin-link:hover {
  color: #202326;
  filter: brightness(1.04);
}

.order-dialog {
  width: min(460px, calc(100vw - 36px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: visible;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.auth-dialog {
  width: min(540px, calc(100vw - 28px));
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(1px);
}

.auth-modal-shell {
  position: relative;
  padding: 64px 14px 16px;
  background: linear-gradient(135deg, #fff36c 0%, #fff36c 48%, #ffffff 48%, #ffffff 100%);
  border-radius: 34px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
}

.auth-modal-brand {
  position: absolute;
  left: 34px;
  top: 28px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #111827;
}

.auth-modal-brand strong {
  font-size: 28px;
  font-weight: 1000;
}

.auth-modal-brand span {
  font-size: 18px;
  font-weight: 900;
}

.auth-mascot {
  position: absolute;
  right: 48px;
  top: -42px;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  color: #111827;
  background: radial-gradient(circle at 50% 44%, #fff 0 40%, #ffd95a 41% 100%);
  border: 5px solid #1f2329;
  border-radius: 50%;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
  font-size: 30px;
  font-weight: 1000;
  transform: rotate(-8deg);
}

.auth-close {
  position: absolute;
  right: -46px;
  top: 48px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.auth-modal-card {
  display: grid;
  gap: 12px;
  padding: 42px 40px 30px;
  background: #fff;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.9);
}

.auth-identity-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: #f4f6f8;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
}

.auth-identity-tabs button {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px 12px;
  color: #1f2937;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.auth-identity-tabs button strong {
  font-size: 15px;
  font-weight: 900;
}

.auth-identity-tabs button span {
  color: #7b8797;
  font-size: 11px;
  line-height: 1.35;
}

.auth-identity-tabs button.active {
  background: #fff;
  border-color: #f1c40f;
  box-shadow: 0 6px 16px rgba(31, 35, 41, 0.08);
}

.auth-staff-notice {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  color: #172033;
  background: #f4f8fc;
  border: 1px solid #cfdaea;
  border-left: 4px solid #172033;
  border-radius: 9px;
}

.auth-staff-notice b {
  font-size: 13px;
}

.auth-staff-notice span {
  color: #67758a;
  font-size: 12px;
  line-height: 1.5;
}

.auth-modal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(220px, 100%);
  margin: 0 auto 6px;
  padding: 4px;
  background: #f2f4f7;
  border-radius: 999px;
}

.auth-modal-tabs button {
  min-height: 36px;
  color: #697386;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.auth-modal-tabs button.active {
  color: #1f2329;
  background: #ffeb45;
}

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

.auth-modal-form label {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #dce2eb;
  border-radius: 4px;
}

.auth-modal-form label span {
  color: #374151;
  font-size: 14px;
  font-weight: 900;
}

.auth-modal-form input {
  width: 100%;
  min-height: 40px;
  padding: 0 8px;
  color: #111827;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.auth-modal-form label:focus-within {
  border-color: #ffe03a;
  box-shadow: 0 0 0 3px rgba(255, 224, 58, 0.18);
}

.auth-modal-form .captcha-row {
  grid-template-columns: 64px 1fr 118px;
}

.captcha-row .captcha-code {
  display: grid;
  width: 100%;
  height: 40px;
  place-items: center;
  color: #5b36b1;
  background:
    linear-gradient(135deg, rgba(91, 54, 177, 0.08), rgba(255, 235, 69, 0.18)),
    repeating-linear-gradient(-10deg, transparent 0 8px, rgba(91, 54, 177, 0.16) 8px 10px);
  border: 1px solid #d8d3ec;
  border-radius: 3px;
  font-size: 22px;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: 3px;
  line-height: 1;
  transform: rotate(var(--captcha-tilt, -2deg));
  cursor: pointer;
  user-select: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.captcha-row .captcha-code:hover {
  border-color: #f2ca2f;
  box-shadow: 0 0 0 3px rgba(255, 224, 58, 0.2);
  transform: rotate(0deg) scale(1.02);
}

.auth-submit {
  min-height: 48px;
  margin-top: 16px;
  color: #111827;
  background: #ffeb45;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 1000;
  cursor: pointer;
}

.auth-modal-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
}

.auth-modal-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-modal-options input {
  width: 14px;
  height: 14px;
  accent-color: #1f2329;
}

.auth-modal-options span {
  display: inline-flex;
  gap: 18px;
}

.auth-modal-options button {
  padding: 0;
  color: #9aa3af;
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
}

.auth-other-login {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  color: #9aa3af;
  font-size: 13px;
}

.auth-other-login i {
  height: 1px;
  background: #e1e5eb;
}

.auth-other-login div {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.auth-other-login div button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #0f8a52;
  background: #effaf3;
  border: 1px solid #c8f0d5;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.auth-other-login div button:first-child {
  color: #1667c4;
  background: #eef6ff;
  border-color: #cbe2ff;
}

.auth-other-login div button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.auth-other-login div button:focus-visible {
  outline: 3px solid rgba(34, 156, 240, 0.18);
  outline-offset: 3px;
}

.product-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f5f7fa;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.product-dialog::backdrop {
  background: rgba(18, 24, 38, 0.58);
  backdrop-filter: blur(2px);
}

.product-dialog form {
  position: relative;
  margin: 0;
  max-height: calc(100vh - 32px);
  padding: 18px;
  overflow: auto;
  background: #f5f7fa;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(340px, 432px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.product-detail-left {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  align-self: stretch;
}

.product-detail-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.1);
}

.product-detail-media-head,
.product-detail-media-foot {
  position: absolute;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  color: rgba(15, 23, 42, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.product-detail-media-head {
  top: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.product-detail-media-foot {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.product-detail-media-head span {
  color: #ff6b2c;
  font-weight: 1000;
}

.product-detail-media-head strong,
.product-detail-media-foot strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-media .product-art {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.product-detail-media .product-art-backdrop {
  display: none;
}

.product-detail-media .product-art-main,
.product-detail-media .product-art.image-wide .product-art-main,
.product-detail-media .product-art.image-tall .product-art-main {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  object-fit: contain;
  filter: none;
}

.product-detail-service {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.product-detail-service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-detail-service-head strong {
  color: #0b1220;
  font-size: 16px;
  font-weight: 1000;
}

.product-detail-service-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.product-detail-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-detail-flow span {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 6px;
  color: #344054;
  background: #f7f9fc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.product-detail-flow b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin: 0 auto;
  color: #fff;
  background: #1f2329;
  border-radius: 50%;
  font-size: 12px;
}

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

.product-detail-service-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #ffe2a7;
  border-radius: 8px;
}

.product-detail-service-grid span {
  color: #9a5b00;
  font-size: 12px;
  font-weight: 1000;
}

.product-detail-service-grid strong {
  color: #344054;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.product-detail-assurance {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.product-detail-assurance div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #e5edf5;
  border-radius: 8px;
}

.product-detail-assurance b {
  color: #0b1220;
  font-size: 13px;
  font-weight: 1000;
}

.product-detail-assurance span {
  min-width: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.product-detail-commercial-note {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding: 13px 14px;
  color: #1f2329;
  background:
    linear-gradient(135deg, rgba(255, 216, 61, 0.35), rgba(255, 255, 255, 0.9)),
    #fff;
  border: 1px solid #ffe08a;
  border-radius: 8px;
}

.product-detail-commercial-note strong {
  font-size: 14px;
  font-weight: 1000;
}

.product-detail-commercial-note span {
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.detail-copy {
  display: grid;
  gap: 13px;
  align-content: start;
  min-width: 0;
  padding: 22px 58px 22px 22px;
  background: #fff;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.product-detail-title {
  display: grid;
  gap: 8px;
}

.detail-copy h2,
.product-detail-title h2 {
  margin: 0;
  color: #07111f;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: 0;
}

.detail-copy p,
.product-detail-title p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.product-detail-tags {
  min-height: 28px;
}

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

.product-detail-metrics div,
.product-detail-specs article,
.product-detail-notice,
.product-detail-quote-box {
  min-width: 0;
  background: #fff;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
}

.product-detail-metrics div {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  background: #f8fafc;
}

.product-detail-metrics span,
.product-detail-specs span,
.product-detail-quote-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.product-detail-metrics strong,
.product-detail-specs strong {
  min-width: 0;
  overflow: hidden;
  color: #0b1220;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-metrics small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.product-detail-price strong {
  color: #f05a28;
}

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

.product-detail-specs article {
  display: grid;
  gap: 7px;
  min-height: 92px;
  padding: 13px 14px;
  background: #fbfcfe;
}

.product-detail-specs strong {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.product-detail-notice {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  background: #fffaf0;
  border-color: #ffe1a3;
}

.product-detail-notice strong {
  color: #9a5b00;
  font-size: 13px;
  font-weight: 1000;
}

.product-detail-notice span {
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.product-detail-quote-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fbfcfe;
  border-color: #dfe7f0;
}

.product-detail-quote-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.product-detail-quote-head strong {
  color: #0b1220;
  font-size: 15px;
  font-weight: 1000;
}

.detail-actions {
  display: grid;
  grid-template-columns: 0.72fr 1.15fr 1.15fr 1fr 1fr;
  gap: 10px;
  margin-top: 3px;
  padding-top: 2px;
}

.detail-actions button,
.detail-btn {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f3f4f6;
  color: #1f2329;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.detail-actions button:hover,
.detail-btn:hover {
  transform: translateY(-1px);
}

.detail-btn-muted {
  color: #344054;
  background: #f3f5f8;
  border-color: #e2e8f0;
}

.detail-btn-primary {
  color: #fff;
  background: #1f2329;
  border-color: #1f2329;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}

.detail-btn-blue {
  color: #0f68db;
  background: #eaf5ff;
  border-color: #cfe8ff;
}

.detail-btn-green {
  color: #0f8a52;
  background: #e9f8ef;
  border-color: #ccefd9;
}

.detail-btn-gold {
  color: #8a5a00;
  background: #fff7d6;
  border-color: #ffe39b;
}

@media (max-width: 980px) {
  .product-dialog {
    width: min(760px, calc(100vw - 28px));
  }

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

  .product-detail-left {
    position: static;
    grid-template-rows: auto;
  }

  .detail-copy {
    padding: 20px;
  }

  .product-detail-media .product-art {
    height: auto;
    aspect-ratio: auto;
  }

  .product-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Product center visual polish: one calm, cohesive navigation surface. */
.site-header #categoryBar.category-bar {
  height: 52px;
  min-height: 52px;
  gap: clamp(8px, 1.35vw, 24px);
  padding-inline: max(20px, calc((100vw - 1560px) / 2 + 20px));
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border-bottom-color: #e8ecf1;
}

#categoryBar .category-chip {
  min-height: 34px;
  height: 34px;
  gap: 8px;
  padding: 0 12px;
  color: #3d4857;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

#categoryBar .category-chip:hover {
  color: #111827;
  background: #f6f8fb;
  border-color: #e2e7ee;
  transform: translateY(-1px);
}

#categoryBar .category-chip.active {
  color: #151b25;
  background: linear-gradient(135deg, #fff4a8 0%, #ffe451 100%);
  border-color: #f0ca27;
  box-shadow: 0 5px 14px rgba(179, 132, 0, 0.12);
}

#categoryBar .category-chip .cat-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  flex-basis: 16px !important;
  opacity: 0.86;
}

#categoryBar .category-chip.active .cat-icon {
  opacity: 1;
}

.site-header .category-mega:has(.print-order-mega-shell) {
  max-height: min(548px, calc(100vh - 108px));
  padding: 14px 18px 18px;
  background: rgba(247, 249, 252, 0.98);
  border-bottom: 1px solid #e1e6ed;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.15);
}

.print-order-mega-shell {
  grid-template-columns: 252px minmax(0, 1fr);
  width: min(1540px, calc(100% - 12px));
  min-height: 486px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 16px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
}

.print-order-mega-sidebar {
  padding: 16px 14px;
  background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
  border-right-color: #e7ebf0;
}

.print-order-mega-sidebar-title {
  height: 42px;
  margin-bottom: 9px;
  padding-inline: 13px;
  background: #fff;
  border-color: #dfe5ec;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035);
  font-size: 15px;
}

.print-order-mega-category-list {
  gap: 2px;
}

.print-order-mega-category {
  position: relative;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 37px;
  gap: 8px;
  padding: 4px 9px;
  border-radius: 9px;
  transform: none;
}

.print-order-mega-category:hover {
  background: #fff;
  border-color: #e2e7ed;
  transform: none;
}

.print-order-mega-category.active {
  background: linear-gradient(90deg, #fff8cf 0%, #ffef91 100%);
  border-color: #efd35c;
  box-shadow: 0 5px 14px rgba(153, 111, 0, 0.09);
}

.print-order-mega-category.active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -1px;
  width: 3px;
  background: #f6c900;
  border-radius: 0 3px 3px 0;
}

.print-order-mega-category-icon {
  width: 24px;
  height: 24px;
  color: #546171;
  background: #fff;
  border-color: #e0e5eb;
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.print-order-mega-category strong {
  font-size: 12px;
}

.print-order-mega-category small {
  font-size: 9px;
}

.print-order-mega-content {
  padding: 17px 22px 18px;
}

.print-order-mega-content > .mega-close {
  top: 8px;
  right: 10px;
}

.print-order-mega-heading {
  min-height: 40px;
  margin-bottom: 12px;
  padding: 0 42px 10px 0;
  border-bottom-color: #e6eaf0;
}

.print-order-mega-heading strong {
  font-size: 19px;
}

.print-order-mega-all {
  min-height: 32px;
  border-color: #dde3ea;
  border-radius: 8px;
}

.print-order-mega-feature {
  grid-template-columns: minmax(220px, 0.7fr) minmax(150px, 0.46fr) minmax(430px, 1.42fr);
  gap: 14px;
  min-height: 218px;
}

.print-order-mega-leads {
  gap: 8px;
}

.print-order-mega-lead {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 64px;
  gap: 10px;
  padding: 8px 13px;
  background: linear-gradient(135deg, #fff7f7, #fff);
  border-color: #f3e3e3;
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.035);
}

.print-order-mega-lead.lead-2 {
  background: linear-gradient(135deg, #effafa, #fff);
  border-color: #dceeee;
}

.print-order-mega-lead.lead-3 {
  background: linear-gradient(135deg, #f1f6ff, #fff);
  border-color: #dfe8f7;
}

.print-order-mega-lead i {
  color: #344054;
  font-size: 25px;
}

.print-order-mega-lead strong {
  font-size: 12px;
}

.print-order-mega-compact {
  align-content: center;
  gap: 3px;
  padding: 4px;
}

.print-order-mega-compact button {
  min-height: 32px;
  border-radius: 8px;
}

.print-order-mega-banner {
  grid-template-columns: minmax(190px, 0.72fr) minmax(250px, 1fr);
  min-height: 218px;
  color: #172033;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 229, 81, 0.28), transparent 26%),
    linear-gradient(135deg, #fffaf0 0%, #fff7cf 46%, #edf6f1 100%);
  border: 1px solid #e5dfc5;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(50, 60, 70, 0.08);
}

.print-order-mega-banner-copy {
  gap: 7px;
  padding: 22px 12px 22px 24px;
}

.print-order-mega-banner-copy em {
  color: #9b7000;
}

.print-order-mega-banner-copy strong {
  color: #172033;
  font-size: clamp(20px, 1.7vw, 28px);
}

.print-order-mega-banner-copy small {
  color: #667085;
}

.print-order-mega-banner-copy b {
  color: #172033;
  background: linear-gradient(135deg, #ffe55e, #ffd52f);
  box-shadow: 0 5px 12px rgba(184, 132, 0, 0.14);
}

.print-order-mega-banner-art {
  margin: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(214, 219, 225, 0.85);
  border-radius: 11px;
}

.print-order-mega-banner .product-art {
  min-height: 198px;
  background: #fff;
}

.print-order-mega-banner .product-art::after {
  display: none;
}

.print-order-mega-banner .product-art-main,
.print-order-mega-banner .product-art.image-wide .product-art-main,
.print-order-mega-banner .product-art.image-tall .product-art-main {
  padding: 8px;
  background: #fff;
  object-fit: contain;
  filter: none;
}

.print-order-mega-lower {
  gap: 22px;
  margin-top: 12px;
}

.print-order-mega-lower header {
  margin-bottom: 5px;
  padding-bottom: 6px;
  border-bottom-color: #e7ebf0;
}

.print-order-mega-lower header strong {
  font-size: 14px;
}

.print-order-mega-newest {
  gap: 1px 12px;
}

.print-order-mega-newest button {
  padding-block: 3px;
}

.print-order-mega-updates {
  gap: 3px 12px;
}

.print-order-mega-updates button {
  padding-block: 2px;
}

@media (max-width: 1240px) {
  .print-order-mega-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }

  .print-order-mega-feature {
    grid-template-columns: minmax(190px, 0.62fr) minmax(135px, 0.42fr) minmax(360px, 1.28fr);
    gap: 11px;
  }

  .print-order-mega-content {
    padding-inline: 16px;
  }
}

@media (max-width: 640px) {
  .product-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .product-dialog form {
    max-height: calc(100vh - 20px);
    padding: 12px;
  }

  .product-detail-service-head,
  .product-detail-media-head,
  .product-detail-media-foot,
  .product-detail-quote-head {
    display: grid;
    justify-content: stretch;
  }

  .product-detail-flow,
  .product-detail-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail-assurance div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .product-detail-title h2 {
    font-size: 22px;
  }

  .product-detail-metrics,
  .product-detail-specs,
  .detail-config,
  .detail-actions {
    grid-template-columns: 1fr;
  }
}

.order-dialog::backdrop {
  background: rgba(18, 24, 38, 0.58);
  backdrop-filter: blur(2px);
}

.order-dialog form {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 26px 24px 24px;
  border-radius: 8px;
  background: #fff;
}

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

.order-dialog h2 {
  padding-right: 54px;
  color: #111827;
  font-size: 24px;
  line-height: 1.2;
}

.order-dialog p {
  color: var(--muted);
  line-height: 1.6;
}

.order-dialog label {
  gap: 9px;
  color: #465260;
  font-size: 13px;
  font-weight: 800;
}

.order-dialog input {
  min-height: 42px;
  color: #111827;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.order-dialog input:focus {
  background: #fffdf8;
}

.close-dialog {
  position: absolute;
  z-index: 5;
  right: 14px;
  top: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  color: #111827;
  background: #f3f4f6;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.close-dialog:hover {
  background: #e5e7eb;
}

.close-dialog:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 107, 44, 0.22);
}

.close-dialog:active {
  transform: scale(0.96);
}

.order-dialog .submit-order {
  min-height: 44px;
  margin-top: 2px;
  font-size: 16px;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: none;
  max-width: 360px;
  padding: 14px 16px;
  color: #fff;
  background: #1f2329;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.toast.show {
  display: block;
}

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1380px;
  margin: 0 auto 14px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.catalog-toolbar div {
  display: grid;
  gap: 4px;
}

.catalog-toolbar strong {
  font-size: 18px;
}

.catalog-toolbar span {
  color: var(--muted);
  font-size: 13px;
}

.catalog-toolbar select {
  min-width: 150px;
  height: 40px;
  padding: 0 12px;
  color: #1f2329;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
}

.workflow-section {
  max-width: 1380px;
  margin: 0 auto;
  padding: 54px 28px 34px;
}

.order-center-section {
  max-width: none;
  margin: 0;
  padding: 28px max(28px, calc((100vw - 1760px) / 2 + 28px)) 46px;
  background: #f6f7f9;
  border-top: 1px solid #eef1f5;
}

body:not(.order-page-active) #orders {
  display: none;
}

body:not(.operations-page-active) #operations {
  display: none;
}

body.order-page-active #home {
  min-height: calc(100vh - 92px);
  background: #f6f7f9;
}

body.operations-page-active #home {
  min-height: calc(100vh - 92px);
  background: #f6f7f9;
}

body.order-page-active #home > :not(#orders) {
  display: none !important;
}

body.operations-page-active #home > :not(#operations) {
  display: none !important;
}

body.order-page-active #orders {
  display: block;
}

body.operations-page-active #operations {
  display: block;
}

.order-center-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  max-width: 1660px;
  margin: 0 auto;
  align-items: start;
}

.order-sidebar {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 124px);
  min-height: 560px;
  overflow: auto;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.06);
  align-self: start;
}

.order-sidebar small {
  padding: 12px 14px 4px;
  color: #9aa3af;
  font-size: 13px;
}

.order-sidebar a {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  color: #384252;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

.order-sidebar a:hover {
  background: #f6f7f9;
}

.order-sidebar a.active {
  color: #fff;
  background: #303030;
}

.order-sidebar i {
  position: relative;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.order-home-icon::before,
.order-cart-icon::before,
.order-list-icon::before,
.order-file-icon::before,
.order-pay-icon::before,
.order-payment-icon::before,
.order-invoice-icon::before,
.order-coupon-icon::before,
.order-track-icon::before,
.order-address-icon::before,
.order-service-icon::before,
.order-star-icon::before,
.order-template-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}

.order-cart-icon::before {
  inset: 4px 3px 5px;
  border-top: 0;
  border-radius: 1px 1px 4px 4px;
  transform: skew(-5deg);
}

.order-cart-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 7px 0 0 currentColor;
}

.order-home-icon::before {
  border-radius: 50% 50% 4px 4px;
  transform: rotate(45deg) scale(.82);
}

.order-list-icon::after,
.order-file-icon::after,
.order-pay-icon::after,
.order-payment-icon::after,
.order-template-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 5px;
  top: 7px;
  height: 1.6px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.order-invoice-icon::before {
  inset: 1px 3px;
  border-radius: 3px;
}

.order-invoice-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 1.6px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.order-coupon-icon::before {
  inset: 3px 1px;
  border-radius: 3px;
}

.order-coupon-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  bottom: 5px;
  border-left: 1.5px dashed currentColor;
}

.order-payment-icon::before {
  border-radius: 50%;
}

.order-payment-icon::after {
  left: 5px;
  right: 5px;
  top: 8px;
  height: 1.8px;
  box-shadow: 0 3px 0 currentColor;
}

.order-track-icon::before {
  inset: 4px 2px 5px;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 6px;
}

.order-track-icon::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: -9px 10px 0 currentColor;
}

.order-address-icon::before {
  inset: 1px 4px 4px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.order-address-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 4px;
  height: 4px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.order-star-icon::before {
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
  background: currentColor;
  border: 0;
  border-radius: 0;
}

.order-service-icon::before {
  border-radius: 50%;
}

.order-service-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

.order-main {
  min-width: 0;
  padding: 28px;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.05);
}

.order-center-panel {
  display: none;
}

.order-center-panel.active {
  display: block;
}

.order-center-panel.quote-section.active {
  display: grid;
  align-items: start;
}

.order-main .quote-section {
  min-height: 690px;
  margin-top: 0;
  padding: 24px;
}

.order-main .quote-section .quote-form {
  position: sticky;
  top: 104px;
  z-index: 2;
  width: auto;
  max-height: none;
  overflow: visible;
  align-self: start;
}

.order-main .quote-section .quote-form {
  gap: 12px;
  padding: 16px;
}

.order-main .quote-section {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 412px);
  gap: 24px;
}

.order-main .quote-section .quote-form .quote-result {
  min-height: 168px;
  padding: 16px;
}

.order-main .quote-section .quote-form .quote-result strong {
  font-size: 32px;
}

.order-main .quote-section .quote-form .ghost-button {
  min-height: 48px;
  color: #161b22;
  background: linear-gradient(180deg, #fff4bc, #ffe991);
  border-color: #ffd45a;
  box-shadow: 0 10px 20px rgba(255, 190, 46, 0.14);
  font-size: 15px;
}

.order-main .quote-section .quote-form label {
  gap: 6px;
  padding: 10px;
}

.order-main .quote-section .quote-form input,
.order-main .quote-section .quote-form select {
  height: 40px;
  min-height: 40px;
}

.order-main .quote-section .quote-form button {
  min-height: 40px;
}

.order-main .quote-section .quote-form .quote-result {
  min-height: 168px;
  padding: 16px;
}

.order-main .quote-section .quote-form .quote-result strong {
  font-size: 32px;
}

@media (min-width: 1101px) and (max-height: 820px) {
  .order-main .quote-section .quote-form {
    gap: 7px;
    padding: 12px;
    top: 54px;
  }

  .order-main .quote-section .quote-form label {
    gap: 4px;
    padding: 6px 8px;
  }

  .order-main .quote-section .quote-form input,
  .order-main .quote-section .quote-form select {
    height: 32px;
    min-height: 32px;
    line-height: 32px;
  }

  .order-main .quote-section .quote-form select {
    background-position:
      calc(100% - 20px) 15px,
      calc(100% - 15px) 15px,
      calc(100% - 36px) 50%;
  }

  .order-main .quote-section .quote-form button {
    min-height: 34px;
  }

  .order-main .quote-section .quote-form .quote-result {
    gap: 8px;
    min-height: 132px;
    padding: 11px 12px;
  }

  .order-main .quote-section .quote-form .quote-result strong {
    font-size: 28px;
  }

  .order-main .quote-section .quote-form .ghost-button {
    min-height: 40px;
  }

  .quote-result-detail {
    gap: 4px;
  }

  .quote-result-line {
    line-height: 1.25;
  }
}

.order-panel-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef1f5;
}

.order-panel-title strong {
  color: #111827;
  font-size: 22px;
}

.order-panel-title p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 13px;
}

.order-panel-title > span {
  color: #7b8494;
  font-size: 13px;
}

.cart-panel-title {
  padding: 16px 18px;
  background: #f8fbff;
  border: 1px solid #dfe9f5;
  border-radius: 8px;
}

.cart-panel-title > span {
  padding: 7px 11px;
  color: #9a5a00;
  background: #fff7e8;
  border: 1px solid #ffd79a;
  border-radius: 999px;
  font-weight: 900;
}

.order-subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.order-subtitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eef1f5;
}

.order-status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 16px;
  border-bottom: 1px solid #edf0f4;
}

.order-status-tabs button {
  min-height: 42px;
  padding: 0;
  color: #8b94a3;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 900;
}

.order-status-tabs button.active {
  position: relative;
  color: #111827;
}

.order-status-tabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: #1f2329;
  border-radius: 999px;
}

.order-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.order-filter-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  color: #6b7280;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 4px;
}

.order-filter-grid label span {
  flex: 0 0 auto;
  color: #4b5563;
  font-weight: 800;
}

.order-filter-grid input,
.order-filter-grid select {
  min-width: 0;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #6b7280;
}

.order-filter-grid em {
  color: #8b94a3;
  font-style: normal;
}

.order-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
  color: #697386;
  font-size: 13px;
}

.order-filter-actions > button {
  min-height: 34px;
  padding: 0 16px;
  color: #4b5563;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 4px;
  font-weight: 800;
}

.order-filter-actions .order-search-button {
  color: #fff;
  background: #24272d;
  border-color: #24272d;
}

.order-filter-actions .order-export-button {
  margin-left: 8px;
  color: #4b5563;
  background: #fff;
}

.order-filter-actions .order-export-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.order-filter-actions label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.order-filter-actions input {
  width: 14px;
  height: 14px;
  min-height: 0;
  accent-color: #1f2329;
}

.order-filter-actions strong {
  margin-left: auto;
  color: #7a5a30;
  font-size: 13px;
}

.order-region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-region-chips button {
  min-height: 28px;
  padding: 0 12px;
  color: #4b5563;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 4px;
  font-weight: 800;
}

.order-region-chips button.active {
  color: #fff;
  background: #24272d;
  border-color: #24272d;
}

.order-table-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  min-height: 54px;
  margin: 8px 0 18px;
  background: #f7f7f8;
  border: 1px solid #eceff3;
}

.order-table-head span {
  display: grid;
  place-items: center;
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.order-center-panel .workflow-card {
  box-shadow: none;
  border-color: #e7ebf0;
}

.order-center-panel .checkout-form {
  top: 112px;
}

.workflow-grid,
.checkout-layout,
.member-grid,
.support-grid {
  display: grid;
  gap: 18px;
}

.upload-grid {
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
}

.checkout-layout {
  grid-template-columns: 1fr 420px;
}

.member-grid {
  grid-template-columns: 320px 1fr;
}

.support-grid {
  grid-template-columns: 420px 1fr;
  margin-top: 22px;
}

.customer-service-widget {
  position: fixed;
  right: 10px;
  bottom: 18px;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, auto) 56px;
  align-items: end;
  gap: 10px;
  pointer-events: none;
}

.customer-service-toolbar {
  grid-column: 2;
  display: grid;
  width: 54px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}

.customer-service-trigger,
.customer-service-panel {
  pointer-events: auto;
}

.customer-service-trigger {
  display: grid;
  place-items: center;
  gap: 3px;
  width: 54px;
  min-height: 58px;
  padding: 7px 0;
  color: #1f2933;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.customer-service-trigger:hover {
  color: #111827;
  background: #fff7df;
}

.customer-service-trigger.active {
  color: #111827;
  background: #ffde4a;
}

.customer-service-trigger.compact {
  min-height: 38px;
  border-bottom: 0;
}

.customer-service-trigger .side-icon {
  position: relative;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.customer-service-trigger.active .side-icon::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 1px;
  width: 8px;
  height: 8px;
  background: #18c86b;
  border: 2px solid #1f2933;
  border-radius: 50%;
}

.customer-service-trigger strong {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.customer-service-panel {
  grid-column: 1;
  grid-row: 1;
  display: none;
  width: min(720px, calc(100vw - 86px));
  height: min(560px, calc(100vh - 48px));
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e1ea;
  border-radius: 8px;
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.22);
}

.customer-service-widget.is-open .customer-service-panel {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
}

.customer-service-head {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
  padding: 0 16px;
  color: #fff;
  background: #172027;
  border-bottom: 1px solid #101820;
}

.customer-service-head i {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #172027;
  background: #ffd24c;
  border-radius: 8px;
  font-style: normal;
  font-size: 17px;
  font-weight: 1000;
}

.customer-service-head i::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  background: #25d366;
  border: 2px solid #172027;
  border-radius: 50%;
}

.customer-service-head strong {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
}

.customer-service-head span,
.customer-service-panel p {
  color: #aeb9c5;
  font-size: 12px;
  line-height: 1.6;
}

.customer-service-head button {
  margin-left: auto;
  width: 30px;
  height: 30px;
  color: #d7dee6;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.customer-service-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 218px;
  min-height: 0;
}

.customer-service-conversation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-width: 0;
  min-height: 0;
  background: #f5f7fa;
}

.customer-service-chat {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 20px 18px 14px;
  background:
    linear-gradient(#f5f7fa, #f5f7fa) padding-box,
    repeating-linear-gradient(0deg, rgba(23, 32, 39, 0.03) 0 1px, transparent 1px 36px);
}

.service-time {
  justify-self: center;
  color: #98a2b3;
  font-size: 12px;
}

.service-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.service-message-user {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.service-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #ec5b36;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 1000;
}

.service-bubble {
  width: fit-content;
  max-width: min(390px, 86%);
  padding: 10px 12px;
  color: #303943;
  background: #fff;
  border: 1px solid #e4eaf1;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.service-bubble-user {
  justify-self: end;
  color: #16232d;
  background: #fff2d2;
  border-color: #f1ce82;
  border-radius: 6px;
}

.service-bubble strong {
  display: block;
  margin-bottom: 4px;
  color: #111827;
  font-size: 14px;
  font-weight: 1000;
}

.service-bubble span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
}

.service-bubble small {
  display: block;
  margin-top: 6px;
  color: #8a96a3;
  font-size: 11px;
}

.service-bubble-user small {
  color: #8b6d23;
}

.service-bubble.compact {
  padding: 8px 10px;
}

.customer-service-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 10px;
  background: #f5f7fa;
}

.customer-service-quick button {
  min-height: 28px;
  padding: 0 11px;
  color: #33404a;
  background: #fff;
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.customer-service-quick button:hover {
  color: #151f28;
  border-color: #ec5b36;
  background: #fff2ed;
}

.customer-service-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #e7edf3;
}

.customer-service-full {
  grid-column: 1 / -1;
}

.customer-service-panel label {
  display: grid;
  gap: 5px;
  color: #202b34;
  font-size: 11px;
  font-weight: 900;
}

.customer-service-panel input,
.customer-service-panel select,
.customer-service-panel textarea {
  min-height: 34px;
  padding: 0 9px;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 6px;
  font-size: 13px;
}

.customer-service-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 9px;
  padding: 9px 14px 12px;
  background: #fff;
  border-top: 1px solid #e5ebf3;
}

.service-compose-tools {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  color: #6a7682;
  font-size: 13px;
  line-height: 1;
}

.customer-service-compose textarea {
  min-height: 58px;
  max-height: 96px;
  padding: 8px 10px;
  border-color: #cfd9e4;
  border-radius: 6px;
  resize: vertical;
}

.customer-service-submit {
  align-self: end;
  min-height: 58px;
  color: #fff;
  background: #ec5b36;
  border: 0;
  border-radius: 6px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(236, 91, 54, 0.2);
}

.customer-service-panel p {
  margin: 0;
  padding: 0;
  color: #667085;
  background: transparent;
}

.customer-service-profile {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 20px 16px;
  background: #fff;
  border-left: 1px solid #e6ebf2;
}

.service-profile-logo {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #172027;
  border-radius: 8px;
  font-size: 21px;
  font-weight: 1000;
}

.customer-service-profile > strong {
  color: #1f2937;
  font-size: 18px;
  font-weight: 1000;
}

.customer-service-profile > span {
  color: #475467;
  font-size: 13px;
}

.customer-service-profile dl {
  display: grid;
  gap: 12px;
  margin: 4px 0 0;
}

.customer-service-profile dl div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f5;
}

.customer-service-profile dt {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.customer-service-profile dd {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.7;
}

.customer-service-profile p {
  margin-top: 6px;
  padding: 12px;
  color: #3f4a54;
  background: #fff4f0;
  border: 1px solid #f2d7ce;
  border-radius: 6px;
  line-height: 1.7;
}

/* Quote product search final skin */
.quote-form .quote-sku-field:focus-within {
  background: #fff;
  border-color: #cfdceb;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.quote-form .quote-product-search input[type="search"]:focus,
.quote-form .quote-product-search input[type="search"]:focus-visible {
  border-color: #5595d0;
  box-shadow: 0 0 0 3px rgba(85, 149, 208, .14);
  outline: none;
}

.quote-form .quote-product-search input[type="search"] {
  height: 42px;
  min-height: 42px;
  padding: 0 76px 0 38px;
  border-color: #d7e2ee;
  border-radius: 8px;
  line-height: 42px;
}

.quote-form .quote-search-clear,
.quote-form .quote-search-toggle {
  position: absolute;
  top: 1px;
  grid-column: auto;
  width: 34px;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: #7b8794;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quote-form .quote-search-clear {
  right: 37px;
}

.quote-form .quote-search-toggle {
  right: 1px;
  background: #fbfcfe;
  border-left: 1px solid #e3ebf3;
  border-radius: 0 7px 7px 0;
}

.quote-form .quote-search-clear:hover,
.quote-form .quote-search-toggle:hover {
  color: #2c6eb8;
  background: #f4f8fc;
}

.quote-form .quote-sku-suggestions button {
  color: #1f2937;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none;
}

.quote-form .quote-sku-suggestions button:hover,
.quote-form .quote-sku-suggestions button:focus-visible {
  color: #172027;
  background: #f6f9fc;
  border-color: #e5edf5;
}

.quote-form .quote-sku-suggestions strong {
  color: #172027;
}

.quote-form .quote-sku-suggestions span {
  color: #73808c;
}

/* Customer service redesign: compact ecommerce side chat */
.customer-service-widget {
  right: 14px;
  bottom: 18px;
  grid-template-columns: minmax(0, auto) 48px;
  gap: 8px;
}

.customer-service-toolbar {
  width: 48px;
  overflow: visible;
  border-color: #dde3ea;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.customer-service-tool-item {
  position: relative;
  background: #fff;
}

.customer-service-tool-item .customer-service-trigger {
  border-bottom: 1px solid #edf1f5;
}

.customer-service-trigger {
  width: 48px;
  min-height: 50px;
  gap: 2px;
  padding: 6px 0;
  color: #222a32;
  background: #fff;
}

.customer-service-trigger.active {
  background: #ffe04f;
}

.customer-service-trigger .side-icon {
  width: 20px;
  height: 20px;
  font-size: 18px;
}

.customer-service-trigger strong {
  font-size: 11px;
  line-height: 1;
}

.customer-service-trigger.compact {
  min-height: 32px;
}

.service-phone-popover {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  min-width: 188px;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: #222a32;
  background: #fff;
  border: 1px solid #e4e9ef;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .16s ease, transform .16s ease;
}

.service-phone-popover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #e4e9ef;
  border-right: 1px solid #e4e9ef;
  transform: translateY(-50%) rotate(45deg);
}

.service-phone-item:hover .service-phone-popover,
.service-phone-item:focus-within .service-phone-popover {
  opacity: 1;
  transform: translate(0, -50%);
}

.phone-popover-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #343b43;
  background: #f1f3f5;
  border-radius: 50%;
  font-size: 22px;
}

.service-phone-popover small {
  display: block;
  color: #9aa2aa;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
}

.service-phone-popover strong {
  display: block;
  margin-top: 4px;
  color: #30343a;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;
}

.customer-service-panel {
  width: min(560px, calc(100vw - 76px));
  height: min(520px, calc(100vh - 44px));
  border-color: #dfe6ee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.2);
}

.customer-service-widget.is-open .customer-service-panel {
  grid-template-rows: 52px minmax(0, 1fr);
}

.customer-service-head {
  gap: 10px;
  padding: 0 12px;
  color: #172027;
  background: #fff;
  border-bottom: 1px solid #e7edf3;
}

.customer-service-head i {
  width: 32px;
  height: 32px;
  color: #172027;
  background: #ffd84d;
  border-radius: 7px;
  font-size: 16px;
}

.customer-service-head i::after {
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-color: #fff;
}

.customer-service-head strong {
  color: #172027;
  font-size: 15px;
}

.customer-service-head span {
  color: #687582;
  font-size: 11px;
}

.customer-service-head button {
  width: 28px;
  height: 28px;
  color: #5d6873;
  background: #f5f7f9;
  border-color: #dfe6ee;
}

.customer-service-shell {
  grid-template-columns: minmax(0, 1fr) 160px;
}

.customer-service-conversation {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  background: #f7f9fb;
}

.customer-service-chat {
  gap: 10px;
  padding: 14px 12px 10px;
  background: #f7f9fb;
}

.service-time {
  font-size: 11px;
}

.service-message {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
}

.service-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 12px;
}

.service-bubble {
  max-width: min(330px, 82%);
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 7px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
  word-break: normal;
  overflow-wrap: break-word;
}

.service-bubble strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.service-bubble span {
  font-size: 12px;
  line-height: 1.55;
}

.service-bubble small {
  margin-top: 4px;
  font-size: 10px;
}

.service-bubble-user {
  background: #fff4d4;
  border-color: #efcf7a;
  min-width: 92px;
}

.customer-service-quick {
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid #e8edf3;
}

.customer-service-quick button {
  min-height: 26px;
  padding: 0 9px;
  font-size: 11px;
  border-radius: 5px;
}

.customer-service-meta {
  gap: 7px;
  padding: 8px 12px;
}

.customer-service-panel label {
  gap: 4px;
  font-size: 10px;
}

.customer-service-panel input,
.customer-service-panel select,
.customer-service-panel textarea {
  min-height: 32px;
  border-radius: 5px;
  font-size: 12px;
}

.customer-service-compose {
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  padding: 8px 12px 10px;
}

.service-compose-tools {
  display: none;
}

.customer-service-compose textarea {
  min-height: 48px;
  max-height: 84px;
  padding: 7px 9px;
}

.customer-service-submit {
  min-height: 48px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: none;
}

.customer-service-profile {
  gap: 8px;
  padding: 14px 12px;
  background: #fbfcfd;
}

.service-profile-logo {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  font-size: 18px;
}

.customer-service-profile > strong {
  font-size: 15px;
}

.customer-service-profile > span,
.customer-service-profile dt,
.customer-service-profile dd,
.customer-service-profile p {
  font-size: 11px;
}

.customer-service-profile dl {
  gap: 0;
}

.customer-service-profile dl div {
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 7px 0;
}

.customer-service-profile p {
  padding: 9px;
  background: #fff;
  border-color: #e8edf3;
}

/* Customer service v2: chat-workbench layout inspired by ecommerce IM */
.customer-service-panel {
  width: min(740px, calc(100vw - 76px));
  height: min(610px, calc(100vh - 38px));
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.22);
}

.customer-service-widget.is-open .customer-service-panel {
  grid-template-rows: 50px minmax(0, 1fr);
}

.customer-service-head {
  min-height: 50px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #e8edf4;
  cursor: move;
  user-select: none;
}

.customer-service-head i {
  width: 30px;
  height: 30px;
  color: #1f2933;
  background: #ffdb45;
  border-radius: 7px;
  font-size: 15px;
}

.customer-service-head strong {
  color: #172027;
  font-size: 15px;
}

.customer-service-head span {
  color: #637180;
  font-size: 11px;
}

.customer-service-head button {
  width: 28px;
  height: 28px;
  color: #52606d;
  background: #f8fafc;
  border-color: #d9e2ec;
  cursor: pointer;
}

.customer-service-shell {
  grid-template-columns: minmax(0, 1fr) 210px;
  background: #f6f8fb;
}

.customer-service-conversation {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  background: #f6f8fb;
}

.customer-service-chat {
  gap: 13px;
  padding: 18px 14px 12px;
  background: #f6f8fb;
}

.service-time {
  color: #99a6b5;
  font-size: 11px;
}

.service-message {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
}

.service-avatar {
  width: 28px;
  height: 28px;
  background: #ef5b3a;
  border-radius: 50%;
  font-size: 12px;
}

.service-bubble {
  min-width: 112px;
  max-width: min(390px, 78%);
  padding: 9px 11px;
  color: #1f2933;
  background: #fff;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.service-bubble-user {
  min-width: 0;
  color: #1f2933;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-right: 0;
  text-align: right;
}

.service-bubble strong {
  margin-bottom: 4px;
  color: #172027;
  font-size: 13px;
}

.service-bubble span {
  font-size: 13px;
  line-height: 1.58;
}

.service-bubble small {
  color: #9aa6b4;
  font-size: 10px;
}

.service-bubble-user small {
  color: #9aa6b4;
}

/* Final IM bubble style */
.service-message-agent {
  grid-template-columns: 30px minmax(0, 1fr);
}

.service-message-agent .service-avatar {
  grid-row: 1 / span 2;
}

.service-agent-name {
  align-self: end;
  color: #8b98a8;
  font-size: 11px;
  line-height: 1.2;
}

.service-message-user {
  display: flex;
  justify-content: flex-end;
}

.service-message-user .service-bubble {
  justify-self: end;
}

.service-bubble-agent {
  max-width: min(420px, 88%);
  color: #1f2933;
  background: #f0f3f8;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}

.service-bubble-user {
  min-width: 84px;
  max-width: min(360px, 72%);
  padding: 9px 12px;
  color: #fff;
  background: #18aef2;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  text-align: left;
}

.service-bubble-user span {
  color: #fff;
}

.service-bubble-user small {
  color: rgba(255, 255, 255, 0.78);
}

.customer-service-quick {
  gap: 7px;
  padding: 7px 12px 6px;
  background: #fff;
  border-top: 1px solid #edf1f6;
}

.customer-service-quick button {
  min-height: 26px;
  padding: 0 10px;
  color: #29627f;
  background: #f5f9fc;
  border-color: #dce8f1;
  border-radius: 5px;
  font-size: 11px;
}

.customer-service-quick button:hover {
  color: #0f5f8c;
  border-color: #92cce9;
  background: #eaf7fd;
}

.customer-service-meta {
  grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border-top: 0;
}

.customer-service-full {
  grid-column: auto;
}

.customer-service-panel label {
  display: block;
  color: #6d7884;
  font-size: 0;
}

.customer-service-panel label::before {
  display: none;
}

.customer-service-panel input,
.customer-service-panel select {
  min-height: 30px;
  padding: 0 9px;
  color: #2c3742;
  background: #f8fafc;
  border: 1px solid #dfe7ef;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
}

.customer-service-compose {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 12px 12px;
  padding: 0;
  overflow: visible;
  background: #fff;
  border: 1px solid #20afe9;
  border-radius: 6px;
}

.service-compose-tools {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 1;
  display: flex;
  gap: 12px;
  color: #2d3a46;
  font-size: 18px;
}

.service-tool-button {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #536273;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font: inherit;
  line-height: 1;
}

.service-tool-button {
  cursor: pointer;
}

.service-tool-button:hover,
.service-tool-button[aria-expanded="true"],
.service-tool-button.is-busy {
  color: #0f8fc6;
  background: #eaf7fd;
}

.service-file-input {
  display: none;
}

.service-emoji-panel {
  position: absolute;
  left: 8px;
  bottom: 38px;
  z-index: 20;
  width: 284px;
  max-width: calc(100% - 16px);
  padding: 10px;
  background: #fff;
  border: 1px solid #dbe6f1;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.service-emoji-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.service-emoji-head strong {
  color: #172027;
  font-size: 13px;
}

.service-emoji-head button {
  width: 24px;
  height: 24px;
  padding: 0;
  color: #667085;
  background: #f3f6f9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.service-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.service-emoji-grid button,
.service-sticker-row button {
  min-width: 0;
  border: 1px solid #e5edf5;
  background: #f8fafc;
  cursor: pointer;
}

.service-emoji-grid button {
  height: 34px;
  padding: 0;
  border-radius: 7px;
  font-size: 18px;
}

.service-emoji-grid button:hover,
.service-sticker-row button:hover {
  background: #eef8fd;
  border-color: #bfe8f8;
}

.service-sticker-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.service-sticker-row button {
  height: 30px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 6px;
  color: #233140;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-quick-panel {
  width: 300px;
}

.service-template-list {
  display: grid;
  gap: 6px;
}

.service-template-list button {
  min-height: 34px;
  padding: 0 10px;
  color: #233140;
  background: #f8fafc;
  border: 1px solid #e5edf5;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.service-template-list button:hover {
  background: #eef8fd;
  border-color: #bfe8f8;
}

.customer-service-compose textarea {
  min-height: 86px;
  max-height: 126px;
  padding: 12px 46px 36px 12px;
  border: 0;
  border-radius: 0;
  resize: none;
  font-size: 13px;
  line-height: 1.55;
}

.customer-service-submit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #20afe9;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  font-size: 28px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  text-indent: 2px;
  white-space: nowrap;
}

.customer-service-submit:hover {
  color: #fff;
  background: #0f8fc6;
}

/* Final polish: compact service shortcuts and contact fields */
.customer-service-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 12px 7px;
  background: #fff;
  border-top: 1px solid #edf1f6;
}

.customer-service-quick button {
  min-width: 0;
  min-height: 28px;
  padding: 0 12px;
  color: #184f6b;
  background: #f7fbfe;
  border: 1px solid #d6e6f0;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(16, 24, 32, .03);
  font-size: 12px;
  font-weight: 800;
}

.customer-service-quick button:hover {
  color: #0c78aa;
  border-color: #99d2ec;
  background: #edf9ff;
}

.customer-service-meta {
  display: grid;
  grid-template-columns: 92px minmax(150px, .95fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 7px 12px 9px;
  background: #fff;
  border-top: 1px solid #f0f3f6;
}

.customer-service-full {
  grid-column: auto;
}

.customer-service-panel label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #6b7680;
  font-size: 0;
  font-weight: 800;
}

.customer-service-panel input,
.customer-service-panel select {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 11px;
  color: #26313b;
  background: #fbfcfe;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.customer-service-panel input:focus,
.customer-service-panel select:focus {
  border-color: #27aee4;
  box-shadow: 0 0 0 3px rgba(32, 175, 233, .12);
}

.customer-service-panel input::placeholder {
  color: #7f8a95;
}

.customer-service-profile {
  display: block;
  padding: 24px 16px 14px;
  overflow: auto;
  background: #f7f9fc;
  border-left: 1px solid #e1e7ef;
  text-align: center;
}

.service-profile-logo {
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fff;
  color: #172027;
  box-shadow: inset 0 0 0 1px #e1e8f0;
}

.customer-service-profile > strong {
  display: block;
  margin-bottom: 8px;
  color: #172027;
  font-size: 16px;
}

.customer-service-profile > span {
  display: block;
  margin-bottom: 16px;
  color: #465463;
  font-size: 12px;
}

.customer-service-profile dl {
  display: grid;
  gap: 0;
  margin: 0;
  text-align: left;
}

.customer-service-profile dl div {
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 10px 0;
  border-top: 1px solid #e4eaf2;
  border-bottom: 0;
}

.customer-service-profile dt {
  color: #748190;
  font-size: 11px;
}

.customer-service-profile dd {
  color: #2e3a46;
  font-size: 12px;
  line-height: 1.65;
}

.customer-service-profile p {
  margin-top: 14px;
  padding: 10px;
  color: #536171;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 6px;
  text-align: left;
  font-size: 12px;
}

.download-center-grid,
.self-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.self-service-grid {
  grid-template-columns: 1fr 420px;
}

.workflow-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-title span {
  font-size: 18px;
  font-weight: 900;
}

.panel-title button,
.workflow-card .panel-title button {
  min-height: 32px;
  padding: 0 10px;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.drop-zone {
  display: grid;
  min-height: 190px;
  place-items: center;
  padding: 22px;
  border: 1.5px dashed #b9c3d2;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
  cursor: pointer;
}

.drop-zone input {
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.drop-zone strong {
  font-size: 20px;
}

.drop-zone span {
  color: var(--muted);
}

.file-list,
.cart-list,
.order-history {
  display: grid;
  gap: 12px;
}

.file-item,
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.file-item strong,
.history-item strong {
  display: block;
}

.file-item span,
.history-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.file-item small,
.history-item small {
  display: block;
  margin-top: 6px;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.5;
}

.preflight {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  background: #eef2f7;
  border-radius: 999px;
}

.preflight.passed {
  color: #0f8a52;
  background: #e9f8ef;
}

.preflight.warning {
  color: #8a5a00;
  background: #fff7d6;
}

.preflight.failed {
  color: #d23f31;
  background: #fff1f0;
}

.file-item button {
  min-height: 34px;
  padding: 0 12px;
  color: #d23f31;
  background: #fff1f0;
  border: 1px solid #ffd0cb;
}

.cart-item {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 130px 110px 70px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cart-item > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
}

.cart-item .product-art {
  grid-row: span 2;
  min-height: 58px;
}

.cart-product-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 70px;
  height: 58px;
  background: #fff;
  border: 1px solid #dde6f0;
  border-radius: 9px;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

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

.cart-product-thumb.is-empty {
  background: linear-gradient(135deg, #f8fafc, #eef4fb);
}

.cart-product-thumb.is-empty::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 18%;
  width: 66%;
  height: 48%;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  transform: rotate(-6deg);
}

.cart-product-thumb.is-empty span {
  position: absolute;
  right: 16%;
  bottom: 18%;
  width: 30%;
  height: 24%;
  border-radius: 6px;
  background: linear-gradient(135deg, #9bdcff, #b9f5ce);
  box-shadow: -8px -5px 0 rgba(148, 163, 184, 0.14);
}

.cart-item .cart-product-thumb {
  grid-row: span 2;
}

.cart-item .product-art,
.header-order-item .product-art {
  display: none !important;
}

.cart-item strong,
.cart-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item span {
  color: var(--muted);
  font-size: 12px;
}

.cart-item label {
  gap: 4px;
}

.cart-item input {
  min-height: 36px;
}

.cart-item b {
  color: var(--orange);
  font-size: 18px;
}

.cart-item button {
  min-height: 34px;
  color: #d23f31;
  background: #fff1f0;
  border: 1px solid #ffd0cb;
}

.checkout-form {
  position: sticky;
  top: 150px;
  align-self: start;
}

.checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fff4e6;
  border: 1px solid #ffd5a5;
  border-radius: 8px;
}

.checkout-total span {
  color: #7a4b16;
  font-weight: 800;
}

.checkout-total strong {
  color: var(--orange);
  font-size: 28px;
}

.checkout-balance-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.checkout-balance-status span {
  color: #344054;
  font-weight: 900;
}

.checkout-balance-status span b {
  margin-left: 6px;
  color: #111827;
}

.checkout-balance-status small {
  grid-column: 1;
  color: #667085;
}

.checkout-balance-status button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 72px;
}

.checkout-balance-status.is-insufficient small,
.checkout-balance-status.is-insufficient span b {
  color: #c4320a;
}

.checkout-balance-status.is-enough small {
  color: #067647;
}

.member-home-dashboard {
  display: grid;
  gap: 20px;
}

.member-wallet-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
  min-height: 160px;
  overflow: hidden;
  color: #ffe958;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 233, 88, .14), transparent 28%),
    linear-gradient(135deg, #303030 0%, #171717 68%, #222 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.member-profile-block {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 30px 40px;
}

.member-face {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  color: #111827;
  background: radial-gradient(circle at 50% 42%, #fff 0 44%, #f7f7f7 45% 100%);
  border: 8px solid #fff;
  border-radius: 50%;
  box-shadow: inset 0 -6px 0 rgba(17, 24, 39, 0.06);
  font-size: 24px;
  font-weight: 1000;
}

.member-identity {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.member-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.member-name-row strong {
  color: #ffe958;
  font-size: 20px;
  font-weight: 1000;
}

.member-name-row span {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  color: #1f2329;
  background: #ffe958;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
}

.member-name-row span.tier-platinum,
.member-tier-badge.tier-platinum {
  color: #334155;
  background: linear-gradient(135deg, #f8fafc, #dbeafe);
  border-color: #bfdbfe;
}

.member-name-row span.tier-diamond,
.member-tier-badge.tier-diamond {
  color: #4338ca;
  background: linear-gradient(135deg, #eef2ff, #f5d0fe);
  border-color: #c4b5fd;
}

.member-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  color: #0f5fa8;
  background: #edf7ff;
  border: 1px solid #cfe8ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.member-identity small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.member-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.member-hero-actions button,
.member-hero-actions a {
  display: inline-grid;
  min-height: 34px;
  min-width: 92px;
  place-items: center;
  padding: 0 14px;
  color: #1f2329;
  background: #ffe958;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}

.member-hero-actions button:disabled {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.member-dashboard-notices {
  align-self: center;
  max-height: 150px;
  overflow: hidden;
  padding-right: 2px;
}

.member-dashboard-notices .member-notice {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.member-dashboard-notices .member-notice strong {
  color: #fff;
}

.member-dashboard-notices .member-notice b {
  color: rgba(255, 255, 255, 0.7);
}

.member-dashboard-notices .member-notice small {
  color: rgba(255, 255, 255, 0.55);
}

.member-dashboard-notices .member-notice small em {
  color: #172033;
  background: #ffe958;
  border-color: transparent;
}

.member-dashboard-notices .member-notice-arrow {
  color: #ffe958;
  background: rgba(255, 255, 255, 0.1);
}

.member-dashboard-notices .member-notice.empty {
  color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.member-wallet-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: center;
  align-content: center;
  min-width: 0;
  padding: 18px;
  background: rgba(255, 255, 255, .025);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.member-tier-card {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  color: #172033;
  background:
    linear-gradient(90deg, rgba(255, 217, 92, 0.18), transparent 58%),
    linear-gradient(135deg, #fffefa, #f9fbff);
  border: 1px solid rgba(255, 220, 104, 0.86);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.member-tier-card::before {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #ffcf32, #111827);
}

.tier-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.tier-card-top em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.tier-card-main {
  display: grid;
  gap: 3px;
}

.tier-card-main strong {
  color: #172033;
  font-size: 25px;
  font-weight: 1000;
  line-height: 1.1;
}

.tier-card-main b {
  color: #344054;
  font-size: 13px;
  font-weight: 950;
}

.member-tier-card p {
  margin: 0;
  color: #536173;
  font-size: 12px;
  line-height: 1.5;
}

.tier-card-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tier-card-benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  color: #0f5fa8;
  background: #eef8ff;
  border: 1px solid #cfe8ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.member-tier-card .member-tier-badge {
  justify-self: start;
}

.member-tier-card.tier-platinum {
  background:
    linear-gradient(90deg, rgba(191, 219, 254, 0.34), transparent 58%),
    linear-gradient(135deg, #ffffff, #eef5ff);
  border-color: #bfdbfe;
}

.member-tier-card.tier-diamond {
  background:
    linear-gradient(90deg, rgba(196, 181, 253, 0.34), transparent 58%),
    linear-gradient(135deg, #fbfaff, #fff0fb);
  border-color: #c4b5fd;
}

.wallet-balance {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label action"
    "amount amount"
    "hint hint";
  min-width: 0;
  min-height: 120px;
  gap: 5px 12px;
  align-items: center;
  align-content: center;
  padding: 16px 18px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255, 233, 88, .17), transparent 62%),
    rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 233, 88, .2);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px rgba(0, 0, 0, .12);
}

.wallet-balance::after {
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -38px;
  width: 108px;
  height: 108px;
  content: "";
  background: radial-gradient(circle, rgba(255, 233, 88, .18), rgba(255, 233, 88, 0) 68%);
  border-radius: 50%;
}

.wallet-balance b {
  grid-area: amount;
  display: block;
  min-width: 0;
  max-width: 100%;
  color: #ffe958;
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  letter-spacing: -.7px;
  white-space: nowrap;
}

.wallet-balance span {
  grid-area: label;
  display: flex;
  gap: 7px;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.wallet-balance span::before {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #282715;
  content: "¥";
  background: #ffe958;
  border-radius: 7px;
  box-shadow: 0 6px 14px rgba(255, 226, 70, .16);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
}

.wallet-balance > small {
  grid-area: hint;
  overflow: hidden;
  color: rgba(255, 255, 255, .48);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-mini-grid span {
  font-size: 14px;
  font-weight: 900;
}

.wallet-balance button {
  grid-area: action;
  align-self: center;
  justify-self: end;
  min-width: 60px;
  min-height: 32px;
  padding: 0 13px;
  color: #202020;
  background: #ffe958;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(255, 226, 70, .18);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.wallet-balance button:hover {
  background: #ffed78;
  box-shadow: 0 10px 24px rgba(255, 226, 70, .25);
  transform: translateY(-1px);
}

.recharge-dialog {
  width: min(900px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.28);
}

.recharge-dialog::backdrop {
  background: rgba(17, 24, 39, 0.58);
}

.recharge-modal {
  position: relative;
  padding: 24px;
}

.recharge-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 34px;
  margin-bottom: 20px;
}

.recharge-heading span {
  color: #111827;
  font-size: 22px;
  font-weight: 1000;
}

.recharge-heading strong {
  color: #b54708;
  font-size: 15px;
}

.recharge-content {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.recharge-qr-wrap {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-right: 28px;
  border-right: 1px solid #e5e7eb;
}

.recharge-qr-wrap img {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 51%;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.recharge-qr-wrap span {
  color: #475467;
  font-size: 13px;
  font-weight: 900;
}

.recharge-qr-wrap small {
  max-width: 240px;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.recharge-fields {
  display: grid;
  gap: 14px;
}

.recharge-fields label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 900;
}

.recharge-fields input,
.recharge-fields select,
.recharge-fields textarea {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: #fff;
}

.recharge-fields textarea {
  min-height: 66px;
  padding: 10px 12px;
  resize: vertical;
}

.recharge-flow-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  font-size: 11px;
  white-space: nowrap;
}

.recharge-flow-note b {
  color: #344054;
}

.recharge-flow-note i {
  width: 12px;
  height: 1px;
  background: #f4c430;
}

.recharge-upload-field input[type="file"] {
  min-height: 46px;
  padding: 7px 9px;
  color: #475467;
  background: #f8fafc;
}

.recharge-upload-field input[type="file"]::file-selector-button {
  height: 30px;
  margin-right: 10px;
  padding: 0 12px;
  color: #182230;
  background: #ffe04a;
  border: 0;
  border-radius: 5px;
  font-weight: 900;
}

.recharge-proof-status {
  margin-top: -7px;
  padding: 9px 11px;
  color: #667085;
  background: #f8fafc;
  border: 1px dashed #d0d5dd;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}

.recharge-proof-status[data-state="uploading"] {
  color: #8a5300;
  background: #fff9e7;
  border-color: #f4c430;
}

.recharge-proof-status[data-state="done"] {
  color: #067647;
  background: #ecfdf3;
  border-color: #75e0a7;
}

.recharge-proof-status[data-state="error"] {
  color: #b42318;
  background: #fef3f2;
  border-color: #fda29b;
}

.recharge-safety-note {
  margin: 0;
  padding: 10px 12px;
  color: #7a4b00;
  background: #fffaeb;
  border-left: 3px solid #f4c430;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.55;
}

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

.recharge-presets button {
  min-height: 38px;
  color: #344054;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-weight: 900;
}

#rechargeUnionpayLink {
  color: #175cd3;
  font-weight: 900;
}

.recharge-submit {
  min-height: 46px;
  color: #202020;
  background: #ffe04a;
  border: 0;
  border-radius: 6px;
  font-weight: 1000;
}

.recharge-submit:disabled {
  opacity: 0.55;
}

/* Two-step recharge: confirm the amount first, then open the scan-to-pay card. */
.recharge-amount-dialog {
  width: min(620px, calc(100vw - 32px));
  border-radius: 12px;
}

.recharge-amount-modal {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 22px 24px 24px;
}

.recharge-amount-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding-right: 34px;
  color: #101828;
}

.recharge-amount-heading span {
  font-size: 22px;
  font-weight: 1000;
}

.recharge-amount-heading strong {
  color: #b54708;
  font-size: 14px;
  font-weight: 900;
}

.recharge-amount-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 76px;
  gap: 10px;
  align-items: center;
  color: #344054;
  font-weight: 900;
}

.recharge-amount-entry input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  color: #101828;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  outline: none;
  font-size: 16px;
  font-weight: 800;
}

.recharge-amount-entry input:focus {
  border-color: #f2c800;
  box-shadow: 0 0 0 3px rgba(255, 224, 74, .22);
}

.recharge-amount-entry button {
  height: 44px;
  color: #fff;
  background: #292929;
  border: 0;
  border-radius: 6px;
  font-weight: 1000;
  cursor: pointer;
}

.recharge-amount-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #667085;
  font-size: 13px;
}

.recharge-amount-presets > span {
  margin-right: 4px;
  font-weight: 900;
}

.recharge-amount-presets button {
  min-width: 76px;
  min-height: 34px;
  padding: 0 14px;
  color: #344054;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.recharge-amount-presets button:hover {
  background: #fff9d6;
  border-color: #f2c800;
  transform: translateY(-1px);
}

.recharge-warm-tip {
  padding: 14px 16px;
  color: #475467;
  background: #fffaf0;
  border: 1px solid #f4dfaa;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.7;
}

.recharge-warm-tip strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  color: #e87c00;
  font-size: 14px;
}

.recharge-warm-tip strong b {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #fff;
  background: #ffa500;
  border-radius: 50%;
  font-size: 11px;
}

.recharge-warm-tip ol {
  margin: 0;
  padding-left: 24px;
}

.recharge-payment-dialog {
  width: min(470px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100vh - 28px);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(155deg, #fffce7 0%, #fff176 58%, #ffe447 100%);
  border: 1px solid rgba(224, 181, 0, .36);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(17, 24, 39, .34);
}

.recharge-payment-dialog::backdrop {
  background: rgba(17, 24, 39, .62);
  backdrop-filter: blur(2px);
}

.recharge-payment-modal {
  position: relative;
  display: grid;
  gap: 13px;
  max-height: calc(100vh - 28px);
  padding: 18px;
  overflow: auto;
  scrollbar-width: thin;
}

.recharge-payment-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #344054;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(208, 213, 221, .8);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.recharge-payment-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 40px;
  color: #182230;
}

.recharge-payment-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 10px;
}

.recharge-payment-brand div {
  display: grid;
  gap: 1px;
}

.recharge-payment-brand strong {
  font-size: 18px;
  font-weight: 1000;
}

.recharge-payment-brand span {
  color: #667085;
  font-size: 11px;
}

.recharge-payment-methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.recharge-payment-methods button {
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 7px 4px;
  color: #475467;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(208, 213, 221, .86);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.recharge-payment-methods button:hover,
.recharge-payment-methods button.active {
  color: #172033;
  background: #fff;
  border-color: #d5ad00;
  transform: translateY(-1px);
}

.recharge-payment-methods button b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #fff;
  background: #1f2937;
  border-radius: 7px;
  font-size: 11px;
}

.recharge-payment-methods button.active b {
  color: #172033;
  background: #ffe13e;
}

.recharge-payment-card {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px 18px 15px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 13px;
  box-shadow: 0 14px 34px rgba(172, 134, 0, .13);
}

.recharge-payment-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #667085;
  font-size: 13px;
}

.recharge-payment-channel i {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #fff;
  background: #21b66f;
  border-radius: 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
}

.recharge-payment-channel i:nth-child(2) {
  background: #1677ff;
}

.recharge-payment-qr {
  width: 205px;
  max-width: 74vw;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 51%;
  padding: 5px;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
}

.recharge-payment-card > p {
  margin: 0;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.recharge-payment-gateway {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  background: #1769c2;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 1000;
}

.recharge-payment-channel[hidden],
.recharge-payment-qr[hidden],
.recharge-payment-gateway[hidden],
.recharge-payment-manual-guide[hidden],
.recharge-payment-card dl > div[hidden] {
  display: none;
}

.recharge-payment-manual-guide {
  display: grid;
  min-height: 172px;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.recharge-payment-manual-guide b {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  color: #172033;
  background: #ffe13e;
  border-radius: 22px;
  box-shadow: 0 12px 26px rgba(228, 185, 0, .2);
  font-size: 27px;
}

.recharge-payment-manual-guide strong {
  color: #172033;
  font-size: 17px;
}

.recharge-payment-card dl {
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 2px 0 0;
}

.recharge-payment-card dl > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.recharge-payment-card dt {
  min-width: 68px;
  color: #98a2b3;
  font-size: 12px;
}

.recharge-payment-card dd {
  margin: 0;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

#rechargePaymentAmountText {
  color: #ff3b30;
  font-size: 22px;
  letter-spacing: .01em;
}

.recharge-payment-submit,
.recharge-payment-back {
  width: 100%;
  min-height: 43px;
  border-radius: 7px;
  font-weight: 1000;
  cursor: pointer;
}

.recharge-payment-submit {
  color: #fff;
  background: #20242b;
  border: 0;
  box-shadow: 0 8px 18px rgba(32, 36, 43, .16);
}

.recharge-payment-submit:hover {
  background: #111827;
}

.recharge-payment-submit:disabled {
  color: rgba(255, 255, 255, .72);
  background: #667085;
}

.recharge-payment-review-note {
  margin: 0;
  padding: 10px 12px;
  color: #7a4b00;
  background: rgba(255, 255, 255, .72);
  border-left: 3px solid #d9a900;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.55;
}

.recharge-proof-file-input {
  display: none;
}

.recharge-payment-proof-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(208, 213, 221, .8);
  border-radius: 10px;
}

.recharge-payment-proof-panel[hidden] {
  display: none;
}

.recharge-payment-proof-panel .recharge-proof-status {
  margin: 0;
}

.recharge-payment-proof-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recharge-payment-proof-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recharge-payment-proof-head strong {
  color: #172033;
  font-size: 14px;
}

.recharge-payment-proof-head span {
  color: #667085;
  font-size: 11px;
}

.recharge-proof-pick {
  display: inline-flex !important;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: #172033 !important;
  background: #ffe13e;
  border: 1px solid #e5bb00;
  border-radius: 7px;
  cursor: pointer;
  font-weight: 1000 !important;
}

.recharge-payment-proof-preview {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
}

.recharge-payment-proof-preview[hidden] {
  display: none;
}

.recharge-payment-proof-preview img {
  width: 76px;
  height: 64px;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 6px;
}

.recharge-payment-proof-preview > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recharge-payment-proof-preview strong,
.recharge-payment-proof-preview span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-payment-proof-preview strong {
  color: #344054;
  font-size: 12px;
}

.recharge-payment-proof-preview span {
  color: #98a2b3;
  font-size: 11px;
}

.recharge-payment-proof-preview button {
  min-height: 32px;
  padding: 0 10px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}

.recharge-payment-proof-panel label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
}

.recharge-payment-proof-panel textarea {
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  resize: vertical;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.recharge-payment-proof-note span {
  color: #475467;
  font-size: 11px;
}

.recharge-payment-proof-panel .recharge-submit {
  width: 100%;
}

.recharge-payment-back {
  min-height: 36px;
  color: #475467;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(52, 64, 84, .18);
  font-size: 12px;
}

@media (max-width: 600px) {
  .recharge-amount-modal {
    padding: 20px 16px;
  }

  .recharge-amount-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .recharge-amount-entry {
    grid-template-columns: 1fr auto;
  }

  .recharge-amount-entry label {
    grid-column: 1 / -1;
  }

  .recharge-amount-entry button {
    grid-column: 1 / -1;
  }

  .recharge-amount-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recharge-amount-presets > span {
    grid-column: 1 / -1;
  }

  .recharge-amount-presets button {
    min-width: 0;
    padding: 0 6px;
  }

  .recharge-payment-modal {
    padding: 15px;
  }

  .recharge-payment-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recharge-request-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}

.recharge-request-card {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) repeat(3, minmax(110px, .8fr)) minmax(90px, .65fr);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
}

.recharge-request-card > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #475467;
  font-size: 12px;
}

.recharge-request-card b {
  color: #101828;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.recharge-request-card a {
  color: #175cd3;
  font-weight: 900;
}

.recharge-request-status {
  justify-self: end;
  padding: 6px 10px;
  color: #8a5300;
  background: #fffaeb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.recharge-request-status.is-approved {
  color: #067647;
  background: #ecfdf3;
}

.recharge-request-status.is-rejected,
.recharge-request-status.is-cancelled {
  color: #b42318;
  background: #fef3f2;
}

.recharge-request-empty {
  padding: 16px;
  color: #667085;
  background: #f8fafc;
  border: 1px dashed #d0d5dd;
  border-radius: 8px;
  text-align: center;
}

.wallet-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  min-height: 120px;
  padding: 0;
  background: transparent;
  border: 0;
}

.wallet-mini-grid > span {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  color: rgba(255, 255, 255, .72);
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 12px;
  line-height: 1.25;
}

.wallet-mini-grid > span::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 4px;
  height: 4px;
  background: #ffe958;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 233, 88, .09);
}

.wallet-mini-grid i {
  display: grid;
  grid-area: icon;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffe958;
  background: rgba(255, 233, 88, .1);
  border: 1px solid rgba(255, 233, 88, .15);
  border-radius: 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.wallet-mini-grid small {
  grid-area: label;
  overflow: hidden;
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-mini-grid b {
  grid-area: value;
  margin: 0;
  overflow: hidden;
  color: #ffe958;
  font-size: 14px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-order-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 90px;
  padding: 18px 24px;
  color: #111827;
  background: linear-gradient(90deg, #fff8b5 0%, #ffe640 100%);
  border-radius: 14px;
}

.member-order-strip div {
  display: grid;
  place-items: center;
  gap: 5px;
  text-align: center;
}

.member-order-strip b {
  font-size: 32px;
  line-height: 1;
  font-weight: 1000;
}

.member-order-strip span {
  font-size: 14px;
  font-weight: 800;
}

.member-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 20px;
}

.member-chart-card {
  min-height: 300px;
  padding: 24px;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
}

.member-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.member-card-head strong {
  color: #111827;
  font-size: 20px;
  font-weight: 1000;
}

.member-card-tabs {
  display: flex;
  padding: 3px;
  background: #f2f4f7;
  border-radius: 4px;
}

.member-card-tabs button {
  min-height: 30px;
  padding: 0 14px;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 3px;
  font-weight: 900;
}

.member-card-tabs button.active {
  color: #fff;
  background: #2b2d31;
}

.member-empty-chart {
  display: grid;
  min-height: 220px;
  place-items: center;
}

.member-empty-chart span {
  width: min(72%, 520px);
  height: 2px;
  background: linear-gradient(90deg, transparent, #eef1f5 18%, #eef1f5 82%, transparent);
}

.member-order-chart {
  display: grid;
  gap: 20px;
  min-height: 220px;
  padding-top: 26px;
}

.member-order-chart-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
  gap: 18px;
  align-items: stretch;
}

.member-order-total {
  display: grid;
  align-content: center;
  min-height: 112px;
  padding: 20px;
  background: #fff8d8;
  border: 1px solid #ffe47a;
  border-radius: 12px;
}

.member-order-total span,
.member-order-side span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 900;
}

.member-order-total strong {
  margin-top: 8px;
  color: #111827;
  font-size: 34px;
  line-height: 1;
  font-weight: 1000;
}

.member-order-total small {
  margin-top: 10px;
  color: #8a5a00;
  font-weight: 800;
}

.member-order-side {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.member-order-side div {
  display: grid;
  align-content: center;
  min-height: 112px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #edf1f5;
  border-radius: 10px;
}

.member-order-side b {
  margin-top: 8px;
  color: #111827;
  font-size: 22px;
  line-height: 1.1;
}

.member-order-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  min-height: 122px;
  padding: 14px 12px 4px;
  border-top: 1px solid #eef1f5;
}

.member-order-bar {
  display: grid;
  grid-template-rows: 18px 1fr 18px;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.member-order-bar em {
  max-width: 100%;
  overflow: hidden;
  color: #6b7280;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-order-bar i {
  align-self: end;
  width: min(100%, 34px);
  min-height: 6px;
  background: linear-gradient(180deg, #202329, #4b5563);
  border-radius: 999px 999px 4px 4px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.14);
}

.member-order-bar span {
  color: #8a93a2;
  font-size: 11px;
  font-weight: 800;
}

.member-sales-chart {
  display: grid;
  gap: 16px;
  padding-top: 22px;
}

.member-sales-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.member-sales-summary > div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 82px;
  padding: 13px 14px;
  background: #f7f9fc;
  border: 1px solid #e9eef5;
  border-radius: 8px;
}

.member-sales-summary > div.primary {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  min-height: 116px;
  padding: 20px 22px;
  color: #fff;
  background: #202329;
  border-color: #202329;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14);
}

.member-sales-summary > div.primary::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 74px;
  height: 34px;
  background:
    linear-gradient(90deg, rgba(255, 226, 61, 0.18), rgba(255, 226, 61, 0.42));
  border-radius: 999px;
}

.member-sales-summary span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.member-sales-summary .primary span,
.member-sales-summary .primary small {
  color: #d7dce4;
}

.member-sales-summary strong {
  margin-top: 8px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  font-weight: 1000;
  position: relative;
  z-index: 1;
}

.member-sales-summary b {
  margin-top: 8px;
  color: #111827;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.1;
  font-weight: 1000;
  white-space: nowrap;
}

.member-sales-summary small {
  margin-top: 8px;
  color: #8a93a2;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.member-sales-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 12px;
  min-height: 118px;
  padding: 16px 8px 2px;
  border-top: 1px solid #eef1f5;
  background: linear-gradient(#f7f9fc 1px, transparent 1px) 0 50% / 100% 36px no-repeat;
}

.member-sales-bar {
  display: grid;
  grid-template-rows: 18px 1fr 18px;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.member-sales-bar em {
  max-width: 100%;
  overflow: hidden;
  color: #576274;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-sales-bar i {
  align-self: end;
  width: min(100%, 30px);
  min-height: 6px;
  background: linear-gradient(180deg, #ffe86a, #f1c400);
  border-radius: 999px 999px 6px 6px;
  box-shadow: 0 8px 18px rgba(227, 185, 0, 0.18);
}

.member-sales-bar span {
  color: #8a93a2;
  font-size: 11px;
  font-weight: 800;
}

.member-radar {
  position: relative;
  display: grid;
  width: 280px;
  height: 280px;
  margin: 28px auto 0;
  place-items: center;
}

.member-radar i,
.member-radar b {
  position: absolute;
  border-radius: 50%;
}

.member-radar i {
  border: 1px solid #dce3ec;
}

.member-radar i:nth-child(1) { inset: 16px; }
.member-radar i:nth-child(2) { inset: 44px; }
.member-radar i:nth-child(3) { inset: 72px; }
.member-radar i:nth-child(4) { inset: 100px; }
.member-radar i:nth-child(5) { inset: 128px; }

.member-radar b {
  width: 10px;
  height: 10px;
  background: #ffe23d;
  box-shadow: 0 0 0 4px rgba(255, 226, 61, 0.18);
}

.member-section-title {
  margin: 28px 0 14px;
  color: #111827;
  font-size: 18px;
  font-weight: 1000;
}

.account-info-section {
  margin-top: 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
}

.account-info-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef1f5;
}

.account-info-head div {
  display: grid;
  gap: 5px;
}

.account-info-head strong {
  color: #111827;
  font-size: 22px;
  font-weight: 1000;
}

.account-info-head span {
  color: #667085;
  font-size: 13px;
}

.account-info-head em {
  flex: 0 0 auto;
  padding: 6px 12px;
  color: #7a5600;
  background: #fff7c7;
  border: 1px solid #ffe979;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.account-info-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.72fr) minmax(560px, 1.28fr);
  gap: 18px;
  align-items: stretch;
}

.account-card {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  padding: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.account-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-card-title div {
  display: grid;
  gap: 4px;
}

.account-card-title strong {
  color: #111827;
  font-size: 20px;
  font-weight: 1000;
}

.account-card-title small {
  color: #7b8494;
  font-size: 12px;
}

.account-card-title > span {
  padding: 4px 8px;
  color: #1f2329;
  background: #ffe958;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
}

.account-card-title button {
  min-height: 34px;
  padding: 0 12px;
  color: #1f2329;
  background: #ffe958;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 1000;
}

.account-profile-form {
  gap: 16px;
}

.account-profile-form button,
.address-form-actions button {
  width: fit-content;
  min-width: 150px;
  justify-self: start;
}

.account-note {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  color: #5f6b7a;
  background: #f7f9fc;
  border: 1px dashed #dbe3ee;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
}

.account-note b {
  color: #111827;
}

.address-editor-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 0.82fr);
  gap: 18px;
}

.address-edit-form {
  align-content: start;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid #e7edf5;
  border-radius: 10px;
}

.field-row.three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.address-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.address-list-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 10px;
}

.address-list-panel > strong {
  color: #111827;
  font-size: 16px;
  font-weight: 1000;
}

.address-list-panel .empty-products {
  display: grid;
  min-height: 176px;
  place-items: center;
  color: #718096;
  background: #f8fafc;
  border: 1px dashed #dbe3ee;
  border-radius: 10px;
}

.account-info-section .address-list {
  align-content: start;
  max-height: 390px;
  overflow: auto;
  padding-right: 2px;
}

.profile-card {
  justify-items: center;
  align-content: center;
  text-align: center;
}

.avatar.large {
  width: 70px;
  height: 70px;
  font-size: 28px;
}

.profile-card strong {
  font-size: 22px;
}

.profile-card span {
  color: var(--muted);
}

.profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.profile-actions a {
  display: grid;
  min-height: 40px;
  place-items: center;
  color: #fff;
  background: #1f2329;
  border-radius: 8px;
  font-weight: 800;
}

.profile-actions a:last-child {
  color: #0f68db;
  background: #eaf5ff;
}

.history-item b {
  color: var(--orange);
}

.history-item em {
  padding: 4px 8px;
  color: #0f8a52;
  background: #e9f8ef;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
}

.process-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
}

.process-list b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  background: #1f2329;
  border-radius: 50%;
}

.cart-pill {
  width: auto;
  min-width: 92px;
  padding: 0 12px;
  gap: 6px;
}

.cart-pill b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  color: #1f2329;
  background: var(--yellow);
  border-radius: 999px;
  font-size: 12px;
}

.resource-card {
  grid-template-rows: 36px auto minmax(54px, 1fr) 44px;
  align-content: stretch;
  min-height: 242px;
}

.resource-card > span {
  display: grid;
  width: 48px;
  height: 36px;
  place-items: center;
  color: #fff;
  background: #1f2329;
  border-radius: 8px;
  font-weight: 900;
}

.resource-card strong {
  font-size: 18px;
}

.resource-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.resource-card button,
.resource-card .resource-download {
  align-self: end;
}

.resource-card .resource-download {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(180deg, #242830, #16191f);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.14);
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.resource-card .resource-download:hover {
  background: linear-gradient(180deg, #111827, #05070a);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.2);
  transform: translateY(-1px);
}

.resource-card .resource-download:focus-visible {
  outline: 3px solid rgba(255, 195, 0, 0.42);
  outline-offset: 3px;
}

/* “我的模板”复用商品模板库的上图下文卡片视觉。 */
.resource-template-card {
  display: flex;
  min-height: 520px;
  flex-direction: column;
}

.resource-template-card .product-template-card-preview {
  height: 170px;
  flex: 0 0 170px;
}

.resource-template-card .product-template-card-preview > svg {
  height: 142px;
}

.resource-template-card .product-template-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.resource-template-card .product-template-card-title h3 {
  display: -webkit-box;
  min-height: 46px;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.resource-template-card .product-template-card-body > p {
  height: auto;
  min-height: 42px;
}

.resource-template-card .product-template-card-body > .resource-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0 15px;
  color: #17191d;
  background: #ffe45b;
  border: 1px solid #e1c437;
  border-radius: 5px;
  box-shadow: none;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.resource-template-card .product-template-card-body > .resource-download:hover {
  color: #17191d;
  background: #ffdd32;
  border-color: #d8b820;
  box-shadow: none;
  transform: translateY(-1px);
}

.resource-template-card .product-template-card-body > .resource-download b {
  font-size: 18px;
}

@media (max-width: 1280px) and (min-width: 901px) {
  #downloads .download-center-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.favorite-item {
  display: grid;
  grid-template-columns: 74px 1fr 70px 70px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.favorite-item .product-art {
  min-height: 58px;
}

.favorite-item strong,
.favorite-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.favorite-item button {
  min-height: 34px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #fff;
  color: #1f2329;
  font-weight: 800;
  cursor: pointer;
}

.favorite-item .favorite-quote {
  color: #fff;
  background: #1f2329;
  border-color: #1f2329;
}

.tracking-result {
  display: grid;
  gap: 8px;
  min-height: 76px;
  padding: 14px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tracking-result strong {
  color: var(--ink);
}

.tracking-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tracking-steps i {
  height: 6px;
  background: #dde3ec;
  border-radius: 999px;
}

.tracking-steps .done {
  background: var(--green);
}

[data-staff-only][hidden],
.hidden {
  display: none !important;
}

.visual-gallery {
  padding-top: 62px;
  padding-bottom: 66px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.visual-gallery .section-head.centered {
  margin-bottom: 28px;
}

.visual-gallery .section-head.centered h2 {
  color: #020817;
  font-size: 30px;
  font-weight: 1000;
}

.visual-gallery .section-head.centered p {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.gallery-card:hover {
  border-color: #ffd16e;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12);
  transform: translateY(-3px);
}

.gallery-card::before,
.gallery-card::after {
  display: none;
}

.company-gallery-media {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 10px;
  background:
    radial-gradient(circle at 70% 18%, rgba(255, 216, 61, 0.16), transparent 28%),
    linear-gradient(135deg, #fff7ed 0%, #f7fbff 74%);
  border-bottom: 1px solid #eef2f6;
}

.company-gallery-media .product-art {
  display: grid;
  aspect-ratio: 1.16 / 1;
  min-height: 0;
  place-items: center;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 107, 44, 0.1), transparent 30%),
    #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 8px;
}

.company-gallery-media .product-art-backdrop {
  display: none;
}

.company-gallery-media .product-art.has-image .product-art-main {
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 94%;
  max-height: 94%;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(15, 23, 42, 0.15));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.gallery-card:hover .company-gallery-media .product-art.has-image .product-art-main {
  filter: drop-shadow(0 24px 20px rgba(15, 23, 42, 0.18));
  transform: translateY(-2px) scale(1.025);
}

.company-gallery-media .product-art-badge {
  display: none;
}

.company-gallery-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  padding: 5px 9px;
  color: #fff;
  background: #1f2329;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.company-gallery-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 16px;
  flex: 1;
}

.company-gallery-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.company-gallery-top span {
  flex: 0 1 auto;
  max-width: 50%;
  padding: 4px 8px;
  overflow: hidden;
  color: #ff6b2c;
  background: #fff3e8;
  border: 1px solid #ffd7b8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gallery-top small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gallery-copy > strong {
  display: -webkit-box;
  min-height: 44px;
  overflow: hidden;
  color: #111827;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-gallery-copy p {
  display: -webkit-box;
  min-height: 40px;
  overflow: hidden;
  margin: 0;
  color: #5f6b7a;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-gallery-tags em {
  padding: 4px 7px;
  color: #0f68db;
  background: #eaf5ff;
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.company-gallery-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.company-gallery-meta span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e7edf5;
  border-radius: 8px;
}

.company-gallery-meta em {
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gallery-meta b {
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gallery-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: end;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 216, 61, 0.18), transparent 48%),
    #fffaf0;
  border: 1px solid #ffdd95;
  border-radius: 8px;
}

.company-gallery-price span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
}

.company-gallery-price strong {
  grid-row: span 2;
  color: #ff5a1f;
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
}

.company-gallery-price small {
  margin-left: 2px;
  font-size: 12px;
}

.company-gallery-price b {
  overflow: hidden;
  color: #536071;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-gallery-actions {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 8px;
  margin-top: 2px;
}

.company-gallery-actions button {
  min-width: 0;
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.company-product-detail {
  color: #111827;
  background: #fff;
  border: 1px solid #dce4ee;
}

.company-product-quote {
  color: #fff;
  background: #1f2329;
  border: 1px solid #1f2329;
}

.company-product-cart {
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(135deg, #126de5, #0f5fca);
  border: 1px solid #0f68db;
  box-shadow: 0 8px 18px rgba(15, 104, 219, 0.18);
}

.company-product-cart::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-top-width: 3px;
  border-radius: 3px 3px 4px 4px;
  background:
    radial-gradient(circle, currentColor 52%, transparent 56%) 2px 7px / 4px 4px no-repeat,
    radial-gradient(circle, currentColor 52%, transparent 56%) 8px 7px / 4px 4px no-repeat;
  box-sizing: border-box;
}

.company-gallery-actions button:hover {
  transform: translateY(-1px);
}

.company-product-detail:hover {
  border-color: #ffd16e;
  background: #fffaf0;
}

.company-product-quote:hover {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.company-product-cart:hover {
  background: #0b5fca;
  border-color: #0b5fca;
  box-shadow: 0 10px 22px rgba(15, 104, 219, 0.26);
}

.visual-gallery {
  position: relative;
  padding-top: 42px;
  padding-bottom: 44px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 46%, #f5f8fc 100%);
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.visual-gallery .section-head.centered {
  margin-bottom: 22px;
}

.visual-gallery .section-head.centered h2 {
  font-size: clamp(27px, 2.2vw, 34px);
  line-height: 1.22;
}

.visual-gallery .section-head.centered p {
  color: #64748b;
  font-size: 14px;
}

.visual-gallery .gallery-grid {
  width: min(1460px, 100%);
  margin: 0 auto;
  gap: 20px;
}

.visual-gallery .gallery-card {
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #fbfcff 100%);
  border-color: #e3eaf3;
  border-radius: 13px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.visual-gallery .gallery-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #ffd84d, #ff7a2f, #1677ff);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.visual-gallery .gallery-card:hover {
  border-color: #ffc451;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.13);
  transform: translateY(-4px);
}

.visual-gallery .gallery-card:hover::before {
  opacity: 1;
}

.visual-gallery .company-product-scene:first-child {
  border-color: #ffd05c;
  box-shadow: 0 20px 52px rgba(255, 190, 26, 0.16), 0 18px 42px rgba(15, 23, 42, 0.06);
}

.visual-gallery .company-gallery-media {
  padding: 0;
  background: #f8fafc;
  border-bottom-color: #edf2f7;
}

.visual-gallery .company-gallery-media .product-art {
  aspect-ratio: 1.38 / 1;
  overflow: hidden;
  background: #f8fafc;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.visual-gallery .company-gallery-media .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  filter: none;
}

.visual-gallery .company-gallery-badge {
  left: 20px;
  top: 20px;
  padding: 6px 11px;
  background: #141b24;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.visual-gallery .company-gallery-copy {
  gap: 9px;
  padding: 13px 14px 15px;
}

.visual-gallery .company-gallery-top span {
  max-width: 46%;
  color: #ff6126;
  background: #fff6ed;
  border-color: #ffd6b8;
}

.visual-gallery .company-gallery-top small {
  color: #475569;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
}

.visual-gallery .company-gallery-copy > strong {
  min-height: 44px;
  color: #07111f;
  font-size: 17px;
  line-height: 1.3;
}

.visual-gallery .company-gallery-copy p {
  min-height: 21px;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
  -webkit-line-clamp: 1;
}

.visual-gallery .company-gallery-tags em {
  padding: 5px 8px;
  color: #0b67d7;
  background: #eef7ff;
  border: 1px solid #d9ecff;
  border-radius: 7px;
}

.visual-gallery .company-gallery-meta {
  gap: 6px;
}

.visual-gallery .company-gallery-meta span {
  min-height: 42px;
  padding: 7px 8px;
  background: #fbfdff;
  border-color: #e4ebf4;
  border-radius: 9px;
}

.visual-gallery .company-gallery-meta b {
  color: #07111f;
  font-size: 13px;
}

.visual-gallery .company-gallery-price {
  min-height: 56px;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255, 216, 77, 0.24), rgba(255, 255, 255, 0.74) 58%),
    #fffaf0;
  border-color: #ffc65a;
  border-radius: 10px;
}

.visual-gallery .company-gallery-price span,
.visual-gallery .company-gallery-price b {
  color: #5b6676;
}

.visual-gallery .company-gallery-price strong {
  color: #ff5a1f;
  font-size: 23px;
  letter-spacing: 0;
}

.visual-gallery .company-gallery-actions {
  gap: 9px;
}

.visual-gallery .company-gallery-actions button {
  min-height: 38px;
  border-radius: 9px;
}

.visual-gallery .company-product-detail {
  color: #0f172a;
  background: #ffffff;
  border-color: #d8e2ee;
}

.visual-gallery .company-product-quote {
  background: #171d25;
  border-color: #171d25;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.13);
}

.visual-gallery .company-product-cart {
  background: linear-gradient(135deg, #1677ff, #0f5fca);
  box-shadow: 0 12px 24px rgba(15, 104, 219, 0.2);
}

#companyProductGallery.gallery-grid {
  display: block;
  width: min(1320px, 100%);
}

.company-carousel.products-section {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 0 52px;
  background: transparent;
  border: 0;
}

.company-carousel-viewport {
  overflow-x: auto;
  overflow-y: visible;
  padding: 8px 0 16px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.company-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.company-carousel.products-section .product-grid.company-carousel-track {
  display: flex;
  grid-template-columns: none;
  gap: 24px;
  min-width: 100%;
  padding-left: 0;
}

.company-carousel.products-section .product-card {
  flex: 0 0 calc((100% - 72px) / 4);
  scroll-snap-align: start;
}

.company-carousel.products-section .product-card .product-art {
  aspect-ratio: 1 / 1;
}

.company-carousel-nav {
  position: absolute;
  top: 43%;
  z-index: 8;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #101828;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dbe6f1;
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  font-size: 26px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.company-carousel-nav:hover {
  background: #ffe958;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.22);
  transform: translateY(-50%) scale(1.06);
}

.company-carousel-prev {
  left: 0;
}

.company-carousel-next {
  right: 0;
}

.company-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 14px;
  margin-top: 2px;
}

.company-carousel-dots button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  overflow: hidden;
  background: #d9e4ee;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width .22s ease, background .22s ease, box-shadow .22s ease;
}

.company-carousel-dots button.active {
  width: 34px;
  background: #e8eef5;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08);
}

.company-carousel-dots button i {
  position: absolute;
  inset: 0;
  display: block;
  background: #111827;
  border-radius: inherit;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.company-carousel-dots button.active i {
  opacity: 1;
  animation: company-carousel-progress var(--company-carousel-duration, 4.2s) linear forwards;
}

.company-carousel.is-paused .company-carousel-dots button.active i {
  animation-play-state: paused;
}

@keyframes company-carousel-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1180px) {
  .company-carousel.products-section .product-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 680px) {
  .company-carousel.products-section {
    padding: 0 42px;
  }

  .company-carousel.products-section .product-card {
    flex-basis: 100%;
  }
}

.member-grid {
  grid-template-columns: 300px 390px minmax(0, 1fr);
}

.profile-actions button {
  min-height: 40px;
  color: #fff;
  background: #1f2329;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.profile-actions button:disabled {
  color: #9ca3af;
  background: #eef0f3;
  cursor: not-allowed;
}

.member-profile-card,
.address-card {
  align-content: start;
}

.member-small-form,
.address-list,
.member-notice-list {
  display: grid;
  gap: 10px;
}

.member-small-form label {
  display: grid;
  gap: 6px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 800;
}

.member-small-form input,
.member-small-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  font: inherit;
}

.member-small-form textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

.member-small-form button,
.address-item button {
  min-height: 36px;
  padding: 0 12px;
  color: #fff;
  background: #1f2329;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.member-small-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.check-row {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.address-item,
.member-notice {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #edf1f7;
  border-radius: 6px;
}

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

.account-info-section .address-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 14px;
  background: #fbfcfe;
  border-color: #e7edf5;
  border-radius: 10px;
}

.account-info-section .address-item strong {
  color: #111827;
  font-size: 14px;
}

.account-info-section .address-item button {
  min-width: 54px;
  min-height: 30px;
  border-radius: 999px;
  font-size: 12px;
}

.address-item span,
.member-notice span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.address-item button:last-child {
  color: #d23f31;
  background: #fff1f0;
}

.member-notice {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  color: inherit;
  background: #fff;
  border: 1px solid #e5edf6;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.member-notice:hover {
  border-color: #cbdff5;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.member-notice-dot {
  display: block;
  width: 10px;
  height: 10px;
  background: #ffcf32;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(255, 207, 50, 0.16);
}

.member-notice-order .member-notice-dot {
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16);
}

.member-notice-invoice .member-notice-dot {
  background: #38bdf8;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.16);
}

.member-notice-copy {
  display: grid !important;
  min-width: 0;
  gap: 4px;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: normal !important;
}

.member-notice strong {
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-notice small {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #8a95a6;
  font-size: 11px;
  font-weight: 800;
}

.member-notice small em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  color: #0f5fa8;
  background: #eef8ff;
  border: 1px solid #cfe8ff;
  border-radius: 999px;
  font-style: normal;
  font-weight: 1000;
}

.member-notice b {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-notice-arrow {
  display: grid !important;
  width: 28px;
  height: 28px;
  place-items: center;
  margin: 0 !important;
  color: #0f5fa8;
  background: #eef8ff;
  border-radius: 999px;
  font-size: 22px !important;
  font-weight: 1000;
  line-height: 1 !important;
}

.member-notice.empty {
  color: var(--muted);
  grid-template-columns: 1fr;
  place-content: center;
  text-align: center;
  box-shadow: none;
  cursor: default;
}

.member-notice.empty:hover {
  border-color: #edf1f7;
  box-shadow: none;
  transform: none;
}

.member-notice.empty span {
  margin: 0;
}

.commerce-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.payment-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.payment-only-grid {
  grid-template-columns: minmax(0, 1fr);
}

.invoice-center-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px);
}

.invoice-center-card {
  gap: 14px;
  padding: 22px;
  border-color: #dce6f2;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.invoice-card-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8edf3;
}

.invoice-card-heading > .order-invoice-icon {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #172033;
  background: #fff6cc;
  border: 1px solid #ffe16a;
  border-radius: 8px;
}

.invoice-card-heading > .order-invoice-icon::before {
  inset: 9px 12px;
}

.invoice-card-heading > .order-invoice-icon::after {
  left: 16px;
  right: 16px;
  top: 16px;
}

.invoice-card-heading h3,
.invoice-card-heading p {
  margin: 0;
}

.invoice-card-heading h3 {
  color: #111827;
  font-size: 20px;
}

.invoice-card-heading p {
  margin-top: 4px;
  color: #718096;
  font-size: 13px;
}

.logistics-module-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.logistics-result-card {
  min-height: 280px;
}

.logistics-result-card .tracking-result {
  min-height: 204px;
}

.payment-card {
  gap: 12px;
}

.payment-guide {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  color: #111827;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 196, 77, 0.2), transparent 28%),
    linear-gradient(135deg, #fffaf0 0%, #fff 48%, #f6fbff 100%);
  border: 1px solid #ffd08a;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.payment-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.payment-guide-head span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  color: #b54708;
  background: #fff3d7;
  border: 1px solid #ffd08a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.payment-guide-head strong {
  color: #111827;
  font-size: 18px;
  font-weight: 1000;
}

.payment-guide-body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.payment-qr-code {
  position: relative;
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  padding: 10px;
  place-items: center;
  background:
    linear-gradient(90deg, #111827 12px, transparent 12px) 11px 11px / 28px 28px no-repeat,
    linear-gradient(#111827 12px, transparent 12px) 11px 11px / 28px 28px no-repeat,
    linear-gradient(90deg, #111827 12px, transparent 12px) calc(100% - 27px) 11px / 28px 28px no-repeat,
    linear-gradient(#111827 12px, transparent 12px) calc(100% - 27px) 11px / 28px 28px no-repeat,
    repeating-linear-gradient(90deg, #111827 0 6px, transparent 6px 12px),
    repeating-linear-gradient(0deg, rgba(17, 24, 39, 0.16) 0 5px, transparent 5px 11px),
    #fff;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  box-shadow: inset 0 0 0 7px #fff, 0 8px 18px rgba(15, 23, 42, 0.12);
}

.payment-qr-code i {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 6px solid #111827;
  border-radius: 3px;
}

.payment-qr-code i:nth-child(1) {
  top: 11px;
  left: 11px;
}

.payment-qr-code i:nth-child(2) {
  top: 11px;
  right: 11px;
}

.payment-qr-code i:nth-child(3) {
  bottom: 11px;
  left: 11px;
}

.payment-qr-code b {
  position: relative;
  z-index: 1;
  padding: 2px 5px;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 1000;
}

.payment-guide[data-method="bank"] .payment-qr-code,
.payment-guide[data-method="offline"] .payment-qr-code {
  background: linear-gradient(135deg, #111827, #344054);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.payment-guide[data-method="bank"] .payment-qr-code::before,
.payment-guide[data-method="offline"] .payment-qr-code::before {
  content: "";
  width: 42px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, 0.22);
}

.payment-guide[data-method="bank"] .payment-qr-code i,
.payment-guide[data-method="offline"] .payment-qr-code i {
  display: none;
}

.payment-guide[data-method="bank"] .payment-qr-code b,
.payment-guide[data-method="offline"] .payment-qr-code b {
  position: absolute;
  bottom: 12px;
  color: #fff;
  background: transparent;
}

.payment-guide[data-method="unionpay"] .payment-qr-code {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, .45) 0 18px, transparent 19px),
    linear-gradient(135deg, #0066b3 0%, #00529b 46%, #009b72 46%, #00a878 100%);
  border-color: #9dd7f6;
  box-shadow: 0 10px 22px rgba(0, 102, 179, .2);
}

.payment-guide[data-method="unionpay"] .payment-qr-code::before {
  content: "UnionPay";
  position: absolute;
  left: 10px;
  top: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
}

.payment-guide[data-method="unionpay"] .payment-qr-code::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 16px;
  width: 42px;
  height: 9px;
  background: rgba(255, 255, 255, .84);
  border-radius: 999px;
  box-shadow: 0 14px 0 rgba(255, 255, 255, .48);
}

.payment-guide[data-method="unionpay"] .payment-qr-code i {
  display: none;
}

.payment-guide[data-method="unionpay"] .payment-qr-code b {
  position: absolute;
  left: 10px;
  bottom: 13px;
  color: #00529b;
  background: #fff;
}

.payment-guide[data-method="payment-code"] .payment-guide-body {
  grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  align-items: start;
}

.payment-guide[data-method="payment-code"] .payment-qr-code {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-color: #b8d0e9;
  box-shadow: 0 12px 24px rgba(0, 82, 155, 0.16);
}

.payment-guide[data-method="payment-code"] .payment-qr-full-link {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #fff;
}

.payment-guide[data-method="payment-code"] .payment-qr-full-link[hidden] {
  display: none;
}

.payment-guide[data-method="payment-code"] .payment-qr-code img {
  position: absolute;
  left: -32.2%;
  top: -135.7%;
  display: block;
  width: 164.7%;
  max-width: none;
  height: auto;
}

.payment-guide[data-method="payment-code"] .payment-qr-code i,
.payment-guide[data-method="payment-code"] .payment-qr-code b {
  display: none;
}

.payment-gateway-link {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #fff;
  background: #00529b;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.payment-gateway-link:hover {
  background: #003f78;
}

.payment-gateway-link[hidden] {
  display: none;
}

.payment-guide-copy {
  display: grid;
  gap: 10px;
}

.payment-guide-copy p {
  margin: 0;
  color: #344054;
  font-size: 14px;
  line-height: 1.6;
}

.payment-guide-copy dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.payment-guide-copy dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #eef2f7;
  border-radius: 7px;
}

.payment-guide-copy dt,
.payment-guide-copy dd {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}

.payment-guide-copy dt {
  color: #667085;
}

.payment-guide-copy dd {
  color: #111827;
  text-align: right;
}

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

.payment-steps span {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #344054;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #edf1f7;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
}

.payment-steps b {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  background: #111827;
  border-radius: 999px;
  font-size: 11px;
}

.payment-order-hint {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.9fr);
  align-items: stretch;
  gap: 8px;
  min-height: 64px;
  padding: 8px;
  color: #475467;
  background:
    linear-gradient(135deg, rgba(255, 243, 215, 0.8), rgba(255, 255, 255, 0.92)),
    #fff;
  border: 1px solid #ffd08a;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-size: 12px;
  font-weight: 900;
}

.payment-order-hint.is-empty {
  grid-template-columns: 1fr 1fr;
  min-height: 54px;
  background: #f8fafc;
  border-color: #e6edf5;
  box-shadow: none;
}

.payment-order-hint > div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(230, 237, 245, 0.9);
  border-radius: 7px;
}

.payment-order-hint span {
  color: #667085;
  font-size: 11px;
  line-height: 1;
}

.payment-order-hint strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-order-chip strong {
  color: #ff4d1d;
}

.payment-order-amount {
  min-width: 104px;
}

.payment-order-amount strong {
  color: #ff4d1d;
  font-size: 18px;
}

.payment-order-next strong {
  color: #0f68db;
}

.payment-proof-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.payment-proof-tip[data-state="uploading"] {
  color: #0f68db;
  background: #eff8ff;
  border-color: #b8ddff;
}

.payment-proof-tip[data-state="done"] {
  color: #067647;
  background: #ecfdf3;
  border-color: #abefc6;
}

.payment-proof-tip[data-state="error"] {
  color: #b42318;
  background: #fff4f3;
  border-color: #fecdca;
}

.payment-proof-tip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-proof-tip button {
  min-height: 28px;
  padding: 0 10px;
  color: #0f68db;
  background: #eaf5ff;
  border: 1px solid #c9e4ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.payment-proof-tip button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.payment-proof-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .payment-guide-body,
  .payment-steps,
  .payment-order-hint,
  .payment-order-hint.is-empty {
    grid-template-columns: 1fr;
  }

  .payment-qr-code {
    width: 112px;
  }

  .payment-guide[data-method="payment-code"] .payment-guide-body {
    grid-template-columns: 1fr;
  }

  .payment-guide[data-method="payment-code"] .payment-qr-code {
    width: min(100%, 240px);
    justify-self: center;
  }

  .payment-proof-tip {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-proof-tip span {
    white-space: normal;
  }

  .payment-proof-tip button {
    width: 100%;
  }
}

.commerce-grid h3,
.workflow-card h3 {
  margin: 0;
}

.file-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.file-item a {
  display: grid;
  min-height: 34px;
  padding: 0 12px;
  place-items: center;
  color: #0f68db;
  background: #eaf5ff;
  border: 1px solid #c9e4ff;
  border-radius: 8px;
  font-weight: 800;
}

.tracking-result {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }

  .main-nav {
    display: none;
  }

  .search {
    width: 100%;
  }

  .header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .hero,
  .quote-section {
    grid-template-columns: 1fr;
  }

  .order-main .quote-section .quote-form {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .hero {
    height: 620px;
    min-height: 620px;
    max-height: 620px;
  }

  .hero-stage {
    height: 300px;
    min-height: 300px;
  }

  .hero-copy {
    height: 320px;
    min-height: 0;
    padding: 40px 26px 24px;
  }

  .speech-bubble {
    left: 26px;
    top: 12px;
    min-width: 190px;
    min-height: 84px;
    font-size: 20px;
  }

  .poster-stack {
    right: 6%;
    bottom: 12px;
    width: 690px;
    max-width: 88vw;
    transform: scale(0.78);
    transform-origin: right bottom;
  }

  .quick-board,
  .ranking-grid,
  .service-grid {
    grid-template-columns: 1fr 1fr;
  }

  .account-panel {
    grid-column: 1 / -1;
  }

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

@media (max-width: 1120px) {
  .product-price-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .sku-price {
    width: 100%;
    justify-items: start;
  }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 16px;
  }

  .search {
    grid-column: 1 / -1;
    order: 3;
  }

  .login-pill {
    width: 58px;
  }

  .register-pill {
    min-width: 58px;
  }

  .member-avatar-button {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .member-avatar-button img {
    border-radius: 11px;
  }

  .member-menu-panel {
    position: fixed;
    top: 66px;
    right: 10px;
    width: min(326px, calc(100vw - 20px));
  }

  .header-actions {
    grid-column: auto;
    gap: 10px;
  }

  .header-tool {
    display: none;
  }

  .category-bar {
    justify-content: flex-start;
    gap: 20px;
    padding: 10px 16px;
    overflow-x: auto;
    min-height: 48px;
  }

  .hero {
    height: 520px;
    min-height: 520px;
    max-height: 520px;
  }

  .hero-copy {
    height: 282px;
    min-height: 0;
    padding: 30px 18px 16px;
  }

  .hero h1 {
    font-size: 44px;
    max-width: 340px;
    min-height: 88px;
  }

  .hero-subtitle {
    min-height: 48px;
    font-size: 16px;
    margin: 12px 0 14px;
  }

  .hero-badges span {
    min-height: 34px;
    padding: 0 14px;
    font-size: 14px;
  }

  .hero-stage {
    height: 238px;
    min-height: 238px;
  }

  .notice-strip {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .speech-bubble {
    left: 18px;
    top: 2px;
    min-width: 150px;
    min-height: 62px;
    border-width: 4px;
    font-size: 15px;
  }

  .speech-bubble::after {
    bottom: -22px;
    width: 34px;
    height: 32px;
    border-right-width: 4px;
    border-bottom-width: 4px;
  }

  .eyes {
    right: 8%;
    top: 2px;
    transform: scale(0.58) rotate(7deg);
    transform-origin: right top;
  }

  .spark-shape {
    right: -16%;
    top: 22px;
    width: 330px;
    height: 190px;
  }

  .poster-stack {
    right: -88px;
    bottom: -46px;
    width: 610px;
    transform: scale(0.45);
    transform-origin: right bottom;
  }

  .quick-board,
  .ranking-grid,
  .product-layout,
  .quote-section,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .product-pagination {
    grid-column: 1;
    margin-left: 0;
  }

  .product-grid {
    grid-column: 1;
    padding-left: 0;
  }

  .quick-board,
  .ranking-section,
  .products-section,
  .quote-section,
  .service-section {
    padding-right: 16px;
    padding-left: 16px;
  }

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

  .account-panel {
    grid-template-columns: 42px 1fr;
  }

  .account-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rank-card.featured {
    min-height: 250px;
  }

  .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .category-list-head {
    grid-column: 1 / -1;
  }

  .side-category {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 8px;
  }

  .side-category-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .side-category-thumb {
    padding: 2px;
  }

  .side-category-thumb img {
    border-radius: 8px;
  }

  .side-category-copy small,
  .side-category-arrow {
    display: none;
  }

  .product-grid {
    grid-template-columns: 1fr;
    padding-top: 14px;
    padding-left: 0;
  }

  .product-card {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  }

  .product-card .product-art {
    aspect-ratio: 1 / 1;
  }

  .product-title-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .product-title-row > span {
    width: max-content;
    max-width: 100%;
  }

  .product-price-panel {
    min-height: 0;
  }

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

  .sku-price strong {
    font-size: 18px;
  }

  .section-head.centered h2,
  .quote-copy h2 {
    font-size: 26px;
  }

  .site-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .site-footer > span,
  .footer-links {
    justify-content: flex-start;
  }

  .site-footer > span a:first-child,
  .footer-policy-link {
    justify-content: flex-start;
    text-align: left;
  }
}

.download-panel a::after {
  content: "\203A";
}

@media (max-width: 760px) {
  .catalog-toolbar,
  .file-item,
  .history-item {
    display: grid;
    align-items: start;
  }

  .catalog-toolbar select {
    width: 100%;
  }

  .workflow-grid,
  .upload-grid,
  .checkout-layout,
  .member-grid,
  .support-grid,
  .download-center-grid,
  .self-service-grid,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .workflow-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .checkout-form {
    position: static;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }

  .cart-item > div {
    grid-template-columns: 64px 1fr;
  }

  .cart-item .cart-product-thumb {
    width: 64px;
    height: 54px;
  }

  .cart-item label,
  .cart-item button {
    width: 100%;
  }

  .detail-layout .product-art {
    min-height: 230px;
  }

  .product-detail-layout .product-detail-media .product-art {
    min-height: 0;
  }

  .detail-actions,
  .card-actions,
  .profile-actions {
    grid-template-columns: 1fr;
  }

  .favorite-item {
    grid-template-columns: 64px 1fr;
  }

  .favorite-item button {
    grid-column: span 2;
  }

  .product-dialog form {
    padding: 18px;
  }
}

@media (max-width: 1100px) {
  .gallery-grid,
  .commerce-grid,
  .payment-module-grid,
  .logistics-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-section .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-grid {
    grid-template-columns: 1fr 1fr;
  }

  .member-grid .order-history-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .topbar {
    min-height: auto;
  }

  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: 16px;
  }

  .brand small {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cart-pill {
    min-width: 78px;
    padding: 0 10px;
  }

  .gallery-grid,
  .commerce-grid,
  .member-grid {
    grid-template-columns: 1fr;
  }

  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-pagination {
    flex-wrap: wrap;
    gap: 8px;
  }

  .gallery-card {
    min-height: 0;
  }

  .company-gallery-media .product-art {
    aspect-ratio: 1 / 1;
  }

  .company-gallery-actions {
    grid-template-columns: 1fr;
  }

  .member-grid .order-history-card {
    grid-column: auto;
  }

  .file-item,
  .history-item {
    grid-template-columns: 1fr;
  }

  .file-item a,
  .file-item button {
    width: 100%;
  }

  .commerce-grid .workflow-card {
    min-width: 0;
  }

  .workflow-card button,
  .quote-form button {
    min-width: 0;
    white-space: normal;
  }
}

@media (max-width: 1100px) {
  .quote-section {
    padding: 20px;
  }

  .quote-product-preview {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .quote-flow-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .customer-service-widget {
    right: 8px;
    bottom: 10px;
    grid-template-columns: minmax(0, calc(100vw - 68px)) 48px;
  }

  .customer-service-trigger {
    width: 48px;
    min-height: 48px;
    height: auto;
  }

  .customer-service-panel {
    width: calc(100vw - 68px);
    height: calc(100vh - 32px);
    max-height: none;
  }

  .customer-service-shell {
    grid-template-columns: 1fr;
  }

  .customer-service-profile {
    display: none;
  }

  .customer-service-conversation {
    min-height: 0;
  }

  .customer-service-meta {
    grid-template-columns: 1fr;
  }

  .customer-service-compose {
    grid-template-columns: minmax(0, 1fr);
  }

  .customer-service-compose textarea {
    min-height: 80px;
  }

  .customer-service-submit {
    min-height: 30px;
  }

  .quote-section {
    padding: 14px;
  }

  .quote-product-preview,
  .quote-form,
  .quote-preview-stats {
    grid-template-columns: 1fr;
  }

  .quote-product-preview {
    min-height: 0;
  }

  .quote-preview-media .product-art {
    width: min(100%, 320px);
    margin: 0 auto;
  }

  .quote-flow-row {
    grid-template-columns: 1fr;
  }

  .quote-form-head {
    display: grid;
    align-items: start;
  }

  .quote-form .quote-field-full,
  .quote-form > button[type="submit"],
  .quote-form .quote-form-head,
  .quote-form .ghost-button,
  .quote-form .quote-result {
    grid-column: auto;
  }
}

.upload-progress {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  padding: 10px 12px;
  color: #425064;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.upload-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(24, 160, 88, 0.16), rgba(25, 120, 255, 0.2));
  transition: width 0.22s ease;
}

.upload-progress span {
  position: relative;
  z-index: 1;
}

.file-spec {
  color: #0f68db !important;
  font-weight: 800;
}

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.history-actions button,
.inline-detail-button,
.order-detail-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: #1f2329;
  background: #fff;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.history-actions button:first-child,
.inline-detail-button,
.order-detail-actions button:first-child {
  color: #fff;
  background: #1f2329;
  border-color: #1f2329;
}

.detail-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #eef1f5;
  border-radius: 12px;
}

.detail-config label {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  color: #111827;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.detail-config label:hover {
  border-color: #d9e1eb;
  transform: translateY(-1px);
}

.detail-config input,
.detail-config select {
  width: 100%;
  padding: 0 14px;
}

.product-detail-quote-box .detail-config {
  gap: 10px;
  padding: 12px;
  background: #f3f6fa;
  border-color: #e0e7f0;
  border-radius: 8px;
}

.product-detail-quote-box .detail-config label {
  padding: 10px 12px;
  background: #fff;
  border-color: #dfe7f0;
  border-radius: 8px;
}

.product-detail-quote-box .detail-config input,
.product-detail-quote-box .detail-config select {
  height: 44px;
  min-height: 44px;
  border-radius: 10px;
}

.product-info-config {
  display: grid;
  gap: 9px;
  padding: 2px 0;
}

.product-info-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.product-info-row > strong {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 10px;
  color: #344054;
  background: #f2f4f7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.product-info-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
}

.product-info-controls > select,
.product-info-controls > input[type="number"] {
  width: min(220px, 100%);
  min-height: 42px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 13px;
}

.product-info-controls > select:hover,
.product-info-controls > input[type="number"]:hover {
  border-color: #98a2b3;
}

.product-info-controls > select:focus,
.product-info-controls > input[type="number"]:focus {
  border-color: #f0bd00;
  outline: 3px solid rgba(245, 196, 0, 0.16);
}

.product-info-controls > select:disabled {
  color: #98a2b3;
  background: #f2f4f7;
  cursor: not-allowed;
}

.product-dimensions {
  flex-wrap: nowrap;
}

.product-dimensions > input[type="number"] {
  width: min(180px, calc(50% - 18px));
}

.product-dimensions > span {
  flex: 0 0 auto;
  color: #667085;
  font-weight: 900;
}

.product-info-row .pvc-radio,
.product-info-row .pvc-check {
  white-space: nowrap;
}

.vip-card-materials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.vip-card-materials label {
  min-width: 0;
  cursor: pointer;
}

.vip-card-materials input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vip-card-materials span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 10px;
  color: #475467;
  background: #f2f4f7;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.vip-card-materials label:has(input:checked) span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 5px 12px rgba(185, 145, 0, 0.12);
}

.vip-card-processes select {
  width: min(170px, 100%);
  min-height: 42px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 12px;
}

.vip-card-pricing {
  margin-top: 6px;
}

.single-strip-materials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.neon-poster-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gift-bag-materials {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.label-flag-materials {
  grid-template-columns: minmax(180px, 240px);
}

.label-epoxy-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.label-sticker-card-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.label-diecut-materials {
  grid-template-columns: minmax(180px, 260px);
}

.label-void-materials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 480px;
}

.label-barcode-roll-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.label-thermal-roll-materials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 520px;
}

.label-hologram-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.label-matte-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.book-config-section-title {
  position: relative;
  margin-top: 8px;
  padding: 6px 0 2px 14px;
  color: #101828;
  font-size: 16px;
  font-weight: 900;
}

.book-config-section-title::before {
  position: absolute;
  top: 7px;
  bottom: 3px;
  left: 0;
  width: 4px;
  background: #f2cc0c;
  border-radius: 2px;
  content: "";
}

.book-premium-inner-page + .book-premium-inner-page,
.book-wire-inner-page + .book-wire-inner-page,
.book-saddle-inner-page + .book-saddle-inner-page,
.book-glue-inner-page + .book-glue-inner-page,
.bare-notebook-inner-page + .bare-notebook-inner-page,
.leather-notebook-inner-page + .leather-notebook-inner-page {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #dce3ec;
}

.book-premium-inner-title,
.book-wire-inner-title,
.book-saddle-inner-title,
.book-glue-inner-title,
.bare-notebook-inner-title,
.leather-notebook-inner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.book-premium-inner-title button,
.book-wire-inner-title button,
.book-saddle-inner-title button,
.book-glue-inner-title button,
.bare-notebook-inner-title button,
.leather-notebook-inner-title button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #5d6676;
  background: #f7f9fc;
  border: 1px solid #d5dce6;
  border-radius: 50%;
  place-items: center;
  cursor: pointer;
}

.book-premium-inner-title button:hover,
.book-wire-inner-title button:hover,
.book-saddle-inner-title button:hover,
.book-glue-inner-title button:hover,
.bare-notebook-inner-title button:hover,
.leather-notebook-inner-title button:hover {
  color: #8a6700;
  background: #fff9dc;
  border-color: #e7bd13;
}

.book-add-inner-button {
  display: inline-flex;
  min-height: 42px;
  justify-self: start;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  color: #594500;
  font-weight: 800;
  background: #fff9dc;
  border: 1px solid #e7bd13;
  border-radius: 6px;
  box-shadow: inset 0 -3px 0 #f0c400, 0 5px 12px rgba(185, 145, 0, 0.1);
  cursor: pointer;
}

.book-add-inner-button:hover {
  background: #fff4b8;
}

.book-glue-cover-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.book-glue-cover-title button {
  padding: 3px 7px;
  color: #e5484d;
  font-weight: 700;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.book-glue-cover-title button:hover {
  color: #b42318;
  background: #fff1f0;
}

.book-glue-cover-section.is-removed .book-glue-cover-content {
  display: none;
}

.book-glue-addon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.book-glue-addon-actions [data-book-glue-addon]:not(.is-active) {
  color: #344054;
  background: #fff;
  border-color: #d0d5dd;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06);
}

.book-glue-addon-actions [data-book-glue-addon].is-active {
  color: #594500;
  background: #fff4b8;
  border-color: #e7bd13;
}

.book-layout-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.book-fast-layout-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 430px;
}

.book-contract-layout-options {
  grid-template-columns: minmax(104px, 132px);
  max-width: 132px;
}

.book-gift-box-size {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.book-gift-box-size input {
  width: 100%;
  min-width: 0;
}

.book-gift-box-size span {
  color: #475467;
  font-weight: 800;
}

.book-gift-box-materials {
  grid-template-columns: minmax(170px, 240px);
  max-width: 240px;
}

.tablecloth-materials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 500px;
}

.popup-backdrop-materials {
  grid-template-columns: minmax(180px, 240px);
  max-width: 240px;
}

.popup-backdrop-size > select {
  width: min(180px, 100%);
}

.acrylic-lightbox-styles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.acrylic-lightbox-styles label {
  min-width: 0;
  cursor: pointer;
}

.acrylic-lightbox-styles input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.acrylic-lightbox-styles label > span {
  display: grid;
  grid-template-rows: 100px auto;
  min-height: 134px;
  overflow: hidden;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.acrylic-lightbox-styles img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-bottom: 1px solid #e4e7ec;
}

.acrylic-lightbox-styles b {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 6px;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.acrylic-lightbox-styles label:hover > span {
  border-color: #d8b51c;
  box-shadow: 0 5px 12px rgba(152, 116, 0, 0.09);
}

.acrylic-lightbox-styles label:has(input:checked) > span {
  color: #604800;
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 6px 14px rgba(185, 145, 0, 0.12);
}

.acrylic-lightbox-materials {
  grid-template-columns: repeat(2, minmax(160px, 190px));
  max-width: 390px;
}

.solar-lightbox-styles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 430px;
}

.solar-lightbox-materials {
  grid-template-columns: minmax(180px, 220px);
  max-width: 220px;
}

.display-stack-materials {
  grid-template-columns: repeat(2, minmax(150px, 180px));
  max-width: 370px;
}

.flag-materials {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flag-sewing-controls > select {
  width: min(120px, 100%);
}

.vintage-flag-materials {
  grid-template-columns: repeat(3, minmax(150px, 180px));
  max-width: 560px;
}

.vintage-flag-sewing-controls > select {
  width: min(120px, 100%);
}

.badge-pin-materials {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.frameless-canvas-materials {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.table-display-materials {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.table-display-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.2fr) minmax(190px, 1.6fr);
}

.table-display-pricing .digital-custom-quantity {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

.photo-album-config > .photo-album-section-title:first-child {
  margin-top: 0;
}

.photo-album-config > .photo-album-section-title:not(:first-child) {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #dfe6ef;
}

.photo-album-config > .photo-album-section-title:not(:first-child)::before {
  top: 13px;
}

.photo-album-spine-controls select {
  width: min(180px, 100%);
}

.photo-album-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.chopstick-sleeve-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(70px, 1fr));
}

.takeout-bag-materials {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  max-width: 520px;
}

.takeout-bag-process-controls > select {
  width: min(150px, 100%);
}

.takeout-bag-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(70px, 1fr));
}

.playing-cards-section-title:first-child {
  margin-top: 0;
}

.playing-cards-core-materials {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  max-width: 520px;
}

.playing-cards-single-option {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.playing-cards-process-controls > select {
  width: min(160px, 100%);
}

.playing-cards-disabled {
  color: #98a2b3;
  cursor: not-allowed;
}

.playing-cards-large-box {
  min-width: 0;
}

.playing-cards-large-box > summary {
  list-style: none;
}

.playing-cards-large-box > summary::-webkit-details-marker {
  display: none;
}

.playing-cards-large-box[open] > summary {
  margin-bottom: 10px;
}

.playing-cards-large-box-panel {
  display: grid;
  gap: 9px;
  padding: 4px 12px 12px;
  background: #f8fafc;
  border: 1px solid #dce3ec;
  border-radius: 6px;
}

.playing-cards-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.anime-pet-card-premium-materials {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.anime-pet-card-premium-size-controls > select,
.anime-pet-card-premium-process-controls > select {
  width: min(170px, 100%);
}

.anime-pet-card-premium-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(52px, 1fr));
}

.anime-metal-magnet-select > select {
  width: min(180px, 100%);
}

.anime-metal-magnet-dimensions {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr) auto minmax(170px, 1.4fr);
  align-items: center;
  gap: 8px;
  width: min(620px, 100%);
}

.anime-metal-magnet-dimensions > input {
  width: 100%;
  min-width: 0;
}

.anime-metal-magnet-dimensions > span {
  color: #344054;
  font-weight: 800;
}

.anime-metal-magnet-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(52px, 1fr));
}

.anime-canvas-bag-materials {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.anime-canvas-bag-materials span {
  min-height: 46px;
  padding: 8px 10px;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
}

.anime-canvas-bag-size-controls > select {
  width: min(220px, 100%);
}

.anime-canvas-bag-rope-controls > select {
  width: min(150px, 100%);
}

.anime-canvas-bag-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(48px, 1fr));
}

@media (max-width: 640px) {
  .anime-metal-magnet-dimensions {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .anime-metal-magnet-dimensions > input:last-child {
    grid-column: 1 / -1;
  }

  .anime-metal-magnet-dimensions > span:nth-of-type(2) {
    display: none;
  }

  .anime-canvas-bag-materials {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 420px) {
  .anime-canvas-bag-materials {
    grid-template-columns: 1fr;
  }
}

.paper-cup-materials {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.paper-cup-process-controls > select {
  width: min(150px, 100%);
}

.paper-cup-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.bed-runner-materials {
  grid-template-columns: minmax(170px, 220px);
  max-width: 220px;
}

.bed-runner-process-controls > select {
  width: min(150px, 100%);
}

.bed-runner-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.leather-coaster-material-controls > select {
  width: min(180px, 100%);
}

.leather-coaster-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.2fr) minmax(190px, 1.6fr);
}

.leather-coaster-pricing .digital-custom-quantity {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

@media (max-width: 640px) {
  .leather-coaster-pricing .digital-quantity-options {
    grid-template-columns: 1fr;
  }

  .leather-coaster-pricing .digital-custom-quantity {
    grid-column: 1;
  }
}

.pocket-tissue-select > select {
  width: min(220px, 100%);
}

.pocket-tissue-core-controls > select {
  width: min(130px, 100%);
}

.pocket-tissue-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(2, minmax(72px, 1fr));
}

.frameless-canvas-accessories > select {
  width: min(150px, 100%);
}

.frameless-canvas-accessories > input[type="number"] {
  width: min(120px, 100%);
}

.business-bag-materials {
  grid-template-columns: repeat(2, minmax(170px, 220px));
  max-width: 450px;
}

.business-bag-sizes {
  grid-template-columns: repeat(3, minmax(150px, 190px));
  max-width: 590px;
}

.business-bag-rope-controls > select {
  width: min(120px, 100%);
}

.composite-bag-styles {
  grid-template-columns: repeat(2, minmax(150px, 180px));
  max-width: 370px;
}

.composite-bag-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.composite-bag-inline-selects > select {
  width: min(145px, 100%);
}

.felt-bag-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paper-bag-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paper-bag-inline-selects > select {
  width: min(130px, 100%);
}

.apron-inline-selects > select {
  width: min(140px, 100%);
}

.tote-bag-inline-selects > select {
  width: min(145px, 100%);
}

.frosted-box-inline-selects > select {
  width: min(180px, 100%);
}

.frosted-box-dimensions {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 8px;
  width: min(590px, 100%);
}

.frosted-box-dimensions input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  .flag-materials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .acrylic-lightbox-styles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solar-lightbox-styles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.tablecloth-size input {
  width: 100%;
  min-width: 0;
}

.tablecloth-size span {
  color: #475467;
  font-weight: 800;
}

.floor-sticker-materials {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.floor-sticker-materials label {
  min-width: 0;
  cursor: pointer;
}

.floor-sticker-materials input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.floor-sticker-materials label > span {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  color: #344054;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.floor-sticker-materials img {
  width: 44px;
  height: 34px;
  object-fit: cover;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
}

.floor-sticker-materials b {
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.floor-sticker-materials label:hover > span {
  border-color: #d8b51c;
  box-shadow: 0 4px 10px rgba(152, 116, 0, 0.08);
}

.floor-sticker-materials label:has(input:checked) > span {
  color: #604800;
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 5px 12px rgba(185, 145, 0, 0.1);
}

.floor-sticker-size {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  max-width: 500px;
}

.floor-sticker-size input {
  width: 100%;
  min-width: 0;
}

.floor-sticker-size span {
  color: #475467;
  font-weight: 800;
}

@media (max-width: 900px) {
  .floor-sticker-materials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .floor-sticker-materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.book-layout-options label {
  min-width: 0;
  cursor: pointer;
}

.book-layout-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.book-layout-options label > span {
  display: grid;
  min-height: 134px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 12px 8px;
  color: #475467;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.book-layout-options label:has(input:checked) > span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 6px 14px rgba(185, 145, 0, 0.12);
}

.sticky-notes-layout-options {
  grid-template-columns: minmax(120px, 150px);
  max-width: 150px;
}

.sticky-notes-inline-selects > select {
  width: min(150px, 100%);
}

.sticky-notes-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(52px, 1fr));
}

.bare-notebook-size-controls > select {
  width: min(210px, 100%);
}

.bare-notebook-custom-size {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 8px;
  width: min(310px, 100%);
}

.bare-notebook-custom-size[hidden] {
  display: none;
}

.bare-notebook-custom-size input {
  width: 100%;
  min-width: 0;
}

.bare-notebook-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(58px, 1fr));
}

.document-sleeve-config {
  gap: 11px;
}

.document-sleeve-options {
  display: grid;
  grid-template-columns: minmax(180px, 240px);
  width: min(240px, 100%);
}

.document-sleeve-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.document-sleeve-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.document-sleeve-options span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 6px 12px;
  color: #475467;
  background: #f5f6f8;
  border: 1px solid #e1e5eb;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.document-sleeve-options label:hover span {
  color: #1f2937;
  background: #fffdf2;
  border-color: #e8ca52;
  transform: translateY(-1px);
}

.document-sleeve-options input:checked + span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #f0c400;
  box-shadow: inset 0 -3px 0 #f5c400, 0 6px 14px rgba(196, 150, 0, 0.12);
}

.document-sleeve-options input:focus-visible + span {
  outline: 3px solid rgba(245, 196, 0, 0.38);
  outline-offset: 2px;
}

.document-sleeve-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.paper-sleeve-config {
  gap: 11px;
}

.paper-sleeve-material-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 190px));
  gap: 8px;
}

.paper-sleeve-size-controls,
.paper-sleeve-process-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.paper-sleeve-size-controls > select {
  width: min(210px, 100%);
}

.paper-sleeve-custom-size {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr) auto minmax(82px, 1fr);
  align-items: center;
  gap: 6px;
  width: min(390px, 100%);
}

.paper-sleeve-custom-size[hidden] {
  display: none;
}

.paper-sleeve-custom-size input {
  width: 100%;
  min-width: 0;
}

.paper-sleeve-process-controls > select {
  width: min(130px, 100%);
}

.paper-sleeve-foil-list {
  display: grid;
  gap: 7px;
}

.paper-sleeve-foil-area {
  display: grid;
  grid-template-columns: 108px repeat(2, minmax(92px, 120px)) 32px;
  align-items: center;
  gap: 6px;
}

.paper-sleeve-foil-area select,
.paper-sleeve-foil-area input {
  width: 100%;
  min-width: 0;
}

.paper-sleeve-foil-area button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: #fff;
  background: #1677ff;
  border: 0;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.paper-sleeve-foil-area button:hover {
  background: #095fc7;
  box-shadow: 0 5px 12px rgba(22, 119, 255, 0.24);
}

.paper-sleeve-foil-area button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.paper-sleeve-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.book-brick-config {
  gap: 11px;
}

.book-brick-material-options {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  max-width: 370px;
}

.book-brick-layout-options {
  grid-template-columns: minmax(110px, 132px);
  max-width: 132px;
}

.book-brick-layout-preview {
  position: relative;
  display: block;
  width: 62px;
  height: 48px;
}

.book-brick-layout-preview::before,
.book-brick-layout-preview::after {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 30px;
  background: #fff;
  border: 2px solid #c7ccd4;
  border-radius: 2px;
  content: "";
}

.book-brick-layout-preview::before {
  top: 4px;
  box-shadow: 0 5px 0 #fff, 0 7px 0 #c7ccd4, 0 12px 0 #fff, 0 14px 0 #c7ccd4;
}

.book-brick-layout-preview::after {
  top: 0;
  height: 7px;
  background: repeating-linear-gradient(90deg, #c7ccd4 0 4px, #fff 4px 7px);
}

.book-brick-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.office-contract-book-config {
  gap: 11px;
}

.office-contract-material-options {
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  max-width: 370px;
}

.office-contract-layout-options {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  max-width: 500px;
}

.office-contract-cycle-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.office-contract-cycle-controls > input[type="text"] {
  width: min(130px, 100%);
}

.office-contract-book-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.envelope-sleeve-config {
  gap: 11px;
}

.envelope-sleeve-material-options {
  grid-template-columns: repeat(5, minmax(105px, 1fr));
}

.envelope-sleeve-size-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.envelope-sleeve-size-controls > select {
  width: min(230px, 100%);
}

.envelope-sleeve-custom-size {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr) auto minmax(82px, 1fr);
  align-items: center;
  gap: 6px;
  width: min(410px, 100%);
}

.envelope-sleeve-custom-size[hidden] {
  display: none;
}

.envelope-sleeve-custom-size input {
  width: 100%;
  min-width: 0;
}

.envelope-sleeve-layout-options {
  grid-template-columns: repeat(3, minmax(98px, 1fr));
  max-width: 390px;
}

.envelope-sleeve-layout-preview {
  position: relative;
  display: block;
  width: 58px;
  height: 70px;
}

.envelope-sleeve-layout-preview::before {
  position: absolute;
  inset: 5px 8px;
  background: linear-gradient(180deg, #fff 0 72%, #f0f2f5 72% 100%);
  border: 2px solid #c7ccd4;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(152, 162, 179, 0.16);
  content: "";
}

.envelope-sleeve-layout-preview::after {
  position: absolute;
  top: 8px;
  left: 17px;
  width: 23px;
  height: 23px;
  background: #fff;
  border-right: 2px solid #c7ccd4;
  border-bottom: 2px solid #c7ccd4;
  transform: rotate(45deg);
  content: "";
}

.envelope-sleeve-layout-preview[data-layout="竖版左翻"]::after {
  top: 23px;
  left: 3px;
  transform: rotate(-45deg);
}

.envelope-sleeve-layout-preview[data-layout="横版上翻"] {
  width: 70px;
  height: 58px;
}

.envelope-sleeve-layout-preview[data-layout="横版上翻"]::before {
  inset: 8px 5px;
}

.envelope-sleeve-layout-preview[data-layout="横版上翻"]::after {
  top: 8px;
  left: 23px;
}

.envelope-sleeve-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.chinese-envelope-config {
  gap: 11px;
}

.chinese-envelope-materials {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chinese-envelope-materials label > span {
  grid-template-columns: minmax(0, 1fr);
  min-height: 42px;
  place-items: center;
  padding: 6px 10px;
  text-align: center;
}

.chinese-envelope-materials b {
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
}

.chinese-envelope-dimensions > input[type="number"] {
  flex: 1 1 105px;
  width: min(142px, calc(33.333% - 22px));
}

.chinese-envelope-inline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.chinese-envelope-inline-controls > select {
  width: min(150px, 100%);
}

.chinese-envelope-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.handwritten-receipt-config {
  gap: 11px;
}

.handwritten-receipt-materials {
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  max-width: 560px;
}

.receipt-section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.receipt-section-title button {
  padding: 0;
  color: #ff4d4f;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.receipt-copy-controls,
.handwritten-receipt-size-controls,
.handwritten-receipt-code-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 18px;
}

.handwritten-receipt-size-controls > select {
  width: min(220px, 100%);
}

.handwritten-receipt-custom-size {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 6px;
  width: min(300px, 100%);
}

.handwritten-receipt-custom-size[hidden],
.handwritten-receipt-cover-section[hidden],
.handwritten-receipt-flyleaf-section[hidden],
.handwritten-receipt-add-button[hidden] {
  display: none;
}

.handwritten-receipt-custom-size input {
  width: 100%;
  min-width: 0;
}

.handwritten-receipt-layout-options {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  max-width: 500px;
}

.handwritten-receipt-code-controls select,
.handwritten-receipt-code-controls input[type="number"] {
  width: min(120px, 100%);
}

.handwritten-receipt-cover-section,
.handwritten-receipt-flyleaf-section {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid #e1e7ef;
}

.handwritten-receipt-add-button {
  justify-self: start;
  min-height: 38px;
  padding: 0 16px;
  color: #fff;
  background: #343434;
  border: 0;
  border-radius: 5px;
  font-weight: 850;
  cursor: pointer;
}

.handwritten-receipt-add-button:hover {
  background: #4b4b4b;
  box-shadow: 0 5px 12px rgba(17, 24, 39, 0.14);
}

.handwritten-receipt-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.anime-ticket-book-material-controls > select {
  flex: 1 1 170px;
  width: min(220px, 100%);
}

.anime-ticket-book-size-controls {
  align-items: center;
}

.anime-ticket-book-custom-size {
  display: flex;
  flex: 1 1 250px;
  align-items: center;
  gap: 6px;
  max-width: 300px;
}

.anime-ticket-book-custom-size[hidden] {
  display: none;
}

.anime-ticket-book-custom-size input {
  min-width: 0;
  width: 100%;
}

.anime-ticket-book-layout-options {
  grid-template-columns: repeat(5, minmax(78px, 1fr));
  max-width: 680px;
}

.anime-ticket-book-process-controls select {
  width: min(120px, 100%);
}

.anime-ticket-book-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.anime-pet-card-material-controls > select {
  flex: 1 1 170px;
  width: min(220px, 100%);
}

.anime-pet-card-size-controls,
.anime-pet-card-cut-controls {
  align-items: center;
}

.anime-pet-card-custom-size {
  display: flex;
  flex: 1 1 250px;
  align-items: center;
  gap: 6px;
  max-width: 300px;
}

.anime-pet-card-custom-size[hidden] {
  display: none;
}

.anime-pet-card-custom-size input {
  min-width: 0;
  width: 100%;
}

.anime-pet-card-cut-controls select {
  width: min(190px, 100%);
}

.anime-pet-card-pricing .digital-quantity-options,
.season-folding-round-fan-pricing .digital-quantity-options,
.season-classic-round-fan-pricing .digital-quantity-options,
.season-round-fan-pricing .digital-quantity-options,
.season-rice-paper-round-fan-pricing .digital-quantity-options,
.season-folding-fan-pricing .digital-quantity-options,
.season-pp-fan-pricing .digital-quantity-options {
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
}

.season-round-fan-handle-controls {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.season-round-fan-handle-controls > div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.season-round-fan-handle-controls > div > span {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 0 10px;
  color: #667085;
  background: #f2f4f7;
  border-radius: 4px;
  font-size: 12px;
}

.season-round-fan-handle-controls .product-info-controls {
  min-height: 34px;
}

.season-round-fan-print-controls > select {
  width: min(180px, 100%);
}

.season-rice-paper-round-fan-material-controls > select {
  width: min(230px, 100%);
}

.season-rice-paper-round-fan-print-controls > select {
  width: min(180px, 100%);
}

.season-rice-paper-round-fan-accessory-controls > select {
  width: min(120px, 100%);
}

.season-folding-fan-size-controls > select {
  width: min(220px, 100%);
}

.season-folding-fan-print-controls > select {
  width: min(180px, 100%);
}

.season-pp-fan-pricing .digital-card-pricing-head small {
  margin-left: 8px;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
}

.season-pp-fan-handle-controls {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.season-pp-fan-handle-controls > div {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.season-pp-fan-handle-controls > div > span {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 0 10px;
  color: #667085;
  background: #f2f4f7;
  border-radius: 4px;
  font-size: 12px;
}

.season-pp-fan-handle-controls .product-info-controls {
  min-height: 34px;
}

.pp-fan-materials {
  display: grid;
  grid-template-columns: minmax(150px, 175px);
  width: min(175px, 100%);
}

.pp-fan-materials label {
  position: relative;
  cursor: pointer;
}

.pp-fan-materials input,
.pp-fan-style-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pp-fan-materials span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 12px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  border-radius: 4px;
  font-weight: 800;
}

.pp-fan-style-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(86px, 102px));
  gap: 10px;
  min-width: 0;
}

.pp-fan-style-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.pp-fan-style-options label > span {
  position: relative;
  display: grid;
  grid-template-rows: 100px 34px;
  min-height: 134px;
  overflow: hidden;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
}

.pp-fan-style-options label:has(input:checked) > span {
  color: #111827;
  border-color: #333;
  box-shadow: inset 0 0 0 1px #333;
}

.pp-fan-style-options label:has(input:checked) > span::after {
  content: "✓";
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: end;
  padding: 0 2px 1px 0;
  color: #fff;
  background: linear-gradient(135deg, transparent 0 49%, #333 50% 100%);
  font-size: 11px;
  line-height: 1;
}

.pp-fan-style-options i {
  position: relative;
  display: grid;
  min-height: 100px;
  place-items: center;
  color: #667085;
  background: #fafafa;
  border-bottom: 1px solid #eaecf0;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
}

.pp-fan-style-options i:not([data-pp-fan-style="其他异形"])::before,
.pp-fan-style-options i:not([data-pp-fan-style="其他异形"])::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid #d9dce1;
}

.pp-fan-style-options i:not([data-pp-fan-style="其他异形"])::before {
  top: 17px;
  z-index: 1;
  width: 40px;
  height: 42px;
  border-radius: 48% 48% 32% 32%;
}

.pp-fan-style-options i:not([data-pp-fan-style="其他异形"])::after {
  top: 54px;
  width: 8px;
  height: 30px;
  border-radius: 0 0 2px 2px;
}

.pp-fan-style-options i[data-pp-fan-style="圆形扇"]::before {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.pp-fan-style-options i[data-pp-fan-style="花形扇"]::before {
  width: 44px;
  height: 44px;
  border-radius: 38% 62% 42% 58% / 58% 42% 58% 42%;
  transform: translateX(-50%) rotate(45deg);
}

.pp-fan-style-options i[data-pp-fan-style="熊猫扇"]::before {
  width: 43px;
  height: 39px;
  border-radius: 46% 46% 40% 40%;
  box-shadow: -14px -8px 0 -10px #fff, 14px -8px 0 -10px #fff;
}

.pp-fan-style-options b {
  display: grid;
  min-height: 34px;
  place-items: center;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}

.season-pp-fan-size-controls > select {
  width: min(176px, 100%);
}

.season-pp-fan-custom-size {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 6px;
  max-width: 300px;
}

.season-pp-fan-custom-size[hidden] {
  display: none;
}

.season-pp-fan-custom-size input {
  min-width: 0;
  width: 100%;
}

.season-pp-fan-print-controls > select {
  width: min(180px, 100%);
}

.season-rice-paper-couplet-section-title,
.season-adhesive-couplet-section-title {
  margin-top: 12px;
  margin-bottom: 6px;
}

.season-rice-paper-couplet-section-title:first-child,
.season-adhesive-couplet-section-title:first-child {
  margin-top: 0;
}

.season-rice-paper-couplet-config .product-info-controls > select {
  width: min(180px, 100%);
}

.season-rice-paper-couplet-materials,
.season-adhesive-couplet-materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 175px));
  gap: 10px;
  min-width: 0;
}

.season-rice-paper-couplet-materials label,
.season-adhesive-couplet-materials label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.season-rice-paper-couplet-materials input,
.season-adhesive-couplet-materials input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.season-rice-paper-couplet-materials span,
.season-adhesive-couplet-materials span {
  display: block;
  min-height: 42px;
  padding: 11px 12px;
  overflow: hidden;
  color: #667085;
  background: #f2f4f7;
  border: 1px solid #f2f4f7;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-rice-paper-couplet-materials input:checked + span,
.season-adhesive-couplet-materials input:checked + span {
  color: #fff;
  background: #333;
  border-color: #333;
}

.season-adhesive-couplet-size-controls > select {
  width: min(180px, 100%);
}

.season-adhesive-couplet-custom-size {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: 6px;
  max-width: 300px;
}

.season-adhesive-couplet-custom-size[hidden] {
  display: none;
}

.season-adhesive-couplet-custom-size input {
  min-width: 0;
  width: 100%;
}

.season-adhesive-couplet-quantity {
  display: grid;
  grid-template-columns: minmax(125px, 140px) minmax(150px, 180px);
  gap: 8px;
  max-width: 330px;
  min-width: 0;
}

.season-adhesive-couplet-quantity > span,
.season-adhesive-couplet-quantity > label {
  display: grid;
  min-height: 42px;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 850;
}

.season-adhesive-couplet-quantity > label {
  position: relative;
  padding: 0;
}

.season-adhesive-couplet-quantity > label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.season-adhesive-couplet-quantity input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: #344054;
  background: transparent;
  border: 0;
  outline: 0;
}

.season-bamboo-lantern-materials {
  display: grid;
  grid-template-columns: minmax(150px, 175px);
  width: min(175px, 100%);
}

.season-bamboo-lantern-materials label {
  position: relative;
  cursor: pointer;
}

.season-bamboo-lantern-materials input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.season-bamboo-lantern-materials span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 12px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  border-radius: 4px;
  font-weight: 800;
}

.season-bamboo-lantern-size-controls > select {
  width: min(180px, 100%);
}

.season-bamboo-lantern-style-controls > select {
  width: min(120px, 100%);
}

.season-bamboo-lantern-pricing .digital-card-pricing-head span b {
  color: #29a44d;
  font-weight: 900;
}

.anime-borderless-board-materials,
.anime-bordered-board-materials {
  display: grid;
  grid-template-columns: minmax(150px, 175px);
  width: min(175px, 100%);
}

.anime-borderless-board-materials label,
.anime-bordered-board-materials label {
  position: relative;
  cursor: pointer;
}

.anime-borderless-board-materials input,
.anime-bordered-board-materials input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.anime-borderless-board-materials span,
.anime-bordered-board-materials span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 12px;
  color: #fff;
  background: #333;
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.anime-borderless-board-materials label:has(input:focus-visible) span,
.anime-bordered-board-materials label:has(input:focus-visible) span {
  outline: 3px solid rgba(245, 196, 0, 0.38);
  outline-offset: 2px;
}

.anime-borderless-board-finish-controls > select,
.anime-borderless-board-other-controls > select,
.anime-bordered-board-finish-controls > select,
.anime-bordered-board-other-controls > select {
  width: min(150px, 100%);
}

.anime-bordered-board-pricing {
  margin-top: 10px;
}

.anime-bordered-board-pricing .digital-card-pricing-head span b {
  color: #29a44d;
  font-weight: 900;
}

.anime-bordered-board-quantity {
  display: grid;
  grid-template-columns: minmax(125px, 1fr) minmax(150px, 1.2fr) minmax(100px, 120px);
  gap: 8px;
  min-width: 0;
}

.anime-bordered-board-quantity > span,
.anime-bordered-board-quantity > label,
.anime-bordered-board-quantity > button {
  display: grid;
  min-height: 42px;
  place-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 850;
}

.anime-bordered-board-quantity > label {
  position: relative;
  padding: 0;
}

.anime-bordered-board-quantity > label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.anime-bordered-board-quantity input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  color: #344054;
  background: transparent;
  border: 0;
  outline: 0;
}

.anime-bordered-board-quantity > button {
  color: #fff;
  background: #333;
  border-color: #333;
  cursor: pointer;
}

.anime-bordered-board-quantity > button:hover {
  background: #1f2937;
}

.book-layout-preview {
  position: relative;
  display: block;
  width: 44px;
  height: 58px;
  background: #fff;
  border: 2px solid #c7ccd4;
  border-radius: 2px 5px 5px 2px;
}

.book-layout-preview::before {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 7px;
  background: #d5d8de;
  content: "";
}

.book-layout-preview[data-layout^="横版"] {
  width: 58px;
  height: 44px;
}

.book-layout-preview[data-layout$="上翻"] {
  border-radius: 2px 2px 5px 5px;
}

.book-layout-preview[data-layout$="上翻"]::before {
  top: 4px;
  right: 4px;
  bottom: auto;
  left: 4px;
  width: auto;
  height: 7px;
}

.book-layout-preview[data-layout="不刷胶"] {
  width: 46px;
  height: 56px;
  border-radius: 3px;
  box-shadow: 4px 4px 0 -1px #eef0f3, 7px 7px 0 -2px #d5d8de;
}

.book-layout-preview[data-layout="不刷胶"]::before {
  top: auto;
  right: 5px;
  bottom: 5px;
  left: 5px;
  width: auto;
  height: 1px;
  background: #c7ccd4;
  box-shadow: 0 -4px 0 #e1e4e8, 0 -8px 0 #eef0f3;
}

@media (max-width: 720px) {
  .anime-pet-card-pricing .digital-quantity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anime-pet-card-pricing .digital-quantity-options > span,
  .anime-pet-card-pricing .digital-custom-quantity {
    grid-column: 1 / -1;
  }

  .anime-ticket-book-layout-options {
    grid-template-columns: repeat(2, minmax(96px, 1fr));
  }

  .anime-ticket-book-pricing .digital-quantity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anime-ticket-book-pricing .digital-quantity-options > span,
  .anime-ticket-book-pricing .digital-custom-quantity {
    grid-column: 1 / -1;
  }
}

/* Product category navigation icons: stable CSS line art instead of font glyphs. */
#categoryBar .category-chip .cat-icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  color: #344052;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#categoryBar .category-chip:hover .cat-icon,
#categoryBar .category-chip.active .cat-icon,
#categoryBar .category-chip[aria-pressed="true"] .cat-icon {
  color: #111827;
  background: transparent;
}

#categoryBar .category-chip .cat-icon::before,
#categoryBar .category-chip .cat-icon::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  color: inherit;
  font-size: 0;
  transform: none;
}

/* 名片 / 卡片 */
#categoryBar .cat-card::before {
  inset: 4px 2px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
}

#categoryBar .cat-card::after {
  left: 6px;
  top: 8px;
  width: 8px;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

/* 单张 */
#categoryBar .cat-sheet::before {
  left: 5px;
  top: 2px;
  width: 13px;
  height: 18px;
  border: 1.7px solid currentColor;
  border-radius: 2px 4px 2px 2px;
}

#categoryBar .cat-sheet::after {
  right: 4px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-left: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  border-bottom-left-radius: 2px;
  background: #fff;
}

/* 标签 / 不干胶 */
#categoryBar .cat-label::before {
  left: 4px;
  top: 5px;
  width: 14px;
  height: 12px;
  border: 1.7px solid currentColor;
  border-radius: 3px 5px 5px 3px;
  transform: rotate(-35deg);
}

#categoryBar .cat-label::after {
  left: 7px;
  top: 7px;
  width: 3px;
  height: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* 书籍画册 */
#categoryBar .cat-book::before {
  left: 2px;
  top: 4px;
  width: 18px;
  height: 15px;
  border: 1.7px solid currentColor;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(90deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%);
}

#categoryBar .cat-book::after {
  left: 6px;
  top: 7px;
  width: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor, 0 4px 0 currentColor, 7px 4px 0 currentColor;
}

/* 广告物料 */
#categoryBar .cat-ad::before {
  left: 4px;
  top: 2px;
  width: 14px;
  height: 13px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(135deg, transparent 46%, currentColor 47%, currentColor 53%, transparent 54%);
}

#categoryBar .cat-ad::after {
  left: 7px;
  bottom: 2px;
  width: 8px;
  height: 6px;
  border-bottom: 1.7px solid currentColor;
  background:
    linear-gradient(105deg, transparent 43%, currentColor 45%, currentColor 54%, transparent 56%) left / 50% 100% no-repeat,
    linear-gradient(75deg, transparent 43%, currentColor 45%, currentColor 54%, transparent 56%) right / 50% 100% no-repeat;
}

/* 包装周边 */
#categoryBar .cat-box::before {
  left: 3px;
  top: 5px;
  width: 16px;
  height: 14px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(30deg, transparent 47%, currentColor 48%, currentColor 52%, transparent 53%),
    linear-gradient(-30deg, transparent 47%, currentColor 48%, currentColor 52%, transparent 53%);
}

#categoryBar .cat-box::after {
  left: 10px;
  top: 9px;
  width: 1.7px;
  height: 10px;
  background: currentColor;
}

/* 办公用品 */
#categoryBar .cat-office::before {
  inset: 3px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 50% 33% / 12px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 66% / 12px 1.4px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) 33% 50% / 1.4px 12px no-repeat,
    linear-gradient(90deg, currentColor, currentColor) 66% 50% / 1.4px 12px no-repeat;
}

#categoryBar .cat-office::after {
  display: none;
}

/* 家居日常 */
#categoryBar .cat-home::before {
  left: 5px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-left: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  border-radius: 2px 0 0;
  transform: rotate(45deg);
}

#categoryBar .cat-home::after {
  left: 5px;
  bottom: 2px;
  width: 13px;
  height: 11px;
  border: 1.8px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(90deg, transparent 42%, currentColor 43%, currentColor 57%, transparent 58%) center bottom / 6px 7px no-repeat;
}

/* 动漫文创 */
#categoryBar .cat-spark::before {
  inset: 2px;
  background: currentColor;
  clip-path: polygon(50% 0, 59% 38%, 100% 50%, 59% 62%, 50% 100%, 41% 62%, 0 50%, 41% 38%);
}

#categoryBar .cat-spark::after {
  right: 1px;
  top: 2px;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg);
  background: #fff;
}

/* 季节产品 */
#categoryBar .cat-season::before {
  left: 3px;
  top: 4px;
  width: 16px;
  height: 15px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) center 4px / 100% 1.5px no-repeat;
}

#categoryBar .cat-season::after {
  left: 7px;
  top: 11px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 4px 0 0 currentColor, 8px 0 0 currentColor;
}

/* 现货 / 样品 */
#categoryBar .cat-sample::before {
  left: 4px;
  top: 3px;
  width: 13px;
  height: 16px;
  border: 1.7px solid currentColor;
  border-radius: 2px;
  background: #fff;
  box-shadow: 3px -2px 0 -1px #fff, 3px -2px 0 0 currentColor;
}

#categoryBar .cat-sample::after {
  left: 7px;
  top: 8px;
  width: 7px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.product-info-controls > select.is-invalid {
  border-color: #ff4d4f;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.08);
}

.product-field-error {
  flex-basis: 100%;
  margin-top: -6px;
  color: #ff4d4f;
  font-size: 11px;
}

.single-manual-config .digital-material-controls > select {
  flex: 1 1 180px;
  width: min(230px, 100%);
}

.single-manual-fold-controls select {
  width: min(150px, 100%);
  min-height: 42px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 12px;
}

@media (max-width: 640px) {
  .vip-card-materials,
  .single-strip-materials,
  .neon-poster-materials,
  .gift-bag-materials,
  .label-flag-materials,
  .label-epoxy-materials,
  .label-sticker-card-materials,
  .label-diecut-materials,
  .label-void-materials,
  .label-barcode-roll-materials,
  .label-thermal-roll-materials,
  .label-hologram-materials,
  .label-matte-materials,
  .handwritten-receipt-materials,
  .handwritten-receipt-layout-options,
  .book-layout-options {
    grid-template-columns: 1fr;
  }

  .handwritten-receipt-pricing .digital-quantity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pvc-punch-config {
  display: grid;
  gap: 10px;
}

.pvc-punch-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.pvc-punch-row > strong {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 10px;
  color: #344054;
  background: #f2f4f7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.pvc-punch-materials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pvc-punch-materials label,
.pvc-punch-choice-grid label {
  min-width: 0;
  cursor: pointer;
}

.pvc-punch-materials input,
.pvc-punch-choice-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pvc-punch-materials label > span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 4px 8px 4px 4px;
  color: #344054;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(31, 41, 55, 0.05);
}

.pvc-punch-materials img {
  width: 42px;
  height: 40px;
  object-fit: cover;
  background: #eef2f6;
  border-radius: 4px;
}

.pvc-punch-materials b {
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pvc-punch-materials label:has(input:checked) > span,
.pvc-punch-choice-grid label:has(input:checked) > span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 5px 12px rgba(185, 145, 0, 0.12);
}

.pvc-punch-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pvc-punch-choice-grid label > span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 10px;
  color: #667085;
  background: #f4f6f8;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.pvc-punch-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
  min-height: 42px;
}

.pvc-punch-controls select,
.pvc-punch-controls input[type="number"] {
  width: min(180px, 100%);
  min-height: 42px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 12px;
}

.pvc-punch-controls input[type="number"] {
  width: min(180px, 100%);
}

.pvc-punch-controls .pvc-radio,
.pvc-punch-controls .pvc-check {
  white-space: nowrap;
}

.pvc-punch-pricing {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .pvc-punch-row {
    grid-template-columns: 1fr;
  }

  .pvc-punch-row > strong {
    justify-items: start;
  }

  .pvc-punch-materials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .pvc-punch-materials,
  .pvc-punch-choice-grid {
    grid-template-columns: 1fr;
  }
}

.product-detail-copy.is-stock-product {
  align-self: start;
  gap: 13px;
  padding: 22px 58px 22px 22px;
  background: #fff;
  border-color: #dce4ee;
  box-shadow: 0 20px 44px rgba(22, 32, 45, 0.11), inset 0 1px 0 #fff;
}

.is-stock-product .product-detail-title {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.is-stock-product .product-detail-title .eyebrow {
  color: #ff6128;
  font-size: 15px;
}

.is-stock-product .product-detail-title h2 {
  color: #111827;
  font-size: 21px;
  line-height: 1.45;
}

.is-stock-product .product-detail-title p {
  color: #667085;
  font-size: 14px;
  line-height: 1.7;
}

.is-stock-product .stock-product-quote-box {
  gap: 12px;
  padding: 14px;
  background: #fbfcfe;
  border-color: #d8e1ec;
  border-radius: 8px;
  box-shadow: 0 9px 20px rgba(41, 50, 62, 0.08), inset 0 1px 0 #fff;
}

.is-stock-product .product-detail-quote-head {
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e6eb;
}

.stock-purchase-config {
  display: grid;
  gap: 18px;
}

.stock-price-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #f3f6f9;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(47, 55, 65, 0.07);
}

.stock-price-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.stock-price-card dl div {
  display: grid;
  gap: 5px;
}

.stock-price-card dt {
  color: #5d6674;
  font-size: 12px;
  font-weight: 800;
}

.stock-price-card dd {
  margin: 0;
  color: #232b36;
}

.stock-price-card dd strong {
  color: #e52323;
  font-size: 22px;
  font-weight: 1000;
}

.stock-price-card dd b {
  font-size: 18px;
}

.stock-price-card dd small {
  color: #7c8591;
  font-size: 12px;
}

.stock-price-card > span {
  padding: 7px 11px;
  color: #276749;
  background: #e2f3e9;
  border: 1px solid #c4e4d1;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.stock-style-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.stock-style-card > strong,
.stock-quantity-card > strong {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: #495261;
  font-size: 13px;
  font-weight: 900;
}

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

.stock-style-options button {
  min-height: 40px;
  padding: 0 14px;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(40, 49, 60, 0.05), inset 0 1px 0 #fff;
}

.stock-style-options button.active {
  background: #fff9dc;
  border-color: #e7bd13;
  box-shadow: inset 0 -3px 0 #f0c400, 0 5px 12px rgba(185, 145, 0, 0.12);
}

.stock-quantity-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding-top: 2px;
}

.stock-quantity-stepper {
  display: grid;
  grid-template-columns: 36px 84px 36px;
  height: 38px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(40, 49, 60, 0.07), inset 0 1px 0 #fff;
}

.stock-quantity-stepper button {
  color: #4b5563;
  background: #edf0f3;
  border: 0;
  cursor: pointer;
  font-size: 17px;
}

.stock-quantity-stepper button:hover {
  background: #e1e6eb;
}

.stock-quantity-stepper input {
  min-width: 0;
  width: 100%;
  color: #1f2937;
  background: #fff;
  border: 0;
  border-inline: 1px solid #d8dee6;
  font-weight: 900;
  text-align: center;
  appearance: textfield;
}

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

.stock-quantity-card > span {
  color: #697281;
  font-size: 12px;
  font-weight: 700;
}

.stock-availability {
  color: #27724e;
  font-size: 12px;
}

.stock-availability.is-low {
  color: #b42318;
}

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

.stock-purchase-actions button {
  min-height: 52px;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 1000;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.stock-purchase-actions button:hover {
  transform: translateY(-2px);
}

.stock-buy-now {
  color: #fff;
  background: #2c3036;
  border: 1px solid #24282e;
  box-shadow: 0 9px 0 #1c1f23, 0 15px 22px rgba(26, 31, 37, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.stock-buy-now:hover {
  background: #383d44;
}

.stock-add-cart {
  color: #344054;
  background: #fff;
  border: 1px solid #cbd3dd;
  box-shadow: 0 9px 0 #d7dde4, 0 15px 22px rgba(38, 47, 58, 0.11), inset 0 1px 0 #fff;
}

.stock-add-cart:hover {
  background: #fff9dc;
  border-color: #e0be29;
}

.stock-purchase-actions button:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #c7cdd4, 0 7px 12px rgba(31, 41, 55, 0.12);
}

.stock-purchase-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.product-detail-layout.is-stock-layout {
  align-items: start;
}

.is-stock-layout .product-detail-left {
  grid-template-rows: auto minmax(0, 1fr);
  align-self: start;
}

.is-stock-layout .product-detail-media {
  box-shadow: 0 24px 48px rgba(31, 41, 55, 0.16), 0 3px 8px rgba(31, 41, 55, 0.08);
}

.stock-product-service .product-detail-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stock-product-service .product-detail-service-grid div {
  min-height: 84px;
}

.stock-product-specs article {
  background: #f8fafc;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(31, 41, 55, 0.05);
}

@media (max-width: 640px) {
  .product-detail-copy.is-stock-product {
    padding: 14px;
  }

  .stock-price-card,
  .stock-style-card {
    grid-template-columns: 1fr;
  }

  .stock-purchase-actions {
    grid-template-columns: 1fr;
  }
}

.product-detail-original-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-detail-original-info article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #dce4ee;
  border-radius: 6px;
}

.product-detail-original-info article.wide {
  grid-column: 1 / -1;
}

.product-detail-original-info span {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.product-detail-original-info strong {
  color: #101828;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.digital-card-product-config {
  display: grid;
  gap: 18px;
}

.digital-material-controls > select {
  flex: 1 1 170px;
  width: min(190px, 100%);
}

.digital-card-pricing {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  background: #f8fafc;
  border-top: 1px solid #e4e9f0;
  border-bottom: 1px solid #e4e9f0;
}

.digital-card-pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.digital-card-pricing-head strong {
  position: relative;
  padding-left: 12px;
  color: #111827;
  font-size: 16px;
  line-height: 1.3;
}

.digital-card-pricing-head strong::before {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  content: "";
  background: #f5c400;
  border-radius: 3px;
}

.digital-card-pricing-head span {
  color: #667085;
  font-size: 12px;
}

.digital-quantity-options {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(52px, 1fr));
  gap: 8px;
  min-width: 0;
}

.digital-quantity-options > span,
.digital-quantity-options > label {
  display: grid;
  min-height: 42px;
  place-items: center;
  min-width: 0;
  color: #344054;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
}

.digital-quantity-options > label {
  position: relative;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.digital-quantity-options > label:hover {
  color: #111827;
  border-color: #cfd6df;
  transform: translateY(-1px);
}

.digital-quantity-options > label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.digital-quantity-options > label:has(> input[type="radio"]:checked) {
  color: #1f2937;
  background: #fff9dc;
  border-color: #f0c400;
  box-shadow: inset 0 -3px 0 #f5c400, 0 6px 14px rgba(196, 150, 0, 0.12);
}

.digital-quantity-options > label:has(> input[type="radio"]:focus-visible) {
  outline: 3px solid rgba(245, 196, 0, 0.38);
  outline-offset: 2px;
}

.digital-quantity-options b {
  font-size: 13px;
}

.digital-custom-quantity {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(52px, 1fr) !important;
  gap: 4px;
  justify-self: end;
  width: 190px;
  padding: 5px 8px;
}

.digital-custom-quantity > span {
  white-space: nowrap;
}

.digital-custom-quantity > input[type="number"] {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  color: #111827;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 4px;
}

.digital-custom-quantity > input[type="number"]:focus {
  border-color: #f0bd00;
  outline: 2px solid rgba(245, 196, 0, 0.2);
}

.card-material-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 9px;
  width: 100%;
  min-width: 0;
}

.card-material-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.card-material-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.card-material-options span {
  display: grid;
  height: 100%;
  min-height: 48px;
  place-items: center;
  padding: 7px 10px;
  overflow: hidden;
  color: #475467;
  background: #f5f6f8;
  border: 1px solid #e7eaf0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.card-material-options label:hover span {
  color: #111827;
  background: #fff;
  border-color: #cfd6df;
  transform: translateY(-1px);
}

.card-material-options input:checked + span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #f0c400;
  box-shadow: inset 0 -3px 0 #f5c400, 0 6px 14px rgba(196, 150, 0, 0.12);
}

.card-material-options input:focus-visible + span {
  outline: 3px solid rgba(245, 196, 0, 0.38);
  outline-offset: 2px;
}

.pvc-fan-config {
  display: grid;
  gap: 10px;
  padding: 2px 0;
}

.pvc-detail-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #f4f6f8;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.pvc-detail-tabs.pvc-detail-tabs-single {
  grid-template-columns: minmax(0, 1fr);
}

.pvc-detail-tabs button {
  position: relative;
  min-height: 48px;
  padding: 0 18px 5px;
  color: #667085;
  background: transparent;
  border: 0;
  border-radius: 6px;
  outline: 0;
  box-shadow: none;
  font-size: 14px;
  font-weight: 900;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.pvc-detail-tabs button::after {
  position: absolute;
  right: 50%;
  bottom: 7px;
  width: 0;
  height: 3px;
  content: "";
  background: #f5c400;
  border-radius: 3px;
  transform: translateX(50%);
  transition: width 0.18s ease;
}

.pvc-detail-tabs button:hover {
  color: #344054;
  background: rgba(255, 255, 255, 0.68);
}

.pvc-detail-tabs button.active {
  color: #111827;
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.1);
}

.pvc-detail-tabs button.active::after {
  width: 32px;
}

.pvc-detail-tabs button:focus,
.pvc-detail-tabs button:focus-visible {
  outline: 0;
}

.pvc-detail-tabs button:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(245, 196, 0, 0.48);
}

.pvc-detail-tab-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.pvc-detail-tab-panel[hidden] {
  display: none;
}

.product-info-accordion {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.product-info-section {
  background: #fff;
  border-bottom: 1px dashed #dbe3ec;
}

.product-info-section:last-child {
  border-bottom: 0;
}

.product-info-section summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px 0 27px;
  color: #172033;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 1000;
  user-select: none;
}

.product-info-section summary::-webkit-details-marker {
  display: none;
}

.product-info-section summary::before {
  position: absolute;
  left: 15px;
  width: 4px;
  height: 17px;
  content: "";
  background: #f5c400;
  border-radius: 4px;
}

.product-info-section summary i {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #475467;
  border-bottom: 1.5px solid #475467;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.product-info-section[open] summary {
  background: linear-gradient(90deg, #fffbed 0%, #fff 74%);
}

.product-info-section[open] summary i {
  transform: rotate(225deg);
}

.product-info-section summary:focus-visible {
  outline: 3px solid rgba(245, 196, 0, 0.32);
  outline-offset: -3px;
}

.product-info-image-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
  padding: 0 16px 16px;
}

.product-info-main-image {
  display: grid;
  place-items: center;
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, 0.8), transparent 30%),
    linear-gradient(135deg, #eef8e8, #dcefcf);
  border: 1px solid #dbe8d2;
  border-radius: 10px;
}

.product-info-main-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
}

.product-info-image-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.product-info-image-copy h2 {
  margin: 0;
  color: #0b1220;
  font-size: 22px;
  line-height: 1.25;
}

.product-info-image-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #667085;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.product-info-notice-copy {
  display: grid;
  gap: 7px;
  margin: 0 16px 16px;
  padding: 14px 16px;
  color: #5e4b18;
  background: #fffbed;
  border: 1px solid #f7df84;
  border-radius: 9px;
}

.product-info-notice-copy strong {
  color: #8c5a00;
  font-size: 14px;
}

.product-info-notice-copy p,
.product-info-notice-copy span {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.7;
}

.product-info-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 12px;
}

.product-info-usage-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  background: #f7f9fc;
  border: 1px solid #e7ebf1;
  border-radius: 8px;
}

.product-info-usage-grid span,
.product-info-meta span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.product-info-usage-grid strong {
  color: #182230;
  font-size: 13px;
  line-height: 1.55;
}

.product-info-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  margin: 0 16px 16px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e7ebf1;
  border-radius: 8px;
}

.product-info-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .product-info-image-layout,
  .product-info-usage-grid {
    grid-template-columns: 1fr;
  }

  .product-info-main-image img {
    height: 190px;
  }

  .product-info-meta {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (min-width: 981px) {
  .product-dialog form:has(.has-pvc-tab-layout) {
    height: calc(100vh - 32px);
    overflow: hidden;
  }

  .product-detail-layout.has-pvc-tab-layout {
    height: calc(100vh - 68px);
    min-height: 0;
    overflow: hidden;
  }

  .has-pvc-tab-layout .product-detail-left {
    position: static;
    grid-template-rows: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
  }

  .product-detail-copy.has-pvc-tabs {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
  }

  .product-detail-copy.has-pvc-tabs .pvc-detail-tabs {
    position: relative;
    top: auto;
    z-index: 2;
  }

  .product-detail-copy.has-pvc-tabs .pvc-detail-tab-panel {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .product-detail-copy.has-pvc-tabs .detail-actions {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: 10px;
    background: #fff;
    border-top: 1px solid #edf0f4;
  }
}

@media (max-width: 980px) {
  .product-detail-copy.has-pvc-tabs {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
  }

  .product-detail-copy.has-pvc-tabs .pvc-detail-tabs {
    position: relative;
    top: auto;
  }

  .product-detail-copy.has-pvc-tabs .pvc-detail-tab-panel {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .product-detail-copy.has-pvc-tabs .detail-actions {
    margin-top: 0;
    padding-top: 10px;
    background: #fff;
    border-top: 1px solid #edf0f4;
  }
}

.pvc-config-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.pvc-config-row > strong {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 0 8px;
  color: #344054;
  background: #f2f4f7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

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

.pvc-material-options label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.pvc-material-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.pvc-material-options span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 5px 8px;
  color: #475467;
  background: #f2f4f7;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.pvc-material-options input:checked + span {
  color: #1f2937;
  background: #fff9dc;
  border-color: #f0c400;
  box-shadow: inset 0 -3px 0 #f5c400, 0 6px 14px rgba(196, 150, 0, 0.12);
}

.pvc-material-options input:focus-visible + span {
  outline: 3px solid rgba(255, 194, 71, 0.38);
  outline-offset: 2px;
}

.pvc-inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-height: 42px;
}

.pvc-inline-options select,
.pvc-inline-options input[type="number"] {
  width: min(190px, 100%);
  min-height: 42px;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.pvc-radio,
.pvc-check {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.pvc-radio input,
.pvc-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #323232;
}

.pvc-purchase-upload {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
}

.product-detail-left-workspace {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.product-detail-left-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 12px 14px 0;
  background: linear-gradient(180deg, #fff8c8 0%, #fffceb 100%);
  border-bottom: 1px solid #f4edbd;
  border-radius: 18px 18px 0 0;
}

.product-detail-left-tabs button {
  position: relative;
  min-height: 48px;
  padding: 0 12px 5px;
  color: #24324a;
  background: transparent;
  border: 0;
  border-radius: 14px 14px 0 0;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.product-detail-left-tabs button::after {
  position: absolute;
  right: 50%;
  bottom: 7px;
  width: 0;
  height: 3px;
  content: "";
  background: #f2c500;
  border-radius: 999px;
  transform: translateX(50%);
  transition: width 160ms ease;
}

.product-detail-left-tabs button.active {
  color: #111827;
  background: #fff;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.04);
}

.product-detail-left-tabs button.active::after {
  width: 32px;
}

.product-detail-left-tabs button:focus-visible {
  outline: 2px solid rgba(242, 197, 0, 0.7);
  outline-offset: -3px;
}

.product-detail-left-panel {
  min-width: 0;
}

.product-detail-left-panel[hidden] {
  display: none;
}

.product-detail-left-info {
  background: #fff;
}

.product-detail-left-info details {
  background: #fff;
  border-bottom: 1px dashed #dfe5ec;
}

.product-detail-left-info details:last-child {
  border-bottom: 0;
}

.product-detail-left-info summary {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 21px;
  color: #172033;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease, background 150ms ease;
}

.product-detail-left-info summary::-webkit-details-marker {
  display: none;
}

.product-detail-left-info summary::before {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 4px;
  height: 17px;
  content: "";
  background: #ffd92f;
  border-radius: 999px;
  transform: translateY(-50%);
}

.product-detail-left-info summary i {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #64748b;
  border-bottom: 1.5px solid #64748b;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.product-detail-left-info details[open] summary i {
  transform: rotate(225deg);
}

.product-detail-left-info details[open] > summary {
  color: #111827;
  background: linear-gradient(90deg, #fffdf1 0%, #fff 72%);
}

.product-detail-left-info summary:hover {
  background: #fffdf3;
}

.product-detail-left-showcase {
  display: block;
  padding: 0 0 14px;
}

.product-detail-left-showcase-plain {
  padding-top: 10px;
  border-bottom: 1px dashed #dfe5ec;
}

.product-detail-left-showcase-main {
  display: grid;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 1.12 / 1;
  place-items: center;
  overflow: hidden;
  background: #fff7ee;
  border-radius: 0;
}

.product-detail-left-showcase-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-left-showcase-thumb {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 2px solid #172033;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #fff;
}

.product-detail-left-showcase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-left-showcase-thumb span {
  padding: 4px;
  color: #526070;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.product-detail-left-note {
  display: grid;
  gap: 8px;
  margin: 0 12px 14px;
  padding: 12px;
  color: #596579;
  background: #f7f8fa;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.65;
}

.product-detail-left-note strong {
  color: #26344a;
}

.product-detail-left-usage {
  display: grid;
  gap: 8px;
  padding: 0 12px 14px;
}

.product-detail-left-usage > div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  color: #546174;
  background: linear-gradient(135deg, #f8fafc, #f4f6f9);
  border: 1px solid #edf0f4;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.65;
}

.product-detail-left-usage span {
  color: #8a6a00;
  font-size: 13px;
  font-weight: 900;
}

.product-detail-left-usage strong {
  color: #344054;
  font-size: 14px;
  font-weight: 800;
}

.product-detail-left-upload {
  max-height: calc(100vh - 150px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-margin-top: 12px;
  scrollbar-color: #c4cbd5 transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.product-detail-left-upload::-webkit-scrollbar {
  width: 8px;
}

.product-detail-left-upload::-webkit-scrollbar-track {
  background: transparent;
}

.product-detail-left-upload::-webkit-scrollbar-thumb {
  background: #c4cbd5;
  border: 2px solid #fff;
  border-radius: 999px;
}

.product-detail-left-upload::-webkit-scrollbar-thumb:hover {
  background: #98a2b3;
}

.product-detail-left-upload .pvc-purchase-upload {
  gap: 13px;
  padding: 12px;
  border: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: none;
}

.product-detail-left-upload .pvc-upload-head {
  align-items: flex-start;
  padding: 11px 12px;
}

.product-detail-left-upload .pvc-upload-head span {
  max-width: 210px;
  text-align: right;
}

.product-detail-left-upload .pvc-upload-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.product-detail-left-upload .pvc-file-drop,
.product-detail-left-upload .pvc-file-drop.compact {
  min-height: 104px;
  padding: 14px 10px;
}

.product-detail-left-upload .pvc-file-preview-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.product-detail-left-upload .pvc-file-preview-card {
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 108px;
  padding: 9px 10px 9px 12px;
}

.product-detail-left-upload .pvc-file-preview-thumb {
  width: 112px;
  height: 88px;
}

.pvc-upload-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff8c5;
  border-radius: 6px;
}

.pvc-upload-head strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.pvc-upload-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

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

.pvc-upload-fields label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.pvc-upload-fields span,
.pvc-certificate-field > span,
.pvc-upload-label strong {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.pvc-upload-fields b,
.pvc-upload-label b {
  color: #e5484d;
}

.pvc-upload-fields input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.pvc-upload-fields input:invalid,
.pvc-upload-fields input[aria-invalid="true"] {
  border-color: #e5484d;
}

.pvc-certificate-field {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 42px;
}

.pvc-certificate-field small,
.pvc-upload-fields small,
.pvc-upload-label small {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 800;
}

.pvc-certificate-field input,
.pvc-file-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.pvc-certificate-field i {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  padding: 0 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  cursor: pointer;
}

.pvc-upload-group {
  display: grid;
  gap: 8px;
}

.pvc-upload-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.pvc-upload-label span {
  color: #667085;
  font-size: 12px;
}

.pvc-file-drop {
  display: grid;
  min-height: 142px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  color: #344054;
  background: #f8fafc;
  border: 1px dashed #b8c4d4;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
}

.pvc-file-drop.compact {
  min-height: 112px;
}

.pvc-file-drop > b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: #111827;
  border-radius: 50%;
  font-size: 18px;
}

.pvc-file-drop > strong {
  font-size: 13px;
  font-weight: 900;
}

.pvc-file-drop > span {
  color: #98a2b3;
  font-size: 12px;
}

.pvc-file-drop:hover,
.pvc-file-drop:focus-within {
  background: #f2f7fd;
  border-color: #1473e6;
}

.pvc-file-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 12px;
}

.pvc-file-preview-list[hidden],
.pvc-file-preview-list:empty {
  display: none;
}

.pvc-file-preview-card {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  grid-template-rows: minmax(64px, auto) auto;
  gap: 8px 12px;
  min-width: 0;
  width: 100%;
  min-height: 116px;
  padding: 10px 12px 10px 14px;
  overflow: hidden;
  background: linear-gradient(125deg, #ffffff 0%, #ffffff 68%, #fffbed 100%);
  border: 1px solid #d9e1eb;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.pvc-file-preview-card::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 4px;
  background: #ffda2e;
  border-radius: 0 4px 4px 0;
}

.pvc-file-preview-card:hover {
  border-color: #f0c92f;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.pvc-file-preview-thumb {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  width: 128px;
  height: 94px;
  place-items: center;
  overflow: hidden;
  color: #5f6b7a;
  background: linear-gradient(145deg, #f8fafc, #eef2f7);
  border: 1px solid #d8e0e9;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.pvc-file-preview-thumb.has-image {
  background-color: #f8fafc;
  background-image:
    linear-gradient(45deg, #edf1f5 25%, transparent 25%),
    linear-gradient(-45deg, #edf1f5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf1f5 75%),
    linear-gradient(-45deg, transparent 75%, #edf1f5 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.pvc-file-preview-thumb.is-loading::before {
  content: "正在生成清晰预览";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  color: #667085;
  background: rgba(248, 250, 252, 0.88);
  font-size: 10px;
  font-weight: 850;
}

.pvc-file-preview-thumb.is-error::before {
  content: "预览失败";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b42318;
  background: #fff6f5;
  font-size: 11px;
  font-weight: 900;
}

.pvc-file-preview-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 160ms ease;
}

.pvc-file-preview-thumb img.is-ready {
  opacity: 1;
}

.pvc-file-preview-thumb > strong {
  font-size: 16px;
  font-weight: 1000;
}

.pvc-file-preview-thumb > span {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  color: #111827;
  background: rgba(255, 221, 48, 0.96);
  border: 1px solid rgba(220, 176, 0, 0.36);
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  font-size: 9px;
  font-weight: 950;
}

.pvc-file-preview-meta {
  display: grid;
  min-width: 0;
  align-content: end;
  gap: 7px;
  padding-top: 3px;
}

.pvc-file-preview-meta > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #1d2939;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pvc-file-preview-meta > span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  color: #667085;
  background: #f3f6f9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pvc-file-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pvc-file-preview-actions button {
  min-height: 32px;
  padding: 0 14px;
  color: #fff;
  background: #172033;
  border: 1px solid #172033;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.pvc-file-preview-actions button:hover {
  color: #111827;
  background: #ffda2e;
  border-color: #e8b900;
  transform: translateY(-1px);
}

.pvc-file-preview-actions button.danger {
  color: #b42318;
  background: #fff;
  border-color: #f4c7c3;
}

.pvc-file-preview-actions button.danger:hover {
  color: #b42318;
  background: #fef3f2;
  border-color: #fda29b;
}

.local-image-preview-dialog {
  width: min(94vw, 1120px);
  height: min(92vh, 860px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.local-image-preview-dialog::backdrop {
  background: rgba(80, 91, 109, 0.3);
  backdrop-filter: blur(5px);
}

.local-image-preview-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e1eb;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}

.local-image-preview-shell > header {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px 12px 22px;
  color: #172033;
  background: linear-gradient(90deg, #fffdf2 0%, #ffffff 44%, #f8fafc 100%);
  border-bottom: 1px solid #e4e9f0;
}

.local-image-preview-shell > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.local-image-preview-shell > header strong {
  font-size: 16px;
  font-weight: 950;
}

.local-image-preview-shell > header [data-local-image-preview-name] {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.local-image-preview-shell [data-local-image-preview-close] {
  display: inline-flex;
  min-width: 116px;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: #111827;
  background: #ffda2e;
  border: 1px solid #f0bd00;
  border-radius: 11px;
  box-shadow: 0 7px 18px rgba(255, 218, 46, 0.2);
  font-weight: 950;
  cursor: pointer;
}

.local-image-preview-shell [data-local-image-preview-close] b {
  font-size: 22px;
  line-height: 1;
}

.local-image-preview-shell [data-local-image-preview-close]:hover {
  background: #ffe76c;
}

.local-image-preview-shell [data-local-image-preview-close]:focus-visible {
  outline: 3px solid rgba(255, 226, 63, 0.42);
  outline-offset: 3px;
}

.local-image-preview-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background-color: #f3f6fa;
  background-image:
    linear-gradient(45deg, #e7ecf2 25%, transparent 25%),
    linear-gradient(-45deg, #e7ecf2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e7ecf2 75%),
    linear-gradient(-45deg, transparent 75%, #e7ecf2 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.local-image-preview-stage::before {
  content: "正在打开清晰大图…";
  position: absolute;
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.local-image-preview-stage[data-state="ready"]::before {
  display: none;
}

.local-image-preview-stage[data-state="error"]::before {
  content: "图片加载失败";
  color: #fda29b;
}

.local-image-preview-stage img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #d9e1eb;
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.14);
}

.local-image-preview-shell > footer {
  min-height: 42px;
  padding: 12px 22px;
  color: #667085;
  background: #fff;
  border-top: 1px solid #e4e9f0;
  font-size: 12px;
}

.pvc-upload-status {
  min-height: 38px;
  padding: 10px 12px;
  color: #667085;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.pvc-upload-status[data-state="uploading"] {
  color: #175cd3;
  background: #eff8ff;
}

.pvc-upload-status[data-state="done"] {
  color: #067647;
  background: #ecfdf3;
}

.pvc-upload-status[data-state="ready"] {
  color: #8a5c00;
  background: #fff9db;
}

.pvc-upload-status[data-state="error"],
.pvc-upload-status[data-state="warning"] {
  color: #b42318;
  background: #fef3f2;
}

.pvc-upload-save {
  position: sticky;
  z-index: 5;
  bottom: 0;
  min-height: 44px;
  color: #111827;
  background: #ffe45c;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 -8px 18px rgba(255, 255, 255, 0.94), 0 8px 18px rgba(184, 138, 0, 0.12);
  font-weight: 1000;
}

.pvc-upload-save:disabled,
.detail-actions [data-action="cart"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.order-detail-dialog {
  width: min(1180px, calc(100vw - 36px));
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.order-detail-dialog::backdrop {
  background: rgba(18, 24, 38, 0.52);
}

.order-detail-dialog form {
  position: relative;
  margin: 0;
  padding: 24px;
}

.order-detail,
.order-detail section,
.detail-list {
  display: grid;
  gap: 14px;
}

.order-detail-loading {
  padding: 34px;
  text-align: center;
  color: var(--muted);
}

.order-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 38px;
}

.order-detail-head span {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}

.order-detail-head h2 {
  margin: 4px 0;
  font-size: 26px;
}

.order-detail-head p {
  margin: 0;
  color: var(--muted);
}

.order-detail-head strong {
  color: var(--orange);
  font-size: 28px;
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.detail-summary-grid div,
.detail-list > div,
.detail-list > a {
  display: grid;
  gap: 4px;
  padding: 12px;
  color: inherit;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-summary-grid span,
.detail-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-info-grid div {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: #fff8eb;
  border: 1px solid #ffe0b0;
  border-radius: 8px;
}

.detail-info-grid span {
  color: #8a5a12;
  font-size: 12px;
  font-weight: 900;
}

.detail-info-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.order-progress-shell {
  min-width: 0;
  padding: 20px 14px 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #edf0f4;
  border-radius: 14px;
}

.order-progress-scroll {
  padding: 8px 4px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #d5d9df transparent;
  scrollbar-width: thin;
}

.order-progress-scroll:focus-visible {
  outline: 2px solid rgba(255, 211, 35, 0.72);
  outline-offset: 2px;
  border-radius: 8px;
}

.order-progress {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  min-width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-progress-step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 0 6px;
  color: #a3a7ad;
  text-align: center;
}

.order-progress-step::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12px;
  right: calc(-50% + 18px);
  left: calc(50% + 18px);
  border-top: 2px dashed #e3e5e9;
}

.order-progress-step:last-child::after {
  display: none;
}

.order-progress-step.is-done::after {
  border-top-color: #ffd72e;
  border-top-style: solid;
}

.order-progress-step > button.order-progress-hotspot {
  all: unset;
  position: absolute;
  z-index: 3;
  inset: -5px 5px -4px;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

.order-progress-step > button.order-progress-hotspot:focus-visible {
  outline: 2px solid #f2b800;
  outline-offset: 2px;
}

.order-progress-step.is-interactive:hover > strong,
.order-progress-step.is-interactive:focus-within > strong {
  color: #b77900;
}

.order-progress-step > .order-progress-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  margin: 0;
  place-items: center;
  color: #303238;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1;
}

.order-progress-step.is-done > .order-progress-marker {
  background: #ffda35;
  border-color: #ffda35;
}

.order-progress-step.is-current > .order-progress-marker {
  background: #fff;
  border: 3px solid #ffd72e;
  box-shadow: 0 0 0 7px rgba(255, 215, 46, 0.2);
}

.order-progress-step.is-current > .order-progress-marker::after,
.order-progress-step.is-pending > .order-progress-marker::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #ffd72e;
  border-radius: 50%;
}

.order-progress-step.is-pending > .order-progress-marker::after {
  background: #e3e5e9;
}

.order-progress-step > .order-progress-number {
  display: block;
  margin: 9px 0 0;
  color: inherit;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1.15;
}

.order-progress-step > strong {
  color: inherit;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.35;
}

.order-progress-step.is-done,
.order-progress-step.is-current {
  color: #3d3f44;
}

.order-progress-step time,
.order-progress-step small {
  display: block;
  min-height: 16px;
  margin: 1px 0 0;
  color: #9a9ea5;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.order-progress-step small.is-alert {
  color: #f04438;
  font-weight: 900;
}

.order-progress-action-hint {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  margin-top: 4px;
  padding: 3px 9px;
  color: #805b00;
  background: #fff7c2;
  border: 1px solid #f4d64f;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.order-progress-action-hint b {
  font-size: 13px;
  line-height: 1;
}

.order-progress-action-hint.is-danger {
  color: #b42318;
  background: #fff1f0;
  border-color: #fda29b;
}

.prepress-progress-shortcut {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  margin: 14px 4px 2px;
  padding: 15px 16px;
  background: linear-gradient(110deg, #fffbe8 0%, #fff 58%);
  border: 1px solid #f1d769;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(128, 91, 0, 0.08);
}

.prepress-progress-shortcut.has-issues {
  background: linear-gradient(110deg, #fff2f0 0%, #fff 58%);
  border-color: #fda29b;
  box-shadow: 0 8px 24px rgba(180, 35, 24, 0.08);
}

.prepress-progress-index {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #5f4500;
  background: #ffdd3d;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 1000;
}

.has-issues .prepress-progress-index {
  color: #fff;
  background: #e5484d;
}

.prepress-progress-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prepress-progress-copy small {
  color: #8a6a00;
  font-size: 11px;
  font-weight: 900;
}

.prepress-progress-copy strong {
  color: #202329;
  font-size: 16px;
}

.prepress-progress-copy p {
  margin: 0;
  color: #68707d;
  font-size: 12px;
  line-height: 1.5;
}

.prepress-progress-facts {
  display: flex;
  gap: 8px;
  margin: 0;
}

.prepress-progress-facts > div {
  min-width: 72px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #ece6cc;
  border-radius: 8px;
}

.prepress-progress-facts dt {
  color: #9297a0;
  font-size: 10px;
}

.prepress-progress-facts dd {
  margin: 2px 0 0;
  color: #34373d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.prepress-progress-shortcut > button {
  min-height: 40px;
  padding: 0 16px;
  color: #202329;
  background: #ffda35;
  border: 1px solid #edc100;
  border-radius: 9px;
  font-weight: 1000;
  white-space: nowrap;
  box-shadow: 0 7px 16px rgba(164, 121, 0, 0.14);
}

.prepress-progress-shortcut.has-issues > button {
  color: #fff;
  background: #d92d20;
  border-color: #b42318;
  box-shadow: 0 7px 16px rgba(180, 35, 24, 0.16);
}

.prepress-progress-shortcut > button:hover {
  transform: translateY(-1px);
}

.order-progress-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 12px;
  padding: 9px 11px;
  color: #854d0e;
  background: #fff8db;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12px;
}

.order-progress-notice span {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.order-progress-notice.is-danger {
  color: #b42318;
  background: #fff1f0;
  border-color: #fecdca;
}

.order-progress-shell.is-compact {
  padding: 10px 8px 7px;
  background: #fff;
  border-color: #e8ecf2;
  border-radius: 9px;
}

.order-progress-shell.is-compact .order-progress-scroll {
  padding: 4px 2px 3px;
  overflow-y: hidden;
}

.order-progress-shell.is-compact .order-progress {
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  min-width: 650px;
}

.order-progress-shell.is-compact .order-progress-step::after {
  top: 9px;
  right: calc(-50% + 14px);
  left: calc(50% + 14px);
}

.order-progress-shell.is-compact .order-progress-marker {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

.order-progress-shell.is-compact .order-progress-step.is-current > .order-progress-marker {
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(255, 215, 46, 0.18);
}

.order-progress-shell.is-compact .order-progress-step.is-current > .order-progress-marker::after,
.order-progress-shell.is-compact .order-progress-step.is-pending > .order-progress-marker::after {
  width: 6px;
  height: 6px;
}

.order-progress-shell.is-compact .order-progress-number {
  margin-top: 6px;
  font-size: 13px;
}

.order-progress-shell.is-compact .order-progress-step > strong {
  font-size: 11px;
}

.order-progress-shell.is-compact .order-progress-action-hint {
  display: none;
}

.history-item.has-order-progress {
  flex-wrap: wrap;
}

.history-order-progress {
  flex: 0 0 100%;
  min-width: 0;
}

.prepress-review-dialog {
  width: min(1460px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100vh - 20px);
  padding: 0;
  overflow: hidden;
  background: #f6f6f6;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.3);
}

.prepress-review-dialog::backdrop {
  background: rgba(18, 24, 38, 0.56);
}

.prepress-review-dialog-frame {
  position: relative;
  max-height: calc(100vh - 20px);
  padding: 22px;
  overflow-y: auto;
}

.prepress-review-dialog .close-dialog {
  position: fixed;
  z-index: 8;
  top: 22px;
  right: max(24px, calc((100vw - min(1460px, calc(100vw - 24px))) / 2 + 16px));
}

.prepress-review-page {
  display: grid;
  gap: 18px;
}

.prepress-review-head,
.prepress-review-card {
  background: #fff;
  border: 1px solid #f0f1f3;
  border-radius: 16px;
}

.prepress-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 56px 18px 20px;
}

.prepress-review-head span {
  color: #9a6700;
  font-size: 12px;
  font-weight: 900;
}

.prepress-review-head h2 {
  margin: 3px 0 1px;
  color: #111827;
  font-size: 24px;
}

.prepress-review-head p {
  margin: 0;
  color: #f04438;
  font-size: 13px;
  font-weight: 900;
}

.prepress-review-head > button,
.prepress-card-head button,
.prepress-copy,
.prepress-address-form button {
  min-height: 30px;
  padding: 5px 12px;
  color: #556070;
  background: #fff;
  border: 1px solid #dce1e8;
  border-radius: 999px;
  font-weight: 800;
}

.prepress-review-head > button:hover,
.prepress-card-head button:hover,
.prepress-copy:hover {
  color: #8a5a00;
  border-color: #f3c94b;
}

.prepress-review-status {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: #f4f8ff;
  border: 1px solid #cfe1ff;
  border-radius: 14px;
}

.prepress-review-status.is-warning {
  background: #fffaf0;
  border-color: #ffd98c;
}

.prepress-review-status.is-danger {
  background: #fff2f0;
  border-color: #fda29b;
}

.prepress-review-status.is-success {
  background: #f1fbf6;
  border-color: #a9e7c7;
}

.prepress-review-status-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #175cd3;
  background: #dbeafe;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 1000;
}

.prepress-review-status.is-warning .prepress-review-status-icon {
  color: #7a4d00;
  background: #ffe68a;
}

.prepress-review-status.is-danger .prepress-review-status-icon {
  color: #fff;
  background: #d92d20;
}

.prepress-review-status.is-success .prepress-review-status-icon {
  color: #fff;
  background: #169b62;
}

.prepress-review-status > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prepress-review-status > div > small {
  color: #667085;
  font-size: 11px;
  font-weight: 900;
}

.prepress-review-status > div > strong {
  color: #111827;
  font-size: 17px;
}

.prepress-review-status > div > p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.prepress-review-status dl {
  display: flex;
  gap: 8px;
  margin: 0;
}

.prepress-review-status dl > div {
  min-width: 80px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
}

.prepress-review-status dt {
  color: #98a2b3;
  font-size: 10px;
}

.prepress-review-status dd {
  margin: 2px 0 0;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.prepress-review-status > button {
  min-height: 40px;
  padding: 0 16px;
  color: #fff;
  background: #d92d20;
  border: 1px solid #b42318;
  border-radius: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.prepress-review-card {
  min-width: 0;
  padding: 20px;
}

.prepress-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e6e8eb;
}

.prepress-card-head h3 {
  margin: 0;
  color: #05070a;
  font-size: 19px;
  font-weight: 1000;
}

.prepress-card-head > div {
  display: flex;
  gap: 10px;
}

.prepress-info-list,
.prepress-amount-list {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
}

.prepress-info-list > div {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.prepress-info-list dt,
.prepress-amount-list dt {
  color: #9aa1aa;
  line-height: 1.55;
}

.prepress-info-list dd,
.prepress-amount-list dd {
  min-width: 0;
  margin: 0;
  color: #556070;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.prepress-copy {
  min-height: 24px;
  margin-left: 6px;
  padding: 2px 8px;
  color: #475467;
  font-size: 11px;
}

.prepress-file-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 18px;
}

.prepress-file-row > span {
  padding-top: 9px;
  color: #9aa1aa;
}

.prepress-file-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 68px;
}

.prepress-file-row em {
  align-self: center;
  color: #98a2b3;
  font-style: normal;
}

.prepress-file-preview {
  display: grid;
  grid-template-columns: 66px minmax(0, 140px);
  gap: 8px;
  align-items: center;
  min-width: 66px;
  color: inherit;
}

.prepress-file-preview img,
.prepress-file-type {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  object-fit: contain;
  background: #fff;
  border: 1px solid #dde2e8;
  border-radius: 4px;
}

.prepress-file-type {
  color: #667085;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 1000;
}

.prepress-file-preview > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.prepress-file-preview strong {
  overflow: hidden;
  color: #344054;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepress-file-preview small {
  color: #98a2b3;
  font-size: 11px;
}

.prepress-file-preview.is-needs_fix,
.prepress-file-preview.is-needs_changes,
.prepress-file-preview.is-rejected,
.prepress-file-preview.is-failed {
  min-width: 260px;
  padding: 8px;
  background: #fff4f2;
  border: 1px solid #fda29b;
  border-radius: 8px;
}

.prepress-file-preview.is-approved small,
.prepress-file-preview.is-confirmed small {
  color: #16855b;
  font-weight: 900;
}

.prepress-file-issue {
  display: grid;
  gap: 2px;
  color: #b42318 !important;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.prepress-file-issue i {
  font-style: normal;
}

.prepress-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.prepress-amount-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.prepress-amount-list > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(70px, 0.8fr);
  gap: 8px;
}

.prepress-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e6e8eb;
}

.prepress-total span {
  color: #9aa1aa;
}

.prepress-total strong {
  color: #ff3b30;
  font-size: 27px;
  font-weight: 500;
}

.prepress-total small {
  color: #9aa1aa;
  line-height: 1.7;
  text-align: right;
}

.prepress-address-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e6e8eb;
}

.prepress-address-form[hidden] {
  display: none;
}

.prepress-address-form label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.prepress-address-form label.is-wide,
.prepress-address-form > div {
  grid-column: 1 / -1;
}

.prepress-address-form input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d8dee7;
  border-radius: 7px;
}

.prepress-address-form > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.prepress-address-form button[type="submit"] {
  color: #1f2329;
  background: #ffe45c;
  border-color: #ffe45c;
}

.order-flow-actions {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 8px;
}

.flow-actions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.flow-actions-head strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.flow-actions-head span {
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.flow-action-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.flow-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 88px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-left: 4px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.flow-action-card.need {
  background: #fffaf0;
  border-color: #ffd08a;
  border-left-color: #ff9f1c;
}

.flow-action-card.view {
  background: #f0f7ff;
  border-color: #c9e4ff;
  border-left-color: #0f68db;
}

.flow-action-card.wait {
  background: #f8fafc;
  box-shadow: none;
}

.flow-action-card span {
  display: inline-flex;
  width: max-content;
  min-height: 20px;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 7px;
  color: #475467;
  background: #eef2f7;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
}

.flow-action-card.need span {
  color: #b54708;
  background: #fff3d7;
}

.flow-action-card.view span {
  color: #0f68db;
  background: #eaf5ff;
}

.flow-action-card strong {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 1000;
}

.flow-action-card p {
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.flow-action-card button {
  min-width: 92px;
  min-height: 36px;
  padding: 0 12px;
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 7px;
  font-weight: 1000;
  cursor: pointer;
}

.flow-action-card.view button {
  background: #0f68db;
}

.order-flow-actions.compact {
  padding: 10px;
  box-shadow: none;
}

.order-flow-actions.compact .flow-action-list {
  grid-template-columns: 1fr;
}

.order-flow-actions.compact .flow-action-card {
  min-height: 72px;
}

.order-detail h3 {
  margin: 8px 0 0;
  font-size: 16px;
}

.event-list {
  display: grid;
  gap: 8px;
}

.event-list div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: #f8fafc;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
}

.event-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.order-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 6px;
}

@media (max-width: 980px) {
  .prepress-progress-shortcut {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .prepress-progress-facts {
    grid-column: 2 / -1;
    grid-row: 2;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .history-item,
  .detail-config,
  .detail-summary-grid,
  .detail-info-grid,
  .timeline,
  .flow-action-list {
    grid-template-columns: 1fr;
  }

  .history-actions,
  .order-detail-actions,
  .flow-actions-head {
    justify-content: stretch;
  }

  .flow-actions-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow-action-card {
    grid-template-columns: 1fr;
  }

  .prepress-progress-shortcut {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    margin-right: 0;
    margin-left: 0;
    padding: 13px;
  }

  .prepress-progress-index {
    width: 42px;
    height: 42px;
  }

  .prepress-progress-facts {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .prepress-progress-facts > div {
    min-width: 0;
  }

  .prepress-progress-shortcut > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .history-actions button,
  .order-detail-actions button,
  .flow-action-card button,
  .inline-detail-button {
    width: 100%;
  }

  .order-detail-head {
    display: grid;
    padding-right: 0;
  }

  .order-detail-dialog form {
    padding: 18px;
  }

  .prepress-review-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    border-radius: 11px;
  }

  .prepress-review-dialog-frame {
    max-height: calc(100vh - 12px);
    padding: 10px;
  }

  .prepress-review-dialog .close-dialog {
    top: 14px;
    right: 14px;
  }

  .prepress-review-head {
    display: grid;
    padding: 16px 48px 16px 14px;
  }

  .prepress-review-head > button {
    width: fit-content;
  }

  .prepress-review-status {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    padding: 13px;
  }

  .prepress-review-status dl {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .prepress-review-status dl > div {
    min-width: 0;
  }

  .prepress-review-status > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .prepress-review-card {
    padding: 14px;
  }

  .prepress-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .prepress-info-list > div,
  .prepress-file-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .prepress-file-row > span {
    padding-top: 0;
  }

  .prepress-review-grid,
  .prepress-amount-list,
  .prepress-address-form {
    grid-template-columns: 1fr;
  }

  .prepress-address-form label.is-wide,
  .prepress-address-form > div {
    grid-column: auto;
  }

  .prepress-total {
    align-items: flex-start;
    flex-direction: column;
  }

  .prepress-total small {
    text-align: left;
  }
}

.quick-board {
  width: 100%;
  max-width: none;
  min-height: 250px;
  grid-template-columns: 350px minmax(560px, 1fr) 164px 350px;
  gap: 16px;
  padding: 16px max(32px, calc((100vw - 1700px) / 2 + 32px)) 18px;
  background: #f6f7f9;
}

.quick-board > article {
  min-width: 0;
  height: 228px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.news-panel,
.new-panel,
.account-panel,
.download-panel {
  padding: 16px;
}

.news-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  padding: 14px 16px 15px;
  background: #fff;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.55);
}

.news-panel-head {
  display: none;
}

.news-panel-head span {
  color: #ff5a1f;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
}

.news-panel-head small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabs {
  display: flex;
  gap: 9px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.tabs button {
  flex: 1;
  height: 33px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #344054;
  background: #f4f6f8;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tabs .active {
  color: #fff;
  background: linear-gradient(180deg, #252a32, #171b21);
  border-color: #171b21;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 12px rgba(15, 23, 42, 0.12);
}

.tabs button:hover {
  color: #111827;
  background: #eceff3;
}

.tabs .active:hover {
  color: #fff;
  background: linear-gradient(180deg, #252a32, #171b21);
}

.news-panel ol {
  display: grid;
  gap: 7px;
  min-height: 0;
  align-content: start;
}

.news-panel li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 24px;
  padding: 0 5px 0 0;
  color: #243041;
  font-size: 13px;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.news-panel li:hover,
.news-panel li.is-selected {
  background: #f8fafc;
  transform: translateX(1px);
}

.news-panel li:focus-visible {
  outline: 2px solid rgba(31, 35, 41, 0.22);
  outline-offset: 2px;
}

.news-panel li span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #182230;
  font-size: 13px;
  font-weight: 820;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-panel li strong,
.news-panel li small {
  display: inline;
}

.news-panel li strong {
  color: #182230;
  font-size: 13px;
  font-weight: 950;
}

.news-panel li small {
  color: #667085;
  font-size: 11px;
  font-weight: 750;
}

.news-panel b {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #fff;
  background: #ff5b32;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(255, 91, 50, 0.16);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.news-panel b::before {
  content: "";
  position: absolute;
  inset: 4px -3px -3px 4px;
  z-index: -1;
  background: rgba(255, 182, 67, 0.28);
  border-radius: 6px;
  opacity: 1;
  transform: rotate(8deg);
}

.news-panel b::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 10px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  transform: rotate(-10deg);
}

.news-panel li:nth-child(2) b {
  background: #ff8b2f;
  box-shadow: 0 5px 10px rgba(255, 139, 47, 0.18);
}

.news-panel li:nth-child(2) b::before {
  background: rgba(255, 182, 67, 0.24);
}

.news-panel li:nth-child(2) b::after {
  background: rgba(255, 255, 255, 0.78);
}

.news-panel li:nth-child(3) b {
  color: #6b4a00;
  background: #ffd23f;
  box-shadow: 0 5px 10px rgba(255, 210, 63, 0.18);
}

.news-panel li:nth-child(3) b::before {
  background: rgba(255, 208, 56, 0.22);
}

.news-panel li:nth-child(3) b::after {
  background: rgba(255, 255, 255, 0.8);
}

.news-panel li:nth-child(4) b {
  background: #1f2329;
  box-shadow: 0 5px 10px rgba(15, 23, 42, 0.16);
}

.news-panel li:nth-child(4) b::before {
  background: rgba(31, 35, 41, 0.12);
  opacity: 1;
}

.news-panel li:nth-child(5) b {
  color: #6b7280;
  background: #e2e6eb;
  box-shadow: 0 5px 10px rgba(148, 163, 184, 0.12);
}

.news-panel li:nth-child(5) b::before {
  background: rgba(148, 163, 184, 0.16);
  opacity: 1;
}

.news-panel li:nth-child(5) b::after {
  background: rgba(255, 255, 255, 0.78);
}

.news-panel li:nth-child(n + 6) b {
  background: #1f2329;
}

.news-panel li:nth-child(n + 6) b::before {
  background: rgba(31, 35, 41, 0.12);
  opacity: 1;
}

.news-panel li:nth-child(n + 4) b::after {
  background: rgba(255, 255, 255, 0.7);
}

.announcement-detail {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 10px 12px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e3eaf3;
  border-radius: 8px;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.14);
}

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

.announcement-detail strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-detail p {
  display: block;
  overflow: hidden;
  margin: 4px 0 0;
  color: #667085;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-detail-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.announcement-detail button {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.announcement-detail-primary {
  color: #fff;
  background: #1f2329;
  border: 1px solid #1f2329;
}

.announcement-detail-secondary {
  color: #1f2937;
  background: #fff7e6;
  border: 1px solid #ffd58a;
}

.announcement-detail-close {
  width: 28px;
  padding: 0 !important;
  color: #667085;
  background: #f4f6f8;
  border: 1px solid #e3eaf3;
}

@media (max-width: 760px) {
  .announcement-detail {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .announcement-detail-actions {
    justify-content: flex-end;
  }
}

.new-panel {
  overflow: hidden;
}

.new-panel .section-head.compact {
  align-items: center;
  margin-bottom: 14px;
}

.mini-product-tabs {
  display: flex;
  align-items: center;
  gap: 22px;
}

.mini-product-tabs button {
  position: relative;
  min-height: 30px;
  padding: 0;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.mini-product-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  z-index: 0;
  height: 5px;
  background: transparent;
  border-radius: 2px;
}

.mini-product-tabs button.active::after {
  background: #ffe55d;
}

.mini-product-tabs button:focus-visible {
  outline: 3px solid rgba(255, 203, 44, .35);
  outline-offset: 3px;
}

.new-panel .section-head a {
  margin: 0;
  color: #58606d;
  font-size: 14px;
}

.mini-products-rail {
  position: relative;
  min-width: 0;
}

.mini-products {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mini-products::-webkit-scrollbar {
  display: none;
}

.mini-card {
  display: grid;
  flex: 0 0 136px;
  grid-template-rows: 116px minmax(0, 1fr);
  gap: 5px;
  height: 164px;
  padding: 7px;
  color: #111318;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  scroll-snap-align: start;
  text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mini-card:hover {
  border-color: #cfd5dc;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.mini-card:focus-visible {
  outline: 2px solid #ffcf32;
  outline-offset: 2px;
}

.mini-card strong {
  align-self: center;
  color: #111318;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.mini-art {
  position: relative;
  overflow: hidden;
  height: 116px;
  margin-bottom: 8px;
  border-radius: 7px;
}

.mini-card .product-art {
  width: 100%;
  height: 116px;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  background: #f7f7f7;
  border-radius: 7px;
}

.mini-card .product-art-backdrop,
.mini-card .product-art-badge {
  display: none;
}

.mini-card .product-art .product-art-main,
.mini-card .product-art.image-wide .product-art-main,
.mini-card .product-art.image-tall .product-art-main,
.mini-card .product-art.image-square .product-art-main {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  filter: none;
}

.mini-products-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0 0 2px;
  color: #fff;
  background: rgba(31, 35, 41, .76);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .2);
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .16s ease, transform .16s ease, opacity .16s ease;
}

.mini-products-nav:hover {
  background: rgba(31, 35, 41, .9);
  transform: translateY(-50%) scale(1.05);
}

.mini-products-nav:focus-visible {
  outline: 3px solid rgba(255, 207, 50, .52);
  outline-offset: 2px;
}

.mini-products-nav[hidden] {
  display: none;
}

.mini-products-prev {
  left: -11px;
}

.mini-products-next {
  right: -11px;
}

.mini-art::before,
.mini-art::after {
  content: "";
  position: absolute;
  border-radius: 6px;
}

.mini-art-1 {
  background:
    linear-gradient(135deg, rgba(0,0,0,.72) 0 24%, transparent 25%),
    linear-gradient(145deg, #e8edf4, #ffffff);
}

.mini-art-2 {
  background:
    repeating-linear-gradient(-12deg, rgba(20,20,20,.8) 0 7px, #fff 8px 18px),
    linear-gradient(135deg, #eef3f7, #fff);
}

.mini-art-3 {
  background:
    radial-gradient(circle at 38% 38%, #ff6868 0 10px, transparent 11px),
    radial-gradient(circle at 62% 48%, #30a8ff 0 13px, transparent 14px),
    linear-gradient(135deg, #ffe3b5, #f0bd74);
}

.mini-art-4 {
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.18)),
    linear-gradient(135deg, #dfe7ef, #a7c5dd);
}

.mini-art-5 {
  background:
    linear-gradient(90deg, #f8df9c 0 30%, #f4f6f9 31% 70%, #c4e8ff 71%),
    linear-gradient(135deg, #dff5ff, #166be8);
}

.mini-art-6 {
  background:
    repeating-linear-gradient(0deg, #f7c5d3 0 15px, #f8e5eb 16px 30px),
    linear-gradient(135deg, #eff4ff, #fff);
}

.download-panel {
  align-content: start;
  gap: 6px;
  min-width: 154px;
  height: 228px;
  padding: 10px 11px;
  overflow: hidden;
  box-sizing: border-box;
}

.download-panel a {
  min-height: 43px;
  height: 43px;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.download-panel a:nth-child(1) {
  background: #f0fbff;
}

.download-panel a:nth-child(2) {
  background: #fbf7ff;
}

.download-panel a::after {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  font-size: 17px;
}

.account-panel {
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
}

.account-panel .avatar {
  width: 42px;
  height: 42px;
}

.account-panel .avatar img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.account-panel .avatar.is-member {
  overflow: hidden;
  width: 52px;
  height: 52px;
  padding: 2px;
  background: #fff;
  border-color: #fff;
  border-radius: 16px;
  box-shadow:
    0 5px 13px rgba(15, 23, 42, 0.17),
    0 0 0 1px rgba(211, 168, 33, 0.16);
}

.account-panel .avatar.is-member span {
  display: none;
}

.account-panel .avatar.is-member img {
  display: block;
  border-radius: 13px;
}

.account-login {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.account-login button {
  min-width: 58px;
  height: 30px;
  font-size: 14px;
}

.account-login[hidden],
.quick-account-identity[hidden] {
  display: none;
}

.quick-account-identity {
  display: grid;
  min-width: 0;
  gap: 7px;
  text-align: left;
}

.quick-account-name-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.quick-account-name-row strong {
  overflow: hidden;
  color: #151b24;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-account-name-row span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 25px;
  padding: 0 9px;
  color: #6e5400;
  background: #ffe85a;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.quick-account-identity p {
  margin: 0;
  overflow: hidden;
  color: #657080;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions {
  gap: 10px;
}

.account-actions a {
  min-height: 54px;
  align-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.account-actions a:nth-child(-n + 4) {
  color: #111827;
  background: #fff;
}

.account-actions a::before {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.account-actions a:nth-child(1)::before { content: "⌂"; }
.account-actions a:nth-child(2)::before { content: "▤"; }
.account-actions a:nth-child(3)::before { content: "🛒"; }
.account-actions a:nth-child(4)::before { content: "☆"; }
.account-actions a:nth-child(5)::before { content: "报"; font-weight: 900; }
.account-actions a:nth-child(6)::before { content: "国"; font-weight: 900; }
.account-actions a:nth-child(7)::before { content: "♛"; }
.account-actions a:nth-child(8)::before { content: "?"; font-weight: 900; }

@media (max-width: 1380px) {
  .quick-board {
    grid-template-columns: 220px minmax(420px, 1fr) 154px 240px;
  }

  .mini-card {
    flex-basis: 132px;
  }
}

@media (max-width: 1100px) {
  .quick-board {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }

  .quick-board > article {
    height: auto;
    min-height: 218px;
  }
}

@media (max-width: 760px) {
  .quick-board {
    grid-template-columns: 1fr;
    padding-right: 16px;
    padding-left: 16px;
  }

  .mini-card {
    flex-basis: 132px;
  }

  .mini-products-prev {
    left: -7px;
  }

  .mini-products-next {
    right: -7px;
  }

  .account-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .category-bar {
    justify-content: flex-start;
    gap: 8px;
    padding-inline: 20px;
  }

  .category-chip {
    flex: 0 0 184px;
    min-width: 0;
    max-width: none;
  }

  .mega-content {
    grid-template-columns: 1fr;
  }

  .mega-left {
    padding-right: 0;
    border-right: 0;
  }

  .mega-recommend {
    grid-template-columns: 140px 1fr;
    padding-top: 18px;
    border-top: 1px dashed #e2e6ec;
  }

  .mega-preview .product-art {
    width: 260px;
    height: 190px;
  }
}

@media (max-width: 760px) {
  .category-mega,
  .category-backdrop {
    display: none;
  }

  .category-chip {
    grid-template-columns: 30px minmax(0, 1fr);
    flex: 0 0 164px;
    height: 54px;
    min-width: 0;
    padding: 7px 9px;
    font-size: 13px;
  }

  .category-chip i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .category-chip span {
    padding-right: 30px;
  }

  .category-chip small {
    display: none;
  }

  .category-chip em {
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
  }

  .mega-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.ranking-section:not(.visual-gallery) {
  max-width: none;
  padding: 76px max(52px, calc((100vw - 1760px) / 2 + 52px)) 74px;
  background:
    linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.ranking-section:not(.visual-gallery) .section-head.centered {
  margin-bottom: 30px;
}

.ranking-section:not(.visual-gallery) .section-head.centered h2 {
  color: #020817;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
}

.ranking-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  padding: 5px;
  background: #eef2f7;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
}

.ranking-tabs button {
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #67707c;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.ranking-tabs .active {
  color: #111827;
  background: #ffe35c;
  box-shadow: 0 8px 18px rgba(245, 194, 0, 0.18);
}

.ranking-grid {
  display: grid;
  grid-template-columns: minmax(560px, 0.9fr) minmax(0, 1.75fr);
  gap: 18px;
  align-items: stretch;
}

.rank-showcase {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 324px;
  padding: 18px 16px;
  background: linear-gradient(135deg, #fff36f 0%, #fff8b6 100%);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

.rank-showcase-head {
  display: none;
}

.rank-showcase-head span {
  color: #ef7b18;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rank-showcase-head strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-feature-wall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: none;
  align-items: end;
  gap: 14px;
  min-width: 0;
  min-height: 286px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.top-rank {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 236px;
  padding: 16px 12px 14px;
  text-align: center;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
}

.top-rank-1 {
  grid-row: auto;
  min-height: 284px;
  padding-top: 18px;
  background: #fff;
}

.rank-medal {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 28px;
  padding: 0 12px;
  color: #fff;
  background: #ff7d2f;
  border-radius: 5px;
  transform: translateX(-50%);
}

.rank-medal b {
  display: inline;
  width: auto;
  height: auto;
  color: #fff;
  background: transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 900;
}

.rank-medal span {
  display: none;
}

.rank-medal b::before,
.rank-medal b::after {
  content: "♨";
  margin: 0 4px;
  font-size: 10px;
  font-weight: 900;
}

.top-rank-2 .rank-medal b {
  background: transparent;
}

.top-rank-1 .rank-medal {
  top: -17px;
  background: #ff4f65;
}

.top-rank-3 .rank-medal {
  background: #ffba24;
}

.top-rank-image {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f9fc;
  border: 0;
}

.top-rank .product-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 10px;
}

.top-rank-1 .top-rank-image {
  min-height: 196px;
}

.top-rank-2 .top-rank-image,
.top-rank-3 .top-rank-image {
  min-height: 150px;
}

.top-rank-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.top-rank strong {
  overflow: hidden;
  color: #111318;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-rank small {
  overflow: hidden;
  color: #667085;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 14px 16px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rank-card {
  display: grid;
  grid-template-columns: 54px 64px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  overflow: hidden;
  background: #f7f7f7;
  border: 1px solid transparent;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.ranking-grid .product-art.has-image .product-art-main {
  object-fit: contain;
  padding: 6px;
}

.ranking-grid .top-rank .product-art.has-image .product-art-main {
  padding: 8px;
}

.rank-card[data-sku]:hover,
.top-rank[data-sku]:hover {
  border-color: #f3d34c;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.rank-number {
  color: #bec4ce;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.rank-number::before {
  content: "TOP";
  display: block;
  margin-bottom: 4px;
  color: #d7dbe1;
  font-size: 11px;
  font-weight: 800;
}

.rank-thumb .product-art {
  width: 64px;
  height: 64px;
  min-height: 0;
  background: #fff;
  border: 0;
  border-radius: 8px;
}

.rank-info {
  min-width: 0;
}

.rank-info strong {
  display: block;
  overflow: hidden;
  margin: 0 0 5px;
  color: #111318;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stars {
  color: #ffbd12;
  font-size: 12px;
  line-height: 1.2;
}

.rank-heat span {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: #ff5a1f;
  background: #fff3e8;
  border: 1px solid #ffd7b8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.rank-heat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rank-heat em {
  overflow: hidden;
  color: #8b95a3;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 6px;
  overflow: hidden;
}

.rank-tags span {
  display: inline-flex;
  min-width: 0;
  max-width: 92px;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  overflow: hidden;
  color: #1685ff;
  background: #e8f4ff;
  border: 1px solid #bfe0ff;
  border-radius: 4px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .ranking-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1380px) and (min-width: 1181px) {
  .rank-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rank-card {
    grid-template-columns: 34px 68px minmax(0, 1fr);
  }

  .rank-thumb .product-art {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 860px) {
  .ranking-section:not(.visual-gallery) {
    padding: 56px 16px 42px;
  }

  .ranking-section:not(.visual-gallery) .section-head.centered {
    margin-bottom: 30px;
  }

  .ranking-section:not(.visual-gallery) .section-head.centered h2 {
    font-size: 24px;
  }

  .rank-feature-wall {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .top-rank,
  .top-rank-1 {
    grid-row: auto;
    min-height: 0;
  }

  .top-rank-1 .top-rank-image,
  .top-rank-2 .top-rank-image,
  .top-rank-3 .top-rank-image {
    min-height: 210px;
  }

  .rank-list {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .rank-card {
    grid-template-columns: 42px 76px minmax(0, 1fr);
    min-height: 104px;
  }

  .rank-thumb .product-art {
    width: 76px;
    height: 76px;
  }
}

.operations-section {
  background: #f8fafc;
}

.operations-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}

.operations-card {
  min-height: 250px;
}

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

.operations-metrics div,
.production-pills div {
  display: grid;
  gap: 6px;
  min-height: 74px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.operations-metrics span,
.production-pills span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.operations-metrics strong,
.production-pills b {
  color: var(--ink);
  font-size: 22px;
}

.production-pills {
  display: grid;
  gap: 10px;
}

.production-pills div {
  min-height: 54px;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: linear-gradient(90deg, #fff8db, #ffffff);
}

.ai-daily-card p {
  margin: 0 0 12px;
  color: #4c5764;
  line-height: 1.8;
}

.ai-suggestions {
  display: grid;
  gap: 8px;
}

.ai-suggestions span {
  display: block;
  padding: 10px 12px;
  border-left: 3px solid #ff7a35;
  border-radius: 6px;
  background: #fff7ed;
  color: #5c3b16;
  font-size: 13px;
  line-height: 1.55;
}

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

.order-detail-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.design-center-title {
  padding: 16px 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 216, 53, .26), transparent 24%),
    linear-gradient(135deg, #fffdf3 0%, #f8fbff 70%);
  border: 1px solid #e4e9f0;
  border-radius: 10px;
}

.design-center-consult {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  color: #111827;
  background: #ffdc3d;
  border: 0;
  border-radius: 8px;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(222, 171, 0, .2);
}

.design-center-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.design-center-benefits article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
}

.design-center-benefits b {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #111827;
  background: #ffdf4f;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 1000;
}

.design-center-benefits div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.design-center-benefits strong {
  color: #111827;
  font-size: 14px;
}

.design-center-benefits span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.design-center-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.design-service-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.design-center-form-note {
  margin: 0;
  padding: 10px 12px;
  color: #475569;
  background: #fff9dc;
  border: 1px solid #f5df8d;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.6;
}

.design-center-status-panel {
  min-width: 0;
  padding: 16px 18px;
  background: linear-gradient(110deg, #ffffff 0%, #f8fbff 62%, #fffaf0 100%);
  border-color: #dce7f2;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.design-center-status-panel .panel-title {
  margin-bottom: 10px;
}

.design-center-status-panel .panel-title small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.design-center-status {
  min-width: 0;
}

.design-center-status-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 13px;
  row-gap: 2px;
  min-height: 72px;
  padding: 12px 16px;
  color: #64748b;
  background: linear-gradient(100deg, #f8fbff 0%, #f4f8fc 72%, #fffaf0 100%);
  border: 1px solid #dde8f3;
  border-radius: 10px;
  text-align: left;
}

.design-center-status-empty::before {
  content: "03";
  display: grid;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #111827;
  background: #ffe35a;
  border: 5px solid #fff8c9;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 4px 12px rgba(234, 179, 8, .16);
}

.design-center-status-empty strong {
  color: #111827;
  font-size: 15px;
}

.design-center-status-empty span {
  max-width: none;
  font-size: 12px;
  line-height: 1.55;
}

.design-center-status .design-detail-section {
  padding: 0;
  background: transparent;
  border: 0;
}

.design-center-status .design-detail-section > h3 {
  display: none;
}

.design-service-card .panel-title small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.design-service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.design-service-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  color: #334155;
  background: #f1f6fb;
  border: 1px solid #dce7f2;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.design-service-steps b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: #111827;
  border-radius: 999px;
  font-size: 12px;
}

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

.design-detail-section {
  padding: 14px;
  background: #f8fbff;
  border: 1px solid #dbe8f5;
  border-radius: 8px;
}

.design-empty-detail {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px dashed #cbd8e6;
  border-radius: 8px;
}

.design-empty-detail span {
  color: #64748b;
  font-size: 13px;
}

.design-empty-detail button,
.design-detail-actions button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #111827;
  font-weight: 900;
}

.design-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dde8f4;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.design-status-card div {
  display: grid;
  gap: 4px;
}

.design-status-card span,
.design-detail-grid span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.design-status-card strong {
  color: #111827;
  font-size: 18px;
}

.design-status-card a {
  padding: 9px 14px;
  color: #075985;
  background: #e0f2fe;
  border-radius: 8px;
  font-weight: 900;
}

.design-status-card em {
  color: #94a3b8;
  font-style: normal;
  font-weight: 800;
}

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

.design-detail-grid div {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
}

.design-comment-list {
  display: grid;
  gap: 8px;
}

.design-comment-list div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
}

.design-comment-list b {
  color: #0f172a;
}

.design-comment-list span {
  color: #334155;
  font-size: 13px;
}

.design-comment-list small {
  color: #94a3b8;
}

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

.design-detail-actions button:first-child {
  background: linear-gradient(180deg, #f15f3d, #e94f2d);
}

.design-reference-upload {
  position: relative;
  display: grid;
  min-height: 122px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 18px;
  color: #334155;
  background: #f8fafc;
  border: 1px dashed #8abaff;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}

.design-reference-upload::before {
  content: none;
}

.design-reference-upload > b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #fff;
  background: #111827;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 900;
}

.design-reference-upload > strong {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.design-reference-upload.compact {
  min-height: 108px;
  border-color: #bdc9da;
}

.design-reference-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.design-reference-upload span {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.design-reference-upload:hover,
.design-reference-upload:focus-within {
  background: #f2f7fd;
  border-color: #1473e6;
}

.design-attachment-uploader,
.design-upload-group {
  display: grid;
  gap: 9px;
}

.design-attachment-uploader {
  gap: 16px;
}

.design-upload-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.design-upload-label strong {
  color: #1f2937;
  font-size: 13px;
}

.design-upload-label strong > b {
  color: #ef4444;
}

.design-upload-label small,
.design-upload-label > span {
  color: #7b8798;
  font-size: 12px;
  font-weight: 700;
}

.design-reference-status {
  min-height: 36px;
  padding: 9px 12px;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
}

.design-reference-status[data-state="ready"] {
  color: #116149;
  background: #ecfdf3;
  border-color: #b7ebcf;
}

.design-reference-status[data-state="uploading"] {
  color: #8a5b00;
  background: #fff8df;
  border-color: #f2d57c;
}

.design-reference-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.design-reference-list > .design-reference-item,
.detail-list > .design-reference-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 8px;
}

.detail-list > .design-reference-item {
  grid-template-columns: 90px minmax(0, 1fr) auto;
}

.design-reference-thumb,
.design-reference-file {
  display: grid;
  width: 72px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  color: #0f5fa8;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.75), rgba(255, 255, 255, 0.96)),
    #f8fbff;
  border: 1px solid #d8e8fa;
  border-radius: 7px;
  text-decoration: none;
}

.detail-list .design-reference-thumb,
.detail-list .design-reference-file {
  width: 80px;
  height: 62px;
}

.design-reference-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-reference-file b {
  color: #0f172a;
  font-size: 12px;
  font-weight: 1000;
}

.design-reference-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.design-reference-list strong,
.design-reference-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.design-reference-list span,
.design-reference-meta span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.design-reference-open {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  color: #0f68db;
  background: #eef7ff;
  border: 1px solid #cfe8ff;
  border-radius: 7px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.design-reference-open.muted {
  color: #94a3b8;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.design-reference-actions {
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.design-reference-remove {
  min-height: 30px;
  padding: 0 10px;
  color: #c24132;
  background: #fff5f3;
  border: 1px solid #ffd7cf;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.design-reference-remove:hover {
  color: #fff;
  background: #e64c35;
  border-color: #e64c35;
}

@media (max-width: 760px) {
  .design-center-benefits {
    grid-template-columns: 1fr;
  }

  .design-center-title .design-center-consult {
    width: 100%;
  }

  .design-center-status-panel {
    padding: 14px;
  }

  .design-center-status-empty {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    padding: 11px 12px;
  }

  .design-center-status-empty::before {
    width: 36px;
    height: 36px;
    border-width: 4px;
  }

  .design-service-steps,
  .design-form-grid,
  .design-detail-grid,
  .design-detail-actions {
    grid-template-columns: 1fr;
  }

  .design-reference-list > .design-reference-item,
  .detail-list > .design-reference-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .design-reference-open {
    grid-column: 2;
    justify-self: start;
  }

  .design-reference-actions {
    grid-column: 2;
    grid-auto-flow: column;
    justify-self: start;
  }
}

@media (max-width: 1100px) {
  .operations-grid,
  .support-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .order-center-section {
    padding: 20px 16px 34px;
  }

  .order-center-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .order-sidebar {
    position: static;
    display: flex;
    max-height: none;
    min-height: 0;
    overflow-x: auto;
    padding: 10px;
    border-radius: 12px;
  }

  .order-sidebar small {
    display: none;
  }

  .order-sidebar a {
    flex: 0 0 auto;
    min-width: 126px;
  }

  .order-main {
    padding: 18px;
  }

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

  .order-filter-actions strong {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .order-main {
    padding: 14px;
    border-radius: 10px;
  }

  .order-panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-panel-title strong {
    font-size: 19px;
  }

  .order-status-tabs {
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .order-status-tabs button {
    flex: 0 0 auto;
    font-size: 16px;
  }

  .order-filter-grid {
    grid-template-columns: 1fr;
  }

  .order-filter-grid label {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
  }

  .order-filter-grid label span {
    font-size: 12px;
  }

  .order-filter-grid input,
  .order-filter-grid select {
    width: 100%;
  }

  .order-filter-grid em,
  .order-table-head {
    display: none;
  }

  .checkout-layout,
  .upload-grid,
  .commerce-grid,
  .payment-module-grid,
  .logistics-module-grid,
  .self-service-grid,
  .support-grid,
  .member-grid,
  .download-center-grid {
    grid-template-columns: 1fr;
  }

  .checkout-form {
    position: static;
  }
}

@media (max-width: 1180px) {
  .member-wallet-hero,
  .member-insight-grid,
  .account-info-grid,
  .address-editor-layout {
    grid-template-columns: 1fr;
  }

  .member-wallet-side {
    grid-template-columns: minmax(240px, 1.25fr) minmax(180px, .85fr);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .recharge-modal {
    padding: 20px 16px;
  }

  .recharge-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .recharge-content {
    grid-template-columns: 1fr;
  }

  .recharge-qr-wrap {
    padding-right: 0;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .recharge-qr-wrap img {
    width: min(220px, 70vw);
  }

  .recharge-flow-note {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    white-space: normal;
  }

  .recharge-flow-note i {
    display: none;
  }

  .recharge-request-card {
    grid-template-columns: 1fr 1fr;
  }

  .recharge-request-card > span:first-child,
  .recharge-request-status {
    grid-column: 1 / -1;
  }

  .recharge-request-status {
    justify-self: start;
  }

  .account-info-section {
    padding: 16px;
  }

  .account-info-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .field-row.three-cols,
  .account-profile-form .field-row {
    grid-template-columns: 1fr;
  }

  .address-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .address-form-actions button,
  .account-profile-form button {
    width: 100%;
  }

  .account-info-section .address-item {
    grid-template-columns: 1fr;
  }

  .member-profile-block {
    grid-template-columns: 72px 1fr;
    padding: 22px;
  }

  .member-face {
    width: 66px;
    height: 66px;
  }

  .member-dashboard-notices {
    grid-column: 1 / -1;
    width: 100%;
  }

  .member-wallet-side,
  .member-order-strip {
    grid-template-columns: 1fr;
  }

  .wallet-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .member-card-head {
    display: grid;
  }

  .member-card-tabs {
    overflow-x: auto;
  }

  .member-card-tabs button {
    flex: 0 0 auto;
  }

  .member-order-chart-body,
  .member-order-side,
  .member-sales-summary {
    grid-template-columns: 1fr;
  }

  .member-order-total,
  .member-order-side div,
  .member-sales-summary > div,
  .member-sales-summary > div.primary {
    min-height: 92px;
  }

  .member-order-bars,
  .member-sales-bars {
    gap: 8px;
    padding-inline: 0;
  }

  .member-order-bar i,
  .member-sales-bar i {
    width: 24px;
  }

  .member-radar {
    width: 220px;
    height: 220px;
  }

  .auth-modal-shell {
    padding: 58px 10px 12px;
    border-radius: 24px;
  }

  .auth-modal-brand {
    left: 24px;
    top: 24px;
  }

  .auth-modal-brand strong {
    font-size: 22px;
  }

  .auth-modal-brand span {
    font-size: 14px;
  }

  .auth-mascot {
    right: 26px;
    top: -30px;
    width: 76px;
    height: 76px;
    font-size: 22px;
  }

  .auth-close {
    right: 12px;
    top: 12px;
    color: #1f2329;
    background: rgba(255, 255, 255, 0.72);
  }

  .auth-modal-card {
    padding: 32px 18px 22px;
    border-radius: 18px;
  }

  .auth-modal-form label,
  .auth-modal-form .captcha-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 10px;
  }

  .captcha-row b {
    width: 100%;
  }
}

/* Final product gallery scale */
@media (min-width: 1181px) {
  .products-section .product-grid {
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 26px 22px;
  }

  .products-section .product-card .product-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 1180px) and (min-width: 681px) {
  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .products-section .product-card .product-art {
    min-height: 300px;
  }
}

/* Product gallery aesthetic polish */
.products-section .product-grid {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 24px;
  padding-left: 18px;
}

.products-section .product-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  border: 1px solid #dbe6f1;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 14px 30px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.products-section .product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 246, 224, 0.28) 42%, rgba(232, 242, 255, 0.5));
  opacity: 0.74;
}

.products-section .product-card:hover,
.products-section .product-card:focus-within {
  border-color: #f4b74c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 22px 42px rgba(15, 23, 42, 0.15),
    0 0 0 3px rgba(255, 190, 74, 0.16);
  transform: translateY(-4px);
}

.products-section .product-card:focus-visible {
  outline: 3px solid rgba(255, 190, 74, 0.45);
  outline-offset: 3px;
}

.products-section .card-actions,
.products-section .card-actions button {
  cursor: default;
}

.products-section .card-actions button {
  cursor: pointer;
}

.products-section .product-card .product-art {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98), rgba(236, 242, 248, 0.92) 72%),
    #f4f7fb;
  border-bottom: 1px solid #eef2f7;
  border-radius: 8px 8px 0 0;
}

.products-section .product-card .product-art-backdrop {
  display: none;
}

.products-section .product-card .product-art.has-image .product-art-main,
.products-section .product-card .product-art.image-wide .product-art-main,
.products-section .product-card .product-art.image-tall .product-art-main {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #f7fafc;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 9px 14px rgba(15, 23, 42, 0.1));
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.04);
}

.products-section .product-card:hover .product-art.has-image .product-art-main {
  filter: saturate(1.03) contrast(1.02);
  transform: scale(1.018);
}

.products-section .product-card .product-art-badge {
  top: 0;
  left: 0;
  z-index: 4;
  width: auto;
  min-width: 34px;
  min-height: 28px;
  padding: 0 9px;
  color: #fff;
  background: rgba(15, 23, 42, 0.92);
  border: 0;
  border-radius: 8px 0 8px 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.products-section .product-body {
  gap: 7px;
  padding: 12px 14px 12px;
}

.products-section .product-title-row {
  gap: 8px;
}

.products-section .product-title-row::before {
  content: "优选";
  padding: 4px 9px;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.products-section .product-title-row > strong {
  min-height: 40px;
  color: #101828;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.36;
}

.products-section .product-body p {
  min-height: 22px;
  max-height: 22px;
  color: #758195;
  font-size: 12px;
  line-height: 1.8;
  -webkit-line-clamp: 1;
}

.products-section .tag-row {
  gap: 6px;
  min-height: 24px;
  max-height: 24px;
}

.products-section .tag-row span {
  height: 22px;
  max-width: 82px;
  color: #1d6fb8;
  background: #f3f9ff;
  border: 1px solid #d9ecff;
  border-radius: 999px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 900;
}

.products-section .tag-row span:first-child {
  color: #0f5fa8;
  background: #edf7ff;
  border-color: #cfe8ff;
}

.products-section .tag-row span:nth-child(3) {
  color: #0a745d;
  background: #ecfbf5;
  border-color: #c8efe0;
}

.products-section .card-actions {
  margin-top: 0;
  padding-top: 6px;
}

.products-section .card-actions .product-quote {
  min-height: 40px;
  color: #fff;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  border: 1px solid #111827;
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);
  font-size: 14px;
  font-weight: 950;
}

.products-section .card-actions .product-quote:hover {
  background: linear-gradient(135deg, #f97316 0%, #ff9f1c 100%);
  border-color: #f97316;
  box-shadow: 0 14px 24px rgba(249, 115, 22, 0.22);
  transform: translateY(-1px);
}

@media (min-width: 1181px) {
  .products-section .product-card .product-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 1180px) and (min-width: 681px) {
  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    padding-left: 0;
  }

  .products-section .product-card .product-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 680px) {
  .products-section .product-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .products-section .product-card .product-art {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
  }

}

/* Match the product system width to the ranking section above */
#products.products-section {
  max-width: none;
  padding: 76px max(52px, calc((100vw - 1760px) / 2 + 52px)) 74px;
}

#products .catalog-toolbar,
#products .product-layout {
  width: 100%;
  max-width: none;
}

@media (max-width: 1180px) {
  #products.products-section {
    padding: 44px 18px 52px;
  }
}

@media (max-width: 680px) {
  #products.products-section {
    padding: 34px 14px 42px;
  }
}

/* Front customer experience polish */
:root {
  --front-bg: #f5f7fa;
  --front-card: #ffffff;
  --front-ink: #111827;
  --front-muted: #667085;
  --front-line: #dfe7f0;
  --front-soft: #f8fafc;
  --front-orange: #f25532;
  --front-yellow: #ffdc55;
  --front-blue: #1473e6;
  --front-green: #16a064;
  --front-shadow: 0 18px 42px rgba(15, 23, 42, 0.09);
  --front-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.section-head.centered h2 {
  color: var(--front-ink);
  letter-spacing: 0;
}

.section-head.centered p {
  color: var(--front-muted);
}

#products.products-section {
  background:
    linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}

#products .catalog-toolbar {
  align-items: center;
  margin-bottom: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3eaf2;
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

#products .catalog-toolbar strong {
  color: var(--front-ink);
  font-size: 20px;
  font-weight: 1000;
}

#products .catalog-toolbar span {
  color: var(--front-muted);
  font-weight: 750;
}

#products .catalog-toolbar select,
#sortSelect {
  height: 42px;
  min-width: 150px;
  padding: 0 38px 0 14px;
  color: #253142;
  background-color: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-weight: 850;
}

#products .product-layout {
  align-items: start;
  gap: 20px;
}

#products .category-list {
  overflow: auto;
  max-height: 760px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e3eaf2;
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

#products .category-chip {
  min-height: 62px;
  border-radius: 8px;
}

#products .category-chip.active {
  background: linear-gradient(135deg, #fff9dc 0%, #fff 72%);
  border-color: #ffc34d;
}

.products-section .product-grid {
  align-items: stretch;
  gap: 22px;
  padding-left: 0;
}

.products-section .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--front-card);
  border: 1px solid #dde7f2;
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 30px rgba(15, 23, 42, 0.075);
  transform: translateY(0);
}

.products-section .product-card::before {
  display: none;
}

.products-section .product-card:hover,
.products-section .product-card:focus-within {
  border-color: #ffbc43;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 22px 44px rgba(15, 23, 42, 0.14),
    0 0 0 3px rgba(255, 188, 67, 0.12);
  transform: translateY(-3px);
}

.products-section .product-card .product-art {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef3f8;
  border-bottom: 1px solid #edf2f7;
  border-radius: 8px 8px 0 0;
}

.products-section .product-card .product-art.has-image .product-art-main,
.products-section .product-card .product-art.image-wide .product-art-main,
.products-section .product-card .product-art.image-tall .product-art-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.products-section .product-card:hover .product-art.has-image .product-art-main {
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.018);
}

.products-section .product-card .product-art-badge {
  top: 0;
  left: 0;
  min-width: 34px;
  min-height: 32px;
  padding: 0 11px;
  color: #fff;
  background: #122033;
  border-radius: 0 0 8px 0;
  box-shadow: 0 10px 22px rgba(18, 32, 51, 0.22);
  font-size: 12px;
  font-weight: 950;
}

.products-section .product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  padding: 14px 16px 16px;
}

.products-section .product-title-row {
  gap: 8px;
}

.products-section .product-title-row::before {
  content: "优选";
  justify-self: start;
  display: inline-flex;
  min-width: 44px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #b54708;
  background: linear-gradient(180deg, #fffaf2 0%, #fff1dc 100%);
  border: 1px solid #ffd39b;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 14px rgba(245, 158, 11, 0.12);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.products-section .product-title-row > strong {
  min-height: 44px;
  color: var(--front-ink);
  font-size: 16px;
  font-weight: 1000;
  line-height: 1.38;
}

.products-section .product-body p {
  min-height: 40px;
  max-height: 40px;
  color: #718096;
  font-size: 13px;
  line-height: 1.55;
}

.products-section .tag-row {
  min-height: 48px;
  max-height: 48px;
}

.products-section .tag-row span {
  height: 22px;
  max-width: 88px;
  color: #1667ad;
  background: #f2f8ff;
  border-color: #d5eaff;
  font-size: 11px;
  font-weight: 900;
}

.products-section .product-price-panel {
  display: flex;
  min-height: 54px;
  margin-top: auto;
  padding: 9px 10px;
  background: linear-gradient(135deg, #fff8ed 0%, #ffffff 74%);
  border: 1px solid #ffdcb0;
  border-radius: 8px;
}

.products-section .product-sku-code {
  display: grid;
}

.products-section .product-sku-code em {
  display: block;
  color: #8a94a3;
  font-size: 10px;
}

.products-section .product-sku-code strong {
  display: block;
  max-width: 118px;
  color: #344054;
  font-size: 11px;
}

.products-section .sku-price,
.products-section .sku-price.pending {
  display: grid;
  justify-items: end;
  min-width: 86px;
  text-align: right;
}

.products-section .sku-price em,
.products-section .sku-price small,
.products-section .sku-price.pending em,
.products-section .sku-price.pending small {
  display: block;
  color: #7a8796;
  font-size: 10px;
}

.products-section .sku-price strong,
.products-section .sku-price.pending strong {
  color: var(--front-orange);
  font-size: 20px;
  font-weight: 1000;
}

.products-section .card-actions {
  margin-top: 1px;
  padding-top: 0;
}

.products-section .card-actions .product-quote {
  min-height: 44px;
  color: #fff;
  background: linear-gradient(180deg, #162234 0%, #101826 100%);
  border: 1px solid #101826;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(16, 24, 38, 0.18);
  font-size: 15px;
  font-weight: 1000;
}

.products-section .card-actions .product-quote:hover {
  background: linear-gradient(180deg, #f45b35 0%, #df421f 100%);
  border-color: #df421f;
  box-shadow: 0 14px 28px rgba(223, 66, 31, 0.24);
}

.product-pagination {
  margin-top: 24px;
  margin-left: 0;
}

.product-pagination button,
.product-page-jump {
  border-radius: 8px;
}

.order-center-section {
  background:
    linear-gradient(180deg, #f7f9fc 0%, #eef2f6 100%);
}

.order-center-shell {
  max-width: 1720px;
  gap: 18px;
}

.order-sidebar {
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e9f2;
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

.order-sidebar a {
  min-height: 46px;
  color: #334155;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.order-sidebar a:hover {
  background: #f8fafc;
  border-color: #e4ebf3;
  transform: translateX(1px);
}

.order-sidebar a.active {
  color: #fff;
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  border-color: #111827;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.18);
}

.order-sidebar small {
  color: #98a2b3;
  font-weight: 850;
}

.order-main {
  padding: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e9f2;
  border-radius: 8px;
  box-shadow: var(--front-shadow);
}

.order-panel-title {
  align-items: center;
  margin-bottom: 16px;
}

.order-panel-title strong {
  font-size: 24px;
  font-weight: 1000;
}

.order-panel-title p {
  color: var(--front-muted);
  font-weight: 700;
}

.order-status-tabs {
  gap: 8px;
  padding: 6px;
  background: #f6f8fb;
  border: 1px solid #e4ebf3;
  border-radius: 8px;
}

.order-status-tabs button {
  min-height: 38px;
  padding: 0 14px;
  color: #667085;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 900;
}

.order-status-tabs button.active {
  color: #111827;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.order-status-tabs button.active::after {
  display: none;
}

.order-filter-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.order-filter-grid label,
.workflow-card label,
.quote-form label {
  border-radius: 8px;
}

.order-filter-grid label {
  min-height: 42px;
  background: #fff;
  border-color: #dde6f0;
}

.order-filter-grid input,
.order-filter-grid select {
  font-weight: 750;
}

.order-filter-actions > button,
.order-region-chips button {
  border-radius: 8px;
}

.order-filter-actions .order-search-button,
.order-region-chips button.active {
  background: #111827;
  border-color: #111827;
}

.order-table-head {
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 12px;
  border-color: #e4ebf3;
  border-radius: 8px;
}

.workflow-card {
  border-color: #dde6f0;
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

.order-center-panel .workflow-card {
  border-color: #dde6f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.history-item {
  grid-template-columns: minmax(0, 1.4fr) auto auto minmax(270px, auto);
  gap: 16px;
  align-items: center;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

.history-item:hover {
  border-color: #ffd08a;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.history-item strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.history-item b {
  color: var(--front-orange);
  font-size: 20px;
  font-weight: 1000;
}

.history-item em {
  min-width: 76px;
  padding: 6px 10px;
  color: #0f6b4b;
  background: #eaf8f1;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

.history-actions button {
  border-radius: 8px;
}

.history-actions button:first-child {
  background: #111827;
}

.checkout-layout,
.payment-module-grid,
.logistics-module-grid,
.support-grid,
.upload-grid {
  gap: 18px;
}

.checkout-form {
  top: 112px;
}

.checkout-total {
  background: linear-gradient(135deg, #fff8ed 0%, #fff 72%);
  border-color: #ffdcb0;
  border-radius: 8px;
}

.checkout-form button[type="submit"],
.upload-card button[type="submit"],
.payment-card button[type="submit"],
.invoice-card button[type="submit"],
.logistics-card button[type="submit"],
.workflow-card > button[type="submit"] {
  min-height: 46px;
  background: linear-gradient(180deg, #f45b35 0%, #e34824 100%);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(227, 72, 36, 0.18);
  font-size: 15px;
  font-weight: 1000;
}

.quote-section {
  background:
    linear-gradient(135deg, rgba(255, 220, 85, 0.12), transparent 34%),
    #fff;
  border-color: #e2e9f2;
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

.order-main .quote-section {
  padding: 20px;
}

.quote-product-preview,
.quote-form {
  border-radius: 8px;
  box-shadow: var(--front-shadow-soft);
}

.quote-form {
  border-color: #dfe8f2;
}

.quote-form input,
.quote-form select,
.workflow-card input,
.workflow-card select,
.workflow-card textarea {
  border-color: #d9e3ee;
  border-radius: 8px;
  background-color: #fff;
}

.quote-form input:focus,
.quote-form select:focus,
.workflow-card input:focus,
.workflow-card select:focus,
.workflow-card textarea:focus {
  border-color: #ff9f2e;
  box-shadow: 0 0 0 3px rgba(255, 159, 46, 0.14);
}

.quote-result {
  border-color: #ffdc75;
  border-radius: 8px;
}

.quote-form > button[type="submit"],
.quote-form .ghost-button {
  border-radius: 8px;
}

.drop-zone {
  border-color: #b9c7d7;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 115, 230, 0.06), transparent 44%),
    #f8fafc;
}

.drop-zone:hover,
.drop-zone:focus-within {
  border-color: #1473e6;
  background: #f2f8ff;
}

.file-item,
.cart-item,
.favorite-item {
  border-color: #e0e8f1;
  border-radius: 8px;
  background: #fff;
}

.payment-guide,
.payment-order-hint,
.payment-proof-tip,
.tracking-result {
  border-radius: 8px;
}

.payment-guide {
  background:
    linear-gradient(135deg, rgba(255, 220, 85, 0.18), transparent 40%),
    #fff;
  border-color: #e5edf5;
}

.payment-proof-tip {
  min-height: 44px;
  background: #f8fbff;
  border-color: #d8e8fa;
}

.payment-proof-tip button {
  border-radius: 8px;
}

.logistics-result-card .tracking-result,
.tracking-result {
  min-height: 178px;
  background: #f8fafc;
  border: 1px solid #e3eaf2;
}

.customer-service-toolbar {
  border-color: #d8e1ec;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.customer-service-trigger {
  color: #1f2937;
  font-weight: 900;
}

.customer-service-trigger.active {
  background: linear-gradient(180deg, #ffe45c 0%, #ffd635 100%);
}

.customer-service-panel {
  width: min(760px, calc(100vw - 76px));
  height: min(630px, calc(100vh - 34px));
  overflow: hidden;
  border-color: #d8e1ec;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.customer-service-head {
  background: #fff;
  border-bottom-color: #e3eaf2;
}

.customer-service-head i {
  background: linear-gradient(135deg, #ffdf4d 0%, #f25532 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}

.customer-service-chat {
  padding: 20px 16px 14px;
  background:
    linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
}

.service-bubble-agent {
  background: #fff;
  border: 1px solid #e7edf5;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.service-bubble-user {
  background: linear-gradient(180deg, #20aee8 0%, #1293d4 100%);
  box-shadow: 0 10px 20px rgba(18, 147, 212, 0.18);
}

.customer-service-quick {
  gap: 8px;
  padding: 10px 12px;
}

.customer-service-quick button {
  min-height: 30px;
  border-radius: 999px;
}

.customer-service-quick .service-my-quotes-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111827;
  background: linear-gradient(180deg, #fff4a8 0%, #ffe15b 100%);
  border-color: #f3c91f;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(202, 151, 0, 0.13);
}

.customer-service-quick .service-my-quotes-button > span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #172033;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}

.customer-service-quick .service-my-quotes-button.active {
  color: #fff;
  background: #172033;
  border-color: #172033;
}

.customer-service-quick .service-my-quotes-button.active > span {
  color: #172033;
  background: #ffd83d;
}

.customer-service-quick .service-my-quotes-button[data-count]:not([data-count="0"])::after {
  content: attr(data-count);
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #172033;
  background: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.customer-service-meta > [hidden] {
  display: none !important;
}

.customer-service-meta .customer-service-quote-field select {
  color: #172033;
  background:
    linear-gradient(90deg, rgba(255, 222, 62, 0.14), transparent 35%),
    #fff;
  border-color: #e9c53c;
  font-weight: 900;
}

.customer-service-meta .customer-service-quote-field select:focus {
  border-color: #e5b900;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .2);
}

.service-my-quotes {
  display: grid;
  gap: 10px;
  width: 100%;
}

.service-my-quotes > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: #172033;
  background: linear-gradient(120deg, #fff8d4 0%, #fff 70%);
  border: 1px solid #f0d46c;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(32, 38, 51, 0.06);
}

.service-my-quotes > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.service-my-quotes > header small {
  color: #9a6800;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.service-my-quotes > header strong {
  font-size: 17px;
  line-height: 1.2;
}

.service-my-quotes > header span {
  color: #738096;
  font-size: 11px;
}

.service-my-quotes > header button,
.service-my-quotes-empty button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #d8e1ec;
  border-radius: 7px;
  font-weight: 800;
}

.service-quote-card {
  position: relative;
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 12px 13px 11px 15px;
  overflow: hidden;
  color: #172033;
  text-align: left;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dce5ef;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.055);
}

.service-quote-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #ffd329;
  content: "";
}

.service-quote-card.status-quoted::before { background: #2997e8; }
.service-quote-card.status-needs_requote::before { background: #ff7a45; }
.service-quote-card.status-converted::before { background: #28b878; }
.service-quote-card.status-expired::before,
.service-quote-card.status-rejected::before { background: #9aa7b8; }

.service-quote-card:hover {
  border-color: #efc126;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
}

.service-quote-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.service-quote-card-top > b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-quote-card-top > em {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: #875b00;
  background: #fff3b5;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.service-quote-card-meta {
  overflow: hidden;
  color: #718096;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-quote-card-price {
  color: #ef4f2d;
  font-size: 17px;
  font-weight: 950;
}

.service-quote-card-reply {
  display: grid;
  gap: 3px;
  margin-top: 3px;
  padding: 9px 10px;
  color: #334155;
  background: #f3f8fd;
  border: 1px solid #deebf7;
  border-radius: 8px;
}

.service-quote-card-reply > b {
  color: #1684c5;
  font-size: 11px;
}

.service-quote-card-reply > span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.service-quote-card-reply > small {
  color: #94a3b8;
  font-size: 9px;
}

.service-quote-card-reply.is-pending {
  color: #796b3d;
  background: #fffaf0;
  border-color: #f3e3ab;
}

.service-quote-card-reply.is-pending > b { color: #9a6800; }

.service-quote-card-action {
  justify-self: end;
  color: #172033;
  font-size: 11px;
  font-weight: 900;
}

.service-quote-conversation-head {
  position: sticky;
  top: -20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -20px -16px 14px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #dce5ef;
  backdrop-filter: blur(8px);
}

.service-quote-conversation-head button {
  min-height: 29px;
  padding: 0 10px;
  color: #172033;
  background: #fff4ae;
  border: 1px solid #efca37;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 900;
}

.service-quote-conversation-head > span {
  display: grid;
  min-width: 0;
  color: #7b8798;
  font-size: 9px;
  text-align: right;
}

.service-quote-conversation-head > span b {
  color: #172033;
  font-size: 11px;
}

.service-my-quotes-loading,
.service-my-quotes-empty {
  display: grid;
  min-height: 180px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: #738096;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed #cdd9e7;
  border-radius: 10px;
}

.service-my-quotes-loading b,
.service-my-quotes-empty b {
  color: #172033;
  font-size: 15px;
}

.service-my-quotes-loading span,
.service-my-quotes-empty span {
  max-width: 340px;
  font-size: 11px;
  line-height: 1.6;
}

.service-my-quotes-loading i {
  width: 25px;
  height: 25px;
  border: 3px solid #dce6f1;
  border-top-color: #f0bf12;
  border-radius: 50%;
  animation: service-quotes-spin .8s linear infinite;
}

@keyframes service-quotes-spin {
  to { transform: rotate(360deg); }
}

.customer-service-meta {
  padding: 9px 12px;
}

.customer-service-compose {
  margin: 0 12px 12px;
  border-color: #1aa9e8;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(26, 169, 232, 0.09);
}

.customer-service-compose textarea {
  min-height: 96px;
  padding: 13px 52px 38px 14px;
  border-radius: 8px;
}

.customer-service-submit {
  right: 10px;
  bottom: 9px;
  background: linear-gradient(180deg, #27b7ec 0%, #1498d7 100%);
}

.service-tool-button {
  border-radius: 6px;
}

/* Front inner scroll areas */
#products .category-list,
.order-main,
.order-history,
.cart-list,
.file-list,
.favorite-list,
.customer-service-chat,
.customer-service-profile,
.logistics-result-card .tracking-result {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.82) transparent;
}

#products .category-list {
  max-height: min(760px, calc(100vh - 188px));
  overflow-x: hidden;
  overflow-y: auto;
}

.order-main {
  max-height: calc(100vh - 118px);
  overflow-x: hidden;
  overflow-y: auto;
}

.order-history-card,
.workflow-card:has(.cart-list),
.workflow-card:has(.file-list),
.workflow-card:has(.favorite-list) {
  min-height: 0;
  overflow: hidden;
}

.order-history {
  max-height: 540px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

#orders .order-history-card {
  overflow: hidden;
}

#orders .order-history {
  max-height: clamp(420px, calc(100vh - 188px), 620px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #aab8ca #f2f5f8;
  overscroll-behavior: contain;
}

#orders .order-history::-webkit-scrollbar {
  width: 10px;
}

#orders .order-history::-webkit-scrollbar-track {
  background: #f2f5f8;
  border-radius: 999px;
}

#orders .order-history::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b8c5d4 0%, #8fa1b7 100%) content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

#orders .order-history::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #91a4ba 0%, #687d98 100%) content-box;
}

#orders .order-history-pagination {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 20px;
  margin-top: 2px;
  padding: 16px 4px 2px;
  color: #64748b;
  border-top: 1px solid #e5ebf2;
  font-size: 13px;
}

#orders .order-history-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

#orders .order-history-page-numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

#orders .order-history-pages button,
#orders .order-history-page-gap {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #64748b;
  background: #f5f7fa;
  border: 1px solid #e1e7ef;
  border-radius: 3px;
  box-shadow: none;
  line-height: 1;
}

#orders .order-history-page-gap {
  color: #111827;
  background: #f5f7fa;
  font-weight: 900;
}

#orders .order-history-page-numbers button.active {
  color: #fff;
  background: #1f2937;
  border-color: #1f2937;
  font-weight: 900;
}

#orders .order-history-pages button:not(.active):hover:not(:disabled) {
  color: #111827;
  background: #fff3b5;
  border-color: #ffd83d;
}

#orders .order-history-pages button:disabled {
  color: #cbd2dc;
  background: #f8fafc;
  cursor: not-allowed;
}

#orders .order-history-pagination > label {
  margin: 0;
}

#orders .order-history-pagination select {
  width: 128px;
  height: 34px;
  margin: 0;
  padding: 0 34px 0 12px;
  color: #334155;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 3px;
  outline: 0;
  font-size: 13px;
}

#orders .order-history-pagination select:focus {
  border-color: #f2c61f;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .16);
}

@media (max-width: 640px) {
  #orders .order-history-pagination {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  #orders .order-history-pages {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  #orders .order-history-pagination > label {
    flex: 0 0 auto;
  }
}

.cart-list {
  max-height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

.file-list,
.favorite-list {
  max-height: 430px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

.logistics-result-card .tracking-result {
  max-height: 360px;
  overflow: auto;
}

.customer-service-chat {
  overflow-x: hidden;
  overflow-y: auto;
}

.customer-service-profile {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#products .category-list::-webkit-scrollbar,
.order-main::-webkit-scrollbar,
.order-history::-webkit-scrollbar,
.cart-list::-webkit-scrollbar,
.file-list::-webkit-scrollbar,
.favorite-list::-webkit-scrollbar,
.customer-service-chat::-webkit-scrollbar,
.customer-service-profile::-webkit-scrollbar,
.logistics-result-card .tracking-result::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#products .category-list::-webkit-scrollbar-thumb,
.order-main::-webkit-scrollbar-thumb,
.order-history::-webkit-scrollbar-thumb,
.cart-list::-webkit-scrollbar-thumb,
.file-list::-webkit-scrollbar-thumb,
.favorite-list::-webkit-scrollbar-thumb,
.customer-service-chat::-webkit-scrollbar-thumb,
.customer-service-profile::-webkit-scrollbar-thumb,
.logistics-result-card .tracking-result::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(177, 190, 205, 0.92), rgba(122, 139, 159, 0.92))
    content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

#products .category-list::-webkit-scrollbar-thumb:hover,
.order-main::-webkit-scrollbar-thumb:hover,
.order-history::-webkit-scrollbar-thumb:hover,
.cart-list::-webkit-scrollbar-thumb:hover,
.file-list::-webkit-scrollbar-thumb:hover,
.favorite-list::-webkit-scrollbar-thumb:hover,
.customer-service-chat::-webkit-scrollbar-thumb:hover,
.customer-service-profile::-webkit-scrollbar-thumb:hover,
.logistics-result-card .tracking-result::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(122, 139, 159, 1), rgba(86, 103, 126, 1))
    content-box;
}

@media (max-width: 1180px) {
  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .order-center-shell {
    grid-template-columns: 1fr;
  }

  .order-sidebar {
    position: static;
    min-height: 0;
    max-height: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-main {
    max-height: none;
    overflow: visible;
  }

  .order-sidebar small {
    grid-column: 1 / -1;
  }

  .history-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .history-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  #products .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #products .product-layout {
    grid-template-columns: 1fr;
  }

  #products .category-list {
    max-height: 360px;
  }

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

  .products-section .product-card .product-art {
    aspect-ratio: 4 / 3;
  }

  .order-main {
    padding: 14px;
  }

  .order-status-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .order-status-tabs button {
    flex: 0 0 auto;
  }

  .order-filter-grid,
  .checkout-layout,
  .payment-module-grid,
  .logistics-module-grid,
  .support-grid,
  .upload-grid {
    grid-template-columns: 1fr;
  }

  .customer-service-panel {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
  }

  .customer-service-shell {
    grid-template-columns: 1fr;
  }

  .customer-service-profile {
    display: none;
  }
}

/* Refined natural order sidebar */
@media (min-width: 761px) {
  .order-center-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .order-sidebar {
    position: static !important;
    top: auto !important;
    z-index: auto;
    display: grid;
    gap: 5px;
    width: 220px;
    height: auto;
    max-height: none;
    padding: 12px 10px;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.96) 100%);
    border: 1px solid #dde7f2;
    border-radius: 8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 14px 34px rgba(15, 23, 42, 0.08);
  }

  .order-sidebar::before {
    content: "";
    height: 3px;
    margin: -2px 4px 6px;
    background: linear-gradient(90deg, #ffd84d 0%, #f25532 42%, #111827 100%);
    border-radius: 999px;
  }

  .order-sidebar small {
    padding: 13px 12px 6px;
    color: #9aa6b5;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
  }

  .order-sidebar a {
    position: relative;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 11px;
    min-height: 42px;
    padding: 0 12px;
    color: #253244;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .order-sidebar a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .order-sidebar a i {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    color: currentColor;
    border-radius: 6px;
  }

  .order-sidebar a:hover {
    color: #111827;
    background: #f6f9fc;
    border-color: #e4edf6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .order-sidebar a.active {
    color: #fff;
    background: linear-gradient(180deg, #1d2939 0%, #111827 100%);
    border-color: #111827;
    box-shadow:
      0 13px 28px rgba(17, 24, 39, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .order-sidebar a.active::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background: #ffd84d;
    border-radius: 999px;
  }

  .order-sidebar a.active i {
    color: #fff;
  }

  .order-sidebar a.active span {
    padding-left: 1px;
  }

  .order-main {
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .order-center-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .order-sidebar small {
    grid-column: auto;
  }
}

.category-bar {
  justify-content: center;
  gap: clamp(18px, 3vw, 52px);
  min-height: 54px;
  padding: 0 max(18px, calc((100vw - 1760px) / 2 + 18px));
  background: #fff;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #e5ebf3;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
}

.category-chip {
  display: inline-flex;
  grid-template-columns: none;
  flex: 0 0 auto;
  gap: 8px;
  height: 54px;
  min-height: 0;
  padding: 0 2px;
  color: #344054;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.category-chip::after {
  left: 50%;
  right: auto;
  bottom: 0;
  height: 3px;
  background: #ffcf33;
  transform: translateX(-50%);
}

.category-chip span {
  display: block;
  padding-right: 0;
}

.category-chip strong {
  color: inherit;
  font-size: 15px;
  font-weight: 850;
}

.category-chip small,
.category-chip em {
  display: none;
}

.category-chip i {
  width: 20px;
  height: 20px;
  color: #1f2937;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.category-chip:hover,
.category-chip.active {
  color: #111827;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.category-chip:hover strong,
.category-chip.active strong {
  color: #111827;
}

.category-chip:hover i,
.category-chip.active i {
  color: #111827;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.category-chip.active::after {
  width: 100%;
}

.category-chip .cat-tag,
.category-chip:hover .cat-tag,
.category-chip.active .cat-tag {
  transform: rotate(-20deg);
}

@media (max-width: 900px) {
  .category-bar {
    justify-content: flex-start;
    gap: 20px;
    min-height: 50px;
    padding-inline: 14px;
  }

  .category-chip {
    height: 50px;
  }

  .category-chip strong {
    font-size: 14px;
  }
}

.site-header .category-bar {
  justify-content: center;
  gap: clamp(18px, 3.5vw, 54px);
  min-height: 50px;
  height: 50px;
  padding: 0 max(20px, calc((100vw - 1680px) / 2 + 20px));
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-top: 1px solid #f1f3f6;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: none;
}

.site-header .category-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  height: 36px;
  min-height: 36px;
  min-width: 92px;
  padding: 0 14px;
  color: #2f3743;
  background: transparent;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.site-header .category-chip::after {
  display: none;
}

.site-header .category-chip span {
  display: block;
  padding: 0;
  line-height: 1;
}

.site-header .category-chip strong {
  color: inherit;
  font-size: 15px;
  font-weight: 820;
  line-height: 1;
}

.site-header .category-chip small,
.site-header .category-chip em {
  display: none;
}

.site-header .category-chip i {
  position: relative;
  width: 18px;
  height: 18px;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-header .category-chip:hover {
  color: #111827;
  background: #f8fafc;
  transform: none;
}

.site-header .category-chip.active {
  color: #111827;
  background: #ffe95a;
  border: 0;
  box-shadow: 0 8px 16px rgba(255, 210, 0, 0.18);
  transform: none;
}

.site-header .category-chip:hover i,
.site-header .category-chip.active i {
  color: currentColor;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-header .category-mega {
  z-index: 90;
  top: 100%;
}

.site-header .category-mega.is-open {
  transform: translateY(0);
}

.site-header .mega-inner {
  min-height: 374px;
  padding: 30px max(42px, calc((100vw - 1420px) / 2 + 42px));
  background: #fff;
  border-top: 1px solid #f0f2f5;
  border-radius: 0;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.site-header .mega-content {
  grid-template-columns: minmax(660px, 1fr) 380px;
  gap: 32px;
  max-width: 1420px;
}

.site-header .mega-left {
  gap: 4px;
  padding-right: 28px;
  border-right: 1px dashed #e5e7eb;
}

.site-header .mega-row {
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 44px;
  gap: 32px;
  border-bottom: 1px dashed #e5e7eb;
}

.site-header .mega-group {
  height: 36px;
  color: #111827;
  background: #f7f7f8;
  border-radius: 7px;
  font-weight: 900;
}

.site-header .mega-items {
  gap: 14px 34px;
}

.site-header .mega-items button,
.site-header .mega-recommend-list button {
  color: #6b7280;
  font-size: 15px;
}

.site-header .mega-items button:hover,
.site-header .mega-recommend-list button:hover {
  color: #111827;
}

.site-header .mega-preview .product-art {
  width: 300px;
  height: 300px;
  border-radius: 0;
  box-shadow: none;
}

.site-header .mega-close {
  top: 14px;
  right: 18px;
}

.category-backdrop.is-open {
  background: transparent;
}

@media (max-width: 980px) {
  .site-header .category-bar {
    justify-content: flex-start;
    gap: 12px;
    padding-inline: 12px;
  }

  .site-header .category-chip {
    min-width: auto;
    height: 34px;
    min-height: 34px;
    padding-inline: 12px;
  }

  .site-header .category-chip strong {
    font-size: 14px;
  }

  .site-header .category-mega,
  .category-backdrop {
    display: none !important;
  }
}

.site-header .mega-recommend {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px 22px;
  align-content: start;
  padding: 16px;
  background:
    linear-gradient(135deg, #fffdf3 0%, #ffffff 45%, #f4f8ff 100%);
  border: 1px solid #edf1f6;
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.site-header .mega-recommend-head {
  grid-column: 1 / 2;
  display: grid;
  gap: 5px;
  align-content: start;
}

.site-header .mega-recommend-head span {
  color: #f05a36;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.site-header .mega-recommend-head strong {
  grid-column: auto;
  color: #111827;
  font-size: 21px;
  font-weight: 1000;
  line-height: 1.1;
}

.site-header .mega-recommend-list {
  grid-column: 1 / 2;
  gap: 8px;
}

.site-header .mega-recommend-list button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  text-align: left;
  color: #475467;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid transparent;
  border-radius: 10px;
  white-space: normal;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.site-header .mega-recommend-list button:first-child,
.site-header .mega-recommend-list button:hover {
  color: #111827;
  background: #fff;
  border-color: #ffe08a;
  transform: translateX(2px);
}

.site-header .mega-recommend-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

.site-header .mega-recommend-list button small {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 800;
}

.site-header .mega-preview {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4ebf4;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 32px rgba(15, 23, 42, 0.09);
  cursor: pointer;
}

.site-header .mega-preview:hover {
  border-color: #ffd264;
}

.site-header .mega-preview .product-art {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: none;
}

.site-header .mega-preview .product-art.has-image .product-art-main,
.site-header .mega-preview .product-art.image-wide .product-art-main,
.site-header .mega-preview .product-art.image-tall .product-art-main {
  border-radius: 16px 16px 0 0;
  object-fit: cover;
  object-position: center;
}

.site-header .mega-preview .product-art-badge {
  top: 10px;
  left: 10px;
  min-width: 34px;
  height: 28px;
  padding: 0 10px;
  background: #111827;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.2);
}

.site-header .mega-preview-copy {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.site-header .mega-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.site-header .mega-preview-tags em {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  color: #0b6bcb;
  background: #eff8ff;
  border: 1px solid #cfeaff;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.site-header .mega-preview-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: #111827;
  font-size: 17px;
  font-weight: 1000;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.site-header .mega-preview-copy p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 38px;
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.site-header .mega-preview-copy button {
  height: 38px;
  color: #111827;
  background: #ffe95a;
  border: 0;
  border-radius: 10px;
  font-weight: 950;
  cursor: pointer;
}

.site-header .mega-preview-copy button:hover {
  background: #ffd83d;
}

#products .product-layout {
  align-items: start;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px 28px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border: 1px solid #e8eef6;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

/* Product-center mega navigation: uses the live catalogue instead of template data. */
.site-header .category-bar {
  display: none;
}

.site-header .category-mega {
  top: 100%;
  max-height: calc(100vh - 72px);
  overflow: hidden auto;
  background: #fff;
  border-top: 1px solid #eef1f5;
  box-shadow: 0 26px 54px rgba(15, 23, 42, 0.16);
}

.site-header .category-mega.is-open {
  visibility: visible;
}

.catalog-mega-shell {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  width: min(100%, 1920px);
  min-height: 0;
  margin: 0 auto;
  color: #111827;
  background: #fff;
}

.catalog-mega-sidebar {
  padding: 14px 16px 16px;
  background: #f7f8fb;
  border-right: 1px solid #edf0f4;
}

.catalog-mega-all,
.catalog-mega-category,
.catalog-mega-leader,
.catalog-mega-compact,
.catalog-mega-banner,
.catalog-mega-latest button,
.catalog-mega-updates button {
  font: inherit;
  cursor: pointer;
}

.catalog-mega-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  margin-bottom: 8px;
  color: #111827;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 950;
  text-align: left;
}

.catalog-mega-all:hover {
  border-color: #f2c82f;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.07);
}

.catalog-mega-all span {
  font-size: 24px;
  font-weight: 500;
}

.catalog-mega-category-list {
  display: grid;
  gap: 3px;
}

.catalog-mega-category {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 32px;
  padding: 3px 10px;
  color: #283342;
  background: transparent;
  border: 0;
  border-radius: 7px;
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.catalog-mega-category:hover,
.catalog-mega-category.is-active {
  color: #111827;
  background: #ffe95a;
  transform: translateX(2px);
}

.catalog-mega-category > i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: currentColor;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 6px;
  font-style: normal;
  font-size: 13px;
}

.catalog-mega-category .side-category-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.catalog-mega-category span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.catalog-mega-category strong {
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mega-category small {
  display: none;
}

.catalog-mega-category.is-active small,
.catalog-mega-category:hover small {
  color: #725c00;
}

.catalog-mega-category em {
  min-width: 24px;
  color: #8a94a4;
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.catalog-mega-category.is-active em,
.catalog-mega-category:hover em {
  color: #554500;
}

.catalog-mega-main {
  min-width: 0;
  padding: 14px 34px 18px;
}

.catalog-mega-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dfe4ea;
}

.catalog-mega-heading > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.catalog-mega-heading span {
  color: #b08a00;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.catalog-mega-heading h2 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 1000;
}

.site-header .catalog-mega-heading .mega-close {
  position: static;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #677283;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
}

.site-header .catalog-mega-heading .mega-close:hover {
  color: #111827;
  background: #f2f4f7;
}

.catalog-mega-feature {
  display: grid;
  grid-template-columns: minmax(490px, 0.9fr) minmax(520px, 1.1fr);
  gap: 28px;
  padding: 14px 0 16px;
}

.catalog-mega-popular {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 20px;
  min-width: 0;
}

.catalog-mega-leaders {
  display: grid;
  gap: 8px;
}

.catalog-mega-leader {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 7px 12px;
  color: #344054;
  background: #f5f7fa;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.catalog-mega-leader.leader-1 {
  background: #fff0f1;
}

.catalog-mega-leader.leader-2 {
  background: #eafafa;
}

.catalog-mega-leader.leader-3 {
  background: #edf4ff;
}

.catalog-mega-leader:hover {
  border-color: #ffd43b;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.catalog-mega-leader b {
  color: #343a44;
  font-size: 24px;
  font-weight: 500;
}

.catalog-mega-leader span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.catalog-mega-leader strong {
  overflow: hidden;
  color: #202936;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mega-leader small {
  display: -webkit-box;
  overflow: hidden;
  color: #7b8492;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.catalog-mega-compact-list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 3px;
}

.catalog-mega-compact {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 6px;
  color: #344054;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
}

.catalog-mega-compact:hover {
  color: #111827;
  background: #fff7cf;
}

.catalog-mega-compact b {
  font-size: 12px;
}

.catalog-mega-compact span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mega-banner {
  position: relative;
  display: block;
  min-width: 0;
  height: 232px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #183a2d;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.catalog-mega-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 42, 31, 0.92) 0%, rgba(12, 42, 31, 0.62) 42%, rgba(12, 42, 31, 0.08) 76%);
  pointer-events: none;
}

.catalog-mega-banner .product-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.catalog-mega-banner .product-art-backdrop {
  filter: blur(18px) saturate(0.9);
  transform: scale(1.08);
}

.catalog-mega-banner .product-art-main {
  width: 58%;
  margin-left: auto;
  object-fit: cover;
  object-position: center;
}

.catalog-mega-banner .product-art-badge {
  display: none;
}

.catalog-mega-banner-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 7px;
  width: 54%;
  height: 100%;
  padding: 22px 0 22px 30px;
}

.catalog-mega-banner-copy small {
  color: #ffe052;
  font-size: 12px;
  font-weight: 950;
}

.catalog-mega-banner-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(23px, 1.8vw, 30px);
  font-weight: 1000;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-mega-banner-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.catalog-mega-banner-copy b {
  width: max-content;
  margin-top: 6px;
  padding: 8px 14px;
  color: #14251e;
  background: #ffe052;
  border-radius: 999px;
  font-size: 12px;
}

.catalog-mega-foot {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 38px;
}

.catalog-mega-foot section {
  min-width: 0;
}

.catalog-mega-foot h3 {
  margin: 0;
  padding: 0 0 8px;
  color: #111827;
  border-bottom: 1px solid #dfe4ea;
  font-size: 16px;
  font-weight: 1000;
}

.catalog-mega-latest > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  padding-top: 8px;
}

.catalog-mega-latest button {
  display: grid;
  min-width: 0;
  padding: 4px 0;
  color: #344054;
  background: transparent;
  border: 0;
  text-align: left;
}

.catalog-mega-latest button:hover strong {
  color: #d74624;
}

.catalog-mega-latest strong,
.catalog-mega-latest small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-mega-latest strong {
  font-size: 13px;
  font-weight: 750;
}

.catalog-mega-latest small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 10px;
}

.catalog-mega-updates > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 18px;
  padding-top: 8px;
}

.catalog-mega-updates button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 26px;
  padding: 3px 0;
  color: #4b5563;
  background: transparent;
  border: 0;
  text-align: left;
}

.catalog-mega-updates button:hover {
  color: #111827;
}

.catalog-mega-updates em {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #ef3f30;
  border: 1px solid #ff4d42;
  border-radius: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 850;
}

.catalog-mega-updates span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-backdrop.is-open {
  background: rgba(15, 23, 42, 0.12);
}

@media (max-width: 1420px) {
  .catalog-mega-shell {
    grid-template-columns: 286px minmax(0, 1fr);
  }

  .catalog-mega-sidebar {
    padding-inline: 15px;
  }

  .catalog-mega-main {
    padding-inline: 28px;
  }

  .catalog-mega-feature {
    grid-template-columns: minmax(430px, 0.95fr) minmax(430px, 1.05fr);
    gap: 24px;
  }

  .catalog-mega-popular {
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 12px;
  }
}

@media (max-width: 1180px) {
  .catalog-mega-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .catalog-mega-main {
    padding: 20px;
  }

  .catalog-mega-feature {
    grid-template-columns: minmax(0, 1fr) 42%;
  }

  .catalog-mega-popular {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-mega-compact-list {
    display: none;
  }

  .catalog-mega-banner-copy {
    width: 68%;
    padding-left: 24px;
  }
}

@media (max-width: 980px) {
  .site-header .category-mega,
  .category-backdrop {
    display: none !important;
  }
}

#products .category-list {
  height: auto;
  max-height: none;
  min-height: calc(100vh - 124px);
  padding: 18px 16px 96px;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

#products .category-list-head {
  padding: 0 6px 18px;
  border-bottom: 1px solid #eef2f7;
}

#products .category-list-head strong {
  font-size: 26px;
}

#products .side-category {
  grid-template-columns: 26px minmax(0, 1fr) auto 18px;
  min-height: 62px;
  padding: 0 10px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: none;
}

#products .side-category:last-child {
  border-bottom: 0;
  border-radius: 0 0 12px 12px;
}

#products .side-category:hover,
#products .side-category.active {
  color: #111827;
  background: linear-gradient(90deg, #fff6c8 0%, #fffdf2 48%, #fff 100%);
  box-shadow: inset 3px 0 0 #ffd84d;
  transform: none;
}

#products .side-category:first-of-type.active,
#products .side-category:first-of-type:hover {
  border-radius: 10px 10px 0 0;
}

#products .side-category:last-child.active,
#products .side-category:last-child:hover {
  border-radius: 0 0 12px 12px;
}

#products .side-category-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
  color: #111827;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#products .side-category-icon::before {
  width: 15px;
  height: 12px;
  background: transparent;
  border: 1.8px solid currentColor;
  border-radius: 3px;
  box-shadow: none;
  transform: none;
}

#products .side-category-thumb {
  padding: 0;
}

#products .side-category-thumb img {
  display: none;
}

#products .side-category-copy strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
}

#products .side-category-copy small {
  display: none;
}

#products .side-category-count {
  min-width: 30px;
  height: 24px;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid transparent;
}

#products .side-category.active .side-category-count {
  color: #111827;
  background: #ffe95a;
  border-color: #f1c800;
  box-shadow: 0 8px 18px rgba(255, 216, 77, 0.3);
}

#products .side-category.is-stock-row:last-child.active,
#products .side-category.is-stock-row:last-child:hover {
  border-radius: 0 0 12px 12px;
}

#products.is-stock-category .category-list {
  min-height: 0;
  padding-bottom: 14px;
}

#products .side-category-arrow {
  color: #98a2b3;
}

.products-section .product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-left: 0;
}

.products-section .product-card {
  border-color: #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.products-section .product-card .product-art {
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
}

.products-section .product-body {
  gap: 10px;
  padding: 13px 12px 12px;
}

.products-section .product-title-row {
  display: block;
}

.products-section .product-title-row::before {
  height: 24px;
  margin-bottom: 8px;
}

.products-section .product-title-row > strong {
  min-height: 44px;
  font-size: 15px;
  line-height: 1.45;
}

.products-section .product-title-row > span,
.products-section .product-order-strip {
  display: none;
}

.products-section .product-body p {
  min-height: 40px;
  line-height: 1.55;
}

.products-section .tag-row {
  min-height: 25px;
  max-height: 54px;
}

.products-section .tag-row span {
  padding: 4px 8px;
  border: 1px solid #cfeaff;
  border-radius: 999px;
  font-size: 11px;
}

.products-section .card-actions .product-quote {
  min-height: 42px;
  border-radius: 7px;
}

.products-section .product-grid.is-name-card-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
}

#products.products-section.is-name-card-category {
  padding-inline: max(24px, calc((100vw - 1840px) / 2 + 24px));
  padding-bottom: 24px;
}

#products.is-name-card-category .product-layout {
  grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  align-items: start;
}

#products.is-name-card-category .category-list {
  min-height: 0;
  padding-bottom: 14px;
  overflow: visible;
}

.products-section .product-grid.is-name-card-grid .product-card {
  min-width: 0;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.products-section .product-grid.is-name-card-grid .product-card:hover {
  border-color: #d7dee8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.products-section .product-grid.is-name-card-grid .product-card .product-art {
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  border-radius: 6px 6px 0 0;
}

.products-section .product-grid.is-name-card-grid .product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.products-section .product-grid.is-name-card-grid .product-card .product-art-badge {
  width: 28px;
  height: 28px;
  background: #ff3f46;
  border-radius: 6px 0 6px 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.products-section .product-grid.is-name-card-grid .product-body {
  flex: 0 0 auto;
  gap: 9px;
  padding: 13px 10px 15px;
}

.products-section .product-grid.is-name-card-grid .product-title-row {
  gap: 9px;
}

.products-section .product-grid.is-name-card-grid .product-title-row::before {
  content: "推荐";
  padding: 3px 8px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.products-section .product-grid.is-name-card-grid .product-title-row > strong {
  min-height: auto;
  font-size: 16px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.products-section .product-grid.is-name-card-grid .product-body p {
  min-height: 0;
  max-height: 42px;
  color: #8a94a3;
  font-size: 14px;
  line-height: 1.5;
}

.products-section .product-grid.is-name-card-grid .tag-row,
.products-section .product-grid.is-name-card-grid .card-actions {
  display: none;
}

.products-section .product-grid.is-label-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
}

#products.products-section.is-label-category {
  padding-inline: max(24px, calc((100vw - 1840px) / 2 + 24px));
  padding-bottom: 24px;
}

#products.is-label-category .product-layout {
  grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  align-items: start;
}

#products.is-label-category .category-list {
  min-height: 0;
  padding-bottom: 14px;
  overflow: visible;
}

.products-section .product-grid.is-label-grid .product-card {
  min-width: 0;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.products-section .product-grid.is-label-grid .product-card:hover {
  border-color: #d7dee8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.products-section .product-grid.is-label-grid .product-card .product-art {
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  border-radius: 6px 6px 0 0;
}

.products-section .product-grid.is-label-grid .product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.products-section .product-grid.is-label-grid .product-card .product-art-badge {
  width: 28px;
  height: 28px;
  background: #ff3f46;
  border-radius: 6px 0 6px 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.products-section .product-grid.is-label-grid .product-body {
  flex: 0 0 auto;
  gap: 9px;
  padding: 13px 10px 15px;
}

.products-section .product-grid.is-label-grid .product-title-row {
  gap: 9px;
}

.products-section .product-grid.is-label-grid .product-title-row::before {
  content: "推荐";
  padding: 3px 8px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.products-section .product-grid.is-label-grid .product-title-row > strong {
  min-height: auto;
  font-size: 16px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.products-section .product-grid.is-label-grid .product-body p {
  min-height: 0;
  max-height: 42px;
  color: #8a94a3;
  font-size: 14px;
  line-height: 1.5;
}

.products-section .product-grid.is-label-grid .tag-row,
.products-section .product-grid.is-label-grid .card-actions {
  display: none;
}

.products-section .product-grid.is-book-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
}

#products.products-section.is-book-category {
  padding-inline: max(24px, calc((100vw - 1840px) / 2 + 24px));
  padding-bottom: 24px;
}

#products.is-book-category .product-layout {
  grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  align-items: start;
}

#products.is-book-category .category-list {
  min-height: 0;
  padding-bottom: 14px;
  overflow: visible;
}

.products-section .product-grid.is-book-grid .product-card {
  min-width: 0;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.products-section .product-grid.is-book-grid .product-card:hover {
  border-color: #d7dee8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.products-section .product-grid.is-book-grid .product-card .product-art {
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  border-radius: 6px 6px 0 0;
}

.products-section .product-grid.is-book-grid .product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.products-section .product-grid.is-book-grid .product-card .product-art-badge {
  width: 28px;
  height: 28px;
  background: #ff3f46;
  border-radius: 6px 0 6px 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.products-section .product-grid.is-book-grid .product-body {
  flex: 0 0 auto;
  gap: 9px;
  padding: 13px 10px 15px;
}

.products-section .product-grid.is-book-grid .product-title-row {
  gap: 9px;
}

.products-section .product-grid.is-book-grid .product-title-row::before {
  content: "\63a8\8350";
  padding: 3px 8px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.products-section .product-grid.is-book-grid .product-title-row > strong {
  min-height: auto;
  font-size: 16px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
}

.products-section .product-grid.is-book-grid .product-body p {
  min-height: 0;
  max-height: 42px;
  color: #8a94a3;
  font-size: 14px;
  line-height: 1.5;
}

.products-section .product-grid.is-book-grid .tag-row,
.products-section .product-grid.is-book-grid .card-actions {
  display: none;
}

.products-section .product-grid.is-showcase-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 22px 18px;
}

#products.products-section.is-showcase-category {
  padding-inline: max(24px, calc((100vw - 1840px) / 2 + 24px));
  padding-bottom: 24px;
}

#products.is-showcase-category .product-layout {
  grid-template-columns: minmax(220px, 252px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  align-items: start;
}

#products.is-showcase-category .category-list {
  min-height: 0;
  padding-bottom: 14px;
  overflow: visible;
}

.products-section .product-grid.is-showcase-grid .product-card {
  min-width: 0;
  height: auto;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.products-section .product-grid.is-showcase-grid .product-card:hover {
  border-color: #d7dee8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.products-section .product-grid.is-showcase-grid .product-card .product-art {
  padding: 0;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  border-radius: 6px 6px 0 0;
}

.products-section .product-grid.is-showcase-grid .product-card .product-art.has-image .product-art-main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.products-section .product-grid.is-showcase-grid .product-art.image-wide .product-art-main,
.products-section .product-grid.is-showcase-grid .product-art.image-tall .product-art-main {
  width: 100%;
  height: 100%;
}

.products-section .product-grid.is-showcase-grid .product-card .product-art-badge {
  width: 28px;
  height: 28px;
  background: #ff3f46;
  border-radius: 6px 0 6px 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.products-section .product-grid.is-showcase-grid .product-body {
  flex: 0 0 auto;
  gap: 9px;
  padding: 13px 10px 15px;
}

.products-section .product-grid.is-showcase-grid .product-title-row {
  display: block;
  gap: 9px;
}

.products-section .product-grid.is-showcase-grid .product-title-row::before {
  content: "\63a8\8350";
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 3px 8px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.products-section .product-grid.is-showcase-grid .product-title-row > strong {
  display: -webkit-box;
  min-height: auto;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.products-section .product-grid.is-showcase-grid .product-title-row > span,
.products-section .product-grid.is-showcase-grid .product-order-strip {
  display: none;
}

.products-section .product-grid.is-showcase-grid .product-body p {
  display: -webkit-box;
  min-height: 0;
  max-height: 42px;
  margin: 0;
  overflow: hidden;
  color: #8a94a3;
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.products-section .product-grid.is-showcase-grid .tag-row,
.products-section .product-grid.is-showcase-grid .card-actions {
  display: none;
}

.products-section .product-grid.is-stock-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.products-section .product-grid.is-stock-grid .card-actions {
  display: none;
}

.products-section .product-grid.is-stock-grid .tag-row {
  display: none;
}

@media (max-width: 1480px) {
  .products-section .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .products-section .product-grid.is-name-card-grid,
  .products-section .product-grid.is-label-grid,
  .products-section .product-grid.is-book-grid,
  .products-section .product-grid.is-showcase-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  #products .product-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .products-section .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .products-section .product-grid.is-name-card-grid,
  .products-section .product-grid.is-label-grid,
  .products-section .product-grid.is-book-grid,
  .products-section .product-grid.is-showcase-grid,
  .products-section .product-grid.is-stock-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #products .product-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  #products .category-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-right: 0;
    padding: 0 0 8px;
  }

  #products .category-list-head {
    display: none;
  }

  #products .side-category {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
  }

  #products .side-category-icon,
  #products .side-category-count,
  #products .side-category-arrow {
    display: none;
  }

  .products-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .products-section .product-grid.is-name-card-grid,
  .products-section .product-grid.is-label-grid,
  .products-section .product-grid.is-book-grid,
  .products-section .product-grid.is-showcase-grid,
  .products-section .product-grid.is-stock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.company-carousel.products-section {
  padding-inline: 42px;
}

.company-carousel .company-carousel-nav {
  color: #111827;
  background: #ffe44d;
  border-color: #f1cf27;
  box-shadow: 0 12px 28px rgba(111, 86, 0, 0.18);
}

.company-carousel .company-carousel-nav:hover,
.company-carousel .company-carousel-nav:focus-visible {
  background: #ffd92f;
  border-color: #e8bf00;
  box-shadow: 0 16px 34px rgba(111, 86, 0, 0.24);
  transform: translateY(-50%) scale(1.04);
}

.company-carousel.products-section .product-grid.company-carousel-track {
  display: flex;
  grid-template-columns: none;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.company-carousel.products-section .product-card.company-carousel-card {
  flex: 0 0 calc((100% - 48px) / 4);
  width: calc((100% - 48px) / 4);
  min-width: 0;
  max-width: calc((100% - 48px) / 4);
  height: auto;
  align-self: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}

.company-carousel.products-section .product-card.company-carousel-card:hover,
.company-carousel.products-section .product-card.company-carousel-card:focus-within {
  border-color: #d7dee8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.company-carousel.products-section .product-card.company-carousel-card::before {
  display: none;
}

.company-carousel.products-section .product-card.company-carousel-card .product-art {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  border-radius: 6px 6px 0 0;
}

.company-carousel.products-section .product-card.company-carousel-card .product-art.has-image .product-art-main,
.company-carousel.products-section .product-card.company-carousel-card .product-art.image-wide .product-art-main,
.company-carousel.products-section .product-card.company-carousel-card .product-art.image-tall .product-art-main {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  filter: none;
  box-shadow: none;
}

.company-carousel.products-section .product-card.company-carousel-card:hover .product-art.has-image .product-art-main {
  filter: none;
  transform: none;
}

.company-carousel.products-section .product-card.company-carousel-card .product-art-badge {
  top: 0;
  left: 0;
  width: 40px;
  min-width: 40px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  color: #fff;
  background: #ff3f46;
  border-radius: 6px 0 8px 0;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
}

.company-carousel.products-section .product-card.company-carousel-card .product-body {
  display: grid;
  grid-template-rows: 60px 42px;
  gap: 9px;
  height: 142px;
  min-height: 142px;
  align-content: start;
  box-sizing: border-box;
  padding: 13px 10px 15px;
}

.company-carousel.products-section .product-card.company-carousel-card .product-title-row {
  display: block;
}

.company-carousel.products-section .product-card.company-carousel-card .product-title-row::before {
  content: "\63a8\8350";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 3px 8px;
  color: #ff4d4f;
  background: #fff1f0;
  border: 1px solid #ffd4d1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
}

.company-carousel.products-section .product-card.company-carousel-card .product-title-row > strong {
  display: -webkit-box;
  min-height: 22px;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.company-carousel.products-section .product-card.company-carousel-card .product-title-row > span,
.company-carousel.products-section .product-card.company-carousel-card .tag-row,
.company-carousel.products-section .product-card.company-carousel-card .card-actions {
  display: none;
}

.company-carousel.products-section .product-card.company-carousel-card .product-body p {
  display: -webkit-box;
  min-height: 42px;
  max-height: 42px;
  margin: 0;
  overflow: hidden;
  color: #8a94a3;
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1180px) {
  .company-carousel.products-section .product-card.company-carousel-card {
    flex-basis: calc((100% - 16px) / 2);
    width: calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
  }
}

@media (max-width: 680px) {
  .company-carousel.products-section {
    padding-inline: 38px;
  }

  .company-carousel.products-section .product-card.company-carousel-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .product-detail-original-info {
    grid-template-columns: 1fr;
  }

  .product-detail-original-info article.wide {
    grid-column: auto;
  }

  .pvc-upload-head,
  .pvc-upload-label,
  .pvc-certificate-field {
    align-items: flex-start;
    flex-direction: column;
  }

  .pvc-upload-fields {
    grid-template-columns: 1fr;
  }

  .pvc-file-preview-list {
    grid-template-columns: 1fr;
  }

  .pvc-file-preview-card {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 9px 12px;
    min-height: 112px;
    padding: 10px 11px 10px 14px;
  }

  .pvc-file-preview-thumb {
    width: 116px;
    height: 90px;
  }

  .local-image-preview-dialog {
    width: 96vw;
    height: 88vh;
  }

  .local-image-preview-shell > header {
    min-height: 60px;
    padding: 10px 10px 10px 15px;
  }

  .local-image-preview-shell [data-local-image-preview-close] {
    min-width: 44px;
    min-height: 40px;
    padding: 0 12px;
  }

  .local-image-preview-shell [data-local-image-preview-close] span {
    display: none;
  }

  .local-image-preview-stage {
    padding: 12px;
  }

  .pvc-config-row {
    grid-template-columns: 1fr;
  }

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

  .pvc-config-row > strong,
  .product-info-row > strong {
    justify-items: start;
    min-height: 34px;
    padding-inline: 12px;
  }

  .pvc-material-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-material-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .digital-quantity-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .digital-quantity-options > span,
  .digital-custom-quantity {
    grid-column: 1 / -1;
  }

  .digital-custom-quantity {
    justify-self: stretch;
    width: 100%;
  }

  .pvc-inline-options select,
  .pvc-inline-options input[type="number"],
  .product-info-controls > select,
  .product-info-controls > input[type="number"] {
    flex: 1 1 150px;
  }
}

@media (max-width: 460px) {
  .card-material-options {
    grid-template-columns: 1fr;
  }

  .product-dimensions {
    flex-wrap: wrap;
  }

  .product-dimensions > input[type="number"] {
    flex: 1 1 120px;
    width: 100%;
  }

  .digital-card-pricing-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .digital-quantity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .digital-quantity-options > span,
  .digital-custom-quantity {
    grid-column: 1 / -1;
  }
}

/* Polished logistics query result */
.logistics-module-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.logistics-card {
  grid-template-columns: minmax(170px, .34fr) minmax(360px, 1fr) minmax(132px, 168px);
  align-items: end;
  gap: 14px;
  padding: 16px 18px;
}

.logistics-card > h3 {
  align-self: center;
  color: #111827;
  font-size: 18px;
  font-weight: 950;
}

.logistics-card > label {
  min-width: 0;
  font-weight: 850;
}

.logistics-card > button[type="submit"] {
  width: 100%;
  min-height: 44px;
  box-shadow: none;
}

.logistics-result-card {
  min-height: 0;
  gap: 14px;
  background: #fff;
}

.logistics-result-card > h3 {
  color: #111827;
  font-size: 20px;
  font-weight: 950;
}

.logistics-result-card .tracking-result {
  display: block;
  min-height: 156px;
  max-height: none;
  overflow: visible;
  padding: 18px;
  color: #64748b;
  background: linear-gradient(135deg, #f8fbff 0%, #fffdf7 100%);
  border: 1px dashed #cfdbe8;
  border-radius: 12px;
  scrollbar-gutter: auto;
}

.logistics-result-card .tracking-result:has(.tracking-order-result) {
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (max-width: 820px) {
  .logistics-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .logistics-card > h3 {
    align-self: auto;
  }
}

.tracking-empty-state {
  display: grid;
  min-height: 118px;
  place-content: center;
  gap: 7px;
  text-align: center;
}

.tracking-empty-state::before {
  content: "查";
  display: grid;
  width: 42px;
  height: 42px;
  margin: 0 auto 4px;
  place-items: center;
  color: #111827;
  background: #ffe45c;
  border: 5px solid #fff7c4;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 950;
}

.tracking-empty-state strong {
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

.tracking-empty-state span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.tracking-empty-state.is-loading::before {
  content: "";
  border: 5px solid #fff3ad;
  border-top-color: #e9ad00;
  animation: tracking-loading-spin .8s linear infinite;
}

.tracking-empty-state.is-error::before {
  content: "!";
  color: #b42318;
  background: #fee4e2;
  border-color: #fff1f0;
}

@keyframes tracking-loading-spin {
  to { transform: rotate(360deg); }
}

.tracking-order-result {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.tracking-summary-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 218, 53, .22), transparent 32%),
    linear-gradient(118deg, #f8fbff 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #dce7f2;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.tracking-summary-main {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 7px;
}

.tracking-eyebrow {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.tracking-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.tracking-title-line > strong {
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.25;
}

.tracking-status-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  color: #9a6700;
  background: #fff4c2;
  border: 1px solid #f6d862;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.tracking-status-pill.is-in_production,
.tracking-status-pill.is-pending_production,
.tracking-status-pill.is-pending_confirmation {
  color: #b54708;
  background: #fff3e0;
  border-color: #ffd09a;
}

.tracking-status-pill.is-pending_shipping,
.tracking-status-pill.is-shipped {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}

.tracking-status-pill.is-completed {
  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

.tracking-status-pill.is-cancelled,
.tracking-status-pill.is-after_sales {
  color: #b42318;
  background: #fff1f0;
  border-color: #fecdca;
}

.tracking-summary-main > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.tracking-summary-main > p i {
  width: 3px;
  height: 3px;
  background: #94a3b8;
  border-radius: 50%;
}

.tracking-payment-summary {
  display: grid;
  min-width: min(340px, 42%);
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin: 0;
}

.tracking-payment-summary > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #e7edf4;
  border-radius: 9px;
}

.tracking-payment-summary dt {
  color: #718096;
  font-size: 11px;
  font-weight: 850;
}

.tracking-payment-summary dd {
  overflow: hidden;
  margin: 0;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-payment-summary .is-total dd {
  color: #ef4d2f;
  font-size: 19px;
}

.tracking-progress-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px 16px 10px;
  background: #fff;
  border: 1px solid #e4ebf3;
  border-radius: 12px;
}

.tracking-block-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tracking-block-heading strong {
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.tracking-block-heading span {
  color: #718096;
  font-size: 11px;
  font-weight: 750;
}

.tracking-progress-card .order-progress-shell.is-compact {
  padding: 7px 2px 3px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.tracking-progress-card .order-progress-shell.is-compact .order-progress-scroll {
  padding: 4px 2px 5px;
}

.tracking-progress-card .order-progress-shell.is-compact .order-progress {
  min-width: 650px;
}

.tracking-progress-card .order-progress-shell.is-compact .order-progress-step > strong {
  font-size: 12px;
}

.tracking-order-result .order-flow-actions.compact {
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tracking-order-result .order-flow-actions.compact .flow-actions-head {
  padding: 0 2px;
}

.tracking-order-result .order-flow-actions.compact .flow-actions-head strong {
  font-size: 15px;
}

.tracking-order-result .order-flow-actions.compact .flow-actions-head span {
  color: #718096;
  font-size: 11px;
}

.tracking-order-result .order-flow-actions.compact .flow-action-card {
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: none;
}

.tracking-order-result .order-flow-actions.compact .flow-action-card.wait {
  background: linear-gradient(105deg, #f8fafc 0%, #f3f7fb 100%);
  border-color: #dce6f0;
  border-left-color: #94a3b8;
}

.tracking-order-result .order-flow-actions.compact .flow-action-card.need {
  background: linear-gradient(105deg, #fffaf0 0%, #fff6df 100%);
}

.tracking-order-result .order-flow-actions.compact .flow-action-card.view {
  background: linear-gradient(105deg, #f0f7ff 0%, #eaf5ff 100%);
}

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

.tracking-info-item {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 13px 15px 13px 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4ebf3;
  border-radius: 10px;
}

.tracking-info-item::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  background: #7aa7db;
  border-radius: 0 999px 999px 0;
}

.tracking-info-item.is-invoice::before { background: #f4b942; }
.tracking-info-item.is-service::before { background: #8b93a7; }
.tracking-info-item.is-route::before { background: #4eb996; }

.tracking-info-item > span {
  color: #718096;
  font-size: 11px;
  font-weight: 900;
}

.tracking-info-item > strong {
  color: #253247;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tracking-info-item a {
  color: #0f68db;
  text-decoration: none;
}

.tracking-attachment-row {
  display: grid;
  gap: 10px;
  padding: 13px 15px;
  background: #f8fafc;
  border: 1px solid #e4ebf3;
  border-radius: 10px;
}

.tracking-attachment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tracking-attachment-head > span {
  color: #334155;
  font-size: 13px;
  font-weight: 950;
}

.tracking-attachment-head > small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.tracking-file-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.tracking-file-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 10px;
  color: #334155;
  background: #fff;
  border: 1px solid #dfe7f0;
  border-radius: 999px;
}

.tracking-file-chip b {
  overflow: hidden;
  max-width: 280px;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-file-chip em {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  color: #475467;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.tracking-file-chip em.is-approved {
  color: #027a48;
  background: #ecfdf3;
}

.tracking-file-chip em.is-warning {
  color: #b42318;
  background: #fff1f0;
}

.tracking-file-chip em.is-pending {
  color: #9a6700;
  background: #fff8db;
}

.tracking-file-empty {
  color: #94a3b8;
  font-size: 12px;
}

.tracking-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.tracking-result-footer > span {
  color: #718096;
  font-size: 12px;
}

.tracking-result-footer .inline-detail-button {
  min-width: 150px;
  min-height: 40px;
  margin: 0;
  padding: 0 18px;
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.tracking-result-footer .inline-detail-button:hover {
  background: #253247;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .tracking-summary-card {
    align-items: stretch;
    flex-direction: column;
  }

  .tracking-payment-summary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .tracking-summary-card,
  .tracking-progress-card {
    padding: 14px;
  }

  .tracking-title-line > strong {
    font-size: 16px;
  }

  .tracking-payment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tracking-info-grid {
    grid-template-columns: 1fr;
  }

  .tracking-block-heading,
  .tracking-order-result .flow-actions-head,
  .tracking-result-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .tracking-order-result .flow-action-card {
    grid-template-columns: 1fr;
  }

  .tracking-order-result .flow-action-card button,
  .tracking-result-footer .inline-detail-button {
    width: 100%;
  }

  .tracking-file-chip {
    width: 100%;
    justify-content: space-between;
    border-radius: 8px;
  }

  .tracking-file-chip b {
    max-width: calc(100% - 84px);
  }
}

/* Independent batch-order workbench */
.order-center-panel.batch-order-section.active {
  display: block;
}

.order-main .batch-order-section {
  min-height: 720px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.batch-order-workbench {
  display: grid;
  gap: 18px;
  color: #172033;
}

.batch-order-workbench.is-submitting {
  cursor: wait;
}

.batch-order-workbench.is-submitting .batch-upload-card,
.batch-order-workbench.is-submitting .batch-recipient-card,
.batch-order-workbench.is-submitting .batch-products-card {
  opacity: .72;
  pointer-events: none;
}

.batch-order-hero,
.batch-upload-card,
.batch-recipient-card,
.batch-products-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(22, 34, 54, .055);
}

.batch-order-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 148px;
  padding: 28px 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 16%, rgba(255, 221, 55, .34), transparent 22%),
    linear-gradient(135deg, #fffdf3 0%, #fff 48%, #f7faff 100%);
  border-color: #eadfa8;
}

.batch-order-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 100%;
  background: linear-gradient(180deg, #ffe23f, #ffc72f);
}

.batch-order-hero > div:first-child {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.batch-order-hero .eyebrow {
  display: inline-flex;
  padding: 5px 10px;
  color: #7c5e00;
  background: #fff3ad;
  border: 1px solid #ffe062;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
}

.batch-order-hero h2 {
  margin: 10px 0 8px;
  color: #101828;
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.22;
  letter-spacing: -.025em;
}

.batch-order-hero p {
  max-width: 720px;
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.8;
}

.batch-order-route-note {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 190px;
  gap: 6px;
  padding: 17px 19px;
  color: #17304d;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #dbe5ef;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .07);
}

.batch-order-route-note b {
  font-size: 15px;
}

.batch-order-route-note span {
  color: #667085;
  font-size: 12px;
}

.batch-order-route-note::before {
  content: "✓";
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #172033;
  background: #ffe13e;
  border-radius: 50%;
  font-weight: 1000;
}

.batch-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.batch-flow-strip span {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 1px 10px;
  min-width: 0;
  padding: 13px 14px;
  color: #35445a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
}

.batch-flow-strip b {
  grid-row: span 2;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #172033;
  background: #eef2f7;
  border-radius: 9px;
  font-size: 12px;
}

.batch-flow-strip span.active {
  background: #fffdf3;
  border-color: #f1d766;
}

.batch-flow-strip span.active b {
  background: #ffe13e;
}

.batch-flow-strip em {
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-flow-strip small {
  overflow: hidden;
  color: #8993a2;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-upload-card,
.batch-recipient-card,
.batch-products-card {
  padding: 24px;
}

.batch-after-upload-grid {
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.65fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.batch-after-upload-grid[hidden] {
  display: none;
}

.batch-after-upload-grid > section {
  min-width: 0;
}

.batch-after-upload-grid .batch-products-card {
  display: flex;
  flex-direction: column;
}

.batch-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.batch-step-number {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #172033;
  background: #ffe13e;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 1000;
}

.batch-section-heading > div {
  min-width: 0;
}

.batch-section-heading h3 {
  margin: 0 0 3px;
  color: #111827;
  font-size: 19px;
  font-weight: 1000;
}

.batch-section-heading p {
  margin: 0;
  color: #7b8798;
  font-size: 12px;
}

.batch-count-pill {
  margin-left: auto;
  padding: 6px 11px;
  color: #596579;
  background: #f5f7fa;
  border: 1px solid #e3e8ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.batch-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr);
  gap: 16px;
}

.batch-dropzone {
  display: grid;
  min-height: 205px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  color: #1e2c40;
  background:
    linear-gradient(135deg, rgba(255, 226, 62, .12), transparent 40%),
    #f9fbfd;
  border: 1.5px dashed #aebed0;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.batch-dropzone:hover,
.batch-dropzone:focus-visible,
.batch-dropzone.is-dragging {
  background: #fffdf2;
  border-color: #e5b900;
  box-shadow: 0 0 0 4px rgba(255, 215, 48, .16);
  outline: 0;
}

.batch-dropzone.is-dragging {
  transform: translateY(-2px);
}

.batch-upload-plus {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #fff;
  background: #172033;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(17, 24, 39, .18);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.batch-dropzone strong {
  margin-top: 2px;
  font-size: 17px;
}

.batch-dropzone p {
  margin: 0;
  color: #7b8798;
  font-size: 12px;
}

.batch-dropzone button,
.batch-empty-state button,
.batch-add-files {
  min-height: 36px;
  padding: 0 15px;
  color: #152033;
  background: #ffe13e;
  border: 1px solid #f2c900;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.batch-dropzone button {
  margin-top: 7px;
}

.batch-upload-status {
  min-height: 34px;
  margin-top: 9px;
  padding: 8px 11px;
  color: #687589;
  background: #f6f8fb;
  border-radius: 8px;
  font-size: 12px;
}

.batch-upload-status[data-state="uploading"] {
  color: #8b6400;
  background: #fff8d8;
}

.batch-upload-status[data-state="done"] {
  color: #08734e;
  background: #eaf8f2;
}

.batch-upload-status[data-state="error"] {
  color: #c83f2d;
  background: #fff1ee;
}

.batch-upload-guide {
  min-height: 205px;
  padding: 20px;
  background: #f4f8fd;
  border: 1px solid #d7e5f4;
  border-radius: 12px;
}

.batch-upload-guide > strong {
  color: #1563b5;
  font-size: 15px;
}

.batch-upload-guide ul {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.batch-upload-guide li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 9px;
  color: #41526a;
  font-size: 12px;
  line-height: 1.55;
}

.batch-upload-guide li i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #1c2b3e;
  background: #ffe13e;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
}

.batch-upload-guide em {
  display: block;
  padding: 10px 11px;
  color: #705b12;
  background: #fff8d7;
  border: 1px solid #f5df89;
  border-radius: 8px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.batch-file-example {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  color: #667085;
  background: #fafbfc;
  border: 1px solid #edf0f4;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.6;
}

.batch-file-example b {
  flex: 0 0 auto;
  color: #344054;
}

.batch-recipient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.batch-recipient-grid label,
.batch-item-fields label {
  display: grid;
  gap: 7px;
  color: #475467;
  font-size: 12px;
  font-weight: 850;
}

.batch-recipient-address {
  grid-column: span 3;
}

.batch-after-upload-grid .batch-recipient-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.batch-after-upload-grid .batch-recipient-date,
.batch-after-upload-grid .batch-recipient-address {
  grid-column: 1 / -1;
}

.batch-recipient-grid input,
.batch-item-fields input,
.batch-item-fields select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 12px;
  color: #172033;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  outline: 0;
  font-size: 13px;
  font-weight: 750;
}

.batch-recipient-grid input:focus,
.batch-item-fields input:focus,
.batch-item-fields select:focus {
  border-color: #dfb400;
  box-shadow: 0 0 0 3px rgba(255, 216, 48, .17);
}

.batch-add-files {
  margin-left: auto;
  color: #42506a;
  background: #fff;
  border-color: #dbe3ec;
}

.batch-add-files:hover {
  color: #172033;
  border-color: #e4bd11;
  background: #fffdf4;
}

.batch-order-list {
  display: grid;
  gap: 12px;
  max-height: clamp(250px, calc(100vh - 300px), 560px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .82) transparent;
}

.batch-empty-state {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #697589;
  background: #fafbfd;
  border: 1px dashed #cdd8e5;
  border-radius: 12px;
  text-align: center;
}

.batch-empty-state strong {
  color: #2d3b50;
  font-size: 16px;
}

.batch-empty-state p {
  margin: 0 0 10px;
  font-size: 12px;
}

.batch-empty-icon {
  position: relative;
  width: 54px;
  height: 44px;
  margin-bottom: 5px;
  background: #edf2f7;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
}

.batch-empty-icon::before {
  content: "+";
  position: absolute;
  right: -8px;
  top: -8px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #172033;
  background: #ffe13e;
  border-radius: 50%;
  font-weight: 1000;
}

.batch-order-item {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 178px;
  gap: 16px;
  padding: 15px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.batch-after-upload-grid .batch-order-item {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
}

.batch-order-item:focus-within {
  border-color: #ebc52b;
  box-shadow: 0 10px 25px rgba(30, 41, 59, .07);
}

.batch-item-file {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-content: start;
  gap: 8px 10px;
  min-width: 0;
  padding: 12px;
  background: #f7f9fc;
  border-radius: 9px;
}

.batch-file-type {
  grid-row: span 3;
  display: grid;
  width: 54px;
  height: 64px;
  place-items: center;
  color: #172033;
  background: #fff5b8;
  border: 1px solid #f0d44d;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 1000;
}

.batch-item-file strong,
.batch-item-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-item-file strong {
  align-self: end;
  color: #27364b;
  font-size: 12px;
}

.batch-item-file span {
  color: #7c8797;
  font-size: 11px;
}

.batch-uploaded-badge {
  justify-self: start;
  padding: 4px 7px;
  color: #08734e !important;
  background: #e7f8f0;
  border-radius: 999px;
  font-weight: 900;
}

.batch-item-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.batch-item-field-wide {
  grid-column: span 2;
}

.batch-after-upload-grid .batch-item-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.batch-after-upload-grid .batch-item-field-wide {
  grid-column: auto;
}

.batch-after-upload-grid .batch-item-fields > label:last-child {
  grid-column: 1 / -1;
}

.batch-item-quote {
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #f5dda0;
  border-radius: 9px;
}

.batch-after-upload-grid .batch-item-quote {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.batch-after-upload-grid .batch-item-quote em,
.batch-after-upload-grid .batch-item-actions {
  grid-column: 1 / -1;
}

.batch-after-upload-grid .batch-item-actions {
  justify-content: flex-end;
}

.batch-item-quote small {
  color: #7a6840;
  font-size: 11px;
}

.batch-item-quote strong {
  color: #e34c24;
  font-size: 21px;
}

.batch-item-quote em {
  color: #7a6840;
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.batch-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.batch-item-actions button {
  min-height: 34px;
  padding: 0 10px;
  color: #516078;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.batch-item-refresh {
  flex: 1;
  color: #172033;
  background: #ffe13e;
  border: 1px solid #e8c21f;
}

.batch-item-remove {
  color: #9c3b2f;
  background: #fff;
  border: 1px solid #efd5d0;
}

.batch-submit-bar {
  position: static;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto 230px;
  align-items: center;
  gap: 22px;
  margin: 18px -24px -24px;
  padding: 17px 19px;
  background: rgba(23, 32, 51, .96);
  border: 1px solid #26354b;
  border-radius: 0 0 13px 13px;
  box-shadow: 0 -10px 28px rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px);
}

.batch-summary-items {
  display: flex;
  gap: 24px;
}

.batch-summary-items span,
.batch-summary-total {
  display: grid;
  gap: 3px;
}

.batch-summary-items small,
.batch-summary-total small,
.batch-summary-total span {
  color: #aeb9c9;
  font-size: 11px;
}

.batch-summary-items strong {
  color: #fff;
  font-size: 14px;
}

.batch-summary-total {
  min-width: 160px;
  text-align: right;
}

.batch-summary-total strong {
  color: #ffe13e;
  font-size: 23px;
}

.batch-submit-bar > button {
  min-height: 48px;
  padding: 0 22px;
  color: #172033;
  background: linear-gradient(180deg, #ffe85d, #ffd629);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 10px 22px rgba(255, 214, 41, .22);
  font-size: 14px;
  font-weight: 1000;
  cursor: pointer;
}

.batch-submit-bar > button:disabled {
  color: #8d96a4;
  background: #e6e9ee;
  box-shadow: none;
  cursor: not-allowed;
}

.batch-after-upload-grid .batch-submit-bar {
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 14px;
}

.batch-after-upload-grid .batch-summary-items {
  display: none;
}

.batch-after-upload-grid .batch-summary-total {
  text-align: left;
}

@media (max-width: 1300px) {
  .batch-order-item {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .batch-item-quote {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }

  .batch-item-quote em {
    display: none;
  }
}

@media (max-width: 1250px) {
  .batch-after-upload-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1050px) {

  .batch-upload-grid {
    grid-template-columns: 1fr;
  }

  .batch-upload-guide {
    min-height: 0;
  }

  .batch-recipient-grid {
    grid-template-columns: 1fr 1fr;
  }

  .batch-recipient-address {
    grid-column: span 2;
  }

  .batch-item-fields {
    grid-template-columns: 1fr 1fr;
  }

  .batch-submit-bar {
    grid-template-columns: 1fr auto;
  }

  .batch-summary-items {
    display: none;
  }
}

@media (max-width: 760px) {
  .batch-order-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 20px;
  }

  .batch-order-route-note {
    width: 100%;
    flex-basis: auto;
  }

  .batch-flow-strip {
    grid-template-columns: 1fr 1fr;
  }

  .batch-upload-card,
  .batch-recipient-card,
  .batch-products-card {
    padding: 18px;
  }

  .batch-file-example {
    flex-direction: column;
  }

  .batch-recipient-grid,
  .batch-item-fields {
    grid-template-columns: 1fr;
  }

  .batch-after-upload-grid .batch-recipient-grid,
  .batch-after-upload-grid .batch-item-fields {
    grid-template-columns: 1fr;
  }

  .batch-recipient-address,
  .batch-item-field-wide {
    grid-column: auto;
  }

  .batch-after-upload-grid .batch-recipient-date,
  .batch-after-upload-grid .batch-recipient-address,
  .batch-after-upload-grid .batch-item-field-wide,
  .batch-after-upload-grid .batch-item-fields > label:last-child {
    grid-column: auto;
  }

  .batch-order-item {
    grid-template-columns: 1fr;
  }

  .batch-after-upload-grid .batch-order-item {
    grid-template-columns: 1fr;
  }

  .batch-item-quote {
    grid-column: auto;
    grid-template-columns: 1fr auto;
  }

  .batch-after-upload-grid .batch-item-quote {
    grid-column: auto;
    grid-template-columns: 1fr auto;
  }

  .batch-submit-bar {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
    gap: 12px;
    margin: 18px -18px -18px;
    padding: 12px 14px;
  }

  .batch-summary-total {
    text-align: left;
  }

  .batch-summary-total span {
    display: none;
  }

  .batch-submit-bar > button {
    min-height: 44px;
    padding: 0 14px;
  }
}

@media (max-width: 520px) {
  .batch-section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .batch-count-pill,
  .batch-add-files {
    margin-left: 50px;
  }

  .batch-dropzone {
    min-height: 185px;
    padding: 18px;
  }

  .batch-flow-strip {
    grid-template-columns: 1fr;
  }

  .batch-item-file {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .batch-file-type {
    width: 48px;
    height: 58px;
  }
}

/* Template-inspired footer composition in Xinming's white and yellow palette. */
.site-footer.site-footer--expanded.site-footer--template {
  color: #4f5968;
  background: #fff;
  border-top: 0;
}

.footer-promise-bar {
  background: #fffdf4;
  border-top: 4px solid #ffe13e;
  border-bottom: 1px solid #ece8d4;
}

.footer-promise-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(1600px, calc(100% - 72px));
  margin: 0 auto;
}

.footer-promise-inner article {
  display: flex;
  min-width: 0;
  min-height: 90px;
  padding: 18px 26px;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.footer-promise-inner article + article {
  border-left: 1px solid #ebe5c7;
}

.footer-promise-inner i {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #332b00;
  background: #ffe13e;
  border: 4px solid #fff5a7;
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(190, 145, 0, .16);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.footer-promise-inner article > div {
  min-width: 0;
}

.site-footer--template .footer-promise-inner strong,
.site-footer--template .footer-promise-inner span {
  display: block;
  margin: 0;
}

.site-footer--template .footer-promise-inner strong {
  color: #172033;
  font-size: 15px;
}

.site-footer--template .footer-promise-inner span {
  margin-top: 4px;
  overflow: hidden;
  color: #7b8492;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer--template .site-footer-main {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(560px, 1.45fr) minmax(210px, .55fr);
  gap: clamp(30px, 3.2vw, 54px);
  width: min(1600px, calc(100% - 72px));
  margin: 0 auto;
  padding: 44px 0 38px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-footer--template .site-footer-main::before {
  content: none;
}

.site-footer--template .footer-brand-block {
  padding: 0;
}

.site-footer--template .footer-brand-heading {
  gap: 15px;
}

.site-footer--template .footer-brand-avatar {
  flex-basis: 74px;
  width: 74px;
  height: 74px;
  border-radius: 20px;
}

.site-footer--expanded.site-footer--template .footer-brand-heading strong {
  font-size: 24px;
}

.site-footer--template .footer-brand-stats {
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.site-footer--expanded.site-footer--template .footer-brand-stats > span,
.site-footer--expanded.site-footer--template .footer-brand-stats > span:first-child {
  min-height: 76px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-footer--expanded.site-footer--template .footer-brand-stats > span + span {
  padding-left: 18px;
  border-left: 1px solid #e5e7eb;
}

.site-footer--template .footer-brand-block address {
  gap: 7px;
  margin-top: 19px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-footer.site-footer--template .footer-brand-block address a,
.site-footer.site-footer--template .footer-brand-block address a:last-child {
  min-height: 30px;
  padding: 0;
  color: #344054;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-footer--template .footer-nav-groups {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-top: 5px;
}

.site-footer--template .footer-nav-groups section,
.site-footer--template .footer-nav-groups section:hover {
  min-height: 0;
  padding: 0 16px 0 22px;
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-left: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.site-footer--template .footer-nav-groups section:first-child {
  border-left: 0;
}

.site-footer--expanded.site-footer--template .footer-nav-groups section > strong {
  margin: 0 0 13px;
  padding-bottom: 10px;
  font-size: 14px;
}

.site-footer.site-footer--expanded.site-footer--template .footer-nav-groups section > a,
.site-footer.site-footer--expanded.site-footer--template .footer-nav-groups section > a:last-child {
  width: auto;
  min-height: 34px;
  padding: 0 8px;
  color: #687385;
  font-weight: 650;
}

.site-footer.site-footer--expanded.site-footer--template .footer-nav-groups section > a::after {
  content: none;
}

.site-footer.site-footer--expanded.site-footer--template .footer-nav-groups section > a:hover {
  color: #111827;
  background: #fff7c9;
  transform: translateX(2px);
}

.footer-contact-block {
  display: flex;
  min-width: 0;
  padding: 6px 0 0 28px;
  flex-direction: column;
  align-items: flex-start;
  border-left: 1px solid #e5e7eb;
}

.site-footer--template .footer-contact-block > strong {
  color: #172033;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.15;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.site-footer--template .footer-contact-block > span {
  margin-top: 7px;
  color: #7b8492;
  font-size: 11px;
  line-height: 1.5;
}

.site-footer.site-footer--template .footer-contact-admin,
.site-footer.site-footer--template .footer-contact-admin:last-child {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin-top: 18px;
  padding: 0 14px;
  justify-content: center;
  color: #202326;
  background: linear-gradient(135deg, #ffe13e, #ffd31d);
  border: 1px solid #e7c300;
  border-radius: 10px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(196, 151, 0, .14);
}

.site-footer.site-footer--template .footer-contact-admin:hover {
  color: #202326;
  background: linear-gradient(135deg, #ffea72, #ffe13e);
  transform: translateY(-1px);
}

.footer-copyright {
  display: flex;
  min-height: 54px;
  padding: 12px max(36px, calc((100% - 1600px) / 2));
  align-items: center;
  justify-content: center;
  gap: 26px;
  color: #8a929f;
  background: #f7f8fa;
  border-top: 1px solid #e5e7eb;
  font-size: 11px;
  text-align: center;
}

.site-footer--template .footer-copyright span {
  margin: 0;
}

.site-footer.site-footer--template .footer-copyright .footer-filing-link,
.site-footer.site-footer--template .footer-copyright .footer-filing-link:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  color: #667085;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.site-footer.site-footer--template .footer-copyright .footer-filing-link:hover {
  color: #111827;
  background: #fff8cf;
  border-color: #f0c900;
}

.site-footer.site-footer--template .footer-copyright .footer-filing-link:focus-visible {
  outline: 3px solid rgba(255, 211, 29, .38);
  outline-offset: 2px;
}

@media (max-width: 1280px) {
  .site-footer--template .site-footer-main {
    grid-template-columns: minmax(340px, .8fr) minmax(560px, 1.2fr);
    width: min(1160px, calc(100% - 48px));
  }

  .site-footer--template .footer-contact-block {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 176px;
    gap: 18px;
    padding: 22px 0 0;
    align-items: center;
    border-top: 1px solid #e5e7eb;
    border-left: 0;
  }

  .site-footer--template .footer-contact-block > span,
  .site-footer.site-footer--template .footer-contact-admin {
    margin: 0;
  }

  .site-footer--template .footer-contact-block > strong,
  .site-footer--template .footer-contact-block > span {
    grid-column: 1;
  }

  .site-footer.site-footer--template .footer-contact-admin,
  .site-footer.site-footer--template .footer-contact-admin:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 176px;
  }
}

@media (max-width: 960px) {
  .footer-promise-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(760px, calc(100% - 40px));
  }

  .footer-promise-inner article:nth-child(3) {
    border-left: 0;
  }

  .footer-promise-inner article:nth-child(n + 3) {
    border-top: 1px solid #ebe5c7;
  }

  .site-footer--template .site-footer-main {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 40px));
  }

  .site-footer--template .footer-nav-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .site-footer--template .footer-nav-groups section:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .footer-promise-inner {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
  }

  .footer-promise-inner article {
    min-height: 76px;
    padding: 14px 10px;
    justify-content: flex-start;
  }

  .footer-promise-inner article + article,
  .footer-promise-inner article:nth-child(3) {
    border-top: 1px solid #ebe5c7;
    border-left: 0;
  }

  .site-footer--template .site-footer-main {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 34px 0 28px;
  }

  .site-footer--template .footer-nav-groups {
    grid-template-columns: 1fr;
  }

  .site-footer--template .footer-nav-groups section,
  .site-footer--template .footer-nav-groups section:nth-child(3) {
    padding: 0 0 0 14px;
    border-left: 2px solid #f0d52f;
  }

  .site-footer--template .footer-contact-block {
    display: flex;
    padding-top: 22px;
    align-items: flex-start;
  }

  .site-footer.site-footer--template .footer-contact-admin,
  .site-footer.site-footer--template .footer-contact-admin:last-child {
    width: 100%;
  }

  .footer-copyright {
    padding: 16px;
    flex-direction: column;
    gap: 5px;
  }
}

/* Brand service showcase and expanded customer-facing footer. */
.brand-service-showcase {
  --brand-yellow: #ffe13e;
  --brand-ink: #202326;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 225, 62, .18), transparent 28%),
    linear-gradient(135deg, #fff 0%, #fff 58%, #fffdf3 100%);
}

.brand-service-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(540px, 1.14fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  width: min(1440px, calc(100% - 64px));
  min-height: 520px;
  margin: 0 auto;
  padding: 72px 0 38px;
}

.brand-service-copy {
  position: relative;
  z-index: 3;
  max-width: 650px;
}

.brand-service-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: #6c5600;
  background: #fff4b8;
  border: 1px solid #f4d85c;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.brand-service-copy h2 {
  max-width: 620px;
  margin: 18px 0 14px;
  color: #111820;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.2;
  letter-spacing: -.04em;
}

.brand-service-copy > p {
  max-width: 570px;
  margin: 0;
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
}

.brand-service-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.brand-service-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.brand-service-actions a:hover {
  transform: translateY(-2px);
}

.brand-service-primary {
  color: #1f252b;
  background: var(--brand-yellow);
  border: 1px solid var(--brand-yellow);
  box-shadow: 0 12px 26px rgba(170, 133, 0, .16);
}

.brand-service-secondary {
  color: #27313d;
  background: #fff;
  border: 1px solid #dce2e9;
}

.brand-service-visual {
  position: relative;
  min-width: 0;
  height: 430px;
}

.brand-service-mascot-card {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(370px, 62%);
  margin: 0;
  overflow: hidden;
  background: #fdeb57;
  border: 10px solid #fff;
  border-radius: 42px 42px 20px 42px;
  box-shadow: 0 30px 70px rgba(28, 35, 43, .18);
}

.brand-service-mascot-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(32, 35, 38, .1);
  border-radius: 32px 32px 12px 32px;
  content: "";
  pointer-events: none;
}

.brand-service-mascot-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.brand-service-mascot-card figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  color: #fff;
  background: rgba(22, 27, 31, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 13px;
  backdrop-filter: blur(8px);
}

.brand-service-mascot-card figcaption strong,
.brand-service-mascot-card figcaption span {
  margin: 0;
}

.brand-service-mascot-card figcaption strong {
  font-size: 15px;
}

.brand-service-mascot-card figcaption span {
  color: #d8dde3;
  font-size: 11px;
}

.brand-service-note {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 5px;
  width: 210px;
  min-height: 78px;
  padding: 15px 17px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e8ebef;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(34, 42, 52, .12);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.brand-service-note:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(34, 42, 52, .16);
}

.brand-service-note strong {
  color: #20262d;
  font-size: 16px;
}

.brand-service-note span {
  color: #77808d;
  font-size: 12px;
  line-height: 1.5;
}

.brand-service-note::before {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  background: var(--brand-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 225, 62, .2);
  content: "";
}

.brand-service-note.note-fast { top: 96px; left: 0; }
.brand-service-note.note-review { bottom: 82px; left: 42px; }
.brand-service-note.note-track { top: 24px; right: 288px; }
.brand-service-note.note-support { right: 304px; bottom: 8px; }

.brand-service-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 0 max(32px, calc((100vw - 1440px) / 2 + 32px));
  color: #fff;
  background: #242628;
  list-style: none;
}

.brand-service-promises li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 24px clamp(16px, 2vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.brand-service-promises li:first-child {
  border-left: 0;
}

.brand-service-promises i {
  display: inline-grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #242628;
  background: var(--brand-yellow);
  border-radius: 50%;
  font-size: 17px;
  font-style: normal;
  font-weight: 1000;
}

.brand-service-promises div {
  min-width: 0;
}

.brand-service-promises strong,
.brand-service-promises span {
  display: block;
}

.brand-service-promises strong {
  color: #f7f9fc;
  font-size: 16px;
}

.brand-service-promises span {
  margin-top: 5px;
  color: #9ba2ad;
  font-size: 12px;
  line-height: 1.45;
}

.site-footer.site-footer--expanded {
  display: block;
  min-height: 0;
  padding: 0;
  color: #4f5968;
  background: #fff;
  border-top: 4px solid #ffe13e;
}

.site-footer-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, .9fr) minmax(540px, 1.1fr);
  gap: clamp(30px, 4vw, 58px);
  width: min(1420px, calc(100% - 72px));
  margin: 30px auto;
  padding: 34px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 28px;
  box-shadow: 0 20px 55px rgba(31, 41, 55, .08);
}

.site-footer-main::before {
  position: absolute;
  top: 0;
  right: 34px;
  left: 34px;
  height: 3px;
  background: linear-gradient(90deg, #ffe13e 0%, #ffe13e 34%, rgba(255, 225, 62, .08) 78%, transparent 100%);
  border-radius: 0 0 999px 999px;
  content: "";
}

.site-footer--expanded .site-footer-main strong,
.site-footer--expanded .site-footer-main span {
  margin: 0;
}

.footer-brand-block {
  min-width: 0;
  padding: 12px 6px 8px;
}

.footer-brand-heading {
  display: flex;
  align-items: center;
  gap: 17px;
}

.footer-brand-avatar {
  display: block;
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  margin: 0;
  overflow: hidden;
  background: #ffe13e;
  border: 3px solid #fff;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(187, 145, 0, .2);
}

.footer-brand-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer--expanded .footer-brand-heading strong {
  display: block;
  color: #111827;
  font-size: 26px;
  line-height: 1.2;
}

.site-footer--expanded .footer-brand-heading div > span {
  display: block;
  margin-top: 7px;
  color: #667085;
  font-size: 13px;
}

.footer-brand-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
  margin-top: 24px;
  border: 0;
}

.site-footer--expanded .footer-brand-stats > span {
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 15px 16px;
  align-content: center;
  background: #f7f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

.site-footer--expanded .footer-brand-stats > span + span {
  padding-left: 16px;
  border-left: 1px solid #e5e7eb;
}

.site-footer--expanded .footer-brand-stats > span:first-child {
  background: #fff9d8;
  border-color: #f2df7e;
}

.footer-brand-stats b {
  color: #172033;
  font-size: 26px;
  line-height: 1;
}

.footer-brand-stats em {
  margin-left: 3px;
  color: #ffe13e;
  font-size: 13px;
  font-style: normal;
}

.footer-brand-stats small {
  color: #667085;
  font-size: 12px;
}

.footer-brand-block address {
  display: grid;
  gap: 10px;
  max-width: 620px;
  margin-top: 16px;
  padding: 15px 16px;
  color: #667085;
  background: #fafbfc;
  border: 1px solid #e9ebef;
  border-radius: 14px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.7;
}

.site-footer.site-footer--expanded a,
.site-footer.site-footer--expanded a:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  color: #526075;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.site-footer.site-footer--expanded .footer-brand-block address a,
.site-footer.site-footer--expanded .footer-brand-block address a:last-child {
  width: fit-content;
  min-height: 32px;
  padding: 0 11px;
  color: #202326;
  background: #fff3a6;
  border: 1px solid #efd15a;
  border-radius: 999px;
  font-weight: 850;
}

.site-footer.site-footer--expanded a:hover {
  color: #111827;
  text-decoration: none;
}

.footer-nav-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}

.footer-nav-groups section {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 246px;
  padding: 20px 14px 14px;
  flex-direction: column;
  align-items: stretch;
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 17px;
  box-shadow: inset 0 1px 0 #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.footer-nav-groups section:hover {
  background: #fff;
  border-color: #e8d25d;
  box-shadow: 0 13px 30px rgba(31, 41, 55, .07);
  transform: translateY(-2px);
}

.site-footer--expanded .footer-nav-groups section > strong {
  position: relative;
  display: block;
  margin: 0 8px 10px;
  padding-bottom: 10px;
  color: #172033;
  font-size: 15px;
}

.site-footer--expanded .footer-nav-groups section > strong::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 3px;
  background: #ffe13e;
  border-radius: 999px;
  content: "";
}

.site-footer.site-footer--expanded .footer-nav-groups section > a,
.site-footer.site-footer--expanded .footer-nav-groups section > a:last-child {
  width: 100%;
  min-height: 43px;
  padding: 0 26px 0 10px;
  position: relative;
}

.site-footer.site-footer--expanded .footer-nav-groups section > a:not(.footer-nav-admin)::after {
  position: absolute;
  top: 50%;
  right: 10px;
  color: #a2a9b4;
  content: "›";
  font-size: 17px;
  line-height: 1;
  transform: translateY(-50%);
}

.site-footer.site-footer--expanded .footer-nav-groups section > a:hover {
  background: rgba(255, 225, 62, .2);
  transform: translateX(2px);
}

.site-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(1440px, calc(100% - 64px));
  min-height: 78px;
  margin: 0 auto;
  padding: 16px 0;
  border-top: 1px solid #e1e5ea;
}

.site-footer--expanded .site-footer-legal > span {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.site-footer--expanded .site-footer-legal .footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 0;
}

.site-footer.site-footer--expanded .footer-policy-link,
.site-footer.site-footer--expanded .footer-policy-link:last-child {
  min-height: 36px;
  color: #526075;
  text-align: right;
}

.site-footer.site-footer--expanded .footer-admin-link,
.site-footer.site-footer--expanded .footer-admin-link:last-child {
  justify-content: center;
  min-width: 138px;
  min-height: 40px;
  padding: 0 18px;
  color: #202326;
  background: linear-gradient(135deg, #ffe13e, #ffd625);
  border: 1px solid #eac400;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(196, 151, 0, .16);
  font-weight: 900;
}

.site-footer.site-footer--expanded .footer-admin-link:hover {
  color: #202326;
  background: linear-gradient(135deg, #ffea72, #ffe13e);
  transform: translateY(-1px);
}

.site-footer.site-footer--expanded .footer-nav-admin,
.site-footer.site-footer--expanded .footer-nav-admin:last-child {
  justify-content: center;
  width: 100%;
  margin-top: auto;
}

.brand-service-showcase a:focus-visible,
.site-footer--expanded a:focus-visible {
  outline: 3px solid #172033;
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .brand-service-stage {
    grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr);
    width: min(1100px, calc(100% - 48px));
    gap: 24px;
  }

  .brand-service-copy h2 {
    font-size: clamp(32px, 3.4vw, 41px);
  }

  .brand-service-visual {
    height: 410px;
  }

  .brand-service-mascot-card {
    width: min(330px, 65%);
  }

  .brand-service-note {
    width: 190px;
    padding: 14px;
  }

  .brand-service-note.note-fast { left: 0; }
  .brand-service-note.note-review { bottom: 76px; left: 18px; }
  .brand-service-note.note-track { right: 258px; }
  .brand-service-note.note-support { right: 270px; }

  .brand-service-promises {
    padding-right: 24px;
    padding-left: 24px;
  }

  .brand-service-promises li {
    padding-right: 14px;
    padding-left: 14px;
  }

  .site-footer-main {
    grid-template-columns: minmax(350px, .9fr) minmax(450px, 1.1fr);
    gap: 46px;
    width: min(1100px, calc(100% - 48px));
  }

  .site-footer-legal {
    width: min(1100px, calc(100% - 48px));
  }
}

@media (max-width: 900px) {
  .brand-service-stage {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 40px));
    padding-top: 56px;
  }

  .brand-service-copy {
    max-width: 700px;
  }

  .brand-service-visual {
    width: min(680px, 100%);
    height: 410px;
    margin: 0 auto;
  }

  .brand-service-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-service-promises li:nth-child(3) {
    border-left: 0;
  }

  .brand-service-promises li:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .site-footer-main {
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 40px));
    gap: 42px;
  }

  .footer-brand-stats {
    max-width: none;
  }

  .footer-nav-groups {
    padding-top: 0;
  }

  .site-footer-legal {
    width: min(760px, calc(100% - 40px));
  }
}

@media (max-width: 640px) {
  .brand-service-stage {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 44px 0 26px;
  }

  .brand-service-copy h2 {
    margin-top: 14px;
    font-size: 30px;
  }

  .brand-service-copy > p {
    font-size: 15px;
  }

  .brand-service-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .brand-service-actions a {
    width: 100%;
  }

  .brand-service-visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    height: auto;
  }

  .brand-service-mascot-card {
    position: relative;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(300px, 88%);
    margin: 0 auto 6px;
    border-width: 7px;
    border-radius: 32px 32px 16px 32px;
  }

  .brand-service-mascot-card figcaption {
    right: 11px;
    bottom: 11px;
    left: 11px;
    padding: 9px 11px;
  }

  .brand-service-note,
  .brand-service-note.note-fast,
  .brand-service-note.note-review,
  .brand-service-note.note-track,
  .brand-service-note.note-support {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    min-height: 92px;
  }

  .brand-service-promises {
    grid-template-columns: 1fr;
    padding: 0 18px;
  }

  .brand-service-promises li,
  .brand-service-promises li:nth-child(3) {
    justify-content: flex-start;
    min-height: 88px;
    padding: 18px 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-left: 0;
  }

  .brand-service-promises li:first-child {
    border-top: 0;
  }

  .site-footer-main {
    width: calc(100% - 24px);
    margin: 18px auto;
    padding: 25px 18px 20px;
    border-radius: 22px;
  }

  .site-footer-main::before {
    right: 18px;
    left: 18px;
  }

  .footer-brand-heading {
    align-items: flex-start;
  }

  .footer-brand-avatar {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }

  .site-footer--expanded .footer-brand-heading strong {
    font-size: 21px;
  }

  .site-footer--expanded .footer-brand-stats > span {
    min-height: 72px;
    padding: 13px 10px;
  }

  .site-footer--expanded .footer-brand-stats > span + span {
    padding-left: 10px;
  }

  .footer-brand-stats b {
    font-size: 22px;
  }

  .footer-nav-groups {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .footer-nav-groups section {
    min-height: 0;
  }

  .site-footer-legal {
    align-items: flex-start;
    width: calc(100% - 32px);
    flex-direction: column;
    gap: 14px;
    padding: 22px 0 26px;
  }

  .site-footer--expanded .site-footer-legal .footer-links {
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
  }

  .site-footer.site-footer--expanded .footer-policy-link,
  .site-footer.site-footer--expanded .footer-policy-link:last-child {
    text-align: left;
  }

  .site-footer.site-footer--expanded .footer-admin-link,
  .site-footer.site-footer--expanded .footer-admin-link:last-child {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .brand-service-visual,
  .footer-nav-groups {
    grid-template-columns: 1fr;
  }

  .brand-service-note,
  .brand-service-note.note-fast,
  .brand-service-note.note-review,
  .brand-service-note.note-track,
  .brand-service-note.note-support {
    min-height: 82px;
  }

  .footer-brand-stats small {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-service-actions a,
  .brand-service-note {
    transition: none;
  }

  .brand-service-actions a:hover,
  .brand-service-note:hover {
    transform: none;
  }
}

/* Refined, balanced service visual: a compact 2x2 capability group beside the mascot. */
.brand-service-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, .72fr)) minmax(280px, 1.45fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: 430px;
  padding: 22px;
  background:
    radial-gradient(circle at 93% 91%, rgba(0, 174, 239, .13), transparent 22%),
    radial-gradient(circle at 80% 96%, rgba(236, 0, 140, .1), transparent 20%),
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(255, 249, 205, .72));
  border: 1px solid #f0e7ae;
  border-radius: 34px;
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(63, 54, 15, .08);
}

.brand-service-mascot-card {
  position: relative;
  right: auto;
  bottom: auto;
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 360px;
  border-width: 8px;
  border-radius: 34px 34px 18px 34px;
  box-shadow: 0 24px 55px rgba(34, 38, 43, .2);
}

.brand-service-note,
.brand-service-note.note-fast,
.brand-service-note.note-review,
.brand-service-note.note-track,
.brand-service-note.note-support {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-self: center;
  width: auto;
  min-height: 118px;
  padding: 22px 16px 17px;
  background: #fff;
  border-color: #e3e7ec;
  border-radius: 17px;
  box-shadow: 0 14px 34px rgba(37, 44, 54, .1);
}

.brand-service-note.note-fast { grid-column: 1; grid-row: 1; }
.brand-service-note.note-review { grid-column: 2; grid-row: 1; }
.brand-service-note.note-track { grid-column: 1; grid-row: 2; }
.brand-service-note.note-support { grid-column: 2; grid-row: 2; }

.brand-service-note strong {
  padding-right: 25px;
  font-size: 15px;
}

.brand-service-note span {
  font-size: 11px;
  line-height: 1.55;
}

.brand-service-note::before {
  top: 14px;
  right: 13px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #574600;
  background: #ffe13e;
  border-radius: 8px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 1000;
}

.brand-service-note.note-fast::before { content: "01"; }
.brand-service-note.note-review::before { content: "02"; }
.brand-service-note.note-track::before { content: "03"; }
.brand-service-note.note-support::before { content: "04"; }

.brand-service-mascot-card figcaption {
  right: 13px;
  bottom: 13px;
  left: 13px;
  padding: 11px 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

@media (max-width: 1180px) {
  .brand-service-stage {
    grid-template-columns: 1fr;
    width: min(920px, calc(100% - 48px));
    gap: 36px;
    padding-top: 58px;
  }

  .brand-service-copy {
    max-width: 760px;
  }

  .brand-service-visual {
    width: min(840px, 100%);
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  .brand-service-stage {
    width: calc(100% - 32px);
    padding-top: 46px;
  }

  .brand-service-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    height: auto;
    padding: 16px;
    border-radius: 26px;
  }

  .brand-service-mascot-card {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(360px, 100%);
    margin: 0 auto 4px;
  }

  .brand-service-note,
  .brand-service-note.note-fast,
  .brand-service-note.note-review,
  .brand-service-note.note-track,
  .brand-service-note.note-support {
    min-height: 104px;
  }

  .brand-service-note.note-fast { grid-column: 1; grid-row: 2; }
  .brand-service-note.note-review { grid-column: 2; grid-row: 2; }
  .brand-service-note.note-track { grid-column: 1; grid-row: 3; }
  .brand-service-note.note-support { grid-column: 2; grid-row: 3; }
}

@media (max-width: 480px) {
  .brand-service-visual {
    grid-template-columns: 1fr;
  }

  .brand-service-mascot-card,
  .brand-service-note.note-fast,
  .brand-service-note.note-review,
  .brand-service-note.note-track,
  .brand-service-note.note-support {
    grid-column: 1;
  }

  .brand-service-mascot-card { grid-row: 1; }
  .brand-service-note.note-fast { grid-row: 2; }
  .brand-service-note.note-review { grid-row: 3; }
  .brand-service-note.note-track { grid-row: 4; }
  .brand-service-note.note-support { grid-row: 5; }
}

/* After-sales records: compact workbench, table and request dialog */
#service.order-center-panel {
  --after-sales-ink: #1f2937;
  --after-sales-muted: #667085;
  --after-sales-line: #e1e7ef;
  --after-sales-soft: #f7f8fa;
  --after-sales-accent: #20242a;
  --after-sales-orange: #f59e0b;
}

#service .after-sales-page-title {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0 0 17px;
  border-bottom: 1px solid var(--after-sales-line);
}

#service .after-sales-page-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  background: #111;
}

#service .after-sales-page-title > div:first-child {
  display: grid;
  gap: 5px;
}

#service .after-sales-page-title strong {
  color: #111827;
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 1000;
  letter-spacing: -.02em;
  line-height: 1.2;
}

#service .after-sales-page-title p {
  margin: 0;
  color: var(--after-sales-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

#service .after-sales-title-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#service .after-sales-title-actions button {
  min-height: 34px;
  padding: 0 15px;
  color: #344054;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

#service .after-sales-title-actions button:first-child {
  color: #fff;
  background: var(--after-sales-accent);
  border-color: var(--after-sales-accent);
}

#service .after-sales-title-actions button:hover {
  color: #111827;
  background: #f8fafc;
  border-color: #aeb8c6;
  transform: translateY(-1px);
}

#service .after-sales-title-actions button:first-child:hover {
  color: #fff;
  background: #111827;
  border-color: #111827;
}

#service .after-sales-workbench {
  display: flex;
  min-width: 0;
  min-height: 500px;
  flex-direction: column;
  padding-top: 14px;
  color: var(--after-sales-ink);
  background: #fff;
}

#service .after-sales-filter-form {
  display: grid;
  gap: 11px;
  margin: 0;
}

#service .after-sales-filter-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.08fr) repeat(2, minmax(190px, .98fr)) minmax(250px, 1.1fr);
  gap: 10px;
}

#service .after-sales-filter-grid > label {
  display: flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

#service .after-sales-filter-grid > label:focus-within {
  border-color: #9aa6b5;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, .07);
}

#service .after-sales-filter-grid > label > span {
  flex: 0 0 auto;
  color: #4b5563;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

#service .after-sales-filter-grid input,
#service .after-sales-filter-grid select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 26px 0 0;
  color: #334155;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font-size: 13px;
}

#service .after-sales-filter-grid input::placeholder {
  color: #a1a9b6;
}

#service .after-sales-date-filter > div {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

#service .after-sales-date-filter input {
  padding: 0;
  font-size: 12px;
}

#service .after-sales-date-filter em {
  color: #98a2b3;
  font-style: normal;
}

#service .after-sales-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#service .after-sales-filter-actions button,
#service .after-sales-list-tools button {
  min-height: 34px;
  padding: 0 17px;
  color: #475467;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}

#service .after-sales-filter-actions .after-sales-search-button {
  min-width: 80px;
  color: #fff;
  background: var(--after-sales-accent);
  border-color: var(--after-sales-accent);
}

#service .after-sales-filter-actions button:hover,
#service .after-sales-list-tools button:hover {
  color: #111827;
  background: #f8fafc;
  border-color: #aeb8c6;
  transform: translateY(-1px);
}

#service .after-sales-filter-actions .after-sales-search-button:hover {
  color: #fff;
  background: #111827;
  border-color: #111827;
}

#service .after-sales-list-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  margin-top: 2px;
}

#service .after-sales-list-tools button {
  min-height: 29px;
  padding: 0 12px;
  font-size: 12px;
}

#service .after-sales-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--after-sales-line);
  border-radius: 0;
  scrollbar-width: thin;
}

#service .after-sales-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 13px;
}

#service .after-sales-table th,
#service .after-sales-table td {
  height: 42px;
  padding: 9px 12px;
  border-right: 1px solid var(--after-sales-line);
  border-bottom: 1px solid var(--after-sales-line);
  text-align: left;
  vertical-align: middle;
}

#service .after-sales-table th:last-child,
#service .after-sales-table td:last-child {
  border-right: 0;
}

#service .after-sales-table tbody tr:last-child td {
  border-bottom: 0;
}

#service .after-sales-table th {
  height: 40px;
  color: #697386;
  background: var(--after-sales-soft);
  font-weight: 900;
  white-space: nowrap;
}

#service .after-sales-table td {
  color: #475467;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#service .after-sales-table tbody tr {
  transition: background .14s ease;
}

#service .after-sales-table tbody tr:hover {
  background: #fafbfc;
}

#service .after-sales-table th:nth-child(1) { width: 14%; }
#service .after-sales-table th:nth-child(2) { width: 11%; }
#service .after-sales-table th:nth-child(3) { width: 13%; }
#service .after-sales-table th:nth-child(4) { width: 10%; }
#service .after-sales-table th:nth-child(5) { width: 13%; }
#service .after-sales-table th:nth-child(6) { width: 12%; }
#service .after-sales-table th:nth-child(7) { width: 10%; }
#service .after-sales-table th:nth-child(8) { width: 17%; }

#service .after-sales-table td:first-child,
#service .after-sales-order-number {
  color: #40536b;
  font-weight: 800;
}

#service .after-sales-table td:nth-child(4) {
  color: #374151;
  font-variant-numeric: tabular-nums;
}

#service .after-sales-status,
#service .after-sales-status-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  color: #8a6114;
  background: #fff8dc;
  border: 1px solid #f5df91;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

#service :is(.after-sales-status, .after-sales-status-pill):is(.is-processing, .processing),
#service :is(.after-sales-status, .after-sales-status-pill).is-warning,
#service :is(.after-sales-status, .after-sales-status-pill)[data-status="processing"] {
  color: #946200;
  background: #fff8df;
  border-color: #f4dfa1;
}

#service :is(.after-sales-status, .after-sales-status-pill):is(.is-completed, .completed),
#service :is(.after-sales-status, .after-sales-status-pill).is-success,
#service :is(.after-sales-status, .after-sales-status-pill)[data-status="completed"] {
  color: #16803a;
  background: #edf9ec;
  border-color: #c8ebc8;
}

#service :is(.after-sales-status, .after-sales-status-pill):is(.is-rejected, .rejected),
#service :is(.after-sales-status, .after-sales-status-pill).is-danger,
#service :is(.after-sales-status, .after-sales-status-pill)[data-status="rejected"] {
  color: #b42318;
  background: #fff1f0;
  border-color: #ffc9c5;
}

#service :is(.after-sales-status, .after-sales-status-pill):is(.is-cancelled, .cancelled),
#service :is(.after-sales-status, .after-sales-status-pill).is-muted,
#service :is(.after-sales-status, .after-sales-status-pill)[data-status="cancelled"] {
  color: #667085;
  background: #f5f6f7;
  border-color: #dfe3e8;
}

#service :is(.after-sales-status, .after-sales-status-pill).is-info {
  color: #175cd3;
  background: #eff8ff;
  border-color: #b2ddff;
}

#service .after-sales-row-actions,
#service .after-sales-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

#service .after-sales-row-actions button,
#service .after-sales-actions button,
#service .after-sales-table button[data-action],
#service .after-sales-table button[data-after-sales-action] {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #475467;
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}

#service .after-sales-row-actions button:hover,
#service .after-sales-actions button:hover,
#service .after-sales-table button[data-action]:hover,
#service .after-sales-table button[data-after-sales-action]:hover {
  color: #111827;
  background: #f8fafc;
  border-color: #aeb8c6;
}

#service .after-sales-row-actions :is(.is-rating, .rating),
#service .after-sales-row-actions .is-rate,
#service .after-sales-actions :is(.is-rating, .rating),
#service .after-sales-table :is([data-action="rate"], [data-action="rating"], [data-after-sales-action="rate"], [data-after-sales-action="rating"]) {
  color: #d97706;
  background: #fffaf0;
  border-color: #ffc766;
}

#service .after-sales-row-actions button:disabled,
#service .after-sales-actions button:disabled,
#service .after-sales-table button:disabled {
  color: #a5adba;
  background: #f7f8fa;
  border-color: #e3e7ed;
  cursor: not-allowed;
}

#service .after-sales-table button.after-sales-order-link {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: #40536b;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

#service .after-sales-table button.after-sales-order-link:hover {
  color: #111827;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#service .after-sales-table td:first-child > small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#service .after-sales-product-name,
#service .after-sales-reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#service .after-sales-table .after-sales-empty-row td,
#service .after-sales-empty-state {
  height: 210px;
  color: #98a2b3;
  background: #fff;
  text-align: center;
  font-size: 13px;
}

#service .after-sales-empty-state strong {
  display: block;
  margin-bottom: 5px;
  color: #475467;
  font-size: 15px;
}

#service .after-sales-empty-row td > div {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #98a2b3;
  text-align: center;
}

#service .after-sales-empty-row td > div strong {
  color: #475467;
  font-size: 15px;
  font-weight: 900;
}

#service .after-sales-pagination {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: 18px;
  color: #667085;
  font-size: 13px;
}

#service .after-sales-pagination > span b {
  color: #344054;
  font-weight: 900;
}

#service .after-sales-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

#service .after-sales-pages button,
#service .after-sales-pages strong {
  display: inline-flex;
  width: 33px;
  height: 33px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 3px;
  font-size: 14px;
}

#service .after-sales-pages button {
  color: #667085;
  background: #fff;
  border: 1px solid #e0e5ec;
  cursor: pointer;
}

#service .after-sales-pages button:hover:not(:disabled) {
  color: #111827;
  border-color: #aeb8c6;
}

#service .after-sales-pages button:disabled {
  color: #c3c8d0;
  background: #fafbfc;
  cursor: not-allowed;
}

#service .after-sales-pages strong {
  color: #fff;
  background: #252a31;
  font-weight: 900;
}

#service .after-sales-pagination > label {
  margin: 0 0 0 2px;
}

#service .after-sales-pagination select {
  min-width: 126px;
  height: 33px;
  padding: 0 34px 0 12px;
  color: #475467;
  background-color: #fff;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  outline: 0;
  font-size: 13px;
}

.after-sales-dialog {
  width: min(640px, calc(100vw - 28px));
  max-width: 640px;
  max-height: min(820px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: visible;
  color: #1f2937;
  background: transparent;
  border: 0;
  border-radius: 12px;
}

.after-sales-dialog::backdrop {
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(3px);
}

.after-sales-dialog[open] {
  animation: after-sales-dialog-enter .18s ease-out both;
}

@keyframes after-sales-dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.after-sales-dialog-shell {
  max-height: min(820px, calc(100dvh - 28px));
  overflow: auto;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}

.after-sales-dialog-shell > header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #e7ebf1;
}

.after-sales-dialog-shell > header > div {
  display: grid;
  gap: 3px;
}

.after-sales-dialog-shell > header span {
  color: #98a2b3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.after-sales-dialog-shell > header strong {
  color: #111827;
  font-size: 19px;
  font-weight: 1000;
}

.after-sales-dialog-shell > header > button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #667085;
  background: #f7f8fa;
  border: 1px solid #e1e6ed;
  border-radius: 50%;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.after-sales-dialog-shell > header > button:hover {
  color: #111827;
  background: #eef1f5;
}

.after-sales-dialog-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 18px 20px 0;
  padding: 5px;
  background: #f4f6f8;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
}

.after-sales-dialog-tabs button {
  min-height: 38px;
  color: #667085;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.after-sales-dialog-tabs button.active,
.after-sales-dialog-tabs button[aria-selected="true"] {
  color: #111827;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}

.after-sales-dialog .after-sales-dialog-form.workflow-card {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.after-sales-dialog .after-sales-dialog-form[hidden] {
  display: none !important;
}

.after-sales-dialog .after-sales-dialog-form label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #344054;
  font-size: 13px;
  font-weight: 850;
}

.after-sales-dialog .after-sales-dialog-form input,
.after-sales-dialog .after-sales-dialog-form select,
.after-sales-dialog .after-sales-dialog-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  outline: 0;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
}

.after-sales-dialog .after-sales-dialog-form textarea {
  min-height: 104px;
  padding-top: 11px;
  line-height: 1.55;
  resize: vertical;
}

.after-sales-dialog .after-sales-dialog-form :is(input, select, textarea):focus {
  border-color: #8c98a8;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, .08);
}

.after-sales-dialog .after-sales-dialog-form > button[type="submit"] {
  min-height: 44px;
  margin-top: 2px;
  color: #fff;
  background: #20242a;
  border: 1px solid #20242a;
  border-radius: 6px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.after-sales-dialog .after-sales-dialog-form > button[type="submit"]:hover {
  background: #111827;
  border-color: #111827;
}

.after-sales-dialog-tip {
  margin: 0;
  padding: 0 20px 20px;
  color: #7a8594;
  font-size: 12px;
  line-height: 1.6;
}

#service :is(button, input, select):focus-visible,
.after-sales-dialog :is(button, input, select, textarea):focus-visible {
  outline: 2px solid rgba(245, 158, 11, .62);
  outline-offset: 2px;
}

@media (max-width: 1280px) {
  #service .after-sales-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #service .after-sales-page-title {
    align-items: stretch;
    flex-direction: column;
  }

  #service .after-sales-title-actions {
    justify-content: flex-start;
  }

  #service .after-sales-title-actions button {
    flex: 1 1 140px;
  }

  #service .after-sales-filter-grid {
    grid-template-columns: 1fr;
  }

  #service .after-sales-filter-actions button {
    flex: 1 1 0;
  }

  #service .after-sales-workbench {
    min-height: 0;
  }

  #service .after-sales-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  #service .after-sales-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: auto;
    background: transparent;
  }

  #service .after-sales-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #service .after-sales-table tbody,
  #service .after-sales-table tr,
  #service .after-sales-table td {
    display: block;
    width: 100%;
  }

  #service .after-sales-table tbody tr:not(.after-sales-empty-row) {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e6ee;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
  }

  #service .after-sales-table tbody tr:not(.after-sales-empty-row) td {
    display: grid;
    min-height: 39px;
    grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px dashed #e5e9ef;
  }

  #service .after-sales-table tbody tr:not(.after-sales-empty-row) td:last-child {
    border-bottom: 0;
  }

  #service .after-sales-table tbody tr:not(.after-sales-empty-row) td::before {
    content: attr(data-label);
    color: #7a8594;
    font-size: 12px;
    font-weight: 850;
  }

  #service .after-sales-row-actions,
  #service .after-sales-actions {
    justify-content: flex-start;
  }

  #service .after-sales-empty-row td,
  #service .after-sales-empty-state {
    display: block;
    height: auto;
    min-height: 150px;
    padding: 60px 16px;
    border: 1px solid #e0e6ee;
    border-radius: 8px;
  }

  #service .after-sales-pagination {
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 13px;
  }

  #service .after-sales-pagination > label {
    margin-left: auto;
  }

  .after-sales-dialog {
    width: min(100% - 18px, 640px);
    max-height: calc(100dvh - 18px);
  }

  .after-sales-dialog-shell {
    max-height: calc(100dvh - 18px);
    border-radius: 9px;
  }
}

@media (max-width: 460px) {
  #service .after-sales-filter-grid > label {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 7px 10px;
  }

  #service .after-sales-filter-grid input,
  #service .after-sales-filter-grid select {
    height: 30px;
  }

  #service .after-sales-date-filter > div {
    width: 100%;
  }

  #service .after-sales-list-tools button {
    width: 100%;
  }

  #service .after-sales-pagination {
    justify-content: space-between;
  }

  #service .after-sales-pagination > label {
    width: 100%;
    margin-left: 0;
  }

  #service .after-sales-pagination select {
    width: 100%;
  }

  .after-sales-dialog-shell > header,
  .after-sales-dialog .after-sales-dialog-form {
    padding-right: 15px;
    padding-left: 15px;
  }

  .after-sales-dialog-tabs {
    margin-right: 15px;
    margin-left: 15px;
  }

  .after-sales-dialog-tip {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .after-sales-dialog[open] {
    animation: none;
  }
}

/* Invoice center: compact list workbench */
#invoice {
  --invoice-ink: #202124;
  --invoice-muted: #7c8490;
  --invoice-line: #e1e5eb;
  --invoice-soft: #f7f8fa;
  --invoice-accent: #303133;
}

#invoice .invoice-page-title {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 42px;
  margin: 0;
  padding: 0 0 11px;
  border-bottom: 1px solid #dfe3e8;
}

#invoice .invoice-page-title::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  background: #202124;
  content: "";
}

#invoice .invoice-page-title strong {
  color: #25272a;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
}

#invoice .invoice-page-title p {
  display: none;
}

#invoice .invoice-workbench {
  min-height: 545px;
  padding: 14px 0 0;
  background: #fff;
}

#invoice .invoice-filter-form {
  margin: 0 0 10px;
}

#invoice .invoice-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#invoice .invoice-filter-grid > label {
  display: flex;
  height: 36px;
  min-width: 0;
  align-items: center;
  margin: 0;
  padding: 0 10px;
  overflow: hidden;
  color: #5f6670;
  background: #fff;
  border: 1px solid #d8dee7;
  border-radius: 3px;
  box-shadow: none;
  font-size: 13px;
  line-height: 1;
}

#invoice .invoice-filter-grid > label > span {
  flex: 0 0 auto;
  color: #666e79;
  white-space: nowrap;
}

#invoice .invoice-filter-grid input,
#invoice .invoice-filter-grid select {
  min-width: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  color: #555d68;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font: inherit;
}

#invoice .invoice-filter-grid input::placeholder {
  color: #b1b6bf;
}

#invoice .invoice-filter-grid select {
  color: #8a919b;
  cursor: pointer;
}

#invoice .invoice-filter-grid input:focus,
#invoice .invoice-filter-grid select:focus {
  color: #30343a;
}

#invoice .invoice-filter-grid > label:focus-within {
  border-color: #8d939d;
  box-shadow: 0 0 0 2px rgba(48, 49, 51, .06);
}

#invoice .invoice-date-filter > div {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: center;
  gap: 3px;
}

#invoice .invoice-date-filter input {
  min-width: 105px;
  padding-right: 0;
}

#invoice .invoice-date-filter em {
  flex: 0 0 auto;
  color: #747b85;
  font-style: normal;
}

#invoice .invoice-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

#invoice .invoice-filter-actions > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

#invoice .invoice-filter-actions button {
  min-width: 63px;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  color: #606773;
  background: #fff;
  border: 1px solid #d6dce5;
  border-radius: 3px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 32px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

#invoice .invoice-filter-actions button:hover {
  color: #202124;
  background: #f7f8fa;
  border-color: #aeb5bf;
}

#invoice .invoice-filter-actions .invoice-search-button,
#invoice .invoice-filter-actions .invoice-apply-button {
  color: #fff;
  background: #303133;
  border-color: #303133;
}

#invoice .invoice-filter-actions .invoice-search-button:hover,
#invoice .invoice-filter-actions .invoice-apply-button:hover {
  color: #fff;
  background: #17191c;
  border-color: #17191c;
  transform: translateY(-1px);
}

#invoice .invoice-filter-actions .invoice-apply-button {
  min-width: 108px;
  font-weight: 700;
}

#invoice .invoice-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 0;
}

#invoice .invoice-record-table {
  width: 100%;
  min-width: 1080px;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: #58606c;
  background: #fff;
  font-size: 13px;
}

#invoice .invoice-record-table th,
#invoice .invoice-record-table td {
  height: 42px;
  padding: 9px 12px;
  overflow: hidden;
  border-right: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

#invoice .invoice-record-table th:last-child,
#invoice .invoice-record-table td:last-child {
  border-right: 0;
}

#invoice .invoice-record-table tbody tr:last-child:not(.invoice-empty-row) td {
  border-bottom: 0;
}

#invoice .invoice-record-table th {
  height: 39px;
  color: #7e8590;
  background: #f6f7f9;
  font-size: 13px;
  font-weight: 700;
}

#invoice .invoice-record-table th:nth-child(1) { width: 148px; }
#invoice .invoice-record-table th:nth-child(2) { width: 154px; }
#invoice .invoice-record-table th:nth-child(3) { width: 190px; }
#invoice .invoice-record-table th:nth-child(4) { width: 146px; }
#invoice .invoice-record-table th:nth-child(5) { width: 100px; }
#invoice .invoice-record-table th:nth-child(6) { width: 98px; }
#invoice .invoice-record-table th:nth-child(7) { width: 126px; }
#invoice .invoice-record-table th:nth-child(8) { width: 208px; }

#invoice .invoice-record-table tbody tr:not(.invoice-empty-row) {
  transition: background-color .15s ease;
}

#invoice .invoice-record-table tbody tr:not(.invoice-empty-row):hover {
  background: #fafbfd;
}

#invoice .invoice-record-table td > small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #9aa1ab;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

#invoice .invoice-flow-link {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #4f5e70;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

#invoice .invoice-flow-link:hover {
  color: #111827;
  text-decoration: underline;
}

#invoice .invoice-unit-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #4f5967;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#invoice .invoice-issue-status,
#invoice .invoice-record-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  color: #6d7580;
  background: #f3f5f7;
  border: 1px solid #e0e4e9;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

#invoice .invoice-issue-status.is-success,
#invoice .invoice-record-status.is-success {
  color: #25a348;
  background: #edf9ef;
  border-color: #ccebd2;
}

#invoice .invoice-issue-status.is-muted,
#invoice .invoice-record-status.is-muted {
  color: #8a929d;
  background: #f5f6f8;
  border-color: #e2e5e9;
}

#invoice .invoice-record-status.is-info {
  color: #2775c5;
  background: #eef6ff;
  border-color: #cfe4fb;
}

#invoice .invoice-record-status.is-warning {
  color: #c47b0b;
  background: #fff8e8;
  border-color: #f2dda9;
}

#invoice .invoice-record-status.is-danger {
  color: #d04949;
  background: #fff1f1;
  border-color: #f0cdcd;
}

#invoice .invoice-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible;
  white-space: nowrap;
}

#invoice .invoice-row-actions button,
#invoice .invoice-row-actions a {
  display: inline-flex;
  min-width: 58px;
  height: 25px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 10px;
  color: #59616c;
  background: #fff;
  border: 1px solid #d8dde5;
  border-radius: 13px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 23px;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

#invoice .invoice-row-actions button:hover,
#invoice .invoice-row-actions a:hover {
  color: #202124;
  background: #f6f7f9;
  border-color: #9fa6b0;
}

#invoice .invoice-row-actions a {
  color: #b6730a;
  background: #fffaf0;
  border-color: #f1cf8e;
}

#invoice .invoice-empty-row > td {
  height: 334px;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
  white-space: normal;
}

#invoice .invoice-empty-state {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 333px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 34px 20px 42px;
  color: #8a919b;
  text-align: center;
}

#invoice .invoice-empty-state > i {
  position: relative;
  display: block;
  width: 154px;
  height: 126px;
  margin: 0 0 13px;
  filter: drop-shadow(0 9px 7px rgba(91, 102, 118, .06));
}

#invoice .invoice-empty-state > i::before {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: 17px;
  width: 31px;
  height: 44px;
  background: linear-gradient(150deg, #e3e7ed, #d9dee6);
  clip-path: polygon(0 10%, 82% 0, 100% 15%, 100% 100%, 0 100%);
  content: "";
}

#invoice .invoice-empty-state > i::after {
  position: absolute;
  right: 16px;
  bottom: 7px;
  left: 14px;
  height: 12px;
  background: rgba(224, 228, 235, .62);
  border-radius: 50%;
  content: "";
}

#invoice .invoice-empty-state > i b {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 37px;
  width: 82px;
  height: 62px;
  background: linear-gradient(135deg, #f2f4f7 0 53%, #e1e5eb 54% 100%);
  clip-path: polygon(8% 0, 91% 0, 100% 15%, 94% 100%, 7% 100%, 0 15%);
}

#invoice .invoice-empty-state > i b::before,
#invoice .invoice-empty-state > i b::after {
  position: absolute;
  top: -31px;
  width: 72px;
  height: 39px;
  background: #f2f4f7;
  content: "";
}

#invoice .invoice-empty-state > i b::before {
  left: -22px;
  clip-path: polygon(20% 0, 100% 28%, 79% 100%, 0 72%);
}

#invoice .invoice-empty-state > i b::after {
  right: -23px;
  background: #e7eaf0;
  clip-path: polygon(0 28%, 80% 0, 100% 72%, 21% 100%);
}

#invoice .invoice-empty-state > i em {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 42px;
  width: 66px;
  height: 38px;
  background: linear-gradient(145deg, #fafbfc, #e8ebf0);
  clip-path: polygon(12% 0, 88% 13%, 100% 100%, 0 79%);
  transform: rotate(10deg);
}

#invoice .invoice-empty-state > i em::after {
  position: absolute;
  right: -22px;
  bottom: -15px;
  width: 32px;
  height: 39px;
  background: #f0f2f6;
  clip-path: polygon(0 10%, 72% 0, 100% 100%, 18% 85%);
  content: "";
}

#invoice .invoice-empty-state strong {
  color: #8a919b;
  font-size: 14px;
  font-weight: 500;
}

#invoice .invoice-empty-state span {
  margin-top: 7px;
  color: #b0b5bd;
  font-size: 12px;
}

#invoice .invoice-pagination {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 17px;
  padding: 14px 0 4px;
  color: #646c77;
  font-size: 13px;
}

#invoice .invoice-pagination > span b {
  margin: 0 3px;
  color: #40454c;
  font-weight: 600;
}

#invoice .invoice-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

#invoice .invoice-pages button,
#invoice .invoice-pages strong {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #9198a1;
  background: #f5f6f8;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-size: 13px;
  line-height: 32px;
}

#invoice .invoice-pages strong {
  color: #fff;
  background: #303133;
  font-weight: 700;
}

#invoice .invoice-pages button:not(:disabled):hover {
  color: #202124;
  background: #e9ecf0;
  cursor: pointer;
}

#invoice .invoice-pages button:disabled {
  color: #c6cbd1;
  cursor: not-allowed;
}

#invoice .invoice-pagination > label {
  margin: 0;
}

#invoice .invoice-pagination select {
  width: 128px;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  color: #59616d;
  background: #fff;
  border: 1px solid #d7dde5;
  border-radius: 3px;
  outline: 0;
  font-size: 13px;
}

/* Invoice request dialog */
.invoice-request-dialog {
  width: min(100% - 28px, 640px);
  max-width: 640px;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  color: #202530;
}

.invoice-request-dialog::backdrop {
  background: rgba(20, 27, 38, .54);
  backdrop-filter: blur(2px);
}

.invoice-request-dialog[open] {
  animation: invoice-dialog-in .2s ease-out both;
}

@keyframes invoice-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.invoice-dialog-shell {
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .2);
}

.invoice-dialog-shell > header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 23px 26px 20px;
  background: linear-gradient(135deg, #fffdf5 0%, #fff 68%);
  border-bottom: 1px solid #e7e9ed;
}

.invoice-dialog-shell > header > div {
  min-width: 0;
}

.invoice-dialog-shell > header span {
  display: inline-block;
  margin-bottom: 6px;
  color: #a67311;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.invoice-dialog-shell > header strong {
  display: block;
  color: #1d222a;
  font-size: 20px;
  font-weight: 800;
}

.invoice-dialog-shell > header p {
  margin: 6px 44px 0 0;
  color: #7b8490;
  font-size: 12px;
  line-height: 1.65;
}

.invoice-dialog-shell > header > button {
  position: absolute;
  top: 16px;
  right: 17px;
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #727a85;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.invoice-dialog-shell > header > button:hover {
  color: #17191c;
  background: #f6f7f9;
}

.invoice-request-dialog .invoice-center-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 16px;
  margin: 0;
  padding: 23px 26px 25px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.invoice-request-dialog .invoice-center-card label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  color: #4e5662;
  font-size: 13px;
  font-weight: 650;
}

.invoice-request-dialog .invoice-center-card label:first-child,
.invoice-request-dialog .invoice-center-card label:nth-child(3),
.invoice-request-dialog .invoice-center-card button[type="submit"] {
  grid-column: 1 / -1;
}

.invoice-request-dialog .invoice-center-card input,
.invoice-request-dialog .invoice-center-card select {
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  color: #343a43;
  background: #fff;
  border: 1px solid #d8dee7;
  border-radius: 4px;
  outline: 0;
  box-shadow: none;
  font-size: 13px;
}

.invoice-request-dialog .invoice-center-card input::placeholder {
  color: #abb1ba;
}

.invoice-request-dialog .invoice-center-card input:focus,
.invoice-request-dialog .invoice-center-card select:focus {
  border-color: #555b64;
  box-shadow: 0 0 0 3px rgba(32, 33, 36, .07);
}

.invoice-request-dialog .invoice-center-card button[type="submit"] {
  height: 43px;
  margin: 4px 0 0;
  padding: 0 20px;
  color: #fff;
  background: #303133;
  border: 1px solid #303133;
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.invoice-request-dialog .invoice-center-card button[type="submit"]:hover {
  background: #17191c;
  border-color: #17191c;
}

.invoice-dialog-tip {
  margin: 0 26px 23px;
  padding: 11px 13px;
  color: #7a818c;
  background: #f7f8fa;
  border-left: 3px solid #d6b23a;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 1100px) {
  #invoice .invoice-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #invoice .invoice-page-title strong {
    font-size: 19px;
  }

  #invoice .invoice-workbench {
    min-height: 0;
    padding-top: 12px;
  }

  #invoice .invoice-filter-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #invoice .invoice-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #invoice .invoice-filter-actions > div,
  #invoice .invoice-filter-actions .invoice-apply-button {
    width: 100%;
  }

  #invoice .invoice-filter-actions > div button {
    flex: 1 1 0;
  }

  #invoice .invoice-table-wrap {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  #invoice .invoice-record-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    table-layout: auto;
    background: transparent;
  }

  #invoice .invoice-record-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #invoice .invoice-record-table tbody,
  #invoice .invoice-record-table tr,
  #invoice .invoice-record-table td {
    display: block;
    width: 100%;
  }

  #invoice .invoice-record-table tbody tr:not(.invoice-empty-row) {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e5ec;
    border-radius: 7px;
    box-shadow: 0 5px 15px rgba(15, 23, 42, .04);
  }

  #invoice .invoice-record-table tbody tr:not(.invoice-empty-row) td {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 40px;
    grid-template-columns: minmax(92px, 31%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 9px 12px;
    overflow: visible;
    border: 0;
    border-bottom: 1px dashed #e5e9ef;
    text-overflow: clip;
    white-space: normal;
  }

  #invoice .invoice-record-table tbody tr:not(.invoice-empty-row) td:last-child {
    border-bottom: 0;
  }

  #invoice .invoice-record-table tbody tr:not(.invoice-empty-row) td::before {
    grid-column: 1;
    color: #7d8692;
    content: attr(data-label);
    font-size: 12px;
    font-weight: 750;
  }

  #invoice .invoice-record-table tbody tr:not(.invoice-empty-row) td > * {
    grid-column: 2;
  }

  #invoice .invoice-flow-link,
  #invoice .invoice-unit-name {
    white-space: normal;
    word-break: break-word;
  }

  #invoice .invoice-record-table td > small {
    margin-top: 2px;
  }

  #invoice .invoice-row-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #invoice .invoice-empty-row > td {
    display: block;
    height: auto;
    min-height: 280px;
    padding: 0;
    border: 1px solid #e1e5eb;
    border-radius: 7px;
  }

  #invoice .invoice-empty-state {
    min-height: 280px;
  }

  #invoice .invoice-pagination {
    min-height: 64px;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  #invoice .invoice-pagination > label {
    margin-left: auto;
  }

  .invoice-request-dialog {
    width: min(100% - 18px, 640px);
    max-height: calc(100dvh - 18px);
  }

  .invoice-dialog-shell {
    max-height: calc(100dvh - 18px);
    border-radius: 8px;
  }

  .invoice-request-dialog .invoice-center-card {
    grid-template-columns: 1fr;
    padding: 20px 18px;
  }

  .invoice-request-dialog .invoice-center-card label,
  .invoice-request-dialog .invoice-center-card label:first-child,
  .invoice-request-dialog .invoice-center-card label:nth-child(3),
  .invoice-request-dialog .invoice-center-card button[type="submit"] {
    grid-column: 1;
  }

  .invoice-dialog-shell > header {
    padding: 20px 18px 17px;
  }

  .invoice-dialog-shell > header p {
    margin-right: 40px;
  }

  .invoice-dialog-tip {
    margin: 0 18px 19px;
  }
}

@media (max-width: 460px) {
  #invoice .invoice-filter-grid > label {
    height: auto;
    min-height: 42px;
  }

  #invoice .invoice-date-filter {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #invoice .invoice-date-filter > div {
    width: 100%;
  }

  #invoice .invoice-date-filter input {
    min-width: 0;
    padding-left: 0;
  }

  #invoice .invoice-pagination > label {
    width: 100%;
    margin-left: 0;
  }

  #invoice .invoice-pagination select {
    width: 100%;
  }

  .invoice-dialog-shell > header strong {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invoice-request-dialog[open] {
    animation: none;
  }
}

/* Recharge center: wide, flat member workspace with yellow emphasis. */
#payment .recharge-center-shell {
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: #1f2329;
  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

#payment .recharge-center-tabs {
  display: flex;
  min-height: 54px;
  align-items: stretch;
  gap: 28px;
  padding: 0 24px;
  border-bottom: 1px solid #e4e7ec;
}

#payment .recharge-center-tabs button {
  position: relative;
  display: inline-flex;
  min-width: 88px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: #697386;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

#payment .recharge-center-tabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  content: "";
}

#payment .recharge-center-tabs button:hover,
#payment .recharge-center-tabs button.active {
  color: #17191d;
}

#payment .recharge-center-tabs button.active::after {
  background: #1f2329;
}

#payment [data-recharge-panel] {
  display: none;
  padding: 24px;
}

#payment [data-recharge-panel].active {
  display: block;
}

#payment .recharge-balance-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #554100;
  background: #fff7cf;
  border: 1px solid #f3dc63;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

#payment .recharge-balance-chip::before {
  width: 7px;
  height: 7px;
  background: #f1c91b;
  border-radius: 50%;
  content: "";
}

#payment .recharge-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(360px, 2fr);
  gap: 16px;
  align-items: stretch;
}

#payment .recharge-main-balance-card,
#payment .recharge-metric-card,
#payment .recharge-quick-card,
#payment .recharge-chart-card,
#payment .recharge-order-payment-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 7px;
  box-shadow: none;
}

#payment .recharge-main-balance-card {
  position: relative;
  display: flex;
  min-height: 196px;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 225, 71, .2), transparent 53%),
    #fff;
  border-color: #eadb87;
}

#payment .recharge-main-balance-card::after {
  position: absolute;
  top: -54px;
  right: -42px;
  width: 168px;
  height: 168px;
  background: rgba(255, 218, 42, .12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#payment .recharge-main-balance-card > * {
  position: relative;
  z-index: 1;
}

#payment .recharge-main-balance-card h3,
#payment .recharge-metric-card h3,
#payment .recharge-quick-card h3,
#payment .recharge-chart-card h3,
#payment .recharge-order-payment-panel h3 {
  margin: 0;
  color: #181a1f;
  font-size: 16px;
  font-weight: 850;
}

#payment .recharge-balance-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0 0;
  color: #17191d;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.1;
}

#payment .recharge-balance-value small {
  color: #7a8290;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

#payment .recharge-main-balance-card button,
#payment .recharge-quick-card button,
#payment .recharge-record-toolbar button {
  min-height: 36px;
  padding: 0 18px;
  color: #fff;
  background: #25272b;
  border: 1px solid #25272b;
  border-radius: 4px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
}

#payment .recharge-main-balance-card button {
  align-self: flex-start;
}

#payment .recharge-main-balance-card button:hover,
#payment .recharge-quick-card button:hover,
#payment .recharge-record-toolbar button:hover {
  background: #111214;
  border-color: #111214;
}

#payment .recharge-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

#payment .recharge-metric-grid > div {
  min-width: 0;
}

#payment .recharge-metric-card {
  display: flex;
  min-height: 90px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
}

#payment .recharge-metric-card span {
  color: #737b88;
  font-size: 13px;
}

#payment .recharge-metric-card strong {
  color: #22252a;
  font-size: 23px;
  font-weight: 850;
}

#payment .recharge-quick-card {
  margin-top: 16px;
  padding: 22px 24px;
}

#payment .recharge-quick-card > header,
#payment .recharge-chart-card > header,
#payment .recharge-record-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#payment .recharge-quick-card > div:first-child,
#payment .recharge-chart-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#payment .recharge-quick-card > div:first-child strong,
#payment .recharge-chart-card > div:first-child strong,
#payment .recharge-record-toolbar > div:first-child strong {
  color: #181a1f;
  font-size: 16px;
  font-weight: 850;
}

#payment .recharge-quick-card > div:first-child span,
#payment .recharge-record-toolbar > div:first-child span {
  color: #7b8492;
  font-size: 12px;
}

#payment .recharge-quick-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

#payment .recharge-quick-amounts button {
  min-height: 46px;
  padding: 0 10px;
  color: #343840;
  background: #fff;
  border: 1px solid #d9dee6;
  border-radius: 5px;
  font-size: 14px;
}

#payment .recharge-quick-amounts button:hover,
#payment .recharge-quick-amounts button.active {
  color: #211b00;
  background: #fff9d9;
  border-color: #e6c72c;
}

#payment .recharge-notice {
  display: flex;
  min-height: 42px;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 14px;
  color: #725d0e;
  background: #fffbea;
  border: 1px solid #f0df91;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.55;
}

#payment .recharge-notice::before {
  flex: 0 0 auto;
  content: "●";
  color: #e5bf10;
  font-size: 10px;
  line-height: 20px;
}

#payment .recharge-record-toolbar {
  min-height: 54px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4e7ec;
}

#payment .recharge-record-toolbar h3,
#payment .recharge-record-toolbar p {
  margin: 0;
}

#payment .recharge-record-toolbar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#payment .recharge-record-toolbar button {
  min-height: 32px;
  padding: 0 14px;
  color: #545b66;
  background: #fff;
  border-color: #d9dee6;
}

#payment .recharge-record-toolbar button:hover,
#payment .recharge-record-toolbar button.active {
  color: #fff;
  background: #25272b;
  border-color: #25272b;
}

#payment .recharge-record-toolbar p {
  margin-top: 4px;
  color: #7b8492;
  font-size: 12px;
}

#payment .recharge-record-table {
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1e5eb;
  border-radius: 5px;
}

#payment .recharge-record-head,
#payment .recharge-record-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.05fr) minmax(128px, .9fr) minmax(90px, .58fr) minmax(120px, .82fr) minmax(105px, .68fr) minmax(110px, .72fr) minmax(105px, .68fr);
  align-items: center;
  gap: 0;
}

#payment .recharge-record-head {
  min-height: 42px;
  color: #737b88;
  background: #f6f7f9;
  border-bottom: 1px solid #e1e5eb;
  font-size: 12px;
  font-weight: 750;
}

#payment .recharge-record-head > *,
#payment .recharge-record-row > * {
  min-width: 0;
  padding: 10px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#payment .recharge-record-row {
  min-height: 54px;
  color: #424852;
  border-bottom: 1px solid #e9ecf1;
  font-size: 13px;
}

#payment .recharge-record-row:last-child {
  border-bottom: 0;
}

#payment .recharge-record-row:hover {
  background: #fffdf3;
}

#payment .recharge-record-pagination {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 2px 2px;
  color: #59616d;
  font-size: 13px;
}

#payment .recharge-record-pagination[hidden] {
  display: none;
}

#payment .recharge-record-pagination > span {
  flex: 0 0 auto;
}

#payment .recharge-record-pagination > span b {
  color: #22252a;
  font-weight: 850;
}

#payment .recharge-record-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

#payment .recharge-record-pagination button,
#payment .recharge-record-pagination > div > strong {
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
}

#payment .recharge-record-pagination button {
  color: #536071;
  background: #fff;
  border: 1px solid #d9dee6;
}

#payment .recharge-record-pagination button:hover:not(:disabled) {
  color: #17191d;
  background: #fff9d9;
  border-color: #e4c52c;
}

#payment .recharge-record-pagination button:disabled {
  color: #c0c6cf;
  background: #f7f8fa;
  cursor: not-allowed;
}

#payment .recharge-record-pagination > div > strong {
  color: #fff;
  background: #24272c;
  border: 1px solid #24272c;
}

#payment .recharge-record-pagination select {
  min-width: 126px;
  height: 34px;
  margin-left: 10px;
  padding: 0 34px 0 13px;
  color: #3f4753;
  background: #fff;
  border: 1px solid #d9dee6;
  border-radius: 4px;
  font-size: 13px;
}

#payment .recharge-record-pagination select:focus {
  border-color: #d5b919;
  outline: 3px solid rgba(255, 220, 47, .18);
}

#payment .recharge-record-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  padding: 40px 20px;
  color: #9097a2;
  text-align: center;
}

#payment .recharge-record-empty strong {
  display: block;
  margin-bottom: 7px;
  color: #5e6673;
  font-size: 15px;
}

#payment .recharge-type-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  color: #5f4c00;
  background: #fff8d4;
  border: 1px solid #ead570;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

#payment .recharge-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

#payment .recharge-stat-card {
  min-width: 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e0e4ea;
  border-radius: 6px;
}

#payment .recharge-stat-card span {
  display: block;
  margin-bottom: 8px;
  color: #79818d;
  font-size: 12px;
}

#payment .recharge-stat-card strong {
  color: #202328;
  font-size: 24px;
  font-weight: 850;
}

#payment .recharge-stat-card small,
#payment .recharge-main-balance-card small {
  display: block;
  margin-top: 8px;
  color: #7c8491;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

#payment .recharge-chart-card {
  padding: 22px 24px 24px;
}

#payment .recharge-month-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(70px, 1fr));
  gap: 16px;
  min-height: 260px;
  align-items: end;
  margin-top: 22px;
  padding: 20px 10px 0;
  border-bottom: 1px solid #dfe4ea;
}

#payment .recharge-month-item {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  color: #7a8290;
  text-align: center;
  font-size: 12px;
}

#payment .recharge-bar-pair {
  display: flex;
  min-height: 160px;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

#payment .recharge-bar-pair > * {
  width: min(28%, 24px);
  min-height: 4px;
  background: #25272b;
  border-radius: 3px 3px 0 0;
}

#payment .recharge-bar-pair > *:last-child {
  background: #f2cf28;
}

#payment .recharge-order-payment-panel {
  padding: 20px;
}

#payment .recharge-order-payment-panel .payment-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#payment .recharge-order-payment-panel .payment-card input,
#payment .recharge-order-payment-panel .payment-card select {
  min-height: 42px;
  border-color: #d9dee6;
  border-radius: 5px;
}

#payment .recharge-order-payment-panel .payment-card button[type="submit"] {
  min-height: 42px;
  color: #182230;
  background: #ffe13e;
  border-radius: 5px;
  box-shadow: none;
}

#payment .recharge-order-payment-panel .unified-order-payment-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(135deg, #fffef9 0%, #fff 64%, #fffbe7 100%);
  border: 1px solid #e4e7ec;
  border-radius: 10px;
}

#payment .unified-order-payment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

#payment .unified-order-payment-head > div {
  display: grid;
  gap: 5px;
}

#payment .unified-order-payment-head span {
  color: #8a6500;
  font-size: 11px;
  font-weight: 1000;
}

#payment .unified-order-payment-head h3,
#payment .unified-order-payment-head p {
  margin: 0;
}

#payment .unified-order-payment-head h3 {
  color: #182230;
  font-size: 20px;
}

#payment .unified-order-payment-head p {
  color: #667085;
  font-size: 12px;
  line-height: 1.65;
}

#payment .unified-order-payment-head em {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #705900;
  background: #fff7cf;
  border: 1px solid #f1dc6b;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

#payment .unified-order-payment-main {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  gap: 14px;
  align-items: stretch;
}

#payment .payment-order-choice,
#payment .payment-method-choice {
  min-width: 0;
  padding: 16px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

#payment .payment-order-choice {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

#payment .payment-order-select {
  display: grid;
  gap: 9px;
  min-width: 0;
}

#payment .payment-order-select > span,
#payment .payment-method-choice legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #182230;
  font-size: 14px;
  font-weight: 950;
}

#payment .payment-order-select > span b,
#payment .payment-method-choice legend b,
#payment .payment-continue-button span b {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #182230;
  background: #ffe13e;
  border-radius: 999px;
  font-size: 11px;
}

#payment .payment-order-select select {
  width: 100%;
  padding-right: 38px;
  color: #182230;
  background-color: #fff;
  border: 1px solid #cad5e2;
  font-size: 13px;
  font-weight: 850;
}

#payment .payment-order-select select:focus {
  border-color: #e9bd00;
  box-shadow: 0 0 0 3px rgba(255, 225, 62, .22);
}

#payment .payment-order-select select:disabled {
  color: #98a2b3;
  background: #f8fafc;
  cursor: not-allowed;
}

#payment .payment-order-hint,
#payment .payment-order-hint.is-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, .72fr) minmax(130px, auto);
  align-items: stretch;
  gap: 8px;
  min-height: 112px;
  padding: 8px;
  color: #475467;
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 10px;
  box-shadow: none;
}

#payment .payment-order-hint.is-ready {
  background: linear-gradient(135deg, #fffdf1, #f8fafc 68%);
  border-color: #f0d66a;
}

#payment .payment-order-hint.is-blocked {
  grid-template-columns: 1fr;
  border-color: #f2d6a5;
  background: #fffaf0;
}

#payment .payment-order-hint > div {
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 8px;
}

#payment .payment-order-product {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

#payment .payment-order-thumb {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  background: #fff9d8;
  border: 1px solid #f1d65e;
  border-radius: 8px;
}

#payment .payment-order-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#payment .payment-order-no-image {
  color: #8a6500;
  font-size: 11px;
  font-weight: 900;
}

#payment .payment-order-product > div:last-child,
#payment .payment-order-meta,
#payment .payment-order-amount {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

#payment .payment-order-hint span,
#payment .payment-order-hint small {
  color: #667085;
  font-size: 10px;
  line-height: 1.35;
}

#payment .payment-order-hint strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #182230;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#payment .payment-order-amount {
  background: #fff9dc;
  border-color: #f0d45a;
}

#payment .payment-order-amount strong {
  color: #ef4b23;
  font-size: 21px;
}

#payment .payment-order-empty-state {
  display: grid;
  grid-column: 1 / -1;
  align-content: center;
  justify-items: start;
  gap: 6px;
}

#payment .payment-order-empty-state b {
  color: #182230;
  font-size: 14px;
}

#payment .payment-order-empty-state button {
  min-height: 30px;
  margin-top: 3px;
  padding: 5px 12px;
  color: #182230;
  background: #fff;
  border: 1px solid #d7dee8;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 850;
}

#payment .payment-method-choice {
  display: grid;
  align-content: start;
  gap: 10px;
}

#payment .payment-method-choice fieldset {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#payment .payment-method-choice legend {
  width: 100%;
  margin-bottom: 9px;
  padding: 0;
}

#payment .unified-payment-method-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#payment .unified-payment-method-preview button {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 9px 10px;
  color: #344054;
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 9px;
  box-shadow: none;
  text-align: left;
}

#payment .unified-payment-method-preview button:hover:not(:disabled) {
  border-color: #e5c12b;
  transform: translateY(-1px);
}

#payment .unified-payment-method-preview button:focus-visible {
  outline: 3px solid rgba(255, 225, 62, .35);
  outline-offset: 1px;
}

#payment .unified-payment-method-preview button.active {
  color: #182230;
  background: #fffbea;
  border-color: #e6bd00;
  box-shadow: 0 0 0 2px rgba(255, 225, 62, .18);
}

#payment .unified-payment-method-preview button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

#payment .unified-payment-method-preview button > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #182230;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
}

#payment .unified-payment-method-preview button.active > i {
  background: #ffe13e;
}

#payment .unified-payment-method-preview button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#payment .unified-payment-method-preview button strong {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
}

#payment .unified-payment-method-preview button small {
  overflow: hidden;
  color: #7b8798;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#payment .unified-payment-method-preview button > em {
  display: none;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #182230;
  background: #ffe13e;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
}

#payment .unified-payment-method-preview button.active > em {
  display: grid;
}

#payment .recharge-order-payment-panel .payment-card .payment-continue-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 9px 14px;
  color: #182230;
  background: #ffe13e;
  border: 1px solid #e8c000;
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(231, 189, 0, .17);
}

#payment .payment-continue-button span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 950;
}

#payment .payment-continue-button strong {
  font-size: 14px;
  font-weight: 1000;
}

#payment .recharge-order-payment-panel .payment-card .payment-continue-button:disabled {
  color: #98a2b3;
  background: #eef2f6;
  border-color: #e3e8ef;
  box-shadow: none;
}

#payment .payment-continue-button:disabled span b {
  color: #98a2b3;
  background: #dfe5ec;
}

#payment .payment-safe-note {
  margin: -2px 0 0;
  color: #7b8798;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 900px) {
  #payment [data-recharge-panel] {
    padding: 18px;
  }

  #payment .unified-order-payment-main {
    grid-template-columns: 1fr;
  }

  #payment .recharge-overview-grid {
    grid-template-columns: 1fr;
  }

  #payment .recharge-main-balance-card {
    min-height: 172px;
  }

  #payment .recharge-quick-amounts {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }

  #payment .recharge-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #payment .recharge-record-table {
    overflow-x: auto;
  }

  #payment .recharge-record-head,
  #payment .recharge-record-row {
    min-width: 840px;
  }

  #payment .recharge-month-chart {
    gap: 10px;
    overflow-x: auto;
  }

  #payment .recharge-month-item {
    min-width: 68px;
  }
}

@media (max-width: 620px) {
  #payment .recharge-center-shell {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  #payment .recharge-center-tabs {
    gap: 4px;
    padding: 0 10px;
    overflow-x: auto;
  }

  #payment .recharge-center-tabs button {
    flex: 0 0 auto;
    min-width: 82px;
    font-size: 14px;
  }

  #payment [data-recharge-panel] {
    padding: 14px 12px 18px;
  }

  #payment .recharge-main-balance-card,
  #payment .recharge-quick-card,
  #payment .recharge-chart-card,
  #payment .recharge-order-payment-panel {
    padding: 17px 15px;
  }

  #payment .unified-order-payment-head {
    display: grid;
  }

  #payment .unified-order-payment-head em {
    width: fit-content;
  }

  #payment .unified-payment-method-preview {
    grid-template-columns: 1fr 1fr;
  }

  #payment .recharge-order-payment-panel .unified-order-payment-card {
    padding: 16px;
  }

  #payment .payment-order-choice,
  #payment .payment-method-choice {
    padding: 13px;
  }

  #payment .payment-order-hint,
  #payment .payment-order-hint.is-empty {
    grid-template-columns: 1fr 1fr;
  }

  #payment .payment-order-product {
    grid-column: 1 / -1;
  }

  #payment .recharge-metric-grid,
  #payment .recharge-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #payment .recharge-metric-card,
  #payment .recharge-stat-card {
    padding: 15px 13px;
  }

  #payment .recharge-metric-card strong,
  #payment .recharge-stat-card strong {
    font-size: 20px;
  }

  #payment .recharge-quick-card > header,
  #payment .recharge-chart-card > header,
  #payment .recharge-quick-card > div:first-child,
  #payment .recharge-chart-card > div:first-child,
  #payment .recharge-record-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #payment .recharge-record-toolbar button {
    width: 100%;
  }

  #payment .recharge-record-pagination {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 12px;
  }

  #payment .recharge-record-pagination > div {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  #payment .recharge-record-pagination select {
    min-width: 112px;
    margin-left: 2px;
  }

  #payment .recharge-quick-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #payment .recharge-record-head {
    display: none;
  }

  #payment .recharge-record-table {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  #payment .recharge-record-row {
    display: block;
    min-width: 0;
    min-height: 0;
    margin-bottom: 10px;
    padding: 7px 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e4ea;
    border-radius: 6px;
  }

  #payment .recharge-record-row > * {
    display: grid;
    grid-template-columns: minmax(88px, 32%) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 11px;
    overflow: visible;
    white-space: normal;
  }

  #payment .recharge-record-row > *::before {
    color: #7d8591;
    content: attr(data-label);
    font-size: 12px;
    font-weight: 700;
  }

  #payment .recharge-month-chart {
    grid-template-columns: repeat(6, 70px);
    justify-content: start;
  }

  #payment .recharge-order-payment-panel .payment-card {
    gap: 10px;
  }
}

#payment .recharge-main-balance-card > div > span {
  display: block;
  color: #656d79;
  font-size: 14px;
  font-weight: 750;
}

#payment .recharge-notice > strong {
  flex: 0 0 auto;
  color: #a66f00;
  white-space: nowrap;
}

#payment .recharge-notice ol {
  display: grid;
  flex: 1;
  gap: 3px;
  margin: 0;
  padding-left: 20px;
}

#payment .recharge-record-empty {
  align-content: center;
  justify-items: center;
  gap: 6px;
}

#payment .recharge-record-empty button {
  min-height: 34px;
  margin-top: 8px;
  padding: 0 18px;
  color: #fff;
  background: #25272b;
  border: 1px solid #25272b;
  border-radius: 4px;
  font-weight: 750;
}

#payment .recharge-record-row b {
  color: #24272c;
  font-size: 13px;
}

#payment .recharge-record-amount {
  font-weight: 850;
}

#payment .recharge-record-amount.is-income {
  color: #15803d;
}

#payment .recharge-record-amount.is-expense {
  color: #d1432f;
}

#payment .recharge-type-pill.is-expense {
  color: #9f3525;
  background: #fff1ee;
  border-color: #f3c4bb;
}

#payment .recharge-chart-card > div:first-child > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #727b88;
  font-size: 12px;
}

#payment .recharge-chart-card > div:first-child > span i {
  width: 9px;
  height: 9px;
  background: #f2cf28;
  border-radius: 2px;
}

#payment .recharge-chart-card > div:first-child > span i:nth-of-type(2) {
  margin-left: 5px;
  background: #25272b;
}

#payment .recharge-bar-pair > .is-recharge {
  background: #f2cf28;
}

#payment .recharge-bar-pair > .is-spent {
  background: #25272b;
}

#payment .recharge-month-item strong {
  color: #444a53;
  font-size: 13px;
}

#payment .recharge-month-item span {
  overflow: hidden;
  color: #89919d;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  #payment .recharge-page-title {
    gap: 10px;
  }

  #payment .recharge-notice {
    flex-direction: column;
  }
}

#addresses {
  scroll-margin-top: 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#addresses.is-address-focused {
  border-color: #e2c532;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .2), 0 14px 30px rgba(15, 23, 42, .08);
}

@media (prefers-reduced-motion: reduce) {
  #addresses {
    transition: none;
  }
}

/* Member home and address management are separate sidebar views. */
#member .account-info-section {
  display: none;
}

#member .account-info-grid {
  grid-template-columns: minmax(0, 1fr);
}

#member .account-info-copy-address,
#member #addresses {
  display: none;
}

#member.address-management-mode .member-home-dashboard {
  display: none;
}

#member.address-management-mode .account-info-section {
  display: block;
  margin-top: 0;
}

#member.address-management-mode .account-info-copy-profile,
#member.address-management-mode .member-profile-card {
  display: none;
}

#member.address-management-mode .account-info-copy-address {
  display: grid;
}

#member.address-management-mode #addresses {
  display: block;
}

#member.address-management-mode .address-card {
  display: grid;
}

/* Address directory and editor are intentionally separate views. */
.address-management-workspace {
  min-width: 0;
}

.address-directory-view[hidden],
.address-editor-view[hidden] {
  display: none !important;
}

#member.address-management-mode:not(.address-editor-mode) .account-info-head {
  display: none;
}

#member.address-management-mode:not(.address-editor-mode) .account-info-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.address-directory-view:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "heading heading"
    "filters create"
    "cards cards"
    "pagination pagination";
  gap: 14px 20px;
}

.address-directory-title {
  display: contents;
}

.address-directory-title > strong {
  grid-area: heading;
  position: relative;
  padding: 0 0 13px;
  color: #27292e;
  border-bottom: 1px solid #e4e7eb;
  font-size: 19px;
  font-weight: 900;
}

.address-directory-title > strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 2px;
  background: #303238;
}

.address-directory-title > button {
  grid-area: create;
  align-self: end;
  min-height: 34px;
  padding: 0 16px;
  color: #fff;
  background: #343434;
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.address-directory-title > button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.address-directory-toolbar {
  grid-area: filters;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 345px));
  gap: 12px 10px;
  justify-content: start;
}

.address-directory-toolbar > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  padding-left: 12px;
  color: #686d75;
  background: #fff;
  border: 1px solid #d9dee7;
  border-radius: 4px;
  font-size: 13px;
}

.address-directory-toolbar input,
.address-directory-toolbar select {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  color: #34373d;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.address-directory-toolbar > div {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
}

.address-directory-toolbar button {
  min-width: 78px;
  min-height: 33px;
  padding: 0 16px;
  color: #606773;
  background: #fff;
  border: 1px solid #d9dee7;
  border-radius: 4px;
  font-weight: 800;
  cursor: pointer;
}

.address-directory-toolbar .address-directory-search {
  color: #fff;
  background: #343434;
  border-color: #343434;
}

.address-directory-list {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
}

.address-directory-pagination {
  grid-area: pagination;
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  color: #64748b;
  background: linear-gradient(110deg, #fbfcfe 0%, #fff 62%, #fffbed 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
  font-size: 13px;
}

.address-directory-pagination > span b {
  margin: 0 3px;
  color: #111827;
  font-weight: 900;
}

.address-directory-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

.address-directory-pages button,
.address-directory-pages strong {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: #64748b;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  box-shadow: none;
  line-height: 1;
}

.address-directory-pages strong {
  color: #fff;
  background: #1f2937;
  border-color: #1f2937;
  box-shadow: 0 5px 12px rgba(31, 41, 55, .16);
  font-weight: 900;
}

.address-directory-pages button:hover:not(:disabled) {
  color: #111827;
  background: #fff5b8;
  border-color: #ffd83d;
  cursor: pointer;
}

.address-directory-pages button:disabled {
  color: #cbd2dc;
  background: #f7f9fc;
  cursor: not-allowed;
}

.address-directory-pagination > label {
  margin: 0;
}

.address-directory-pagination select {
  width: 128px;
  height: 36px;
  margin: 0;
  padding: 0 34px 0 12px;
  color: #334155;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  outline: 0;
  font-size: 13px;
}

.address-directory-pagination select:focus {
  border-color: #f2c61f;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .16);
}

.address-directory-card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 122px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 16px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.address-directory-card:hover,
.address-directory-card:focus-within {
  border-color: #ccd2da;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}

.address-directory-card.is-default {
  border-color: #e7dfb0;
  box-shadow: inset 3px 0 0 #ffe246;
}

.address-directory-card-copy {
  min-width: 0;
}

.address-directory-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.address-directory-card-name strong {
  color: #17191d;
  font-size: 17px;
  font-weight: 900;
}

.address-default-badge {
  padding: 4px 8px;
  color: #ff646c;
  background: #fff0f1;
  border: 1px solid #ffd8dc;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}

.address-directory-card-copy > b {
  display: block;
  margin-top: 8px;
  color: #202329;
  font-size: 15px;
  font-weight: 800;
}

.address-directory-card-copy > p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: #747a84;
  font-size: 14px;
  line-height: 1.55;
}

.address-directory-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.address-directory-card:hover .address-directory-card-actions,
.address-directory-card:focus-within .address-directory-card-actions,
.address-directory-card.is-default .address-directory-card-actions {
  opacity: 1;
  pointer-events: auto;
}

.address-directory-card-actions button {
  min-height: 27px;
  padding: 0 10px;
  color: #59606b;
  background: #f5f6f8;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.address-directory-card-actions button:hover {
  color: #17191d;
  background: #eceff3;
}

.address-directory-card-actions .delete-address:hover {
  color: #d23f31;
  background: #fff1f0;
}

.address-default-label {
  align-self: center;
  color: #9a7a00;
  font-size: 12px;
  font-weight: 800;
}

.address-directory-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 28px;
  color: #758095;
  text-align: center;
  background: #fafbfd;
  border: 1px dashed #d7dee8;
  border-radius: 12px;
}

.address-directory-empty strong {
  color: #24272d;
  font-size: 17px;
}

.address-directory-empty button {
  min-height: 34px;
  margin-top: 8px;
  padding: 0 18px;
  color: #fff;
  background: #26292e;
  border: 0;
  border-radius: 5px;
  font-weight: 800;
  cursor: pointer;
}

.address-editor-view:not([hidden]) {
  display: block;
}

.address-editor-view .address-card {
  width: 100%;
}

@media (max-width: 900px) {
  .address-directory-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .address-directory-view:not([hidden]) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "create"
      "filters"
      "cards"
      "pagination";
  }

  .address-directory-title > button {
    justify-self: end;
  }

  .address-directory-toolbar {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .address-directory-toolbar > div {
    grid-column: auto;
  }

  .address-directory-card {
    flex-direction: column;
  }

  .address-directory-card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    opacity: 1;
    pointer-events: auto;
  }

  .address-directory-pagination {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .address-directory-pagination > label {
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .address-directory-toolbar > label {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .address-directory-toolbar > div,
  .address-directory-toolbar button {
    width: 100%;
  }

  .address-directory-toolbar button {
    flex: 1 1 0;
  }
}

/* Coupon center */
.coupon-center-panel.active {
  min-height: 640px;
}

.coupon-center-tabs {
  display: flex;
  align-items: flex-end;
  gap: 38px;
  min-width: 0;
  border-bottom: 1px solid #e4e6e9;
}

.coupon-center-tabs button {
  position: relative;
  min-height: 46px;
  padding: 0 0 9px;
  color: #92979f;
  background: transparent;
  border: 0;
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.coupon-center-tabs button b {
  font: inherit;
}

.coupon-center-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: transparent;
}

.coupon-center-tabs button.active {
  color: #343434;
}

.coupon-center-tabs button.active::after {
  background: #242424;
}

.coupon-center-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 18px;
  min-height: 540px;
  padding: 28px 0;
}

.coupon-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 490px;
  color: #959ba5;
  text-align: center;
}

.coupon-empty-state strong {
  color: #555c67;
  font-size: 16px;
}

.coupon-empty-state p {
  margin: 0;
  color: #969ca6;
  font-size: 14px;
}

.coupon-empty-state .coupon-login-button {
  min-height: 34px;
  margin-top: 10px;
  padding: 0 20px;
  color: #fff;
  background: #343434;
  border: 0;
  border-radius: 4px;
  font-weight: 800;
  cursor: pointer;
}

.coupon-empty-art {
  position: relative;
  width: 178px;
  height: 150px;
  margin-bottom: 8px;
}

.coupon-empty-art span {
  position: absolute;
  left: 62px;
  bottom: 10px;
  width: 62px;
  height: 70px;
  background: #eceef2;
  border-radius: 2px;
  box-shadow: 22px 10px 0 -7px #e2e5eb;
}

.coupon-empty-art span::after {
  content: "";
  position: absolute;
  left: -36px;
  bottom: -10px;
  width: 140px;
  height: 14px;
  background: #f3f4f7;
  border-radius: 50%;
}

.coupon-empty-art i {
  position: absolute;
  z-index: 1;
  left: 49px;
  top: 34px;
  width: 82px;
  height: 55px;
  background: #f1f2f5;
  clip-path: polygon(15% 0, 77% 22%, 100% 55%, 80% 100%, 0 73%);
  transform: rotate(7deg);
}

.coupon-empty-art i::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 7px;
  width: 70px;
  height: 48px;
  background: #f6f7f9;
  clip-path: polygon(20% 0, 100% 28%, 72% 100%, 0 70%);
}

.coupon-ticket {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.coupon-ticket-value {
  display: grid;
  align-content: center;
  align-self: stretch;
  justify-items: center;
  gap: 5px;
  padding: 18px;
  color: #735b00;
  text-align: center;
  background: linear-gradient(135deg, #fff7c7, #ffe36a);
  border-right: 1px dashed #dfc84e;
}

.coupon-ticket-value strong {
  font-size: 28px;
  font-weight: 1000;
}

.coupon-ticket-value span {
  font-size: 12px;
  font-weight: 800;
}

.coupon-ticket-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 18px;
}

.coupon-ticket-copy strong {
  overflow: hidden;
  color: #25282e;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-ticket-copy span,
.coupon-ticket-copy small {
  overflow: hidden;
  color: #7b828e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-ticket > button {
  min-height: 34px;
  margin-right: 18px;
  padding: 0 15px;
  color: #2f2f2f;
  background: #ffe246;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.coupon-ticket > em {
  margin-right: 18px;
  color: #9ba1aa;
  font-style: normal;
  font-weight: 800;
}

.coupon-ticket-used,
.coupon-ticket-expired {
  filter: grayscale(.75);
  opacity: .72;
}

@media (max-width: 900px) {
  .coupon-center-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .coupon-center-tabs {
    gap: 24px;
    overflow-x: auto;
  }

  .coupon-center-tabs button {
    flex: 0 0 auto;
    font-size: 16px;
  }

  .coupon-center-list,
  .coupon-empty-state {
    min-height: 410px;
  }

  .coupon-ticket {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .coupon-ticket-value {
    grid-row: 1 / span 2;
  }

  .coupon-ticket > button,
  .coupon-ticket > em {
    grid-column: 2;
    justify-self: start;
    margin: 0 18px 16px;
  }
}

/* Taobao-style cart and checkout flow — Xinming yellow/white brand */
#checkout {
  --checkout-yellow: #ffdc36;
  --checkout-yellow-strong: #f5c900;
  --checkout-yellow-soft: #fff9d9;
  --checkout-ink: #172033;
  --checkout-muted: #718096;
  --checkout-line: #e3e9f1;
  --checkout-surface: #f7f9fc;
  gap: 16px;
  padding-bottom: 20px;
}

/* The Taobao-style workbench belongs to the cart module only. */
#checkout.order-center-panel.active {
  display: grid;
}

.checkout-brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 91% 10%, rgba(255, 220, 54, .32), transparent 23%),
    linear-gradient(120deg, #fff 0%, #fffdf1 100%);
  border: 1px solid #e5eaf1;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(23, 32, 51, .05);
}

.checkout-brand-head > div {
  display: grid;
  gap: 3px;
}

.checkout-brand-head .checkout-eyebrow {
  color: #b08000;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .16em;
}

.checkout-brand-head strong {
  color: var(--checkout-ink);
  font-size: 25px;
  font-weight: 1000;
  line-height: 1.25;
}

.checkout-brand-head p {
  margin: 2px 0 0;
  color: var(--checkout-muted);
  font-size: 13px;
}

.checkout-cart-count {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 9px 14px;
  color: #7e5900;
  background: rgba(255, 255, 255, .82);
  border: 1px solid #f1cf59;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(180, 130, 0, .08);
}

.checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 18px;
  list-style: none;
}

.checkout-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #9aa4b2;
  font-size: 12px;
  font-weight: 900;
}

.checkout-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: #e3e8ef;
}

.checkout-progress b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #8c96a5;
  background: #fff;
  border: 2px solid #e1e6ed;
  border-radius: 50%;
}

.checkout-progress li.active {
  color: var(--checkout-ink);
}

.checkout-progress li.active b {
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-color: var(--checkout-yellow);
  box-shadow: 0 0 0 6px rgba(255, 220, 54, .2);
}

.checkout-progress li.is-complete::after,
.checkout-progress li.is-complete b {
  background: var(--checkout-yellow);
  border-color: var(--checkout-yellow);
}

.checkout-stage[hidden] {
  display: none !important;
}

.checkout-stage {
  position: relative;
  min-width: 0;
}

.checkout-cart-card,
.checkout-confirm-card,
.checkout-confirm-head {
  background: #fff;
  border: 1px solid var(--checkout-line);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(23, 32, 51, .045);
}

.checkout-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid #edf1f5;
}

.checkout-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.checkout-section-head strong {
  color: var(--checkout-ink);
  font-size: 17px;
  font-weight: 1000;
}

.checkout-section-head small {
  color: var(--checkout-muted);
  font-size: 12px;
  font-weight: 500;
}

.checkout-text-button,
.checkout-outline-button,
.checkout-confirm-head > button,
.checkout-selected-remove {
  min-height: 34px;
  padding: 0 13px;
  color: #596579;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.checkout-text-button:hover,
.checkout-outline-button:hover,
.checkout-confirm-head > button:hover {
  color: #725300;
  background: var(--checkout-yellow-soft);
  border-color: #eccb53;
}

.checkout-cart-table {
  min-width: 0;
  overflow-x: auto;
}

.checkout-cart-table-head,
#checkout .cart-item,
#checkout .checkout-cart-row {
  display: grid;
  grid-template-columns: 48px minmax(210px, 1.55fr) minmax(165px, 1.25fr) 86px 128px 106px 112px 86px 72px;
  align-items: center;
  gap: 10px;
  min-width: 1080px;
}

.checkout-cart-table-head {
  min-height: 46px;
  padding: 0 16px;
  color: #7f8998;
  background: #f7f8fa;
  border-bottom: 1px solid #eaedf2;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.checkout-cart-table-head span:nth-child(2),
.checkout-cart-table-head span:nth-child(3) {
  text-align: left;
}

#checkout .cart-list {
  display: block;
  max-height: min(430px, calc(100vh - 345px));
  min-height: 112px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
}

#checkout .cart-item,
#checkout .checkout-cart-row {
  min-height: 104px;
  padding: 12px 16px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  font-size: 13px;
  text-align: center;
  transition: background .18s ease, box-shadow .18s ease;
}

#checkout .cart-item:hover,
#checkout .checkout-cart-row:hover,
#checkout .cart-item.is-selected,
#checkout .checkout-cart-row.is-selected {
  background: #fffdf2;
}

#checkout .cart-item.is-selected,
#checkout .checkout-cart-row.is-selected {
  box-shadow: inset 3px 0 var(--checkout-yellow-strong);
}

#checkout input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: #f3c600;
  cursor: pointer;
}

#checkout .cart-product-cell {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
}

#checkout .cart-product-thumb {
  width: 76px;
  height: 70px;
  border-color: #e0e6ed;
  border-radius: 10px;
  box-shadow: none;
  grid-row: auto;
}

#checkout .cart-product-copy,
#checkout .cart-spec-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

#checkout .cart-product-copy strong {
  overflow: hidden;
  color: var(--checkout-ink);
  font-size: 14px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#checkout .cart-product-copy span,
#checkout .cart-product-copy small,
#checkout .cart-spec-cell span,
#checkout .cart-production-cell small,
#checkout .cart-lead-cell small {
  overflow: hidden;
  color: var(--checkout-muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
}

#checkout .cart-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#checkout .cart-spec-tags i {
  padding: 3px 6px;
  color: #506176;
  background: #f3f6fa;
  border-radius: 5px;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

#checkout .cart-unit-price,
#checkout .cart-line-total {
  color: var(--checkout-ink);
  font-weight: 900;
}

#checkout .cart-line-total {
  color: #f2522d;
  font-size: 17px;
}

#checkout .cart-quantity-stepper {
  display: inline-grid;
  grid-template-columns: 32px 54px 32px;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d9e0e9;
  border-radius: 7px;
}

#checkout .cart-quantity-stepper button,
#checkout .cart-quantity-stepper input {
  width: 100%;
  min-height: 34px;
  padding: 0;
  color: #415066;
  background: #fff;
  border: 0;
  border-radius: 0;
  text-align: center;
}

#checkout .cart-quantity-stepper button:first-child {
  border-right: 1px solid #e2e7ed;
}

#checkout .cart-quantity-stepper button:last-child {
  border-left: 1px solid #e2e7ed;
}

#checkout .cart-quantity-stepper button:hover {
  background: var(--checkout-yellow-soft);
}

#checkout .cart-production-cell,
#checkout .cart-lead-cell {
  display: grid;
  gap: 4px;
  justify-items: center;
  color: #445269;
  font-weight: 800;
}

#checkout .cart-production-cell b {
  padding: 4px 7px;
  color: #8b6500;
  background: #fff6ca;
  border-radius: 999px;
  font-size: 10px;
}

#checkout .cart-action-cell {
  display: grid;
  gap: 5px;
}

#checkout .cart-action-cell button,
#checkout .remove-cart {
  min-height: 28px;
  padding: 0 8px;
  color: #687386;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}

#checkout .cart-action-cell button:hover,
#checkout .remove-cart:hover {
  color: #d34428;
  background: #fff1ed;
}

.checkout-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 250px;
  padding: 30px;
  color: var(--checkout-muted);
  text-align: center;
}

.checkout-empty-state[hidden] {
  display: none !important;
}

.checkout-empty-state i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 15px;
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  box-shadow: 0 10px 22px rgba(245, 201, 0, .24);
}

.checkout-empty-state strong {
  color: var(--checkout-ink);
  font-size: 17px;
}

.checkout-empty-state span {
  font-size: 12px;
}

.checkout-empty-state a {
  margin-top: 6px;
  padding: 9px 20px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 8px;
  font-weight: 900;
  text-decoration: none;
}

.checkout-cart-bar,
.checkout-submit-bar {
  position: sticky;
  bottom: 12px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 10px 0;
  padding: 10px 12px 10px 16px;
  background: rgba(23, 32, 51, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(23, 32, 51, .2);
  backdrop-filter: blur(12px);
}

#checkout .checkout-cart-bar {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  width: 100%;
  margin: 10px 0 0;
}

.checkout-select-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.checkout-selected-remove {
  color: #c7d0dd;
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
}

.checkout-cart-bar-summary {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 0;
  color: #fff;
}

.checkout-cart-bar-summary > span b {
  color: var(--checkout-yellow);
}

.checkout-cart-bar-summary > small {
  color: #aeb9c8;
}

.checkout-cart-bar-summary > strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
}

.checkout-cart-bar-summary em {
  color: var(--checkout-yellow);
  font-size: 25px;
  font-style: normal;
  font-weight: 1000;
}

#cartCheckoutButton,
#checkoutSubmitButton {
  min-width: 190px;
  min-height: 48px;
  padding: 0 22px;
  color: #182033;
  background: linear-gradient(180deg, #ffe65d 0%, #ffd632 100%);
  border: 1px solid #f4c900;
  border-radius: 9px;
  box-shadow: 0 10px 22px rgba(245, 201, 0, .18);
  font-size: 15px;
  font-weight: 1000;
  cursor: pointer;
}

#cartCheckoutButton:disabled,
#checkoutSubmitButton:disabled {
  color: #8e98a7;
  background: #e8ecf2;
  border-color: #e8ecf2;
  box-shadow: none;
  cursor: not-allowed;
}

.checkout-confirm-stage {
  display: grid;
  gap: 14px;
}

.checkout-confirm-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}

.checkout-confirm-head > div {
  display: grid;
  gap: 2px;
}

.checkout-confirm-head strong {
  color: var(--checkout-ink);
  font-size: 20px;
}

.checkout-confirm-head span {
  color: var(--checkout-muted);
  font-size: 12px;
}

.checkout-confirm-head em {
  padding: 7px 10px;
  color: #8b6500;
  background: var(--checkout-yellow-soft);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

#checkout .checkout-confirm-form {
  position: static;
  display: grid;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.checkout-confirm-card {
  min-width: 0;
  overflow: hidden;
}

.checkout-step-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 1000;
}

.checkout-address-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 190px;
  overflow-y: auto;
  padding: 14px 16px 16px;
}

.checkout-address-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  min-height: 106px;
  padding: 13px 14px;
  color: #415066;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.checkout-address-card:hover {
  border-color: #e0bd35;
}

.checkout-address-card.active,
.checkout-address-card[aria-pressed="true"] {
  background: #fffdf0;
  border-color: #e7bd17;
  box-shadow: inset 0 0 0 1px #e7bd17, 0 8px 20px rgba(226, 185, 23, .09);
}

.checkout-address-card.active::after,
.checkout-address-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 10px 0 9px;
  font-weight: 1000;
}

.checkout-address-card strong {
  color: var(--checkout-ink);
  font-size: 14px;
}

.checkout-address-card strong span {
  margin-left: 9px;
  color: #596579;
  font-weight: 700;
}

.checkout-address-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #697588;
  font-size: 12px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.checkout-address-card em {
  justify-self: start;
  padding: 2px 6px;
  color: #987000;
  background: #fff3af;
  border-radius: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.checkout-address-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 108px;
  color: var(--checkout-muted);
  background: #f8fafc;
  border: 1px dashed #ced7e2;
  border-radius: 10px;
  font-size: 12px;
}

.checkout-address-empty strong {
  color: #4c5a6f;
  font-size: 14px;
}

.checkout-review-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 0 16px;
}

.checkout-review-item {
  display: grid;
  grid-template-columns: minmax(230px, 1.45fr) minmax(180px, 1fr) 90px 100px 110px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f5;
}

.checkout-review-item:last-child {
  border-bottom: 0;
}

.checkout-review-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.checkout-review-product .cart-product-thumb {
  width: 58px;
  height: 54px;
}

.checkout-review-product > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.checkout-review-product strong,
.checkout-review-item > strong {
  overflow: hidden;
  color: var(--checkout-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-review-product span,
.checkout-review-item > span {
  color: var(--checkout-muted);
  font-size: 12px;
}

.checkout-review-item > b {
  color: #f2522d;
  font-size: 16px;
  text-align: right;
}

.checkout-confirm-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  gap: 14px;
  align-items: stretch;
}

.checkout-delivery-fields {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 16px;
}

.checkout-delivery-fields label {
  display: grid;
  gap: 7px;
  color: #48566a;
  font-size: 12px;
  font-weight: 900;
}

.checkout-delivery-fields input,
.checkout-delivery-fields textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #dbe2eb;
  border-radius: 8px;
}

.checkout-delivery-fields textarea {
  height: 68px;
  min-height: 68px;
  resize: vertical;
}

.checkout-balance-priority {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  margin: 14px 16px 16px;
  padding: 14px;
  color: #465469;
  background: linear-gradient(135deg, #fffdf0 0%, #fff 72%);
  border: 1px solid #efd66f;
  border-radius: 11px;
}

.checkout-balance-priority > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 11px;
  font-size: 16px;
  font-style: normal;
  font-weight: 1000;
}

.checkout-balance-priority > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.checkout-balance-priority strong {
  color: var(--checkout-ink);
  font-size: 14px;
}

.checkout-balance-priority span {
  color: var(--checkout-muted);
  font-size: 11px;
  line-height: 1.5;
}

.checkout-balance-priority > em {
  padding: 6px 9px;
  color: #805d00;
  background: #fff1a8;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.checkout-balance-priority.is-insufficient {
  background: linear-gradient(135deg, #fff6f0 0%, #fff 72%);
  border-color: #f3b59e;
}

.checkout-balance-priority.is-insufficient > i {
  color: #fff;
  background: #f2522d;
}

.checkout-balance-priority.is-insufficient > em {
  color: #b43b21;
  background: #ffded4;
}

.checkout-payment-methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 14px 16px 16px;
  border: 0;
}

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

.checkout-payment-methods button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  color: #556278;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
}

.checkout-payment-methods button:hover {
  border-color: #e0bd35;
}

.checkout-payment-methods button.active,
.checkout-payment-methods button[aria-pressed="true"] {
  color: var(--checkout-ink);
  background: var(--checkout-yellow-soft);
  border-color: #e2ba1e;
  box-shadow: inset 0 0 0 1px #e2ba1e;
}

.checkout-payment-methods button > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border-radius: 9px;
  font-style: normal;
  font-weight: 1000;
}

.checkout-payment-methods button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.checkout-payment-methods button strong {
  overflow: hidden;
  color: var(--checkout-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payment-methods button small {
  overflow: hidden;
  color: #7a8697;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payment-methods button > em {
  display: none;
  color: #8a6600;
  font-style: normal;
  font-weight: 1000;
}

.checkout-payment-methods button.active > em,
.checkout-payment-methods button[aria-pressed="true"] > em {
  display: block;
}

.checkout-submit-bar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto 230px;
  color: #fff;
}

#checkout .checkout-submit-bar .checkout-balance-status {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-content: start;
  gap: 2px 9px;
  padding: 0;
  border: 0;
}

#checkout .checkout-submit-bar .checkout-balance-status span,
#checkout .checkout-submit-bar .checkout-balance-status span b {
  color: #fff;
}

#checkout .checkout-submit-bar .checkout-balance-status small {
  grid-column: 1;
  color: #aeb9c8;
}

#checkout .checkout-submit-bar .checkout-balance-status button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 58px;
  min-height: 32px;
  color: var(--checkout-ink);
  background: var(--checkout-yellow);
  border: 0;
  border-radius: 7px;
  font-weight: 900;
}

.checkout-submit-summary {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 1px 9px;
  text-align: right;
}

.checkout-submit-summary span {
  color: #ccd4df;
  font-size: 12px;
}

.checkout-submit-summary strong {
  color: var(--checkout-yellow);
  font-size: 25px;
}

.checkout-submit-summary small {
  grid-column: 1 / -1;
  color: #9eabba;
  font-size: 10px;
}

#checkoutSubmitButton {
  display: grid;
  align-content: center;
  gap: 1px;
}

#checkoutSubmitButton small {
  font-size: 10px;
  font-weight: 700;
  opacity: .74;
}

.checkout-address-dialog {
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100vh - 30px);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}

.checkout-address-dialog::backdrop {
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(3px);
}

.checkout-address-dialog-shell {
  display: grid;
  max-height: calc(100vh - 30px);
}

.checkout-address-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background:
    radial-gradient(circle at 90% 0, rgba(255, 220, 54, .34), transparent 35%),
    #fffdf3;
  border-bottom: 1px solid #ebeef3;
}

.checkout-address-dialog-head > div {
  display: grid;
  gap: 3px;
}

.checkout-address-dialog-head strong {
  color: var(--checkout-ink, #172033);
  font-size: 20px;
}

.checkout-address-dialog-head span {
  color: #718096;
  font-size: 12px;
}

.checkout-address-dialog-head button {
  width: 34px;
  height: 34px;
  padding: 0;
  color: #556278;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.checkout-address-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  overflow-y: auto;
  padding: 20px;
}

.checkout-address-form label {
  display: grid;
  gap: 7px;
  color: #465469;
  font-size: 12px;
  font-weight: 900;
}

.checkout-address-form input,
.checkout-address-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: #172033;
  background: #fff;
  border: 1px solid #d9e1eb;
  border-radius: 8px;
}

.checkout-address-form textarea {
  min-height: 76px;
  resize: vertical;
}

.checkout-address-form .checkout-address-region,
.checkout-address-form .checkout-address-detail,
.checkout-address-form .checkout-address-dialog-actions {
  grid-column: 1 / -1;
}

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

.checkout-address-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 5px;
}

.checkout-address-dialog-actions .checkout-default-address {
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  margin-right: auto;
}

.checkout-address-dialog-actions button {
  min-width: 104px;
  min-height: 42px;
  padding: 0 16px;
  color: #556278;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  font-weight: 900;
}

.checkout-address-dialog-actions button[type="submit"] {
  color: #172033;
  background: #ffdc36;
  border-color: #f0c900;
}

@media (max-width: 1180px) {
  .checkout-address-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checkout-confirm-grid {
    grid-template-columns: 1fr;
  }

  .checkout-payment-methods {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    overflow-x: auto;
  }

  .checkout-submit-bar {
    grid-template-columns: minmax(250px, 1fr) auto 210px;
  }
}

@media (max-width: 760px) {
  #checkout {
    gap: 12px;
    padding-bottom: 4px;
  }

  .checkout-brand-head {
    align-items: flex-start;
    padding: 16px;
  }

  .checkout-brand-head strong {
    font-size: 21px;
  }

  .checkout-cart-count {
    min-width: auto;
    padding: 7px 9px;
    font-size: 11px;
  }

  .checkout-progress {
    padding: 0 4px;
  }

  .checkout-section-head {
    min-height: 60px;
    padding: 12px;
  }

  .checkout-section-head > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .checkout-section-head small {
    flex-basis: 100%;
    margin-left: 44px;
  }

  .checkout-cart-table-head {
    display: none;
  }

  #checkout .cart-list {
    max-height: none;
    min-height: 0;
    overflow: visible;
    padding: 10px;
  }

  #checkout .cart-item,
  #checkout .checkout-cart-row {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    min-width: 0;
    min-height: 0;
    margin-bottom: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    text-align: left;
  }

  #checkout .cart-product-cell {
    grid-column: 2 / -1;
    grid-row: 1;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #checkout .cart-product-thumb {
    width: 64px;
    height: 60px;
  }

  #checkout .cart-spec-cell {
    grid-column: 2 / -1;
    padding: 8px 0;
    border-top: 1px dashed #e4e9ef;
    border-bottom: 1px dashed #e4e9ef;
  }

  #checkout .cart-unit-price,
  #checkout .cart-production-cell,
  #checkout .cart-lead-cell {
    display: none;
  }

  #checkout .cart-quantity-cell {
    grid-column: 2;
  }

  #checkout .cart-line-total {
    grid-column: 3;
    align-self: center;
    text-align: right;
  }

  #checkout .cart-action-cell {
    position: absolute;
    top: 9px;
    right: 8px;
  }

  #checkout .cart-action-cell button:not(.remove-cart) {
    display: none;
  }

  .checkout-cart-bar,
  .checkout-submit-bar {
    bottom: 6px;
    gap: 8px;
    margin: 8px 2px 0;
    padding: 9px 10px;
    border-radius: 11px;
  }

  .checkout-selected-remove,
  .checkout-cart-bar-summary > small {
    display: none;
  }

  .checkout-cart-bar-summary {
    gap: 9px;
  }

  .checkout-cart-bar-summary > span {
    display: none;
  }

  .checkout-cart-bar-summary > strong {
    display: grid;
    gap: 0;
    margin-left: auto;
    text-align: right;
  }

  .checkout-cart-bar-summary em {
    font-size: 20px;
  }

  #cartCheckoutButton {
    min-width: 122px;
    min-height: 44px;
    padding: 0 12px;
  }

  .checkout-confirm-head {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 11px;
  }

  .checkout-confirm-head em {
    display: none;
  }

  .checkout-address-list {
    grid-template-columns: 1fr;
    max-height: 170px;
    padding: 10px 12px 12px;
  }

  .checkout-review-list {
    max-height: 250px;
    padding: 0 12px;
  }

  .checkout-review-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .checkout-review-item > span:nth-of-type(1) {
    grid-column: 1;
  }

  .checkout-review-item > span:nth-of-type(n+2) {
    display: none;
  }

  .checkout-review-item > b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .checkout-delivery-fields {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .checkout-balance-priority {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 0;
    margin: 12px;
    padding: 12px;
  }

  .checkout-balance-priority > i {
    width: 38px;
    height: 38px;
  }

  .checkout-balance-priority > em {
    grid-column: 2;
    justify-self: start;
  }

  .checkout-payment-methods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }

  .checkout-payment-methods button {
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    min-height: 62px;
    padding: 8px;
  }

  .checkout-payment-methods button > i {
    width: 30px;
    height: 30px;
  }

  .checkout-submit-bar {
    grid-template-columns: minmax(0, 1fr) 150px;
  }

  #checkout .checkout-submit-bar .checkout-balance-status {
    display: none;
  }

  .checkout-submit-summary {
    justify-content: start;
    text-align: left;
  }

  .checkout-submit-summary span,
  .checkout-submit-summary small {
    display: none;
  }

  .checkout-submit-summary strong {
    font-size: 22px;
  }

  #checkoutSubmitButton {
    min-width: 150px;
    min-height: 46px;
    padding: 0 10px;
  }

  .checkout-address-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .checkout-address-form .checkout-address-region,
  .checkout-address-form .checkout-address-detail,
  .checkout-address-form .checkout-address-dialog-actions {
    grid-column: 1;
  }

  .checkout-address-region {
    grid-template-columns: 1fr;
  }

  .checkout-address-dialog-actions {
    flex-wrap: wrap;
  }

  .checkout-address-dialog-actions .checkout-default-address {
    flex-basis: 100%;
  }
}

/* Unified storefront numbered pagination */
:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  align-self: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding: 12px 16px;
  color: #64748b;
  background: #fff;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .035);
  font-size: 13px;
  text-align: left;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination[hidden] {
  display: none !important;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination > .pagination-total {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 4px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination > .pagination-total b {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls,
:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-page-numbers {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls {
  flex: 0 1 auto;
  max-width: 100%;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-page-numbers {
  flex: 0 0 auto;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button,
:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-page-gap {
  display: inline-flex;
  min-width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
  color: #64748b;
  background: #f7f9fb;
  border: 1px solid #e1e7ef;
  border-radius: 4px;
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button {
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button.active,
:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button[aria-current="page"] {
  color: #fff;
  background: #1f2937;
  border-color: #1f2937;
  box-shadow: 0 4px 10px rgba(31, 41, 55, .18);
  font-weight: 900;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button:hover:not(:disabled):not(.active):not([aria-current="page"]) {
  color: #111827;
  background: #fff3a8;
  border-color: #ffd83d;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(255, 216, 61, .28);
  outline-offset: 1px;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button:disabled {
  color: #c4cbd4;
  background: #f7f8fa;
  border-color: #e5e9ef;
  cursor: not-allowed;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-page-gap {
  color: #111827;
  font-weight: 900;
  cursor: default;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination select {
  width: 128px;
  min-width: 128px;
  height: 36px;
  margin: 0;
  padding: 0 34px 0 12px;
  color: #334155;
  background-color: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  outline: 0;
  font-family: inherit;
  font-size: 13px;
}

:is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination select:focus-visible {
  border-color: #e6bd17;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .2);
}

@media (max-width: 640px) {
  :is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination {
    gap: 10px 12px;
    padding: 12px;
  }

  :is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  :is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-controls button,
  :is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination .pagination-page-gap {
    min-width: 40px;
    height: 40px;
  }

  :is(#orders, #payment, #invoice, #service, #addresses) .numbered-pagination select {
    height: 40px;
  }
}

/* The payment action belongs directly below the confirmation cards. */
#checkout .checkout-confirm-stage:not([hidden]) .checkout-submit-bar {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  width: 100%;
  margin: 12px 0 0;
}

/* Product dialog action bar: six actions stay aligned and read as one toolbar. */
.product-detail-copy.has-pvc-tabs .detail-actions {
  display: grid;
  grid-template-columns:
    minmax(66px, .62fr)
    minmax(88px, 1fr)
    minmax(88px, 1fr)
    minmax(88px, .94fr)
    minmax(108px, 1.18fr)
    minmax(92px, .96fr);
  gap: 8px;
  margin: 0;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn {
  min-width: 0;
  min-height: 42px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
}

.product-detail-copy.has-pvc-tabs .detail-btn-muted {
  color: #667085;
  background: #fff;
  border-color: #dfe5ec;
}

.product-detail-copy.has-pvc-tabs .detail-btn-inquiry {
  color: #5f4800;
  background: #fff8d4;
  border-color: #e9c637;
}

.product-detail-copy.has-pvc-tabs .detail-btn-primary {
  color: #111827;
  background: linear-gradient(180deg, #ffe867, #ffd83d);
  border-color: #e8ba00;
  box-shadow: 0 7px 16px rgba(232, 186, 0, .2);
}

.product-detail-copy.has-pvc-tabs .detail-btn-green {
  color: #172033;
  background: #fff;
  border-color: #b9c6d6;
}

.product-detail-copy.has-pvc-tabs .detail-btn-gold {
  color: #5b6472;
  background: #fff;
  border-color: #dfe5ec;
}

.product-detail-copy.has-pvc-tabs .detail-btn-green::before {
  content: "↑ ";
}

.product-detail-copy.has-pvc-tabs .detail-btn-gold::before {
  content: "☆ ";
}

.product-detail-copy.has-pvc-tabs .detail-actions [data-action="cart"]:disabled {
  color: #98a2b3;
  background: #edf1f5;
  border-color: #e2e7ed;
  box-shadow: none;
  opacity: 1;
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: #d2ae16;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .09);
}

@media (max-width: 1180px) {
  .product-detail-copy.has-pvc-tabs .detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .product-detail-copy.has-pvc-tabs .detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }
}

/* 印品下单：按真实商品生成的模板式全品类导航。 */
.site-header .category-mega:has(.print-order-mega-shell) {
  max-height: min(610px, calc(100vh - 116px));
  padding: 0;
  overflow: auto;
  background: #fff;
  border-bottom: 1px solid #dfe4ea;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
}

.print-order-mega-shell {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  width: min(1700px, 100%);
  min-height: 555px;
  margin: 0 auto;
  color: #111827;
  background: #fff;
}

.print-order-mega-sidebar {
  padding: 18px 16px 20px;
  background: #f7f8fb;
  border-right: 1px solid #e5e7eb;
}

.print-order-mega-sidebar-title {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 14px;
  color: #111827;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 950;
}

.print-order-mega-sidebar-title span {
  font-size: 22px;
  font-weight: 500;
}

.print-order-mega-category-list {
  display: grid;
  gap: 3px;
}

.print-order-mega-category {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 39px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 4px 10px;
  color: #2b3441;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.print-order-mega-category:hover {
  background: #fff;
  border-color: #e1e6ed;
  transform: translateX(2px);
}

.print-order-mega-category.active {
  color: #111827;
  background: #ffe75a;
  border-color: #f1ce23;
  box-shadow: 0 5px 14px rgba(191, 145, 0, 0.12);
}

.print-order-mega-category-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #526071;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 950;
}

.print-order-mega-category.active .print-order-mega-category-icon {
  color: #111827;
  border-color: rgba(17, 24, 39, 0.12);
}

.print-order-mega-category > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.print-order-mega-category strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-category small {
  overflow: hidden;
  color: #8994a3;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-category.active small {
  color: #6f5b00;
}

.print-order-mega-category em {
  min-width: 24px;
  padding: 3px 6px;
  color: #6f7c8e;
  background: #edf1f5;
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.print-order-mega-category.active em {
  color: #725a00;
  background: rgba(255, 255, 255, 0.64);
}

.print-order-mega-content {
  position: relative;
  min-width: 0;
  padding: 20px 28px 22px;
}

.print-order-mega-content > .mega-close {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 13px;
  width: 34px;
  height: 34px;
  color: #5f6b7b;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 21px;
  cursor: pointer;
}

.print-order-mega-content > .mega-close:hover {
  color: #111827;
  background: #f2f4f7;
}

.print-order-mega-heading {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 42px 12px 0;
  border-bottom: 1px solid #dfe4ea;
}

.print-order-mega-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.print-order-mega-heading small {
  color: #a97900;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.13em;
}

.print-order-mega-heading strong {
  color: #111827;
  font-size: 20px;
  font-weight: 1000;
}

.print-order-mega-heading span {
  overflow: hidden;
  color: #7c8796;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-all {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  color: #243044;
  background: #fff;
  border: 1px solid #dbe2ea;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.print-order-mega-all:hover {
  background: #fff8ce;
  border-color: #e9bd18;
}

.print-order-mega-feature {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(160px, 0.54fr) minmax(430px, 1.5fr);
  gap: 20px;
  min-height: 230px;
}

.print-order-mega-leads {
  display: grid;
  gap: 10px;
}

.print-order-mega-lead {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 66px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 15px;
  color: #243044;
  background: #fff1f2;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.print-order-mega-lead.lead-2 {
  background: #e5f8f8;
}

.print-order-mega-lead.lead-3 {
  background: #eaf2ff;
}

.print-order-mega-lead:hover {
  border-color: #e6bf25;
  transform: translateY(-2px);
}

.print-order-mega-lead i {
  color: #26303a;
  font-family: Georgia, serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
}

.print-order-mega-lead span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.print-order-mega-lead strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-lead small {
  overflow: hidden;
  color: #768292;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-compact {
  display: grid;
  align-content: start;
  gap: 2px;
}

.print-order-mega-compact button {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  min-height: 31px;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 3px 5px;
  overflow: hidden;
  color: #273242;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
}

.print-order-mega-compact button:hover {
  color: #111827;
  background: #fff7c7;
}

.print-order-mega-compact i {
  color: #111827;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.print-order-mega-compact span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(230px, 1fr);
  min-width: 0;
  min-height: 230px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 15%, rgba(255, 225, 104, 0.24), transparent 24%),
    linear-gradient(115deg, #244d3a 0%, #315a47 48%, #466b55 100%);
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}

.print-order-mega-banner:hover .product-art-main {
  transform: scale(1.035);
}

.print-order-mega-banner-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px 8px 24px 28px;
}

.print-order-mega-banner-copy em {
  color: #ffe253;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.print-order-mega-banner-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(20px, 2vw, 31px);
  font-weight: 1000;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.print-order-mega-banner-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.83);
  font-size: 11px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.print-order-mega-banner-copy b {
  justify-self: start;
  margin-top: 3px;
  padding: 8px 13px;
  color: #111827;
  background: #ffe04a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.print-order-mega-banner-art {
  min-width: 0;
  height: 100%;
}

.print-order-mega-banner .product-art {
  width: 100%;
  height: 100%;
  min-height: 230px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.print-order-mega-banner .product-art::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 42%;
  background: linear-gradient(90deg, #315a47, transparent);
  pointer-events: none;
}

.print-order-mega-banner .product-art-main {
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease;
}

.print-order-mega-banner .product-art-badge {
  display: none;
}

.print-order-mega-banner.is-empty {
  display: grid;
  grid-template-columns: 1fr;
}

.print-order-mega-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: 28px;
  margin-top: 17px;
}

.print-order-mega-lower > section {
  min-width: 0;
}

.print-order-mega-lower header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #dfe4ea;
}

.print-order-mega-lower header strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.print-order-mega-lower header span {
  color: #8792a2;
  font-size: 9px;
}

.print-order-mega-newest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
}

.print-order-mega-newest button {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding: 4px 0;
  overflow: hidden;
  color: #404c5e;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.print-order-mega-newest button:hover {
  color: #b57c00;
}

.print-order-mega-newest strong,
.print-order-mega-newest small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-newest strong {
  font-size: 11px;
  font-weight: 850;
}

.print-order-mega-newest small {
  color: #9aa3b0;
  font-size: 9px;
}

.print-order-mega-updates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 15px;
}

.print-order-mega-updates button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  color: #465265;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.print-order-mega-updates button:hover span {
  color: #a16e00;
}

.print-order-mega-updates em {
  padding: 2px 6px;
  color: #ef3d32;
  border: 1px solid #ff665c;
  border-radius: 4px;
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}

.print-order-mega-updates span {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.print-order-mega-empty {
  display: grid;
  min-height: 200px;
  place-items: center;
  margin: 0;
  color: #8a94a3;
  font-size: 12px;
}

@media (max-width: 1320px) {
  .print-order-mega-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .print-order-mega-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .print-order-mega-feature {
    grid-template-columns: minmax(210px, 0.8fr) minmax(135px, 0.5fr) minmax(350px, 1.35fr);
    gap: 14px;
  }
}

@media (max-width: 1080px) {
  .print-order-mega-sidebar {
    padding-right: 10px;
    padding-left: 10px;
  }

  .print-order-mega-shell {
    grid-template-columns: 218px minmax(0, 1fr);
  }

  .print-order-mega-feature {
    grid-template-columns: minmax(200px, 0.8fr) minmax(320px, 1.3fr);
  }

  .print-order-mega-compact {
    display: none;
  }

  .print-order-mega-lower {
    gap: 18px;
  }
}

/* Template-style product navigation: compact top categories with a three-level mega menu. */
.site-header .category-bar {
  display: flex;
  justify-content: center;
  min-height: 58px;
  height: 58px;
  gap: clamp(12px, 2.35vw, 42px);
  padding: 0 max(18px, calc((100vw - 1540px) / 2 + 18px));
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-top: 1px solid #f1f3f5;
  border-bottom: 1px solid #e5e7eb;
  scrollbar-width: none;
}

.site-header .category-bar::-webkit-scrollbar {
  display: none;
}

.site-header .category-chip {
  min-width: max-content;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
}

.site-header .category-chip.active {
  background: #ffe95a;
  box-shadow: none;
}

.site-header .category-mega {
  top: 100%;
  max-height: min(420px, calc(100vh - 116px));
  overflow: hidden auto;
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.13);
}

.template-mega-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 24px;
  width: min(1380px, calc(100% - 56px));
  min-height: 300px;
  margin: 0 auto;
  padding: 22px 0 20px;
  color: #111827;
  background: #fff;
}

.template-mega-catalog {
  min-width: 0;
  padding-right: 24px;
  border-right: 1px dashed #dfe4ea;
}

.template-mega-heading {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid #e5e7eb;
}

.template-mega-heading > div {
  display: flex;
  align-items: baseline;
  gap: 11px;
  min-width: 0;
}

.template-mega-heading small,
.template-mega-recommend-copy header small {
  color: #b48700;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.11em;
}

.template-mega-heading strong {
  color: #111827;
  font-size: 19px;
  font-weight: 1000;
}

.template-mega-heading > div > span {
  overflow: hidden;
  color: #7a8491;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-mega-heading > div > em {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: #8a6500;
  background: #fff7c7;
  border: 1px solid #f3d45b;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.template-mega-all {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  color: #313b47;
  background: #fff;
  border: 1px solid #dfe4ea;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.template-mega-all:hover {
  color: #111827;
  background: #fff8ce;
  border-color: #f0c72e;
}

.template-mega-rows {
  display: grid;
  gap: 4px;
}

.template-mega-row {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 14px;
  min-height: 46px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px dashed #e2e6ec;
}

.template-mega-row:last-child {
  border-bottom: 0;
}

.template-mega-group {
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: #222b36;
  background: linear-gradient(100deg, #fff8d8 0%, #f8fafc 100%);
  border: 1px solid #f1e6b5;
  border-radius: 9px;
  text-align: left;
}

.template-mega-group strong {
  font-size: 13px;
  font-weight: 950;
}

.template-mega-group span {
  color: #d9a700;
  font-size: 16px;
}

.template-mega-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.template-mega-items button {
  display: flex;
  min-width: 0;
  height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  overflow: hidden;
  color: #4f5c6c;
  background: #f8fafc;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.template-mega-items button:hover {
  color: #111827;
  background: #fff9dc;
  border-color: #efca38;
  transform: translateY(-1px);
}

.template-mega-items button i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: #ffd82f;
  border: 1px solid #d6a900;
  border-radius: 50%;
}

.template-mega-items button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-mega-recommend {
  position: relative;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 2px 32px 0 0;
}

.template-mega-recommend-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}

.template-mega-recommend-copy header {
  display: grid;
  gap: 4px;
}

.template-mega-recommend-copy header strong {
  color: #111827;
  font-size: 17px;
  font-weight: 1000;
}

.template-mega-recommend-list {
  display: grid;
  gap: 4px;
}

.template-mega-recommend-list button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 5px 7px;
  color: #5e6875;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.template-mega-recommend-list button:hover {
  color: #111827;
  background: #fff9dc;
  border-color: #f0cf4b;
}

.template-mega-recommend-list i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #8b6800;
  background: #ffe45c;
  border-radius: 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.template-mega-recommend-list span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-mega-recommend-list small {
  display: none;
}

.template-mega-preview {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #111827;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}

.template-mega-preview > em {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  color: #111827;
  background: rgba(255, 224, 64, 0.94);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.template-mega-preview:hover {
  border-color: #f0c72e;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.template-mega-preview.is-empty {
  min-height: 205px;
  align-content: center;
  cursor: default;
  border-style: dashed;
}

.template-mega-preview.is-empty:hover {
  border-color: #edf0f4;
  box-shadow: none;
}

.template-mega-preview.is-empty > span {
  text-align: center;
}

.template-mega-preview .product-art {
  width: 100%;
  height: 205px;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.template-mega-preview .product-art-main {
  object-fit: cover;
  object-position: center;
}

.template-mega-preview .product-art-badge {
  display: none;
}

.template-mega-preview > span {
  display: grid;
  gap: 3px;
  padding: 9px 11px 10px;
}

.template-mega-preview > span strong {
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-mega-preview > span small {
  display: -webkit-box;
  overflow: hidden;
  color: #7b8491;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.site-header .template-mega-recommend .mega-close {
  top: -9px;
  right: 0;
}

.template-mega-empty {
  margin: 50px 0;
  color: #8a94a3;
  text-align: center;
}

.category-backdrop.is-open {
  background: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1240px) {
  .template-mega-shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    width: calc(100% - 36px);
    gap: 18px;
  }

  .template-mega-catalog {
    padding-right: 18px;
  }

  .template-mega-row {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 12px;
  }

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

  .template-mega-recommend {
    grid-template-columns: 108px minmax(0, 1fr);
    padding-right: 28px;
    gap: 11px;
  }
}

@media (max-width: 980px) {
  .site-header .category-bar {
    display: flex;
    justify-content: flex-start;
  }

  .site-header .category-mega,
  .category-backdrop {
    display: none !important;
  }
}

/* Product configuration workbench: one compact flow from specification to pricing. */
.product-detail-copy.has-pvc-tabs .product-config-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 221, 64, .24), transparent 34%),
    linear-gradient(135deg, #fffbed 0%, #fff 54%, #f8fafc 100%);
  border: 1px solid #eadb94;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.product-config-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-config-title > span {
  color: #9a7200;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.product-config-title > strong {
  color: #111827;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.2;
}

.product-config-title > small {
  color: #6b7789;
  font-size: 10px;
  font-weight: 750;
}

.product-config-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px;
  background: #f2f4f7;
  border: 1px solid #e0e5eb;
  border-radius: 11px;
}

.product-config-progress > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  color: #748094;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.product-config-progress > span.active {
  color: #3d3309;
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
}

.product-config-progress b {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  color: #6b7789;
  background: #e3e8ee;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 1000;
}

.product-config-progress .active b {
  color: #111827;
  background: #ffdc36;
}

.product-detail-copy.has-pvc-tabs .product-config-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 12px;
}

.product-config-overview > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  background: #f6f8fb;
  border: 1px solid #edf0f4;
  border-radius: 9px;
}

.product-config-overview > .product-config-overview-primary {
  background: linear-gradient(135deg, #fff9d9, #fff);
  border-color: #f0de92;
}

.product-config-overview span {
  color: #758195;
  font-size: 10px;
  font-weight: 900;
}

.product-config-overview strong {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-config-overview small {
  overflow: hidden;
  color: #9a7200;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-copy.has-pvc-tabs .pvc-detail-tab-panel {
  gap: 10px;
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-box {
  gap: 8px;
  padding: 11px 12px;
  background: #fff;
  border-color: #dfe6ee;
  border-radius: 13px;
  box-shadow: 0 9px 22px rgba(15, 23, 42, .045);
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-head {
  gap: 12px;
  padding: 0 2px 9px;
  border-bottom: 1px solid #edf0f4;
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-head b {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  color: #594300;
  background: #ffe35d;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 1000;
  line-height: 28px;
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-head strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-detail-copy.has-pvc-tabs .product-detail-quote-head > span {
  max-width: 260px;
  color: #707d90;
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.product-detail-copy.has-pvc-tabs .product-info-config,
.product-detail-copy.has-pvc-tabs .digital-card-product-config {
  gap: 0;
}

.product-detail-copy.has-pvc-tabs .product-info-row,
.product-detail-copy.has-pvc-tabs .pvc-config-row {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #edf0f4;
}

.product-detail-copy.has-pvc-tabs .product-info-row:last-child,
.product-detail-copy.has-pvc-tabs .pvc-config-row:last-child {
  border-bottom: 0;
}

.product-detail-copy.has-pvc-tabs .product-info-row > strong,
.product-detail-copy.has-pvc-tabs .pvc-config-row > strong {
  min-height: 40px;
  color: #29374a;
  background: linear-gradient(180deg, #f8fafc, #f1f4f7);
  border: 1px solid #edf0f3;
  border-radius: 9px;
}

.product-detail-copy.has-pvc-tabs .product-info-controls,
.product-detail-copy.has-pvc-tabs .pvc-inline-options {
  min-height: 40px;
}

.product-detail-copy.has-pvc-tabs .product-info-controls > select,
.product-detail-copy.has-pvc-tabs .product-info-controls > input[type="number"],
.product-detail-copy.has-pvc-tabs .pvc-inline-options select,
.product-detail-copy.has-pvc-tabs .pvc-inline-options input[type="number"] {
  min-height: 40px;
  border-radius: 9px;
}

.product-detail-copy.has-pvc-tabs .pvc-material-options {
  gap: 7px;
}

.product-detail-copy.has-pvc-tabs .pvc-material-options span {
  min-height: 40px;
  background: #f4f6f9;
  border-color: #eef1f4;
  border-radius: 9px;
}

.product-detail-copy.has-pvc-tabs .pvc-material-options input:checked + span {
  color: #172033;
  background: linear-gradient(180deg, #fff9d9, #fff3ae);
  border-color: #e7b900;
  box-shadow: inset 0 -3px 0 #e5b800, 0 5px 12px rgba(196, 150, 0, .12);
}

.product-detail-copy.has-pvc-tabs .digital-card-pricing {
  gap: 10px;
  margin-top: 8px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #fffbed 0%, #fff 76%);
  border: 1px solid #f0dea0;
  border-radius: 12px;
}

.product-detail-copy.has-pvc-tabs .digital-card-pricing-head strong {
  font-size: 14px;
}

.product-detail-copy.has-pvc-tabs .digital-card-pricing-head span {
  color: #7a8493;
  font-size: 10px;
}

.product-detail-copy.has-pvc-tabs .digital-quantity-options > span,
.product-detail-copy.has-pvc-tabs .digital-quantity-options > label {
  min-height: 40px;
  border-radius: 9px;
}

.product-detail-copy.has-pvc-tabs .digital-quantity-options > label:has(> input[type="radio"]:checked) {
  background: linear-gradient(180deg, #ffe867, #ffda3d);
  border-color: #dfb200;
  box-shadow: 0 5px 13px rgba(196, 150, 0, .16);
}

.product-detail-copy.has-pvc-tabs .digital-custom-quantity {
  background: #fff;
  border-color: #dce2ea;
}

@media (max-width: 760px) {
  .product-detail-copy.has-pvc-tabs .product-config-titlebar {
    align-items: stretch;
    flex-direction: column;
    padding: 11px;
  }

  .product-config-progress {
    width: 100%;
  }

  .product-config-progress > span {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 4px;
  }

  .product-detail-copy.has-pvc-tabs .product-config-overview {
    grid-template-columns: 1fr;
  }

  .product-detail-copy.has-pvc-tabs .product-detail-quote-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-detail-copy.has-pvc-tabs .product-detail-quote-head > span {
    max-width: none;
    text-align: left;
  }
}

/* 顶部商品分类：保持为独立筛选栏，视觉对齐模板站；不影响“印品下单”菜单。 */
.site-header #categoryBar.category-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.15vw, 44px);
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 0 max(24px, calc((100vw - 1530px) / 2));
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-top: 1px solid #f2f3f5;
  border-bottom: 1px solid #e6e8eb;
  box-shadow: none;
  scrollbar-width: none;
}

.site-header #categoryBar.category-bar::-webkit-scrollbar {
  display: none;
}

.site-header #categoryBar .category-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: max-content;
  height: 36px;
  min-height: 36px;
  padding: 0 15px;
  color: #555b63;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  line-height: 1;
  transform: none;
}

.site-header #categoryBar .category-chip::after {
  display: none;
}

.site-header #categoryBar .category-chip span {
  display: block;
  padding: 0;
  line-height: 1;
}

.site-header #categoryBar .category-chip strong {
  color: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.site-header #categoryBar .category-chip small,
.site-header #categoryBar .category-chip em {
  display: none;
}

.site-header #categoryBar .category-chip i {
  position: relative;
  width: 18px;
  height: 18px;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.site-header #categoryBar .category-chip:hover {
  color: #17191c;
  background: #fff8cf;
  border: 0;
  box-shadow: none;
  transform: none;
}

.site-header #categoryBar .category-chip.active {
  color: #17191c;
  background: #ffe75a;
  border: 0;
  box-shadow: none;
  transform: none;
}

.site-header #categoryBar .category-chip:hover strong,
.site-header #categoryBar .category-chip.active strong {
  color: inherit;
  font-weight: 750;
}

.site-header #categoryBar .category-chip:hover i,
.site-header #categoryBar .category-chip.active i {
  color: currentColor;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}

@media (max-width: 980px) {
  .site-header #categoryBar.category-bar {
    justify-content: flex-start;
    gap: 12px;
    height: 52px;
    min-height: 52px;
    padding-inline: 12px;
  }

  .site-header #categoryBar .category-chip {
    height: 34px;
    min-height: 34px;
    padding-inline: 12px;
  }
}

/* 横向商品分类：独立于“印品下单”的模板式分类导航与展开层。 */
#categoryBar.category-bar {
  gap: clamp(22px, 2.6vw, 52px);
  height: 58px;
  min-height: 58px;
  padding: 0 max(24px, calc((100vw - 1540px) / 2));
  background: #fff;
  border-top: 1px solid #f2f3f5;
  border-bottom: 1px solid #e4e7eb;
}

#categoryBar .category-chip,
#categoryBar .category-chip:hover,
#categoryBar .category-chip.active,
#categoryBar .category-chip[aria-pressed="true"] {
  min-width: max-content;
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}

#categoryBar .category-chip {
  color: #51565e;
  background: transparent;
}

#categoryBar .category-chip:hover {
  color: #17191c;
  background: #fff9da;
}

#categoryBar .category-chip.active,
#categoryBar .category-chip[aria-pressed="true"] {
  color: #15171a;
  background: #ffe75a;
}

#categoryBar .category-chip span {
  display: block;
  padding: 0;
  line-height: 1;
}

#categoryBar .category-chip strong {
  color: inherit;
  font-size: 14px;
  font-weight: 760;
  line-height: 1;
}

#categoryBar .category-chip small,
#categoryBar .category-chip em,
#categoryBar .category-chip::after {
  display: none;
}

#categoryBar .category-chip .cat-icon {
  display: inline-grid;
  position: static;
  place-items: center;
  width: 17px;
  height: 17px;
  min-width: 17px;
  color: currentColor;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

#categoryBar .category-chip .cat-icon::before {
  position: static;
  display: block;
  width: auto;
  height: auto;
  color: currentColor;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transform: none;
}

#categoryBar .category-chip .cat-icon::after {
  display: none;
}

#categoryBar .cat-card::before { content: "▤"; }
#categoryBar .cat-sheet::before { content: "▧"; }
#categoryBar .cat-label::before { content: "◇"; }
#categoryBar .cat-book::before { content: "▥"; }
#categoryBar .cat-ad::before { content: "▣"; }
#categoryBar .cat-box::before { content: "▢"; }
#categoryBar .cat-office::before { content: "▦"; }
#categoryBar .cat-home::before { content: "⌂"; }
#categoryBar .cat-spark::before { content: "✧"; }
#categoryBar .cat-season::before { content: "◈"; }
#categoryBar .cat-sample::before { content: "▱"; }

.catalog-category-mega {
  position: absolute;
  z-index: 92;
  top: 100%;
  right: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #dde2e7;
  box-shadow: 0 22px 46px rgba(24, 33, 48, .14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
}

.catalog-category-mega.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-category-mega-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 34px;
  width: min(1280px, calc(100% - 64px));
  min-height: 338px;
  max-height: min(480px, calc(100vh - 150px));
  margin: 0 auto;
  padding: 28px 0 30px;
}

.catalog-category-mega-close {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: -32px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #6c7480;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.catalog-category-mega-close:hover {
  color: #111827;
  background: #f3f5f7;
}

.catalog-category-mega-main {
  min-width: 0;
  padding-right: 34px;
  border-right: 1px dashed #dfe3e8;
}

.catalog-category-mega-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dfe3e8;
}

.catalog-category-mega-heading > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.catalog-category-mega-heading small,
.catalog-category-mega-recommend-copy > small {
  color: #a37100;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.catalog-category-mega-heading strong {
  color: #131a24;
  font-size: 22px;
  font-weight: 850;
  white-space: nowrap;
}

.catalog-category-mega-heading span {
  overflow: hidden;
  color: #788495;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-category-mega-heading > button {
  min-width: max-content;
  height: 36px;
  padding: 0 14px;
  color: #172033;
  background: #fff;
  border: 1px solid #dbe1e8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.catalog-category-mega-heading > button:hover {
  background: #fff8cc;
  border-color: #edc319;
}

.catalog-category-mega-groups {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  padding-top: 17px;
}

.catalog-category-mega-group-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
}

.catalog-category-mega-group-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 0 13px;
  color: #202833;
  background: #f6f7f8;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.catalog-category-mega-group-tabs button:hover {
  background: #fff8cf;
  border-color: #f1d04c;
}

.catalog-category-mega-group-tabs button span {
  color: #a8afb8;
  font-size: 18px;
}

.catalog-category-mega-group-rows {
  min-width: 0;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-color: #c9d0da transparent;
  scrollbar-width: thin;
}

.catalog-category-mega-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  min-height: 44px;
  padding: 7px 0;
  border-bottom: 1px dashed #dde2e7;
}

.catalog-category-mega-row > strong {
  padding-top: 5px;
  color: #242b35;
  font-size: 13px;
  font-weight: 800;
}

.catalog-category-mega-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3px 6px;
}

.catalog-category-mega-row button,
.catalog-category-mega-recommend-copy button {
  min-height: 28px;
  padding: 4px 8px;
  color: #606a77;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.catalog-category-mega-row button:hover,
.catalog-category-mega-recommend-copy button:hover {
  color: #111827;
  background: #fff5ae;
}

.catalog-category-mega-recommend {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 9px 0 0;
}

.catalog-category-mega-recommend-copy {
  min-width: 0;
}

.catalog-category-mega-recommend-copy > strong {
  display: block;
  margin: 5px 0 14px;
  color: #111827;
  font-size: 19px;
  font-weight: 850;
}

.catalog-category-mega-recommend-copy > div {
  display: grid;
  gap: 4px;
}

.catalog-category-mega-recommend-copy button {
  overflow: hidden;
  padding-inline: 0;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-category-mega-preview {
  align-self: start;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  background: #f6f7f8;
  border: 1px solid #e5e8ec;
  border-radius: 10px;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.catalog-category-mega-preview-art {
  display: block;
  height: 205px;
  overflow: hidden;
  background: linear-gradient(135deg, #fafafa, #f1f3f5);
}

.catalog-category-mega-preview-art .product-art,
.catalog-category-mega-preview-art picture,
.catalog-category-mega-preview-art img {
  width: 100%;
  height: 100%;
}

.catalog-category-mega-preview-art img {
  display: block;
  object-fit: cover;
}

.catalog-category-mega-preview-copy {
  display: block;
  padding: 11px 12px 12px;
}

.catalog-category-mega-preview-copy em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  color: #ef3e30;
  background: #fff1ef;
  border: 1px solid #ffc9c2;
  border-radius: 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.catalog-category-mega-preview-copy strong,
.catalog-category-mega-preview-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-category-mega-preview-copy strong {
  margin-top: 7px;
  color: #161d27;
  font-size: 15px;
  font-weight: 850;
}

.catalog-category-mega-preview-copy small {
  margin-top: 4px;
  color: #7a8492;
  font-size: 11px;
}

.catalog-category-mega-preview.is-empty {
  display: grid;
  min-height: 245px;
  place-content: center;
  gap: 6px;
  padding: 20px;
  color: #768191;
  text-align: center;
}

@media (max-width: 1100px) {
  .catalog-category-mega-shell {
    grid-template-columns: minmax(0, 1fr) 310px;
    width: calc(100% - 32px);
    gap: 22px;
  }

  .catalog-category-mega-main {
    padding-right: 22px;
  }

  .catalog-category-mega-groups {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 18px;
  }

  .catalog-category-mega-recommend {
    grid-template-columns: 1fr;
  }

  .catalog-category-mega-recommend-copy {
    display: none;
  }
}

@media (max-width: 980px) {
  #categoryBar.category-bar {
    justify-content: flex-start;
    gap: 8px;
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
  }

  #categoryBar .category-chip {
    height: 34px;
    min-height: 34px;
    padding-inline: 12px;
  }

  .catalog-category-mega-shell {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    padding-block: 18px;
  }

  .catalog-category-mega-main {
    padding-right: 0;
    border-right: 0;
  }

  .catalog-category-mega-heading > div {
    flex-wrap: wrap;
  }

  .catalog-category-mega-groups {
    grid-template-columns: 1fr;
  }

  .catalog-category-mega-group-tabs {
    display: flex;
    overflow-x: auto;
  }

  .catalog-category-mega-group-tabs button {
    flex: 0 0 auto;
    width: auto;
  }

  .catalog-category-mega-recommend {
    display: none;
  }

  .catalog-category-mega-close {
    position: fixed;
    top: 108px;
    right: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
  }
}

/* FINAL: product center visual polish v184 */
.site-header #categoryBar.category-bar {
  min-height: 52px;
  padding: 0 28px;
  border-top: 1px solid #f1f3f6;
  border-bottom: 1px solid #e8ebf0;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
  box-shadow: 0 4px 14px rgba(28, 35, 45, .035);
}

#categoryBar .category-bar-inner {
  width: min(1540px, calc(100vw - 48px));
  min-height: 51px;
  gap: 8px;
  margin: 0 auto;
}

#categoryBar .category-chip {
  min-width: 0;
  min-height: 36px;
  padding: 0 16px;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #263243;
  font-size: 14px;
  font-weight: 700;
  background: transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
    transform .18s ease, box-shadow .18s ease;
}

#categoryBar .category-chip:hover {
  color: #111827;
  border-color: #f3dc75;
  background: #fffaf0;
  transform: translateY(-1px);
}

#categoryBar .category-chip.active {
  color: #111827;
  border-color: #f2ca2f;
  background: linear-gradient(135deg, #fff0a8 0%, #ffe45e 100%);
  box-shadow: 0 5px 14px rgba(235, 180, 0, .16);
}

#categoryBar .category-chip .cat-icon {
  color: #657184;
  opacity: .96;
}

#categoryBar .category-chip.active .cat-icon {
  color: #151b25;
}

.site-header .category-mega:has(.print-order-mega-shell) {
  max-height: min(548px, calc(100vh - 124px));
  padding: 14px 18px 16px;
  overflow: auto;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 224, 81, .08), transparent 24%),
    #f5f7fa;
  border-bottom: 1px solid #dfe4eb;
  box-shadow: 0 20px 46px rgba(24, 32, 46, .14);
}

.print-order-mega-shell {
  grid-template-columns: 248px minmax(0, 1fr) !important;
  width: min(1540px, calc(100vw - 48px)) !important;
  min-height: 480px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 1px solid #dfe4eb !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 15px 38px rgba(29, 38, 52, .09) !important;
}

.print-order-mega-sidebar {
  padding: 18px 14px !important;
  border-right: 1px solid #e7eaf0 !important;
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%) !important;
}

.print-order-mega-sidebar-title {
  min-height: 46px !important;
  margin: 0 0 10px !important;
  padding: 0 14px !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.print-order-mega-category-list {
  gap: 5px !important;
}

.print-order-mega-category {
  position: relative !important;
  min-height: 42px !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #293447 !important;
  background: transparent !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.print-order-mega-category:hover {
  border-color: #e2e6ec !important;
  background: #fff !important;
  transform: translateX(2px);
}

.print-order-mega-category.active {
  border-color: #efd25c !important;
  background: linear-gradient(135deg, #fff6c9, #ffe875) !important;
  box-shadow: 0 6px 16px rgba(225, 175, 0, .12) !important;
}

.print-order-mega-category.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: #dcae00;
}

.print-order-mega-category-icon {
  width: 29px !important;
  height: 29px !important;
  border: 1px solid #e3e7ed !important;
  border-radius: 8px !important;
  color: #566276 !important;
  background: #fff !important;
}

.print-order-mega-category.active .print-order-mega-category-icon {
  border-color: rgba(211, 159, 0, .22) !important;
  color: #171c25 !important;
  background: rgba(255, 255, 255, .72) !important;
}

.print-order-mega-content {
  padding: 18px 22px 16px !important;
  background: #fff !important;
}

.print-order-mega-heading {
  min-height: 43px !important;
  margin-bottom: 12px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid #e9ecf1 !important;
}

.print-order-mega-heading h2 {
  color: #111827 !important;
  font-size: 23px !important;
  letter-spacing: -.4px !important;
}

.print-order-mega-heading p {
  color: #8791a1 !important;
  font-size: 12px !important;
}

.print-order-mega-feature {
  grid-template-columns: minmax(220px, .88fr) minmax(160px, .56fr) minmax(390px, 1.42fr) !important;
  gap: 16px !important;
  min-height: 215px !important;
  margin-bottom: 14px !important;
}

.print-order-mega-leads {
  gap: 8px !important;
}

.print-order-mega-lead {
  min-height: 62px !important;
  padding: 11px 14px !important;
  border: 1px solid #e5e8ee !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: none !important;
}

.print-order-mega-lead:nth-child(1) {
  border-left: 4px solid #f4c92e !important;
  background: linear-gradient(135deg, #fffdf6, #fff7d7) !important;
}

.print-order-mega-lead:nth-child(2) {
  border-left: 4px solid #5bc3c0 !important;
  background: linear-gradient(135deg, #f8ffff, #e8f9f8) !important;
}

.print-order-mega-lead:nth-child(3) {
  border-left: 4px solid #7ba8ed !important;
  background: linear-gradient(135deg, #fafcff, #edf4ff) !important;
}

.print-order-mega-lead strong {
  color: #192231 !important;
  font-size: 14px !important;
}

.print-order-mega-lead small {
  color: #737f90 !important;
  font-size: 11px !important;
}

.print-order-mega-compact {
  padding: 3px 0 !important;
}

.print-order-mega-compact a {
  min-height: 31px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  color: #263246 !important;
}

.print-order-mega-compact a:hover {
  color: #111827 !important;
  background: #fff7ce !important;
}

.print-order-mega-banner {
  min-height: 215px !important;
  overflow: hidden !important;
  border: 1px solid #eadfbd !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 79% 18%, rgba(255, 220, 72, .33), transparent 31%),
    linear-gradient(135deg, #fffaf0 0%, #fff4bd 54%, #edf7f0 100%) !important;
  box-shadow: 0 10px 25px rgba(49, 62, 50, .08) !important;
}

.print-order-mega-banner-copy {
  z-index: 3 !important;
  width: 45% !important;
  padding: 25px 0 22px 25px !important;
  color: #172033 !important;
  text-shadow: none !important;
}

.print-order-mega-banner-copy .eyebrow {
  color: #af7f00 !important;
}

.print-order-mega-banner-copy h3 {
  margin: 5px 0 7px !important;
  color: #111827 !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.1 !important;
}

.print-order-mega-banner-copy p {
  color: #5c6878 !important;
  line-height: 1.55 !important;
}

.print-order-mega-banner-copy a,
.print-order-mega-banner-copy button {
  min-height: 34px !important;
  margin-top: 12px !important;
  padding: 0 16px !important;
  border: 1px solid #e7bb18 !important;
  border-radius: 999px !important;
  color: #151a22 !important;
  background: #ffdd42 !important;
  box-shadow: 0 6px 14px rgba(220, 166, 0, .17) !important;
}

.print-order-mega-banner-art {
  right: 0 !important;
  width: 58% !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, .42) !important;
}

.print-order-mega-banner-art::before,
.print-order-mega-banner-art::after {
  display: none !important;
}

.print-order-mega-banner-art img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #fff !important;
  filter: saturate(.96) contrast(.98) !important;
}

.print-order-mega-lower {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: 16px !important;
}

.print-order-mega-newest,
.print-order-mega-updates {
  padding-top: 10px !important;
  border-top: 1px solid #e6e9ee !important;
}

.print-order-mega-newest h3,
.print-order-mega-updates h3 {
  margin-bottom: 8px !important;
  color: #151d2b !important;
  font-size: 16px !important;
}

.print-order-mega-newest-grid,
.print-order-mega-update-grid {
  gap: 5px 14px !important;
}

.print-order-mega-newest a,
.print-order-mega-updates a {
  min-height: 25px !important;
  color: #566174 !important;
  font-size: 12px !important;
}

.print-order-mega-newest a:hover,
.print-order-mega-updates a:hover {
  color: #111827 !important;
}

@media (max-width: 1240px) {
  #categoryBar .category-chip {
    padding: 0 10px;
    font-size: 13px;
  }

  .print-order-mega-shell {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .print-order-mega-feature {
    grid-template-columns: minmax(190px, .72fr) minmax(135px, .48fr) minmax(340px, 1.35fr) !important;
    gap: 11px !important;
  }

  .print-order-mega-banner-copy {
    width: 48% !important;
    padding-left: 20px !important;
  }
}

/* FINAL: larger product-center typography v185 */
#categoryBar .category-chip {
  font-size: 15px !important;
}

.print-order-mega-sidebar-title {
  font-size: 18px !important;
}

.print-order-mega-category strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.print-order-mega-category small {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.print-order-mega-category em {
  min-width: 27px !important;
  font-size: 11px !important;
}

.print-order-mega-heading small {
  font-size: 11px !important;
}

.print-order-mega-heading strong {
  font-size: 25px !important;
  line-height: 1.15 !important;
}

.print-order-mega-heading span {
  font-size: 13px !important;
}

.print-order-mega-all {
  min-height: 37px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
}

.print-order-mega-lead i {
  font-size: 30px !important;
}

.print-order-mega-lead strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.print-order-mega-lead small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.print-order-mega-compact button {
  min-height: 33px !important;
}

.print-order-mega-compact i {
  font-size: 11px !important;
}

.print-order-mega-compact span {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.print-order-mega-banner-copy em {
  font-size: 12px !important;
}

.print-order-mega-banner-copy strong {
  font-size: clamp(27px, 2vw, 36px) !important;
}

.print-order-mega-banner-copy small {
  color: #596577 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.print-order-mega-banner-copy b {
  padding: 9px 15px !important;
  font-size: 13px !important;
}

.print-order-mega-lower header strong {
  font-size: 18px !important;
}

.print-order-mega-lower header span {
  font-size: 11px !important;
}

.print-order-mega-newest button {
  gap: 2px !important;
  padding: 5px 0 !important;
}

.print-order-mega-newest strong {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.print-order-mega-newest small {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.print-order-mega-updates em {
  padding: 3px 7px !important;
  font-size: 10px !important;
}

.print-order-mega-updates span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* FINAL: print-order click panel matches the full-width template v187 */
@media (min-width: 981px) {
  .site-header.product-mega-open #categoryBar {
    display: none !important;
  }

  #productMegaTrigger[aria-expanded="true"] {
    height: 38px !important;
    padding: 0 22px !important;
    color: #fff !important;
    background: #303030 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  #productMegaTrigger[aria-expanded="true"]::after {
    display: none !important;
  }

  .site-header #categoryMega.category-mega:has(.print-order-mega-shell) {
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #e4e7eb !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 18px 42px rgba(20, 28, 40, .12) !important;
  }

  #categoryMega .print-order-mega-shell {
    grid-template-columns: 330px minmax(0, 1fr) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #categoryMega .print-order-mega-sidebar {
    padding: 10px 14px 12px max(28px, calc((100vw - 1780px) / 2 + 28px)) !important;
    border-right: 1px solid #eceef2 !important;
    background: #f7f7f9 !important;
  }

  #categoryMega .print-order-mega-sidebar-title {
    min-height: 38px !important;
    margin-bottom: 5px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
  }

  #categoryMega .print-order-mega-category-list {
    gap: 2px !important;
  }

  #categoryMega .print-order-mega-category {
    min-height: 36px !important;
    padding: 4px 9px !important;
    border-radius: 8px !important;
  }

  #categoryMega .print-order-mega-category-icon {
    width: 25px !important;
    height: 25px !important;
  }

  #categoryMega .print-order-mega-category strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  #categoryMega .print-order-mega-category small {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  #categoryMega .print-order-mega-category em {
    min-width: 23px !important;
    font-size: 10px !important;
  }

  #categoryMega .print-order-mega-content {
    padding: 12px max(28px, calc((100vw - 1780px) / 2 + 28px)) 14px 26px !important;
    background: #fff !important;
  }

  #categoryMega .print-order-mega-heading {
    min-height: 36px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  #categoryMega .print-order-mega-feature {
    grid-template-columns: minmax(230px, .78fr) minmax(155px, .48fr) minmax(440px, 1.42fr) !important;
    gap: 16px !important;
    min-height: 190px !important;
    margin-bottom: 12px !important;
  }

  #categoryMega .print-order-mega-leads {
    gap: 6px !important;
  }

  #categoryMega .print-order-mega-lead {
    min-height: 56px !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }

  #categoryMega .print-order-mega-banner {
    min-height: 190px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #categoryMega .print-order-mega-banner-art {
    padding: 0 !important;
  }

  #categoryMega .print-order-mega-banner-art img {
    border-radius: 0 !important;
  }

  #categoryMega .print-order-mega-lower {
    gap: 22px !important;
  }

  #categoryMega .print-order-mega-newest,
  #categoryMega .print-order-mega-updates {
    padding-top: 7px !important;
  }

  #categoryMega .print-order-mega-newest h3,
  #categoryMega .print-order-mega-updates h3 {
    margin-bottom: 5px !important;
    font-size: 14px !important;
  }

  #categoryMega .print-order-mega-newest-grid,
  #categoryMega .print-order-mega-update-grid {
    gap: 2px 10px !important;
  }

  #categoryMega .print-order-mega-newest a,
  #categoryMega .print-order-mega-updates a {
    min-height: 20px !important;
  }
}

@media (min-width: 981px) and (max-width: 1400px) {
  #categoryMega .print-order-mega-shell {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  #categoryMega .print-order-mega-sidebar {
    padding-left: 28px !important;
  }

  #categoryMega .print-order-mega-content {
    padding-right: 28px !important;
    padding-left: 28px !important;
  }

  #categoryMega .print-order-mega-feature {
    grid-template-columns: minmax(210px, .72fr) minmax(140px, .45fr) minmax(380px, 1.28fr) !important;
    gap: 16px !important;
  }
}

/* FINAL: category colour follows the mouse hover only (v194) */
.site-header #categoryBar .category-chip,
.site-header #categoryBar .category-chip.active,
.site-header #categoryBar .category-chip[aria-pressed="true"] {
  color: #263243 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header #categoryBar .category-chip:hover {
  color: #111827 !important;
  background: linear-gradient(135deg, #fff0a8 0%, #ffe45e 100%) !important;
  border-color: #f2ca2f !important;
  box-shadow: 0 5px 14px rgba(235, 180, 0, .16) !important;
  transform: translateY(-1px) !important;
}

/* 服务与支持：点击主导航后展示横向服务面板（v198） */
.site-header .service-mega {
  position: absolute;
  top: 68px;
  right: 0;
  left: 0;
  z-index: 86;
  overflow: hidden;
  color: #252a31;
  background:
    linear-gradient(90deg, rgba(255, 249, 202, .72) 0, rgba(255, 253, 235, .42) 18%, #fff 31%),
    #fff;
  border-top: 1px solid #edf0f3;
  border-bottom: 1px solid #e8ebef;
  box-shadow: 0 22px 42px rgba(20, 29, 43, .14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s,
    transform .18s ease;
}

.site-header .service-mega.is-open,
.site-header .service-mega:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.site-header .service-mega-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1.02fr) repeat(4, minmax(190px, 1fr));
  gap: clamp(24px, 2.5vw, 50px);
  width: min(1720px, calc(100% - 72px));
  min-height: 278px;
  margin: 0 auto;
  padding: 36px 0 34px;
}

.site-header .service-mega-close {
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #6e747d;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.site-header .service-mega-close:hover {
  color: #111827;
  background: #f2f3f5;
  transform: rotate(90deg);
}

.site-header .service-mega-intro {
  min-width: 0;
  padding: 4px clamp(25px, 2.3vw, 44px) 0 0;
  border-right: 1px solid #e9ebef;
}

.site-header .service-mega-kicker {
  display: inline-block;
  margin-bottom: 9px;
  color: #b88700;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.site-header .service-mega-intro h2 {
  margin: 0;
  color: #111318;
  font-size: clamp(23px, 1.55vw, 29px);
  font-weight: 950;
  letter-spacing: -.04em;
}

.site-header .service-mega-intro p {
  max-width: 285px;
  margin: 16px 0 22px;
  color: #747b85;
  font-size: 13px;
  line-height: 1.75;
}

.site-header .service-mega-more {
  display: inline-flex;
  min-width: 88px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  background: #2d3035;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
  transition: background-color .16s ease, transform .16s ease;
}

.site-header .service-mega-more:hover {
  background: #111318;
  transform: translateY(-1px);
}

.site-header .service-mega-column {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 26px;
}

.site-header .service-mega-column > header {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.site-header .service-mega-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #fff;
  background: #429bff;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(66, 155, 255, .2);
  font-size: 14px;
  font-weight: 900;
}

.site-header .service-mega-column-purple .service-mega-icon {
  background: #ae72f7;
  box-shadow: 0 8px 18px rgba(174, 114, 247, .2);
}

.site-header .service-mega-column-green .service-mega-icon {
  color: #24272c;
  background: #f2c40f;
  box-shadow: 0 8px 18px rgba(242, 196, 15, .22);
}

.site-header .service-mega-column-violet .service-mega-icon {
  background: #b978fa;
  box-shadow: 0 8px 18px rgba(185, 120, 250, .2);
}

.site-header .service-mega-column h3 {
  margin: 0 0 4px;
  color: #17191d;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.site-header .service-mega-column header p {
  margin: 0;
  color: #9a9fa7;
  font-size: 13px;
  line-height: 1.55;
}

.site-header .service-mega-links {
  display: grid;
  min-height: 108px;
  align-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #f7f7fa;
  border: 1px solid #f3f3f6;
  border-radius: 9px;
}

.site-header .service-mega-links-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.site-header .service-mega-links a {
  min-width: 0;
  overflow: hidden;
  color: #424750;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}

.site-header .service-mega-links a:hover {
  color: #c58d00;
  transform: translateX(3px);
}

.main-nav #serviceMegaTrigger[aria-expanded="true"] {
  color: #111318;
}

.main-nav #serviceMegaTrigger[aria-expanded="true"]::after,
.site-header:has(.service-mega:target) #serviceMegaTrigger::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header .service-mega :is(a, button):focus-visible {
  outline: 3px solid rgba(255, 216, 61, .42);
  outline-offset: 2px;
}

@media (max-width: 1420px) {
  .site-header .service-mega-shell {
    grid-template-columns: minmax(220px, .9fr) repeat(4, minmax(165px, 1fr));
    gap: 22px;
    width: calc(100% - 48px);
  }

  .site-header .service-mega-column {
    gap: 20px;
  }

  .site-header .service-mega-links {
    padding-inline: 14px;
  }
}

@media (max-width: 1100px) {
  .site-header .service-mega {
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
  }

  .site-header .service-mega-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(900px, calc(100% - 36px));
  }

  .site-header .service-mega-intro {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr) auto;
    align-items: center;
    gap: 20px;
    padding: 0 0 22px;
    border-right: 0;
    border-bottom: 1px solid #e9ebef;
  }

  .site-header .service-mega-kicker {
    display: none;
  }

  .site-header .service-mega-intro p {
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 700px) {
  .site-header .service-mega-shell {
    grid-template-columns: 1fr;
    gap: 20px;
    width: calc(100% - 28px);
    padding-top: 28px;
  }

  .site-header .service-mega-intro {
    grid-template-columns: 1fr auto;
  }

  .site-header .service-mega-intro p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-header .service-mega-column {
    gap: 12px;
  }
}

.history-item.is-batch-order {
  border-color: #ffd487;
  background: linear-gradient(135deg, #fffdf7 0%, #ffffff 48%);
}

.history-batch-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 9px;
  padding: 0 8px;
  color: #8a5600;
  background: #fff0b3;
  border: 1px solid #ffda63;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  vertical-align: 2px;
}

.history-item.is-batch-order .history-order-progress,
.history-batch-lines {
  grid-column: 1 / -1;
}

.history-batch-lines {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
}

.history-batch-lines[hidden] {
  display: none;
}

.history-batch-lines-head,
.history-batch-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.history-batch-lines-head {
  padding: 0 4px 7px;
  border-bottom: 1px solid #e3e8ef;
}

.history-batch-lines-head span {
  margin: 0;
  color: #8a5a00;
  font-weight: 800;
}

.history-batch-line {
  grid-template-columns: 34px minmax(260px, 1fr) auto auto minmax(270px, auto);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 7px;
}

.history-batch-line span,
.history-batch-line small {
  margin: 0;
}

.history-batch-index {
  display: inline-grid !important;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #8a5600 !important;
  background: #fff3c4;
  border-radius: 7px;
  font-weight: 900;
}

.history-batch-status {
  padding: 5px 9px;
  color: #0f6b4b !important;
  background: #eaf8f1;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 800;
}

.history-batch-amount {
  color: #f04f24 !important;
  font-size: 15px !important;
  white-space: nowrap;
}

.history-batch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.history-batch-actions button {
  min-height: 30px;
  padding: 0 9px;
  color: #253044;
  background: #fff;
  border: 1px solid #dbe2eb;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .history-batch-line {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .history-batch-status,
  .history-batch-amount {
    grid-column: auto;
  }

  .history-batch-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .history-batch-lines-head,
  .history-batch-line {
    grid-template-columns: 1fr;
  }

  .history-batch-index {
    display: none !important;
  }

  .history-batch-actions {
    grid-column: 1;
    flex-wrap: wrap;
  }
}

.stock-purchase-actions {
  position: relative;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(145deg, #f7f8fa 0%, #ffffff 100%);
  border: 1px solid #e3e7ed;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(25, 32, 44, 0.08);
}

.stock-purchase-actions button {
  position: relative;
  min-height: 56px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 12px;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: none;
  isolation: isolate;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.stock-purchase-actions button::before {
  display: inline-grid;
  width: 25px;
  height: 25px;
  margin-right: 9px;
  border-radius: 7px;
  place-items: center;
  font-size: 12px;
  font-weight: 1000;
}

.stock-buy-now {
  color: #fff;
  background: linear-gradient(135deg, #222831 0%, #11151b 100%);
  border: 1px solid #11151b;
  box-shadow: 0 10px 20px rgba(20, 25, 33, 0.2);
}

.stock-buy-now::before {
  content: "购";
  color: #171a20;
  background: #ffd83d;
}

.stock-buy-now:hover {
  background: linear-gradient(135deg, #303741 0%, #171c23 100%);
  box-shadow: 0 14px 26px rgba(20, 25, 33, 0.25);
}

.stock-add-cart {
  color: #242b35;
  background: #fff;
  border: 1px solid #cfd6df;
  box-shadow: 0 9px 18px rgba(38, 47, 58, 0.1);
}

.stock-add-cart::before {
  content: "+";
  color: #1f2732;
  background: #eef1f5;
  font-size: 18px !important;
}

.stock-add-cart:hover {
  background: #fffdf4;
  border-color: #e2b91f;
  box-shadow: 0 13px 24px rgba(142, 105, 0, 0.14);
}

.stock-purchase-actions .stock-inquiry {
  grid-column: 1 / -1;
  color: #2b240a;
  background: linear-gradient(135deg, #fff7cc 0%, #ffe46b 100%);
  border: 1px solid #e8bd16;
  box-shadow: 0 10px 22px rgba(181, 132, 0, 0.16);
}

.stock-purchase-actions .stock-inquiry::before {
  content: "询";
  color: #ffe76f;
  background: #292d33;
}

.stock-purchase-actions .stock-inquiry:hover {
  background: linear-gradient(135deg, #ffe979 0%, #ffd83d 100%);
  border-color: #d6a900;
  box-shadow: 0 14px 26px rgba(181, 132, 0, 0.22);
}

.stock-purchase-actions button:hover {
  transform: translateY(-2px);
}

.stock-purchase-actions button:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 5px 12px rgba(31, 41, 55, 0.12);
}

.stock-purchase-notes {
  display: grid;
  gap: 11px;
  padding: 15px;
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e0e6ed;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(25, 32, 44, 0.06);
}

.stock-purchase-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7ebf0;
}

.stock-purchase-notes-head > div {
  display: grid;
  gap: 3px;
}

.stock-purchase-notes-head span {
  color: #bd8700;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.stock-purchase-notes-head strong {
  color: #171c24;
  font-size: 15px;
  font-weight: 1000;
}

.stock-purchase-notes-head em {
  padding: 5px 9px;
  color: #11613f;
  background: #eaf8f1;
  border: 1px solid #c8ead8;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.stock-purchase-note-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stock-purchase-note-grid article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  background: #f7f9fc;
  border: 1px solid #e5eaf0;
  border-radius: 9px;
}

.stock-purchase-note-grid article > i {
  display: grid;
  width: 28px;
  height: 28px;
  color: #2a2e35;
  background: #ffe469;
  border-radius: 8px;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
}

.stock-purchase-note-grid article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.stock-purchase-note-grid strong {
  color: #202631;
  font-size: 12px;
  font-weight: 950;
}

.stock-purchase-note-grid span {
  color: #697586;
  font-size: 10px;
  line-height: 1.55;
}

.stock-purchase-notes-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: #6c5710;
  background: #fff9dc;
  border: 1px solid #f0dda0;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.5;
}

.stock-purchase-notes-foot b {
  flex: 0 0 auto;
  color: #473600;
  font-size: 11px;
}

@media (max-width: 640px) {
  .stock-purchase-actions {
    grid-template-columns: 1fr;
    padding: 11px;
    border-radius: 13px;
  }

  .stock-purchase-actions .stock-inquiry {
    grid-column: auto;
  }

  .stock-purchase-note-grid {
    grid-template-columns: 1fr;
  }

  .stock-purchase-notes-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

@media (min-width: 981px) {
  .product-detail-layout.is-stock-layout {
    align-items: stretch;
    gap: 18px;
  }

  .is-stock-layout .product-detail-left,
  .product-detail-copy.is-stock-product {
    align-self: stretch;
    min-height: 100%;
  }

  .product-detail-copy.is-stock-product {
    display: flex;
    flex-direction: column;
  }

  .product-detail-copy.is-stock-product .stock-purchase-actions {
    align-self: end;
    width: 100%;
    margin-top: 0;
  }

  .is-stock-layout .stock-product-service {
    height: 100%;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: stretch;
  }

  .is-stock-layout .stock-product-service .product-detail-assurance {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-content: stretch;
  }

  .is-stock-layout .stock-product-service .product-detail-assurance > div {
    height: 100%;
  }

  .is-stock-layout .stock-product-service .product-detail-commercial-note {
    margin-top: 0;
  }
}

.is-stock-layout .product-detail-media,
.is-stock-layout .stock-product-service,
.product-detail-copy.is-stock-product {
  border-radius: 14px;
}

.product-detail-copy.is-stock-product {
  gap: 12px;
  padding: 18px 48px 18px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .service-mega,
  .site-header .service-mega-close,
  .site-header .service-mega-more,
  .site-header .service-mega-links a {
    transition: none;
  }
}

/* 鑫铭 3D 预览工具（v201） */
.prepress3d-page {
  display: none;
  width: min(1460px, calc(100% - 48px));
  min-height: calc(100dvh - 128px);
  margin: 0 auto;
  padding: 30px 0 54px;
}

.prepress3d-page:target,
.prepress3d-page.is-open {
  display: block;
}

main:has(.prepress3d-page:target) > :not(.prepress3d-page),
main.prepress3d-active > :not(.prepress3d-page) {
  display: none !important;
}

.prepress3d-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 20px;
}

.prepress3d-page-head small,
.prepress3d-stage header small {
  display: block;
  margin-bottom: 6px;
  color: #b98700;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.prepress3d-page-head h1 {
  margin: 0;
  color: #17191d;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.prepress3d-page-head p {
  margin: 7px 0 0;
  color: #858c96;
  font-size: 13px;
}

.prepress3d-back {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: #3d4652;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.prepress3d-back:hover {
  color: #111827;
  background: #fff9d7;
  border-color: #efd14a;
}

.prepress3d-tabs {
  display: flex;
  min-height: 56px;
  align-items: stretch;
  gap: 4px;
  padding: 0 0 0 2px;
  border-bottom: 1px solid #dfe3e8;
}

.prepress3d-tabs button {
  position: relative;
  min-width: 94px;
  padding: 0 20px;
  color: #343a43;
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
}

.prepress3d-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #2f3338;
  opacity: 0;
}

.prepress3d-tabs button:hover {
  background: #f6f6f6;
}

.prepress3d-tabs button.active {
  color: #17191d;
  background: #eeeeef;
  font-weight: 850;
}

.prepress3d-tabs button.active::after {
  opacity: 1;
}

.prepress3d-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  min-height: 700px;
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #f0f1f3;
  border-radius: 16px;
}

.prepress3d-controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
}

.prepress3d-controls > label,
.prepress3d-upload-field {
  display: grid;
  gap: 8px;
}

.prepress3d-controls > label > span,
.prepress3d-upload-field > span {
  color: #49515d;
  font-size: 13px;
  font-weight: 750;
}

.prepress3d-controls label span em {
  font-style: normal;
  font-weight: 500;
}

.prepress3d-controls input,
.prepress3d-controls select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d8dde5;
  border-radius: 5px;
  outline: 0;
}

.prepress3d-controls input:focus,
.prepress3d-controls select:focus {
  border-color: #d8ad0e;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .2);
}

.prepress3d-dropzone {
  position: relative;
  display: flex;
  height: 184px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  color: #5c6571;
  background: #fff;
  border: 1px dashed #d8dde5;
  border-radius: 7px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.prepress3d-dropzone:hover,
.prepress3d-dropzone.is-dragging {
  background: #fffdf1;
  border-color: #d5af1d;
}

.prepress3d-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.prepress3d-dropzone b {
  display: grid;
  width: 22px;
  height: 22px;
  margin-bottom: 1px;
  place-items: center;
  color: #fff;
  background: #3a3d42;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.prepress3d-dropzone strong {
  font-size: 14px;
}

.prepress3d-dropzone small {
  max-width: 230px;
  color: #949ba5;
  font-size: 11px;
  line-height: 1.65;
}

.prepress3d-dropzone img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  background: rgba(255, 255, 255, .94);
  border-radius: 5px;
}

.prepress3d-upload-field > p {
  min-height: 18px;
  margin: 0;
  overflow: hidden;
  color: #8b929c;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prepress3d-helper-links {
  display: flex;
  gap: 28px;
  padding: 0 18px;
}

.prepress3d-helper-links button {
  padding: 0;
  color: #515a67;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.prepress3d-helper-links button:hover {
  color: #ad7900;
}

.prepress3d-create {
  width: 100%;
  height: 42px;
  color: #fff;
  background: #33373c;
  border: 0;
  border-radius: 4px;
  font-weight: 850;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}

.prepress3d-create:hover {
  background: #17191d;
  transform: translateY(-1px);
}

.prepress3d-form-status {
  min-height: 18px;
  margin: -10px 0 0;
  color: #949ba5;
  font-size: 11px;
  text-align: center;
}

.prepress3d-form-status.is-error {
  color: #d92d20;
}

.prepress3d-form-status.is-success {
  color: #168a49;
}

.prepress3d-guide {
  padding: 14px 16px;
  color: #626b77;
  background: #fffbed;
  border: 1px solid #f1e3a7;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.65;
}

.prepress3d-guide strong {
  color: #383d45;
}

.prepress3d-guide ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.prepress3d-stage {
  display: grid;
  min-width: 0;
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
  background: #bdbdbd;
  border: 1px solid #e1e2e4;
  border-radius: 5px;
}

.prepress3d-stage > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e3e5e8;
}

.prepress3d-stage header strong {
  display: block;
  color: #22262c;
  font-size: 15px;
}

.prepress3d-stage header > span {
  color: #7d858f;
  font-size: 12px;
}

.prepress3d-canvas {
  --preview-art: none;
  position: relative;
  display: grid;
  min-height: 620px;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, .22) 0 20%, transparent 48%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    #bcbcbc;
  background-size: auto, 36px 36px, 36px 36px, auto;
  perspective: 1200px;
}

.prepress3d-model {
  position: relative;
  width: 360px;
  height: 390px;
  transform: rotateX(2deg) rotateY(-4deg);
  transform-style: preserve-3d;
  transition: transform .38s ease;
}

.prepress3d-canvas:hover .prepress3d-model {
  transform: rotateX(-2deg) rotateY(5deg) translateY(-3px);
}

.prepress3d-model-shadow {
  position: absolute;
  right: 18%;
  bottom: 3%;
  left: 18%;
  height: 34px;
  background: rgba(42, 42, 42, .25);
  border-radius: 50%;
  filter: blur(15px);
  transform: translateZ(-20px);
}

.prepress3d-model-texture {
  overflow: hidden;
  background-color: #e9e9e9;
  background-image: var(--preview-art);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.prepress3d-model-texture span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(75, 75, 75, .48);
  font-size: 12px;
  font-weight: 800;
}

.prepress3d-canvas.has-art .prepress3d-model-texture span {
  display: none;
}

.prepress3d-model-roll .prepress3d-model-body {
  position: absolute;
  top: 30px;
  left: 42px;
  z-index: 2;
  display: grid;
  width: 276px;
  height: 276px;
  place-items: center;
  background:
    radial-gradient(circle at center, #9a7a42 0 9%, #d7d7d7 9.5% 16%, transparent 16.5%),
    #d4d4d4;
  border-radius: 50%;
  box-shadow: inset -24px -10px 34px rgba(0, 0, 0, .08), 0 18px 28px rgba(0, 0, 0, .12);
}

.prepress3d-model-roll .prepress3d-model-body .prepress3d-model-texture {
  width: 174px;
  height: 174px;
  border-radius: 50%;
  clip-path: circle(50%);
}

.prepress3d-roll-tail {
  position: absolute;
  top: 240px;
  left: 132px;
  z-index: 1;
  width: 128px;
  height: 146px;
  overflow: hidden;
  background: #dedede;
  box-shadow: 10px 12px 18px rgba(0, 0, 0, .08);
  transform-origin: top center;
}

.prepress3d-roll-tail::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 54px;
  height: 86px;
  background: #bcbcbc;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.prepress3d-roll-tail .prepress3d-model-texture {
  width: 100%;
  height: 92px;
}

.prepress3d-canvas[data-direction="top"] .prepress3d-roll-tail {
  top: 0;
  transform: rotate(180deg);
}

.prepress3d-canvas[data-direction="left"] .prepress3d-roll-tail {
  top: 104px;
  left: 4px;
  transform: rotate(90deg);
}

.prepress3d-canvas[data-direction="right"] .prepress3d-roll-tail {
  top: 104px;
  left: 228px;
  transform: rotate(-90deg);
}

.prepress3d-model-cup .prepress3d-model-body {
  position: absolute;
  top: 52px;
  left: 75px;
  width: 210px;
  height: 286px;
  background: #e6e6e6;
  clip-path: polygon(8% 0, 92% 0, 76% 100%, 24% 100%);
  filter: drop-shadow(0 20px 16px rgba(0, 0, 0, .18));
}

.prepress3d-model-cup .prepress3d-model-body::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 11px;
  left: 11px;
  z-index: 2;
  height: 30px;
  background: #f1f1f1;
  border: 6px solid #d1d1d1;
  border-radius: 50%;
}

.prepress3d-model-cup .prepress3d-model-texture {
  position: absolute;
  inset: 24px 0 0;
  height: 220px;
  clip-path: polygon(5% 0, 95% 0, 78% 100%, 22% 100%);
}

.prepress3d-model-bag .prepress3d-model-body {
  position: absolute;
  top: 86px;
  left: 48px;
  width: 264px;
  height: 252px;
  background: #dedede;
  border-radius: 4px;
  box-shadow: 18px 21px 20px rgba(0, 0, 0, .17);
}

.prepress3d-model-bag .prepress3d-model-body::before,
.prepress3d-model-bag .prepress3d-model-body::after {
  content: "";
  position: absolute;
  top: -66px;
  width: 68px;
  height: 86px;
  border: 9px solid #dedede;
  border-bottom: 0;
  border-radius: 50px 50px 0 0;
}

.prepress3d-model-bag .prepress3d-model-body::before {
  left: 33px;
}

.prepress3d-model-bag .prepress3d-model-body::after {
  right: 33px;
}

.prepress3d-model-bag .prepress3d-model-texture {
  position: absolute;
  inset: 25px;
}

.prepress3d-canvas-help {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  color: #5f6670;
  background: rgba(255, 255, 255, .92);
  border-radius: 7px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
  font-size: 11px;
}

.prepress3d-canvas-help i {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: #3b96ff;
  border-radius: 50%;
  font-size: 13px;
  font-style: normal;
}

.prepress3d-canvas.is-rendering .prepress3d-model {
  animation: prepress3d-render .65s ease;
}

@keyframes prepress3d-render {
  0% { opacity: .35; transform: rotateX(2deg) rotateY(-28deg) scale(.92); }
  100% { opacity: 1; transform: rotateX(2deg) rotateY(-4deg) scale(1); }
}

.prepress3d-page :is(a, button, input, select):focus-visible {
  outline: 3px solid rgba(255, 216, 61, .42);
  outline-offset: 2px;
}

@media (max-width: 1050px) {
  .prepress3d-page {
    width: min(900px, calc(100% - 28px));
  }

  .prepress3d-workspace {
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 620px;
  }

  .prepress3d-canvas {
    min-height: 550px;
  }

  .prepress3d-model {
    transform: scale(.82) rotateX(2deg) rotateY(-4deg);
  }
}

@media (max-width: 760px) {
  .prepress3d-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .prepress3d-tabs {
    overflow-x: auto;
  }

  .prepress3d-workspace {
    grid-template-columns: 1fr;
  }

  .prepress3d-stage {
    min-height: 540px;
  }

  .prepress3d-canvas {
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prepress3d-model,
  .prepress3d-canvas.is-rendering .prepress3d-model {
    animation: none;
    transition: none;
  }
}

/* 服务与支持知识库（v203） */
.support-knowledge {
  display: none;
  width: min(1380px, calc(100% - 48px));
  min-height: calc(100dvh - 128px);
  margin: 0 auto;
  padding: 34px 0 64px;
}

.support-knowledge:has(.support-article:target) {
  display: block;
}

main:has(.support-article:target) > :not(.support-knowledge) {
  display: none !important;
}

.support-knowledge-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 0 0 22px;
  border-bottom: 1px solid #e4e7eb;
}

.support-knowledge-head small,
.support-article-title small {
  display: block;
  margin-bottom: 6px;
  color: #b78300;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.support-knowledge-head h1 {
  margin: 0;
  color: #17191d;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.support-knowledge-head p {
  margin: 7px 0 0;
  color: #858c96;
  font-size: 13px;
}

.support-knowledge-head > a {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: #3d4652;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
}

.support-knowledge-head > a:hover {
  color: #111827;
  background: #fff9d7;
  border-color: #efd14a;
}

.support-knowledge-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  margin-top: 26px;
}

.support-knowledge-nav {
  position: sticky;
  top: 150px;
  display: grid;
  align-self: start;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.support-knowledge-nav > strong {
  padding: 18px 20px;
  color: #17191d;
  background: #fff8d2;
  border-bottom: 1px solid #eee3ac;
  font-size: 15px;
}

.support-knowledge-nav > a {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 20px;
  color: #5a6370;
  border-bottom: 1px solid #f0f2f4;
  font-size: 13px;
  font-weight: 750;
  transition: color .16s ease, background-color .16s ease, padding-left .16s ease;
}

.support-knowledge-nav > a::after {
  content: "›";
  position: absolute;
  right: 18px;
  color: #a9afb7;
  font-size: 18px;
}

.support-knowledge-nav > a:hover {
  padding-left: 24px;
  color: #17191d;
  background: #fafafa;
}

body:has(#support-functions:target) .support-knowledge-nav a[href="#support-functions"],
body:has(#support-faq:target) .support-knowledge-nav a[href="#support-faq"],
body:has(#support-quality:target) .support-knowledge-nav a[href="#support-quality"],
body:has(#support-services:target) .support-knowledge-nav a[href="#support-services"],
body:has(#support-shipping:target) .support-knowledge-nav a[href="#support-shipping"],
body:has(#support-other:target) .support-knowledge-nav a[href="#support-other"],
body:has(#support-compliance:target) .support-knowledge-nav a[href="#support-compliance"] {
  padding-left: 24px;
  color: #17191d;
  background: #ffe760;
  font-weight: 900;
}

body:has(#academy-products:target) .support-knowledge-nav a[href="#academy-products"],
body:has(#academy-color:target) .support-knowledge-nav a[href="#academy-color"],
body:has(#academy-process:target) .support-knowledge-nav a[href="#academy-process"],
body:has(#academy-compliance:target) .support-knowledge-nav a[href="#academy-compliance"],
body:has(#academy-material:target) .support-knowledge-nav a[href="#academy-material"] {
  padding-left: 24px;
  color: #17191d;
  background: #ffe760;
  font-weight: 900;
}

.support-knowledge-nav > div {
  display: grid;
  gap: 4px;
  padding: 18px 20px 20px;
  color: #7e8792;
  background: #fafafa;
}

.support-knowledge-nav > div span,
.support-knowledge-nav > div small {
  font-size: 11px;
}

.support-knowledge-nav > div b {
  color: #252a31;
  font-size: 16px;
}

.support-knowledge-content {
  min-width: 0;
}

.support-article {
  display: none;
  padding: clamp(24px, 3.2vw, 44px);
  background: #fff;
  border: 1px solid #e6e9ed;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.support-article:target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  animation: support-article-in .24s ease;
}

@keyframes support-article-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.support-article-title {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8ebef;
}

.support-article-title > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #17191d;
  background: #ffe45c;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 950;
}

.support-article-title h2 {
  margin: 0;
  color: #17191d;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.support-article-title p {
  margin: 7px 0 0;
  color: #828a95;
  font-size: 13px;
}

.support-article > section {
  min-width: 0;
  padding: 20px 22px;
  background: #f8f9fa;
  border: 1px solid #f0f1f3;
  border-radius: 9px;
}

.support-article > section h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 13px;
  color: #2a3038;
  font-size: 15px;
  font-weight: 900;
}

.support-article > section h3::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  background: #f3c900;
  border-radius: 999px;
}

.support-article > section p {
  margin: 0;
  color: #626b77;
  font-size: 13px;
  line-height: 1.85;
}

.support-article-note {
  grid-column: 1 / -1;
  padding: 16px 18px;
  color: #695615;
  background: #fff9dc;
  border: 1px solid #f0dfa0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.75;
}

.support-article-warning {
  color: #873b32;
  background: #fff2ef;
  border-color: #f3c9c2;
}

/* 常见问题总览 */
.support-faq:target {
  grid-template-columns: 1fr;
}

.support-faq .support-article-title,
.support-faq .support-article-note {
  grid-column: 1;
}

.support-faq-tip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: #604d14;
  background: linear-gradient(100deg, #fff6c8, #fffdf3);
  border: 1px solid #eed477;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
}

.support-faq-tip b {
  flex: 0 0 auto;
  padding: 5px 10px;
  color: #17191d;
  background: #ffe057;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

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

.support-faq-grid details {
  overflow: hidden;
  align-self: start;
  background: #f8f9fb;
  border: 1px solid #e4e8ee;
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.support-faq-grid details[open] {
  background: #fffdf5;
  border-color: #e8cb5b;
  box-shadow: 0 10px 24px rgba(70, 58, 18, .08);
}

.support-faq-grid summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  padding: 12px 14px;
  color: #242932;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.support-faq-grid summary::-webkit-details-marker {
  display: none;
}

.support-faq-grid summary::after {
  content: "+";
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #6c7480;
  background: #fff;
  border: 1px solid #dce1e8;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
}

.support-faq-grid details[open] summary::after {
  content: "−";
  color: #17191d;
  background: #ffe057;
  border-color: #e4bf22;
}

.support-faq-grid summary i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #17191d;
  background: #ffe057;
  border-radius: 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.support-faq-grid summary strong {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.support-faq-grid details p {
  margin: 0;
  padding: 14px 18px 17px 59px;
  color: #606977;
  border-top: 1px dashed #e5dfc4;
  font-size: 13px;
  line-height: 1.85;
}

.service-mega-heading-link {
  color: inherit;
  text-decoration: none;
}

.service-mega-heading-link:hover,
.service-mega-heading-link:focus-visible {
  color: #7b46cb;
  text-decoration: underline;
  text-decoration-color: #c398ff;
  text-underline-offset: 5px;
}

.support-article-compliance .support-article-title > span {
  color: #fff;
  background: #30343a;
}

.academy-knowledge .support-knowledge-head small,
.academy-knowledge .support-article-title small {
  color: #b78300;
}

.academy-knowledge .support-knowledge-nav > strong {
  color: #2b3037;
  background: #fff7ca;
  border-bottom-color: #ecdfa1;
}

.academy-knowledge .support-article-title > span {
  color: #fff;
  background: #30343a;
}

.academy-knowledge .support-article > section h3::before {
  background: #f3c900;
}

.academy-knowledge .support-article-note {
  color: #695615;
  background: #fff9dc;
  border-color: #f0dfa0;
}

.academy-knowledge .support-article-warning {
  color: #873b32;
  background: #fff2ef;
  border-color: #f3c9c2;
}

.academy-article-audit .support-article-title > span {
  background: #30343a;
}

.support-knowledge :is(a, button):focus-visible {
  outline: 3px solid rgba(255, 216, 61, .42);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .support-knowledge {
    width: min(760px, calc(100% - 28px));
  }

  .support-knowledge-layout {
    grid-template-columns: 1fr;
  }

  .support-knowledge-nav {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .support-knowledge-nav > strong,
  .support-knowledge-nav > div {
    grid-column: 1 / -1;
  }

  .support-knowledge-nav > a {
    border-right: 1px solid #f0f2f4;
  }
}

@media (max-width: 650px) {
  .support-knowledge-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-knowledge-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-article:target {
    grid-template-columns: 1fr;
  }

  .support-article-title {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .support-article-title > span {
    width: 46px;
    height: 46px;
  }

  .support-faq-tip {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .support-faq-grid {
    grid-template-columns: 1fr;
  }

  .support-faq-grid details p {
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-article:target {
    animation: none;
  }
}

/* 刀版选择与下载工具（v206） */
.dieline-page {
  display: none;
  width: min(1460px, calc(100% - 44px));
  min-height: calc(100dvh - 128px);
  margin: 0 auto;
  padding: 30px 0 58px;
}

.dieline-page:target {
  display: block;
}

main:has(.dieline-page:target) > :not(.dieline-page):not(.dieline-dialog) {
  display: none !important;
}

.dieline-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.dieline-page-head small {
  display: block;
  margin-bottom: 6px;
  color: #b78300;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.dieline-page-head h1 {
  margin: 0;
  color: #17191d;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.dieline-page-head p {
  margin: 7px 0 0;
  color: #858c96;
  font-size: 13px;
}

.dieline-page-head > a {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: #3d4652;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
}

.dieline-page-head > a:hover {
  color: #111827;
  background: #fff9d7;
  border-color: #efd14a;
}

.dieline-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 24px;
  min-height: 720px;
  padding: 16px;
  background: #f7f8fa;
  border: 1px solid #eceff2;
  border-radius: 14px;
}

.dieline-controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
}

.dieline-controls > section {
  display: grid;
  gap: 11px;
}

.dieline-controls h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #343b45;
  font-size: 13px;
  font-weight: 900;
}

.dieline-controls h2 i {
  width: 3px;
  height: 14px;
  background: #f2ca13;
  border-radius: 99px;
}

.dieline-controls h2 em {
  color: #9aa1aa;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.dieline-type-picker {
  display: grid;
  min-height: 68px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #333942;
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
}

.dieline-type-picker:hover {
  border-color: #d1aa12;
  box-shadow: 0 6px 16px rgba(191, 145, 0, .09);
}

.dieline-type-picker > span:first-child {
  display: grid;
  width: 54px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  background: #f3f4f5;
  border-radius: 4px;
}

.dieline-type-picker svg {
  width: 50px;
  height: 36px;
}

.dieline-type-picker small,
.dieline-type-picker strong {
  display: block;
}

.dieline-type-picker small {
  margin-bottom: 4px;
  color: #9299a3;
  font-size: 10px;
}

.dieline-type-picker strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dieline-type-picker b {
  padding: 8px 10px;
  color: #fff;
  background: #2e3237;
  border-radius: 4px;
  font-size: 11px;
}

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

.dieline-size-grid label,
.dieline-select-label,
.dieline-thickness-label {
  display: grid;
  gap: 6px;
  color: #69727e;
  font-size: 11px;
}

.dieline-controls input,
.dieline-controls select {
  width: 100%;
  height: 36px;
  padding: 0 9px;
  color: #252a31;
  background: #fff;
  border: 1px solid #d9dee5;
  border-radius: 4px;
  outline: 0;
}

.dieline-controls input:focus,
.dieline-controls select:focus {
  border-color: #d3aa0c;
  box-shadow: 0 0 0 3px rgba(255, 216, 61, .19);
}

.dieline-thickness-label {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.dieline-thickness-label span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dieline-thickness-label input {
  width: 88px;
}

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

.dieline-line-options label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606975;
  font-size: 11px;
  cursor: pointer;
}

.dieline-line-options input {
  width: 15px;
  height: 15px;
  accent-color: #e6bf12;
}

.dieline-line-options span {
  width: 15px;
  height: 2px;
  background: #e5484d;
}

.dieline-line-options label:nth-child(2) span {
  background: #717780;
}

.dieline-line-options label:nth-child(3) span {
  background: #3a7bde;
}

.dieline-generate,
.dieline-download {
  width: 100%;
  height: 42px;
  border-radius: 5px;
  font-weight: 850;
  cursor: pointer;
}

.dieline-generate {
  margin-top: auto;
  color: #22262c;
  background: #ffe45c;
  border: 1px solid #e7c329;
}

.dieline-generate:hover {
  background: #ffdb2d;
}

.dieline-download {
  color: #fff;
  background: #30343a;
  border: 1px solid #30343a;
}

.dieline-download:hover {
  background: #17191d;
}

.dieline-status {
  min-height: 18px;
  margin: -8px 0 0;
  color: #8d949d;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.dieline-status.is-error {
  color: #c43229;
}

.dieline-status.is-success {
  color: #8a6700;
}

.dieline-preview {
  display: grid;
  min-width: 0;
  grid-template-rows: 62px minmax(0, 1fr) 64px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e4e9;
  border-radius: 6px;
}

.dieline-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e7eaee;
}

.dieline-preview > header > strong {
  color: #303640;
  font-size: 13px;
}

.dieline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dieline-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #707986;
  font-size: 11px;
}

.dieline-legend i {
  width: 25px;
  height: 2px;
}

.dieline-legend .cut { background: #e5484d; }
.dieline-legend .fold { background: #717780; }
.dieline-legend .bleed { background: #3a7bde; }

.dieline-preview-canvas {
  display: grid;
  min-height: 590px;
  overflow: auto;
  place-items: center;
  padding: 28px;
  background:
    linear-gradient(rgba(80, 88, 98, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 88, 98, .035) 1px, transparent 1px),
    #f4f5f6;
  background-size: 24px 24px;
}

.dieline-preview-canvas svg {
  width: min(100%, 900px);
  max-height: 560px;
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, .08));
}

.dieline-preview > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  color: #616a76;
  background: #fff;
  border-top: 1px solid #e7eaee;
}

.dieline-preview > footer span {
  font-size: 12px;
  font-weight: 800;
}

.dieline-preview > footer small {
  color: #969da6;
  font-size: 10px;
  text-align: right;
}

.dieline-dialog {
  width: min(1000px, calc(100% - 40px));
  max-width: none;
  max-height: min(76dvh, 680px);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.dieline-dialog::backdrop {
  background: rgba(24, 27, 31, .58);
  backdrop-filter: blur(2px);
}

.dieline-dialog-frame {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  max-height: min(76dvh, 680px);
}

.dieline-dialog-frame > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #e5e7eb;
}

.dieline-dialog-frame h2 {
  margin: 0;
  color: #272c33;
  font-size: 17px;
}

.dieline-dialog-frame > header button {
  width: 32px;
  height: 32px;
  color: #747b84;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
}

.dieline-dialog-frame > header button:hover {
  color: #17191d;
  background: #f1f2f3;
}

.dieline-dialog-body {
  display: grid;
  min-height: 500px;
  grid-template-columns: 122px 164px minmax(0, 1fr);
  overflow: hidden;
}

.dieline-category-list,
.dieline-subtype-list {
  display: grid;
  align-content: start;
  overflow-y: auto;
  background: #fafafa;
  border-right: 1px solid #e5e7eb;
}

.dieline-category-list button,
.dieline-subtype-list button {
  position: relative;
  min-height: 54px;
  padding: 0 20px;
  color: #5f6670;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.dieline-category-list button:hover,
.dieline-subtype-list button:hover {
  color: #24282e;
  background: #f3f3f3;
}

.dieline-category-list button.active {
  color: #24282e;
  background: #fff;
  font-weight: 900;
}

.dieline-category-list button.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #f0cb17;
}

.dieline-subtype-list {
  background: #fff;
}

.dieline-subtype-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.dieline-subtype-list button small {
  color: #9ba1a9;
  font-size: 10px;
}

.dieline-subtype-list button.active {
  color: #22262c;
  background: #ffe760;
  font-weight: 900;
}

.dieline-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  align-content: start;
  gap: 18px;
  overflow-y: auto;
  padding: 24px;
  background: #fff;
}

.dieline-template-card {
  display: grid;
  min-width: 0;
  grid-template-rows: 150px auto;
  overflow: hidden;
  color: #343a43;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dieline-template-card:hover,
.dieline-template-card.active {
  border-color: #d2ad15;
  box-shadow: 0 10px 24px rgba(171, 128, 0, .12);
  transform: translateY(-2px);
}

.dieline-template-card > span {
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 12px;
  background: #f3f3f3;
  border-bottom: 1px solid #e1e4e8;
}

.dieline-template-card svg {
  width: 100%;
  height: 126px;
}

.dieline-template-card > div {
  padding: 12px;
}

.dieline-template-card strong,
.dieline-template-card small {
  display: block;
}

.dieline-template-card strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dieline-template-card small {
  margin-top: 5px;
  color: #888f98;
  font-size: 10px;
}

.dieline-page :is(a, button, input, select):focus-visible,
.dieline-dialog :is(button, input):focus-visible {
  outline: 3px solid rgba(255, 216, 61, .42);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .dieline-page {
    width: min(840px, calc(100% - 28px));
  }

  .dieline-workspace {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .dieline-dialog-body {
    grid-template-columns: 110px 150px minmax(0, 1fr);
  }

  .dieline-template-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 720px) {
  .dieline-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dieline-workspace {
    grid-template-columns: 1fr;
  }

  .dieline-dialog-body {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .dieline-template-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    max-height: 320px;
  }
}

@media (max-width: 480px) {
  .dieline-template-grid {
    grid-template-columns: 1fr;
  }
}

/* 根据实时商品目录生成的模板下载中心（v207） */
.product-template-page {
  display: none;
  width: min(1740px, calc(100% - 32px));
  min-height: calc(100dvh - 128px);
  margin: 0 auto;
  padding: 36px 0 64px;
  color: #262b32;
}

.product-template-page:target {
  display: block;
}

main:has(.product-template-page:target) > :not(.product-template-page) {
  display: none !important;
}

.product-template-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.product-template-head small {
  display: block;
  margin-bottom: 6px;
  color: #b67d00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.product-template-head h1 {
  margin: 0;
  color: #17191d;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.product-template-head p {
  margin: 10px 0 0;
  color: #747c86;
  font-size: 14px;
}

.product-template-head > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 17px;
  color: #424952;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.product-template-head > a:hover {
  color: #17191d;
  border-color: #d3aa18;
}

.product-template-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 19px 20px;
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(27, 31, 36, .045);
}

.product-template-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(760px, 64%);
  height: 50px;
  background: #f8f9fa;
  border: 1px solid #dce1e6;
  border-radius: 6px;
}

.product-template-search > span {
  position: relative;
  width: 50px;
  height: 100%;
  flex: 0 0 50px;
}

.product-template-search > span::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 14px;
  height: 14px;
  border: 2px solid #8d96a1;
  border-radius: 50%;
}

.product-template-search > span::after {
  content: "";
  position: absolute;
  top: 29px;
  left: 31px;
  width: 8px;
  height: 2px;
  background: #8d96a1;
  transform: rotate(45deg);
}

.product-template-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 36px 0 0;
  color: #23282e;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.product-template-search > button {
  position: absolute;
  top: 7px;
  right: 7px;
  display: none;
  width: 28px;
  height: 28px;
  color: #7b838d;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
}

.product-template-search > button.visible {
  display: block;
}

.product-template-search > button:hover {
  color: #17191d;
  background: #eceff2;
}

.product-template-summary {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.product-template-summary strong {
  color: #22272e;
  font-size: 15px;
}

.product-template-summary span {
  color: #8a929d;
  font-size: 12px;
}

.product-template-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.product-template-sidebar,
.product-template-results {
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(27, 31, 36, .04);
}

.product-template-sidebar {
  position: sticky;
  top: 132px;
  overflow: hidden;
}

.product-template-sidebar > strong {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 19px;
  color: #252a30;
  background: #fff9dc;
  border-bottom: 1px solid #ece5bd;
  font-size: 16px;
}

.product-template-sidebar nav {
  display: grid;
  max-height: 570px;
  overflow-y: auto;
  padding: 6px 0;
}

.product-template-sidebar nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 47px;
  padding: 0 17px 0 20px;
  color: #535b65;
  background: transparent;
  border: 0;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.product-template-sidebar nav button:hover {
  color: #1e2329;
  background: #f7f7f7;
}

.product-template-sidebar nav button.active {
  color: #17191d;
  background: #ffe75e;
  font-weight: 900;
}

.product-template-sidebar nav button.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #292d32;
}

.product-template-sidebar nav button b {
  min-width: 25px;
  color: #9299a2;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.product-template-sidebar nav button.active b {
  color: #4a4218;
}

.product-template-sidebar-note {
  display: grid;
  gap: 8px;
  padding: 19px 20px 21px;
  color: #737b85;
  background: #fafafa;
  border-top: 1px solid #eceef0;
  font-size: 11px;
}

.product-template-sidebar-note b {
  color: #30353b;
  font-size: 13px;
}

.product-template-sidebar-note p {
  margin: 0 0 3px;
  line-height: 1.65;
}

.product-template-sidebar-note span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.product-template-sidebar-note i {
  display: inline-block;
  width: 24px;
  border-top: 2px solid #22272d;
}

.product-template-sidebar-note i.bleed {
  border-color: #ef9a21;
  border-top-style: dashed;
}

.product-template-sidebar-note i.safe {
  border-color: #4b72c2;
  border-top-style: dashed;
}

.product-template-results {
  min-width: 0;
  padding: 22px;
}

.product-template-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
  padding-bottom: 17px;
  border-bottom: 1px solid #eceef0;
}

.product-template-result-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.product-template-result-head strong {
  color: #20242a;
  font-size: 20px;
}

.product-template-result-head span {
  color: #9299a2;
  font-size: 12px;
}

.product-template-result-head select {
  min-width: 176px;
  height: 40px;
  padding: 0 32px 0 12px;
  color: #59616b;
  background: #fff;
  border: 1px solid #dce1e6;
  border-radius: 5px;
  font-size: 12px;
}

.product-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-height: 300px;
}

.product-template-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.product-template-card:hover {
  border-color: #d4aa13;
  box-shadow: 0 12px 28px rgba(155, 116, 0, .11);
  transform: translateY(-2px);
}

.product-template-card-preview {
  position: relative;
  display: grid;
  height: 184px;
  overflow: hidden;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(36, 41, 47, .025) 1px, transparent 1px),
    linear-gradient(rgba(36, 41, 47, .025) 1px, transparent 1px),
    #f6f7f8;
  background-size: 14px 14px;
  border-bottom: 1px solid #e3e6ea;
}

.product-template-card-preview > svg {
  width: 80%;
  height: 154px;
}

.product-template-card-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  background: #f6f7f8;
}

.product-template-card-preview > span {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-height: 26px;
  padding: 0 10px;
  color: #252a30;
  background: rgba(255, 232, 94, .94);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  line-height: 26px;
}

.product-template-card-body {
  padding: 18px;
}

.product-template-card-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.product-template-card-title > div {
  min-width: 0;
}

.product-template-card-title small {
  display: block;
  margin-bottom: 3px;
  color: #999fa8;
  font-size: 10px;
}

.product-template-card-title h3 {
  overflow: hidden;
  margin: 0;
  color: #20242a;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-template-card-title code {
  max-width: 42%;
  overflow: hidden;
  padding: 5px 7px;
  color: #7c848e;
  background: #f4f5f6;
  border-radius: 3px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-template-card dl {
  display: grid;
  gap: 8px;
  margin: 15px 0;
}

.product-template-card dl > div {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.product-template-card dt {
  color: #9aa1aa;
  font-size: 10px;
}

.product-template-card dd {
  overflow: hidden;
  margin: 0;
  color: #5d6570;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-template-size-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.product-template-size-select > span {
  color: #777f89;
  font-size: 11px;
}

.product-template-size-select select {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 30px 0 11px;
  color: #343a42;
  background: #fff;
  border: 1px solid #dce1e6;
  border-radius: 4px;
  font-size: 12px;
}

.product-template-card-body > p {
  height: 42px;
  overflow: hidden;
  margin: 0 0 14px;
  color: #8b929b;
  font-size: 11px;
  line-height: 1.8;
}

.product-template-card-body > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 15px;
  color: #17191d;
  background: #ffe45b;
  border: 1px solid #e1c437;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.product-template-card-body > button:hover {
  background: #ffdd32;
  border-color: #d8b820;
}

.product-template-card-body > button b {
  font-size: 18px;
}

.product-template-card-body > button:disabled {
  color: #8b929b;
  background: #f0f1f2;
  border-color: #e3e5e8;
  cursor: not-allowed;
}

.product-template-card[data-kind="structure"] .product-template-card-body > button {
  color: #fff;
  background: #262b31;
  border-color: #262b31;
}

.product-template-card[data-kind="structure"] .product-template-card-body > button:hover {
  background: #0f1114;
}

.product-template-loading,
.product-template-empty {
  display: grid;
  grid-column: 1 / -1;
  align-content: center;
  justify-items: center;
  min-height: 360px;
  color: #8c949e;
  text-align: center;
}

.product-template-loading i {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 3px solid #eceef0;
  border-top-color: #d3aa16;
  border-radius: 50%;
  animation: product-template-spin .75s linear infinite;
}

.product-template-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  color: #a5acb4;
  background: #f1f2f3;
  border-radius: 50%;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
}

.product-template-empty strong {
  color: #3c424a;
  font-size: 14px;
}

.product-template-empty p {
  margin: 7px 0 15px;
  font-size: 11px;
}

.product-template-empty button,
.product-template-more {
  min-height: 34px;
  padding: 0 15px;
  color: #292e35;
  background: #fff;
  border: 1px solid #d9dde2;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.product-template-more {
  display: block;
  min-width: 210px;
  margin: 20px auto 2px;
}

.product-template-more[hidden] {
  display: none;
}

.product-template-empty button:hover,
.product-template-more:hover {
  border-color: #d0a91b;
}

.product-template-footnote {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  color: #8e4938;
  background: #fff5f0;
  border: 1px solid #f0c2b6;
  border-radius: 7px;
  font-size: 11px;
}

.product-template-footnote strong {
  flex: 0 0 auto;
  color: #b03b25;
}

.product-template-footnote p {
  margin: 0;
  line-height: 1.7;
}

.product-template-size-dialog {
  width: min(520px, calc(100% - 30px));
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 9px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .28);
}

.product-template-size-dialog::backdrop {
  background: rgba(23, 26, 30, .56);
  backdrop-filter: blur(2px);
}

.product-template-size-dialog form {
  padding: 22px;
}

.product-template-size-dialog header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eceef0;
}

.product-template-size-dialog header small {
  display: block;
  margin-bottom: 4px;
  color: #b47d00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.product-template-size-dialog h2 {
  margin: 0;
  color: #20242a;
  font-size: 18px;
}

.product-template-size-dialog header button {
  width: 30px;
  height: 30px;
  color: #747c86;
  background: #f4f5f6;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}

.product-template-size-dialog form > p {
  margin: 14px 0;
  color: #747c86;
  font-size: 11px;
  line-height: 1.65;
}

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

.product-template-size-dialog label {
  display: grid;
  gap: 7px;
  color: #454c55;
  font-size: 11px;
  font-weight: 800;
}

.product-template-size-dialog input,
.product-template-size-dialog select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  color: #282d33;
  background: #fff;
  border: 1px solid #d8dde2;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
}

.product-template-bleed-field {
  margin-top: 13px;
}

.product-template-size-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.product-template-size-actions button {
  min-height: 38px;
  padding: 0 16px;
  color: #4e5660;
  background: #fff;
  border: 1px solid #d7dce1;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.product-template-size-actions button[type="submit"] {
  color: #191b1f;
  background: #ffe255;
  border-color: #dabc28;
}

.product-template-page :is(a, button, input, select):focus-visible {
  outline: 3px solid rgba(255, 213, 47, .42);
  outline-offset: 2px;
}

@keyframes product-template-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1120px) {
  .product-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .product-template-toolbar,
  .product-template-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-template-search {
    width: 100%;
  }

  .product-template-summary {
    justify-items: start;
  }

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

  .product-template-sidebar {
    position: static;
  }

  .product-template-sidebar nav {
    display: flex;
    max-height: none;
    overflow-x: auto;
    padding: 8px;
  }

  .product-template-sidebar nav button {
    min-height: 34px;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 12px;
    border-radius: 4px;
  }

  .product-template-sidebar-note {
    display: none;
  }
}

@media (max-width: 570px) {
  .product-template-page {
    width: min(100% - 24px, 1460px);
    padding-top: 20px;
  }

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

  .product-template-result-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-template-result-head > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .product-template-result-head select {
    width: 100%;
  }

  .product-template-footnote {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

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

  .product-template-size-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-template-loading i {
    animation: none;
  }

  .product-template-card {
    transition: none;
  }
}

/* 了解鑫铭：品牌介绍与新闻资讯大菜单（v209） */
.site-header .about-mega {
  position: absolute;
  top: 68px;
  right: 0;
  left: 0;
  z-index: 87;
  overflow: hidden;
  color: #252a31;
  background:
    linear-gradient(90deg, rgba(255, 249, 203, .75) 0, rgba(255, 254, 238, .5) 18%, #fff 31%),
    #fff;
  border-top: 1px solid #edf0f3;
  border-bottom: 1px solid #e6e9ed;
  box-shadow: 0 22px 42px rgba(20, 29, 43, .15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transform-origin: top center;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s,
    transform .18s ease;
}

.site-header .about-mega.is-open,
.site-header .about-mega:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.site-header .about-mega-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, .86fr) minmax(390px, 1.7fr) minmax(390px, 1.7fr);
  gap: clamp(38px, 3.2vw, 68px);
  width: min(1760px, calc(100% - 72px));
  min-height: 278px;
  margin: 0 auto;
  padding: 38px 0 40px;
}

.site-header .about-mega-close {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #6e747d;
  background: transparent;
  border: 0;
  border-radius: 50%;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}

.site-header .about-mega-close:hover {
  color: #111827;
  background: #f2f3f5;
  transform: rotate(90deg);
}

.site-header .about-mega-intro {
  min-width: 0;
  padding: 3px clamp(28px, 2.5vw, 48px) 0 0;
  border-right: 1px solid #e7e9ed;
}

.site-header .about-mega-intro > span {
  display: inline-block;
  margin-bottom: 9px;
  color: #b88700;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.site-header .about-mega-intro h2 {
  margin: 0;
  color: #111318;
  font-size: clamp(23px, 1.55vw, 29px);
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1.25;
}

.site-header .about-mega-intro p {
  max-width: 300px;
  margin: 16px 0 22px;
  color: #747b85;
  font-size: 13px;
  line-height: 1.75;
}

.site-header .about-mega-intro > a {
  display: inline-flex;
  min-width: 88px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #fff;
  background: #2d3035;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .16s ease, transform .16s ease;
}

.site-header .about-mega-intro > a:hover {
  background: #111318;
  transform: translateY(-1px);
}

.site-header .about-mega-column {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 27px;
}

.site-header .about-mega-column > header {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
}

.site-header .about-mega-column header i {
  display: grid;
  width: 42px;
  height: 42px;
  color: #fff;
  background: #f16f76;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(241, 111, 118, .2);
  place-items: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.site-header .about-mega-news header i {
  background: #27b8bc;
  box-shadow: 0 8px 18px rgba(39, 184, 188, .2);
}

.site-header .about-mega-column h3 {
  margin: 0 0 4px;
  color: #17191d;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.site-header .about-mega-column header p {
  margin: 0;
  color: #9a9fa7;
  font-size: 13px;
  line-height: 1.55;
}

.site-header .about-mega-column nav {
  display: grid;
  min-height: 108px;
  align-content: center;
  gap: 12px;
  padding: 14px 18px;
  background: #f7f7fa;
  border: 1px solid #f3f3f6;
  border-radius: 9px;
}

.site-header .about-mega-column nav a {
  color: #424750;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}

.site-header .about-mega-column nav a:hover {
  color: #c58d00;
  transform: translateX(3px);
}

.main-nav #aboutMegaTrigger[aria-expanded="true"] {
  color: #111318;
}

.main-nav #aboutMegaTrigger[aria-expanded="true"]::after,
.site-header:has(.about-mega:target) #aboutMegaTrigger::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header .about-mega :is(a, button):focus-visible {
  outline: 3px solid rgba(255, 216, 61, .42);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .site-header .about-mega-shell {
    grid-template-columns: minmax(230px, .8fr) repeat(2, minmax(280px, 1.35fr));
    gap: 28px;
    width: calc(100% - 48px);
  }
}

@media (max-width: 820px) {
  .site-header .about-mega {
    top: 60px;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  .site-header .about-mega-shell {
    grid-template-columns: 1fr;
    gap: 24px;
    width: calc(100% - 28px);
    padding: 34px 0;
  }

  .site-header .about-mega-intro {
    padding-right: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid #e7e9ed;
  }

  .site-header .about-mega-intro p {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .about-mega,
  .site-header .about-mega-close,
  .site-header .about-mega-intro > a,
  .site-header .about-mega-column nav a {
    transition: none;
  }
}

/* 了解鑫铭五个独立内容页（v211） */
.about-content-hub {
  display: none;
  width: min(1500px, calc(100% - 44px));
  min-height: calc(100dvh - 128px);
  margin: 0 auto;
  padding: 32px 0 62px;
  color: #29303a;
}

main:has(.about-detail:target) > :not(.about-content-hub),
main:has(.about-content-hub.is-open) > :not(.about-content-hub) {
  display: none !important;
}

main:has(.about-detail:target) .about-content-hub,
.about-content-hub.is-open {
  display: block;
}

.about-detail {
  display: none;
  min-height: 650px;
  padding: 38px 42px 44px;
  background: #fff;
  border: 1px solid #e1e5e9;
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(28, 34, 42, .055);
}

.about-detail:target,
.about-detail.is-active {
  display: block;
  animation: about-detail-in .2s ease both;
}

.about-content-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.about-content-head small {
  display: block;
  margin-bottom: 6px;
  color: #b67e00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.about-content-head h1 {
  margin: 0;
  color: #17191d;
  font-size: 29px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.about-content-head p {
  margin: 8px 0 0;
  color: #7a828c;
  font-size: 13px;
}

.about-content-head > a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  color: #414952;
  background: #fff;
  border: 1px solid #dce1e6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.about-content-head > a:hover {
  color: #17191d;
  border-color: #d2aa1a;
}

.about-content-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.about-content-nav {
  position: sticky;
  top: 130px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe3e7;
  border-radius: 9px;
  box-shadow: 0 12px 30px rgba(30, 36, 44, .05);
}

.about-content-nav > strong {
  display: flex;
  min-height: 56px;
  align-items: center;
  padding: 0 19px;
  color: #282d34;
  background: #fff8d7;
  border-bottom: 1px solid #ece4b8;
  font-size: 15px;
}

.about-content-nav > a {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 20px;
  color: #56606b;
  border-bottom: 1px solid #eceef0;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.about-content-nav > a:hover {
  color: #1c2026;
  background: #f7f7f8;
}

.about-content-nav > a span {
  color: #a1a8b0;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
}

body:has(#about-company:target) .about-content-nav a[href="#about-company"],
body:has(#about-contact:target) .about-content-nav a[href="#about-contact"],
body:has(#about-news:target) .about-content-nav a[href="#about-news"],
body:has(#about-legal:target) .about-content-nav a[href="#about-legal"],
body:has(#about-product-news:target) .about-content-nav a[href="#about-product-news"] {
  color: #17191d;
  background: #ffe45b;
  font-weight: 900;
}

.about-content-nav > a.active {
  color: #17191d;
  background: #ffe45b;
  font-weight: 900;
}

body:has(#about-company:target) .about-content-nav a[href="#about-company"]::before,
body:has(#about-contact:target) .about-content-nav a[href="#about-contact"]::before,
body:has(#about-news:target) .about-content-nav a[href="#about-news"]::before,
body:has(#about-legal:target) .about-content-nav a[href="#about-legal"]::before,
body:has(#about-product-news:target) .about-content-nav a[href="#about-product-news"]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #252a30;
}

.about-content-nav > a.active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #252a30;
}

.about-content-nav > div {
  display: grid;
  gap: 5px;
  padding: 20px;
  background: #f8f9fa;
}

.about-content-nav > div small,
.about-content-nav > div span {
  color: #848d97;
  font-size: 10px;
}

.about-content-nav > div a {
  color: #242a31;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
}

.about-content-pages {
  min-width: 0;
}

.about-detail-title {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e5e8eb;
}

.about-detail-title > span {
  display: grid;
  width: 58px;
  height: 58px;
  color: #fff;
  background: #292d33;
  border-radius: 11px;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.about-detail-title small {
  display: block;
  margin-bottom: 4px;
  color: #b57e00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.about-detail-title h2 {
  margin: 0;
  color: #15181d;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -.035em;
}

.about-detail-title p {
  margin: 5px 0 0;
  color: #89919b;
  font-size: 12px;
}

.about-company-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  min-height: 196px;
  overflow: hidden;
  padding: 30px 34px;
  color: #262b31;
  background:
    radial-gradient(circle at 88% 30%, rgba(255, 255, 255, .92) 0 58px, transparent 59px),
    linear-gradient(120deg, #fff1a3, #fff9dc 62%, #f7f8fa);
  border: 1px solid #eadb91;
  border-radius: 9px;
}

.about-company-hero small,
.about-product-news-hero small {
  color: #9e7100;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.about-company-hero h3 {
  margin: 8px 0 12px;
  color: #15181c;
  font-size: 27px;
  font-weight: 950;
}

.about-company-hero p {
  max-width: 830px;
  margin: 0;
  color: #656e78;
  font-size: 13px;
  line-height: 1.85;
}

.about-company-hero > b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 92px;
  height: 92px;
  color: #1f242a;
  background: #ffe04a;
  border: 3px solid #292d33;
  border-radius: 50%;
  place-items: center;
  font-size: 35px;
  font-weight: 950;
  box-shadow: 0 13px 28px rgba(103, 76, 0, .14);
}

.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.about-stat-grid > div {
  display: grid;
  min-height: 94px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  background: #f7f8f9;
  border: 1px solid #e8eaed;
  border-radius: 8px;
}

.about-stat-grid strong {
  color: #20252b;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 25px;
  font-weight: 950;
}

.about-stat-grid strong em {
  margin-left: 2px;
  color: #bd8700;
  font-size: 13px;
  font-style: normal;
}

.about-stat-grid span {
  color: #7f8791;
  font-size: 10px;
}

.about-info-grid,
.about-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-info-grid section,
.about-legal-grid section {
  padding: 21px 22px;
  background: #f7f8f9;
  border: 1px solid #e7e9ec;
  border-radius: 8px;
}

.about-info-grid h3,
.about-legal-grid h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 12px;
  color: #31363d;
  font-size: 14px;
}

.about-info-grid h3::before,
.about-legal-grid h3::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 3px;
  background: #e5b910;
  border-radius: 3px;
}

.about-info-grid p,
.about-legal-grid p {
  margin: 0;
  color: #6f7883;
  font-size: 12px;
  line-height: 1.85;
}

.about-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.about-detail-actions a {
  display: inline-flex;
  min-width: 108px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #262b31;
  background: #ffe45b;
  border: 1px solid #ddbf31;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.about-detail-actions a + a {
  background: #fff;
  border-color: #d9dee3;
}

.about-contact-primary {
  display: grid;
  grid-template-columns: 1.05fr 1.4fr 1.05fr;
  gap: 14px;
  margin-bottom: 16px;
}

.about-contact-primary section {
  min-height: 152px;
  padding: 23px;
  background: #f7f8f9;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
}

.about-contact-primary section:first-child {
  color: #fff;
  background: #292e34;
  border-color: #292e34;
}

.about-contact-primary small {
  display: block;
  margin-bottom: 12px;
  color: #9099a3;
  font-size: 10px;
  font-weight: 800;
}

.about-contact-primary section:first-child small,
.about-contact-primary section:first-child p {
  color: #bdc3ca;
}

.about-contact-primary a,
.about-contact-primary strong {
  display: block;
  color: #252a30;
  font-size: 18px;
  font-weight: 950;
  text-decoration: none;
}

.about-contact-primary section:first-child a {
  color: #ffe45b;
  font-family: Arial, sans-serif;
  font-size: 25px;
  letter-spacing: .035em;
}

.about-contact-primary p {
  margin: 12px 0 0;
  color: #747d87;
  font-size: 11px;
  line-height: 1.75;
}

.about-contact-grid,
.about-product-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-contact-grid section,
.about-product-news-grid article {
  position: relative;
  min-height: 174px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 8px;
}

.about-contact-grid section > span {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #e7eaed;
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 950;
}

.about-contact-grid h3,
.about-product-news-grid h3 {
  margin: 0 0 9px;
  color: #2b3037;
  font-size: 15px;
}

.about-contact-grid p,
.about-product-news-grid p {
  margin: 0 0 14px;
  color: #717a85;
  font-size: 11px;
  line-height: 1.75;
}

.about-contact-grid a,
.about-product-news-grid a {
  color: #9e7300;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.about-warning,
.about-legal-warning,
.about-news-note {
  margin-top: 18px;
  padding: 14px 17px;
  color: #9e4938;
  background: #fff4ef;
  border: 1px solid #efc0b5;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.75;
}

.about-news-feature {
  display: flex;
  min-height: 174px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 30px;
  background: linear-gradient(115deg, #fff0a0, #fff9de);
  border: 1px solid #ead98b;
  border-radius: 9px;
}

.about-news-feature small {
  color: #a17400;
  font-size: 10px;
  font-weight: 900;
}

.about-news-feature h3 {
  margin: 8px 0;
  color: #20242a;
  font-size: 21px;
}

.about-news-feature p {
  max-width: 790px;
  margin: 0;
  color: #68717b;
  font-size: 12px;
  line-height: 1.8;
}

.about-news-feature > a {
  display: inline-flex;
  min-width: 98px;
  height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #292e34;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.about-news-list {
  display: grid;
  margin-top: 16px;
  border: 1px solid #e3e6e9;
  border-radius: 8px;
}

.about-news-list article {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 19px;
  min-height: 126px;
  padding: 18px 22px;
  border-bottom: 1px solid #e8eaed;
}

.about-news-list article:last-child {
  border-bottom: 0;
}

.about-news-list time {
  display: grid;
  justify-items: center;
  color: #8a929b;
}

.about-news-list time b {
  color: #292e34;
  font-family: Arial, sans-serif;
  font-size: 27px;
}

.about-news-list time span {
  font-size: 9px;
}

.about-news-list small,
.about-product-news-grid small {
  color: #b27d00;
  font-size: 9px;
  font-weight: 900;
}

.about-news-list h3 {
  margin: 4px 0 6px;
  color: #2a3037;
  font-size: 14px;
}

.about-news-list p {
  margin: 0;
  color: #737c86;
  font-size: 11px;
  line-height: 1.7;
}

.about-news-list article > a {
  display: grid;
  width: 34px;
  height: 34px;
  color: #3d444c;
  background: #f1f2f3;
  border-radius: 50%;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}

.about-legal-intro {
  margin-bottom: 16px;
  padding: 21px 23px;
  background: #fff9de;
  border: 1px solid #eadb99;
  border-radius: 8px;
}

.about-legal-intro strong {
  color: #373117;
  font-size: 14px;
}

.about-legal-intro p {
  margin: 8px 0 0;
  color: #746e54;
  font-size: 11px;
  line-height: 1.75;
}

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

.about-product-news-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  min-height: 204px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 30px 34px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 48%, rgba(255, 228, 91, .95) 0 76px, transparent 77px),
    linear-gradient(120deg, #252a30, #3d444c);
  border-radius: 9px;
}

.about-product-news-hero h3 {
  margin: 8px 0 10px;
  color: #fff;
  font-size: 24px;
}

.about-product-news-hero p {
  max-width: 760px;
  margin: 0 0 18px;
  color: #cbd0d6;
  font-size: 12px;
  line-height: 1.8;
}

.about-product-news-hero a {
  display: inline-flex;
  height: 36px;
  align-items: center;
  padding: 0 16px;
  color: #1c2025;
  background: #ffe45b;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.about-product-news-hero > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 118px;
  height: 118px;
  justify-self: end;
  color: #23282e;
  background: #ffe45b;
  border: 3px solid #fff;
  border-radius: 24px;
  place-items: center;
  font-size: 23px;
  font-weight: 950;
  transform: rotate(-7deg);
}

.about-product-news-grid article > span {
  display: inline-flex;
  min-width: 44px;
  height: 25px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 0 8px;
  color: #272c32;
  background: #ffe45b;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
}

.about-product-news-grid small {
  margin-left: 7px;
}

.about-content-hub :is(a, button):focus-visible {
  outline: 3px solid rgba(255, 214, 50, .42);
  outline-offset: 2px;
}

@keyframes about-detail-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .about-content-layout {
    grid-template-columns: 1fr;
  }

  .about-content-nav {
    position: static;
  }

  .about-content-nav > strong,
  .about-content-nav > div {
    display: none;
  }

  .about-content-nav {
    display: flex;
    overflow-x: auto;
    padding: 8px;
  }

  .about-content-nav > a {
    min-height: 38px;
    flex: 0 0 auto;
    gap: 10px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
  }

  .about-contact-primary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .about-content-hub {
    width: min(100% - 24px, 1500px);
    padding-top: 22px;
  }

  .about-content-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-detail {
    padding: 25px 20px 30px;
  }

  .about-company-hero,
  .about-product-news-hero {
    grid-template-columns: 1fr;
  }

  .about-company-hero > b,
  .about-product-news-hero > span {
    display: none;
  }

  .about-stat-grid,
  .about-info-grid,
  .about-contact-grid,
  .about-legal-grid,
  .about-product-news-grid {
    grid-template-columns: 1fr;
  }

  .about-news-feature {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-news-list article {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .about-news-list article > a {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-detail:target,
  .about-detail.is-active {
    animation: none;
  }
}

/* FINAL: product-category featured cards (v231) */
#categoryMega .print-order-mega-leads {
  display: grid !important;
  align-content: stretch !important;
  gap: 10px !important;
}

#categoryMega .print-order-mega-lead {
  --lead-accent: #e4ad1f;
  --lead-accent-soft: rgba(228, 173, 31, .16);
  --lead-border: #f0dfad;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 22px !important;
  min-height: 72px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 10px 13px 10px 11px !important;
  color: #172033 !important;
  background:
    radial-gradient(circle at 96% 8%, var(--lead-accent-soft), transparent 34%),
    linear-gradient(135deg, #fffdf7 0%, #fff9e8 100%) !important;
  border: 1px solid var(--lead-border) !important;
  border-left: 1px solid var(--lead-border) !important;
  border-radius: 13px !important;
  box-shadow: 0 7px 18px rgba(24, 32, 44, .055) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

#categoryMega .print-order-mega-lead::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  background: var(--lead-accent);
  border-radius: 0 4px 4px 0;
  content: "";
}

#categoryMega .print-order-mega-lead::after {
  display: grid;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--lead-accent);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--lead-border);
  border-radius: 50%;
  content: "›";
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s ease, background-color .18s ease;
}

#categoryMega .print-order-mega-lead.lead-2 {
  --lead-accent: #1fa6ad;
  --lead-accent-soft: rgba(31, 166, 173, .14);
  --lead-border: #cce8e9;
  background:
    radial-gradient(circle at 96% 8%, var(--lead-accent-soft), transparent 34%),
    linear-gradient(135deg, #f9ffff 0%, #eefafa 100%) !important;
}

#categoryMega .print-order-mega-lead.lead-3 {
  --lead-accent: #547fd9;
  --lead-accent-soft: rgba(84, 127, 217, .14);
  --lead-border: #d7e1f4;
  background:
    radial-gradient(circle at 96% 8%, var(--lead-accent-soft), transparent 34%),
    linear-gradient(135deg, #fbfcff 0%, #f0f5ff 100%) !important;
}

#categoryMega .print-order-mega-lead > i {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #202a39 !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid var(--lead-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(26, 34, 47, .06) !important;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
  line-height: 1 !important;
}

#categoryMega .print-order-mega-lead > span {
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
}

#categoryMega .print-order-mega-lead strong {
  overflow: hidden !important;
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#categoryMega .print-order-mega-lead small {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #667386 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#categoryMega .print-order-mega-lead:hover {
  border-color: var(--lead-accent) !important;
  box-shadow: 0 11px 24px rgba(24, 32, 44, .11) !important;
  transform: translateY(-2px) !important;
}

#categoryMega .print-order-mega-lead:hover::after {
  color: #fff;
  background: var(--lead-accent);
  transform: translateX(2px);
}

#categoryMega .print-order-mega-lead:focus-visible {
  outline: 3px solid var(--lead-accent-soft) !important;
  outline-offset: 2px !important;
}

@media (max-width: 760px) {
  #categoryMega .print-order-mega-lead {
    grid-template-columns: 43px minmax(0, 1fr) 20px !important;
    gap: 10px !important;
    padding: 9px 10px !important;
  }

  #categoryMega .print-order-mega-lead > i {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }

  #categoryMega .print-order-mega-lead::after {
    width: 20px;
    height: 20px;
  }
}

/* FINAL: clearer customer order center (v235) */
#allOrders {
  --order-accent: #f2bd19;
  --order-ink: #172033;
  --order-muted: #718096;
  --order-line: #dfe7f0;
  --order-soft: #f6f8fb;
}

#allOrders .order-panel-title {
  margin-bottom: 14px;
  padding: 2px 2px 15px;
  border-bottom: 1px solid #e7edf4;
}

#allOrders .order-panel-title > span {
  padding: 7px 11px;
  color: #667085;
  background: #f7f9fc;
  border: 1px solid #e4eaf1;
  border-radius: 999px;
  font-size: 12px;
}

#allOrders .order-status-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
  padding: 5px;
  overflow-x: auto;
  background: #f3f6fa;
  border: 1px solid #e0e7ef;
  border-radius: 12px;
  scrollbar-width: none;
}

#allOrders .order-status-tabs::-webkit-scrollbar {
  display: none;
}

#allOrders .order-status-tabs button {
  min-width: max-content;
  min-height: 38px;
  flex: 1 0 auto;
  padding: 0 15px;
  border-radius: 9px;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

#allOrders .order-status-tabs button:hover {
  color: #172033;
  background: rgba(255, 255, 255, .68);
}

#allOrders .order-status-tabs button.active {
  color: #172033;
  background: #fff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .09);
}

#allOrders .order-status-tabs button.active::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  background: var(--order-accent);
  border-radius: 50%;
  content: "";
  vertical-align: 2px;
}

#allOrders .order-search-panel {
  padding: 16px;
  background:
    radial-gradient(circle at 96% 0, rgba(255, 216, 61, .09), transparent 26%),
    #fff;
  border: 1px solid #dfe7f0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

#allOrders .order-filter-grid {
  display: block;
  margin: 0;
}

#allOrders .order-filter-primary {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(145px, .55fr) minmax(365px, 1.25fr) 112px 116px;
  gap: 10px;
  align-items: stretch;
}

#allOrders .order-filter-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 5px 12px;
  background: #fbfcfe;
  border: 1px solid #dfe7f0;
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#allOrders .order-filter-grid label:focus-within {
  background: #fff;
  border-color: #e3b61c;
  box-shadow: 0 0 0 3px rgba(242, 189, 25, .13);
}

#allOrders .order-filter-grid label > span {
  color: #526174;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#allOrders .order-filter-grid input,
#allOrders .order-filter-grid select {
  width: 100%;
  min-height: 34px;
  color: #172033;
  font-size: 13px;
  font-weight: 750;
  outline: 0;
}

#allOrders .order-keyword-filter input {
  padding-left: 2px;
}

#allOrders .order-filter-grid .order-date-filter {
  grid-template-columns: auto minmax(96px, 1fr) auto minmax(96px, 1fr);
}

#allOrders .order-filter-grid .order-date-filter input {
  min-width: 96px;
}

#allOrders .order-filter-grid .order-date-filter em,
#allOrders .order-filter-more label:first-child em {
  color: #9aa6b5;
  font-style: normal;
  text-align: center;
}

#allOrders .order-search-button,
#allOrders .order-advanced-toggle {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

#allOrders .order-search-button {
  color: #fff;
  background: #172033;
  border: 1px solid #172033;
  box-shadow: 0 7px 15px rgba(23, 32, 51, .15);
}

#allOrders .order-search-button:hover {
  background: #252f40;
  transform: translateY(-1px);
}

#allOrders .order-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #46566a;
  background: #fff;
  border: 1px solid #dce4ee;
}

#allOrders .order-advanced-toggle:hover,
#allOrders .order-advanced-toggle.is-open,
#allOrders .order-advanced-toggle.has-active-filters {
  color: #6d5200;
  background: #fff9df;
  border-color: #e8c852;
}

#allOrders .order-advanced-toggle b {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  color: #172033;
  background: #ffd83d;
  border-radius: 999px;
  font-size: 11px;
}

#allOrders .order-advanced-toggle b[hidden] {
  display: none !important;
}

#allOrders .order-advanced-toggle i {
  font-size: 14px;
  font-style: normal;
  transition: transform .16s ease;
}

#allOrders .order-advanced-toggle.is-open i {
  transform: rotate(180deg);
}

#allOrders .order-date-presets {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #7c899a;
}

#allOrders .order-date-presets > span {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 800;
}

#allOrders .order-date-presets button {
  min-height: 29px;
  padding: 0 11px;
  color: #5f6d80;
  background: #f7f9fc;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#allOrders .order-date-presets button:hover,
#allOrders .order-date-presets button.active {
  color: #172033;
  background: #fff4ba;
  border-color: #e9c64e;
}

#allOrders .order-filter-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #dbe3ed;
}

#allOrders .order-filter-more[hidden] {
  display: none !important;
}

#allOrders .order-filter-more label:first-child {
  grid-template-columns: auto minmax(108px, 1fr) auto minmax(108px, 1fr);
  grid-column: span 2;
}

#allOrders .order-filter-actions {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin: 14px 0 0;
  padding-top: 14px;
  color: #667085;
  border-top: 1px solid #edf1f5;
}

#allOrders .order-quick-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#allOrders .order-quick-switches label {
  position: relative;
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 0 11px;
  color: #59687b;
  background: #f7f9fc;
  border: 1px solid #e0e7ef;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#allOrders .order-quick-switches label:has(input:checked) {
  color: #172033;
  background: #fff2aa;
  border-color: #e7c23f;
}

#allOrders .order-quick-switches input {
  width: 14px;
  height: 14px;
  accent-color: #172033;
}

#allOrders .order-region-filter {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

#allOrders .order-region-filter > span {
  flex: 0 0 auto;
  color: #7b8797;
  font-size: 12px;
  font-weight: 800;
}

#allOrders .order-region-chips {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

#allOrders .order-region-chips button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

#allOrders .order-filter-tools {
  display: flex;
  gap: 7px;
}

#allOrders .order-filter-tools button {
  min-height: 34px;
  padding: 0 12px;
  color: #536174;
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

#allOrders .order-filter-tools button:hover {
  color: #172033;
  background: #f6f8fb;
  border-color: #bfcbd9;
}

#allOrders .order-filter-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(102px, auto));
  gap: 7px;
}

#allOrders .order-filter-summary > span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  align-content: center;
  padding: 6px 11px;
  color: #8490a0;
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 10px;
}

#allOrders .order-filter-summary strong {
  margin: 0;
  color: #172033;
  font-size: 13px;
  font-weight: 900;
}

#allOrders .order-filter-summary strong b {
  color: #c37800;
  font-size: 15px;
}

#allOrders .order-history-card {
  margin-top: 16px;
  overflow: visible;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055);
}

#allOrders .order-history-card > .panel-title {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #e8edf3;
}

#allOrders .order-history-card > .panel-title > span {
  font-size: 18px;
  font-weight: 950;
}

#allOrders #clearHistoryButton {
  min-height: 34px;
  padding: 0 12px;
  color: #475569;
  background: #f7f9fc;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 850;
}

#allOrders .order-history {
  max-height: none !important;
  overflow: visible !important;
  padding: 14px !important;
}

#allOrders .history-item {
  grid-template-columns: minmax(330px, 1fr) 130px 92px minmax(330px, auto);
  gap: 16px;
  align-items: center;
  padding: 17px;
  border: 1px solid #e0e7ef;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .045);
}

#allOrders .history-item:hover {
  border-color: #e8c34e;
  box-shadow: 0 12px 25px rgba(15, 23, 42, .08);
}

#allOrders .history-order-info {
  display: grid;
  min-width: 0;
  gap: 6px;
}

#allOrders .history-order-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

#allOrders .history-order-heading > strong {
  overflow: hidden;
  color: #111827;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#allOrders .history-order-info > span,
#allOrders .history-order-info > small {
  overflow: hidden;
  margin: 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#allOrders .history-order-info > small {
  color: #8b96a6;
  font-size: 11px;
}

#allOrders .history-order-amount {
  display: grid;
  gap: 3px;
  color: #ef4f2f;
  font-size: 21px;
  text-align: right;
}

#allOrders .history-order-amount > small {
  margin: 0;
  color: #909aaa;
  font-size: 10px;
  font-weight: 750;
}

#allOrders .history-order-status {
  min-width: 86px;
  padding: 7px 10px;
}

#allOrders .history-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

#allOrders .history-actions button {
  min-height: 36px;
  padding: 0 13px;
  color: #344054;
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#allOrders .history-actions :is(.history-detail, .history-batch-toggle) {
  color: #fff;
  background: #172033;
  border-color: #172033;
}

#allOrders .history-actions :is(.history-pay, .history-batch-pay) {
  color: #172033;
  background: #ffd83d;
  border-color: #e7b900;
}

#allOrders .history-actions :is(.history-refund, .history-batch-service) {
  color: #566477;
  background: #f7f9fc;
}

#allOrders .history-order-progress {
  padding-top: 2px;
}

#allOrders .history-order-progress .order-progress-scroll {
  border-radius: 10px;
}

#allOrders .order-history-pagination {
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 52px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 12px 16px 16px;
  padding: 8px 10px;
  color: #718096;
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .035);
  font-size: 12px;
}

#allOrders .order-history-pagination .pagination-total {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  margin-right: 2px;
  color: #657286;
}

#allOrders .order-history-pagination .pagination-total b {
  margin: 0 3px;
  color: #d08a00;
  font-size: 14px;
}

#allOrders .order-history-pages,
#allOrders .order-history-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}

#allOrders .order-history-pages button,
#allOrders .order-history-page-gap {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: #64748b;
  background: #f7f9fc;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
}

#allOrders .order-history-page-numbers button.active {
  color: #172033;
  background: #ffd83d;
  border-color: #e4b700;
  font-weight: 900;
}

#allOrders .order-history-pagination select {
  width: 128px;
  min-height: 34px;
  padding: 0 30px 0 10px;
  color: #475569;
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  font-weight: 800;
}

@media (max-width: 1320px) {
  #allOrders .order-filter-primary {
    grid-template-columns: minmax(220px, 1fr) 145px minmax(310px, 1.2fr) 106px 110px;
  }

  #allOrders .order-filter-actions {
    grid-template-columns: 1fr auto;
  }

  #allOrders .order-filter-summary {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  #allOrders .history-item {
    grid-template-columns: minmax(300px, 1fr) 120px 86px;
  }

  #allOrders .history-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  #allOrders .order-filter-primary,
  #allOrders .order-filter-more {
    grid-template-columns: 1fr;
  }

  #allOrders .order-search-button,
  #allOrders .order-advanced-toggle,
  #allOrders .order-filter-more label:first-child {
    grid-column: auto;
  }

  #allOrders .order-filter-actions {
    grid-template-columns: 1fr;
  }

  #allOrders .order-filter-summary {
    grid-column: auto;
    grid-row: auto;
  }

  #allOrders .order-region-filter {
    align-items: flex-start;
    flex-direction: column;
  }

  #allOrders .history-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #allOrders .history-order-status {
    justify-self: start;
  }

  #allOrders .history-actions,
  #allOrders .history-order-progress {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  #allOrders .order-search-panel {
    padding: 11px;
  }

  #allOrders .order-filter-grid .order-date-filter,
  #allOrders .order-filter-more label:first-child {
    grid-template-columns: 1fr;
  }

  #allOrders .order-filter-grid .order-date-filter > span,
  #allOrders .order-filter-more label:first-child > span {
    margin-bottom: 2px;
  }

  #allOrders .order-filter-grid .order-date-filter em,
  #allOrders .order-filter-more label:first-child em {
    display: none;
  }

  #allOrders .history-item {
    grid-template-columns: 1fr;
  }

  #allOrders .history-order-amount {
    text-align: left;
  }

  #allOrders .history-actions,
  #allOrders .history-order-progress {
    grid-column: 1;
  }

  #allOrders .order-history-pagination {
    width: calc(100% - 24px);
    max-width: none;
    flex-wrap: wrap;
    margin: 10px 12px 14px;
  }
}

@media (max-width: 640px) {
  .quote-request-recent-list {
    grid-template-columns: 1fr;
  }

  .quote-request-recent-head {
    align-items: flex-start;
  }

  .quote-request-product-custom-grid {
    grid-template-columns: 1fr;
  }

  .quote-request-product-field > span {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .quote-request-product-suggestions > button {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .quote-request-product-suggestions > button em {
    grid-column: 2;
    max-width: 100%;
    justify-self: start;
  }

  .quote-request-product-results-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .quote-request-files legend,
  .quote-request-file-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-request-file-toolbar button {
    align-self: flex-start;
  }
}

/* Lightweight quick-product tabs. */
.new-panel .mini-product-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.new-panel .mini-product-tabs button {
  min-height: 31px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #667085;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.new-panel .mini-product-tabs button::after {
  display: none;
}

.new-panel .mini-product-tabs button:hover:not(.active) {
  color: #344054;
  background: #f6f7f9;
}

.new-panel .mini-product-tabs button.active {
  color: #171b21;
  border-color: #efd064;
  background: #fff6c8;
  box-shadow: 0 2px 6px rgba(181, 135, 0, .08);
}

.new-panel .mini-product-tabs button.active:hover {
  background: #ffefad;
  transform: none;
}

.new-panel .mini-product-tabs button:focus-visible {
  outline: 2px solid rgba(255, 203, 44, .35);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .new-panel .mini-product-tabs {
    width: auto;
    max-width: 100%;
  }

  .new-panel .mini-product-tabs button {
    flex: 0 0 auto;
    padding: 0 11px;
  }
}

/* Product detail footer: four real actions, balanced across the full width. */
.product-detail-copy.has-pvc-tabs .detail-actions {
  position: sticky;
  z-index: 12;
  bottom: 0;
  display: grid;
  grid-template-columns:
    minmax(74px, .68fr)
    minmax(116px, 1.18fr)
    minmax(132px, 1.28fr)
    minmax(108px, 1fr);
  gap: 10px;
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .98));
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
  backdrop-filter: blur(10px);
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn {
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: none;
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn[value="cancel"] {
  color: #667085;
  background: #fff;
  border-color: #dfe5ec;
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn[value="cancel"]::before {
  content: "×";
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn-inquiry {
  color: #161a20;
  background: linear-gradient(180deg, #ffe96b 0%, #ffd83d 100%);
  border-color: #e5b900;
  box-shadow: 0 8px 18px rgba(217, 165, 0, .22);
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn-inquiry::before {
  content: "询";
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  background: #1f2937;
  border-radius: 7px;
  font-size: 12px;
}

.product-detail-copy.has-pvc-tabs .detail-actions [data-action="go-upload"] {
  color: #22548a;
  background: #f2f7fd;
  border-color: #cbdced;
}

.product-detail-copy.has-pvc-tabs .detail-actions [data-action="go-upload"]::before {
  content: "↑";
  font-size: 17px;
  font-weight: 900;
}

.product-detail-copy.has-pvc-tabs .detail-actions [data-action="favorite"] {
  color: #6b5320;
  background: #fffaf0;
  border-color: #ead9ab;
}

.product-detail-copy.has-pvc-tabs .detail-actions [data-action="favorite"]::before {
  content: "☆";
  font-size: 17px;
  line-height: 1;
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: #d2ae16;
  box-shadow: 0 9px 18px rgba(15, 23, 42, .1);
}

.product-detail-copy.has-pvc-tabs .detail-actions .detail-btn:focus-visible {
  outline: 3px solid rgba(255, 202, 31, .35);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .product-detail-copy.has-pvc-tabs .detail-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
  }
}

/* Keep slow first-time image requests visually stable. The image fades in only
   after it has decoded, so visitors see a loading surface instead of alt text. */
@keyframes product-image-loading {
  from { transform: translateX(-55%); }
  to { transform: translateX(155%); }
}

.products-section .product-card .product-art.has-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  opacity: 1;
  animation: product-image-loading 1.05s ease-in-out infinite;
  transition: opacity 0.16s ease;
}

.products-section .product-card .product-art.has-image .product-art-main {
  opacity: 0;
}

.products-section .product-card .product-art.has-image.image-loaded::before {
  opacity: 0;
  animation: none;
  pointer-events: none;
}

.products-section .product-card .product-art.has-image.image-loaded .product-art-main {
  opacity: 1;
}

.products-section .product-card .product-art.has-image.image-error::before {
  width: 100%;
  background: linear-gradient(135deg, #eef3f8, #f8fafc);
  opacity: 1;
  animation: none;
}