/*
 * Visual layer derived from the supplied 750 x 1666 final comps.
 * Existing route names, element IDs and business-state selectors stay intact.
 */

:root {
  --ks-red: #ff2e4d;
  --ks-bright-red: #ff2434;
  --promotion-red: rgb(227, 42, 23);
  --ks-blue: #1677ff;
  --ks-ink: #24252b;
  --ks-muted: #8b8e98;
  --ks-line: #eef0f4;
  --ks-canvas: #f6f7fa;
  background: #111;
  color-scheme: light dark;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #111;
}

.app-shell {
  --accent: var(--ks-red);
  --nav-height: 17cqw;
  width: min(100vw, calc(100dvh * 750 / 1666), 430px);
  height: min(100dvh, calc(100vw * 1666 / 750), 955.093px);
  aspect-ratio: 750 / 1666;
  max-width: 430px;
  background: #fff;
  color: var(--ks-ink);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 22px 70px rgb(0 0 0 / 0.34);
}

/* Unified native-style route transitions. The status bar and home indicator
 * live outside .app-view, so they stay visually anchored while pages move. */
.app-shell:not(.pixel-audit).is-route-transitioning {
  touch-action: none;
}

.app-shell:not(.pixel-audit).is-route-transitioning > .app-view {
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter;
}

.app-shell:not(.pixel-audit) > .app-view.route-view-enter-forward {
  z-index: 62;
  animation: route-view-enter-forward 360ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
  box-shadow: -4cqw 0 11cqw rgb(0 0 0 / 0.24);
}

.app-shell:not(.pixel-audit) > .app-view.route-view-leave-forward {
  z-index: 61;
  animation: route-view-leave-forward 360ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.app-shell:not(.pixel-audit) > .app-view.route-view-enter-back {
  z-index: 61;
  animation: route-view-enter-back 360ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.app-shell:not(.pixel-audit) > .app-view.route-view-leave-back {
  z-index: 62;
  animation: route-view-leave-back 360ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
  box-shadow: -4cqw 0 11cqw rgb(0 0 0 / 0.24);
}

/* Product detail -> purchase specification is a bottom sheet, not a page push. */
.app-shell:not(.pixel-audit) > .app-view.route-view-leave-sheet-forward,
.app-shell:not(.pixel-audit) > .app-view.route-view-enter-sheet-back {
  z-index: 61;
}

.app-shell:not(.pixel-audit) > .app-view.route-view-enter-sheet-forward {
  z-index: 62;
  animation: route-view-enter-sheet-forward 400ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.app-shell:not(.pixel-audit) > .app-view.route-view-leave-sheet-back {
  z-index: 62;
  animation: route-view-leave-sheet-back 330ms cubic-bezier(0.4, 0, 1, 1) both;
}

.app-shell:not(.pixel-audit).checkout-sheet-active .spec-reference-live > .spec-sheet {
  box-shadow: 0 -2cqw 7cqw rgb(0 0 0 / 0.16);
}

@keyframes route-view-enter-forward {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes route-view-leave-forward {
  from {
    filter: brightness(1);
    transform: translate3d(0, 0, 0);
  }
  to {
    filter: brightness(0.92);
    transform: translate3d(-22%, 0, 0);
  }
}

@keyframes route-view-enter-back {
  from {
    filter: brightness(0.92);
    transform: translate3d(-22%, 0, 0);
  }
  to {
    filter: brightness(1);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes route-view-leave-back {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(100%, 0, 0); }
}

@keyframes route-view-enter-sheet-forward {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes route-view-leave-sheet-back {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 100%, 0); }
}

.app-shell.route-search.search-keyboard-open {
  width: min(100vw, 430px);
  height: 100dvh;
  aspect-ratio: auto;
}

.global-status-bar {
  display: none;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.67cqw;
  background: transparent url("design/slices/Slice 2@2x(5).png") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/*
 * Runtime pages share the home-video status bar as the single visual source.
 * Pixel-audit mode keeps its supplied full-frame reference unobstructed.
 */
.app-shell:not(.pixel-audit) > .global-status-bar {
  display: block;
}

/*
 * Pixel-reference layer
 * ---------------------
 * The supplied comps are already rasterized at the target 2x density. Keeping
 * them as the visual baseline is the only lossless way to preserve every
 * source pixel (including the video poster, system glyphs and Chinese font
 * rasterization). The semantic controls remain underneath and receive pointer
 * events through this non-interactive layer, so the prototype flow stays live.
 */
.home-view::after,
.search-view::after,
.results-view::after,
.promotion-view::after,
.product-view::after,
.checkout-view::after,
.payment-view::after {
  position: absolute;
  z-index: 50;
  inset: 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  pointer-events: none;
}

.home-view::after { background-image: url("design/references/1.png"); }
.home-view.is-user-video::after { opacity: 0; }
.search-view::after { background-image: url("design/references/2.png"); }
.results-view::after { background-image: url("design/references/3.png"); }
.promotion-view::after { background-image: url("design/references/4.png"); }
.product-view::after { background-image: url("design/references/6.png"); }
.checkout-view::after { background-image: url("design/references/7.png"); }
.payment-view::after { background-image: url("design/references/8.png"); }

.app-shell.route-payment {
  width: min(100vw, calc(100dvh * 750 / 1666), 430px);
  height: min(100dvh, calc(100vw * 1666 / 750), 955.093px);
  aspect-ratio: 750 / 1666;
}

.app-shell.route-payment.payment-success {
  width: min(100vw, calc(100dvh * 750 / 1668), 430px);
  height: min(100dvh, calc(100vw * 1668 / 750), 956.32px);
  aspect-ratio: 750 / 1668;
}

/* Functional transition layers must remain visible above their base comps. */
.checkout-pay-overlay,
.face-payment-overlay,
.payment-success-overlay,
.toast {
  z-index: 70;
}

.commerce-view {
  background: var(--ks-canvas);
  color: var(--ks-ink);
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: var(--ks-red);
  outline-offset: 1px;
}

/* Home */
.home-view {
  --nav-height: 15cqw;
  background: #050505;
  color: #fff;
}

.feed-content {
  bottom: var(--nav-height);
  background: #050505;
}

.feed-video {
  object-fit: cover;
}

.home-view.is-landscape-video .feed-content {
  background: rgb(48 51 44);
}

.home-view.is-landscape-video .feed-video {
  inset: 47.962963cqw 0 auto;
  height: auto;
  object-fit: contain;
}

.home-view.is-landscape-video .fullscreen-button {
  top: 126.111111cqw;
  left: 37.222222cqw;
  width: 25.555556cqw;
  min-width: 0;
  height: 9.166667cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-view.is-landscape-video .fullscreen-button:active {
  transform: scale(0.98);
}

.fullscreen-button-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.dynamic-island {
  display: none;
}

.status-bar {
  height: 10.67cqw;
  font-size: 3.6cqw;
}

.home-view .status-bar {
  display: none;
}

.status-time {
  top: 3.9cqw;
  left: 6.7cqw;
}

.system-status {
  top: 3.3cqw;
  right: 5.5cqw;
  gap: 1.2cqw;
}

.top-chrome {
  height: 25cqw;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.28), transparent);
}

.top-tools {
  inset: 9.3cqw 0 auto;
  align-items: center;
  padding: 0 4.5cqw 0 2cqw;
}

.home-menu-button {
  position: relative;
  display: grid;
  width: 10cqw;
  height: 10cqw;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
}

.top-tools .tool-button {
  position: absolute;
  right: 4.5cqw;
  width: 9cqw;
  height: 9cqw;
  border: 0;
  background: transparent;
}

.menu-icon-image {
  display: block;
  width: 5.6cqw;
  height: 4.2cqw;
  object-fit: contain;
}

.menu-notification-badge {
  position: absolute;
  top: 0;
  right: -0.8cqw;
  display: grid;
  width: 4.8cqw;
  height: 4.8cqw;
  place-items: center;
  border-radius: 50%;
  background: var(--ks-red);
  color: #fff;
  font-size: 3.25cqw;
  font-weight: 500;
  line-height: 1;
}

.search-icon-image {
  display: block;
  width: 5.6cqw;
  height: 5.6cqw;
  object-fit: contain;
}

.top-tools .search-icon {
  width: 6.4cqw;
  height: 6.4cqw;
  border-width: 0.7cqw;
}

.top-tools .search-icon::after {
  width: 3.2cqw;
  height: 0.7cqw;
}

.action-rail {
  right: 3cqw;
  bottom: 11cqw;
  gap: 5cqw;
}

.profile-action,
.music-disc {
  width: 11.7cqw;
  height: 11.7cqw;
}

.profile-action {
  height: 14.4cqw;
}

.profile-action .profile-avatar-photo {
  position: absolute;
  top: 0.67cqw;
  left: 0.67cqw;
  width: 10.93cqw;
  height: 10.93cqw;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
}

.profile-action .profile-avatar-frame {
  position: absolute;
  inset: 0;
  width: 12.27cqw;
  height: 14.4cqw;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.profile-action .follow-badge {
  opacity: 0;
}

.rail-icon-image {
  display: block;
  width: 9.2cqw;
  height: 9.2cqw;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: none;
  transform: none;
}

.heart-burst img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.music-disc {
  background: #171717;
}

.music-disc img {
  width: 7.1cqw;
  height: 7.1cqw;
  border-radius: 50%;
  object-fit: cover;
  animation: none;
}

.rail-icon {
  font-size: 10cqw;
}

.rail-count {
  font-size: 3.55cqw;
  font-weight: 550;
}

.video-meta {
  right: 18cqw;
  bottom: 11cqw;
  left: 3cqw;
}

.author {
  font-size: 4.3cqw;
}

.description {
  display: block;
  max-height: 3.1em;
  overflow: hidden;
  padding-right: 0;
  font-size: 3.75cqw;
  line-height: 1.55;
}

.description #descriptionText {
  display: inline;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.expand-label,
.description.is-expanded .expand-label {
  position: static;
  display: inline;
  min-width: auto;
  margin-left: 1cqw;
  padding: 0;
  background: transparent;
  color: #fff;
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
}

.description.is-expanded {
  max-height: none;
  overflow: visible;
}

.bottom-nav {
  height: var(--nav-height);
  align-items: center;
  padding-bottom: max(1cqw, env(safe-area-inset-bottom));
  background: #030303;
  border-top-color: rgb(255 255 255 / 0.09);
}

.bottom-nav .nav-item {
  display: grid;
  height: 100%;
  padding: 0;
  place-items: center;
  font-size: 4.3cqw;
  color: #7c7c80;
}

.bottom-nav .nav-item.is-active {
  color: #f2f2f2;
}

.create-button {
  width: 11cqw;
  height: 11cqw;
  align-self: center;
  margin-top: 0;
  border: 0;
  background: transparent;
}

.message-badge {
  top: 1.4cqw;
  right: auto;
  left: calc(50% + 2.7cqw);
}

.create-button img {
  display: block;
  width: 8.8cqw;
  height: 8.8cqw;
  object-fit: contain;
}

/* Configuration entry stays functional but now shares the commerce palette. */
.setup-view {
  background: #f5f6f8;
}

.setup-header {
  padding: 11cqw 5cqw 7cqw;
  border: 0;
  background: linear-gradient(145deg, #fff 0%, #fff 62%, #f2f5ff 100%);
}

.setup-kicker {
  color: var(--ks-red);
}

.setup-header h1 {
  font-size: 6.4cqw;
}

.setup-form {
  gap: 2cqw;
  padding-top: 2cqw;
}

.setup-form.is-official .form-section:first-of-type,
.setup-form.is-official [data-custom-field] {
  opacity: 0.5;
  pointer-events: none;
}

.setup-form.is-official .merchant-section .form-section-heading {
  opacity: 0.5;
}

.subsidy-summary {
  margin: -0.5cqw 0 0;
  color: #66686d;
}

.subsidy-summary.is-invalid {
  color: #c91f46;
}

.official-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2.2cqw;
  margin-top: 3cqw;
  padding: 3cqw;
  border: 1px solid #e0e2e7;
  border-radius: 2cqw;
  background: #fff;
  color: #2f3034;
  font-size: 3.4cqw;
  cursor: pointer;
}

.official-toggle input {
  width: 4.8cqw;
  height: 4.8cqw;
  accent-color: var(--ks-red);
}

.form-section {
  border-color: #eceef2;
}

.section-index {
  border-radius: 50%;
  background: var(--ks-red);
}

.field-block > input,
.field-block > textarea,
.money-input {
  border-color: #e0e2e7;
  border-radius: 2.4cqw;
  background: #f8f9fb;
}

.primary-action {
  border-radius: 2cqw;
  background: var(--ks-red);
}

/* Shared search chrome and exact status-bar slices. */
.search-view::before,
.results-view::before {
  display: block;
  width: 100%;
  height: 10.67cqw;
  flex: none;
  background: #fff url("design/slices/Slice 2@2x(5).png") center / 100% 100% no-repeat;
  content: "";
}

.results-view::before {
  background: #fff url("design/references/3.png") top center / 100% auto no-repeat;
}

.commerce-search-header {
  min-height: 14cqw;
  grid-template-columns: 9cqw minmax(0, 1fr) 12cqw;
  gap: 1.5cqw;
  padding: 1.2cqw 3.2cqw 1.7cqw;
  background: #fff;
}

.sticky-header {
  top: 0;
}

.back-button {
  width: 8cqw;
  height: 10cqw;
  padding: 0;
}

.search-view .back-button img {
  display: block;
  width: 2.4cqw;
  height: 4.27cqw;
  object-fit: contain;
}

.results-view .back-button img {
  display: block;
  width: 2.4cqw;
  height: 4.27cqw;
  object-fit: contain;
}

.route-search-form {
  height: 10.5cqw;
  grid-template-columns: 6.5cqw minmax(0, 1fr) 7cqw;
  border-radius: 2.7cqw;
  background: #f1f2f5;
}

.search-view .route-search-form {
  grid-template-columns: minmax(0, 1fr) 8cqw;
}

.results-view .commerce-search-header {
  min-height: 13.33cqw;
  grid-template-columns: 5cqw minmax(0, 1fr) 10cqw;
  gap: 1.5cqw;
  padding: 0.8cqw 3.8cqw 1.2cqw;
}

.results-view .back-button {
  width: 5cqw;
  height: 9.33cqw;
}

.results-view .search-submit-button {
  min-width: 10cqw;
}

.results-view .route-search-form {
  height: 9.33cqw;
  grid-template-columns: minmax(0, 1fr) 7.5cqw;
}

.route-search-form input {
  font-size: 3.9cqw;
}

.search-view .route-search-form input {
  padding-left: 3cqw;
}

.results-view .route-search-form input {
  padding: 0 1cqw 0 3cqw;
}

.input-search-mark {
  width: 4.5cqw;
  height: 4.5cqw;
  margin-left: 2cqw;
  color: #999;
}

.scan-button {
  width: 8cqw;
  height: 10.5cqw;
}

.results-view .clear-search-button img {
  display: block;
  width: 4.27cqw;
  height: 4.27cqw;
  object-fit: contain;
}

.search-view .scan-button img {
  display: block;
  width: 5.33cqw;
  height: 4.8cqw;
  object-fit: contain;
}

.search-submit-button {
  min-width: 12cqw;
  font-size: 3.9cqw;
  font-weight: 700;
}

.search-inline-error:not(:empty) {
  padding-top: 0;
}

.search-history,
.discovery-section {
  padding: 4cqw 4.8cqw 3cqw;
  background: #fff;
}

.search-section-title,
.discovery-heading {
  display: flex;
  align-items: center;
  gap: 6cqw;
}

.search-section-title h1,
.discovery-heading h1 {
  margin: 0;
  color: #26272c;
  font-size: 3.8cqw;
  font-weight: 700;
}

.search-section-title button,
.discovery-heading button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a4a6ab;
  font-size: 3.5cqw;
}

.search-section-title button {
  display: grid;
  width: 7cqw;
  height: 7cqw;
  place-items: center;
}

.search-section-title button img {
  display: block;
  width: 2.93cqw;
  height: 2.93cqw;
  object-fit: contain;
}

.discovery-heading button {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  white-space: nowrap;
}

.discovery-heading button img {
  display: block;
  width: 6.4cqw;
  height: 4cqw;
  object-fit: contain;
}

.discovery-heading > span {
  color: #9d9fa4;
  font-size: 3.5cqw;
}

.history-grid,
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2cqw 5cqw;
  margin-top: 3.7cqw;
}

.history-grid button,
.discovery-grid button {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #292a2f;
  font-size: 3.9cqw;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-grid button:first-child,
.discovery-grid button:nth-child(2) {
  color: var(--ks-red);
}

.search-tabs,
.result-tabs {
  min-height: 11cqw;
  gap: 5.7cqw;
  padding: 0 4.8cqw;
  border: 0;
  background: #fff;
}

.search-tabs button,
.result-tabs button {
  height: 11cqw;
  font-size: 3.45cqw;
}

.search-tabs button.is-active {
  color: #ff5a43;
}

@media (min-width: 400px) and (max-width: 420px) {
  #appShell.route-search:not(.pixel-audit) .search-tabs {
    justify-content: space-between;
    gap: 0;
  }
}

.hot-tab-flame {
  display: inline-block;
  margin-right: 0.35cqw;
  font-size: 3.5cqw;
  line-height: 1;
  vertical-align: -0.25cqw;
}

.hot-list {
  margin: 0;
  padding: 2cqw 4.8cqw 8cqw;
  border-radius: 0;
  background: #fff;
}

.hot-lead {
  min-height: 11cqw;
  align-items: center;
  margin: 0 0 1.5cqw;
  padding: 0 2.5cqw;
  border: 1px solid #dce8ff;
  border-radius: 2.2cqw;
  background: linear-gradient(90deg, #f5f8ff, #fff);
  font-size: 3.8cqw;
}

.hot-lead b {
  color: #4d88ff;
  font-size: 5.3cqw;
}

.hot-list ol {
  gap: 1.4cqw;
}

.hot-list li {
  min-height: 9.2cqw;
  grid-template-columns: 6cqw minmax(0, 1fr) auto;
  padding: 0 2.5cqw;
  border-radius: 2cqw;
  background: linear-gradient(90deg, #f8f9fc, #fff 75%);
  font-size: 3.65cqw;
}

.hot-list li:nth-child(-n+3) {
  border: 1px solid #ffe1dc;
  background: linear-gradient(90deg, #fff7f5, #fff);
}

.hot-list li b {
  font-size: 4.6cqw;
  font-style: italic;
}

.hot-list li em {
  font-size: 3cqw;
}

.rank-tag-image {
  display: inline-block;
  width: 3.73cqw;
  height: 3.73cqw;
  margin-left: 0.5cqw;
  object-fit: contain;
  vertical-align: -0.8cqw;
}

.rank-hot-image {
  width: 3.73cqw;
  height: 3.73cqw;
}

.search-floating-actions {
  position: sticky;
  z-index: 6;
  top: calc(100% - 22cqw);
  height: 0;
  pointer-events: none;
}

.search-floating-actions button {
  position: absolute;
  top: 0;
  display: grid;
  padding: 0;
  border: 0;
  background: transparent;
  place-items: center;
  pointer-events: auto;
}

.voice-search-button {
  left: 50%;
  width: 28.27cqw;
  height: 10.13cqw;
  transform: translateX(-50%);
}

.search-ai-button {
  right: 4.67cqw;
  width: 10.67cqw;
  height: 10.4cqw;
}

.search-floating-actions img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Search results */
.results-view {
  background: #fff;
}

.results-view .result-tabs {
  min-height: 9.6cqw;
  top: 13.33cqw;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) 8cqw;
  gap: 0;
  padding: 0 3.8cqw;
  border-bottom: 1px solid #e9e9eb;
  overflow: hidden;
}

.results-view .result-tabs button {
  width: 100%;
  height: 9.6cqw;
  min-width: 0;
}

.results-view .result-tabs .result-filter-button {
  display: grid;
  place-items: center;
}

.result-filter-button img {
  display: block;
  width: 5.33cqw;
  height: 5.33cqw;
  object-fit: contain;
}

.results-content {
  padding: 0 0 max(5cqw, env(safe-area-inset-bottom));
  background: #f7f8fa;
}

.promotion-banner {
  width: 100%;
  aspect-ratio: 750 / 222;
  margin: 3.5cqw 0 8.5cqw;
  border-radius: 0;
  background: #fff;
}

.results-summary {
  display: none;
}

.product-grid {
  display: block;
  padding: 0 0.9cqw;
  column-count: 2;
  column-gap: 1.2cqw;
  background: #f1f2f4;
}

.waterfall-card {
  display: inline-block;
  width: 100%;
  min-width: 0;
  margin: 0 0 1.2cqw;
  padding: 0;
  overflow: hidden;
  break-inside: avoid;
  border: 0;
  border-radius: 1.1cqw;
  background: #fff;
  color: #25262a;
  text-align: left;
  vertical-align: top;
}

.waterfall-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--waterfall-aspect, 0.72);
  overflow: hidden;
  background: #e7e7e8;
}

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

.waterfall-media::after {
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.58));
  content: "";
  pointer-events: none;
}

.waterfall-caption {
  position: absolute;
  z-index: 1;
  right: 2.4cqw;
  bottom: 2.2cqw;
  left: 2.4cqw;
  display: -webkit-box;
  max-height: 12.6cqw;
  overflow: hidden;
  color: #fff;
  font-size: 3.35cqw;
  font-weight: 650;
  line-height: 1.38;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.waterfall-duration {
  position: absolute;
  z-index: 2;
  top: 2cqw;
  right: 2cqw;
  padding: 0.4cqw 1cqw;
  border-radius: 0.8cqw;
  background: rgb(0 0 0 / 0.42);
  color: #fff;
  font-size: 3cqw;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.waterfall-footer {
  display: flex;
  min-height: 11cqw;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
  padding: 2cqw 2.4cqw;
  background: #fff;
}

.waterfall-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.7cqw;
}

.waterfall-avatar {
  flex: none;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: #dedfe2;
  object-fit: cover;
}

.waterfall-identity {
  display: grid;
  min-width: 0;
  gap: 0.2cqw;
}

.waterfall-identity strong {
  max-width: 22cqw;
  overflow: hidden;
  color: #66686e;
  font-size: 3.2cqw;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waterfall-identity small {
  color: #aaa;
  font-size: 2.75cqw;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.waterfall-likes {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 1cqw;
  color: #676970;
  font-size: 3.1cqw;
  font-variant-numeric: tabular-nums;
}

.waterfall-likes img {
  display: block;
  width: 4.27cqw;
  height: 4.27cqw;
  object-fit: contain;
}

.waterfall-card:active {
  transform: scale(0.995);
}

.product-card {
  padding: 0 0 2.6cqw;
  border-radius: 1cqw;
  background: #fff;
}

.product-card img {
  aspect-ratio: 0.77;
  object-fit: cover;
}

.product-card-copy {
  padding: 2cqw 2.4cqw 0;
}

.product-card h2 {
  min-height: 9.8cqw;
  font-size: 3.35cqw;
  line-height: 1.42;
}

.product-card-price {
  margin-top: 1.5cqw;
}

.product-card-price strong {
  font-size: 4.3cqw;
}

.product-card-sales {
  font-size: 2.6cqw;
}

/* Subsidy activity */
.promotion-view {
  background: #fff;
}

.promotion-hero {
  --promotion-flash-overlap: 1cqw;
  --promotion-flash-mask-overhang: 2cqw;
  --promotion-flash-video-lift: 1.2cqw;
  position: relative;
  min-height: 0;
  padding: 10.67cqw 2.4cqw 0;
  overflow: hidden;
  background: var(--promotion-red);
}

.promotion-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 10.67cqw;
  background: url("design/slices/Slice 2@2x(3).png") center / 100% 100% no-repeat;
  content: "";
}

.promotion-topbar {
  min-height: 11.2cqw;
  grid-template-columns: 7cqw auto minmax(0, 1fr) 7cqw;
  gap: 1.5cqw;
}

.promotion-back,
.promotion-share {
  width: 7cqw;
  height: 10cqw;
  font-size: 0;
}

.promotion-back img,
.promotion-share img {
  display: block;
  width: 5.87cqw;
  height: 5.87cqw;
  object-fit: contain;
}

.promotion-topbar strong {
  font-size: 6cqw;
  font-weight: 800;
}

.promotion-search {
  height: 9.73cqw;
  gap: 1.4cqw;
  padding: 0 3cqw;
  border-radius: 4cqw;
  font-size: 3.4cqw;
}

.promotion-search img {
  display: block;
  flex: none;
  width: 5.87cqw;
  height: 5.87cqw;
  object-fit: contain;
}

.promotion-flash-media {
  position: relative;
  z-index: 45;
  width: calc(100% + 4.8cqw);
  height: 13.75cqw;
  margin: 0 -2.4cqw;
  background: var(--promotion-red);
}

.promotion-flash-media::before {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--promotion-flash-mask-overhang));
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--promotion-red);
  content: "";
  pointer-events: none;
}

.promotion-flash-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--promotion-red);
  object-fit: contain;
  transform: translateY(calc(-1 * var(--promotion-flash-video-lift)));
}

.flash-sale-card {
  height: 41.73cqw;
  min-height: 41.73cqw;
  padding: 2.3cqw 2.4cqw 2.6cqw;
  border-radius: 2cqw;
  background: #fff;
  color: #292a30;
}

.flash-sale-card header {
  display: grid;
  grid-template-columns: auto 1fr repeat(3, auto);
  gap: 5.8cqw;
  align-items: center;
  margin-right: 2.4cqw;
}

.flash-sale-card header strong {
  font-size: 3.9cqw;
}

.flash-sale-card header span,
.flash-sale-card header b {
  color: #7e8491;
  font-size: 3.3cqw;
  font-weight: 500;
  white-space: nowrap;
}

.flash-sale-card header b {
  position: relative;
  color: #f23139;
  font-size: 4.3cqw;
}

.flash-sale-card header > b::after {
  position: absolute;
  right: 20%;
  bottom: -1.8cqw;
  left: 20%;
  height: 0.8cqw;
  border-radius: 999px;
  background: #f23139;
  content: "";
}

.flash-countdown-label {
  margin-left: -2.7cqw;
}

.flash-sale-card header .flash-countdown-label b {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.flash-sale-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5cqw;
  margin-top: 3.6cqw;
}

.flash-sale-item {
  display: grid;
  min-height: 29.15cqw;
  align-content: start;
  justify-items: center;
  gap: 0.6cqw;
}

.flash-sale-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.flash-sale-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flash-product-badge {
  padding: 0.5cqw 1.2cqw;
  border-radius: 0.7cqw;
  background: #ffe6cb;
  color: #954410;
  font-size: 2.6cqw;
  font-weight: 700;
  white-space: nowrap;
}

.flash-sale-products b {
  margin-top: 0.75cqw;
  color: #f03338;
  font-size: 3.7cqw;
}

.promotion-hero > .promotion-guarantee {
  display: grid;
  min-height: 10.67cqw;
  grid-template-columns: auto minmax(0, 1fr) 2.4cqw;
  align-items: center;
  gap: 1.3cqw;
  margin: 0;
  padding: 0 1cqw;
  color: #fff;
  font-size: 3cqw;
  font-weight: 500;
}

.promotion-guarantee b {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 3.9cqw;
  white-space: nowrap;
}

.promotion-guarantee b img {
  display: block;
  width: 5.33cqw;
  height: 5.33cqw;
  object-fit: contain;
}

.promotion-guarantee span {
  overflow: hidden;
  color: #ffd7d8;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-guarantee-arrow {
  display: block;
  width: 2.4cqw;
  height: 3.73cqw;
  object-fit: contain;
}

.promotion-tabs {
  height: 12cqw;
  gap: 2.6cqw;
  padding: 0 3.2cqw;
  border-radius: 3cqw 3cqw 0 0;
  box-shadow: 0 -1px 0 rgb(0 0 0 / 0.02);
}

.promotion-tabs button {
  height: 12cqw;
  font-size: 3.7cqw;
}

.promotion-tabs button img {
  display: block;
  width: auto;
  height: 4.8cqw;
  object-fit: contain;
}

.promotion-list {
  gap: 2.4cqw;
  padding: 0 3.8cqw max(7cqw, env(safe-area-inset-bottom));
  background: #fff;
}

.promotion-product {
  grid-template-columns: 39.6cqw minmax(0, 1fr);
  gap: 2.4cqw;
  border-radius: 0;
}

.promotion-product > img {
  width: 39.6cqw;
  height: 39.6cqw;
  border-radius: 1.3cqw;
}

.promotion-product-copy {
  padding: 1.2cqw 0 1cqw;
}

.promotion-product h2 {
  min-height: 10.6cqw;
  margin: 1.1cqw 0 0.8cqw;
  font-size: 3.7cqw;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.promotion-product-brand {
  color: #cf8e1b;
  font-weight: 600;
}

.promotion-labels,
.promotion-perks {
  flex-wrap: nowrap;
  gap: 0.7cqw;
}

.promotion-label-image,
.promotion-perk-image {
  display: block;
  width: auto;
  height: 5.33cqw;
  object-fit: contain;
}

.promotion-perk-image {
  height: 5.07cqw;
}

.promotion-rating {
  margin: 0.7cqw 0 0;
  overflow: hidden;
  color: #c98227;
  font-size: 3.35cqw;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-price {
  display: flex;
  align-items: baseline;
  gap: 0.7cqw;
  margin-top: auto;
  white-space: nowrap;
}

.promotion-price span {
  font-size: 3.8cqw;
}

.promotion-price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 5.2cqw;
  line-height: 1;
}

.promotion-price strong .spec-price-major {
  font-size: 5.2cqw;
}

.promotion-price strong .spec-price-minor {
  font-size: 3.8cqw;
}

.promotion-price.is-long-price {
  gap: 0.4cqw;
}

.promotion-price.is-long-price span {
  font-size: 3.3cqw;
}

.promotion-price.is-long-price strong {
  font-size: 4cqw;
}

.promotion-price.is-long-price strong .spec-price-major {
  font-size: 4cqw;
}

.promotion-price.is-long-price strong .spec-price-minor {
  font-size: 3.3cqw;
}

.promotion-price.is-long-price .promotion-subsidy {
  padding-right: 0.8cqw;
  padding-left: 0.8cqw;
  font-size: 2.7cqw;
}

.promotion-subsidy {
  padding: 0.35cqw 1.3cqw;
  border-radius: 999px;
  background: #fff1f3;
  color: #ef3947;
  font-size: 3.1cqw;
  font-style: normal;
  font-weight: 650;
}

.promotion-meta {
  font-size: 3.25cqw;
  line-height: 1.2;
}

/* Product detail */
.product-view {
  background: #f4f5f7;
}

.app-shell.route-product .product-view::before,
.app-shell.route-product .product-view::after {
  position: absolute;
  top: 3.2cqw;
  z-index: 8;
  color: #30343b;
  font-size: 3.6cqw;
  font-weight: 650;
  text-shadow: 0 1px 2px rgb(255 255 255 / 0.45);
  pointer-events: none;
}

.app-shell.route-product .product-view::before {
  left: 6.5cqw;
  content: "12:57";
}

.app-shell.route-product .product-view::after {
  right: 5cqw;
  content: none;
  font-size: 3cqw;
}

.product-topbar {
  top: 12cqw;
  grid-template-columns: 9cqw minmax(0, 1fr) auto;
}

.product-top-actions {
  display: flex;
  gap: 2cqw;
}

.product-like-button {
  font-size: 5.5cqw;
}

.round-icon-button {
  width: 9cqw;
  height: 9cqw;
  background: rgb(30 32 37 / 0.68);
  font-size: 7cqw;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.product-gallery {
  height: 111cqw;
  aspect-ratio: auto;
  background: #e9eef5;
}

.product-gallery > img {
  object-fit: cover;
}

.recent-order-toast {
  position: absolute;
  top: 28cqw;
  left: 3cqw;
  margin: 0;
  padding: 1.5cqw 2.5cqw;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.86);
  color: #5c6675;
  font-size: 3.2cqw;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.explain-chip {
  position: absolute;
  right: 3.2cqw;
  top: 47cqw;
  display: grid;
  width: 15cqw;
  min-height: 20cqw;
  place-content: center;
  gap: 1.5cqw;
  border: 0;
  border-radius: 3cqw;
  background: rgb(255 255 255 / 0.8);
  color: #30343b;
  font-size: 3.2cqw;
  text-align: center;
}

.explain-chip span {
  display: grid;
  width: 7.2cqw;
  height: 7.2cqw;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  background: #f52f3d;
  color: #fff;
}

.find-similar {
  position: absolute;
  bottom: 4cqw;
  left: 3cqw;
  padding: 1.5cqw 2.4cqw;
  border-radius: 999px;
  background: rgb(67 69 74 / 0.58);
  color: #fff;
  font-size: 3.1cqw;
}

.gallery-tabs {
  position: absolute;
  right: 5cqw;
  bottom: 4cqw;
  display: flex;
  gap: 2.4cqw;
  align-items: center;
  padding: 1.2cqw 2.2cqw;
  border-radius: 999px;
  background: rgb(67 69 74 / 0.58);
  color: #e5e7ea;
  font-size: 3.05cqw;
}

.gallery-tabs b {
  color: #fff;
  font-weight: 700;
}

.gallery-count {
  right: 3cqw;
  bottom: 4cqw;
  background: transparent;
  transform: translateX(0);
}

.gallery-tabs + .gallery-count {
  right: 2cqw;
}

.product-event-strip {
  display: flex;
  min-height: 17cqw;
  align-items: center;
  justify-content: flex-end;
  gap: 4cqw;
  padding: 0 4cqw;
  background: linear-gradient(135deg, #ff2028, #f43a2e);
  color: #fff;
}

.product-event-strip strong {
  font-size: 4.5cqw;
}

.product-event-strip span {
  font-size: 3.5cqw;
}

.product-info-block {
  margin-top: 0;
  padding: 4cqw 4cqw 3.5cqw;
}

.product-info-block h1 {
  font-size: 4cqw;
  line-height: 1.55;
}

.detail-price-row strong {
  font-size: 7cqw;
}

.detail-tags span {
  border-radius: 1cqw;
  background: #e8f8f3;
  color: #00a77c;
}

.shop-block {
  margin-top: 0;
  border-top: 1px solid var(--ks-line);
}

.service-strip {
  margin-top: 0;
  border-top: 1px solid var(--ks-line);
}

.purchase-bar {
  min-height: calc(16cqw + env(safe-area-inset-bottom));
  grid-template-columns: 12cqw 12cqw 18cqw minmax(0, 1fr);
  gap: 1cqw;
}

.purchase-bar .cart-button {
  background: #ffe9ec;
  color: #ef324d;
}

.purchase-bar .buy-button {
  border-radius: 2cqw;
  background: #f83236;
}

/* Checkout */
.checkout-view {
  background: #f5f6f9;
}

.checkout-header {
  min-height: 24.7cqw;
  padding: 11cqw 3cqw 2cqw;
  align-items: center;
}

.checkout-header::before {
  position: absolute;
  inset: 0 0 auto;
  height: 10.67cqw;
  background: url("design/slices/Slice 2@2x(2).png") center / 100% 100% no-repeat;
  content: "";
}

.checkout-header h1 {
  font-size: 4.4cqw;
  font-weight: 650;
}

.checkout-header-button,
.checkout-header-actions button {
  display: grid;
  place-items: center;
}

.checkout-header-button img {
  width: 3.2cqw;
  height: 5.6cqw;
  object-fit: contain;
}

.checkout-header-actions button:first-child img {
  width: 5.9cqw;
  height: 5.6cqw;
  object-fit: contain;
}

.checkout-header-actions .checkout-more-button {
  position: relative;
}

.checkout-header-actions .checkout-more-button img {
  width: 5.9cqw;
  height: 1.9cqw;
  object-fit: contain;
}

.checkout-header-actions .checkout-more-button span {
  position: absolute;
  top: 0.2cqw;
  right: 0.3cqw;
  width: 1.7cqw;
  height: 1.7cqw;
  border: 0.5cqw solid #fff;
  border-radius: 50%;
  background: #f63742;
}

.checkout-scroll {
  inset: 24.7cqw 0 16.5cqw;
}

.checkout-delivery-band {
  gap: 2.2cqw;
  padding: 2.7cqw 4cqw 3.5cqw;
}

.checkout-delivery-row,
.checkout-address-row {
  grid-template-columns: 5.5cqw minmax(0, 1fr) auto;
  gap: 1.5cqw;
}

.checkout-delivery-row > img,
.checkout-address-row > img {
  display: block;
  width: 4.8cqw;
  height: 4.8cqw;
  margin-top: 0.3cqw;
  object-fit: contain;
}

.checkout-delivery-row strong,
.checkout-address-row strong {
  font-size: 3.5cqw;
  font-weight: 550;
}

.checkout-address-row small {
  margin-top: 0.5cqw;
  color: #7a8191;
  font-size: 3cqw;
  font-weight: 500;
}

.checkout-address-row button {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding-top: 0.3cqw;
  color: #f0444e;
  font-size: 3.3cqw;
  white-space: nowrap;
}

.checkout-address-row button img {
  width: 2.4cqw;
  height: 3.7cqw;
  object-fit: contain;
}

.checkout-order-band {
  margin-top: 1.7cqw;
}

.checkout-store-row {
  min-height: 15cqw;
}

.checkout-store-mark {
  display: block;
  width: 9.9cqw;
  height: 9.9cqw;
  border: 1px solid #ff4051;
  border-radius: 2cqw;
  background: #fff;
  object-fit: cover;
}

.checkout-store-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1cqw;
}

.checkout-store-name strong {
  min-width: 0;
}

.checkout-store-name img {
  width: 12.5cqw;
  height: 4.3cqw;
  flex: 0 0 auto;
  object-fit: contain;
}

.checkout-store-row small {
  color: #778094;
  font-size: 3cqw;
}

.checkout-store-row button {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  color: #737b8c;
  font-size: 3.3cqw;
  white-space: nowrap;
}

.checkout-store-row button img {
  width: 2.4cqw;
  height: 3.7cqw;
  object-fit: contain;
}

.checkout-product-row {
  grid-template-columns: 22cqw minmax(0, 1fr) auto;
  gap: 2cqw;
  padding: 3cqw 0 2cqw;
}

.checkout-product-row > img {
  width: 22cqw;
  height: 22cqw;
}

.checkout-product-copy h2 {
  display: -webkit-box;
  min-height: 10.4cqw;
  font-size: 3.5cqw;
  font-weight: 550;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.checkout-product-copy h2::before {
  content: none;
}

.checkout-product-copy h2 img {
  display: inline-block;
  width: 8.3cqw;
  height: 3.8cqw;
  margin: 0 0.8cqw 0.4cqw 0;
  vertical-align: middle;
  object-fit: contain;
}

.checkout-product-copy p {
  margin: 0.8cqw 0 1.1cqw;
  color: #788095;
  font-size: 3cqw;
}

.checkout-product-perks {
  display: block;
}

.checkout-product-perks img {
  display: block;
  width: min(100%, 60.8cqw);
  height: auto;
}

.checkout-product-price strong {
  font-size: 3.7cqw;
}

.checkout-cart-action {
  min-width: 20cqw;
  height: 8.8cqw;
  margin-bottom: 1.5cqw;
  border-radius: 1.8cqw;
  color: #39404d;
  font-size: 3.2cqw;
}

.checkout-price-list,
.checkout-order-meta {
  gap: 3.3cqw;
  padding: 3.3cqw 0;
}

.checkout-price-list dt,
.checkout-order-meta dt {
  color: #6f788b;
  font-size: 3.3cqw;
}

.checkout-price-list dd,
.checkout-order-meta dd {
  font-size: 3.3cqw;
}

.checkout-due-row dt,
.checkout-order-meta dd {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
}

.checkout-due-row dt img {
  width: 3.4cqw;
  height: 3.2cqw;
  object-fit: contain;
}

.checkout-due-row dd {
  font-size: 4.8cqw;
}

.checkout-order-meta dd img {
  width: 3cqw;
  height: 2cqw;
  object-fit: contain;
}

.checkout-contact {
  display: flex;
  height: 11cqw;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  color: #70798b;
  font-size: 3.2cqw;
}

.checkout-contact img {
  width: 4.8cqw;
  height: 4.8cqw;
  object-fit: contain;
}

.checkout-service-band,
.checkout-help-band {
  margin-top: 1.7cqw;
}

.checkout-service-band {
  position: relative;
  padding: 4cqw;
}

.checkout-service-band h2 {
  margin-bottom: 2.7cqw;
  font-size: 3.8cqw;
}

.checkout-service-band h2 img {
  position: absolute;
  top: 0;
  right: 0;
  width: 13.3cqw;
  height: 11.7cqw;
  object-fit: contain;
}

.checkout-service-band > div {
  min-height: 8cqw;
  color: #6f788a;
  font-size: 3.2cqw;
}

.checkout-service-band > div small {
  color: #a0a5af;
  font-size: 2.8cqw;
}

.checkout-service-band em {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  color: #768092;
}

.checkout-service-band em img {
  width: 2.2cqw;
  height: 3cqw;
  object-fit: contain;
}

.checkout-service-band > button {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding-top: 1cqw;
  color: #687183;
}

.checkout-service-band > button img {
  width: 3.5cqw;
  height: 3.2cqw;
  object-fit: contain;
}

.checkout-help-band {
  min-height: 14cqw;
}

.checkout-help-band button {
  display: flex;
  align-items: center;
  gap: 1cqw;
  color: #717b8e;
  font-size: 3.3cqw;
}

.checkout-help-band button img {
  width: 4.3cqw;
  height: 4cqw;
  object-fit: contain;
}

.checkout-benefit-band {
  display: grid;
  min-height: 18cqw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  margin-top: 1.7cqw;
  background: #fff;
}

.checkout-benefit-band > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 0 3cqw;
}

.checkout-benefit-band > div + div {
  border-left: 1px solid #edf0f4;
}

.checkout-benefit-band > div > img {
  width: 8cqw;
  height: 8cqw;
  flex: 0 0 auto;
  object-fit: contain;
}

.checkout-benefit-band span {
  display: grid;
  min-width: 0;
  gap: 0.2cqw;
}

.checkout-benefit-band strong {
  overflow: hidden;
  color: #30343d;
  font-size: 3.3cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-benefit-band small {
  overflow: hidden;
  color: #737c90;
  font-size: 2.8cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-recommend-section {
  padding: 2cqw 1cqw 5cqw;
}

.checkout-recommend-grid {
  gap: 1cqw;
}

.checkout-recommend-card {
  border-radius: 1.2cqw;
}

.checkout-recommend-card h3 {
  min-height: 9.8cqw;
  margin: 1.5cqw 2cqw 0.6cqw;
  font-size: 3.2cqw;
  line-height: 1.45;
}

.checkout-recommend-card p {
  padding-bottom: 2cqw;
}

.checkout-action-bar {
  min-height: calc(16.5cqw + env(safe-area-inset-bottom));
  grid-template-columns: 12cqw minmax(0, 1fr) 35cqw;
  padding-top: 1.5cqw;
}

.checkout-cancel img {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.checkout-cancel small {
  color: #535b68;
  font-size: 2.6cqw;
}

.checkout-action-bar > div span {
  color: #323740;
  font-size: 3.2cqw;
}

.checkout-action-bar > div strong {
  font-size: 4.6cqw;
}

.checkout-pay-button {
  height: 11.5cqw;
  border-radius: 1.5cqw;
  background: #f53239;
}

.checkout-pay-button:disabled {
  opacity: 0.58;
}

/* Payment cashier */
.payment-view {
  background: #313f59;
}

.payment-brand-zone {
  height: 56.7cqw;
  background: #313f59 url("design/slices/Slice 2@2x.png") center top / 100% 10.67cqw no-repeat;
}

.payment-view::before {
  position: absolute;
  z-index: 90;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4cqw;
  background:
    linear-gradient(#626262, #626262) center 2.35cqw / 35cqw 1.05cqw no-repeat,
    #f0f3f8;
  content: "";
  pointer-events: none;
}

.app-shell.payment-success .payment-view::before {
  background:
    linear-gradient(#626262, #626262) center 2.35cqw / 35cqw 1.05cqw no-repeat,
    #fff;
}

.payment-status-row {
  visibility: hidden;
  height: 10.67cqw;
  padding: 0;
}

.payment-avatar {
  display: block;
  width: 13.4cqw;
  height: 13.4cqw;
  margin: 10.7cqw auto 3.5cqw;
  border-radius: 2cqw;
  object-fit: cover;
}

.payment-brand-zone > p {
  font-size: 3.9cqw;
}

.payment-panel {
  inset: 56.7cqw 0 0;
  padding: 0 3.2cqw max(7cqw, env(safe-area-inset-bottom));
  border-radius: 5.5cqw 5.5cqw 0 0;
  background: #f3f7ff;
}

.payment-panel-topbar {
  min-height: 14cqw;
}

.payment-panel-topbar span {
  color: #496d9d;
  font-size: 3.7cqw;
}

.payment-panel-topbar button {
  display: grid;
  place-items: center;
}

.payment-panel-topbar button img {
  width: 5.9cqw;
  height: 5.9cqw;
  object-fit: contain;
}

.payment-merchant {
  overflow: hidden;
  font-size: 4.2cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-total {
  margin-top: 0.2cqw;
  font-size: 10.4cqw;
}

.payment-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  margin: 1.6cqw 0 5cqw;
}

.payment-points img {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.payment-breakdown {
  margin-bottom: 4cqw;
}

.payment-account-list {
  border-radius: 3.2cqw;
}

.payment-account-option {
  min-height: 13cqw;
  grid-template-columns: 7cqw minmax(0, 1fr) 7cqw;
  gap: 1.8cqw;
  padding: 0 4cqw;
}

.payment-account-option.is-selected {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.payment-account-icon {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.payment-bank-icon {
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.payment-account-option > strong {
  font-size: 3.7cqw;
}

.payment-account-option > i {
  display: grid;
  width: 5.3cqw;
  height: 5.3cqw;
  place-items: center;
}

.payment-account-option > i img {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.payment-account-option.balance-option {
  min-height: 35.5cqw;
  align-content: start;
  padding-top: 5.5cqw;
}

.balance-suboptions {
  display: grid;
  min-width: 0;
  grid-column: 2 / 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2cqw;
  margin-top: 2.5cqw;
}

.balance-suboptions > b,
.balance-suboptions > span {
  display: grid;
  min-height: 16.8cqw;
  align-content: center;
  padding: 2cqw 2.5cqw;
  border-radius: 2.3cqw;
  font-size: 3.8cqw;
  font-weight: 500;
  text-align: left;
}

.balance-suboptions > b {
  border: 1px solid #168df2;
  background: #eaf4ff;
  color: #1685ed;
}

.balance-suboptions > span {
  gap: 1.6cqw;
  background: #fafafa;
  color: #34373d;
}

.balance-suboptions > span strong {
  font-size: 3.8cqw;
  font-weight: 500;
}

.balance-suboptions > span small {
  color: #a3a6ad;
  font-size: 2.8cqw;
  line-height: 1.35;
}

.payment-account-more {
  display: grid;
  min-height: 8cqw;
  place-items: center;
}

.payment-account-more img {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.final-payment-button {
  width: 60cqw;
  height: 12.5cqw;
  margin-top: 12cqw;
  background: linear-gradient(90deg, #20a9fa, #1677ff);
}

.final-payment-button:active {
  transform: scale(0.98);
}

.face-id-glyph {
  width: var(--face-glyph-size, 20cqw);
  height: var(--face-glyph-size, 20cqw);
  margin-bottom: var(--face-glyph-gap, 5cqw);
}

/* Keep the Lottie geometry and timing intact while matching the user-supplied
 * Alipay face-ID palette: a translucent cool-gray tile over the live payment
 * page, with the scan rendered in the reference's pale highlight color. */
.face-payment-overlay {
  --face-scan-reference-navy: #273246;
  --face-scan-reference-panel: rgb(215 216 221 / 0.82);
  --face-card-width: clamp(150px, min(43cqw, 30dvh), 188px);
  --face-card-padding-block: clamp(12px, min(4.5cqw, 2.5dvh), 18px);
  --face-card-padding-inline: clamp(12px, 4cqw, 18px);
  --face-card-radius: clamp(20px, 6cqw, 28px);
  --face-glyph-size: clamp(52px, min(16cqw, 9dvh), 68px);
  --face-glyph-gap: clamp(9px, min(3cqw, 1.8dvh), 13px);
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgb(13 20 32 / 0.38);
  backdrop-filter: blur(clamp(5px, 1.4cqw, 8px));
  -webkit-backdrop-filter: blur(clamp(5px, 1.4cqw, 8px));
}

.face-payment-overlay .face-id-card {
  width: var(--face-card-width);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--face-card-padding-block) var(--face-card-padding-inline);
  border-radius: var(--face-card-radius);
  background: var(--face-scan-reference-panel);
  box-shadow: 0 5cqw 16cqw rgb(39 50 70 / 0.16);
}

.face-payment-overlay .face-id-card h2 {
  color: var(--face-scan-reference-navy);
  font-size: clamp(15px, min(4.2cqw, 2.2dvh), 18px);
  line-height: 1.25;
}

.face-payment-overlay .face-id-card p {
  margin-top: clamp(4px, 1.4cqw, 6px);
  color: rgb(39 50 70 / 0.62);
  font-size: clamp(11px, min(3cqw, 1.6dvh), 13px);
  line-height: 1.35;
}

.face-payment-lottie,
.face-id-check-icon {
  object-fit: contain;
}

.face-payment-lottie {
  filter: brightness(0) invert(1);
}

.face-payment-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.face-payment-overlay:not(.is-verified) .face-payment-lottie {
  transform: scale(1.4);
}

.face-id-check-icon {
  color: var(--face-scan-reference-navy);
  background: transparent;
  opacity: 0;
}

.face-id-check-icon circle,
.face-id-check-icon path {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Show a complete checkmark throughout the success transition. The legacy
 * stroke-dash animation exposed a short, unfinished segment on its first
 * frames while the scanning animation was still fading out.
 */
.face-payment-overlay.is-verified .face-payment-lottie {
  opacity: 0;
  transition: none;
}

.face-payment-overlay.has-lottie:not(.is-verified) .face-id-card p {
  visibility: hidden;
}

.face-payment-overlay.is-verified .face-id-check-icon circle,
.face-payment-overlay.is-verified .face-id-check-icon path:first-child,
.face-payment-overlay.is-verified .face-id-check-icon path:last-child {
  animation: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

/* Full-screen success state matching design 9. */
.payment-success-overlay {
  display: block;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #1678ff 0%, #1678ff 25%, #63a3fb 48%, #94bdfb 60%, #c2d9f9 72%, #f0f3f8 84%, #f0f3f8 100%);
}

.payment-success-card {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 18cqw 3.2cqw 4cqw;
  border-radius: 0;
  background: url("design/slices/Slice 2@2x(1).png") center top / 100% 10.67cqw no-repeat;
  box-shadow: none;
  text-align: left;
  animation: payment-success-in 300ms cubic-bezier(.2,.9,.25,1.1) both;
}

.success-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  color: #fff;
}

.payment-success-check {
  display: block;
  width: 5.3cqw;
  height: 5.3cqw;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payment-success-card .success-heading h2 {
  color: #fff;
  font-size: 4.6cqw;
  font-weight: 500;
}

.payment-success-card > strong {
  margin: 4cqw 0 8.1cqw;
  color: #fff;
  font-size: 10.4cqw;
  font-weight: 500;
  text-align: center;
}

.success-meta {
  display: grid;
  gap: 2cqw;
  margin: 0 3cqw 2.5cqw;
  color: #fff;
}

.success-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.success-meta dt,
.success-meta dd {
  margin: 0;
  font-size: 3.7cqw;
  font-weight: 650;
}

.success-gifts {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.success-gifts img,
.success-reward {
  display: block;
  width: 100%;
  height: auto;
}

.success-reward {
  margin-top: 2cqw;
  border-radius: 2.5cqw;
}

.success-top-done,
.success-bottom-done {
  border: 0;
  background: transparent;
  color: #fff;
}

.success-top-done {
  position: absolute;
  top: 15.5cqw;
  right: 4cqw;
  padding: 0;
  font-size: 3.8cqw;
}

.success-bottom-done {
  position: absolute;
  right: 24cqw;
  bottom: 7.5cqw;
  left: 24cqw;
  height: 11.2cqw;
  margin: 0;
  border: 1px solid #2088f4;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.68);
  color: #2088f4;
  font-size: 4.2cqw;
}

.success-top-done:active,
.success-bottom-done:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .payment-success-card,
  .face-payment-lottie,
  .face-id-check-icon {
    animation: none;
  }
}

@media (max-width: 360px) {
  .flash-sale-card header {
    gap: 2.4cqw;
  }

  .flash-countdown-label {
    margin-left: 0;
  }

  .promotion-tabs {
    gap: 4cqw;
  }
}

/* Keep the product reference frame authoritative over the legacy pseudo status. */
#appShell.route-product #productView::before {
  content: none;
}

#searchView[data-reference="2-1"]::after { background-image: url("design/references/2-1.png"); }
#searchView[data-reference="2-2"]::after { background-image: url("design/references/2-2.png"); }
#searchView[data-reference="2-3"]::after { background-image: url("design/references/2-3.png"); }
#searchView[data-reference="2-4"]::after { background-image: url("design/references/2-4.png"); }

#promotionView[data-reference="4-1"]::after { background-image: url("design/references/4-1.png"); }

#promotionGiftOverlay:not([hidden]) {
  position: absolute;
  z-index: 85;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  background: rgb(18 18 18 / 0.52);
  user-select: none;
}

#promotionGiftOverlay:not([hidden])::before,
#promotionGiftOverlay:not([hidden])::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("design/references/5.png") 0 0 / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

#promotionGiftOverlay:not([hidden])::before {
  clip-path: polygon(7% 24.5%, 53% 23.6%, 57% 24.2%, 59% 28.3%, 86% 28.3%, 91% 31%, 91% 71%, 7% 71%);
}

#promotionGiftOverlay:not([hidden])::after {
  clip-path: circle(4.5cqw at 50% 75.2%);
}

.promotion-gift-keyword {
  position: absolute;
  top: 69.5cqw;
  left: 20cqw;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60cqw;
  height: 12cqw;
  margin: 0;
  overflow: hidden;
  color: #686868;
  background: linear-gradient(90deg, #f5fff1 0%, #f7fff4 72%, rgba(250, 255, 248, 0.96) 100%);
  font-size: clamp(12px, 4cqw, 30px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.promotion-gift-product {
  position: absolute;
  top: 82cqw;
  left: 27cqw;
  z-index: 3;
  width: 46cqw;
  height: 46cqw;
  border-radius: 1.5cqw;
  background: #fff;
  object-fit: contain;
  pointer-events: none;
}

.promotion-gift-buy,
.promotion-gift-close {
  position: absolute;
  z-index: 4;
  border: 0;
  background: transparent;
}

.promotion-gift-buy {
  top: 58.2%;
  left: 26%;
  width: 48%;
  height: 7.5%;
}

.promotion-gift-close {
  top: 72.5%;
  left: 43.5%;
  width: 13%;
  height: 5.5%;
}

#appShell.route-product #productView::after {
  position: fixed;
  z-index: 50;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: url("design/references/6.png") 0 0 / 100% 100% no-repeat;
  color: transparent;
  content: "";
  pointer-events: none;
  text-shadow: none;
}

/* The order comp is a 750 × 3050 stitched scroll surface. */
#appShell.route-checkout #checkoutView::after {
  position: absolute;
  z-index: 50;
  inset: 0 0 auto;
  width: 100%;
  height: 406.666667cqw;
  background: url("design/references/7.png") 0 0 / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

#appShell.route-checkout #checkoutPayOverlay:not([hidden]) {
  position: absolute;
  z-index: 70;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(20 24 32 / 0.16);
}

#appShell.route-payment:not(.payment-success) #paymentView::after {
  position: fixed;
  z-index: 50;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: url("design/references/8.png") 0 0 / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

#appShell.route-payment.payment-success #paymentSuccessOverlay {
  position: absolute;
  z-index: 80;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("design/references/9.png") 0 0 / 100% 100% no-repeat;
}

#appShell.route-payment.payment-success #paymentSuccessOverlay > * {
  visibility: hidden;
}

/*
 * Runtime truth
 * -------------
 * Reference comps are available only when the visual QA harness explicitly
 * enables .pixel-audit. Normal users always see the live video, real inputs,
 * configured products and stateful checkout/payment components.
 */
#appShell:not(.pixel-audit) #homeView::after,
#appShell:not(.pixel-audit) #searchView::after,
#appShell:not(.pixel-audit) #resultsView::after,
#appShell:not(.pixel-audit) #promotionView::after,
#appShell:not(.pixel-audit) #productView::after,
#appShell:not(.pixel-audit) #checkoutView::after,
#appShell:not(.pixel-audit) #paymentView::after {
  display: none;
  content: none;
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay {
  background: linear-gradient(180deg, #1678ff 0%, #1678ff 25%, #63a3fb 48%, #94bdfb 60%, #c2d9f9 72%, #f0f3f8 84%, #f0f3f8 100%);
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay > * {
  visibility: visible;
}

/* Product detail: live 122.JPG reconstruction. */
#productView {
  color-scheme: light;
  overflow: hidden;
  background: #f4f5f7;
  color: #17181b;
}

#productView button {
  font-family: inherit;
}

.product-status-cutout {
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  height: 10.67cqw;
  overflow: hidden;
  background: #fff;
  pointer-events: none;
}

.product-status-cutout img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#productView .product-topbar {
  top: 11.7cqw;
  right: 3.2cqw;
  left: 3.2cqw;
  z-index: 11;
  grid-template-columns: 11cqw minmax(0, 1fr) auto;
  gap: 2cqw;
  transition: opacity 160ms ease;
}

#productView.is-product-scrolled .product-topbar {
  opacity: 0;
  pointer-events: none;
}

#productView .product-top-actions {
  display: flex;
  gap: 2.2cqw;
}

#productView .round-icon-button {
  display: grid;
  width: 9.6cqw;
  height: 9.6cqw;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(92 97 103 / 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#productView .round-icon-button img {
  display: block;
  width: 4.6cqw;
  height: 4.6cqw;
  object-fit: contain;
}

#productView .product-like-button img {
  width: 5cqw;
  height: 5cqw;
}

#productView .product-top-actions .round-icon-button:nth-child(2) img {
  width: 5.4cqw;
  height: 5.4cqw;
}

#productView .product-top-actions .round-icon-button:last-child img {
  width: 5.2cqw;
  height: auto;
}

/* The detail drawer uses two compact sticky states while its content moves:
 * a searchable white header first, then the red campaign header. Both sit
 * above the scrolling surface so the tab row never jumps with the content. */
#productView .product-sticky-chrome {
  position: absolute;
  z-index: 24;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 .25cqw 1.4cqw rgb(20 22 26 / .08);
}

#productView.is-product-sticky .product-sticky-chrome {
  display: block;
  pointer-events: auto;
}

#productView .product-sticky-main {
  display: flex;
  min-height: 20.4cqw;
  align-items: center;
  gap: 2cqw;
  padding: 10.67cqw 3.2cqw 1.2cqw;
  box-sizing: border-box;
}

#productView .product-sticky-white {
  background: #fff;
  color: #202124;
}

#productView .product-sticky-promo {
  display: none;
  min-height: 20.4cqw;
  padding-top: 10.67cqw;
  padding-bottom: 1.6cqw;
  background: #ff4050;
  color: #fff;
}

#productView.is-product-promo-sticky .product-sticky-white {
  display: none;
}

#productView.is-product-promo-sticky .product-sticky-promo {
  display: flex;
}

#productView .product-sticky-close,
#productView .product-sticky-action {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  width: 8.2cqw;
  height: 8.2cqw;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}

#productView .product-sticky-close > span,
#productView .product-sticky-close > span::before,
#productView .product-sticky-close > span::after {
  display: block;
  width: 4.2cqw;
  height: .5cqw;
  border-radius: 999px;
  background: currentColor;
}

#productView .product-sticky-close > span::before,
#productView .product-sticky-close > span::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

#productView .product-sticky-close > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#productView .product-sticky-search {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  height: 8.2cqw;
  align-items: center;
  gap: 1.8cqw;
  padding: 0 3.1cqw;
  overflow: hidden;
  border-radius: 4.2cqw;
  background: #f5f6f8;
  color: #737780;
  font-size: 3.15cqw;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#productView .product-sticky-search-icon {
  position: relative;
  flex: 0 0 auto;
  width: 3.1cqw;
  height: 3.1cqw;
  border: .55cqw solid #92969e;
  border-radius: 50%;
  box-sizing: border-box;
}

#productView .product-sticky-search-icon::after {
  position: absolute;
  right: -1.4cqw;
  bottom: -.9cqw;
  width: 1.7cqw;
  height: .55cqw;
  border-radius: 999px;
  background: #92969e;
  content: "";
  transform: rotate(45deg);
}

#productView .product-sticky-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 1.1cqw;
}

#productView .product-sticky-action > span {
  position: relative;
  display: block;
  width: 5.2cqw;
  height: 5.2cqw;
}

#productView .product-sticky-like > span {
  width: 4.6cqw;
  height: 4cqw;
  border: .55cqw solid currentColor;
  border-radius: 48% 48% 34% 34%;
  transform: rotate(-8deg);
}

#productView .product-sticky-like > span::after {
  position: absolute;
  top: 1.5cqw;
  left: -1.3cqw;
  width: 1.6cqw;
  height: 2.1cqw;
  border: .55cqw solid currentColor;
  border-right: 0;
  border-radius: 50% 0 0 50%;
  content: "";
}

#productView .product-sticky-share > span::before {
  position: absolute;
  top: 2.5cqw;
  left: .6cqw;
  width: 4cqw;
  height: .55cqw;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: rotate(-25deg);
}

#productView .product-sticky-share > span::after {
  position: absolute;
  top: .5cqw;
  right: .3cqw;
  width: 2.3cqw;
  height: 2.3cqw;
  border-top: .55cqw solid currentColor;
  border-right: .55cqw solid currentColor;
  content: "";
}

#productView .product-sticky-more > span {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -2.2cqw 0 currentColor, 2.2cqw 0 currentColor;
}

#productView .product-sticky-promo-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: .5cqw;
  line-height: 1.1;
}

#productView .product-sticky-promo-copy strong,
#productView .product-sticky-promo-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .product-sticky-promo-copy strong {
  position: relative;
  padding-left: 3.1cqw;
  font-size: 3.7cqw;
  font-weight: 750;
}

#productView .product-sticky-promo-copy strong::before {
  position: absolute;
  top: .2cqw;
  left: .4cqw;
  width: 1.8cqw;
  height: 3.6cqw;
  background: currentColor;
  clip-path: polygon(55% 0, 100% 0, 68% 39%, 100% 39%, 19% 100%, 39% 54%, 0 54%);
  content: "";
}

#productView .product-sticky-promo-copy span {
  padding-left: 3.1cqw;
  font-size: 2.85cqw;
}

#productView .product-sticky-promo .product-sticky-share > span::before,
#productView .product-sticky-promo .product-sticky-share > span::after,
#productView .product-sticky-promo .product-sticky-like > span,
#productView .product-sticky-promo .product-sticky-like > span::after {
  border-color: #fff;
}

#productView .product-sticky-promo .product-sticky-share > span::before {
  background: #fff;
}

#productView .product-sticky-tabs {
  display: grid;
  height: 10.4cqw;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  background: #fff;
  color: #686c74;
}

#productView .product-sticky-tabs button {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 3.35cqw;
  font-weight: 450;
}

#productView .product-sticky-tabs button.is-active {
  color: #22252a;
  font-weight: 700;
}

#productView .product-sticky-tabs button.is-active::after {
  position: absolute;
  right: 28%;
  bottom: .7cqw;
  left: 28%;
  height: .7cqw;
  border-radius: 999px;
  background: #f22d3d;
  content: "";
}

/* User-supplied header slices are the visual source for both sticky stages.
 * The live controls remain as transparent hit areas over the baked pixels. */
#productView .product-sticky-main {
  position: relative;
  display: block;
  min-height: 0;
  height: 21.392405cqw;
  padding: 0;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#productView .product-sticky-white {
  background-image: url("design/slices/product-sticky-20260818/white-header-clean.png");
  /* The source crop starts one CSS pixel below the shell edge at the target
   * density. Keep the baked close/search/actions row on that same raster line. */
  background-position: center .28cqw;
  background-size: 100% 100%;
}

#productView .product-sticky-promo {
  display: none;
}

#productView.is-product-promo-sticky .product-sticky-white {
  display: none;
}

#productView.is-product-promo-sticky .product-sticky-promo {
  display: block;
}

#productView .product-sticky-promo {
  height: 21.392405cqw;
  background-color: #ff4050;
  /* Versioned filename prevents the old baked lightning from surviving the
   * static server's long-lived PNG cache. */
  background-image: url("design/slices/product-sticky-20260818/red-header-chrome-no-bolt.png");
  /* The red crop follows the status glyphs at the 6.1cqw baseline. The old
   * bottom alignment pushed the entire baked promo row down by ~8px. */
  background-position: center 6.1cqw;
  background-size: 100% 12.927757cqw;
}

#productView .product-sticky-main > .product-sticky-close,
#productView .product-sticky-main > .product-sticky-search,
#productView .product-sticky-main > .product-sticky-actions,
#productView .product-sticky-main > .product-sticky-promo-copy {
  position: absolute;
  opacity: 0;
}

#productView .product-sticky-white > .product-sticky-close {
  top: 8cqw;
  left: 4cqw;
  width: 9cqw;
  height: 9cqw;
}

#productView .product-sticky-white > .product-sticky-search {
  top: 6.98cqw;
  left: 13.8cqw;
  width: 54cqw;
  height: 12.3cqw;
}

#productView .product-sticky-white > .product-sticky-search {
  display: flex;
  opacity: 1;
  box-sizing: border-box;
  min-width: 0;
  align-items: center;
  padding: 0 2.8cqw 0 8.5cqw;
  background: transparent;
  color: #818b9f;
  font-size: 3.8cqw;
  font-weight: 450;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#productView .product-sticky-white > .product-sticky-search .product-sticky-search-icon {
  display: none;
}

#productView .product-sticky-white > .product-sticky-search #productStickyTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .product-sticky-white > .product-sticky-actions {
  top: 7cqw;
  right: 3.2cqw;
  height: 10cqw;
}

#productView .product-sticky-promo > .product-sticky-close {
  top: 12cqw;
  left: 4cqw;
  width: 9cqw;
  height: 9cqw;
}

#productView .product-sticky-promo > .product-sticky-promo-copy {
  /* Keep the live copy fully below the shared 8.333cqw status bar. */
  top: 9cqw;
  right: 23cqw;
  left: 23cqw;
  display: grid;
  height: 10.4cqw;
  justify-items: center;
  gap: .85cqw;
  opacity: 1;
  overflow: visible;
  color: #fff;
  text-align: center;
}

#productView .product-sticky-promo > .product-sticky-promo-copy strong {
  display: flex;
  height: 4.8cqw;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  color: #fff;
  font-size: 3.7cqw;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

#productView .product-sticky-promo-lightning {
  display: block;
  width: 3.8cqw;
  height: 5.2cqw;
  margin-right: .6cqw;
  object-fit: contain;
}

#productView .product-sticky-promo > .product-sticky-promo-copy span {
  padding: 0;
  overflow: visible;
  color: inherit;
  font-size: 3.3cqw;
  font-weight: 400;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

#productView .product-sticky-promo > .product-sticky-promo-copy strong span {
  font: inherit;
}

#productView .product-sticky-promo > .product-sticky-actions {
  top: 11.6cqw;
  right: 3.2cqw;
  height: 8.5cqw;
}

#productView .product-sticky-main > .product-sticky-close,
#productView .product-sticky-main > .product-sticky-search,
#productView .product-sticky-main > .product-sticky-actions,
#productView .product-sticky-main .product-sticky-action {
  pointer-events: auto;
}

#productView .product-scroll {
  inset: 0;
  padding-bottom: calc(18cqw + env(safe-area-inset-bottom));
  background: #f4f5f7;
}

#productView .product-gallery {
  height: 111cqw;
  background: #fff;
}

#productView .product-gallery > img {
  width: 100%;
  height: 100%;
  padding-top: 6cqw;
  background: #fff;
  object-fit: contain;
}

#productView .find-similar {
  bottom: 3.3cqw;
  left: 3.1cqw;
  padding: 1.1cqw 2.4cqw;
  border-radius: 999px;
  background: rgb(72 75 81 / 0.62);
  color: #fff;
  font-size: 3.2cqw;
  line-height: 1.35;
}

#productView .gallery-tabs {
  right: 3.1cqw;
  bottom: 3.3cqw;
  gap: 2.4cqw;
  min-width: 41cqw;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 5.925926cqw;
  padding: 0 9cqw 0 3.5cqw;
  border-radius: 999px;
  background: #898c91;
  color: #dedfe2;
  font-size: 2.8cqw;
}

#productView .gallery-tabs b {
  color: #fff;
  font-weight: 500;
}

#productView .gallery-count,
#productView .gallery-tabs + .gallery-count {
  right: 6.6cqw;
  bottom: 3.3cqw;
  z-index: 2;
  padding: 1.15cqw 0;
  background: transparent;
  color: #fff;
  font-size: 3.2cqw;
}

#productView .product-event-strip {
  position: relative;
  display: block;
  min-height: 16.8cqw;
  padding: 0;
  background: #f42125 url("design/slices/Slice 46@2x.png") center / 100% 100% no-repeat;
}

#productView .event-price-copy {
  position: absolute;
  inset: 1.5cqw auto 1.2cqw 3.8cqw;
  display: grid;
  align-content: center;
  color: #fff;
}

#productView .event-price-copy > div {
  display: flex;
  gap: 1.2cqw;
  align-items: baseline;
  white-space: nowrap;
}

#productView .event-price-copy > div > span {
  font-size: 3.4cqw;
  font-weight: 600;
}

#productView .event-price-copy strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 6.4cqw;
  line-height: 1;
}

#productView .event-price-copy strong .spec-price-major {
  font-size: 6.4cqw;
}

#productView .event-price-copy strong .spec-price-minor {
  font-size: 4.55cqw;
}

#productView .event-price-copy em {
  display: inline-flex;
  align-items: center;
  gap: .65cqw;
  padding: 0.55cqw 1.2cqw;
  border-radius: 0.8cqw;
  background: #fff;
  color: #f1262d;
  font-size: 2.8cqw;
  font-style: normal;
  font-weight: 650;
}

#productView .detail-saved-chevron {
  width: 2.222222cqw;
  height: 3.333333cqw;
  object-fit: fill;
}

#productView .event-price-copy p {
  display: flex;
  gap: 0;
  margin: 1.2cqw 0 0;
  color: #fff;
  font-size: 2.75cqw;
  white-space: nowrap;
}

#productView .event-price-copy p span {
  display: inline-flex;
  align-items: center;
}

#productView .event-price-copy p span:not(:first-child)::before {
  width: 0;
  height: 2.8cqw;
  margin: 0 1.15cqw;
  border-left: 1px solid rgb(255 255 255 / 0.72);
  content: "";
}

#productView .product-offer-row {
  display: grid;
  min-height: 13cqw;
  grid-template-columns: auto minmax(0, 1fr) 4cqw;
  gap: 2.2cqw;
  align-items: center;
  padding: 2.6cqw 4cqw;
  background: #fff;
}

#productView .product-offer-row strong,
#productView .product-offer-row span {
  justify-self: start;
  padding: 1.2cqw 2cqw;
  border-radius: 0.8cqw;
  font-size: 3.45cqw;
  line-height: 1;
  white-space: nowrap;
}

#productView .product-offer-row strong {
  background: #e6f8f3;
  color: #00a47b;
}

#productView .product-offer-row span {
  background: #fff0f1;
  color: #ed3942;
}

#productView .product-offer-row > img {
  width: 2.3cqw;
  height: auto;
  justify-self: end;
}

#productView .product-info-block {
  margin-top: 0;
  padding: 2.8cqw 4cqw 3.4cqw;
  background: #fff;
}

#productView .product-info-block h1 {
  display: block;
  margin: 0;
  color: #17191d;
  font-size: 4.45cqw;
  font-weight: 680;
  line-height: 1.45;
}

#productView .trust-purchase-label {
  display: inline-block;
  margin-top: 1.4cqw;
  padding: 0.45cqw 1.15cqw;
  border-radius: 0.6cqw;
  background: #e5f8f3;
  color: #009f78;
  font-size: 3cqw;
}

#productView .brand-guarantee-row {
  display: grid;
  min-height: 10.7cqw;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2cqw;
  align-items: center;
  margin-top: 2.8cqw;
  padding: 1.8cqw 2.4cqw;
  border-radius: 1.7cqw;
  background: linear-gradient(90deg, #80651e, #654f17);
  color: #fff;
}

#productView .brand-guarantee-row strong {
  padding-right: 2cqw;
  border-right: 1px solid rgb(255 255 255 / 0.45);
  font-size: 3.6cqw;
}

#productView .brand-guarantee-row span {
  overflow: hidden;
  font-size: 3.5cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .brand-guarantee-row img {
  width: 2.2cqw;
  height: auto;
  filter: brightness(0) invert(1);
}

#productView .detail-tags {
  display: flex;
  gap: 1.6cqw;
  margin-top: 2.4cqw;
  padding-bottom: 0.2cqw;
  overflow-x: auto;
  scrollbar-width: none;
}

#productView .detail-tags span {
  flex: 0 0 auto;
  padding: 1.25cqw 2cqw;
  border: 1px solid #daf0eb;
  border-radius: 1cqw;
  background: #f8fbfa;
  color: #373a40;
  font-size: 3.2cqw;
  white-space: nowrap;
}

#productView .detail-tags span:first-child {
  border-color: #72d7bf;
  color: #009b73;
}

#productView .product-service-list {
  margin-top: 2cqw;
  padding: 0 4cqw;
  background: #fff;
}

#productView .product-service-row {
  display: grid;
  min-height: 12.5cqw;
  grid-template-columns: 5cqw minmax(0, 1fr) 3cqw;
  gap: 2.8cqw;
  align-items: center;
  border-bottom: 1px solid #ededee;
}

#productView .product-service-row:last-child {
  border-bottom: 0;
}

#productView .product-service-row > img:first-child {
  width: 5cqw;
  max-height: 5cqw;
  object-fit: contain;
}

#productView .product-service-row > img:last-child {
  width: 2.1cqw;
  height: auto;
  justify-self: end;
}

#productView .product-service-row p {
  display: flex;
  align-items: center;
  margin: 0;
  color: #303238;
  font-size: 3.35cqw;
  white-space: nowrap;
}

#productView .product-service-row p span + span::before,
#productView .product-service-row p strong + span::before {
  display: inline-block;
  width: 0;
  height: 3cqw;
  margin: 0 1.3cqw;
  border-left: 1px solid #d4d5d7;
  content: "";
  vertical-align: -.45cqw;
}

#productView .product-service-row small {
  display: block;
  margin-top: 1.15cqw;
  color: #303238;
  font-size: 3.1cqw;
}

#productView .delivery-row {
  min-height: 18.5cqw;
}

#productView .delivery-row strong,
#productView .delivery-row p span {
  color: #00a57c;
}

#productView .festival-row > .festival-icon-slice {
  width: 3.888889cqw;
  height: 4.722222cqw;
  max-height: none;
  border-radius: 0;
  object-fit: fill;
}

#productView .festival-row strong {
  color: #ef3039;
  font-size: 3.65cqw;
}

#productView .review-block {
  margin-top: 2cqw;
  padding: 4cqw;
  background: #fff;
}

#productView .review-block header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#productView .review-block header h2 {
  margin: 0;
  font-size: 4.5cqw;
  font-weight: 650;
}

#productView .review-block header h2 span {
  font-weight: 500;
}

#productView .review-block header img {
  width: 2.2cqw;
  height: auto;
}

#productView .review-summary {
  display: grid;
  grid-template-columns: 24cqw minmax(0, 1fr);
  gap: 5cqw;
  margin-top: 4cqw;
}

#productView .review-score {
  display: grid;
  align-content: start;
}

#productView .review-score strong {
  color: #ef2e3a;
  font-size: 8cqw;
  line-height: 1;
}

#productView .review-score strong small {
  font-size: 4.6cqw;
}

#productView .review-score > .review-score-stars {
  width: 16.11479cqw;
  height: 3.311258cqw;
  margin-top: 1.4cqw;
  object-fit: fill;
}

#productView .review-score > small {
  margin-top: 1.3cqw;
  color: #6c6e73;
  font-size: 3.2cqw;
}

#productView .review-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2cqw 2.6cqw;
  align-content: start;
}

#productView .review-tags span,
#productView .shop-review-summary span {
  padding: 1.7cqw 1.2cqw;
  border-radius: 1cqw;
  background: #f7f7f8;
  color: #303238;
  font-size: 3.45cqw;
  text-align: center;
  white-space: nowrap;
}

#productView .review-tags span:first-child {
  background: #e7f7f2;
  color: #00a37a;
}

#productView .shop-review-summary {
  margin-top: 4cqw;
  padding-top: 3.8cqw;
  border-top: 1px solid #ededee;
}

#productView .shop-review-summary > strong {
  font-size: 4cqw;
}

#productView .shop-review-summary > div {
  display: flex;
  gap: 2cqw;
  margin-top: 3cqw;
}

#productView .shop-block {
  display: block;
  margin-top: 2cqw;
  padding: 4cqw 3cqw 3.2cqw;
  border-top: 0;
  background: #fff;
}

#productView .shop-heading {
  display: grid;
  grid-template-columns: 13cqw minmax(0, 1fr) auto;
  gap: 3cqw;
  align-items: center;
  padding: 2.4cqw;
  border: 1px solid #ededee;
  border-radius: 2.3cqw 2.3cqw 0 0;
  border-bottom: 0;
  background: #fbfbfc;
}

#productView .shop-avatar {
  width: 13cqw;
  height: 13cqw;
  border: 1px solid #e7e7e8;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

#productView .shop-heading > div {
  display: grid;
  min-width: 0;
  gap: 1cqw;
}

#productView .shop-heading strong {
  overflow: hidden;
  font-size: 4.2cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .shop-heading span {
  overflow: hidden;
  color: #d1323c;
  font-size: 2.65cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .shop-heading .shop-experience-line {
  display: flex;
  align-items: center;
  gap: .7cqw;
}

#productView .shop-rating-stars {
  flex: 0 0 auto;
  width: 12.777778cqw;
  height: 3.333333cqw;
  object-fit: fill;
}

#productView .shop-heading small {
  color: #8a8c91;
  font-size: 2.8cqw;
}

#productView .shop-heading button {
  min-width: 17cqw;
  height: 8.5cqw;
  padding: 0 2cqw;
  border: 0;
  border-radius: 1cqw;
  background: #f52e34;
  color: #fff;
  font-size: 3.2cqw;
  white-space: nowrap;
}

#productView .shop-authority-row {
  display: grid;
  min-height: 10.5cqw;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.5cqw;
  align-items: center;
  margin: 0;
  padding: 0 3cqw;
  border-radius: 0 0 2.3cqw 2.3cqw;
  background: linear-gradient(90deg, #806821, #695318);
  color: #fff;
}

#productView .shop-authority-row > .shop-authority-icon {
  width: 4.444444cqw;
  height: 4.444444cqw;
  object-fit: fill;
}

#productView .shop-authority-row strong,
#productView .shop-authority-row em {
  font-size: 3.2cqw;
  font-style: normal;
  font-weight: 500;
}

#productView .shop-product-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4cqw;
  color: #7c7e84;
  font-size: 3.8cqw;
  text-align: center;
}

#productView .shop-product-tabs b {
  position: relative;
  color: #202126;
}

#productView .shop-product-tabs b::after {
  position: absolute;
  right: 35%;
  bottom: -2cqw;
  left: 35%;
  height: 0.7cqw;
  border-radius: 999px;
  background: #202126;
  content: "";
}

#productView .shop-recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2cqw;
  margin-top: 5cqw;
}

#productView .recommend-card {
  display: grid;
  height: auto;
  min-height: 0;
  gap: 1.3cqw;
  padding: 0 0 2cqw;
  overflow: hidden;
  border: 0;
  border-radius: 1.2cqw;
  background: #fff;
  color: #1f2024;
  text-align: left;
}

#productView .recommend-card img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 1.2cqw;
  background: #f2f3f4;
  object-fit: cover;
}

#productView .recommend-card-title {
  display: -webkit-box;
  padding: 0 0.6cqw;
  overflow: hidden;
  font-size: 3.25cqw;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

#productView .recommend-card-price {
  padding: 0 0.6cqw;
  color: #ed303b;
  font-size: 4.1cqw;
}

#productView .recommend-card.is-compact .recommend-card-title {
  min-height: 9.4cqw;
}

#productView .detail-copy-block {
  margin-top: 2cqw;
  padding: 4cqw 3.2cqw 3cqw;
  background: #fff;
}

#productView .detail-copy-block h2 {
  font-size: 4.7cqw;
  font-weight: 650;
}

#productView .detail-copy-block p {
  margin-top: 4cqw;
  color: #2f3136;
  font-size: 4cqw;
  line-height: 1.7;
}

#productView .detail-image-stack {
  display: grid;
  width: 100%;
  background: #fff;
}

#productView .detail-image-stack img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  background: #fff;
  object-fit: contain;
}

#productView .price-explanation-row {
  display: flex;
  width: 100%;
  min-height: 15cqw;
  align-items: center;
  justify-content: space-between;
  padding: 0 4cqw;
  border: 0;
  border-top: 1px solid #efeff0;
  background: #fff;
  color: #202126;
  font-size: 4.2cqw;
  font-weight: 600;
}

#productView .price-explanation-row img {
  width: 3.2cqw;
  height: auto;
}

#productView .recommend-section {
  margin-top: 2cqw;
  padding: 4cqw 2cqw 5cqw;
  background: #fff;
}

#productView .recommend-section h2 {
  display: grid;
  grid-template-columns: minmax(0, 12cqw) auto minmax(0, 12cqw);
  gap: 2.4cqw;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 4.5cqw;
  font-weight: 650;
  text-align: center;
}

#productView .recommend-section h2 span {
  height: 1px;
  background: #c9cacf;
}

#productView .recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4cqw;
  margin-top: 4cqw;
}

#productView .product-bottom-shell {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  box-shadow: 0 -1px 8px rgb(34 35 38 / 0.08);
}

#productView .purchase-bar {
  position: static;
  display: grid;
  min-height: 16.5cqw;
  grid-template-columns: 13cqw 13cqw 13cqw minmax(0, 1fr);
  gap: 1cqw;
  align-items: center;
  padding: 1.4cqw 3cqw 1.6cqw;
  border-top: 0;
  background: #fff;
}

#productView .purchase-bar > button:not(.buy-button) {
  display: grid;
  height: 12cqw;
  place-content: center;
  justify-items: center;
  gap: 1cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #42444a;
}

#productView .purchase-bar > button:not(.buy-button) img {
  width: 5.6cqw;
  height: 5.6cqw;
  object-fit: contain;
}

#productView .purchase-bar > button:first-child img {
  width: 6.2cqw;
  height: 6.2cqw;
  border: 1px solid #e6e7e9;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

#productView .purchase-bar small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 2.8cqw;
  line-height: 1;
  white-space: nowrap;
}

#productView .purchase-bar .buy-button {
  display: grid;
  height: 12cqw;
  grid-template-columns: 13cqw minmax(0, 1fr);
  gap: 1cqw;
  align-items: center;
  padding: 0 3cqw 0 0;
  border: 0;
  border-radius: 2.2cqw;
  background: #f83236;
  color: #fff;
}

#productView .purchase-bar .buy-button img {
  width: 12cqw;
  height: 12cqw;
  padding: 2cqw;
  border-radius: 2.2cqw 0 0 2.2cqw;
  background: #ffe8ea;
  object-fit: contain;
}

#productView .purchase-bar .buy-button strong {
  font-size: 4cqw;
  font-weight: 650;
  white-space: nowrap;
}

#productView .purchase-cta-copy {
  display: grid;
  gap: 0.35cqw;
  justify-items: center;
}

#productView .purchase-bar .buy-button .purchase-cta-copy small {
  color: #fff;
  font-size: 2.8cqw;
  line-height: 1;
  white-space: nowrap;
}

#productView button:active {
  transform: scale(0.98);
}

#appShell.pixel-audit.route-product #productView::after {
  position: fixed;
  z-index: 50;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("design/references/122.JPG") 0 0 / 100% auto no-repeat;
  content: "";
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #productView .product-topbar {
    transition: none;
  }

  #productView button:active {
    transform: none;
  }
}

/* Remove every route-specific status image while preserving its layout gap. */
#appShell:not(.pixel-audit) .search-view::before,
#appShell:not(.pixel-audit) .results-view::before,
#appShell:not(.pixel-audit) .promotion-hero::before,
#appShell:not(.pixel-audit) .checkout-header::before,
#appShell:not(.pixel-audit) .payment-brand-zone,
#appShell:not(.pixel-audit) .payment-success-card {
  background-image: none;
}

#appShell:not(.pixel-audit) .product-status-cutout img {
  display: none;
}

/*
 * Keep the fixed reference ratio for the centered desktop preview, but let an
 * actual phone viewport define the canvas. The redesign layer loads after the
 * base stylesheet, so route-specific payment ratios must be reset here too.
 */
@media (max-width: 600px) {
  .app-shell,
  .app-shell.route-payment,
  .app-shell.route-payment.payment-success {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    box-shadow: none;
  }
}

/*
 * Slice-first final authority: the approved pixels are the sole visible
 * source. Dynamic DOM remains underneath for routing, accessibility and click
 * handling, but must never double-paint text or icons over the cutout.
 */
#appShell:not(.pixel-audit) #resultsView .product-grid,
#appShell:not(.pixel-audit) #promotionView .promotion-list {
  z-index: auto;
}

#appShell:not(.pixel-audit) .product-reference-live > *:not(.reference-buy-button),
#appShell:not(.pixel-audit) .spec-reference-live > *:not(.spec-close-button):not(.spec-immediate-pay),
#appShell:not(.pixel-audit) .payment-result-amount,
#appShell:not(.pixel-audit) .payment-result-saving {
  display: none;
}

/* Randomized avatar/bank icons only exist over the sliced page chrome. */
#appShell.pixel-audit .payment-reference-live > img,
#appShell.pixel-audit .payment-reference-live #paymentReferenceBank2 {
  display: none;
}

#appShell:not(.pixel-audit) .reference-buy-button,
#appShell:not(.pixel-audit) .spec-close-button,
#appShell:not(.pixel-audit) .spec-immediate-pay,
#appShell:not(.pixel-audit) #paymentReferencePay,
#appShell:not(.pixel-audit) .success-reference-live .success-top-done,
#appShell:not(.pixel-audit) .success-reference-live .success-bottom-done {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
}

#appShell:not(.pixel-audit).route-payment.payment-success .payment-success-card {
  display: none;
  animation: none;
}

/* Home chrome calibrated against design/references/home-reference-20260814.jpg. */
#appShell.route-home:not(.pixel-audit) > .global-status-bar {
  height: 8.333cqw;
  background-image: url("design/slices/home-20260814/status-bar.png");
  background-size: 100% 100%;
  mix-blend-mode: normal;
}

.home-view {
  --nav-height: 13.61cqw;
}

.home-view .top-chrome {
  height: 37cqw;
}

.home-view .top-tools {
  inset: 8.3cqw 0 auto;
  height: 10cqw;
  padding: 0;
}

.home-view .home-menu-button {
  position: absolute;
  left: 3.05cqw;
  width: 10cqw;
  height: 10cqw;
}

.home-view .menu-icon-image {
  width: 4.444cqw;
  height: 4.444cqw;
}

.home-view .menu-notification-badge {
  display: none;
}

.home-view .top-tools .tool-button {
  right: 3.75cqw;
  width: 10cqw;
  height: 10cqw;
}

.home-view .search-icon-image {
  width: 5.278cqw;
  height: 5.278cqw;
}

.home-view .action-rail {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 3.425926cqw;
  left: 0;
  display: block;
  width: auto;
  height: 112.037037cqw;
  pointer-events: none;
}

.home-view .action-rail > * {
  position: absolute;
  pointer-events: auto;
}

.home-view .profile-action {
  top: 0;
  right: 1.944cqw;
  width: 12.778cqw;
  height: 15cqw;
}

.home-view .profile-action .profile-avatar-photo {
  top: 0.694cqw;
  left: 0.694cqw;
  width: 11.389cqw;
  height: 11.389cqw;
}

.home-view .profile-action .profile-avatar-frame {
  width: 12.778cqw;
  height: 15cqw;
}

.home-view .rail-action {
  right: 3.796cqw;
  width: 9.167cqw;
  min-width: 9.167cqw;
  min-height: 14cqw;
  gap: 1.4cqw;
}

.home-view .like-action {
  top: 21.296296cqw;
}

.home-view #commentButton {
  top: 40.555556cqw;
}

.home-view #favoriteButton {
  top: 60.185185cqw;
  right: 3.611cqw;
}

.home-view #shareButton {
  top: 79.722222cqw;
}

.home-view .rail-icon-image {
  width: 9.167cqw;
  height: 9.167cqw;
}

.home-view .rail-count {
  min-height: 3.9cqw;
  font-size: 3.55cqw;
  line-height: 1.1;
}

.home-view .music-disc {
  top: 99.814815cqw;
  right: 2.222cqw;
  overflow: hidden;
  width: 12.222cqw;
  height: 12.222cqw;
  margin-top: 0;
  background: transparent;
  box-shadow: none;
}

.home-view .music-disc .music-disc-ring {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: fill;
}

.home-view .music-disc .music-avatar {
  z-index: 1;
  width: 6.667cqw;
  height: 6.667cqw;
}

.home-view .video-meta {
  right: 18cqw;
  bottom: 3.1cqw;
  left: 3.15cqw;
}

.home-view .author {
  margin-bottom: 2.2cqw;
  font-size: 4.4cqw;
  line-height: 1.15;
}

.home-view .description {
  color: rgb(255 255 255 / 0.9);
  font-size: 3.8cqw;
  font-weight: 400;
  line-height: 1.55;
}

.home-view .bottom-nav {
  height: var(--nav-height);
  padding-bottom: 0;
  border-top: 0;
  background: #000;
}

.home-view .bottom-nav::after {
  position: absolute;
  z-index: 0;
  bottom: 1.481cqw;
  left: 50%;
  width: 41.944cqw;
  height: 1.111cqw;
  border-radius: 999px;
  background: #c3c3c3;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.home-view .bottom-nav > button {
  z-index: 1;
}

.home-view .bottom-nav .nav-item {
  font-size: 4.3cqw;
  font-weight: 600;
  color: #a6a6aa;
}

.home-view .bottom-nav .nav-item.is-active {
  color: #fff;
}

.home-view .create-button {
  width: 9.167cqw;
  height: 9.167cqw;
  padding: 0;
}

.home-view .create-button img {
  width: 9.167cqw;
  height: 9.167cqw;
  transform: translate(-0.23cqw, -0.18cqw);
}

.home-view .profile-nav-item .message-badge {
  top: 3.75cqw;
  left: calc(50% + 1.25cqw);
  width: 2.222cqw;
  min-width: 2.222cqw;
  height: 2.222cqw;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
}

/*
 * 2026-08-14 pages 2-10
 * ---------------------
 * Stable visual chrome is a lossless crop from the approved screenshots.
 * The shared status bar above 8.333cqw stays untouched. Dynamic product,
 * keyword, amount and order fields are rendered above the slice.
 */
#appShell:not(.pixel-audit) #searchView::after,
#appShell:not(.pixel-audit) #resultsView::after,
#appShell:not(.pixel-audit) #promotionView::after,
#appShell:not(.pixel-audit) #productView::after,
#appShell:not(.pixel-audit) #checkoutView::after,
#appShell:not(.pixel-audit) #paymentView::after,
#appShell:not(.pixel-audit) #paymentResultView::after {
  position: absolute;
  z-index: 40;
  top: 8.333333cqw;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% - 8.333333cqw);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: "";
  pointer-events: none;
}

#appShell:not(.pixel-audit) #searchView::after {
  top: 0;
  height: 100%;
  display: block;
  background-image: url("design/slices/pages-20260814/page-02-dynamic-text-controls-clean-base.png");
  content: "";
}

/* Page 02 is a single-screen simulation.  Its width-based reference can be
 * taller than a short phone viewport (for example 375x667), but that overflow
 * must be clipped instead of turning the search screen into a scroll page. */
#appShell.route-search:not(.pixel-audit) #searchView {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

#appShell:not(.pixel-audit) #resultsView::after {
  background-image: url("design/slices/pages-20260814/page-03-below-status.png");
}

#appShell:not(.pixel-audit) #promotionView::after {
  background-image: url("design/slices/pages-20260814/page-04-below-status-unified-red.png");
}

#appShell:not(.pixel-audit) #productView::after {
  background-image: url("design/slices/pages-20260814/page-05-below-status.png");
}

#appShell:not(.pixel-audit) #checkoutView[data-mode="spec"]::after {
  background-image: url("design/slices/pages-20260814/page-06-below-status.png");
}

#appShell:not(.pixel-audit) #checkoutView[data-mode="order"]::after {
  background-image: url("design/slices/pages-20260814/page-10-below-status-dynamic-clean.png");
}

#appShell:not(.pixel-audit) #paymentView::after,
#appShell:not(.pixel-audit).route-payment:not(.payment-success) #paymentView::after {
  background-image: url("design/slices/pages-20260814/page-07-below-status-dynamic-clean.png?v=20260817-3");
}

#appShell:not(.pixel-audit) #paymentResultView::after {
  background-image: url("design/slices/pages-20260814/page-09-below-status.png");
}

/* Search controls are real DOM so input never double-paints or shifts. */
#appShell:not(.pixel-audit) #searchView .commerce-search-header,
#appShell:not(.pixel-audit) #resultsView .commerce-search-header {
  position: absolute;
  z-index: 45;
  top: 8.333333cqw;
  right: 0;
  left: 0;
  background: transparent;
  pointer-events: none;
}

#appShell:not(.pixel-audit) #searchView::before,
#appShell:not(.pixel-audit) #resultsView::before {
  display: none;
}

#appShell:not(.pixel-audit) #searchView .commerce-search-header button,
#appShell:not(.pixel-audit) #resultsView .commerce-search-header button,
#appShell:not(.pixel-audit) #searchView .route-search-form,
#appShell:not(.pixel-audit) #resultsView .route-search-form {
  pointer-events: auto;
}

#appShell:not(.pixel-audit) #resultsView #resultsSearchSubmit:disabled {
  pointer-events: none;
}

#appShell:not(.pixel-audit) #searchView .back-button img,
#appShell:not(.pixel-audit) #searchView .scan-button img,
#appShell:not(.pixel-audit) #searchView .search-submit-button,
#appShell:not(.pixel-audit) #resultsView .back-button img,
#appShell:not(.pixel-audit) #resultsView .clear-search-button img,
#appShell:not(.pixel-audit) #resultsView .search-submit-button {
  opacity: 0;
}

#appShell:not(.pixel-audit) #searchView .route-search-form,
#appShell:not(.pixel-audit) #resultsView .route-search-form {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#appShell:not(.pixel-audit) #routeSearchInput,
#appShell:not(.pixel-audit) #resultsSearchInput {
  position: relative;
  z-index: 1;
  border: 0;
  background: #f3f4f7;
  color: #55565b;
  caret-color: #ff2d49;
}

/* The approved page-02 cutout stays visually authoritative. Only the query
 * and hot-list strings are repainted over their exact original text bands. */
#appShell.route-search:not(.pixel-audit) #searchView .commerce-search-header {
  top: 8.333333cqw;
  opacity: 1;
}

#appShell.route-search:not(.pixel-audit) #searchView .route-search-form {
  position: absolute;
  top: 0;
  left: 13.611111cqw;
  z-index: 51;
  display: block;
  width: 69.444444cqw;
  height: 10cqw;
  pointer-events: auto;
}

#appShell.route-search:not(.pixel-audit) #searchView .search-submit-button {
  position: absolute;
  z-index: 55;
  top: 0;
  right: 3.2cqw;
  width: 12cqw;
  min-width: 0;
  height: 10cqw;
  padding: 0;
  border: 0;
  background: transparent;
}

#appShell.route-search:not(.pixel-audit) #routeSearchInput {
  position: absolute;
  inset: 0;
  z-index: 53;
  width: 100%;
  height: 100%;
  padding: 0 13.888889cqw 0 0.740741cqw;
  border: 0;
  background: transparent;
  color: #67686d;
  caret-color: #ff2d49;
  font-size: 3.981481cqw;
  font-weight: 400;
  line-height: normal;
  outline: 0;
}

#appShell.route-search:not(.pixel-audit) #routeSearchInput::placeholder {
  color: transparent;
}

#appShell.route-search:not(.pixel-audit) #searchView .scan-button {
  position: absolute;
  z-index: 54;
  top: 0;
  right: 0;
  width: 11.111111cqw;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

#appShell.route-search:not(.pixel-audit) #searchView .route-search-clear {
  position: absolute;
  z-index: 55;
  top: 2.067901cqw;
  right: 3.055556cqw;
  width: 6.111111cqw;
  height: 6.111111cqw;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(0.333333px);
}

#appShell.route-search:not(.pixel-audit) #searchView .route-search-clear[hidden],
#appShell.route-search:not(.pixel-audit) #searchView .route-search-form.has-input-value .scan-button {
  display: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .route-search-clear img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 8.333333cqw;
  max-width: none;
  height: 6.111111cqw;
}

#appShell.route-search:not(.pixel-audit) .search-placeholder-roller {
  position: absolute;
  z-index: 52;
  top: 0;
  left: 0.740741cqw;
  display: block;
  width: 46.759259cqw;
  height: 7.314815cqw;
  box-sizing: content-box;
  margin-top: 1.574074cqw;
  overflow: hidden;
  background: transparent;
  color: #67686d;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 3.981481cqw;
  font-weight: 400;
  line-height: 7.314815cqw;
  opacity: 1;
  pointer-events: none;
}

#appShell.route-search:not(.pixel-audit) .search-placeholder-track {
  display: grid;
  height: 14.62963cqw;
  grid-template-rows: repeat(2, 7.314815cqw);
  transform: translateY(0);
  transition: transform 280ms cubic-bezier(0.22, 0.75, 0.26, 1);
  will-change: transform;
}

#appShell.route-search:not(.pixel-audit) .search-placeholder-track.is-rolling {
  transform: translateY(-7.314815cqw);
}

#appShell.route-search:not(.pixel-audit) .search-placeholder-track.is-resetting {
  transition: none;
}

#appShell.route-search:not(.pixel-audit) .search-placeholder-track span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.route-search:not(.pixel-audit) .route-search-form.has-input-value .search-placeholder-roller,
#appShell.route-search:not(.pixel-audit) .route-search-form.is-input-focused .search-placeholder-roller {
  visibility: hidden;
  opacity: 0;
}

#appShell.route-search:not(.pixel-audit) #searchView.has-search-associations .commerce-search-header {
  z-index: 60;
}

#appShell.route-search:not(.pixel-audit) #searchView.has-search-associations::before {
  position: absolute;
  z-index: 58;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 21.388889cqw;
  background: transparent url("design/slices/pages-20260814/page-02-dynamic-text-controls-clean-base.png") top center / 100% auto no-repeat;
  content: "";
  pointer-events: none;
}

/* The autocomplete view replaces the discovery canvas.  Leaving the live
 * hot-list text visible under the opaque list causes two unrelated states to
 * paint on top of each other after the user starts typing. */
#appShell.route-search:not(.pixel-audit) #searchView.has-search-associations .hot-list,
#appShell.route-search:not(.pixel-audit) #searchView.has-search-associations .hot-lead-paint {
  visibility: hidden;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete:not([hidden]) {
  position: absolute;
  z-index: 56;
  top: 13.055556cqw;
  left: -13.611111cqw;
  display: block;
  width: 100cqw;
  height: calc(100dvh - 21.388889cqw);
  overflow: hidden;
  border: 0;
  background: #fff;
  pointer-events: auto;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-list {
  display: block;
  width: 100%;
  padding: 0 5.185185cqw;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-option {
  display: grid;
  width: 100%;
  height: 12.962963cqw;
  grid-template-columns: 6.111111cqw minmax(0, 1fr);
  gap: 2.222222cqw;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid #f0f1f4;
  /* Suggestions replace the discovery page while the input is active. */
  background: #fff;
  color: #292a2e;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 3.981481cqw;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-option:last-child {
  border-bottom: 0;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-option.is-active,
#appShell.route-search:not(.pixel-audit) .search-autocomplete-option:active {
  background: #f5f6f8;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-icon {
  display: block;
  width: 6.111111cqw;
  height: 6.111111cqw;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-label {
  display: block;
  overflow: hidden;
  color: #242529;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.route-search:not(.pixel-audit) .search-autocomplete-query {
  padding: 0;
  background: transparent;
  color: #ff2d55;
}

#appShell.route-search:not(.pixel-audit) .search-floating-submit {
  position: absolute;
  z-index: 2;
  right: 4.166667cqw;
  bottom: 8.333333cqw;
  width: 15.740741cqw;
  height: 16.666667cqw;
  padding: 0;
  border: 0;
  background: transparent;
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) .search-floating-submit {
  bottom: calc(var(--search-keyboard-inset, 0px) + 3.055556cqw);
}

#appShell.route-search:not(.pixel-audit) .search-floating-submit img {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  #appShell.route-search:not(.pixel-audit) .search-placeholder-track {
    transition-duration: 1ms;
  }
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list {
  position: absolute;
  z-index: 51;
  top: 92.87037cqw;
  left: 12.685185cqw;
  display: block;
  width: 82.685185cqw;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-lead-paint {
  position: absolute;
  z-index: 51;
  top: 81.666667cqw;
  left: 14.814815cqw;
  display: flex;
  width: 45.37037cqw;
  height: 6.574074cqw;
  align-items: center;
  overflow: hidden;
  background: transparent;
  color: #242424;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 3.703704cqw;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-lead {
  display: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list ol {
  display: grid;
  gap: 4.62963cqw;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li {
  display: grid;
  width: 100%;
  min-height: 6.481481cqw;
  grid-template-columns: 64.444444cqw 14.444444cqw;
  align-items: center;
  gap: 3.796296cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  font-size: 3.703704cqw;
  line-height: 1;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li b {
  display: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li > .hot-list-title,
#appShell.route-search:not(.pixel-audit) #searchView .hot-list li em {
  display: flex;
  height: 6.481481cqw;
  align-items: center;
  overflow: hidden;
  background: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li:nth-child(-n+3) > .hot-list-title,
#appShell.route-search:not(.pixel-audit) #searchView .hot-list li:nth-child(-n+3) em {
  background-color: transparent;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li > .hot-list-title {
  min-width: 0;
  color: #242424;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list .hot-list-title-text {
  display: block;
  min-width: 0;
  height: auto;
  flex: 0 1 auto;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list .hot-list-badge {
  display: block;
  width: 4.444444cqw;
  height: 4.444444cqw;
  flex: 0 0 auto;
  margin-left: 1.388889cqw;
  object-fit: fill;
  transform: translateY(0.277778cqw);
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li:nth-child(11) > .hot-list-title {
  max-width: 55.277778cqw;
}

#appShell.route-search:not(.pixel-audit) #searchView .hot-list li em {
  justify-content: flex-end;
  color: #a0a0a0;
  font-size: 3.240741cqw;
  font-style: normal;
}


#appShell.route-search:not(.pixel-audit) #searchView .search-floating-actions {
  display: block;
  position: fixed;
  z-index: 62;
  top: var(--search-visible-top, 0px);
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(100vw, 430px);
  height: var(--search-visible-height, 100dvh);
  pointer-events: none;
  transform: translateX(-50%);
}

#appShell.route-search:not(.pixel-audit) #searchView .search-floating-actions button {
  top: auto;
  bottom: 11.544cqw;
}

#appShell.route-search:not(.pixel-audit) #searchView .voice-search-button {
  display: grid;
}

#appShell.route-search:not(.pixel-audit) #searchView .voice-search-button img,
#appShell.route-search:not(.pixel-audit) #searchView .search-ai-button img {
  filter: drop-shadow(0 0.555556cqw 1.111111cqw rgb(0 0 0 / 14%));
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView .search-floating-actions {
  display: block;
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView .voice-search-button {
  display: grid;
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView::after {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: 222.222222cqw;
  background-position: top center;
  background-size: 100% auto;
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView .search-floating-actions button {
  top: auto;
  bottom: max(3.055556cqw, env(safe-area-inset-bottom));
}

/* The cleaned reference contains no baked floating controls.  Keep the exact
 * AI cutout visible as the single responsive visual source at every ratio. */
#appShell.route-search:not(.pixel-audit) #searchView .search-ai-button img {
  opacity: 1;
}

@media (min-aspect-ratio: 12 / 25) {
  #appShell.route-search:not(.search-keyboard-open):not(.pixel-audit) #searchView .voice-search-button,
  #appShell.route-search:not(.search-keyboard-open):not(.pixel-audit) #searchView .search-ai-button {
    bottom: 8.333333cqw;
  }
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView .voice-search-button:active {
  transform: translateX(-50%);
}

#appShell.route-search.search-keyboard-open:not(.pixel-audit) #searchView .search-ai-button:active {
  transform: none;
}

#appShell.route-search:not(.pixel-audit) #searchView.has-search-associations .search-ai-button {
  display: none;
}

/* The default discovery page follows the supplied voice + AI reference.
 * Only a dismissed-keyboard association state hides voice and leaves the
 * dedicated right-side search action visible. */
#appShell.route-search:not(.search-keyboard-open):not(.pixel-audit) #searchView.has-search-associations .voice-search-button {
  display: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .search-voice-hotspot,
#appShell.route-search:not(.pixel-audit) #searchView .search-ai-hotspot {
  display: none;
}

#appShell.route-search:not(.pixel-audit) #searchView .search-voice-hotspot {
  left: 36.666667cqw;
  width: 28.333333cqw;
  height: 10cqw;
}

#appShell.route-search:not(.pixel-audit) #searchView .search-ai-hotspot {
  right: 4.62963cqw;
  width: 10.185185cqw;
  height: 10.185185cqw;
}

/* Search result media and promotion products are the configured live data. */
#appShell:not(.pixel-audit) #resultsView .product-grid {
  position: absolute;
  z-index: 45;
  top: 74.7cqw;
  right: 0;
  left: 0;
  min-height: calc(100% - 74.7cqw);
  padding: 0 1.1cqw 8cqw;
  background: #f4f5f7;
}

#appShell:not(.pixel-audit) #promotionView .promotion-list {
  position: absolute;
  z-index: 45;
  top: 98cqw;
  right: 0;
  left: 0;
  min-height: calc(100% - 98cqw);
  padding-top: 0;
  background: transparent;
}

#appShell:not(.pixel-audit) #promotionView .promotion-product {
  min-height: 40cqw;
}

/* Two-stage product detail drawer used when a product is opened from a list.
 * The live detail view is reused so prices, media and purchase actions stay
 * identical to the dedicated product route. */
.product-drawer-backdrop {
  position: absolute;
  z-index: 79;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgb(0 0 0 / 0.56);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

#appShell.product-drawer-open #productView {
  position: absolute;
  z-index: 80;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  overflow: hidden;
  border-radius: 3.8cqw 3.8cqw 0 0;
  transform: translateY(0);
  transition: top 250ms cubic-bezier(.2,.8,.25,1), height 250ms cubic-bezier(.2,.8,.25,1), transform 280ms cubic-bezier(.2,.8,.25,1);
}

#appShell.product-drawer-open #productView.is-drawer-entering {
  transform: translateY(100%);
}

#appShell.product-drawer-open #productView.is-drawer-expanded {
  top: 0;
  height: 100%;
  border-radius: 0;
}

#appShell.product-drawer-open #productView::after {
  display: none !important;
  content: none !important;
}

#appShell.product-drawer-open #productView .product-reference-live {
  display: none !important;
}

#appShell.product-drawer-open #productView .product-status-cutout {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-status-cutout {
  display: block;
}

#appShell.product-drawer-open #productView .product-topbar {
  opacity: 0;
  pointer-events: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-topbar {
  opacity: 1;
  pointer-events: none;
}

#appShell.product-drawer-open #productView .product-drawer-close {
  display: grid;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-drawer-close {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-scroll {
  overflow-y: hidden !important;
  touch-action: pan-y;
}

.product-drawer-close {
  position: absolute;
  z-index: 90;
  top: 3.2cqw;
  right: 3.2cqw;
  display: none;
  width: 11cqw;
  height: 11cqw;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(92 97 103 / 0.58);
  color: #fff;
  pointer-events: auto;
}

/* The drawer reference uses a shorter gallery in the 80% state and the
 * regular full-size gallery after the second upward gesture. */
#productView .product-status-cutout {
  height: 8.52cqw;
}

#appShell.product-drawer-open #productView .product-status-cutout img {
  display: block;
}

#productView .product-topbar {
  top: 9cqw;
}

#productView .product-scroll {
  padding-bottom: calc(29cqw + env(safe-area-inset-bottom));
}

#productView .product-gallery {
  height: 107.2cqw;
  transition: height 250ms cubic-bezier(.2,.8,.25,1);
}

#productView .product-gallery > #productHeroImage {
  position: relative;
  z-index: 1;
  padding-top: 6cqw;
  transform: scale(1);
  transform-origin: center;
  transition: padding-top 250ms cubic-bezier(.2,.8,.25,1), transform 250ms cubic-bezier(.2,.8,.25,1);
}

#productView .product-gallery > .product-hero-peek {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery {
  height: 81.5cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery > #productHeroImage {
  padding-top: 0;
  transform: scale(.985);
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery > .product-hero-peek {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 87cqw;
  display: block;
  width: 81.5cqw;
  height: 81.5cqw;
  padding: 0;
  background: #fff;
  object-fit: contain;
  pointer-events: none;
}

#productView .product-gallery > .find-similar {
  z-index: 3;
  width: 20cqw;
  height: 6.111111cqw;
  bottom: 3.60677cqw;
  left: 2.87471cqw;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#productView .product-gallery > .find-similar img {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: inset(4.545% 2.315% 0 2.778% round 999px);
  object-fit: cover;
}

#productView .gallery-tabs {
  z-index: 3;
  min-width: 24cqw;
  gap: 0;
  padding-right: 8.5cqw;
}

#productView .gallery-count,
#productView .gallery-tabs + .gallery-count {
  z-index: 4;
}

#productView .product-offer-row {
  min-height: 11.8cqw;
  grid-template-columns: minmax(0, 1fr);
  padding: 2.5cqw 4.4cqw;
}

#productView .product-offer-row strong {
  padding: 1.3cqw 2.3cqw;
  border-radius: .8cqw;
  background: #fff0f1;
  color: #ed3942;
  font-size: 3.8cqw;
}

#productView .product-info-block {
  padding: 2.8cqw 4.4cqw 3.2cqw;
}

#productView .product-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.4cqw;
}

#productView .product-title-line h1 {
  min-width: 0;
  overflow: hidden;
  font-size: 4.35cqw;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .trust-purchase-label {
  flex: 0 0 auto;
  margin-top: 0;
  padding: .7cqw 1.2cqw;
  background: #e9f8f4;
  color: #12a988;
  font-size: 3.35cqw;
}

#productView .brand-guarantee-row {
  display: none;
}

#productView .product-benefit-strip {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.2cqw;
  margin-top: 3.1cqw;
  overflow: hidden;
}

#productView .return-freight-cutout {
  position: relative;
  top: 0;
  flex: 0 0 auto;
  width: 26.111111cqw;
  height: auto;
  margin-left: -.13266cqw;
  border-radius: 0;
}

#productView .detail-tags {
  min-width: 0;
  gap: 1.2cqw;
  margin-top: 0;
  padding: 0;
}

#productView .detail-tags span,
#productView .detail-tags span:first-child {
  padding: 1.45cqw 2cqw;
  border: 0;
  border-radius: .8cqw;
  background: #f6f7fa;
  color: #556075;
  font-size: 3.2cqw;
}

#productView .product-service-row {
  min-height: 13.2cqw;
}

#productView .delivery-row {
  min-height: 20.2cqw;
}

#productView .delivery-row strong,
#productView .delivery-row p span {
  color: #303238;
}

#productView .delivery-row strong,
#productView .delivery-row p span:first-of-type {
  color: #f09a00;
}

#productView .product-service-row p {
  overflow: hidden;
  font-size: 3.45cqw;
}

#productView .product-service-row small {
  margin-top: 1.8cqw;
  font-size: 3.45cqw;
}

#productView .government-subsidy-cutout {
  display: block;
  width: 100%;
  height: 11.203704cqw;
  object-fit: fill;
  transform: translateY(-.133333cqw);
}

#productView .purchase-bar {
  min-height: 16.5cqw;
  grid-template-columns: 9.2cqw 9.2cqw 9.2cqw minmax(0, 1fr);
  gap: 1.2cqw;
  padding: 1.4cqw 2.8cqw 1.4cqw;
}

#productView .purchase-bar > button:not(.buy-button) {
  height: 13.7cqw;
}

#productView .purchase-bar > button:first-child img {
  position: relative;
  top: 0;
  left: -.26755cqw;
  width: 6.666667cqw;
  height: 6.666667cqw;
  border: 0;
  border-radius: 0;
  background: #fff;
  object-fit: cover;
}

#productView .purchase-bar .buy-button {
  height: 13.7cqw;
  grid-template-columns: 11.5cqw minmax(0, 1fr);
  padding-right: 2cqw;
  border-radius: 2.2cqw;
}

#productView .purchase-bar .buy-button img {
  width: 11.5cqw;
  height: 13.7cqw;
}

.product-drawer-close {
  top: 2.962963cqw;
  right: 2.962963cqw;
  width: 7.407407cqw;
  height: 7.407407cqw;
  border-radius: 0;
  background: transparent;
}

.product-drawer-close img {
  display: block;
  width: 90%;
  height: auto;
  border-radius: 50%;
}

/* Product page: screenshot cutout plus the configured product data. */
.product-reference-live,
.spec-reference-live,
.order-reference-live,
.payment-reference-live,
.success-reference-live {
  position: absolute;
  z-index: 45;
  inset: 0;
  pointer-events: none;
}

.product-reference-live > *,
.spec-reference-live > *,
.order-reference-live > *,
.payment-reference-live > *,
.success-reference-live > * {
  position: absolute;
  box-sizing: border-box;
}

.product-reference-live button,
.spec-reference-live button,
.payment-reference-live button,
.success-reference-live button {
  pointer-events: auto;
}

/*
 * Phone browsers frequently expose a shorter content viewport while their
 * address bar is visible. Keep the full-page reference aligned from the top,
 * then pin exact bottom crops so primary actions remain visible without
 * stretching or redrawing the supplied pixels.
 */
.product-reference-live::after,
.spec-reference-live::after,
.payment-reference-live::after,
.success-reference-live::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  pointer-events: none;
}

/* The checkout reference is a lossless raster chrome layer. Live DOM only
 * supplies approved dynamic values and keeps the controls interactive. The
 * shared status bar above it masks the reference's source status pixels. */
#appShell:not(.pixel-audit) .spec-reference-live::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("design/slices/checkout-spec-reference-20260816/checkout-spec-clean.png") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet,
#appShell:not(.pixel-audit) .spec-sheet-scroll {
  background: transparent;
}

#appShell:not(.pixel-audit) .spec-guarantee-row,
#appShell:not(.pixel-audit) .spec-address-row,
#appShell:not(.pixel-audit) .spec-delivery-row,
#appShell:not(.pixel-audit) .spec-store-row,
#appShell:not(.pixel-audit) .spec-product-card,
#appShell:not(.pixel-audit) .spec-discount-row,
#appShell:not(.pixel-audit) .spec-options-section,
#appShell:not(.pixel-audit) .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-payment-footer {
  background-color: transparent;
  border-color: transparent;
}

#appShell:not(.pixel-audit) .spec-guarantee-icon,
#appShell:not(.pixel-audit) .spec-address-row > img,
#appShell:not(.pixel-audit) .spec-store-row > span,
#appShell:not(.pixel-audit) #specProductImage,
#appShell:not(.pixel-audit) .spec-quantity-control button,
#appShell:not(.pixel-audit) .spec-option > img,
#appShell:not(.pixel-audit) .spec-option-hot,
#appShell:not(.pixel-audit) .spec-payment-select > span,
#appShell:not(.pixel-audit) .spec-payment-select > b {
  opacity: 0;
}

#appShell:not(.pixel-audit) .spec-close-button::before,
#appShell:not(.pixel-audit) .spec-close-button::after {
  display: none;
}

#appShell:not(.pixel-audit) .spec-product-card,
#appShell:not(.pixel-audit) .spec-discount-row,
#appShell:not(.pixel-audit) .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-options-section,
#appShell:not(.pixel-audit) .spec-payment-footer .spec-immediate-pay {
  border: 0;
}

#appShell:not(.pixel-audit) .spec-options-list {
  width: 85cqw;
}

.product-reference-live::after {
  height: 18.518519cqw;
  background-image: url("design/slices/pages-20260814/responsive/page-05-bottom.png");
}

.spec-reference-live::after {
  height: 28.703704cqw;
  background-image: url("design/slices/pages-20260814/responsive/page-06-bottom.png");
}

.payment-reference-live::after {
  height: 34.259259cqw;
  background-image: url("design/slices/pages-20260814/responsive/page-07-bottom.png");
}

/* The bottom payment crop starts on a fractional pixel at some device
 * densities. Overlap the edge by a full CSS pixel on both sides so raster
 * rounding cannot expose the layer underneath. */
#appShell:not(.pixel-audit).route-payment:not(.payment-success) .payment-reference-live::before {
  position: absolute;
  z-index: 1;
  top: calc(100% - 34.259259cqw - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: #f5f8fd;
  content: "";
  pointer-events: none;
}

.success-reference-live::after {
  height: 29.62963cqw;
  background-image: url("design/slices/pages-20260814/responsive/page-08-bottom.png");
}

#appShell:not(.pixel-audit).route-payment.payment-success .success-reference-live::before {
  position: absolute;
  z-index: 1;
  top: calc(100% - 29.62963cqw - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: #f5f5f5;
  content: "";
  pointer-events: none;
}

.product-reference-live #referenceProductImage {
  top: 51.6cqw;
  left: 10.5cqw;
  width: 60.5cqw;
  height: 66.5cqw;
  background: #fff;
  object-fit: contain;
}

.reference-product-price {
  top: 128.2cqw;
  left: 0;
  display: flex;
  width: 67cqw;
  height: 9.7cqw;
  align-items: baseline;
  gap: 0.7cqw;
  padding: 1.3cqw 0 0.8cqw 3.8cqw;
  background: #f71920;
  color: #fff;
  font-size: 3.7cqw;
}

.reference-product-price strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 6.2cqw;
  line-height: 1;
}

.reference-product-price strong .spec-price-major {
  font-size: 6.2cqw;
}

.reference-product-price strong .spec-price-minor {
  font-size: 4.55cqw;
}

.reference-product-price em {
  padding: 0.45cqw 1cqw;
  border-radius: 0.7cqw;
  background: #fff;
  color: #ee222b;
  font-size: 3.1cqw;
  font-style: normal;
}

.reference-product-original {
  top: 137.2cqw;
  left: 0;
  width: 67cqw;
  min-height: 6.5cqw;
  margin: 0;
  padding: 0.5cqw 0 0 3.8cqw;
  background: #f71920;
  color: #fff;
  font-size: 3.4cqw;
}

.product-reference-live #referenceProductTitle {
  top: 157cqw;
  left: 4.5cqw;
  width: 75cqw;
  min-height: 10cqw;
  margin: 0;
  padding: 0.5cqw 0;
  overflow: hidden;
  background: #fff;
  color: #1f2024;
  font-size: 4.2cqw;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-buy-button {
  right: 3.2cqw;
  bottom: 3cqw;
  display: grid;
  width: 50.8cqw;
  height: 11.8cqw;
  place-content: center;
  gap: 0.5cqw;
  border: 0;
  border-radius: 2.5cqw;
  background: #f83236;
  color: #fff;
}

.reference-buy-button strong {
  font-size: 4.5cqw;
}

.reference-buy-button small {
  color: #fff;
  font-size: 2.9cqw;
}

/* Reference 6: live values cover only the variable product fields. */
.checkout-view:not([data-mode="spec"]) .spec-reference-live,
.checkout-view:not([data-mode="order"]) .order-reference-live {
  display: none;
}

.checkout-view[data-mode="spec"] .checkout-action-bar,
.checkout-view[data-mode="spec"] .checkout-header,
.checkout-view[data-mode="spec"] .checkout-scroll {
  opacity: 0;
  pointer-events: none;
}

.spec-close-button {
  top: 25cqw;
  right: 3.5cqw;
  width: 8cqw;
  height: 8cqw;
  border: 0;
  background: transparent;
}

.spec-reference-live #specProductImage {
  top: 68cqw;
  left: 6.4cqw;
  width: 29.8cqw;
  height: 29.8cqw;
  border-radius: 1cqw;
  background: #f5f6f8;
  object-fit: contain;
}

.spec-reference-live #specProductTitle {
  top: 68.2cqw;
  left: 38.3cqw;
  width: 53cqw;
  min-height: 8.5cqw;
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: #1f2024;
  font-size: 3.9cqw;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spec-product-price {
  top: 76cqw;
  left: 38.3cqw;
  display: flex;
  width: 56cqw;
  min-height: 10cqw;
  align-items: baseline;
  gap: 0.7cqw;
  margin: 0;
  padding-top: 1cqw;
  background: #fff;
  color: #e93337;
  font-size: 3.7cqw;
}

.spec-product-price strong {
  font-size: 5.8cqw;
}

.spec-product-price del {
  color: #8b8f9b;
  font-size: 3.3cqw;
}

.spec-subsidy {
  top: 106.3cqw;
  right: 4.4cqw;
  width: 46cqw;
  min-height: 7cqw;
  margin: 0;
  padding-top: 1cqw;
  background: #fff;
  color: #e93337;
  font-size: 3.7cqw;
  text-align: right;
}

.spec-immediate-pay {
  right: 4.4cqw;
  bottom: 3.2cqw;
  left: 4.4cqw;
  height: 12.7cqw;
  border: 0;
  border-radius: 1.8cqw;
  background: #f83236;
  color: #fff;
  font-size: 4.6cqw;
  font-weight: 700;
}

.spec-immediate-pay strong {
  font-size: 5.2cqw;
}

/* Checkout keeps the approved reference composition, but its product fields
 * must remain visible so each route can display the active product data. */
#appShell:not(.pixel-audit) .spec-reference-live > *:not(.spec-close-button):not(.spec-immediate-pay) {
  display: block;
}

.spec-reference-live #specAddressText,
.spec-reference-live #specDeliveryText {
  left: 12.2cqw;
  width: 77cqw;
  height: 8cqw;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  color: #24262b;
  font-size: 3.7cqw;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

.spec-reference-live #specAddressText {
  top: 37.5cqw;
}

.spec-reference-live #specDeliveryText {
  top: 45.1cqw;
  color: #f08a00;
}

.spec-reference-live #specStoreBrand {
  top: 58.4cqw;
  left: 6.2cqw;
  width: 78cqw;
  height: 8cqw;
  padding: 0 0.5cqw;
  overflow: hidden;
  background: #f71920;
  color: #fff;
  font-size: 4.2cqw;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

/* Reference 10: pending-shipment order remains data-driven. */
.checkout-view[data-mode="order"] .checkout-header,
.checkout-view[data-mode="order"] .checkout-scroll,
.checkout-view[data-mode="order"] .checkout-action-bar {
  opacity: 0;
  pointer-events: none;
}

.order-reference-live #orderReferenceAddress {
  top: 77cqw;
  left: 10.7cqw;
  width: 73cqw;
  height: 10cqw;
  overflow: hidden;
  background: transparent;
  color: #202126;
  font-size: 3.8cqw;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceRecipient {
  top: 83.5cqw;
  left: 10.7cqw;
  width: 72cqw;
  height: 9cqw;
  overflow: hidden;
  background: transparent;
  color: #737987;
  font-size: 3.1cqw;
  font-weight: 400;
  line-height: 1.45;
}

.order-reference-live #orderReferenceStoreMark {
  top: 96.1cqw;
  left: 4cqw;
  width: 10cqw;
  height: 10cqw;
  border-radius: 1.5cqw;
  background: #111936;
  object-fit: cover;
}

.order-reference-live #orderReferenceStoreMark.is-fallback {
  padding: 1.55cqw;
  border: 1px solid #eceef3;
  background: #fff;
  object-fit: contain;
}

.order-reference-live #orderReferenceBrand {
  top: 95cqw;
  left: 15.5cqw;
  width: 68cqw;
  height: 6.1cqw;
  overflow: hidden;
  background: transparent;
  color: #24252a;
  font-size: 3.8cqw;
  font-weight: 400;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceProductImage {
  top: 111.1cqw;
  left: 4cqw;
  width: 20cqw;
  height: 20cqw;
  border-radius: 1.2cqw;
  background: #f2f3f6;
  object-fit: cover;
}

.order-reference-live #orderReferenceCampaign {
  top: 111.2cqw;
  left: 25.7cqw;
  width: 8.611111cqw;
  height: 3.888889cqw;
  object-fit: contain;
}

.order-reference-live #orderReferenceProductTitle {
  top: 110.7cqw;
  left: 34.8cqw;
  right: 18.5cqw;
  width: auto;
  height: 5.3cqw;
  margin: 0;
  overflow: hidden;
  background: transparent;
  color: #25262b;
  font-size: 3.45cqw;
  font-weight: 400;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceSpecification {
  top: 117.4cqw;
  left: 25.8cqw;
  width: 56cqw;
  height: 6cqw;
  overflow: hidden;
  color: #747b8a;
  font-size: 3.1cqw;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceGuarantee {
  top: 122.4cqw;
  right: auto;
  left: 24.8cqw;
  z-index: 2;
  display: inline-flex;
  max-width: 62cqw;
  height: 7.1cqw;
  align-items: center;
  padding: 0 0 0 1cqw;
  overflow: hidden;
  background: transparent;
  color: #0ca885;
  font-size: 3.25cqw;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceGuarantee::after {
  width: 1.45cqw;
  height: 1.45cqw;
  flex: 0 0 auto;
  margin-left: 1.4cqw;
  border-top: .38cqw solid #0ca885;
  border-right: .38cqw solid #0ca885;
  content: "";
  transform: rotate(45deg);
}

.order-reference-live #orderReferencePrice {
  top: 110.4cqw;
  right: 3.7cqw;
  max-width: 17cqw;
  height: 11cqw;
  overflow: hidden;
  padding-top: 0.4cqw;
  background: transparent;
  color: #24252a;
  font-size: 3.8cqw;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferencePaid {
  top: 150.5cqw;
  right: 4cqw;
  z-index: 2;
  max-width: 31cqw;
  height: 10cqw;
  overflow: hidden;
  padding-top: 0.5cqw;
  padding-left: 4cqw;
  background: #fff;
  color: #202126;
  font-size: 4.2cqw;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live::before {
  position: absolute;
  z-index: 1;
  top: 149.7cqw;
  left: 14.35cqw;
  width: 49cqw;
  height: 8.1cqw;
  background: #fff;
  content: "";
  pointer-events: none;
}

.order-reference-live::after {
  position: absolute;
  z-index: 1;
  top: 122.4cqw;
  right: 11.8cqw;
  left: 24.8cqw;
  height: 7.1cqw;
  background: #fff;
  content: "";
  pointer-events: none;
}

.order-reference-live #orderReferenceSaved {
  top: 150.7cqw;
  left: 15.2cqw;
  z-index: 2;
  display: inline-flex;
  max-width: 46cqw;
  height: 7cqw;
  align-items: center;
  overflow: hidden;
  background: #fff;
  color: #ef3438;
  font-size: 3.6cqw;
  font-weight: 400;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-reference-live #orderReferenceSaved[hidden] {
  display: none;
}

.order-reference-live #orderReferenceSaved::before {
  flex: 0 0 auto;
  margin-right: 1cqw;
  color: #d2d5dd;
  content: "|";
}

.order-reference-live #orderReferenceSaved::after {
  width: 2.962963cqw;
  height: 2.962963cqw;
  flex: 0 0 auto;
  margin-left: .8cqw;
  background: url("design/slices/pages-20260814/page-10-saved-chevron-down.png") center / contain no-repeat;
  content: "";
  transform: translateY(-.75cqw);
}

.order-reference-live #orderReferenceNumber {
  top: 160.55cqw;
  width: auto;
  height: 10cqw;
  overflow: hidden;
  background: transparent;
  color: #6e7484;
  font-size: 3.4cqw;
  right: 13cqw;
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
}

/* Page 10 keeps the approved raster chrome while exposing real, invisible
 * hit targets over the controls that are visible in the reference. */
.order-reference-hitbox {
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  opacity: 0;
  pointer-events: auto;
}

.order-reference-close { top: 57.6cqw; left: 3.4cqw; width: 8.5cqw; height: 9cqw; }
.order-reference-cart { top: 57.2cqw; left: 79.2cqw; width: 9.5cqw; height: 9.5cqw; }
.order-reference-more { top: 57.2cqw; right: 2.2cqw; width: 9cqw; height: 9.5cqw; }
.order-reference-address-edit { top: 76.5cqw; right: 2.2cqw; width: 12cqw; height: 7.5cqw; }
.order-reference-shop { top: 96.5cqw; right: 2.2cqw; width: 12cqw; height: 7.5cqw; }
.order-reference-recommend { top: 128.7cqw; right: 2.6cqw; width: 22cqw; height: 8.8cqw; }
.order-reference-share { top: 138.5cqw; right: 24.5cqw; width: 20cqw; height: 9cqw; }
.order-reference-refund { top: 138.5cqw; right: 2.6cqw; width: 20cqw; height: 9cqw; }
.order-reference-copy { top: 158.8cqw; right: 2.6cqw; width: 10cqw; height: 7cqw; }
.order-reference-info { top: 168.3cqw; right: 2.6cqw; width: 14cqw; height: 7cqw; }
.order-reference-payment-result { top: 176.9cqw; left: 0; width: 23cqw; height: 9.5cqw; }
.order-reference-contact { top: 176.9cqw; left: 38cqw; width: 24cqw; height: 9.5cqw; }
.order-reference-service { top: 199.5cqw; right: 2.2cqw; width: 17cqw; height: 8cqw; }
.order-reference-remind { top: 211.1cqw; right: 25.5cqw; width: 20.5cqw; height: 10cqw; }
.order-reference-address-edit-bottom { top: 211.1cqw; right: 2.2cqw; width: 20.5cqw; height: 10cqw; }

/* References 7 and 8: sliced Alipay chrome, live merchant/account/amount. */
.payment-reference-live #paymentReferenceAccountTop {
  top: 47cqw;
  left: 34cqw;
  width: 32cqw;
  color: #fff;
  font-size: 4.1cqw;
  text-align: center;
}

.payment-reference-live #paymentReferenceMerchant {
  top: 91cqw;
  left: 20cqw;
  width: 60cqw;
  overflow: hidden;
  color: #35363b;
  font-size: 3.9cqw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-reference-live #paymentReferenceAmount {
  top: 97cqw;
  left: 30cqw;
  width: 40cqw;
  color: #303136;
  font-size: 9.2cqw;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.payment-reference-live #paymentReferencePoints {
  top: 109cqw;
  left: 38.1cqw;
  width: 46cqw;
  color: #f06c2c;
  font-size: 3.7cqw;
  line-height: 1;
  white-space: nowrap;
}

.payment-reference-live #paymentReferencePointsIcon {
  top: 108.4cqw;
  left: 33cqw;
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
}

.payment-reference-live #paymentReferenceAccount {
  top: 122.2cqw;
  right: 4.3cqw;
  min-width: 31cqw;
  color: #33353a;
  font-size: 3.7cqw;
  text-align: right;
}

.payment-reference-live #paymentReferenceBank {
  top: 134.8cqw;
  left: 14cqw;
  width: 70cqw;
  overflow: hidden;
  color: #34353a;
  font-size: 3.7cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-reference-live #paymentReferenceAvatar {
  top: 28.1cqw;
  left: 43.1cqw;
  width: 14.1cqw;
  height: 13.6cqw;
  border-radius: 2.8cqw;
  object-fit: cover;
}

.payment-reference-live #paymentReferenceBankIcon {
  top: 135.2cqw;
  left: 7.2cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  object-fit: contain;
}

.payment-reference-live #paymentReferenceBank2Icon {
  top: 162.1cqw;
  left: 7.2cqw;
  width: 4.6cqw;
  height: 4.6cqw;
  object-fit: contain;
}

.payment-reference-live #paymentReferenceBank2 {
  top: 161.8cqw;
  left: 14cqw;
  width: 70cqw;
  overflow: hidden;
  color: #34353a;
  font-size: 3.7cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-reference-live #paymentReferencePay {
  right: 17.5cqw;
  bottom: 14.7cqw;
  left: 17.5cqw;
  height: 13.7cqw;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22aafb, #1677ff);
  color: #fff;
  font-size: 4.6cqw;
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay {
  z-index: 80;
  background: transparent;
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay::before {
  position: absolute;
  z-index: 0;
  top: 8.333333cqw;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("design/slices/pages-20260814/page-08-below-status-dynamic-clean.png") top center / 100% auto no-repeat;
  content: "";
  pointer-events: none;
}

#appShell:not(.pixel-audit).route-payment.payment-success .payment-success-card {
  opacity: 0;
}

#appShell:not(.pixel-audit).route-payment.payment-success .success-reference-live {
  z-index: 2;
  visibility: visible;
}

.success-reference-live #successReferenceAmount {
  top: 27.7cqw;
  left: 27cqw;
  width: 46cqw;
  background: transparent;
  color: #fff;
  font-size: 10.5cqw;
  font-weight: 500;
  text-align: center;
}

.success-reference-live #successReferenceMethod,
.success-reference-live #successReferenceMerchant {
  right: 6.8cqw;
  width: 57cqw;
  overflow: hidden;
  background: transparent;
  color: #fff;
  font-size: 3.7cqw;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.success-reference-live #successReferenceMethod {
  top: 49.3cqw;
}

.success-reference-live #successReferenceMerchant {
  top: 57.3cqw;
}

.success-reference-live .success-top-done {
  top: 12.5cqw;
  right: 4.2cqw;
  color: #fff;
  font-size: 4cqw;
}

.success-reference-live .success-bottom-done {
  right: 21.5cqw;
  bottom: 4.7cqw;
  left: 21.5cqw;
  height: 11.5cqw;
  border: 1px solid #2488f2;
  border-radius: 999px;
  background: #f5f5f5;
  color: #2488f2;
  font-size: 4.2cqw;
}

/* Reference 9: Kuaishou payment result and its two live destinations. */
.payment-result-view {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f4f5f8;
}

.payment-result-view > button,
.payment-result-view > strong,
.payment-result-view > span {
  position: absolute;
  z-index: 45;
}

.payment-result-back {
  top: 9.5cqw;
  left: 3.5cqw;
  width: 9cqw;
  height: 9cqw;
  border: 0;
  background: transparent;
  color: transparent;
}

.payment-result-amount {
  top: 20.8cqw;
  left: 37cqw;
  width: 26cqw;
  background: #f6f7fb;
  color: #1e1f24;
  font-size: 5.6cqw;
  text-align: center;
}

.payment-result-saving {
  top: 29.3cqw;
  left: 23cqw;
  width: 54cqw;
  overflow: hidden;
  background: #f6f7fb;
  color: #717786;
  font-size: 3.6cqw;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-result-order,
.payment-result-mall {
  top: 37cqw;
  width: 28cqw;
  height: 11cqw;
  border: 0;
  background: transparent;
  color: transparent;
}

.payment-result-order {
  left: 20.5cqw;
}

.payment-result-mall {
  right: 20.5cqw;
}

/* The result slice supplies the visual shell, while the order amount and
 * recommendation cards stay live so they always follow the configured order. */
.payment-result-recommendations {
  position: absolute;
  z-index: 46;
  top: 93.2cqw;
  right: 1.2cqw;
  left: 1.2cqw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2cqw;
  align-items: start;
  padding-bottom: 24cqw;
  background: #f4f5f8;
  pointer-events: none;
}

.payment-result-recommend-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 2.2cqw;
  background: #fff;
  box-shadow: 0 0.4cqw 1.2cqw rgb(28 32 42 / 0.04);
}

.payment-result-recommend-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f5f6f8;
}

.payment-result-recommend-title {
  display: -webkit-box;
  min-height: 9.2cqw;
  margin: 2.2cqw 2.8cqw 0;
  overflow: hidden;
  color: #1c1f26;
  font-size: 3.8cqw;
  font-weight: 500;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.payment-result-recommend-promo {
  display: inline-block;
  margin-right: 0.8cqw;
  padding: 0.35cqw 1cqw;
  border-radius: 0.6cqw;
  background: #ffea35;
  color: #1c1f26;
  font-size: 3.1cqw;
  font-weight: 700;
  line-height: 1.15;
  vertical-align: 0.08em;
}

.payment-result-recommend-subtitle {
  font-weight: 600;
}

.payment-result-recommend-labels {
  display: flex;
  min-height: 6.2cqw;
  align-items: center;
  gap: 1.8cqw;
  margin: 0.8cqw 2.8cqw 0;
  overflow: hidden;
  white-space: nowrap;
}

.payment-result-recommend-label {
  flex: 0 0 auto;
  color: #7d8592;
  font-size: 3.7cqw;
  font-weight: 500;
  line-height: 1.25;
}

.payment-result-recommend-label.is-green {
  color: #139c80;
}

.payment-result-recommend-label.is-gold {
  color: #b09c7f;
}

.payment-result-recommend-meta {
  display: flex;
  align-items: baseline;
  gap: 1.5cqw;
  min-width: 0;
  margin: 1.2cqw 2.8cqw 3cqw;
  white-space: nowrap;
}

.payment-result-recommend-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: #f23231;
  font-size: 4.7cqw;
  font-weight: 700;
  line-height: 1;
}

.payment-result-recommend-price .spec-price-currency {
  font-size: 3.2cqw;
  line-height: 1;
}

.payment-result-recommend-price .spec-price-major {
  font-size: 4.7cqw;
  line-height: 1;
}

.payment-result-recommend-price .spec-price-minor {
  font-size: 3.35cqw;
  line-height: 1;
}

.payment-result-recommend-sales {
  overflow: hidden;
  color: #7d8592;
  font-size: 3cqw;
  text-overflow: ellipsis;
}

#appShell.pixel-audit .payment-result-recommendations {
  display: none;
}

#appShell:not(.pixel-audit) .payment-result-saving {
  display: block;
}

#appShell:not(.pixel-audit) .payment-result-amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  line-height: 1;
  box-shadow: 0 -3cqw 0 #f6f7fb, 0 6cqw 0 #f6f7fb;
}

#appShell:not(.pixel-audit) .payment-result-amount .spec-price-currency {
  font-size: 3.75cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .payment-result-amount .spec-price-major {
  font-size: 5.6cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .payment-result-amount .spec-price-minor {
  font-size: 3.9cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) #paymentResultView::before {
  position: absolute;
  z-index: 44;
  top: 18cqw;
  right: 15cqw;
  left: 15cqw;
  height: 17cqw;
  background: #f6f7fb;
  content: "";
  pointer-events: none;
}

@media (max-width: 600px) {
  #appShell:not(.pixel-audit) #resultsView::after,
  #appShell:not(.pixel-audit) #promotionView::after,
  #appShell:not(.pixel-audit) #productView::after,
  #appShell:not(.pixel-audit) #checkoutView::after,
  #appShell:not(.pixel-audit) #paymentView::after,
  #appShell:not(.pixel-audit) #paymentResultView::after,
  #appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay::before {
    height: calc(100dvh - 8.333333cqw);
  }
}

/* Final cascade lock: the approved result and promotion pixels stay visible. */
#appShell:not(.pixel-audit) #resultsView .product-grid,
#appShell:not(.pixel-audit) #promotionView .promotion-list {
  z-index: 1 !important;
  opacity: 0;
}

/* Page 04 keeps the supplied screenshot as immutable chrome. Only the two
 * user-approved product regions rise above it: four flash-sale cards and the
 * featured list. Each flash card owns its white product rectangle so no stale
 * product pixels from the reference can show through around transparent art. */
#appShell:not(.pixel-audit) #promotionView .flash-sale-card {
  position: relative;
  z-index: 45;
  margin-top: calc(-1 * var(--promotion-flash-overlap));
  box-shadow: -1cqw 0 var(--promotion-red), 1cqw 0 var(--promotion-red);
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-card::before {
  position: absolute;
  z-index: 0;
  inset: -1px 0 0;
  border-radius: inherit;
  background: #fff;
  pointer-events: none;
  content: "";
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-card::after {
  position: absolute;
  z-index: 0;
  top: 100%;
  right: 0;
  left: 0;
  height: 0;
  background: var(--promotion-red);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, transparent 100%);
  pointer-events: none;
  content: "";
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-card > header {
  position: relative;
  z-index: 1;
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-products {
  position: relative;
  z-index: 1;
  background: #fff;
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-products::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  background: #fff;
  pointer-events: none;
  content: "";
}

#appShell:not(.pixel-audit) #promotionView .flash-sale-item {
  position: relative;
  z-index: 1;
  background: #fff;
}

#appShell:not(.pixel-audit) #promotionView .promotion-list {
  z-index: 45 !important;
  background: #fff;
  opacity: 1;
}

#appShell:not(.pixel-audit) #paymentView .payment-brand-zone,
#appShell:not(.pixel-audit) #paymentView .payment-panel {
  opacity: 0;
  visibility: hidden !important;
  pointer-events: none;
}

#appShell:not(.pixel-audit) #paymentView::before {
  display: none;
  content: none;
}

#appShell:not(.pixel-audit).route-payment:not(.payment-success) #paymentView::after {
  position: absolute;
  z-index: 40;
  inset: 8.333333cqw 0 0;
  width: 100%;
  height: calc(100% - 8.333333cqw);
  background: url("design/slices/pages-20260814/page-07-below-status-dynamic-clean.png?v=20260817-3") top center / 100% auto no-repeat;
}

#appShell:not(.pixel-audit) #resultsView .commerce-search-header {
  opacity: 0;
}

/*
 * Page 03 interaction map
 * -----------------------
 * The page-03 reference is the visible layer, so its yellow "立即抢购" button
 * is the source of truth for hit testing too. Keep one native button, but
 * align its transparent hit area to that CTA only; the rest of the banner and
 * every card below it remain display-only.
 */
#appShell:not(.pixel-audit) #resultsView .results-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

#appShell:not(.pixel-audit) #resultsView #promotionBanner {
  position: absolute;
  z-index: 45;
  top: 51.388889cqw;
  left: 23.055556cqw;
  width: 26.203704cqw;
  height: 7.037037cqw;
  margin: 0;
  border-radius: 4cqw;
  opacity: 0;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) #resultsView .product-grid {
  z-index: 45 !important;
  pointer-events: auto;
}

/*
 * Page 03 long waterfall
 * ----------------------
 * Keep the approved search chrome and activity banner as an exact crop from
 * the supplied 1080px reference. Everything from y=806 downward is live DOM,
 * so the feed can be long and randomized while remaining display-only.
 */
#appShell:not(.pixel-audit) #resultsView::after {
  top: 8.333333cqw;
  bottom: auto;
  display: block;
  width: 100%;
  height: 66.296296cqw;
  background-image: url("design/slices/page-03-long-feed/page-03-long-top-below-status.png");
  background-position: top center;
  background-size: 100% auto;
  content: "";
}

#appShell:not(.pixel-audit) #resultsView .results-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  padding: 74.62963cqw 0 0;
  background: #efefef;
}

#appShell:not(.pixel-audit) #resultsView .product-grid {
  position: relative;
  z-index: 45 !important;
  inset: auto;
  display: block;
  width: auto;
  min-height: 0;
  padding: 0 1.111111cqw 8cqw;
  column-count: 2;
  column-gap: 1.111111cqw;
  background: #efefef;
  opacity: 1;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-card {
  margin: 0 0 1.111111cqw;
  border-radius: 1.111111cqw;
  cursor: default;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-card:active {
  transform: none;
}

#appShell:not(.pixel-audit) #resultsView .is-reference-media .waterfall-media::after,
#appShell:not(.pixel-audit) #resultsView .is-reference-media .waterfall-caption,
#appShell:not(.pixel-audit) #resultsView .is-reference-media .waterfall-duration {
  display: none;
}

#appShell:not(.pixel-audit) #resultsView .is-reference-media .waterfall-media > img {
  object-fit: cover;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-footer {
  min-height: 13.333333cqw;
  gap: 1.111111cqw;
  padding: 2.314815cqw 2.777778cqw;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-account {
  gap: 1.574074cqw;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-avatar {
  width: 6.481481cqw;
  height: 6.481481cqw;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-identity strong {
  max-width: 24cqw;
  font-size: 3.518519cqw;
  line-height: 1.1;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-identity small {
  font-size: 2.777778cqw;
  line-height: 1.1;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-likes {
  gap: 1.111111cqw;
  font-size: 3.518519cqw;
}

#appShell:not(.pixel-audit) #resultsView .waterfall-likes img {
  width: 4.074074cqw;
  height: 4.074074cqw;
}

/* Page 03: keep the approved search and category pixels pinned while the
 * activity entrance and waterfall continue through the results scroller. */
.results-sticky-chrome {
  display: contents;
}

#appShell:not(.pixel-audit) #resultsView {
  --results-status-height: 8.333333cqw;
  --results-search-height: 13.333333cqw;
  --results-tabs-height: 10.185185cqw;
  --results-sticky-height: 23.518519cqw;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome {
  position: sticky;
  z-index: 60;
  top: var(--results-status-height);
  display: block;
  width: 100%;
  height: var(--results-sticky-height);
  overflow: hidden;
  background: #fff url("design/slices/page-03-long-feed/page-03-long-top-below-status.png") top center / 100% auto no-repeat;
  pointer-events: none;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome .commerce-search-header {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: var(--results-search-height);
  min-height: var(--results-search-height);
  background: transparent;
  opacity: 1;
  pointer-events: none;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome .commerce-search-header > * {
  opacity: 0;
}

/* Replace the search box baked into page-03 with the same live geometry used
 * by the search page. The white patch removes the old fixed keyword first. */
#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome .commerce-search-header::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 9cqw;
  width: 77cqw;
  height: var(--results-search-height);
  background: #fff;
  content: "";
  pointer-events: none;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome #resultsSearchForm {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 13.611111cqw;
  display: block;
  width: 69.444444cqw;
  height: 10cqw;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome #resultsSearchForm::before {
  position: absolute;
  z-index: 0;
  top: 0.277778cqw;
  right: -0.138889cqw;
  bottom: 0.277778cqw;
  left: -1.944444cqw;
  border-radius: 2.777778cqw;
  background: #f3f4f7;
  content: "";
  pointer-events: none;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome #resultsSearchInput {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 13.888889cqw 0 0.740741cqw;
  border: 0;
  background: transparent;
  color: #67686d;
  caret-color: #ff2d49;
  font-size: 3.981481cqw;
  font-weight: 400;
  line-height: normal;
  opacity: 1;
  outline: 0;
}

#appShell:not(.pixel-audit) #resultsView #resultsSearchInput::-webkit-search-cancel-button {
  appearance: none;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome #clearResultsSearch {
  position: absolute;
  z-index: 2;
  top: 2.067901cqw;
  right: 3.055556cqw;
  display: block;
  width: 6.111111cqw;
  height: 6.111111cqw;
  padding: 0;
  border: 0;
  background: transparent;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome #clearResultsSearch img {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 8.333333cqw;
  max-width: none;
  height: 6.111111cqw;
  opacity: 1;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome .result-tabs {
  position: absolute;
  z-index: 2;
  top: var(--results-search-height);
  right: 0;
  left: 0;
  width: 100%;
  height: var(--results-tabs-height);
  min-height: var(--results-tabs-height);
  border: 0;
  background: transparent;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) #resultsView .results-sticky-chrome .result-tabs > * {
  height: 100%;
  opacity: 0;
}

/* Promotion page scroll chrome. The reference layer owns the initial frame;
 * these live elements take over only after the user starts scrolling. */
#appShell:not(.pixel-audit) #promotionView {
  position: absolute;
  --promotion-status-height: 8.333333cqw;
  --promotion-topbar-height: 11.2cqw;
  --promotion-guarantee-height: 9.2cqw;
  --promotion-tabs-height: 10.67cqw;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#appShell.route-promotion:not(.pixel-audit) > .global-status-bar {
  height: 8.333333cqw;
}

#appShell:not(.pixel-audit) #promotionView .promotion-sticky-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 21.87cqw;
  padding: 10.67cqw 2.4cqw 0;
  margin-bottom: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}

#appShell:not(.pixel-audit) #promotionView .promotion-topbar {
  gap: 1.5cqw;
}

#appShell.route-promotion:not(.promotion-scroll-active):not(.pixel-audit) #promotionView .promotion-topbar {
  opacity: 0;
}

#appShell:not(.pixel-audit) #promotionView .promotion-topbar strong {
  font-size: 6.4cqw;
}

#appShell:not(.pixel-audit) #promotionView .promotion-search {
  margin-right: 2cqw;
  margin-left: 2cqw;
  border-radius: 4cqw;
}

#appShell:not(.pixel-audit) #promotionView .promotion-search::before {
  display: none;
  content: none;
}

#appShell:not(.pixel-audit) #promotionView .promotion-hero {
  min-height: 0;
  padding: 0 2.4cqw;
  overflow: visible;
}

#appShell:not(.pixel-audit) #promotionView .promotion-hero::before {
  display: none;
  content: none;
}

#appShell:not(.pixel-audit) #promotionView .promotion-guarantee {
  position: sticky;
  z-index: 4;
  top: calc(var(--promotion-status-height) + var(--promotion-topbar-height));
  display: grid;
  min-height: var(--promotion-guarantee-height);
  grid-template-columns: auto minmax(0, 1fr) 2.4cqw;
  align-items: center;
  gap: 1.3cqw;
  margin: 0;
  padding: 0 3cqw 0 4cqw;
  background: var(--promotion-red);
  color: #fff;
  font-size: 3.15cqw;
  font-weight: 500;
  line-height: 1;
}

#appShell:not(.pixel-audit) #promotionView .promotion-tabs {
  position: sticky;
  z-index: 5;
  top: calc(var(--promotion-status-height) + var(--promotion-topbar-height) + var(--promotion-guarantee-height));
  height: var(--promotion-tabs-height);
  min-height: var(--promotion-tabs-height);
  border-radius: 0;
}

#appShell:not(.pixel-audit) #promotionView .promotion-guarantee-icon-scrolled,
#appShell:not(.pixel-audit) #promotionView .promotion-guarantee-arrow-scrolled {
  display: none;
}

#appShell.route-promotion.promotion-scroll-active > .global-status-bar {
  mix-blend-mode: normal;
}

#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-sticky-topbar {
  z-index: 51;
  background: #fff;
  color: #202124;
}

#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-topbar {
  opacity: 1;
}

#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-back img,
#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-share img {
  filter: brightness(0);
}

#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-search {
  border: 0 solid #f1c0c5;
  border-radius: 4cqw;
  background: #fff;
  color: #202124;
  box-shadow: inset 0 0 0 0.37cqw #f1c0c5;
}

#appShell.route-promotion.promotion-scroll-active #promotionView .promotion-search::before {
  display: none;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-sticky-topbar {
  z-index: 51;
  min-height: 0;
  height: calc(var(--promotion-status-height) + var(--promotion-topbar-height));
  padding-top: var(--promotion-status-height);
  margin-bottom: 2.34cqw;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-sticky-guarantee {
  z-index: 52;
  background: #fff1ca;
  color: #8b5e16;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-sticky-guarantee span {
  color: #8b5e16;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-guarantee-icon-default,
#appShell.route-promotion.promotion-scrolled #promotionView .promotion-guarantee-arrow-default {
  display: none;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-guarantee-icon-scrolled,
#appShell.route-promotion.promotion-scrolled #promotionView .promotion-guarantee-arrow-scrolled {
  display: block;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-guarantee-arrow-scrolled {
  filter: none;
}

#appShell.route-promotion.promotion-scrolled #promotionView .promotion-tabs {
  z-index: 53;
  background: #fff;
}

#appShell:not(.pixel-audit) #promotionView .promotion-guarantee b img {
  width: 4cqw;
  height: 4cqw;
}

/*
 * Product drawer calibration against the supplied 1080 x 2400 partial sheet
 * and 1080 x 6882 expanded reference. Product media and text stay live; these
 * rules only control the two drawer geometries and their fixed chrome.
 */
#productView .card-reduction-label,
#productView .store-tier-badge,
#productView .gallery-reason-tab,
#productView .bottom-label-expanded,
#productView .brand-review-summary,
#productView .shop-service-metrics,
#productView .product-floating-shop {
  display: none;
}

#appShell.product-drawer-open .product-drawer-backdrop {
  background: rgb(0 0 0 / 0.5);
}

#appShell.product-drawer-open #productView {
  border-radius: 4.444444cqw 4.444444cqw 0 0;
}

#appShell.product-drawer-open #productView.is-drawer-expanded {
  border-radius: 0;
}

/* The project-wide status bar remains the single source in the expanded view. */
#appShell.product-drawer-open #productView .product-status-cutout,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-status-cutout {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-topbar {
  top: 8.6cqw;
  pointer-events: auto;
}

#appShell.product-drawer-open #productView.is-drawer-expanded.is-product-scrolled .product-topbar {
  opacity: 0;
  pointer-events: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-top-actions {
  gap: 2.78cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-offer-row {
  min-height: 11cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .card-reduction-label,
#appShell.product-drawer-open #productView.is-drawer-partial .product-offer-row > img,
#appShell.product-drawer-open #productView.is-drawer-partial .store-tier-badge,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-review-summary,
#appShell.product-drawer-open #productView.is-drawer-partial .shop-service-metrics {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-info-block {
  padding: 2.2cqw 4.4cqw 2.5cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-benefit-strip {
  margin-top: 2.2cqw;
}

#appShell.product-drawer-open #productView .detail-tags {
  flex-wrap: nowrap;
}

#appShell.product-drawer-open #productView.is-drawer-partial .delivery-row {
  min-height: 18.7cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .purchase-bar {
  min-height: 15.8cqw;
  padding-top: 1.05cqw;
  padding-bottom: 1.05cqw;
}

/* Expanded drawer: the order and block proportions follow the long reference. */
#appShell.product-drawer-open #productView.is-drawer-expanded .product-gallery {
  height: 107.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-gallery > #productHeroImage {
  padding-top: 6cqw;
  object-fit: contain;
  transform: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .gallery-tabs {
  min-width: 37.8cqw;
  gap: 2.2cqw;
  padding-right: 9cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .gallery-reason-tab {
  display: inline;
  color: #dedfe2;
  white-space: nowrap;
}

#appShell.product-drawer-open #productView .gallery-count::before {
  display: inline-block;
  width: 0;
  height: 2.2cqw;
  margin-right: 2cqw;
  border-left: 1px solid rgb(255 255 255 / .56);
  content: "";
  vertical-align: -.45cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-offer-row {
  min-height: 10.8cqw;
  grid-template-columns: auto minmax(0, 1fr) 4cqw;
  gap: 1.2cqw;
  padding: 1.5cqw 4.4cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .card-reduction-label {
  display: inline-flex;
  align-items: center;
  padding: 1.3cqw 2.3cqw;
  border-radius: .8cqw;
  background: #fff0f1;
  color: #ed3942;
  font-size: 3.55cqw;
  font-weight: 650;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-offer-row > img {
  display: block;
  width: 2.2cqw;
  justify-self: end;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-info-block {
  min-height: 38.46cqw;
  padding: 2cqw 4.4cqw 2.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-title-line {
  display: block;
  line-height: 1.42;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .store-tier-badge {
  display: inline-block;
  margin-right: 1.2cqw;
  padding: .45cqw 1cqw;
  border-radius: .45cqw;
  background: #241626;
  color: #f6e8cc;
  font-size: 3.15cqw;
  font-weight: 650;
  vertical-align: .35cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-title-line h1 {
  display: inline;
  overflow: visible;
  font-size: 4.05cqw;
  line-height: 1.42;
  text-overflow: clip;
  white-space: normal;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .trust-purchase-label {
  display: inline-block;
  margin: 0 0 0 1.2cqw;
  vertical-align: .2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-row {
  display: grid;
  min-height: 8.4cqw;
  grid-template-columns: 7cqw auto minmax(0, 1fr) 2.2cqw;
  gap: 1.5cqw;
  margin-top: 2.1cqw;
  padding: 1.35cqw 2cqw;
  border-radius: 1cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-logo {
  width: 7cqw;
  height: 7cqw;
  border-radius: .8cqw;
  background: #fff;
  filter: none;
  object-fit: cover;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-arrow {
  width: 2.2cqw;
  height: auto;
  filter: brightness(0) invert(1);
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-benefit-strip {
  margin-top: 2.4cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-service-list {
  margin-top: 2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-service-row:nth-child(1) {
  min-height: 16.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-service-row:nth-child(2),
#appShell.product-drawer-open #productView.is-drawer-expanded .festival-row {
  min-height: 10.6cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .review-block {
  display: flex;
  flex-direction: column;
  margin-top: 2cqw;
  padding: 0 4.4cqw 3.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .review-block > header {
  order: 1;
  min-height: 13cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .review-summary {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary {
  order: 2;
  margin: 0;
  padding: 3.2cqw 0 3.5cqw;
  border-top: 1px solid #ededee;
}

#productView .review-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#productView .review-heading-row > strong {
  font-size: 4.15cqw;
}

#productView .review-heading-row > strong span {
  font-weight: inherit;
}

#productView .review-heading-row > img {
  width: 2.2cqw;
  height: auto;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary > div:last-child {
  display: flex;
  gap: 1.6cqw;
  margin-top: 3.1cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary span {
  padding: 2cqw 2.2cqw;
  background: #fff9ef;
  color: #946214;
  font-size: 3.25cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-review-summary {
  order: 3;
  display: block;
  padding-top: 3.4cqw;
  border-top: 1px solid #ededee;
}

#productView .brand-review-banner {
  display: grid;
  min-height: 16.7cqw;
  place-content: center;
  gap: 1.2cqw;
  margin-top: 3.2cqw;
  border-radius: 1.7cqw 1.7cqw 0 0;
  background: linear-gradient(105deg, #ff3654, #ff584d);
  color: #fff4d6;
  text-align: center;
}

#productView .brand-review-banner strong {
  font-size: 4.5cqw;
}

#productView .brand-review-banner strong span {
  color: inherit;
  font-size: inherit;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary .review-heading-row > strong > span {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

#appShell.product-drawer-open #productView.is-drawer-expanded.is-product-scrolled.is-product-review-section .product-floating-shop {
  display: none;
}

#productView .brand-review-banner small {
  font-size: 3.4cqw;
}

#productView .brand-review-stats {
  display: grid;
  min-height: 10.5cqw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  border-bottom: 1px solid #ededee;
  background: linear-gradient(#fff5f5, #fff);
  color: #4b1518;
  text-align: center;
}

#productView .brand-review-stats strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.3cqw;
  font-size: 3.45cqw;
}

#productView .brand-review-stat-icon {
  flex: 0 0 auto;
  object-fit: fill;
}

#productView .brand-review-fire-icon {
  width: 4.444444cqw;
  height: 5cqw;
}

#productView .brand-review-thumb-icon {
  width: 4.444444cqw;
  height: 4.444444cqw;
}

#productView .brand-review-stats strong + strong {
  border-left: 1px solid #f0dcdc;
}

#productView .brand-review-user {
  display: grid;
  min-height: 15cqw;
  grid-template-columns: 8cqw minmax(0, 1fr);
  gap: 3cqw;
  align-items: center;
  padding: 2.2cqw 0;
}

#productView .brand-review-user > img {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: #eff1f3;
  object-fit: cover;
}

#productView .brand-review-user span {
  color: #8b8f99;
  font-size: 3.4cqw;
}

#productView .brand-review-user p {
  margin: 1.3cqw 0 0;
  color: #202126;
  font-size: 3.7cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-block {
  margin-top: 2cqw;
  padding: 3.4cqw 3cqw 3.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-heading {
  min-height: 19.5cqw;
  padding: 2.7cqw 3.2cqw;
}

#productView .shop-avatar-wrap {
  position: relative;
  width: 13cqw;
  height: 13cqw;
}

#productView .shop-avatar-wrap .shop-avatar {
  width: 100%;
  height: 100%;
}

#productView .shop-heading .shop-follow-label {
  position: absolute;
  right: -.8cqw;
  bottom: -1.3cqw;
  left: -.8cqw;
  padding: .35cqw .6cqw;
  border-radius: 999px;
  background: #f52e34;
  color: #fff;
  font-size: 2.8cqw;
  line-height: 1.25;
  text-align: center;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-authority-row {
  min-height: 10.5cqw;
  border-radius: 0;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-service-metrics {
  display: grid;
  min-height: 18.5cqw;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border: 1px solid #eee8d9;
  border-top: 0;
  border-radius: 0 0 2.3cqw 2.3cqw;
  background: #fff;
  text-align: center;
}

#productView .shop-service-metrics > div {
  display: grid;
  gap: 1.7cqw;
}

#productView .shop-service-metrics span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7cqw;
  color: #687083;
  font-size: 3cqw;
}

#productView .shop-service-icon {
  width: 3.055556cqw;
  height: 3.055556cqw;
  object-fit: fill;
}

#productView .shop-service-metrics strong {
  color: #202126;
  font-size: 3.15cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-product-tabs {
  margin-top: 4.5cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-recommend-grid {
  gap: 2.2cqw;
  margin-top: 5.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .government-subsidy-cutout {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-scroll {
  padding-bottom: calc(17cqw + env(safe-area-inset-bottom));
}

#appShell.product-drawer-open #productView.is-drawer-expanded .purchase-bar {
  min-height: 16cqw;
  padding-top: 1.15cqw;
  padding-bottom: 1.15cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .bottom-label-partial {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .bottom-label-expanded {
  display: block;
  color: #42444a;
  font-size: 2.8cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded.is-product-scrolled .product-floating-shop {
  position: absolute;
  z-index: 21;
  right: -1cqw;
  bottom: calc(18.5cqw + env(safe-area-inset-bottom));
  display: flex;
  width: 27cqw;
  height: 9cqw;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  padding: 0 1.8cqw;
  border: 0;
  border-radius: 4.5cqw 0 0 4.5cqw;
  background: #ff4949;
  color: #fff;
  font-size: 3.5cqw;
  font-weight: 650;
  box-shadow: 0 .8cqw 2cqw rgb(255 73 73 / .22);
}

#productView .floating-shop-arrow {
  width: 2.222222cqw;
  height: 3.611111cqw;
  object-fit: fill;
}

/*
 * Same-product drawer continuity, calibrated from the paired 1080 x 2400
 * MCLON screenshots. The partial sheet is the same detail page with the
 * 78px status area removed: a 1080 x 1080 media stage followed by identical
 * content. Only the sheet position, corner, close/top controls and scrolling
 * mode change when the drawer expands.
 */
#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery > #productHeroImage,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-gallery > #productHeroImage {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100cqw;
  padding: 0;
  object-fit: contain;
  transform: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery {
  height: 100cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .product-gallery {
  height: 107.222222cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .round-icon-button {
  width: 9.444444cqw;
  height: 9.444444cqw;
  overflow: hidden;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .round-icon-button img,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-like-button img,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-top-actions .round-icon-button:nth-child(2) img,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-top-actions .round-icon-button:last-child img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: fill;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-gallery > .product-hero-peek {
  display: none;
}

#appShell.product-drawer-open #productView .find-similar {
  bottom: 3.425926cqw;
  left: 3.425926cqw;
  width: 18.703704cqw;
  height: 5.925926cqw;
}

#appShell.product-drawer-open #productView .find-similar img {
  /* The source crop includes a few pixels of gallery background around the pill. */
  clip-path: inset(0 round 16% / 48%);
  image-rendering: pixelated;
  object-fit: fill;
}

#appShell.product-drawer-open #productView .gallery-tabs {
  right: 3.425926cqw;
  bottom: 3.425926cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .gallery-tabs {
  min-width: 37.8cqw;
  gap: 2.2cqw;
  padding-right: 9cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .gallery-reason-tab {
  display: inline;
  color: #dedfe2;
  white-space: nowrap;
}

#appShell.product-drawer-open #productView .product-event-strip {
  min-height: 16.944444cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-offer-row,
#appShell.product-drawer-open #productView.is-drawer-expanded .product-offer-row {
  min-height: 13.611111cqw;
  grid-template-columns: auto minmax(0, 1fr) 4cqw;
  gap: 1.2cqw;
  padding: 1.5cqw 4.4cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .card-reduction-label {
  display: inline-flex;
  align-items: center;
  padding: 1.3cqw 2.3cqw;
  border-radius: .8cqw;
  background: #fff0f1;
  color: #ed3942;
  font-size: 3.55cqw;
  font-weight: 650;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-offer-row > img {
  display: block;
  width: 2.2cqw;
  justify-self: end;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-info-block {
  min-height: 38.46cqw;
  padding: 2cqw 4.4cqw 2.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-title-line {
  display: block;
  line-height: 1.42;
}

#appShell.product-drawer-open #productView.is-drawer-partial .store-tier-badge {
  display: inline-block;
  margin-right: 1.2cqw;
  padding: .45cqw 1cqw;
  border-radius: .45cqw;
  background: #241626;
  color: #f6e8cc;
  font-size: 3.15cqw;
  font-weight: 650;
  vertical-align: .35cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-title-line h1 {
  display: inline;
  overflow: visible;
  font-size: 4.05cqw;
  line-height: 1.42;
  text-overflow: clip;
  white-space: normal;
}

#appShell.product-drawer-open #productView.is-drawer-partial .trust-purchase-label {
  display: inline-block;
  margin: 0 0 0 1.2cqw;
  vertical-align: .2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-row {
  display: grid;
  min-height: 8.4cqw;
  grid-template-columns: 7cqw auto minmax(0, 1fr) 2.2cqw;
  gap: 1.5cqw;
  margin-top: 2.1cqw;
  padding: 1.35cqw 2cqw;
  border-radius: 1cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-logo {
  width: 7cqw;
  height: 7cqw;
  border-radius: .8cqw;
  background: #fff;
  filter: none;
  object-fit: cover;
}

#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-arrow {
  width: 2.2cqw;
  height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-arrow {
  filter: invert(1);
  mix-blend-mode: screen;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-benefit-strip {
  margin-top: 2.4cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .government-subsidy-cutout {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .product-scroll {
  padding-bottom: calc(17cqw + env(safe-area-inset-bottom));
}

#appShell.product-drawer-open #productView.is-drawer-partial .purchase-bar {
  min-height: 16cqw;
  padding-top: 1.15cqw;
  padding-bottom: 1.15cqw;
}

#appShell.product-drawer-open #productView.is-drawer-partial .bottom-label-partial {
  display: none;
}

#appShell.product-drawer-open #productView.is-drawer-partial .bottom-label-expanded {
  display: block;
  color: #42444a;
  font-size: 2.8cqw;
}

#appShell.product-drawer-open #productView .purchase-bar > button:first-child img {
  border-radius: 50%;
}

/* 2026-08-16 purchase-spec reference: the washing-product screenshot uses a
 * rounded white sheet with a compact, live SKU picker. Keep the old page-06
 * crop available for audit history, but use this composition for the live
 * checkout route so only approved data fields are rendered dynamically. */
#appShell:not(.pixel-audit) #checkoutView[data-mode="spec"]::after {
  background-color: #f4f5f7 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live::after {
  display: none;
}

#appShell.pixel-audit .spec-reference-live > .spec-sheet {
  display: none;
}

#appShell:not(.pixel-audit) .spec-reference-live {
  z-index: 45;
  display: block;
  overflow: hidden;
  background: #f4f5f7;
  color: #24262b;
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet {
  top: 4cqw;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
  border-radius: 6cqw 6cqw 0 0;
  background: #fff;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) .spec-sheet-scroll {
  position: absolute;
  inset: 0 0 25cqw;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 13cqw 0 8cqw;
  scrollbar-width: none;
}

#appShell:not(.pixel-audit) .spec-sheet-scroll::-webkit-scrollbar {
  display: none;
}

#appShell:not(.pixel-audit) .spec-guarantee-row {
  display: flex;
  height: 13cqw;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  border-bottom: 1px solid #eef0f3;
  color: #1aa386;
}

#appShell:not(.pixel-audit) .spec-guarantee-row strong {
  font-size: 4.35cqw;
  font-weight: 500;
}

#appShell:not(.pixel-audit) .spec-guarantee-icon {
  display: block;
  width: 4.15cqw;
  height: 5.4cqw;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-address-row {
  display: grid;
  min-height: 17cqw;
  grid-template-columns: 9cqw minmax(0, 1fr) 5cqw;
  gap: 2cqw;
  align-items: center;
  padding: 2.3cqw 5cqw 1cqw;
}

#appShell:not(.pixel-audit) .spec-address-row > img:first-child {
  width: 4.6cqw;
  height: 5.7cqw;
  justify-self: center;
  object-fit: contain;
  opacity: .7;
}

#appShell:not(.pixel-audit) .spec-address-row > img:last-child {
  width: 4cqw;
  height: 4cqw;
  object-fit: contain;
  opacity: .58;
  transform: rotate(180deg);
}

#appShell:not(.pixel-audit) .spec-address-row div {
  min-width: 0;
}

#appShell:not(.pixel-audit) .spec-address-row strong,
#appShell:not(.pixel-audit) .spec-address-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-address-row strong {
  color: #25272d;
  font-size: 3.9cqw;
  font-weight: 500;
}

#appShell:not(.pixel-audit) .spec-address-row small {
  margin-top: .6cqw;
  color: #8a8f9d;
  font-size: 3cqw;
}

#appShell:not(.pixel-audit) .spec-delivery-row {
  min-height: 8cqw;
  margin: 0;
  padding: 0 12cqw 2.5cqw;
  color: #ed8a0a;
  font-size: 3.6cqw;
  line-height: 1.35;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-delivery-row::before {
  content: "包邮 · ";
  color: #44474e;
}

#appShell:not(.pixel-audit) .spec-store-row {
  display: flex;
  min-height: 12cqw;
  align-items: center;
  justify-content: space-between;
  margin: 1cqw 4cqw 0;
  padding: 0 4cqw;
  border-radius: 2.2cqw 2.2cqw 0 0;
  background: #f71920;
  color: #fff;
}

#appShell:not(.pixel-audit) .spec-store-row strong {
  max-width: 76cqw;
  overflow: hidden;
  font-size: 4.5cqw;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-store-row span {
  flex: 0 0 auto;
  font-size: 3.6cqw;
}

#appShell:not(.pixel-audit) .spec-store-row b,
#appShell:not(.pixel-audit) .spec-discount-row b,
#appShell:not(.pixel-audit) .spec-multi-buy-row b {
  font-size: 5cqw;
  font-weight: 400;
  line-height: 0;
  vertical-align: -.1cqw;
}

#appShell:not(.pixel-audit) .spec-product-card {
  position: relative;
  display: grid;
  min-height: 40cqw;
  grid-template-columns: 27cqw minmax(0, 1fr);
  gap: 3cqw;
  margin: 0 4cqw;
  padding: 3cqw;
  border: 1px solid #f71920;
  border-top: 0;
  border-radius: 0 0 2.2cqw 2.2cqw;
}

#appShell:not(.pixel-audit) .spec-product-card > img {
  width: 27cqw;
  height: 27cqw;
  border-radius: 1.5cqw;
  background: #f5f6f8;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-product-copy {
  min-width: 0;
  padding-top: .2cqw;
}

#appShell:not(.pixel-audit) .spec-product-copy h2 {
  max-height: 6cqw;
  margin: 0;
  overflow: hidden;
  color: #25272d;
  font-size: 3.9cqw;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-product-price {
  display: flex;
  min-height: 8cqw;
  align-items: baseline;
  gap: 1cqw;
  margin: 1.2cqw 0 0;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-product-price span {
  color: #e93337;
  font-size: 3.2cqw;
}

#appShell:not(.pixel-audit) .spec-product-price strong {
  color: #e93337;
  font-size: 5.7cqw;
  font-weight: 700;
}

#appShell:not(.pixel-audit) .spec-product-price del {
  color: #9298a6;
  font-size: 3.2cqw;
}

#appShell:not(.pixel-audit) .spec-product-sold {
  display: block;
  margin-top: 1cqw;
  color: #8b909c;
  font-size: 2.9cqw;
}

#appShell:not(.pixel-audit) .spec-quantity-control {
  position: absolute;
  right: 4cqw;
  bottom: 3.2cqw;
  display: flex;
  height: 9cqw;
  align-items: center;
  gap: 3cqw;
  color: #aeb4c1;
}

#appShell:not(.pixel-audit) .spec-quantity-control button {
  display: grid;
  width: 9cqw;
  height: 9cqw;
  place-items: center;
  border: 0;
  border-radius: 1.5cqw;
  background: #f1f3f7;
  color: #c2c7d1;
  font-size: 6cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-quantity-control span {
  min-width: 4cqw;
  font-size: 4.2cqw;
  text-align: center;
}

#appShell:not(.pixel-audit) .spec-discount-row,
#appShell:not(.pixel-audit) .spec-multi-buy-row {
  display: flex;
  width: calc(100% - 8cqw);
  min-height: 15cqw;
  align-items: center;
  justify-content: space-between;
  margin: 0 4cqw;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: #25272d;
  text-align: left;
}

#appShell:not(.pixel-audit) .spec-discount-row > span:first-child,
#appShell:not(.pixel-audit) .spec-multi-buy-row > span:first-child {
  font-size: 4cqw;
}

#appShell:not(.pixel-audit) .spec-discount-row > span:last-child,
#appShell:not(.pixel-audit) .spec-multi-buy-row > span:last-child {
  color: #8b909c;
  font-size: 3.6cqw;
}

#appShell:not(.pixel-audit) .spec-discount-row > span {
  transform: translateY(1.2963cqw);
}

#appShell:not(.pixel-audit) .spec-discount-row strong {
  color: #606777;
  font-weight: 500;
}

#appShell:not(.pixel-audit) .spec-reference-live #specSubsidyLabel {
  color: #606777;
}

#appShell:not(.pixel-audit) .spec-reference-live #specSubsidyAmount {
  color: #e93337;
}

#appShell:not(.pixel-audit) .spec-options-section {
  margin: 0 4cqw;
  padding: 1cqw 0 1cqw;
}

#appShell:not(.pixel-audit) .spec-options-section > header {
  display: flex;
  min-height: 10cqw;
  align-items: center;
  justify-content: space-between;
}

#appShell:not(.pixel-audit) .spec-options-section h2 {
  margin: 0;
  font-size: 4.2cqw;
  font-weight: 650;
}

#appShell:not(.pixel-audit) .spec-options-section header button {
  display: inline-flex;
  align-items: center;
  gap: 1.6956cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b909c;
  font-size: 3.6cqw;
}

#appShell:not(.pixel-audit) .spec-options-section header button .spec-large-view-icon {
  position: relative;
  top: -.0622cqw;
  display: block;
  flex: 0 0 3.7037cqw;
  width: 3.7037cqw;
  height: 3.7037cqw;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2cqw;
  padding: 1cqw 0 0;
}

#appShell:not(.pixel-audit) .spec-option {
  display: flex;
  min-height: 10.5cqw;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1.5cqw 2.5cqw;
  border: 1px solid transparent;
  border-radius: 1.8cqw;
  background: #f1f2f6;
  color: #282a31;
  text-align: left;
}

#appShell:not(.pixel-audit) .spec-option.is-selected {
  border-color: #ee3438;
  background: #fff;
  color: #e93337;
}

#appShell:not(.pixel-audit) .spec-option-label {
  min-width: 0;
  overflow: hidden;
  font-size: 3.35cqw;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-option-price {
  flex: 0 0 auto;
  color: #828998;
  font-size: 3.05cqw;
  font-weight: 500;
}

#appShell:not(.pixel-audit) .spec-option.is-selected .spec-option-price {
  color: #e93337;
}

#appShell:not(.pixel-audit) .spec-multi-buy-row {
  min-height: 13cqw;
  border-top: 1px solid #edf0f3;
}

#appShell:not(.pixel-audit) .spec-payment-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  min-height: 25cqw;
  padding: 2cqw 4cqw max(3cqw, env(safe-area-inset-bottom));
  border-top: 1px solid #e8ebef;
  background: #fff;
}

#appShell:not(.pixel-audit) .spec-payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #646c7d;
  font-size: 3.2cqw;
}

#appShell:not(.pixel-audit) .spec-payment-method strong {
  color: #28303b;
  font-size: 3.45cqw;
  font-weight: 500;
}

#appShell:not(.pixel-audit) .spec-payment-method span {
  color: #f08a00;
}

#appShell:not(.pixel-audit) .spec-payment-select {
  display: block;
  width: 100%;
  min-height: 6cqw;
  padding: 0;
  border: 0;
  background: transparent;
  color: #737b8d;
  font-size: 3.3cqw;
  text-align: left;
}

#appShell:not(.pixel-audit) .spec-payment-select b {
  float: right;
  font-size: 5cqw;
  font-weight: 400;
  line-height: .7;
}

#appShell:not(.pixel-audit) .spec-payment-footer .spec-immediate-pay {
  position: static;
  display: block;
  width: 100%;
  height: 11.5cqw;
  margin: .7cqw 0 0;
  border-radius: 2.2cqw;
  background: #f83236;
  color: #fff;
  opacity: 1;
  font-size: 4.4cqw;
  font-weight: 700;
  pointer-events: auto;
}

#appShell:not(.pixel-audit) .spec-payment-footer .spec-immediate-pay strong {
  font-size: 5.1cqw;
}

#appShell:not(.pixel-audit) .spec-close-button {
  z-index: 4;
  top: 4cqw;
  right: 2cqw;
  width: 9cqw;
  height: 9cqw;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

/* Final coordinate calibration against checkout-spec-reference-20260816.jpg. */
#appShell:not(.pixel-audit) .spec-reference-live {
  background: #7f7f7f;
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet {
  top: 22.2cqw;
  border-radius: 4.2cqw 4.2cqw 0 0;
}

#appShell:not(.pixel-audit) .spec-sheet-scroll {
  padding-top: 0;
}

#appShell:not(.pixel-audit) .spec-address-row {
  min-height: 14cqw;
  padding-top: 1.4cqw;
  padding-bottom: .4cqw;
}

#appShell:not(.pixel-audit) .spec-address-row small {
  display: none;
}

#appShell:not(.pixel-audit) .spec-delivery-row {
  min-height: 6.5cqw;
  padding-bottom: 1.5cqw;
  border-bottom: 2cqw solid #f4f5f7;
  color: #18a686;
}

#appShell:not(.pixel-audit) .spec-store-row {
  min-height: 9.2cqw;
  margin-top: 0;
}

#appShell:not(.pixel-audit) .spec-product-card {
  min-height: 35cqw;
  grid-template-columns: 29cqw minmax(0, 1fr);
  gap: 2cqw;
}

#appShell:not(.pixel-audit) .spec-product-card > img {
  width: 29cqw;
  height: 29cqw;
}

#appShell:not(.pixel-audit) .spec-product-sold {
  position: absolute;
  bottom: 3.2cqw;
  left: 65cqw;
  margin: 0;
  z-index: 2;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-quantity-control {
  right: auto;
  bottom: 2.5cqw;
  left: 39cqw;
}

#appShell:not(.pixel-audit) .spec-options-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5cqw;
}

#appShell:not(.pixel-audit) .spec-option {
  min-height: 11cqw;
  padding: 1.2cqw 2.5cqw 1.2cqw 1.5cqw;
}

#appShell:not(.pixel-audit) .spec-option.is-selected {
  min-height: 11cqw;
}

#appShell:not(.pixel-audit) .spec-option > img {
  flex: 0 0 auto;
  width: 10cqw;
  height: 10cqw;
  border-radius: 1.2cqw;
  background: #fff;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-option-label {
  flex: 1 1 auto;
  font-size: 3.8cqw;
  white-space: normal;
}

#appShell:not(.pixel-audit) .spec-option-price {
  font-size: 3.7cqw;
}

#appShell:not(.pixel-audit) .spec-payment-footer {
  min-height: 36cqw;
}

#appShell:not(.pixel-audit) .spec-multi-buy-row {
  min-height: 16cqw;
}

#appShell:not(.pixel-audit) .spec-payment-method strong {
  color: #717a8d;
  font-weight: 400;
}

#appShell:not(.pixel-audit) .spec-payment-method span {
  color: #717a8d;
}

#appShell:not(.pixel-audit) .spec-payment-select {
  margin-top: 3cqw;
}

#appShell:not(.pixel-audit) .spec-payment-select > span {
  display: inline-grid;
  width: 6cqw;
  height: 6cqw;
  place-items: center;
  margin: 0 .8cqw 0 .5cqw;
  border-radius: 50%;
  background: #1677e8;
  color: #fff;
  font-size: 3.1cqw;
  font-weight: 700;
  vertical-align: -.8cqw;
}

#appShell:not(.pixel-audit) .spec-payment-footer .spec-immediate-pay {
  margin-top: 3.5cqw;
}

#appShell:not(.pixel-audit) .spec-guarantee-icon {
  display: block;
  width: 4.15cqw;
  height: 5.4cqw;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-guarantee-row {
  height: 11.8519cqw;
  border-bottom-width: .667px;
  border-bottom-color: #f0f1f5;
}

#appShell:not(.pixel-audit) .spec-guarantee-row strong {
  font-size: 3.7cqw;
}

#appShell:not(.pixel-audit) .spec-address-row {
  min-height: 10.5cqw;
  grid-template-columns: 7cqw minmax(0, 1fr) 5cqw;
  gap: 1.3cqw;
  padding-right: 4cqw;
  padding-left: 4cqw;
}

#appShell:not(.pixel-audit) .spec-address-row strong {
  position: relative;
  top: -.3cqw;
  font-weight: 400;
  font-size: 3.4cqw;
}

#appShell:not(.pixel-audit) .spec-address-row > div {
  transform: translateY(2.1cqw);
}

#appShell:not(.pixel-audit) .spec-address-row > img:first-child {
  width: 5.5cqw;
  height: 5.5cqw;
  transform: translateY(1.7cqw);
}

#appShell:not(.pixel-audit) .spec-address-row > img:last-child {
  filter: grayscale(1);
  opacity: 0;
  transform: translateY(3.25cqw);
}

#appShell:not(.pixel-audit) .spec-delivery-row {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: 8cqw;
  min-height: 8cqw;
  margin: 0;
  padding: 0 12cqw 1.5cqw;
  border-bottom: 2cqw solid #f6f7fb;
  color: #18a686;
  padding-left: 12.22cqw;
  transform: translateY(-.25cqw);
}

#appShell:not(.pixel-audit) .spec-delivery-row::before {
  content: "包邮· ";
  margin-right: .65cqw;
}

#appShell:not(.pixel-audit) .spec-store-row {
  min-height: 8.3333cqw;
  margin-top: 4.85cqw;
  margin-right: 3.3333cqw;
  margin-left: 3.3333cqw;
  border-radius: 1.5cqw 1.5cqw 0 0;
  background: #f01c19;
}

#appShell:not(.pixel-audit) .spec-product-card {
  grid-template-columns: 30cqw minmax(0, 1fr);
  min-height: 35.1852cqw;
  margin-right: 3.3333cqw;
  margin-left: 3.3333cqw;
  padding: 1.5cqw 2.5cqw;
  border-radius: 0 0 1.5cqw 1.5cqw;
  border-right: 3.333px solid #f23030;
  border-bottom: 3.333px solid #f23030;
  border-left: 3.333px solid #f23030;
}

#appShell:not(.pixel-audit) .spec-product-card > img {
  width: 30cqw;
  height: 30cqw;
}

#appShell:not(.pixel-audit) .spec-quantity-control {
  bottom: 2.5cqw;
  left: 35.5cqw;
}

#appShell:not(.pixel-audit) .spec-quantity-control button {
  width: 7cqw;
  height: 7cqw;
}

#appShell:not(.pixel-audit) .spec-product-sold {
  left: 59.5cqw;
}

#appShell:not(.pixel-audit) .spec-discount-row,
#appShell:not(.pixel-audit) .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-options-section {
  margin-right: 4.4444cqw;
  margin-left: 4.4444cqw;
  padding-top: 1.4cqw;
  padding-bottom: 3.4cqw;
}

#appShell:not(.pixel-audit) .spec-discount-row {
  width: calc(100% - 8.8888cqw);
  min-height: 14.8cqw;
  padding-right: 3cqw;
}

#appShell:not(.pixel-audit) .spec-options-section h2 {
  font-weight: 500;
  font-size: 4cqw;
}

#appShell:not(.pixel-audit) .spec-options-list {
  gap: 3.3333cqw;
}

#appShell:not(.pixel-audit) .spec-option {
  height: 8.3333cqw;
  min-height: 8.3333cqw;
  padding: 1.2cqw 2.5cqw 1.2cqw 1.5cqw;
  border-radius: 1.5cqw;
}

#appShell:not(.pixel-audit) .spec-option.is-selected {
  height: 8.3333cqw;
  min-height: 8.3333cqw;
}

#appShell:not(.pixel-audit) .spec-option > img:first-child {
  width: 8.5cqw;
  height: 8.5cqw;
}

#appShell:not(.pixel-audit) .spec-option .spec-option-hot {
  flex: 0 0 auto;
  width: 4.5cqw;
  height: 5.5cqw;
  object-fit: contain;
  background: transparent;
}

#appShell:not(.pixel-audit) .spec-option-selected-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 1.5cqw;
}

#appShell:not(.pixel-audit) .spec-option-selected-copy .spec-option-hot {
  flex: 0 0 auto;
  width: 4.5cqw;
  height: 5.5cqw;
  object-fit: contain;
  background: transparent;
}

#appShell:not(.pixel-audit) .spec-option-selected-copy .spec-option-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Selected options keep the same row size as unselected options. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-option.is-selected {
  position: relative;
  overflow: hidden;
  border: 1px solid #ee3438 !important;
  background-color: #fff !important;
  background-image: none !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option.is-selected .spec-option-hot {
  opacity: 1 !important;
}

#appShell:not(.pixel-audit) .spec-multi-buy-row {
  min-height: 14.5cqw;
}

#appShell:not(.pixel-audit) .spec-payment-footer {
  height: 36cqw;
  min-height: 36cqw;
  overflow: visible;
  padding-right: 4.4444cqw;
  padding-left: 4.4444cqw;
}

#appShell:not(.pixel-audit) .spec-payment-footer .spec-immediate-pay {
  height: 13.25cqw;
  margin-top: 4.2cqw;
  border-radius: 1.8cqw;
  background: #f23030;
}

#appShell:not(.pixel-audit) .spec-close-button::before,
#appShell:not(.pixel-audit) .spec-close-button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 2.5cqw;
  border-radius: 1px;
  background: #d9dde5;
  content: "";
}

#appShell:not(.pixel-audit) .spec-close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#appShell:not(.pixel-audit) .spec-close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Keep the reference raster above the legacy checkout sheet.  The live layer
 * contributes only text and hit targets; every stable pixel comes from the
 * cleaned reference image underneath it. */
#appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet,
#appShell:not(.pixel-audit) .spec-reference-live .spec-sheet-scroll,
#appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-address-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-delivery-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-store-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-product-card,
#appShell:not(.pixel-audit) .spec-reference-live .spec-discount-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-options-section,
#appShell:not(.pixel-audit) .spec-reference-live .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-footer,
#appShell:not(.pixel-audit) .spec-reference-live .spec-option {
  background-color: transparent !important;
  border-color: transparent !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option {
  border: 0 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option:nth-child(1) {
  background-image: url("design/slices/checkout-spec-reference-20260816/option-row-1.png");
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option:nth-child(2) {
  background-image: url("design/slices/checkout-spec-reference-20260816/option-row-2.png");
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option:nth-child(3) {
  background-image: url("design/slices/checkout-spec-reference-20260816/option-row-2.png");
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option.is-selected {
  background-image: url("design/slices/checkout-spec-reference-20260816/option-row-selected.png");
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-immediate-pay {
  background: transparent !important;
  border: 0 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-quantity-control {
  color: #1f2024;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-address-row > img {
  opacity: 0 !important;
}

/* The blue Alipay badge is part of the supplied raster.  Keep a transparent
 * live placeholder at the same width, and center the dynamic copy around it
 * so the text and the cutout remain one aligned payment row. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 3cqw;
  transform: translate(-1.9cqw, 2.1cqw);
  text-align: center;
  white-space: nowrap;
  font-size: 3.7cqw;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select > .spec-payment-prefix,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select > .spec-payment-label {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  opacity: 1 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-prefix {
  margin-right: .8cqw !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-mark {
  display: inline-grid !important;
  width: 4.4444cqw !important;
  height: 4.4444cqw !important;
  min-width: 4.4444cqw;
  margin: 0 !important;
  padding: 0;
  border-radius: 50%;
  background: transparent !important;
  opacity: 0 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-label {
  margin-left: 1.3cqw !important;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select > b {
  display: none !important;
}

/* Product media follows the active product data.  The surrounding card,
 * controls and SKU chrome remain raster slices, but the cover and SKU thumbs
 * must not be baked from the reference product. */
#appShell:not(.pixel-audit) .spec-reference-live #specProductImage {
  opacity: 1 !important;
  position: relative;
  z-index: 2;
  left: -.28cqw;
  top: .83cqw;
  background: #f5f6f8;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option > img:first-child {
  position: relative;
  z-index: 2;
  width: 7.25cqw;
  height: 7.25cqw;
  flex: 0 0 7.25cqw;
  border-radius: .75cqw;
  object-fit: contain;
  opacity: 1 !important;
  transform: translateX(-.45cqw);
}

/* The red store/product block is one lossless reference slice. Only the
 * approved store-header copy remains live above it. The wrapper keeps the
 * source rectangle's 1008:470 coordinate system intact at every width. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice {
  position: relative;
  z-index: 1;
  width: calc(100% - 6.6666cqw);
  aspect-ratio: 1008 / 470;
  margin: 4.85cqw auto 0;
  background: transparent !important;
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-promo-raster {
  z-index: 1;
  inset: 0;
  background: url("design/slices/checkout-spec-red-box-20260816/checkout-spec-red-promo-overlay.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet {
  z-index: 2;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  width: 100%;
  height: 19.1489%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 2.7777cqw;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #fff;
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-store-row strong {
  max-width: 76%;
  overflow: hidden;
  background: transparent !important;
  color: #fff;
  font-size: 4.35cqw;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-store-row #specStoreEntry {
  display: block;
  flex: 0 0 auto;
  color: #fff;
  font-size: 3cqw;
  line-height: 1;
  opacity: 1 !important;
  transform: translate(-2.123cqw, .3704cqw) scaleX(1.04);
  transform-origin: left center;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-store-row #specStoreEntry b {
  display: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card {
  position: absolute;
  inset: 19.1489% 0 0;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  pointer-events: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card > * {
  visibility: hidden;
  opacity: 0 !important;
}

/* The supplied checkout mask leaves only product-dependent areas transparent.
 * All surrounding reference pixels remain in the raster, while these fields
 * are rendered from the seeded product data for the current checkout run. */
#appShell:not(.pixel-audit) .spec-reference-live::before {
  background-image: url("design/slices/checkout-spec-reference-20260816/checkout-spec-clean.png");
}

#appShell:not(.pixel-audit) .spec-reference-live > .spec-promo-raster {
  display: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-address-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-delivery-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-discount-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-method,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select,
#appShell:not(.pixel-audit) .spec-reference-live .spec-options-section > header {
  visibility: hidden;
}

#appShell:not(.pixel-audit) .spec-reference-live #specStoreEntry,
#appShell:not(.pixel-audit) .spec-reference-live .spec-quantity-control,
#appShell:not(.pixel-audit) .spec-reference-live #specProductSold,
#appShell:not(.pixel-audit) .spec-reference-live .spec-product-price > span {
  visibility: hidden;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card > #specProductImage,
#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card > .spec-product-copy {
  visibility: visible;
  opacity: 1 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live #specProductTitle,
#appShell:not(.pixel-audit) .spec-reference-live .spec-product-price,
#appShell:not(.pixel-audit) .spec-reference-live .spec-product-price strong,
#appShell:not(.pixel-audit) .spec-reference-live .spec-product-price del {
  visibility: visible;
  opacity: 1 !important;
}

#appShell:not(.pixel-audit) .spec-reference-live #specProductTitle {
  border-radius: 4cqw;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row #specStoreBrand {
  position: absolute;
  top: 0;
  left: 20.6%;
  display: flex;
  width: 37.5%;
  height: 100%;
  align-items: center;
  padding: 0;
  background: transparent !important;
  color: #fff;
  font-size: 4.35cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row::before {
  position: absolute;
  top: 0;
  left: 2.7cqw;
  display: flex;
  height: 100%;
  align-items: center;
  color: #fff;
  content: "大牌大补 ·";
  font-size: 3.8cqw;
  font-weight: 700;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card > #specProductImage {
  position: absolute;
  top: 3.5%;
  left: 3.2%;
  width: 33%;
  height: 88%;
  margin: 0;
  transform: none;
  border-radius: 1cqw;
  background: #f5f6f8;
  object-fit: contain;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card > .spec-product-copy {
  position: absolute;
  top: 4.5%;
  left: 36.8%;
  display: block;
  width: 59%;
  height: 80%;
  padding: 0;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy #specProductTitle {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 100%;
  height: 6.2cqw;
  min-height: 0;
  margin: 0;
  padding: 0 1.2cqw;
  overflow: hidden;
  background: #fff;
  color: #1f2024;
  font-size: 3.9cqw;
  line-height: 6.2cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy .spec-product-price {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  width: 100%;
  height: 10cqw;
  min-height: 0;
  margin: 0;
  align-items: baseline;
  padding: 1.3cqw 0 0;
  background: #fff;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy .spec-product-price > span {
  display: block;
  width: 18.3cqw;
  flex: 0 0 18.3cqw;
  visibility: visible;
  color: #e93337;
  font-size: 4.4444cqw;
  font-weight: 600;
  transform: translate(1cqw, .23cqw);
  transform-origin: left center;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy .spec-product-price > span::after {
  content: " ¥";
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy #specProductPrice {
  position: static;
  display: block;
  margin: 0;
  padding: 0;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-product-copy #specOriginalPrice {
  position: static;
  display: block;
  margin: 0 0 0 3.5cqw;
  padding: 0;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-option:not(.is-selected) {
  height: 8.3333cqw;
  min-height: 8.3333cqw;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-quantity-control,
#appShell:not(.pixel-audit) .spec-reference-live #specProductSold {
  display: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-immediate-pay {
  background: transparent !important;
  color: #fff;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-address-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-delivery-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-discount-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-multi-buy-row,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-method,
#appShell:not(.pixel-audit) .spec-reference-live .spec-payment-select,
#appShell:not(.pixel-audit) .spec-reference-live .spec-options-section > header {
  visibility: visible;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-multi-buy-row {
  transform: translateY(6.1296cqw);
}

#appShell:not(.pixel-audit) .spec-reference-live #specStoreEntry {
  position: absolute;
  right: 2.7777cqw;
  visibility: visible;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-quantity-control {
  display: flex;
}

#appShell:not(.pixel-audit) .spec-reference-live #specProductSold {
  display: block;
  bottom: -1cqw;
  left: 25cqw;
  min-width: 22cqw;
  background: #fff;
  line-height: 4cqw;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The order route uses page 10's pending-shipment reference. Do not let the
 * live checkout-spec composition from the later mobile rules cover it. */
#appShell:not(.pixel-audit) #checkoutView[data-mode="order"] .spec-reference-live {
  display: none;
}

/* Match the address block in checkout-spec-reference-20260816: the legacy
 * offset moved the live address one text column too far right, while the
 * delivery prefix and promise require different typographic treatments. */
#appShell:not(.pixel-audit) .spec-reference-live #specAddressText {
  left: 0;
  top: -.3cqw;
  color: #1c1f26;
  font-size: 3.6cqw;
  font-weight: 400;
}

#appShell:not(.pixel-audit) .spec-reference-live #specDeliveryText {
  color: #10a680;
  font-size: 4cqw;
  font-weight: 700;
  line-height: 1.35;
  padding-left: 12.13cqw;
  transform: translateY(-.435cqw);
}

#appShell:not(.pixel-audit) .spec-reference-live #specDeliveryText::before {
  color: #1c1f26;
  font-size: 3.6cqw;
  font-weight: 400;
  vertical-align: .28cqw;
}

/* Keep the live store header aligned to the reference raster.  The separator
 * belongs immediately after the campaign label; the configured brand follows
 * it at the same fixed start, while the entry label is centered in its slot. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row::before {
  left: 2.67cqw;
  content: "大牌大补 ·";
  font-size: 3.7cqw;
  transform: translateY(.02cqw);
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row::after {
  content: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-store-row #specStoreEntry {
  font-size: 2.9cqw;
  transform: translate(-2.32cqw, .07cqw) scaleX(1.055);
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row #specStoreBrand {
  left: 20.8%;
  width: 50%;
  font-size: 3.7cqw;
  line-height: 1;
  transform: translate(0, .02cqw);
}

@media (min-width: 380px) {
  #appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row #specStoreBrand {
    transform: translate(.55cqw, .02cqw);
  }

  /* At 390/392px wide the reference raster stretches vertically with the
   * viewport, while the discount row is laid out from width units. Keep its
   * labels centered in the gap above the divider at that breakpoint. */
  #appShell:not(.pixel-audit) .spec-reference-live .spec-discount-row > span {
    transform: translateY(-2.15cqw);
  }

  /* The section follows the raster's fixed divider, which otherwise leaves
   * an oversized gap before the heading on the taller 390/392px viewport. */
  #appShell:not(.pixel-audit) .spec-reference-live .spec-options-section {
    margin-top: -3.3cqw;
  }
}

/* The reference raster stretches with viewport height, while the live promo
 * slice is laid out from width-based content units. Cancel that responsive
 * drift so the header stays centered at 390x844 as well as 360x800. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice {
  transform: translateY(calc(25.8333cqh - 57.3914cqw));
}

/* Match the reference's stepped price typography: the integer carries the
 * emphasis while the decimal remains aligned on the same baseline. */
#appShell:not(.pixel-audit) .spec-reference-live #specProductPrice,
#appShell:not(.pixel-audit) .spec-reference-live #specPayPrice {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  white-space: nowrap;
}

#appShell:not(.pixel-audit) .spec-reference-live #specProductPrice .spec-price-major {
  font-size: 6.1cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live #specProductPrice .spec-price-minor {
  font-size: 4.55cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live #specPayPrice {
  vertical-align: baseline;
}

#appShell:not(.pixel-audit) .spec-reference-live #specPayPrice .spec-price-currency {
  font-size: 4.55cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live #specPayPrice .spec-price-major {
  font-size: 6.1cqw;
  line-height: 1;
}

#appShell:not(.pixel-audit) .spec-reference-live #specPayPrice .spec-price-minor {
  font-size: 4.1cqw;
  line-height: 1;
}

/* Shared phone chrome: every live route uses one immutable status-bar slice,
 * so time, signal, Wi-Fi and battery never drift between routed views. Pages
 * may only adapt the background and foreground contrast. Pixel-audit mode
 * remains source-image authoritative. */
#appShell:not(.pixel-audit) > .global-status-bar {
  --global-status-background: transparent;
  --global-status-filter: none;
  display: block;
  height: 8.333333cqw;
  overflow: hidden;
  background-color: var(--global-status-background);
  background-image: none;
  mix-blend-mode: normal;
}

#appShell:not(.pixel-audit) > .global-status-bar::before {
  position: absolute;
  inset: 0;
  background: url("design/slices/home-20260814/status-bar.png") center / 100% 100% no-repeat;
  filter: var(--global-status-filter);
  content: "";
}

#appShell:not(.pixel-audit).route-home > .global-status-bar {
  --global-status-background: #000;
}

#appShell:not(.pixel-audit).route-setup > .global-status-bar,
#appShell:not(.pixel-audit).route-search > .global-status-bar,
#appShell:not(.pixel-audit).route-results > .global-status-bar,
#appShell:not(.pixel-audit).route-product > .global-status-bar,
#appShell:not(.pixel-audit).route-payment-result > .global-status-bar {
  --global-status-background: #fff;
  --global-status-filter: invert(1);
}

#appShell:not(.pixel-audit).route-payment-result > .global-status-bar {
  --global-status-background: #f4f5f8;
}

#appShell:not(.pixel-audit).route-promotion > .global-status-bar {
  --global-status-background: var(--promotion-red);
}

#appShell:not(.pixel-audit).route-promotion.promotion-scroll-active > .global-status-bar {
  --global-status-background: #fff;
  --global-status-filter: invert(1);
}

#appShell:not(.pixel-audit).route-promotion.product-drawer-open > .global-status-bar {
  --global-status-background: #fff;
  --global-status-filter: invert(1);
}

#appShell:not(.pixel-audit).route-promotion.product-drawer-promo-sticky > .global-status-bar {
  --global-status-background: #ff4050;
  --global-status-filter: none;
}

#appShell:not(.pixel-audit).route-checkout > .global-status-bar {
  --global-status-background: #7f7f7f;
}

/* The pending-shipment page keeps its dimmed mall backdrop, while the system
 * glyphs still come from the project-wide shared slice. */
#appShell:not(.pixel-audit).route-order > .global-status-bar {
  --global-status-background: #927b87;
}

#appShell:not(.pixel-audit).route-order > .global-home-indicator {
  display: none;
}

#appShell:not(.pixel-audit).route-order > #checkoutView[data-mode="order"] {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#appShell:not(.pixel-audit).route-order > #checkoutView[data-mode="order"]::after {
  bottom: auto;
  height: max(calc(100dvh - 8.333333cqw), 213.8cqw);
}

#appShell:not(.pixel-audit).route-payment > .global-status-bar {
  --global-status-background: #313f59;
}

#appShell:not(.pixel-audit).route-payment.payment-success > .global-status-bar {
  --global-status-background: #1678ff;
}

#appShell:not(.pixel-audit) > .global-home-indicator {
  position: absolute;
  z-index: 120;
  right: auto;
  bottom: 1.481cqw;
  left: 50%;
  width: 41.944cqw;
  height: 1.111cqw;
  border-radius: 999px;
  background: #c3c3c3;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

#appShell:not(.pixel-audit) .home-view .bottom-nav::after {
  display: none;
}

/* Final cascade lock for the live purchase sheet. Older full-page checkout
 * reference layers stay available for direct routes and pixel audit only. */
#appShell:not(.pixel-audit).checkout-sheet-active > #checkoutView[data-mode="spec"] {
  background: transparent;
}

#appShell:not(.pixel-audit).checkout-sheet-active > #checkoutView[data-mode="spec"]::after {
  display: none !important;
  background-image: none !important;
  content: none !important;
}

#appShell:not(.pixel-audit).checkout-sheet-active .spec-reference-live {
  background: rgb(0 0 0 / 0.5);
}

#appShell:not(.pixel-audit).checkout-sheet-active .spec-reference-live::before {
  clip-path: inset(22.2cqw 0 0);
}

/* The checkout reference is 1080 × 2400. At substantially shorter or taller
 * phone ratios, stretching that raster makes its transparent data windows
 * drift away from the width-scaled live values. Use the existing semantic
 * sheet as the visual source at those extremes; the reference remains the
 * authority around its native aspect ratio. */
@media (max-width: 600px) and (min-aspect-ratio: 7 / 15),
       (max-width: 600px) and (max-aspect-ratio: 3 / 7) {
  #appShell:not(.pixel-audit) .spec-reference-live::before {
    display: none;
    clip-path: none;
    content: none;
  }

  #appShell:not(.pixel-audit) .spec-reference-live > .spec-sheet,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-sheet-scroll,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-row,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-address-row,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-delivery-row,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-discount-row,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-options-section,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-multi-buy-row,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-payment-footer {
    background-color: #fff !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-sheet-scroll {
    inset: 0 0 36cqw;
    padding-bottom: 4cqw;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-icon,
  #appShell:not(.pixel-audit) .spec-reference-live .spec-address-row > img {
    visibility: visible;
    opacity: 1 !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice {
    margin-top: 4.85cqw;
    transform: none;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row {
    background: #f01c19 !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-product-card {
    border-right: 1px solid #f23030 !important;
    border-bottom: 1px solid #f23030 !important;
    border-left: 1px solid #f23030 !important;
    background: #fff !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-option {
    border: 1px solid transparent !important;
    background: #f1f2f6 !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-option.is-selected {
    border-color: #ee3438 !important;
    background: #fff !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-payment-footer {
    border-top-color: #e8ebef !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-payment-footer .spec-immediate-pay {
    background: #f23030 !important;
  }

  #appShell:not(.pixel-audit) .spec-reference-live .spec-payment-mark {
    background: #1677e8 !important;
    opacity: 1 !important;
  }

  #appShell:not(.pixel-audit) .spec-close-button::before,
  #appShell:not(.pixel-audit) .spec-close-button::after {
    display: block;
  }

  #appShell:not(.pixel-audit) .spec-reference-live > .spec-close-button {
    top: 23.5cqw;
    background: transparent;
    opacity: 1;
  }
}

/* The project fullscreen entry belongs to the initial setup page only. */
.setup-header {
  position: relative;
}

.setup-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin-bottom: 2cqw;
}

.setup-header-toolbar .setup-kicker {
  margin: 0;
}

.setup-fullscreen-toggle {
  display: inline-flex;
  height: 8.8cqw;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw;
  padding: 0 3.2cqw;
  border: 1px solid rgb(36 37 43 / 0.14);
  border-radius: 999px;
  background: #24252b;
  box-shadow: 0 1.4cqw 3.2cqw rgb(36 37 43 / 0.18);
  color: white;
  font-size: 3.1cqw;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.setup-fullscreen-toggle:hover,
.setup-fullscreen-toggle:focus-visible {
  background: #34363f;
  box-shadow: 0 1.8cqw 4cqw rgb(36 37 43 / 0.24);
}

.setup-fullscreen-toggle:active {
  transform: scale(0.97);
}

#appShell:not(.route-setup) .setup-fullscreen-toggle {
  display: none;
}

.demo-fullscreen-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.demo-fullscreen-exit-icon {
  display: none;
}

.setup-fullscreen-toggle.is-active .demo-fullscreen-enter-icon {
  display: none;
}

.setup-fullscreen-toggle.is-active .demo-fullscreen-exit-icon {
  display: block;
}

body.is-demo-fullscreen .app-shell,
body.is-demo-fullscreen .app-shell.route-payment,
body.is-demo-fullscreen .app-shell.route-payment.payment-success {
  width: min(100vw, calc(100dvh * 750 / 1666));
  max-width: none;
  height: min(100dvh, calc(100vw * 1666 / 750));
  max-height: none;
  aspect-ratio: 750 / 1666;
  box-shadow: none;
}

body.is-demo-fullscreen .app-shell.route-payment.payment-success {
  width: min(100vw, calc(100dvh * 750 / 1668));
  height: min(100dvh, calc(100vw * 1668 / 750));
  aspect-ratio: 750 / 1668;
}

@media (max-width: 600px) {
  body.is-demo-fullscreen .app-shell,
  body.is-demo-fullscreen .app-shell.route-payment,
  body.is-demo-fullscreen .app-shell.route-payment.payment-success {
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
  }
}

/* A visible-viewport fallback keeps fullscreen usable when a mobile browser
 * exposes the API but rejects every native fullscreen request. */
body.is-video-fullscreen-fallback .app-shell,
body.is-video-fullscreen-fallback .app-shell.route-payment,
body.is-video-fullscreen-fallback .app-shell.route-payment.payment-success {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  aspect-ratio: auto;
  box-shadow: none;
}

body.is-video-fullscreen-fallback #appShell > .global-status-bar,
body.is-video-fullscreen-fallback #appShell > .global-home-indicator,
.home-view.is-video-fullscreen-fallback .top-chrome,
.home-view.is-video-fullscreen-fallback .bottom-nav,
.home-view.is-video-fullscreen-fallback .action-rail,
.home-view.is-video-fullscreen-fallback .video-meta {
  display: none;
}

.home-view.is-video-fullscreen-fallback::after {
  display: none;
}

.home-view.is-video-fullscreen-fallback .feed-content {
  inset: 0;
  background: #000;
}

.home-view.is-video-fullscreen-fallback .feed-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-view.is-video-fullscreen-fallback .fullscreen-button {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.62);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  transform: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-view.is-video-fullscreen-fallback .fullscreen-button:active {
  transform: scale(0.96);
}

.home-view.is-video-fullscreen-fallback .fullscreen-button-image {
  display: none;
}

.home-view.is-video-fullscreen-fallback .fullscreen-button::before {
  content: "\00d7";
}

/* Full-page reference slices include their original bottom action. The live
 * pages also pin a dedicated responsive bottom crop, so the main slice must
 * stop before that source action on tall phones or two CTAs become visible. */
#appShell:not(.pixel-audit) #productView::after {
  bottom: auto;
  height: min(calc(100dvh - 8.333333cqw), 186.2cqw);
}

#appShell:not(.pixel-audit).route-payment:not(.payment-success) #paymentView::after {
  bottom: auto;
  height: 179.54cqw;
}

/* Preserve the full 1080 x 2400 payment canvas on short screens. The visible
 * reference layer is absolutely positioned, so it needs an explicit height to
 * create scrollable overflow after the legacy payment panel is hidden. */
#appShell:not(.pixel-audit).route-payment:not(.payment-success) #paymentView {
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f5f8fd;
  background-image: linear-gradient(to bottom, #313f59 0 56.7cqw, #f5f8fd 56.7cqw 100%);
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

#appShell:not(.pixel-audit).route-payment:not(.payment-success) .payment-reference-live {
  inset: 0 0 auto;
  height: max(100%, 222.222222cqw);
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay::before {
  bottom: auto;
  height: min(calc(100dvh - 8.333333cqw), 184.17cqw);
}

#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay {
  background: #f5f5f5;
}

/* The shared status slice and the success raster meet on a fractional cqw
 * boundary. Paint across that boundary without moving either source image. */
#appShell:not(.pixel-audit).route-payment.payment-success #paymentSuccessOverlay::after {
  position: absolute;
  z-index: 1;
  top: calc(8.333333cqw - 1px);
  right: 0;
  left: 0;
  height: 2px;
  background: #1678ff;
  content: "";
  pointer-events: none;
}

/* Product review sheet — calibrated to product-review-reference-20260818.jpg. */
#productView .product-sticky-tabs button.is-active::after {
  right: 34%;
  left: 34%;
  height: .75cqw;
  background: #111a39;
}

#productView .review-block {
  padding: 0 4.4cqw 4.2cqw;
  color: #20232a;
}

#productView .review-block > header {
  min-height: 14cqw;
}

#productView .review-block > header h2 {
  color: #20232a;
  font-size: 4.45cqw;
  font-weight: 700;
}

#productView .review-block > header h2 span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

#productView .review-summary,
#appShell.product-drawer-open #productView.is-drawer-expanded .review-summary {
  position: relative;
  display: grid;
  grid-template-columns: 22cqw minmax(0, 1fr);
  gap: 5.2cqw;
  margin: 0 0 4.5cqw;
  padding: 2.5cqw 0 1cqw;
}

#productView .review-summary::after {
  position: absolute;
  top: 3.4cqw;
  bottom: 2cqw;
  left: 22.8cqw;
  width: 1px;
  background: #eceef2;
  content: "";
}

#productView .review-score strong {
  color: #f22e36;
  font-size: 7.4cqw;
  font-weight: 750;
}

#productView .review-score strong small {
  color: inherit;
  font-size: 4.3cqw;
}

#productView .review-score > .review-score-stars {
  width: 15.6cqw;
  height: auto;
  margin-top: 1.5cqw;
}

#productView .review-score > small {
  margin-top: 1.7cqw;
  color: #657087;
  font-size: 3.25cqw;
}

#productView .review-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 1.7cqw 1.8cqw;
  align-content: start;
  justify-content: start;
}

#productView .review-tags span,
#productView .review-tags span:first-child,
#productView .shop-review-tags span {
  display: inline-flex;
  min-height: 8.2cqw;
  box-sizing: border-box;
  align-items: center;
  gap: 1.1cqw;
  padding: 1.6cqw 2cqw;
  border-radius: 1.4cqw;
  background: #f7f8fa;
  color: #292d35;
  font-size: 3.45cqw;
  line-height: 1;
  white-space: nowrap;
}

#productView .review-tags b,
#productView .shop-review-tags b {
  font-weight: 500;
}

#productView .review-tags small,
#productView .shop-review-tags small {
  color: #a6adba;
  font-size: .94em;
}

#productView .review-list {
  display: block;
  margin: 0;
}

#productView .review-item {
  display: grid;
  grid-template-columns: 7.1cqw minmax(0, 1fr);
  gap: 2.2cqw;
  min-height: 18cqw;
  padding: 1.6cqw 0 2.4cqw;
}

#productView .review-avatar {
  width: 7.1cqw;
  height: 7.1cqw;
  border-radius: 50%;
  background: #f0f1f3;
  object-fit: cover;
}

#productView .review-item-copy {
  min-width: 0;
}

#productView .review-block .review-user-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.5cqw;
  margin: .4cqw 0 0;
  color: #858e9f;
  font-size: 3.35cqw;
  line-height: 1.35;
}

#productView .review-user-line span {
  flex: 0 0 auto;
  color: inherit;
  font-size: inherit;
}

#productView .review-user-line small {
  min-width: 0;
  overflow: hidden;
  padding-left: 1.4cqw;
  border-left: 1px solid #d8dce3;
  color: #858e9f;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#productView .review-body-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.5cqw;
  gap: 2.3cqw;
  align-items: start;
}

#productView .review-block .review-content {
  margin: 3.1cqw 0 0;
  color: #20242b;
  font-size: 3.7cqw;
  line-height: 1.55;
}

#productView .review-photo {
  width: 13.5cqw;
  height: 13.5cqw;
  margin-top: -1cqw;
  border-radius: 1cqw;
  background: #eef0f2;
  object-fit: cover;
}

#productView .review-heading-row > strong {
  color: #111a39;
  font-size: 4.2cqw;
  font-weight: 700;
}

#productView .shop-review-summary,
#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary {
  display: block;
  margin: 4.2cqw 0 0;
  padding: 4cqw 0 .5cqw;
  border-top: 1px solid #eceef1;
}

#productView .review-heading-row > strong span {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

#productView .shop-review-tags,
#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary > .shop-review-tags {
  display: flex;
  gap: 1.6cqw;
  margin-top: 3.6cqw;
  overflow: hidden;
}

#productView .shop-review-tags span,
#appShell.product-drawer-open #productView.is-drawer-expanded .shop-review-summary .shop-review-tags span {
  min-height: 8cqw;
  padding: 1.6cqw 2cqw;
  background: #f7f8fa;
  color: #292d35;
  font-size: 3.35cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .review-block {
  display: block;
  padding-bottom: 4.2cqw;
}

/* Product shop area calibrated to product-shop-reference-20260818.jpg. */
#appShell.product-drawer-open #productView.is-drawer-expanded .brand-review-summary {
  display: block;
  margin-top: 4.2cqw;
  padding-top: 4cqw;
  border-top: 1px solid #eceef1;
}

#productView .brand-review-banner {
  min-height: 16.666667cqw;
  margin-top: 3.5cqw;
  border-radius: 1.5cqw 1.5cqw 0 0;
  background-color: #ff4051;
  background-image: url("design/slices/product-shop-reference-20260818/brand-banner-lightning.png"), linear-gradient(105deg, #ff3654, #ff584d);
  background-position: right top, center;
  background-repeat: no-repeat;
  background-size: 17.777778cqw 16.666667cqw, cover;
}

#productView .brand-review-banner strong {
  font-size: 4.45cqw;
  line-height: 1.25;
}

#productView .brand-review-banner small {
  font-size: 3.35cqw;
  line-height: 1.25;
}

#productView .brand-review-stats {
  min-height: 12.1cqw;
  margin-right: -4.4cqw;
  margin-left: -4.4cqw;
  padding: 0 4.4cqw;
  border-radius: 2cqw 2cqw 0 0;
  background: linear-gradient(180deg, #fff3f4, #fff 86%);
}

#productView .brand-review-stats strong {
  min-height: 5.4cqw;
  gap: 1.25cqw;
  color: #4b1116;
  font-size: 3.55cqw;
  line-height: 1.2;
}

#productView .brand-review-fire-icon {
  width: 4.444444cqw;
  height: 5cqw;
}

#productView .brand-review-thumb-icon {
  width: 4.444444cqw;
  height: 4.444444cqw;
}

#productView .brand-review-user {
  min-height: 20.2cqw;
  align-items: start;
  padding: 3.2cqw 0 4.2cqw;
}

#productView .brand-review-user > img {
  margin-top: .3cqw;
  border: 1px solid #f0f1f3;
}

#productView .brand-review-user span {
  display: block;
  padding-top: .8cqw;
  font-size: 3.35cqw;
}

#productView .brand-review-user p {
  margin-top: 3.1cqw;
  font-size: 3.75cqw;
  line-height: 1.55;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-block {
  margin-top: 2.2cqw;
  padding: 3.2cqw 2.8cqw 3.2cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-heading {
  min-height: 19cqw;
  grid-template-columns: 13cqw minmax(0, 1fr) auto;
  gap: 2.7cqw;
  padding: 2.8cqw 3.1cqw;
  border-color: #eee6d6;
  background: #fffdf9;
}

#productView .shop-heading .shop-experience-line {
  display: flex;
  gap: 1cqw;
  align-items: center;
  overflow: visible;
}

#productView .shop-heading .shop-tier-label {
  flex: 0 0 auto;
  padding: .45cqw .8cqw;
  border-radius: .45cqw;
  background: #171217;
  color: #fff;
  font-size: 2.75cqw;
  font-weight: 500;
  line-height: 1.1;
}

#productView .shop-heading .shop-experience-score {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .55cqw;
  overflow: visible;
  padding: .25cqw .65cqw;
  border: 1px solid #f0e1c5;
  border-radius: .45cqw;
  background: #fff9ed;
  color: #aa8450;
  font-size: 2.65cqw;
  line-height: 1;
}

#productView .shop-heading .shop-rating-stars {
  display: block;
  width: 12.222222cqw;
  height: 2.962963cqw;
  object-fit: fill;
}

#productView .shop-heading small {
  color: #697287;
  font-size: 2.85cqw;
}

#productView .shop-authority-row {
  display: grid;
  min-height: 0;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 0;
  border-right: 1px solid #eee6d6;
  border-left: 1px solid #eee6d6;
  border-radius: 0;
  background: #fffdf9;
}

#productView .shop-authority-cutout {
  display: block;
  width: 86.111111cqw;
  height: auto;
  max-width: calc(100% - 8cqw);
  object-fit: contain;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .shop-service-metrics {
  min-height: 18.6cqw;
  border-color: #eee6d6;
}

#productView .shop-service-metrics span {
  font-size: 3cqw;
}

#productView .shop-service-icon {
  width: 3.611111cqw;
  height: 3.611111cqw;
  object-fit: fill;
}

#productView .shop-service-metrics strong {
  font-size: 3.15cqw;
  line-height: 1.25;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-row,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-row {
  min-height: 0;
  grid-template-columns: 5.333333cqw auto minmax(0, 1fr) 1.733333cqw;
  gap: 2cqw;
  margin: 2.1cqw -2.4cqw 0;
  padding: 1.733333cqw;
  border-radius: 1.2cqw;
  background: linear-gradient(90deg, #765d1d, #5e4620);
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-logo,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-logo {
  width: 5.333333cqw;
  height: 5.333333cqw;
  border-radius: .6cqw;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-row strong,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-row strong {
  max-width: 33cqw;
  overflow: hidden;
  padding-right: 2cqw;
  border-color: rgb(255 244 211 / .65);
  color: #fff7dd;
  font-size: 3.6cqw;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-row span,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-row span {
  color: #f1dfb7;
  font-size: 3.6cqw;
  line-height: 1.1;
}

#appShell.product-drawer-open #productView.is-drawer-expanded .brand-guarantee-arrow,
#appShell.product-drawer-open #productView.is-drawer-partial .brand-guarantee-arrow {
  width: 1.733333cqw;
  height: auto;
  filter: none;
  mix-blend-mode: normal;
}

/* Keep the two annotated checkout details optically balanced. */
#appShell:not(.pixel-audit) .spec-reference-live .spec-guarantee-icon {
  transform: translateY(.44cqw);
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row {
  justify-content: flex-start;
  padding-right: 18cqw;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row::before {
  position: static;
  display: flex;
  height: 100%;
  flex: 0 0 auto;
  align-items: center;
  content: "大牌大补";
  transform: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row #specStoreBrand {
  position: static;
  display: flex;
  width: auto;
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  align-items: center;
  transform: none;
}

#appShell:not(.pixel-audit) .spec-reference-live .spec-promo-slice .spec-store-row #specStoreBrand::before {
  flex: 0 0 auto;
  margin-right: 1cqw;
  margin-left: .75cqw;
  content: "·";
}