:root {
  --brand-mint: #6fefd3;
  --brand-violet: #b693ed;
  --brand-pink: #e2a1f1;
  --brand-ink: #111111;
  --brand-gradient: linear-gradient(135deg, var(--brand-mint) 0%, var(--brand-violet) 52%, var(--brand-pink) 100%);
  --brand-soft: linear-gradient(135deg, rgba(111, 239, 211, 0.16), rgba(182, 147, 237, 0.14), rgba(226, 161, 241, 0.15));
  --teal: var(--brand-mint);
  --violet: var(--brand-violet);
  --pink: var(--brand-pink);
}

/* Product media layering: artwork stays behind interactive badges. */
.product-card .product-media {
  isolation: isolate;
}

.product-card .product-media > img {
  position: relative;
  z-index: 0;
}

.product-card .product-media > :is(.sale-badge, .fav-button) {
  z-index: 4;
}

/* Smart search: larger scrollable autocomplete with a clear route to all results. */
.suggestions {
  scroll-padding-block: 8px;
}

.suggestion-all-results {
  position: sticky;
  bottom: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  border: 1px solid rgba(181, 163, 232, .2);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, .18), rgba(239, 138, 222, .2)),
    rgba(255, 255, 255, .94);
  color: #15151b;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 -8px 16px rgba(255, 255, 255, .72);
}

.suggestion-all-results svg {
  width: 16px;
  height: 16px;
  color: #8d61d8;
  stroke-width: 2;
}

html[data-theme="dark"] .suggestion-all-results {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(121, 239, 215, .16), rgba(180, 91, 216, .22)),
    rgba(28, 28, 36, .94);
  color: #f8f8fb;
  box-shadow: 0 -8px 18px rgba(9, 9, 14, .55);
}

@media (max-width: 640px) {
  .suggestions,
  body[data-route="home"] .suggestions {
    max-height: min(470px, calc(100svh - 142px)) !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* Smooth taxonomy release: no intro flash, manual shortcut rail, stable route restoration. */
html.is-route-scroll-restoring #app {
  opacity: 1 !important;
}

@media (max-width: 640px) {
  html[dir="rtl"] body[data-route="home"] .hero-icon-track {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-track {
    animation: none !important;
    scroll-behavior: auto !important;
  }

  body[data-route="home"] .hero-icon-page,
  body[data-route="home"] .hero-icon-strip-page {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(68px, auto)) !important;
    gap: 7px 8px !important;
  }

  body[data-route="home"] .hero-icon-item {
    touch-action: manipulation !important;
  }

  body[data-route="section"] .section-hub-tabs {
    inline-size: 128px !important;
    min-width: 128px !important;
    gap: 2px !important;
    padding-block: 8px !important;
    background: #f1f2f5 !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    padding-block: 3px !important;
  }

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #15161d !important;
  }
}

/* Catalog typography guard: Arabic glyphs and numerals must never be cropped. */
.product-card .product-body,
.favorite-mini-card .product-body,
.cart-item-copy,
body[data-route="product"] .detail-info {
  min-width: 0 !important;
}

.product-card .brand-name,
.favorite-mini-card .brand-name,
.product-card .product-name,
.favorite-mini-card .product-name,
.cart-item-title,
.cart-item-variant,
.product-card .rating-row,
.product-card .rating-row > span,
.product-card .stock,
.favorite-mini-card .stock,
.product-card .price-row,
.favorite-mini-card .price-row,
.product-card .price,
.favorite-mini-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.detail-price-card .price,
.detail-price-card .old-price,
.detail-stock,
.detail-saving {
  box-sizing: border-box !important;
  text-decoration-skip-ink: auto !important;
}

.product-card .brand-name,
.favorite-mini-card .brand-name,
.cart-item .brand-name {
  min-height: 18px !important;
  padding-block: 2px !important;
  line-height: 1.4 !important;
  overflow: visible !important;
}

.product-card .product-name,
.favorite-mini-card .product-name,
.cart-item-title {
  padding-block: 2px !important;
  line-height: 1.42 !important;
}

.product-card .rating-row,
.favorite-mini-card .rating-row {
  min-height: 22px !important;
  padding-block: 2px !important;
  align-items: center !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

.product-card .rating-row > span:last-child,
.favorite-mini-card .rating-row > span:last-child {
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

.product-card .card-rating,
.favorite-mini-card .card-rating {
  height: 19px !important;
  min-height: 19px !important;
  padding: 2px 5px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

.product-card .card-rating b,
.product-card .card-rating em,
.favorite-mini-card .card-rating b,
.favorite-mini-card .card-rating em {
  height: auto !important;
  min-height: 12px !important;
  padding-top: 1px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

.product-card .price-row,
.favorite-mini-card .price-row,
.cart-item .price-row,
.detail-price-card .price-row {
  min-height: 28px !important;
  padding-block: 3px !important;
  align-items: center !important;
  overflow: visible !important;
}

.product-card .price,
.favorite-mini-card .price,
.cart-item .price,
.detail-price-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.cart-item .old-price,
.detail-price-card .old-price {
  padding-block: 1px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

.product-card .stock,
.favorite-mini-card .stock,
.detail-stock {
  min-height: 22px !important;
  padding-block: 3px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

.cart-stepper strong,
.cart-item-stepper > span,
.cart-count-button,
.cart-stepper-plus,
.cart-stepper-minus,
.remove-cart-button,
.notification-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 1px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

/* Final catalog quantity control: compact, stable, and identical on every card. */
:root {
  --nion-quantity-cell: 22px;
  --nion-quantity-gap: 2px;
}

.product-card .cart-control.is-added:not(.is-flash-only),
.favorite-mini-action .cart-control.is-added:not(.is-flash-only),
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 7px !important;
  direction: inherit !important;
  box-sizing: border-box !important;
  padding: 4px 6px 4px 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 11px !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: grid !important;
  grid-template-columns: repeat(3, var(--nion-quantity-cell)) !important;
  grid-auto-flow: column !important;
  place-items: center !important;
  justify-content: center !important;
  gap: var(--nion-quantity-gap) !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  width: var(--nion-quantity-cell) !important;
  min-width: var(--nion-quantity-cell) !important;
  max-width: var(--nion-quantity-cell) !important;
  height: var(--nion-quantity-cell) !important;
  min-height: var(--nion-quantity-cell) !important;
  max-height: var(--nion-quantity-cell) !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  vertical-align: middle !important;
  transform: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #17171d !important;
  background: rgba(255, 255, 255, 0.94) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
  color: #fff !important;
  background: var(--nion-solid-badge) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  color: #17171d !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  color: #111116 !important;
  background: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #f1f1f5 !important;
}

@media (max-width: 374px) {
  .product-card .cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
    gap: 5px !important;
    padding-inline: 7px 5px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
    font-size: 9.5px !important;
  }
}

/* Checkout confirmation: review first, create the order only after final consent. */
.checkout-confirm-modal {
  width: min(440px, calc(100vw - 24px));
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #141419;
  box-shadow: 0 28px 90px rgba(18, 18, 24, 0.28);
}

.checkout-confirm-modal::backdrop {
  background: rgba(12, 12, 16, 0.56);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.checkout-confirm-shell {
  display: grid;
  gap: 16px;
  padding: 20px;
  text-align: start;
}

.checkout-confirm-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 11px;
}

.checkout-confirm-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.9), rgba(216, 183, 242, 0.92));
  color: #15151a;
  box-shadow: 0 12px 26px rgba(126, 99, 220, 0.16);
}

.checkout-confirm-head h2,
.checkout-confirm-head p {
  margin: 0;
  letter-spacing: 0;
}

.checkout-confirm-head h2 {
  font-size: 20px;
  font-weight: 850;
  line-height: 1.3;
}

.checkout-confirm-head p {
  margin-top: 3px;
  color: rgba(20, 20, 25, 0.58);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.checkout-confirm-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 18, 24, 0.06);
  color: #18181d;
}

.checkout-confirm-total {
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 15px 16px;
  border: 1px solid rgba(126, 99, 220, 0.14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.12), rgba(216, 183, 242, 0.14));
}

.checkout-confirm-total span,
.checkout-confirm-total em {
  color: rgba(20, 20, 25, 0.56);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.checkout-confirm-total strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #cf2f6b;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.checkout-confirm-details {
  display: grid;
  gap: 9px;
}

.checkout-confirm-details section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18, 18, 24, 0.08);
}

.checkout-confirm-details section > span {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(20, 20, 25, 0.55);
  font-size: 11.5px;
  font-weight: 750;
}

.checkout-confirm-details section > strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.checkout-confirm-details section > small {
  align-self: center;
  color: rgba(20, 20, 25, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.checkout-confirm-summary {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #f7f7f9;
}

.checkout-confirm-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
}

.checkout-confirm-summary > div span {
  color: rgba(20, 20, 25, 0.58);
  font-weight: 650;
}

.checkout-confirm-summary > div strong {
  font-weight: 850;
}

.checkout-confirm-summary > .is-discount strong {
  color: #168653;
}

.checkout-confirm-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(20, 20, 25, 0.58);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.5;
}

.checkout-confirm-notice .nion-icon {
  flex: 0 0 auto;
  color: #6c4dd2;
}

.checkout-confirm-error {
  margin: -6px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.07);
  color: #c52222;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.5;
}

.checkout-confirm-error[hidden] {
  display: none;
}

.checkout-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 9px;
}

.checkout-confirm-actions button {
  min-height: 50px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 850;
}

.checkout-confirm-back {
  border: 1px solid rgba(18, 18, 24, 0.12);
  background: #fff;
  color: #17171c;
}

.checkout-confirm-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: #111116;
  color: #fff;
  box-shadow: 0 14px 28px rgba(18, 18, 24, 0.2);
}

.checkout-confirm-modal[data-submitting="true"] .checkout-confirm-submit .nion-icon,
.checkout-form [data-checkout-submit]:disabled .nion-icon,
.cart-sticky-pay:disabled .nion-icon {
  animation: checkoutConfirmSpin 0.8s linear infinite;
}

.checkout-confirm-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

@keyframes checkoutConfirmSpin {
  to { transform: rotate(360deg); }
}

html[data-theme="dark"] .checkout-confirm-modal {
  background: #111217;
  color: #f7f7fb;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .checkout-confirm-head p,
html[data-theme="dark"] .checkout-confirm-total span,
html[data-theme="dark"] .checkout-confirm-total em,
html[data-theme="dark"] .checkout-confirm-details section > span,
html[data-theme="dark"] .checkout-confirm-details section > small,
html[data-theme="dark"] .checkout-confirm-summary > div span,
html[data-theme="dark"] .checkout-confirm-notice {
  color: rgba(247, 247, 251, 0.6);
}

html[data-theme="dark"] .checkout-confirm-close,
html[data-theme="dark"] .checkout-confirm-back {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #f7f7fb;
}

html[data-theme="dark"] .checkout-confirm-total {
  border-color: rgba(216, 183, 242, 0.12);
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.07), rgba(216, 183, 242, 0.09));
}

html[data-theme="dark"] .checkout-confirm-details section {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .checkout-confirm-summary {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .checkout-confirm-error {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
}

@media (max-width: 420px) {
  .checkout-confirm-shell {
    gap: 14px;
    padding: 17px;
  }

  .checkout-confirm-head {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
  }

  .checkout-confirm-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .checkout-confirm-head h2 {
    font-size: 18px;
  }

  .checkout-confirm-total strong {
    font-size: 21px;
  }

  .checkout-confirm-actions button {
    min-height: 48px;
  }
}

/* Cart payment rail: a single fixed checkout action above the liquid dock. */
.cart-sticky-checkout {
  display: none;
}

@media (max-width: 760px) {
  body[data-route="cart"] .cart-recommendations-slot {
    margin-bottom: 184px !important;
  }

  body[data-route="cart"] .checkout-form [data-checkout-submit],
  body[data-route="cart"] .cart-summary-panel > .primary-button[data-auth="login"] {
    display: none !important;
  }

  body[data-route="cart"] .cart-sticky-checkout {
    position: fixed;
    z-index: 1700;
    left: 50%;
    right: auto;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: calc(100% - 28px);
    max-width: 560px;
    min-height: 70px;
    margin: 0;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(128px, 42%);
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 22px;
    background:
      radial-gradient(100% 150% at 6% 0%, rgba(255, 255, 255, 0.78), transparent 46%),
      radial-gradient(100% 130% at 96% 100%, rgba(121, 239, 215, 0.15), transparent 54%),
      rgba(248, 248, 253, 0.78);
    box-shadow:
      0 20px 48px rgba(16, 17, 24, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(32px) saturate(1.7);
    -webkit-backdrop-filter: blur(32px) saturate(1.7);
  }

  body[data-route="cart"] .cart-sticky-total {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 7px;
    row-gap: 1px;
    padding-inline: 5px;
  }

  body[data-route="cart"] .cart-sticky-total span {
    color: rgba(17, 17, 22, 0.56);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.2;
  }

  body[data-route="cart"] .cart-sticky-total strong {
    min-width: 0;
    color: #111116;
    font-family: Inter, "SF Pro Display", Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
  }

  body[data-route="cart"] .cart-sticky-total em {
    grid-column: 1 / -1;
    color: #148e77;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.3;
  }

  body[data-route="cart"] .cart-sticky-pay {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #111116;
    color: #fff;
    box-shadow: 0 14px 26px rgba(17, 17, 22, 0.22);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
  }

  body[data-route="cart"] .cart-sticky-pay .nion-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    stroke-width: 1.85 !important;
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-sticky-checkout {
    border-color: rgba(255, 255, 255, 0.11);
    background:
      radial-gradient(100% 150% at 6% 0%, rgba(255, 255, 255, 0.09), transparent 48%),
      radial-gradient(100% 130% at 96% 100%, rgba(121, 239, 215, 0.08), transparent 56%),
      rgba(20, 20, 27, 0.86);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-sticky-total span {
    color: rgba(247, 247, 251, 0.56);
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-sticky-total strong {
    color: #fff;
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-sticky-total em {
    color: #79efd7;
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-sticky-pay {
    background: #f7f7fb;
    color: #111116;
  }
}

/* Search discovery surface: recent queries, popular terms, brands and live products. */
body.search-surface-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(17, 17, 24, 0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: nion-search-backdrop-in 160ms ease-out both;
}

body.search-surface-open .site-header {
  z-index: 60 !important;
}

.search-surface-open .search {
  z-index: 65;
}

.suggestions,
body[data-route="home"] .suggestions {
  inset-block-start: calc(100% + 9px) !important;
  z-index: 80 !important;
  max-height: min(620px, calc(100vh - 138px)) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid rgba(124, 102, 204, 0.16) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 24px 70px rgba(23, 20, 34, 0.22) !important;
  transform-origin: top center;
  animation: nion-search-surface-in 190ms cubic-bezier(.2,.8,.2,1) both;
}

.search-discovery,
.search-results-surface {
  padding: 15px;
}

.search-discovery-section + .search-discovery-section,
.search-results-surface > .search-discovery-heading:not(:first-child) {
  margin-top: 18px;
}

.search-discovery-heading {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.search-discovery-heading strong {
  color: #18171d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.search-history-clear {
  width: auto !important;
  min-height: 28px !important;
  padding: 3px 7px !important;
  color: #7b64c6 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.search-recent-list,
.search-popular-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.search-recent-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(119, 102, 183, 0.13);
  border-radius: 999px;
  background: #f7f7fa;
  overflow: hidden;
}

.search-recent-chip > button,
.search-popular-list > button {
  width: auto !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  color: #29272f !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.35;
}

.search-recent-chip > button:last-child {
  min-width: 27px !important;
  padding-inline: 4px 8px !important;
  color: #8b8891 !important;
}

.search-popular-list > button {
  border: 1px solid rgba(137, 102, 211, 0.12) !important;
  background: linear-gradient(135deg, rgba(111,239,211,.11), rgba(226,161,241,.12)) !important;
}

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

.suggestions .search-brand-card {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-rows: 46px auto;
  place-items: center;
  gap: 5px;
  padding: 8px 5px !important;
  border: 1px solid rgba(112, 102, 151, 0.1) !important;
  border-radius: 10px !important;
  background: #fbfbfc !important;
}

.search-brand-card .brand-logo {
  width: 100%;
  max-width: 78px;
  height: 43px;
  object-fit: contain;
}

.search-brand-card span {
  width: 100%;
  overflow: hidden;
  color: #62606a;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-brand-matches {
  margin: 0 0 16px;
}

.search-results-surface > .search-brand-matches + .search-discovery-heading,
.search-route-results > .search-brand-matches + .filters,
.search-route-results > .search-brand-matches + .product-grid {
  margin-top: 14px !important;
}

.search-brand-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.search-brand-match {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(116, 100, 174, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #17161c;
  box-shadow: 0 8px 22px rgba(24, 20, 39, 0.055);
  text-align: start;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.search-brand-match:is(:hover, :focus-visible) {
  border-color: rgba(156, 109, 242, 0.34);
  box-shadow: 0 11px 25px rgba(24, 20, 39, 0.1);
  transform: translateY(-1px);
}

.search-brand-match-logo {
  width: 54px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  color: #8667d5;
}

.search-brand-match-logo .brand-logo {
  width: 46px;
  height: 40px;
  object-fit: contain;
}

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

.search-brand-match-copy strong,
.search-brand-match-copy small {
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-brand-match-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.search-brand-match-copy small {
  color: #77737f;
  font-size: 10.5px;
  font-weight: 550;
}

.search-brand-match-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(202, 125, 239, 0.18));
  color: #7556c8;
}

.search-query-list {
  display: grid;
  margin-bottom: 3px;
}

.suggestions .search-query-suggestion {
  min-height: 39px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 5px !important;
  border-bottom: 1px solid rgba(112, 106, 126, 0.09) !important;
  border-radius: 0 !important;
  color: #242229;
}

.search-query-suggestion span {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-query-suggestion small {
  color: #908b99;
  font-size: 9.5px;
}

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

.suggestions .suggestion-product,
.suggestion-product {
  min-width: 0 !important;
  min-height: 76px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px !important;
  border: 1px solid rgba(98, 91, 118, 0.09) !important;
  border-radius: 10px !important;
  background: #fff !important;
  text-align: start !important;
}

.suggestion-product-image {
  width: 58px !important;
  height: 58px !important;
  border-radius: 8px !important;
  background: #f8f8fa !important;
}

.suggestion-product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.suggestion-product-copy {
  min-width: 0;
  gap: 2px !important;
}

.suggestion-product-copy small {
  font-size: 9.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.suggestion-product-copy strong {
  min-height: 32px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.suggestion-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.suggestion-price-row b {
  color: #c93472;
  font-size: 11px;
  font-weight: 700;
}

.suggestion-price-row i {
  color: #aaa6af;
  font-size: 8.5px;
  text-decoration: line-through;
}

.search-no-results {
  min-height: 100px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: #77727f;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.search-result-skeletons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.search-result-skeletons i {
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f1f1f5 20%, #fafafd 45%, #f1f1f5 70%);
  background-size: 220% 100%;
  animation: nion-search-shimmer 1.1s linear infinite;
}

html[data-theme="dark"] .suggestions,
html[data-theme="dark"] body[data-route="home"] .suggestions {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(17, 18, 26, 0.98) !important;
  box-shadow: 0 26px 76px rgba(0,0,0,.55) !important;
}

html[data-theme="dark"] .search-discovery-heading strong,
html[data-theme="dark"] .search-query-suggestion,
html[data-theme="dark"] .search-recent-chip > button,
html[data-theme="dark"] .search-popular-list > button,
html[data-theme="dark"] .suggestion-product-copy strong {
  color: #f5f4f8 !important;
}

html[data-theme="dark"] .search-recent-chip,
html[data-theme="dark"] .search-popular-list > button,
html[data-theme="dark"] .suggestions .search-brand-card,
html[data-theme="dark"] .suggestions .suggestion-product {
  border-color: rgba(255,255,255,.08) !important;
  background: #171821 !important;
}

html[data-theme="dark"] .search-brand-card span,
html[data-theme="dark"] .suggestion-product-copy small,
html[data-theme="dark"] .search-query-suggestion small {
  color: rgba(247,247,251,.6) !important;
}

html[data-theme="dark"] .suggestion-product-image {
  background: #11121a !important;
}

html[data-theme="dark"] .search-result-skeletons i {
  background: linear-gradient(90deg, #171821 20%, #22232d 45%, #171821 70%);
  background-size: 220% 100%;
}

@keyframes nion-search-surface-in {
  from { opacity: 0; transform: translateY(-7px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nion-search-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nion-search-shimmer {
  to { background-position: -220% 0; }
}

@media (max-width: 640px) {
  body.search-surface-open {
    overflow: hidden;
  }

  body.search-surface-open::before {
    background: rgba(9, 9, 14, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .suggestions,
  body[data-route="home"] .suggestions {
    position: fixed !important;
    inset: calc(env(safe-area-inset-top, 0px) + 112px) 8px auto 8px !important;
    width: auto !important;
    max-height: calc(100svh - env(safe-area-inset-top, 0px) - 126px) !important;
    border-radius: 14px 14px 18px 18px !important;
    animation-name: nion-search-mobile-in;
  }

  .search-discovery,
  .search-results-surface {
    padding: 13px;
  }

  .search-brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .suggestions .search-brand-card {
    min-height: 74px;
    grid-template-rows: 40px auto;
  }

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

  .suggestions .suggestion-product,
  .suggestion-product {
    min-height: 72px !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  .suggestion-product-image {
    width: 54px !important;
    height: 54px !important;
  }
}

@keyframes nion-search-mobile-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.search-surface-open::before,
  .suggestions,
  .search-result-skeletons i {
    animation: none !important;
  }
}

.section-head h2,
.section-panel-title strong,
.section-panel-title span,
.section-category-grid .quick-tile span,
.category-sibling-track span {
  padding-block: 2px !important;
  line-height: 1.35 !important;
}

/* App-cache2: horizontal rails drag like native store carousels and never open links mid-swipe. */
@media (max-width: 640px) {
  .hero-icon-track,
  .quick-grid,
  .category-sibling-track,
  .offers-hero-track {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-inline: contain !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .hero-icon-track a,
  .quick-grid a,
  .category-sibling-track a,
  .offers-hero-track a {
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .hero-icon-track img,
  .quick-grid img,
  .category-sibling-track img,
  .offers-hero-track img {
    pointer-events: none !important;
  }
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(111, 239, 211, 0.08), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(226, 161, 241, 0.1), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbfffe 44%, #fff 100%);
}

.top-strip {
  border-bottom: 1px solid rgba(182, 147, 237, 0.18);
  background:
    linear-gradient(90deg, rgba(226, 161, 241, 0.24), rgba(255, 255, 255, 0.8), rgba(111, 239, 211, 0.22)),
    #fff;
}


.site-header {
  border-bottom: 1px solid rgba(182, 147, 237, 0.16);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.06);
}

.brand,
body[data-route="home"] .brand {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    var(--brand-gradient) border-box;
  box-shadow: 0 13px 28px rgba(17, 17, 17, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.44);
}

.search,
body[data-route="home"] .search {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    linear-gradient(135deg, rgba(111, 239, 211, 0.45), rgba(182, 147, 237, 0.34), rgba(226, 161, 241, 0.4)) border-box;
}

.search:focus-within,
body[data-route="home"] .search:focus-within {
  box-shadow: 0 0 0 3px rgba(182, 147, 237, 0.16), 0 16px 34px rgba(17, 17, 17, 0.12);
}


.icon-action:is(:hover, :focus-visible, :active),
.icon-action.is-active,
.icon-action.is-tapped {
  color: #8063dc;
  background:
    linear-gradient(135deg, rgba(111, 239, 211, 0.18), rgba(226, 161, 241, 0.22)),
    #fff;
}

.primary-button {
  background:
    linear-gradient(135deg, #111 0%, #17151d 42%, #7f65d8 72%, #6fefd3 128%);
  box-shadow: 0 14px 28px rgba(126, 99, 220, 0.24);
}

.primary-button:hover {
  box-shadow: 0 18px 36px rgba(126, 99, 220, 0.28);
}

.add-button {
  border-color: rgba(182, 147, 237, 0.36);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--brand-gradient) border-box;
  color: #15151a;
}

.add-button:hover {
  border-color: transparent;
  background:
    var(--brand-soft) padding-box,
    var(--brand-gradient) border-box;
}

.product-card,
.quick-tile,
.brand-tile,
.promo-card,
.panel,
.page-title {
  border-color: rgba(182, 147, 237, 0.18);
}

.product-card:hover,
.quick-tile:hover,
.brand-tile:hover,
.promo-card:hover {
  border-color: rgba(182, 147, 237, 0.44);
}


:root {
  --brand-gradient: linear-gradient(135deg, #79efd7 0%, #9fd9ee 36%, #bca5ee 68%, #dfb0ee 100%);
  --brand-soft: linear-gradient(135deg, rgba(121, 239, 215, 0.16), rgba(188, 165, 238, 0.14), rgba(223, 176, 238, 0.15));
  --brand-quiet: linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(188, 165, 238, 0.16), rgba(223, 176, 238, 0.17));
}

body {
  background:
    linear-gradient(180deg, rgba(121, 239, 215, 0.08) 0%, rgba(255, 255, 255, 0.94) 150px, #fff 100%);
}

.top-strip {
  background:
    linear-gradient(90deg, rgba(223, 176, 238, 0.18), rgba(255, 255, 255, 0.86) 48%, rgba(121, 239, 215, 0.18)),
    #fff;
}

.search,
body[data-route="home"] .search {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.36), rgba(188, 165, 238, 0.28), rgba(223, 176, 238, 0.34)) border-box;
}

.product-card {
  border-color: rgba(188, 165, 238, 0.18);
  background:
    linear-gradient(180deg, #fff 0%, #fff 68%, rgba(248, 246, 255, 0.78) 100%);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.065);
}

.product-card:hover {
  border-color: rgba(188, 165, 238, 0.42);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
}

.product-media {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 251, 0.92)),
    var(--brand-quiet);
}

.badge,
.sale-badge {
  inset-block-start: 9px;
  inset-inline-start: 9px;
  min-width: auto;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: linear-gradient(135deg, #15151a 0%, #2a2634 48%, #8f75df 100%);
  color: #fff;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(101, 78, 160, 0.2);
}

.rating-pill {
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(215, 155, 17, 0.18);
  border-radius: 999px;
  background: rgba(255, 248, 229, 0.75);
}

.rating-pill-new {
  color: #5f4bb8;
  border-color: rgba(188, 165, 238, 0.34);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--brand-gradient) border-box;
  box-shadow: 0 8px 18px rgba(188, 165, 238, 0.16);
}

.rating-pill-new .nion-icon {
  color: #8f75df;
  stroke-width: 2.1;
}

.add-button {
  border-color: rgba(188, 165, 238, 0.28);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.5), rgba(188, 165, 238, 0.42), rgba(223, 176, 238, 0.42)) border-box;
}

.add-button:hover {
  background:
    var(--brand-quiet) padding-box,
    var(--brand-gradient) border-box;
}


.hero-icon-item {
  min-width: 72px;
  text-align: center;
}

.hero-icon-item strong {
  width: 72px;
  max-width: 72px;
  min-height: 26px;
  display: -webkit-box;
  color: #25252b;
  font-size: 10.2px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}

.product-grid {
  align-items: stretch;
}

.product-card {
  min-height: 328px;
  grid-template-rows: 150px 130px 44px;
  border-radius: 8px;
  overflow: hidden;
}

.rail .product-card {
  min-height: 318px;
  grid-template-rows: 142px 128px 42px;
}

.product-media {
  min-height: 150px;
}

.product-media img {
  padding: 13px 14px 11px;
}

.product-body {
  min-width: 0;
  align-content: start;
  gap: 5px;
  padding: 10px 10px 7px;
}

.brand-name {
  min-width: 0;
  min-height: 14px;
  color: #777783;
  font-size: 9.8px;
  font-weight: 700;
  line-height: 1.2;
}

.product-name {
  min-height: 38px;
  color: #17171c;
  font-size: 11.4px;
  font-weight: 700;
  line-height: 1.34;
  word-break: normal;
  overflow-wrap: anywhere;
}

.rating-row {
  min-width: 0;
  min-height: 22px;
  align-items: center;
}

.rating-row > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: #8a8a95;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-pill {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
  font-size: 9.6px;
  line-height: 1;
}

.price-row {
  min-height: 28px;
  align-items: center;
  gap: 6px;
}

.price {
  color: #101014;
  font-size: 15.8px;
  font-weight: 900;
  letter-spacing: 0;
}

.old-price {
  max-width: 64px;
  overflow: hidden;
  color: #9a9aa3;
  font-size: 9.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock {
  min-height: 14px;
  font-size: 9.8px;
  line-height: 1.25;
}

.product-actions {
  padding: 0 9px 9px;
}

.add-button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 10.8px;
  font-weight: 800;
  white-space: nowrap;
}

.sale-badge {
  max-width: calc(100% - 56px);
  overflow: hidden;
  padding: 5px 8px;
  font-size: 9.8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
}


.detail-media {
  min-height: 560px;
  border-color: rgba(188, 165, 238, 0.18);
  background:
    linear-gradient(180deg, #fff 0%, rgba(248, 253, 251, 0.8) 100%);
}

.detail-image-trigger {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  padding: 0;
  color: #15151a;
}

.detail-image-trigger img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  padding: 28px;
}

.detail-image-trigger span {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(188, 165, 238, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 10px;
  color: #4f43a7;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.detail-thumbs {
  pointer-events: auto;
}

.detail-thumbs button {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
}

.detail-thumbs button.active {
  border-color: rgba(111, 90, 207, 0.7);
  box-shadow: 0 0 0 2px rgba(121, 239, 215, 0.16);
}

.detail-thumbs button img {
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
}

.detail-info h1 {
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.34;
}

.detail-price-card {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.42), rgba(188, 165, 238, 0.32)) border-box;
  border: 1px solid transparent;
}

.detail-price-card .price {
  font-size: 24px;
}

.image-viewer {
  width: min(940px, calc(100% - 24px));
  max-height: min(860px, calc(100vh - 24px));
  border: 0;
  border-radius: 8px;
  padding: 48px 14px 14px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.image-viewer::backdrop {
  background: rgba(17, 17, 17, 0.64);
  backdrop-filter: blur(8px);
}

.image-viewer img {
  width: 100%;
  max-height: calc(100vh - 104px);
  object-fit: contain;
}

.image-viewer-close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 6px 12px;
  color: #15151a;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .product-grid {
    gap: 9px;
  }

  .product-card {
    min-height: 306px;
    grid-template-rows: 132px 128px 40px;
  }

  .rail .product-card {
    min-height: 306px;
    grid-template-rows: 132px 128px 40px;
  }

  .product-media,
  .rail .product-media {
    min-height: 132px;
  }

  .product-media img {
    padding: 10px 11px 8px;
  }

  .product-body {
    gap: 4px;
    padding: 8px 8px 6px;
  }

  .product-name {
    min-height: 36px;
    font-size: 10.9px;
    line-height: 1.32;
  }

  .rating-pill {
    padding: 3px 6px;
    font-size: 9.2px;
  }

  .price {
    font-size: 14.8px;
  }

  .add-button {
    min-height: 32px;
    gap: 4px;
    font-size: 10px;
  }

  .hero-icon-item strong {
    width: 64px;
    max-width: 64px;
    font-size: 9.5px;
  }

  .detail-media {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

  .detail-image-trigger {
    min-height: auto;
  }

  .detail-image-trigger img {
    max-height: none;
    padding: 18px;
  }

  .detail-image-trigger span {
    inset-block-end: 12px;
    inset-inline-start: 12px;
    min-height: 28px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .detail-thumbs button {
    width: 44px;
    height: 44px;
  }

  .detail-info h1 {
    font-size: 17px;
    line-height: 1.36;
  }

  .detail-price-card .price {
    font-size: 21px;
  }
}

/* Nion polish system: readable text, stable spacing, no hidden product copy. */
:root {
  --ui-page-gap: clamp(10px, 3.2vw, 20px);
  --ui-section-gap: clamp(18px, 5vw, 34px);
  --ui-card-pad: clamp(9px, 2.6vw, 14px);
  --ui-radius: 8px;
  --ui-text-xs: 10.5px;
  --ui-text-sm: 12px;
  --ui-text-md: 13.5px;
  --ui-text-lg: 17px;
  --ui-shadow-card: 0 10px 26px rgba(17, 17, 17, 0.07);
  --ui-shadow-float: 0 18px 42px rgba(17, 17, 17, 0.13);
}

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

body {
  color: #15151a;
  font-size: var(--ui-text-md);
  line-height: 1.6;
}

.page {
  width: min(1220px, calc(100% - (var(--ui-page-gap) * 2)));
  padding-block: 14px 96px;
}

.section {
  margin-block: var(--ui-section-gap);
}

.section-head,
.page-title {
  gap: 12px;
}

.section-head {
  align-items: flex-start;
}

.section-head h2,
.page-title h1 {
  max-width: 100%;
  align-items: flex-start;
  font-size: clamp(18px, 4.8vw, 28px);
  line-height: 1.32;
}

.section-head p,
.page-title p {
  max-width: 64ch;
  font-size: var(--ui-text-sm);
  line-height: 1.7;
}

.outline-button {
  flex: 0 0 auto;
  min-height: 34px;
  align-items: center;
  white-space: normal;
  line-height: 1.25;
}

.quick-tile,
.brand-tile {
  min-height: auto;
  align-content: start;
  gap: 8px;
  padding: 10px 8px;
  border-radius: var(--ui-radius);
  font-size: var(--ui-text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}


.quick-tile img {
  width: 54px;
  height: 54px;
}

.brand-tile img {
  width: 74px;
  height: 50px;
}

.promo-card {
  border-radius: var(--ui-radius);
}

.promo-card span {
  display: block;
  padding: 8px 10px;
  font-size: var(--ui-text-sm);
  line-height: 1.35;
}

.hero-icon-track {
  grid-auto-columns: 76px;
  gap: 10px;
  align-items: start;
  padding-block-end: 8px;
}

.hero-icon-item {
  min-width: 76px;
  gap: 7px;
}

.hero-icon-item span {
  width: 66px;
  height: 66px;
  border-radius: var(--ui-radius);
}

.hero-icon-item strong {
  width: 76px;
  max-width: 76px;
  min-height: auto;
  display: block;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.product-grid {
  gap: 12px;
  align-items: stretch;
}

.rail {
  grid-auto-columns: 168px;
  gap: 12px;
}

.product-card,
.rail .product-card,
body[data-route="cart"] .product-card {
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
  overflow: visible;
  border-radius: var(--ui-radius);
  background: #fff;
  box-shadow: var(--ui-shadow-card);
}

.product-media,
.rail .product-media,
body[data-route="cart"] .product-media {
  position: relative;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  overflow: hidden;
}

.product-media img,
body[data-route="cart"] .product-media img {
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
}

.product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px 8px;
}

.brand-name {
  min-height: auto;
  color: #6c6c77;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-name {
  min-height: auto;
  display: block;
  color: #15151a;
  font-size: 11.6px;
  font-weight: 800;
  line-height: 1.42;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow-wrap: anywhere;
}

.rating-row {
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  color: #747480;
  font-size: 10px;
  line-height: 1.35;
}

.rating-row > span:last-child {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.rating-pill {
  min-height: 22px;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px 7px;
  font-size: 9.6px;
  line-height: 1.15;
  white-space: normal;
}

.price-row {
  min-height: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-top: 1px;
}

.price {
  color: #0f0f13;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.old-price {
  max-width: none;
  overflow: visible;
  color: #8e8e98;
  font-size: 10.2px;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.stock {
  min-height: auto;
  font-size: 10.2px;
  font-weight: 800;
  line-height: 1.35;
}

.product-actions {
  flex: 0 0 auto;
  padding: 0 10px 10px;
}

.add-button {
  width: 100%;
  min-height: 36px;
  height: auto;
  padding: 7px 8px;
  border-radius: var(--ui-radius);
  font-size: 10.6px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.sale-badge {
  max-width: none;
  overflow: visible;
  padding: 5px 8px;
  font-size: 9.8px;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}

.fav-button {
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
}

.filters {
  gap: 8px;
}

.filters select,
.filters input {
  min-width: min(180px, 100%);
  height: auto;
  min-height: 40px;
  font-size: var(--ui-text-sm);
}


.detail-media {
  overflow: hidden;
  border-radius: var(--ui-radius);
}

.detail-info,
.detail-panel {
  border-radius: var(--ui-radius);
}

.detail-info h1,
.details-text,
.spec-list,
.detail-perks span {
  overflow-wrap: anywhere;
}

.detail-price-card .price {
  font-size: clamp(21px, 5.8vw, 28px);
}

@media (max-width: 640px) {
  .page {
    width: calc(100% - 18px);
    padding-block: 12px 104px;
  }

  .section {
    margin-block: 18px;
  }

  .section-head {
    margin-bottom: 10px;
  }

  .section-head h2,
  .page-title h1 {
    font-size: 18px;
    line-height: 1.34;
  }

  .section-head p,
  .page-title p {
    font-size: 11.4px;
  }

  .quick-grid {
    grid-auto-columns: 84px;
    gap: 8px;
  }

  .quick-tile {
    padding: 9px 6px;
    font-size: 10.8px;
    line-height: 1.32;
  }

  .quick-tile img {
    width: 48px;
    height: 48px;
  }

  .product-grid {
    gap: 9px;
  }

  .rail {
    grid-auto-columns: 156px;
    gap: 9px;
  }

  .product-body {
    gap: 5px;
    padding: 8px 8px 7px;
  }

  .brand-name {
    font-size: 9.4px;
  }

  .product-name {
    font-size: 10.8px;
    line-height: 1.42;
  }

  .rating-row {
    gap: 5px;
    font-size: 9.3px;
  }

  .rating-pill {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 8.9px;
  }

  .price {
    font-size: 14.8px;
  }

  .old-price,
  .stock {
    font-size: 9.4px;
  }

  .add-button {
    min-height: 34px;
    font-size: 9.8px;
  }

  .sale-badge {
    font-size: 9px;
    padding: 4px 7px;
  }

  .promo-card span {
    inset-inline: 7px;
    inset-block-end: 7px;
    padding: 6px 8px;
    font-size: 10.5px;
  }

  .hero-icon-track {
    grid-auto-columns: 70px;
    gap: 8px;
  }

  .hero-icon-item,
  .hero-icon-item strong {
    width: 70px;
    max-width: 70px;
  }

  .hero-icon-item span {
    width: 60px;
    height: 60px;
  }

  .hero-icon-item strong {
    font-size: 9.2px;
  }


}

/* Suite 30: single-line mobile chrome and no-zoom product image carousel. */
.detail-media {
  display: block;
  min-height: clamp(430px, 54vw, 560px);
  touch-action: pan-x pan-y;
}

.detail-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 12%, rgba(121, 239, 215, 0.15), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(223, 176, 238, 0.14), transparent 32%),
    linear-gradient(180deg, #fff 0%, rgba(249, 252, 252, 0.92) 100%);
  touch-action: pan-x pan-y;
}

.detail-track {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  direction: ltr;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.detail-track::-webkit-scrollbar {
  display: none;
}

.detail-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x pan-y;
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: zoom-in;
}

.detail-slide img {
  width: 100%;
  height: 100%;
  max-height: 560px;
  object-fit: contain;
  padding: 30px 24px 92px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-x pan-y;
}

.detail-slide-dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 76px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.detail-slide-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(16, 16, 20, 0.18);
  transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.detail-slide-dots span.active {
  width: 18px;
  background: linear-gradient(90deg, #66e2c4, #aa8af4, #ef8ade);
  transform: translateY(-1px);
}

.detail-thumbs {
  z-index: 3;
  direction: ltr;
}

.detail-thumbs button {
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.detail-thumbs button:active {
  transform: scale(0.94);
}

@media (max-width: 640px) {
  .site-header,
  body[data-route="home"] .site-header {
    position: sticky;
    top: 0;
    inset-inline: 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 28px rgba(18, 18, 24, 0.08);
    backdrop-filter: blur(18px);
  }

  .header-main,
  body[data-route="home"] .header-main {
    width: calc(100% - 18px);
    min-height: 0;
    padding: 9px 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 46px;
    gap: 8px;
    align-items: center;
    direction: ltr;
  }

  .brand,
  body[data-route="home"] .brand {
    display: none !important;
  }

  .header-actions,
  body[data-route="home"] .header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    gap: 7px;
    direction: ltr;
  }

  .header-actions #accountButton,
  .header-actions #languageButton,
  body[data-route="home"] #accountButton,
  body[data-route="home"] #languageButton {
    display: none !important;
  }

  .search,
  body[data-route="home"] .search {
    grid-column: 2;
    grid-row: 1;
    height: 46px;
    min-width: 0;
    margin: 0;
  }

  .icon-action,
  .ghost-button.icon-action,
  .cart-button.icon-action,
  body[data-route="home"] .icon-action,
  body[data-route="home"] .ghost-button.icon-action,
  body[data-route="home"] .cart-button.icon-action {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  body[data-route="home"] .hero {
    margin-top: 10px;
  }

  .detail-media {
    aspect-ratio: 1 / 1;
    min-height: auto;
  }

  .detail-slider,
  .detail-track,
  .detail-slide {
    min-height: 100%;
  }

  .detail-slide img {
    max-height: none;
    padding: 20px 16px 76px;
  }

  .detail-slide-dots {
    inset-block-end: 62px;
  }

  .detail-thumbs {
    inset-inline: 10px;
    inset-block-end: 10px;
    gap: 7px;
  }

  .detail-thumbs button {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }
}

/* Suite 31: home chrome floats on hero, product opens as full-screen gallery. */
@media (max-width: 640px) {
  body[data-route="home"] .site-header {
    position: absolute;
    inset-inline: 0;
    top: 38px;
    z-index: 90;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  body[data-route="home"] .header-main {
    width: calc(100% - 24px);
    min-height: 0;
    margin-inline: auto;
    padding: 16px 0 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 46px;
    gap: 9px;
    align-items: center;
    direction: ltr;
    pointer-events: auto;
  }

  body[data-route="home"] .header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
  }

  body[data-route="home"] .brand,
  body[data-route="home"] #accountButton,
  body[data-route="home"] #languageButton,
  body[data-route="home"] .category-nav {
    display: none !important;
  }

  body[data-route="home"] .search {
    grid-column: 2;
    grid-row: 1;
    height: 46px;
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 34px rgba(18, 18, 24, 0.17);
    backdrop-filter: blur(18px);
  }

  body[data-route="home"] .icon-action,
  body[data-route="home"] .ghost-button.icon-action,
  body[data-route="home"] .cart-button.icon-action {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 34px rgba(18, 18, 24, 0.16);
    backdrop-filter: blur(18px);
  }

  body[data-route="home"] .page {
    width: 100%;
    padding-top: 0;
  }

  body[data-route="home"] .hero {
    margin-top: 0;
  }

  body[data-route="home"] .hero-main {
    border-radius: 0;
    box-shadow: none;
  }

  body[data-route="home"] .hero-main::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0 48%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.86) 96%, #fff 100%),
      linear-gradient(135deg, rgba(121, 239, 215, 0.08), rgba(223, 176, 238, 0.08));
    pointer-events: none;
  }

  body[data-route="product"] .top-strip,
  body[data-route="product"] .site-header {
    display: none;
  }

  body[data-route="product"] .page {
    width: 100%;
    padding: 0 0 106px;
  }

  body[data-route="product"] .product-detail {
    display: block;
    margin: 0;
  }

  body[data-route="product"] .detail-media {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
      radial-gradient(circle at 24% 16%, rgba(121, 239, 215, 0.18), transparent 32%),
      radial-gradient(circle at 78% 14%, rgba(223, 176, 238, 0.18), transparent 35%),
      linear-gradient(180deg, #fff 0%, #fbfffe 100%);
  }

  body[data-route="product"] .detail-slider,
  body[data-route="product"] .detail-track,
  body[data-route="product"] .detail-slide {
    height: 100%;
    min-height: 100%;
  }

  body[data-route="product"] .detail-slide img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    padding: calc(70px + env(safe-area-inset-top)) 18px calc(190px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-floating-actions {
    inset-block-start: calc(14px + env(safe-area-inset-top));
    inset-inline: 14px;
    z-index: 5;
  }

  body[data-route="product"] .detail-floating-button {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 34px rgba(18, 18, 24, 0.14);
    backdrop-filter: blur(16px);
  }

  body[data-route="product"] .detail-floating-button[data-fav] {
    color: #7d5be0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
      linear-gradient(135deg, #79efd7, #bca5ee, #dfb0ee) border-box;
    border-color: transparent;
  }

  body[data-route="product"] .detail-slide-dots {
    inset-block-end: calc(156px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-thumbs {
    inset-inline: auto;
    left: 50%;
    right: auto;
    inset-block-end: calc(94px + env(safe-area-inset-bottom));
    width: max-content;
    transform: translateX(-50%);
    gap: 8px;
  }

  body[data-route="product"] .detail-thumbs button {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border-color: rgba(188, 165, 238, 0.24);
    box-shadow: 0 10px 26px rgba(18, 18, 24, 0.1);
  }

  body[data-route="product"] .detail-thumbs button.active {
    border-color: rgba(111, 90, 207, 0.8);
    box-shadow: 0 0 0 3px rgba(121, 239, 215, 0.18), 0 12px 28px rgba(18, 18, 24, 0.12);
  }

  body[data-route="product"] .detail-info,
  body[data-route="product"] .detail-panel {
    width: calc(100% - 18px);
    margin-inline: auto;
  }

  body[data-route="product"] .detail-info {
    margin-top: 12px;
  }
}

/* Suite 32: product details are collapsed until the customer asks for them. */
.detail-accordion {
  overflow: hidden;
}

.detail-toggle {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: var(--ui-radius);
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.5), rgba(188, 165, 238, 0.42), rgba(223, 176, 238, 0.42)) border-box;
  border: 1px solid transparent;
  padding: 0 15px;
  color: #14141a;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.detail-toggle span:first-child {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-toggle-mark {
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-quiet);
  color: #6f5acf;
  transition: transform 220ms ease, background 220ms ease;
}

.detail-accordion.is-open .detail-toggle-mark {
  transform: rotate(-90deg);
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.28), rgba(188, 165, 238, 0.26));
}

.detail-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 320ms ease, opacity 220ms ease;
}

.detail-accordion.is-open .detail-collapse {
  opacity: 1;
}

.detail-collapse-inner {
  padding-top: 14px;
}

@media (max-width: 640px) {
  body[data-route="product"] .detail-panel.detail-accordion {
    margin-top: 12px;
    padding: 10px;
  }

  body[data-route="product"] .detail-toggle {
    min-height: 54px;
    padding-inline: 13px;
    font-size: 14.5px;
  }

  body[data-route="product"] .detail-collapse-inner {
    padding-top: 12px;
  }
}

/* Suite 33: product cards use concise EN/AR naming, similar products are a 3-column product-page grid. */
.product-card .brand-name {
  display: block;
  min-height: 15px;
  direction: ltr;
  unicode-bidi: plaintext;
  overflow: hidden;
  color: #61616c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-card .product-name {
  min-height: 32px;
  display: -webkit-box;
  color: #15151a;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: normal;
}

body[data-route="product"] .similar-product-section {
  width: calc(100% - 18px);
  margin-inline: auto;
}

body[data-route="product"] .similar-product-section .section-head {
  align-items: center;
  margin-bottom: 10px;
}

body[data-route="product"] .similar-product-section .section-head .outline-button {
  display: none;
}

body[data-route="product"] .similar-product-section .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
}

body[data-route="product"] .similar-product-section .product-card {
  min-width: 0;
  min-height: 250px;
  grid-template-rows: 104px minmax(98px, auto) 38px;
  border-radius: 8px;
}

body[data-route="product"] .similar-product-section .product-media {
  min-height: 104px;
}

body[data-route="product"] .similar-product-section .product-media img {
  padding: 10px;
}

body[data-route="product"] .similar-product-section .product-body {
  gap: 4px;
  padding: 7px 6px 5px;
}

body[data-route="product"] .similar-product-section .brand-name {
  font-size: 8.7px;
  line-height: 1.18;
}

body[data-route="product"] .similar-product-section .product-name {
  min-height: 30px;
  font-size: 9.8px;
  line-height: 1.32;
}

body[data-route="product"] .similar-product-section .rating-row {
  min-height: 19px;
  gap: 3px;
  font-size: 8.4px;
}

body[data-route="product"] .similar-product-section .rating-pill {
  min-height: 18px;
  padding: 2px 5px;
  font-size: 8px;
}

body[data-route="product"] .similar-product-section .price-row {
  gap: 4px;
  min-height: 22px;
}

body[data-route="product"] .similar-product-section .price {
  font-size: 12.5px;
}

body[data-route="product"] .similar-product-section .old-price,
body[data-route="product"] .similar-product-section .stock {
  font-size: 8.4px;
}

body[data-route="product"] .similar-product-section .product-actions {
  padding: 0 6px 6px;
}

body[data-route="product"] .similar-product-section .add-button {
  min-height: 30px;
  padding: 5px 4px;
  font-size: 8.6px;
}

body[data-route="product"] .similar-product-section .fav-button {
  width: 27px;
  min-width: 27px;
  height: 27px;
}

body[data-route="product"] .similar-product-section .sale-badge {
  inset-block-start: 6px;
  inset-inline-start: 6px;
  padding: 4px 5px;
  font-size: 7.8px;
}

/* Suite 34: Nice One-inspired lighter Arabic type scale. */
:root {
  --font-ar: "Tajawal", "Segoe UI", Arial, sans-serif;
  --type-xs: 9.5px;
  --type-sm: 11px;
  --type-md: 13px;
  --type-lg: 16px;
  --type-title: 18px;
}

body {
  font-family: var(--font-ar);
  font-size: var(--type-md);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.section-head h2,
.page-title h1,
.cart-empty-head h1,
.detail-toggle,
.cart-empty-state h2 {
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.32;
}

.section-head p,
.page-title p {
  color: #777781;
  font-size: var(--type-sm);
  line-height: 1.5;
}

.product-card .brand-name {
  color: #6f6f78;
  font-size: var(--type-xs);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
}

.product-card .product-name {
  min-height: 31px;
  color: #17171c;
  font-size: 10.8px;
  font-weight: 500;
  line-height: 1.42;
}

.rating-row {
  color: #81818b;
  font-size: 9.4px;
  line-height: 1.35;
}

.rating-pill {
  font-size: 9px;
  font-weight: 500;
}

.price {
  font-size: 14.2px;
  font-weight: 700;
  line-height: 1.18;
}

.old-price,
.stock {
  font-size: 9.3px;
  line-height: 1.35;
}

.add-button,
.outline-button,
.primary-button,
.account-login {
  font-weight: 600;
}

.add-button {
  font-size: 10px;
  line-height: 1.24;
}

.sale-badge,
.badge {
  font-size: 8.8px;
  font-weight: 600;
  letter-spacing: 0;
}

.hero-icon-item strong,
.quick-tile,
.promo-card span {
  font-size: 10.2px;
  font-weight: 500;
  line-height: 1.35;
}

.search input,
body[data-route="home"] .search input {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}


.detail-info h1 {
  font-size: clamp(19px, 5vw, 25px);
  font-weight: 600;
  line-height: 1.36;
}

.detail-price-card .price {
  font-size: clamp(22px, 5.4vw, 28px);
  font-weight: 700;
}

.detail-perks span,
.detail-saving,
.detail-stock {
  font-weight: 500;
}

body[data-route="product"] .similar-product-section .product-card {
  min-height: 240px;
}

body[data-route="product"] .similar-product-section .brand-name {
  font-size: 8.3px;
  font-weight: 400;
  line-height: 1.2;
}

body[data-route="product"] .similar-product-section .product-name {
  min-height: 28px;
  font-size: 9.4px;
  font-weight: 500;
  line-height: 1.34;
}

body[data-route="product"] .similar-product-section .price {
  font-size: 12px;
  font-weight: 700;
}

body[data-route="product"] .similar-product-section .add-button {
  font-size: 8.2px;
  font-weight: 600;
}

@media (max-width: 640px) {
  body {
    font-size: 12.8px;
  }

  .section-head h2,
  .page-title h1 {
    font-size: 17px;
  }

  .section-head p,
  .page-title p {
    font-size: 10.8px;
  }

  .product-card .product-name {
    font-size: 10.4px;
    line-height: 1.38;
  }

  .product-card .brand-name {
    font-size: 9px;
  }

  .price {
    font-size: 13.6px;
  }

  .add-button {
    font-size: 9.4px;
  }
}

/* Suite 35: lighter icon strokes and top-aligned product gallery controls. */
.nion-icon,
.icon-symbol,
[data-lucide] {
  stroke-width: 1.45 !important;
}


@media (max-width: 640px) {
  body[data-route="product"] .detail-media {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0 0, rgba(255, 255, 255, 0) 112px),
      radial-gradient(circle at 22% 9%, rgba(121, 239, 215, 0.14), transparent 30%),
      radial-gradient(circle at 78% 8%, rgba(223, 176, 238, 0.14), transparent 34%),
      linear-gradient(180deg, #fff 0%, #fbfffe 100%);
  }

  body[data-route="product"] .detail-slide {
    align-items: start;
  }

  body[data-route="product"] .detail-slide img {
    object-position: center top;
    padding: calc(34px + env(safe-area-inset-top)) 14px calc(186px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-floating-actions {
    inset-block-start: calc(10px + env(safe-area-inset-top));
    inset-inline: 12px;
    display: grid;
    grid-template-columns: 44px 44px;
    justify-content: space-between;
    align-items: center;
  }

  body[data-route="product"] .detail-floating-button {
    appearance: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background:
      linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.62)) padding-box,
      linear-gradient(135deg, rgba(121, 239, 215, 0.42), rgba(188, 165, 238, 0.32), rgba(223, 176, 238, 0.36)) border-box;
    color: rgba(18, 18, 24, 0.82);
    box-shadow: 0 12px 28px rgba(18, 18, 24, 0.11);
    backdrop-filter: blur(18px);
    cursor: pointer;
  }

  body[data-route="product"] .detail-floating-button[data-fav] {
    color: #6f5acf;
    background:
      linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.64)) padding-box,
      linear-gradient(135deg, rgba(121, 239, 215, 0.76), rgba(188, 165, 238, 0.58), rgba(223, 176, 238, 0.62)) border-box;
  }

  body[data-route="product"] .detail-floating-button:active {
    transform: scale(0.94);
  }
}


/* Suite 37: notched bottom navigation and tighter Nice One-style product cards. */
@media (max-width: 640px) {


  .product-grid {
    gap: 9px;
  }

  .rail {
    grid-auto-columns: 148px;
    gap: 9px;
    padding-block-end: 10px;
  }

  .product-card,
  .rail .product-card,
  body[data-route="cart"] .product-card {
    min-height: 0;
    overflow: hidden;
    border: 1px solid #f0f0f4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(18, 18, 24, 0.055);
  }

  .product-media,
  .rail .product-media,
  body[data-route="cart"] .product-media {
    aspect-ratio: 1 / 1;
    border-radius: 8px 8px 0 0;
    background:
      radial-gradient(circle at 50% 48%, rgba(121, 239, 215, 0.1), transparent 38%),
      radial-gradient(circle at 60% 42%, rgba(188, 165, 238, 0.12), transparent 42%),
      linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  }

  .product-media::before,
  .rail .product-media::before,
  body[data-route="cart"] .product-media::before {
    content: "";
    position: absolute;
    inset: 22%;
    z-index: 0;
    border-radius: 999px;
    background:
      linear-gradient(135deg, rgba(121, 239, 215, 0.16), rgba(188, 165, 238, 0.16), rgba(223, 176, 238, 0.14));
    filter: blur(18px);
    pointer-events: none;
  }

  .product-media img,
  body[data-route="cart"] .product-media img {
    position: relative;
    z-index: 1;
    padding: 9px;
  }

  .fav-button {
    inset-block-start: 6px;
    inset-inline-end: 6px;
    width: 27px;
    min-width: 27px;
    height: 27px;
    border-color: rgba(232, 232, 238, 0.84);
    color: rgba(22, 22, 28, 0.82);
    box-shadow: 0 5px 12px rgba(18, 18, 24, 0.07);
  }

  .fav-button .nion-icon {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.45 !important;
  }

  .sale-badge,
  .badge {
    inset-block-start: 6px;
    inset-inline-start: 6px;
    min-width: 0;
    max-width: 58px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--brand-gradient);
    background-size: 220% 220%;
    background-position: center;
    color: #fff;
    font-size: 7.8px;
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(188, 165, 238, 0.22);
  }

  .product-body {
    gap: 3px;
    padding: 7px 7px 5px;
  }

  .product-card .brand-name,
  .brand-name {
    min-height: 12px;
    color: #73737d;
    font-size: 8.6px;
    font-weight: 400;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .product-card .product-name,
  .product-name {
    min-height: 25px;
    display: -webkit-box;
    color: #18181d;
    font-size: 9.8px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
  }

  .rating-row {
    min-height: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 4px;
    color: #82828b;
    font-size: 8.2px;
    line-height: 1.1;
  }

  .rating-row > span:last-child {
    max-width: 54%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rating-pill {
    min-height: 15px;
    max-width: 54px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 2px;
    overflow: hidden;
    border: 1px solid rgba(231, 231, 238, 0.92);
    border-radius: 999px;
    padding: 2px 5px;
    background: #f8f8fb;
    color: #707079;
    font-size: 7.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

  .rating-pill-new {
    max-width: 38px;
    border-color: rgba(23, 143, 135, 0.16);
    background: rgba(108, 238, 212, 0.12);
    color: #178f87;
  }

  .rating-pill .nion-icon {
    width: 10px !important;
    height: 10px !important;
    stroke-width: 1.35 !important;
  }

  .price-row {
    min-height: 18px;
    gap: 3px 5px;
    margin-top: 1px;
  }

  .price {
    color: #d73373;
    font-size: 12.9px;
    font-weight: 700;
    line-height: 1.16;
  }

  .old-price,
  .stock {
    font-size: 8.2px;
    font-weight: 400;
    line-height: 1.2;
  }

  .stock {
    min-height: 10px;
    color: #85858f;
  }

  .product-actions {
    padding: 0 7px 7px;
  }

  .add-button {
    min-height: 28px;
    padding: 5px 6px;
    border-radius: 8px;
    font-size: 8.6px;
    font-weight: 600;
    line-height: 1.12;
    white-space: nowrap;
  }

  .add-button .nion-icon {
    width: 14px !important;
    height: 14px !important;
  }

  body[data-route="product"] .similar-product-section .product-grid {
    gap: 8px;
  }

  body[data-route="product"] .similar-product-section .product-card {
    min-height: 0;
  }

  body[data-route="product"] .similar-product-section .product-name {
    min-height: 25px;
    font-size: 9.1px;
  }

  body[data-route="product"] .similar-product-section .price {
    font-size: 11.8px;
  }
}

@media (max-width: 640px) {
  body[data-route="product"] .page {
    padding-bottom: calc(202px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-slide img {
    padding-bottom: calc(254px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-slide-dots {
    inset-block-end: calc(224px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-thumbs {
    inset-block-end: calc(166px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-cart {
    position: fixed;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(116px + env(safe-area-inset-bottom));
    z-index: 98;
    width: auto;
    max-width: calc(100vw - 32px);
    min-height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 17px;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.28), transparent 26%),
      var(--brand-gradient);
    color: #fff;
    box-shadow:
      0 16px 34px rgba(111, 90, 207, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.54) inset;
  }

  body[data-route="product"] .detail-cart .nion-icon {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
    stroke-width: 1.55 !important;
  }
}

.add-button:not(:disabled),
.primary-button.detail-cart {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) padding-box,
    #050506 !important;
  color: #fff !important;
  box-shadow:
    0 12px 24px rgba(5, 5, 6, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.add-button:not(:disabled):hover,
.primary-button.detail-cart:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0)) padding-box,
    #111116 !important;
  box-shadow:
    0 15px 30px rgba(5, 5, 6, 0.22),
    0 0 0 2px rgba(182, 147, 237, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.add-button:not(:disabled) span:not(.cart-plus),
.primary-button.detail-cart {
  color: #fff !important;
}

.cart-plus {
  width: 18px;
  height: 18px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  background: var(--brand-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.primary-button.detail-cart .cart-plus {
  width: 24px;
  height: 24px;
  font-size: 26px;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .add-button:not(:disabled) {
    gap: 4px;
  }

  .add-button:not(:disabled) .cart-plus {
    width: 14px;
    height: 14px;
    font-size: 16px;
  }
}

.add-button.cart-control.is-flashing,
.primary-button.detail-cart.cart-control.is-flashing {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)) padding-box,
    #07945b !important;
  color: #fff !important;
  box-shadow:
    0 14px 28px rgba(7, 148, 91, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.cart-control {
  display: grid !important;
  grid-template-columns: minmax(48px, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.cart-control.is-flash-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
}

.primary-button.detail-cart.cart-control {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.cart-added-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #fff !important;
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.cart-added-label-flash {
  display: grid;
  gap: 1px;
  justify-items: center;
  line-height: 1.05;
  white-space: normal;
}

.cart-added-label-flash strong,
.cart-added-label-flash small {
  display: block;
  color: inherit;
  font: inherit;
  margin: 0;
}

.cart-added-label-flash small {
  font-size: 0.84em;
  font-weight: 600;
  opacity: 0.96;
}

.cart-stepper {
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  direction: ltr;
}

.cart-control strong {
  min-width: 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.primary-button.detail-cart.cart-control .cart-stepper {
  min-width: 86px;
  grid-template-columns: 28px minmax(18px, auto) 28px;
  gap: 6px;
}

.primary-button.detail-cart.cart-control strong {
  font-size: 14px;
}

.cart-count-button {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.primary-button.detail-cart.cart-control .cart-count-button {
  width: 28px;
  height: 28px;
  font-size: 17px;
}

.cart-count-button:active {
  transform: scale(0.94);
}

@media (max-width: 640px) {
  .cart-control {
    grid-template-columns: minmax(48px, 1fr) auto;
    gap: 3px;
  }

  .cart-count-button {
    width: 15px;
    height: 15px;
    font-size: 10px;
  }

  .cart-added-label {
    font-size: 8px;
  }

  .primary-button.detail-cart.cart-control {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .primary-button.detail-cart.cart-control .cart-count-button {
    width: 28px;
    height: 28px;
  }

  .primary-button.detail-cart.cart-control .cart-added-label {
    font-size: 13px;
  }
}

button,
a,
input,
select,
textarea,
[data-product-card],
[data-cart-control] {
  touch-action: manipulation;
}

@media (max-width: 640px) {
  html,
  body,
  #app {
    max-width: 100%;
    overflow-x: clip;
  }

  .section:not(.hero),
  .product-card,
  .promo-card,
  .quick-tile,
  .brand-tile {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .cart-empty-screen {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .cart-empty-head {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: 56px minmax(0, 1fr) 86px !important;
    column-gap: 0;
    overflow: hidden;
  }

  .cart-empty-head > span,
  .cart-empty-head h1,
  .cart-empty-head > div {
    min-width: 0;
  }

  .cart-empty-head h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cart-empty-head > div {
    justify-content: flex-end;
    gap: 6px;
    overflow: hidden;
  }

  .cart-empty-head .iconless {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 999px;
  }
}

/* Product detail: remove the empty space between image thumbs and product name. */
@media (max-width: 640px) {
  body[data-route="product"] .page {
    padding-bottom: calc(156px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .product-detail {
    display: block;
    margin: 0;
  }

  body[data-route="product"] .detail-media {
    height: clamp(430px, 118vw, 560px);
    min-height: clamp(430px, 118vw, 560px);
  }

  body[data-route="product"] .detail-slider,
  body[data-route="product"] .detail-track,
  body[data-route="product"] .detail-slide {
    height: 100%;
    min-height: 100%;
  }

  body[data-route="product"] .detail-slide img {
    padding: calc(42px + env(safe-area-inset-top)) 14px calc(92px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-slide-dots {
    inset-block-end: calc(66px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-thumbs {
    inset-block-end: calc(10px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-info {
    margin-top: 0;
  }
}

/* Product detail: keep the add-to-cart control pinned above the bottom dock while scrolling. */
@media (max-width: 640px) {
  body[data-route="product"] .product-detail {
    content-visibility: visible !important;
  }

  body[data-route="product"] .page {
    padding-bottom: calc(202px + env(safe-area-inset-bottom));
  }

  body[data-route="product"] .detail-cart {
    position: fixed !important;
    left: max(14px, env(safe-area-inset-left)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(116px + env(safe-area-inset-bottom)) !important;
    z-index: 120 !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 52px;
    box-sizing: border-box;
    border-radius: 17px;
    padding-inline: 18px;
  }

  body[data-route="product"] .detail-cart:not(.cart-control) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  body[data-route="product"] .detail-cart.cart-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
  }

  body[data-route="product"] .detail-cart.cart-control .cart-added-label {
    font-size: 13px;
    font-weight: 800;
  }
}

/* Section page: remove duplicated top category pills; the page already has its own category/brand browser. */
@media (max-width: 640px) {
  body[data-route="section"] .category-nav {
    display: none !important;
  }
}

/* Mobile spacing and speed pass: clean section edges and compact brand cards. */
@media (max-width: 640px) {
  :root {
    --ui-page-gap: 16px;
    --ui-shadow-card: 0 4px 12px rgba(17, 17, 17, 0.045);
  }

  .page {
    width: min(100% - 32px, 430px) !important;
    padding-top: 10px;
  }

  .section:not(.hero):not(.hero-icon-rail),
  .page-title {
    margin-inline: auto;
  }

  .section-head,
  .page-title,
  .section-panel-title {
    padding-inline: 4px;
  }

  .section-head h2,
  .page-title h1,
  .section-panel-title strong {
    letter-spacing: 0;
  }

  .section-head h2 {
    font-size: 18px;
    line-height: 1.28;
  }

  .section-head p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.45;
  }

  .brand-rail {
    grid-auto-flow: column;
    grid-auto-columns: 96px;
    grid-template-columns: none !important;
    gap: 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 4px 10px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .brand-rail::-webkit-scrollbar {
    display: none;
  }

  .brand-tile {
    min-height: 82px !important;
    aspect-ratio: 1.08 / 1;
    display: grid;
    grid-template-rows: minmax(38px, 1fr) auto;
    align-content: center !important;
    place-items: center;
    gap: 5px;
    padding: 8px 7px !important;
    border: 1px solid rgba(188, 165, 238, 0.16) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--ui-shadow-card) !important;
    scroll-snap-align: start;
  }

  .brand-tile img {
    width: 68px !important;
    height: 34px !important;
    max-width: 100%;
    object-fit: contain;
  }

  .brand-tile span {
    width: 100%;
    min-height: 13px;
    display: -webkit-box;
    overflow: hidden;
    color: #35353d;
    font-size: 10.2px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

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

  .section-brand-grid .brand-tile {
    min-height: 88px !important;
    aspect-ratio: auto;
  }

  .quick-tile,
  .brand-tile,
  .promo-card {
    content-visibility: visible !important;
    contain-intrinsic-size: auto;
  }

  .quick-tile,
  .promo-card,
  .product-card {
    box-shadow: var(--ui-shadow-card) !important;
  }
}

.home-loading-hero {
  display: grid;
  place-items: end start;
  min-height: 360px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background:
    radial-gradient(circle at 20% 70%, rgba(121, 239, 215, 0.42), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(223, 176, 238, 0.5), transparent 32%),
    linear-gradient(145deg, #fbe2f0 0%, #eefbff 52%, #f7f0ff 100%);
}

.home-loading-panel {
  width: min(76%, 340px);
  margin: 0 22px 28px;
  color: #15151a;
  text-align: right;
}

.home-loading-panel span,
.home-loading-panel em {
  display: block;
  color: rgba(21, 21, 26, 0.62);
  font-style: normal;
  font-weight: 700;
}

.home-loading-panel strong {
  display: block;
  margin: 4px 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.08;
}

.home-loading-chip {
  display: block;
  width: 68px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    linear-gradient(#edf7ff, #edf7ff) padding-box,
    var(--brand-gradient) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055);
}

/* Home hero: keep the main banner full-width and show the entire image without side cropping. */
@media (max-width: 640px) {
  body[data-route="home"] .page {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0;
  }

  body[data-route="home"] #app {
    min-height: calc(100dvh + 180px);
  }

  body[data-route="home"] .hero {
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-route="home"] .hero-main {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.76)),
      #f8f4fb;
  }

  body[data-route="home"] .hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 26px 86px;
    color: #15151a;
    text-align: right;
    background:
      radial-gradient(circle at 18% 72%, rgba(121, 239, 215, 0.5), transparent 24%),
      radial-gradient(circle at 82% 30%, rgba(223, 176, 238, 0.55), transparent 32%),
      linear-gradient(145deg, #ffe0ee 0%, #effcff 52%, #f7eeff 100%);
  }

  body[data-route="home"] .hero-fallback span,
  body[data-route="home"] .hero-fallback em {
    display: block;
    color: rgba(21, 21, 26, 0.62);
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
  }

  body[data-route="home"] .hero-fallback strong {
    display: block;
    margin: 3px 0;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.08;
  }

  body[data-route="home"] .hero-slide-link {
    display: grid;
    place-items: center;
    background: transparent;
  }

  body[data-route="home"] .hero-slides,
  body[data-route="home"] .hero-dots {
    position: relative;
    z-index: 1;
  }

  body[data-route="home"] .hero-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body[data-route="home"] .home-loading-hero {
    width: 100% !important;
    min-height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    border-radius: 0;
  }

  body[data-route="home"] .home-loading-icons {
    margin-top: -28px;
  }
}

/* Home feed: dense API-driven offers with lightweight scrolling. */
@media (max-width: 640px) {
  body[data-route="home"] .promo-showcase,
  body[data-route="home"] .section:not(.hero):not(.hero-icon-rail) {
    width: min(100% - 32px, 430px) !important;
    margin-inline: auto !important;
  }

  body[data-route="home"] .promo-showcase {
    margin-top: 10px !important;
    margin-bottom: 22px !important;
  }

  body[data-route="home"] .promo-showcase .section-head {
    margin-bottom: 10px;
    padding-inline: 2px;
  }

  body[data-route="home"] .promo-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-route="home"] .promo-card {
    grid-column: auto;
    overflow: hidden;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f7f8fb !important;
    box-shadow: 0 4px 12px rgba(18, 18, 24, 0.045) !important;
    transform: translateZ(0);
  }

  body[data-route="home"] .promo-card-copy {
    display: none;
  }

  body[data-route="home"] .promo-card-square {
    aspect-ratio: 1 / 1 !important;
  }

  body[data-route="home"] .promo-card-wide {
    grid-column: 1 / -1 !important;
    aspect-ratio: 2.62 / 1 !important;
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    align-items: stretch;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 241, 255, 0.94)),
      var(--brand-soft) !important;
  }

  body[data-route="home"] .promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }

  body[data-route="home"] .promo-card-wide img {
    grid-column: 1;
    object-fit: contain;
    padding: 4px;
  }

  body[data-route="home"] .promo-card-wide .promo-card-copy {
    grid-column: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px 10px 4px;
    color: #15151a;
    text-align: right;
  }

  body[data-route="home"] .promo-card-copy strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-route="home"] .promo-card-copy em {
    color: #7f65d8;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
  }

  body[data-route="home"] .product-card,
  body[data-route="home"] .quick-tile,
  body[data-route="home"] .brand-tile,
  body[data-route="home"] .promo-card {
    transition: none !important;
  }
}

/* Home bottom editorial section: designed campaign artwork. */
.editorial-promos {
  margin-bottom: 24px;
}

.editorial-promo-grid {
  display: grid;
  gap: 10px;
}

.home-product-feed {
  margin-bottom: 118px;
}

.home-product-rail {
  margin-top: 18px;
  margin-bottom: 18px;
}

.home-product-rail .rail {
  scroll-padding-inline: 2px;
}

.editorial-promo-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
  color: #15151a;
  text-decoration: none;
  background: #f5f8fb;
  box-shadow: 0 4px 14px rgba(18, 18, 24, 0.055);
  transform: translateZ(0);
}

.editorial-promo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.28) 38%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(to left, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 60%);
}

.editorial-promo-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editorial-promo-copy {
  position: absolute;
  top: 11px;
  right: 10px;
  left: 10px;
  z-index: 2;
  min-width: 0;
  display: block;
  text-align: right;
}

.editorial-promo-copy em,
.editorial-promo-copy strong,
.editorial-promo-copy b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editorial-promo-copy em {
  display: block;
  color: rgba(21, 21, 26, 0.62);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.editorial-promo-copy strong {
  display: -webkit-box;
  color: #15151a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.editorial-promo-copy b {
  display: block;
  color: #15151a;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .editorial-promo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editorial-promo-square {
    aspect-ratio: 1 / 1;
  }

  .editorial-promo-wide {
    grid-column: span 2;
    aspect-ratio: 2.2 / 1;
  }
}

@media (max-width: 640px) {
  body[data-route="home"] .editorial-promos {
    width: min(100% - 32px, 430px) !important;
    margin-inline: auto !important;
    margin-top: 18px;
    margin-bottom: 20px;
  }

  body[data-route="home"] .editorial-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-route="home"] .editorial-promo-square {
    aspect-ratio: 1 / 1;
  }

  body[data-route="home"] .editorial-promo-square .editorial-promo-copy {
    top: 10px;
    right: 9px;
    left: 9px;
  }

  body[data-route="home"] .editorial-promo-square::after {
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.25) 36%, rgba(255, 255, 255, 0) 70%),
      linear-gradient(to left, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 58%);
  }

  body[data-route="home"] .editorial-promo-wide {
    grid-column: 1 / -1;
    aspect-ratio: 2.28 / 1;
  }

  body[data-route="home"] .editorial-promo-wide .editorial-promo-copy {
    top: 13px;
    right: 15px;
    left: auto;
    width: min(50%, 172px);
    text-align: right;
  }

  body[data-route="home"] .editorial-promo-wide::after {
    background:
      linear-gradient(to left, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46) 34%, rgba(255, 255, 255, 0) 65%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 48%);
  }

  body[data-route="home"] .editorial-promo-copy strong {
    font-size: 13px;
  }

  body[data-route="home"] .editorial-promo-copy b {
    font-size: 23px;
  }

  body[data-route="home"] .home-product-feed {
    margin-bottom: 122px;
  }

  body[data-route="home"] .home-product-rail {
    width: min(100% - 32px, 430px) !important;
    margin-inline: auto !important;
    margin-top: 18px;
    margin-bottom: 20px;
  }

  body[data-route="home"] .home-product-rail .section-head {
    margin-bottom: 9px;
    padding-inline: 2px;
  }

  body[data-route="home"] .home-product-rail .section-head h2 {
    font-size: 18px;
  }

  body[data-route="home"] .home-product-rail .outline-button {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 11.5px;
  }

  body[data-route="home"] .home-product-rail .rail {
    grid-auto-columns: minmax(154px, 43%);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 14px;
    -webkit-overflow-scrolling: touch;
  }

  body[data-route="home"] .home-product-rail .product-card {
    min-height: 296px;
    grid-template-rows: 128px 122px 40px;
  }

  body[data-route="home"] .home-product-rail .product-media,
  body[data-route="home"] .home-product-rail .rail .product-media {
    min-height: 128px;
  }
}

/* Mobile zoom lock: keep normal scrolling, avoid pinch/focus zoom where browsers allow it. */
@media (max-width: 640px) {
  html,
  body {
    touch-action: pan-x pan-y;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Clean hero pass: remove the extra bottom overlays and keep the rail separate. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-main::after {
    content: none !important;
    display: none !important;
  }

  body[data-route="home"] .hero-dots {
    inset-block-end: 12px !important;
  }

  body[data-route="home"] .hero-icon-rail {
    z-index: 1 !important;
    margin: 8px 0 22px !important;
    padding: 10px 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .home-loading-icons {
    display: none !important;
  }

  .remove-cart-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(215, 25, 63, 0.2) !important;
    background: rgba(215, 25, 63, 0.07) !important;
    color: #d7193f !important;
  }

  .remove-cart-button .nion-icon {
    width: 18px;
    height: 18px;
    color: #d7193f !important;
    stroke-width: 2.15;
  }
}

/* Cart item quantity control: Nice One-style segmented plus/count/delete. */
@media (max-width: 640px) {
  .cart-item-stepper {
    direction: ltr;
    grid-template-columns: 36px 36px 36px !important;
    width: 108px;
    min-height: 36px;
    overflow: hidden;
    border: 1px solid rgba(18, 18, 24, 0.12) !important;
    border-radius: 9px !important;
    background: #fff !important;
  }

  .cart-item-stepper > * {
    min-width: 0;
    min-height: 36px !important;
    border: 0 !important;
  }

  .cart-item-stepper > * + * {
    border-left: 1px solid rgba(18, 18, 24, 0.08) !important;
  }

  .cart-item-stepper .cart-stepper-plus {
    color: #101014 !important;
    background: #fff !important;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }

  .cart-item-stepper .cart-stepper-minus {
    color: #101014 !important;
    background: #f8f8fa !important;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
  }

  .cart-item-stepper span {
    color: #111116;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
  }

  .cart-item-stepper .remove-cart-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 0 !important;
    background: #f8f8fa !important;
    color: #d7193f !important;
  }

  .cart-item-stepper .remove-cart-button .nion-icon {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.85 !important;
  }
}

/* Auth modal: keep login/register clear and readable on mobile. */
@media (max-width: 640px) {
  #authModal.modal {
    width: min(calc(100vw - 28px), 430px) !important;
    max-height: calc(100dvh - 46px);
    overflow: auto;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(18, 18, 24, 0.22) !important;
  }

  #authModal .modal-head {
    padding: 16px 16px 12px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 246, 255, 0.96)),
      var(--brand-gradient);
  }

  #authModal .modal-head h2 {
    font-size: 18px;
    font-weight: 850;
  }

  #authModal #closeAuth {
    width: auto;
    min-width: 56px;
    height: 34px;
    min-height: 34px;
    padding-inline: 12px;
    border-radius: 999px;
    background: rgba(18, 18, 24, 0.06);
    color: #17171c;
    font-size: 12px;
    font-weight: 800;
  }

  #authContent {
    padding: 14px 16px 16px !important;
  }

  #authContent .tabs {
    gap: 7px;
    margin-bottom: 13px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(18, 18, 24, 0.045);
  }

  #authContent .tabs button {
    min-height: 39px;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent;
    font-size: 13px;
  }

  #authContent .tabs button.active {
    background: #111116 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(18, 18, 24, 0.16);
  }

  #authContent .form-grid {
    gap: 11px !important;
  }

  #authContent .form-field {
    gap: 6px;
  }

  #authContent .form-field label {
    color: #1c1c22;
    font-size: 12.5px;
    font-weight: 800;
  }

  #authContent .form-field input,
  #authContent .form-field select {
    min-height: 48px;
    border-radius: 12px;
    border-color: rgba(18, 18, 24, 0.11);
    background: #fff;
  }

  #authContent .primary-button {
    width: 100%;
    min-height: 49px;
    border-radius: 13px;
  }

  #authContent .auth-helper {
    margin: -1px 0 1px;
    color: rgba(21, 21, 26, 0.62);
    font-size: 12px;
    line-height: 1.65;
  }
}

/* Logged-in account: readable profile, collapsible orders, same account menu language. */
@media (max-width: 640px) {
  .account-screen-logged {
    gap: 13px;
    padding-bottom: 122px;
  }

  .account-profile-card {
    padding: 14px !important;
    border: 1px solid rgba(188, 165, 238, 0.18);
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 247, 255, 0.96)) padding-box,
      var(--brand-gradient) border-box;
    box-shadow: 0 8px 22px rgba(18, 18, 24, 0.055);
  }

  .account-profile-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .account-avatar {
    width: 44px;
    height: 44px;
  }

  .account-profile-head strong {
    font-size: 16px;
  }

  .account-profile-head em {
    margin-top: 2px;
    direction: ltr;
    text-align: right;
  }

  .account-edit-button {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
  }

  .account-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .account-info-grid div {
    padding: 9px 7px;
    border-color: rgba(18, 18, 24, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
  }

  .account-info-grid span {
    font-size: 10.5px;
  }

  .account-info-grid strong {
    font-size: 11.5px;
  }

  .account-profile-form {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .account-profile-actions {
    grid-template-columns: minmax(0, 1fr) 82px;
  }

  .account-profile-actions .primary-button,
  .account-profile-actions .outline-button {
    min-height: 42px;
    border-radius: 10px;
  }

  .account-menu-list {
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(18, 18, 24, 0.045);
  }

  .account-menu-list a,
  .account-menu-list button {
    background: rgba(255, 255, 255, 0.98);
  }

  .account-menu-list button.is-open > .icon-symbol:last-child {
    transform: rotate(-90deg);
  }

  .account-inline-panel {
    padding: 10px;
    background: linear-gradient(180deg, rgba(247, 247, 250, 0.9), rgba(255, 255, 255, 0.98));
  }

  .account-order-trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
  }

  .account-order-trigger > span:nth-child(2) {
    text-align: left;
  }

  .account-order-trigger i {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 28px;
  }

  .account-order-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .account-order-item img {
    width: 42px;
    height: 42px;
  }

  .account-logout {
    width: 100%;
    border-radius: 12px;
    background: rgba(18, 18, 24, 0.04);
  }
}

/* Final cleanup: prevent old home overlays/skeleton rails from stacking on the UI. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-main::after,
  body[data-route="home"] .home-loading-icons {
    content: none !important;
    display: none !important;
  }

  body[data-route="home"] .hero-icon-rail {
    isolation: isolate;
    transform: none !important;
  }

  .loading-grid,
  .home-loading-chip {
    animation: none !important;
  }
}

/* Search results: compact horizontal cards with small product images. */
@media (max-width: 640px) {
  body[data-route="search"] .search-product-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding-inline: 1px;
  }

  body[data-route="search"] .search-product-list .product-card {
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden !important;
    border: 1px solid rgba(18, 18, 24, 0.065);
    border-radius: 10px !important;
    background: #fff;
    box-shadow: 0 5px 14px rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="search"] .search-product-list .product-media {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 104px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border-inline-end: 1px solid rgba(18, 18, 24, 0.055);
    background: linear-gradient(180deg, #fff, #fbfbfd);
  }

  body[data-route="search"] .search-product-list .product-media img {
    width: 100% !important;
    height: 100% !important;
    max-height: 92px;
    padding: 8px !important;
    object-fit: contain;
  }

  body[data-route="search"] .search-product-list .sale-badge {
    inset-block-start: 6px;
    inset-inline-start: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 8.8px;
    line-height: 1.1;
  }

  body[data-route="search"] .search-product-list .fav-button {
    inset-block-start: 6px;
    inset-inline-end: 6px;
    width: 27px;
    min-width: 27px;
    height: 27px;
    border-color: rgba(18, 18, 24, 0.055);
    box-shadow: 0 5px 12px rgba(18, 18, 24, 0.06);
  }

  body[data-route="search"] .search-product-list .fav-button .nion-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.7;
  }

  body[data-route="search"] .search-product-list .product-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 10px 3px;
  }

  body[data-route="search"] .search-product-list .brand-name {
    min-height: 13px;
    color: #85858f;
    font-size: 9.6px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="search"] .search-product-list .product-name {
    min-height: 31px;
    display: -webkit-box;
    color: #15151a;
    font-size: 11.1px;
    font-weight: 750;
    line-height: 1.38;
    overflow: hidden;
    overflow-wrap: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body[data-route="search"] .search-product-list .rating-row {
    min-height: 15px;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-route="search"] .search-product-list .rating-pill {
    min-height: 0;
    padding: 0;
    background: transparent;
    font-size: 9px;
  }

  body[data-route="search"] .search-product-list .price-row {
    min-height: 17px;
    gap: 4px;
    margin-top: 0;
  }

  body[data-route="search"] .search-product-list .price {
    font-size: 12.8px;
    line-height: 1.15;
  }

  body[data-route="search"] .search-product-list .old-price,
  body[data-route="search"] .search-product-list .stock {
    font-size: 9px;
    line-height: 1.15;
  }

  body[data-route="search"] .search-product-list .stock {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-route="search"] .search-product-list .product-actions {
    grid-column: 2;
    grid-row: 2;
    padding: 0 10px 8px;
  }

  body[data-route="search"] .search-product-list .add-button,
  body[data-route="search"] .search-product-list .cart-control {
    min-height: 31px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.15;
  }

  body[data-route="search"] .search-product-list .cart-control {
    gap: 4px;
    padding: 5px 6px;
  }

  body[data-route="search"] .search-product-list .cart-added-label {
    font-size: 9.4px;
  }

  body[data-route="search"] .search-product-list .cart-stepper {
    gap: 2px;
  }

  body[data-route="search"] .search-product-list .cart-count-button {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
  }
}

/* Header search suggestions: show real product cards while typing. */
.suggestions {
  display: grid;
  gap: 7px;
  max-height: min(420px, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.suggestions[hidden] {
  display: none !important;
}

.suggestion-product,
.suggestions .suggestion-product {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid rgba(18, 18, 24, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #15151a;
  text-align: start;
}

.suggestion-product:hover,
.suggestion-product:focus-visible {
  background: linear-gradient(135deg, rgba(102, 226, 196, 0.09), rgba(239, 138, 222, 0.1));
  border-color: rgba(170, 138, 244, 0.28);
}

.suggestion-product-image {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, #f7f7fb);
}

.suggestion-product-image img {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}

.suggestion-product-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suggestion-product-copy small {
  color: #8a8a94;
  font-size: 9.4px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-product-copy strong {
  color: #15151a;
  font-size: 11.3px;
  font-weight: 750;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.suggestion-price-row {
  min-height: 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 2px 0 0;
  gap: 4px;
}

.suggestion-price-row b {
  color: #15151a;
  font-size: 12.2px;
  font-weight: 900;
  line-height: 1.1;
}

.suggestion-price-row i {
  color: #8e8e98;
  font-size: 9px;
  font-style: normal;
  line-height: 1.1;
  text-decoration: line-through;
}

@media (max-width: 640px) {
  .suggestions {
    inset-block-start: calc(100% + 7px);
    max-height: min(390px, 58vh);
    padding: 7px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 36px rgba(18, 18, 24, 0.16);
  }

  .suggestion-product,
  .suggestions .suggestion-product {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 66px;
    gap: 8px;
    padding: 6px;
    border-radius: 12px;
  }

  .suggestion-product-image {
    width: 52px;
    height: 52px;
  }
}

/* Performance and tap cleanup: remove mobile click boxes and reduce expensive paint work. */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, [tabindex], [data-product-card]):focus:not(:focus-visible) {
  outline: 0 !important;
}

:where(a, button, [data-product-card]):focus-visible {
  outline: 2px solid rgba(182, 147, 237, 0.48);
  outline-offset: 2px;
  border-radius: 12px;
}

button,
a,
input,
select,
textarea,
[role="button"],
[data-product-card],
[data-cart-control] {
  touch-action: manipulation;
}

@media (hover: none), (pointer: coarse) {
  .product-card:hover,
  .quick-tile:hover,
  .brand-tile:hover,
  .promo-card:hover,
  .suggestion-product:hover {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  html {
    scroll-behavior: auto;
  }

  .site-header,
  .search,
  .suggestions,
  body[data-route="product"] .detail-floating-button {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .skeleton {
    animation: none !important;
  }

  .icon-action,
  .add-button,
  .primary-button,
  .outline-button,
  .product-card,
  .quick-tile,
  .brand-tile,
  .promo-card,
  .suggestion-product {
    transition-duration: 120ms !important;
  }

  .home-deferred > .section,
  body[data-route="home"] .home-product-rail,
  body[data-route="home"] .promo-grid {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .product-media img,
  .quick-tile img,
  .brand-tile img,
  .promo-card img,
  .suggestion-product-image img {
    backface-visibility: hidden;
  }
}

/* Premium dock pass: liquid glass with a soft moving brand glow on the edge. */

/* Product card media reset: keep product photos inside their own clean slot. */
@media (max-width: 640px) {
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card,
  body:not([data-route="search"]) .rail .product-card {
    position: relative;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    contain: paint;
    isolation: isolate;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media,
  body:not([data-route="search"]) .rail .product-media {
    position: relative !important;
    z-index: 1;
    width: 100%;
    height: clamp(112px, 34vw, 142px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media img,
  body:not([data-route="search"]) .rail .product-media img {
    position: relative !important;
    inset: auto !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    display: block;
    padding: 8px !important;
    object-fit: contain !important;
    transform: none !important;
    pointer-events: none;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
  body:not([data-route="search"]) .rail .product-body,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
  body:not([data-route="search"]) .rail .product-actions {
    position: relative;
    z-index: 2;
    background: #fff;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .sale-badge,
  body:not([data-route="search"]) .rail .sale-badge,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .fav-button,
  body:not([data-route="search"]) .rail .fav-button {
    z-index: 4;
  }

  body[data-route="home"] .home-product-rail .product-card {
    min-height: 0 !important;
  }

  body[data-route="home"] .home-product-rail .product-media,
  body[data-route="home"] .home-product-rail .rail .product-media {
    height: 124px !important;
    min-height: 0 !important;
  }
}

/* Section browser rebuild: banner first, categories only, no jittery sticky brand list. */
@media (max-width: 640px) {
  body[data-route="section"] .page {
    width: 100% !important;
    padding: 8px 0 calc(126px + env(safe-area-inset-bottom)) !important;
  }

  body[data-route="section"] .section-hub {
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 0 !important;
    align-items: start;
    margin: 0 !important;
    padding: 0 !important;
    direction: ltr;
    contain: none !important;
    content-visibility: visible !important;
  }

  body[data-route="section"] .section-hub-tabs {
    grid-column: 2;
    grid-row: 1;
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: start;
    border-inline-start: 1px solid rgba(18, 18, 24, 0.055);
    background: #fff;
    box-shadow: none !important;
    scrollbar-width: none;
    transform: translateZ(0);
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 58px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-inline-start: 4px solid transparent;
    background: #fff;
    color: #8e8e98;
    padding: 8px 13px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.28;
    text-align: right;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    border-inline-start-color: #8f67f1 !important;
    background: linear-gradient(90deg, rgba(143, 103, 241, 0.06), #fff 48%);
    color: #15151a !important;
    font-weight: 800;
  }

  body[data-route="section"] .section-hub-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0 10px 0 12px !important;
    direction: rtl;
    contain: none !important;
    content-visibility: visible !important;
  }

  body[data-route="section"] .alpha-index,
  body[data-route="section"] .section-panel-title,
  body[data-route="section"] .section-brand-grid {
    display: none !important;
  }

  body[data-route="section"] .section-hero-banner {
    width: 100%;
    aspect-ratio: 3.08 / 1;
    display: block;
    overflow: hidden;
    margin: 2px 0 13px;
    border-radius: 8px;
    background: #f6f3fb;
    box-shadow: none;
  }

  body[data-route="section"] .section-hero-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  body[data-route="section"] .section-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 17px 7px !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile {
    min-height: 104px !important;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 8px;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #15151a;
    transform: none !important;
    contain: layout paint;
  }

  body[data-route="section"] .section-category-grid .quick-tile img {
    width: 62px !important;
    height: 62px !important;
    padding: 7px;
    border-radius: 999px;
    background: #f6f6f7;
    object-fit: contain !important;
    box-shadow: 0 4px 12px rgba(18, 18, 24, 0.035);
  }

  body[data-route="section"] .section-category-grid .quick-tile span {
    min-height: 34px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #15151a;
    font-size: 12.2px;
    font-weight: 750;
    line-height: 1.35;
    text-align: center;
  }
}

/* Final stability pass: keep mobile navigation and scroll rendering crisp. */
@media (max-width: 640px) {
  html,
  body,
  #app {
    max-width: 100%;
    overflow-x: clip !important;
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button,
  input,
  select,
  textarea,
  [role="button"],
  [data-product-card],
  [data-cart-control] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .home-deferred > .section,
  body[data-route="home"] .home-product-rail,
  body[data-route="home"] .promo-grid,
  .section:not(.hero),
  .product-card,
  .promo-card,
  .quick-tile,
  .brand-tile,
  .section-hub,
  .section-hub-tabs,
  .section-hub-content,
  .section-category-grid {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  .site-header,
  .suggestions,
  .modal,
  .image-viewer,
  .toast,
  body[data-route="product"] .detail-floating-actions,
  body[data-route="product"] .detail-sticky-cart {
    isolation: isolate;
  }

  .product-card,
  .quick-tile,
  .brand-tile,
  .promo-card,
  .suggestion-product,
  .section-category-grid .quick-tile {
    will-change: auto !important;
  }

  .product-card,
  .quick-tile,
  .brand-tile,
  .promo-card {
    transform: none !important;
  }

  .product-media,
  .product-body,
  .product-actions,
  .detail-media,
  .detail-info,
  .cart-row {
    position: relative;
    z-index: 1;
  }
}

/* Fast mobile paint pass: remove hidden image layers and defer below-fold painting. */
@media (max-width: 640px) {
  .home-deferred:empty {
    min-height: 120px;
  }

  .home-deferred.is-loaded {
    min-height: 0;
  }

  body[data-route="home"] .home-deferred > .section,
  body[data-route="home"] .home-product-rail,
  body[data-route="home"] .promo-showcase,
  body[data-route="home"] .brand-rail,
  body[data-route="home"] .quick-grid,
  body[data-route="home"] .editorial-promo-grid {
    content-visibility: auto !important;
    contain-intrinsic-size: 420px !important;
  }

  .product-media::before,
  .rail .product-media::before,
  body[data-route="cart"] .product-media::before,
  body[data-route="search"] .product-media::before {
    content: none !important;
    display: none !important;
  }

  .product-media,
  .rail .product-media,
  body[data-route="cart"] .product-media {
    background:
      radial-gradient(circle at 50% 44%, rgba(121, 239, 215, 0.08), transparent 38%),
      linear-gradient(180deg, #fff 0%, #fbfbfd 100%) !important;
  }
}

/* Fast paint polish: keep temporary hero and category image slots quiet while real assets decode. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-fallback span,
  body[data-route="home"] .hero-fallback strong,
  body[data-route="home"] .hero-fallback em,
  .home-loading-panel span,
  .home-loading-panel strong,
  .home-loading-panel em {
    display: none !important;
  }

  body[data-route="home"] .hero-fallback,
  .home-loading-hero {
    background:
      radial-gradient(circle at 22% 64%, rgba(121, 239, 215, 0.26), transparent 26%),
      radial-gradient(circle at 82% 26%, rgba(223, 176, 238, 0.28), transparent 32%),
      linear-gradient(145deg, #fff1f8 0%, #f1fdff 54%, #faf4ff 100%) !important;
  }

  .home-loading-panel {
    display: none !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile img {
    background: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    box-shadow: 0 7px 18px rgba(18, 18, 24, 0.055) !important;
  }
}

/* Account orders: live dashboard timeline for active order states. */
.account-order-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: -1px 10px 10px;
  padding: 13px 8px 11px;
  overflow: hidden;
  border: 1px solid rgba(188, 165, 238, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 255, 0.92)),
    rgba(255, 255, 255, 0.92);
  direction: rtl;
}

.account-order-timeline::before,
.account-order-timeline-fill {
  content: "";
  position: absolute;
  inset-inline: 26px;
  top: 27px;
  height: 2px;
  border-radius: 999px;
}

.account-order-timeline::before {
  background: rgba(18, 18, 24, 0.08);
}

.account-order-timeline-fill {
  right: 26px;
  left: auto;
  background: var(--brand-gradient);
  box-shadow: 0 0 14px rgba(182, 147, 237, 0.26);
}

.account-timeline-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: rgba(21, 21, 26, 0.46);
  text-align: center;
}

.account-timeline-dot {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 18, 24, 0.08);
  border-radius: 999px;
  background: #fff;
  color: rgba(21, 21, 26, 0.42);
  box-shadow: 0 4px 12px rgba(18, 18, 24, 0.055);
}

.account-timeline-dot .nion-icon {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.55 !important;
}

.account-timeline-step strong {
  max-width: 100%;
  color: currentColor;
  font-size: 10.4px;
  font-weight: 750;
  line-height: 1.25;
}

.account-timeline-step.is-done,
.account-timeline-step.is-active {
  color: #15151a;
}

.account-timeline-step.is-done .account-timeline-dot {
  border-color: rgba(121, 239, 215, 0.42);
  background: rgba(121, 239, 215, 0.15);
  color: #37a592;
}

.account-timeline-step.is-active .account-timeline-dot {
  border-color: transparent;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow:
    0 9px 20px rgba(111, 90, 207, 0.18),
    0 0 0 5px rgba(188, 165, 238, 0.12);
}

.account-timeline-step.is-active .account-timeline-dot .nion-icon {
  color: #fff !important;
}

.account-order-terminal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -1px 10px 10px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 25, 63, 0.13);
  border-radius: 10px;
  background: rgba(215, 25, 63, 0.055);
  color: #d7193f;
  font-size: 11px;
  font-weight: 800;
}

.account-order-terminal .nion-icon {
  color: #d7193f !important;
}

@media (max-width: 380px) {
  .account-order-timeline {
    padding-inline: 5px;
  }

  .account-timeline-dot {
    width: 27px;
    height: 27px;
  }

  .account-timeline-step strong {
    font-size: 9.8px;
  }
}

/* Launch orders v3: four-stage icon journey and collapsible order history. */
body[data-route="orders"] .orders-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 14px;
  padding: 10px 7px 9px;
  overflow: hidden;
  border: 1px solid var(--orders-line);
  border-radius: 14px;
  background: var(--orders-surface);
  box-shadow: 0 7px 22px rgba(19, 22, 30, 0.05);
}

body[data-route="orders"] .orders-journey::before {
  content: "";
  position: absolute;
  top: 25px;
  inset-inline: 14%;
  height: 2px;
  border-radius: 999px;
  background: var(--orders-line);
}

body[data-route="orders"] .orders-journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 32px minmax(22px, auto) 17px;
  justify-items: center;
  align-items: center;
  min-width: 0;
  gap: 3px;
  color: var(--orders-muted);
  text-align: center;
}

body[data-route="orders"] .orders-journey-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--orders-surface);
}

body[data-route="orders"] .orders-journey-step strong {
  max-width: 78px;
  color: var(--orders-ink);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

body[data-route="orders"] .orders-journey-step b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orders-surface-soft);
  color: currentColor;
  font-size: 8px;
  font-weight: 850;
}

body[data-route="orders"] .orders-journey-pending {
  color: var(--orders-pending);
}

body[data-route="orders"] .orders-journey-preparing {
  color: var(--orders-preparing);
}

body[data-route="orders"] .orders-journey-shipping {
  color: var(--orders-shipping);
}

body[data-route="orders"] .orders-journey-delivered {
  color: var(--orders-delivered);
}

body[data-route="orders"] .orders-journey.is-loading .orders-journey-step {
  opacity: 0.54;
}

body[data-route="orders"] .orders-current-section {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

body[data-route="orders"] .orders-section-head,
body[data-route="orders"] .orders-history > summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
}

body[data-route="orders"] .orders-section-head {
  padding: 0 3px;
}

body[data-route="orders"] .orders-section-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--orders-line);
  border-radius: 11px;
  background: var(--orders-surface);
  color: var(--orders-accent);
}

body[data-route="orders"] .orders-section-head > span:nth-child(2),
body[data-route="orders"] .orders-history > summary > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body[data-route="orders"] .orders-section-head strong,
body[data-route="orders"] .orders-history > summary strong {
  color: var(--orders-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: 0;
}

body[data-route="orders"] .orders-section-head small,
body[data-route="orders"] .orders-history > summary small {
  color: var(--orders-muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}

body[data-route="orders"] .orders-section-head > b,
body[data-route="orders"] .orders-history > summary > b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--orders-accent-soft);
  color: var(--orders-accent);
  font-size: 9px;
  font-weight: 850;
}

body[data-route="orders"] .orders-current-list,
body[data-route="orders"] .orders-history-list {
  display: grid;
  gap: 10px;
}

body[data-route="orders"] .orders-history {
  overflow: hidden;
  margin-top: 4px;
  border: 1px solid var(--orders-line);
  border-radius: 14px;
  background: var(--orders-surface);
  box-shadow: 0 7px 22px rgba(19, 22, 30, 0.05);
}

body[data-route="orders"] .orders-history > summary {
  grid-template-columns: 36px minmax(0, 1fr) auto 28px;
  min-height: 62px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

body[data-route="orders"] .orders-history > summary::-webkit-details-marker {
  display: none;
}

body[data-route="orders"] .orders-history > summary > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--orders-surface-soft);
  color: var(--orders-muted);
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease;
}

body[data-route="orders"] .orders-history[open] > summary > i {
  transform: rotate(180deg);
  background: var(--orders-accent-soft);
  color: var(--orders-accent);
}

body[data-route="orders"] .orders-history-body {
  padding: 0 9px 9px;
  border-top: 1px solid var(--orders-line);
}

body[data-route="orders"] .orders-history-list {
  padding-top: 9px;
}

body[data-route="orders"] .orders-history-list .account-order-card {
  box-shadow: none !important;
}

body[data-route="orders"] .orders-inline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 52px;
  padding: 10px;
  border: 1px dashed var(--orders-line);
  border-radius: 11px;
  background: var(--orders-surface-soft);
  color: var(--orders-muted);
  font-size: 10px;
  font-weight: 700;
}

body[data-route="orders"] .account-timeline-pending .account-timeline-dot {
  color: var(--orders-pending) !important;
}

body[data-route="orders"] .account-timeline-preparing .account-timeline-dot {
  color: var(--orders-preparing) !important;
}

body[data-route="orders"] .account-timeline-shipping .account-timeline-dot {
  color: var(--orders-shipping) !important;
}

body[data-route="orders"] .account-timeline-delivered .account-timeline-dot {
  color: var(--orders-delivered) !important;
}

body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot {
  color: #ffffff !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-journey,
html[data-theme="dark"] body[data-route="orders"] .orders-history,
html[data-theme="dark"] body[data-route="orders"] .orders-section-icon,
html[data-theme="dark"] body[data-route="orders"] .orders-journey-icon {
  border-color: var(--orders-line);
  background: var(--orders-surface);
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="orders"] .orders-history-body {
  border-color: var(--orders-line);
}

html[dir="ltr"] body[data-route="orders"] .orders-section-head,
html[dir="ltr"] body[data-route="orders"] .orders-history > summary {
  direction: ltr;
  text-align: left;
}

@media (max-width: 360px) {
  body[data-route="orders"] .orders-journey {
    padding-inline: 4px;
  }

  body[data-route="orders"] .orders-journey-step strong {
    font-size: 8.3px;
  }
}

/* Offers v4: the banner itself is the filter. The rail stays free-scrolling
   while the product surface below is replaced in place. */
html body[data-route="offers"] #app .offers-experience-v3 {
  gap: 16px !important;
}

html body[data-route="offers"] #app .offers-experience-v3 .offers-page-head {
  width: 100% !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 0 0 !important;
  box-shadow: none !important;
}

html body[data-route="offers"] #app .offers-experience-v3 .offers-page-head > div > small,
html body[data-route="offers"] #app .offers-experience-v3 .offers-page-head > span {
  display: none !important;
}

html body[data-route="offers"] #app .offers-experience-v3 .offers-page-head h1 {
  margin: 0 !important;
  color: var(--text) !important;
  font-size: clamp(26px, 6.8vw, 40px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

html body[data-route="offers"] #app .offers-experience-v3 .offers-page-head p {
  margin: 5px 0 0 !important;
  color: var(--muted) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

html body[data-route="offers"] #app .offers-filter-switcher {
  width: calc(100% + (var(--offers-v3-edge) * 2)) !important;
  margin-inline: calc(var(--offers-v3-edge) * -1) !important;
}

html body[data-route="offers"] #app .offers-filter-banner-track {
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: min(42vw, 188px) !important;
  align-items: stretch !important;
  gap: 9px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px var(--offers-v3-edge) 7px !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: none !important;
  overscroll-behavior-inline: contain !important;
  scrollbar-width: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

html body[data-route="offers"] #app .offers-filter-banner-track::-webkit-scrollbar {
  display: none !important;
}

html body[data-route="offers"] #app .offers-filter-banner {
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--text), transparent 90%) !important;
  border-radius: 8px !important;
  background: #eef0f4 !important;
  color: #fff !important;
  padding: 0 !important;
  box-shadow: 0 7px 18px rgba(25, 20, 42, 0.07) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1), border-color 170ms ease, box-shadow 170ms ease !important;
}

html body[data-route="offers"] #app .offers-filter-banner > img {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: scale(1.002);
}

html body[data-route="offers"] #app .offers-filter-banner > span {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(0deg, rgba(7, 7, 12, 0.76) 0%, rgba(7, 7, 12, 0.18) 48%, rgba(7, 7, 12, 0.02) 74%) !important;
  pointer-events: none !important;
}

html body[data-route="offers"] #app .offers-filter-banner > strong,
html body[data-route="offers"] #app .offers-filter-banner > small {
  position: absolute !important;
  z-index: 2 !important;
  right: 11px !important;
  left: 11px !important;
  display: block !important;
  overflow: hidden !important;
  color: #fff !important;
  text-align: right !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42) !important;
}

html body[data-route="offers"] #app .offers-filter-banner > strong {
  bottom: 28px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-route="offers"] #app .offers-filter-banner > small {
  bottom: 11px !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 0.9 !important;
}

html[dir="ltr"] body[data-route="offers"] #app .offers-filter-banner > :is(strong, small) {
  text-align: left !important;
}

html body[data-route="offers"] #app .offers-filter-banner:active {
  transform: scale(0.975) !important;
}

html body[data-route="offers"] #app .offers-filter-banner.is-active {
  border-color: rgba(122, 91, 221, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(122, 91, 221, 0.18), 0 10px 24px rgba(66, 47, 126, 0.18) !important;
}

html body[data-route="offers"] #app .offers-filter-banner.is-active::after {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #7554d2;
  content: "";
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

html[dir="ltr"] body[data-route="offers"] #app .offers-filter-banner.is-active::after {
  right: auto;
  left: 9px;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-banner {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: #191a21 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-banner.is-active {
  border-color: rgba(131, 228, 213, 0.82) !important;
  box-shadow: 0 0 0 2px rgba(131, 228, 213, 0.14) !important;
}

@media (max-width: 640px) {
  html body[data-route="offers"] #app .offers-filter-banner-track {
    grid-auto-columns: calc((100vw - 49px) / 2.24) !important;
  }

  html body[data-route="offers"] #app .offers-filter-banner > strong {
    font-size: 12px !important;
  }
}

@media (min-width: 760px) {
  html body[data-route="offers"] #app .offers-filter-banner-track {
    grid-auto-columns: 188px !important;
  }
}

/* Offers v3: dashboard-led banners, frictionless category filters and one
   stable results surface. Keep this final layer authoritative over v2. */
body[data-route="offers"] #app .offers-experience-v3 {
  --offers-v3-edge: clamp(14px, 4vw, 24px);
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  min-width: 0;
  display: grid !important;
  gap: clamp(18px, 4vw, 28px) !important;
  margin-inline: auto !important;
  padding: 4px var(--offers-v3-edge) calc(112px + env(safe-area-inset-bottom)) !important;
  overflow: clip;
}

body[data-route="offers"] #app .offers-experience-v3 > * {
  min-width: 0;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0 0;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head > div {
  min-width: 0;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 3px;
  color: #7654ca;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(25px, 6vw, 36px);
  font-weight: 900;
  line-height: 1.08;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-page-head > span {
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, #7654ca, transparent 78%);
  border-radius: 999px;
  background: color-mix(in srgb, #7654ca 9%, var(--surface));
  color: #7654ca;
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-track {
  width: calc(100% + (var(--offers-v3-edge) * 2));
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: min(88vw, 820px) !important;
  margin-inline: calc(var(--offers-v3-edge) * -1);
  padding-inline: var(--offers-v3-edge);
  scroll-snap-type: x proximity;
}

body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-card {
  aspect-ratio: 1.72 / 1;
  border: 1px solid color-mix(in srgb, var(--text), transparent 92%);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 19, 38, 0.06);
}

body[data-route="offers"] #app .offers-experience-v3 .offers-filter-switcher {
  width: calc(100% + (var(--offers-v3-edge) * 2));
  min-width: 0;
  margin-inline: calc(var(--offers-v3-edge) * -1);
}

body[data-route="offers"] #app .offers-filter-track {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px var(--offers-v3-edge) 6px;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

body[data-route="offers"] #app .offers-filter-track::-webkit-scrollbar {
  display: none;
}

body[data-route="offers"] #app .offers-filter-chip {
  flex: 0 0 auto;
  min-width: 102px;
  min-height: 42px;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 87%);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface), var(--bg) 12%);
  color: var(--text);
  padding: 8px 11px;
  box-shadow: 0 3px 12px rgba(24, 19, 38, 0.035);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body[data-route="offers"] #app .offers-filter-chip:active {
  transform: scale(0.97);
}

body[data-route="offers"] #app .offers-filter-chip strong {
  max-width: 156px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="offers"] #app .offers-filter-chip small {
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--text), transparent 92%);
  color: var(--muted);
  padding-inline: 5px;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
}

body[data-route="offers"] #app .offers-filter-chip.is-active {
  border-color: #111116;
  background: #111116;
  color: #fff;
  box-shadow: 0 8px 20px rgba(17, 17, 22, 0.17);
}

body[data-route="offers"] #app .offers-filter-chip.is-active small {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

body[data-route="offers"] #app .offers-filter-panel {
  min-width: 0;
  min-height: 320px;
  transition: opacity 140ms ease, transform 140ms ease;
}

body[data-route="offers"] #app .offers-filter-panel.is-updating {
  opacity: 0.42;
  transform: translateY(3px);
}

body[data-route="offers"] #app .offers-filter-panel-content {
  min-width: 0;
  display: grid;
  gap: 12px;
}

body[data-route="offers"] #app .offers-filter-result-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

body[data-route="offers"] #app .offers-filter-result-head > div {
  min-width: 0;
}

body[data-route="offers"] #app .offers-filter-result-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 5vw, 29px);
  font-weight: 900;
  line-height: 1.12;
}

body[data-route="offers"] #app .offers-filter-result-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.3;
}

body[data-route="offers"] #app .offers-filter-result-head > span {
  flex: 0 0 auto;
  color: #7654ca;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

body[data-route="offers"] #app .offers-filter-product-grid {
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 8px !important;
}

body[data-route="offers"] #app .offers-filter-product-grid .product-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

body[data-route="offers"] #app .offers-filter-more {
  min-width: min(210px, 76%);
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 82%);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  margin-top: 4px;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-chip {
  border-color: rgba(255, 255, 255, 0.11);
  background: #191a21;
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-chip.is-active {
  border-color: rgba(133, 231, 216, 0.58);
  background: #f5f3fa;
  color: #111116;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-chip.is-active small {
  background: rgba(17, 17, 22, 0.09);
  color: #4e3b88;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-filter-more {
  border-color: rgba(255, 255, 255, 0.12);
  background: #191a21;
}

@media (max-width: 640px) {
  body[data-route="offers"] #app .offers-experience-v3 {
    --offers-v3-edge: 14px;
    gap: 18px !important;
  }

  body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-track {
    grid-auto-columns: calc(100vw - 38px) !important;
  }

  body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-card {
    aspect-ratio: 1.64 / 1;
  }

  body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-card > span {
    width: 64%;
    padding: 13px;
  }

  body[data-route="offers"] #app .offers-filter-chip {
    min-width: 108px;
  }
}

@media (min-width: 760px) {
  body[data-route="offers"] #app .offers-experience-v3 .offers-v2-feature-track {
    grid-auto-columns: min(74vw, 820px) !important;
  }

  body[data-route="offers"] #app .offers-filter-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="offers"] #app :is(.offers-filter-chip, .offers-filter-panel) {
    transition-duration: 0.01ms !important;
  }
}

/* Offers v2: compact, dashboard-led merchandising with a restrained mobile hierarchy. */
body[data-route="offers"] #app .offers-experience-v2 {
  --offers-v2-edge: clamp(14px, 4vw, 24px);
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  display: grid !important;
  gap: clamp(20px, 4.8vw, 32px) !important;
  margin-inline: auto !important;
  padding: 4px var(--offers-v2-edge) 34px !important;
  overflow: clip;
}

body[data-route="offers"] #app .offers-experience-v2 > * {
  min-width: 0;
}

body[data-route="offers"] #app .offers-experience-v2 .offers-page-head {
  align-items: center;
  padding: 7px 0 0;
}

body[data-route="offers"] #app .offers-experience-v2 .offers-page-head > div > small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  color: #7654ca;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}

body[data-route="offers"] #app .offers-experience-v2 .offers-page-head h1 {
  font-size: clamp(25px, 6.5vw, 38px);
  line-height: 1.08;
}

body[data-route="offers"] #app .offers-v2-feature {
  position: relative;
  min-width: 0;
}

body[data-route="offers"] #app .offers-v2-feature-track {
  width: calc(100% + (var(--offers-v2-edge) * 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88vw, 820px);
  gap: 10px;
  margin-inline: calc(var(--offers-v2-edge) * -1);
  padding-inline: var(--offers-v2-edge);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

body[data-route="offers"] #app .offers-v2-feature-track::-webkit-scrollbar,
body[data-route="offers"] #app .offers-v2-discovery-track::-webkit-scrollbar,
body[data-route="offers"] #app .offers-v2-product-track::-webkit-scrollbar {
  display: none;
}

body[data-route="offers"] #app .offers-v2-feature-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1.7 / 1;
  display: block;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
  border-radius: 8px;
  background: #eef0f4;
  color: #111116;
}

body[data-route="offers"] #app .offers-v2-feature-card > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-route="offers"] #app .offers-v2-feature-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 5, 9, 0.58), rgba(5, 5, 9, 0.02) 62%);
}

body[data-route="offers"] #app .offers-v2-feature-card > span {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: min(62%, 430px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: clamp(14px, 4vw, 28px);
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38);
}

html[dir="ltr"] body[data-route="offers"] #app .offers-v2-feature-card > span {
  right: auto;
  left: 0;
  text-align: left;
}

body[data-route="offers"] #app .offers-v2-feature-card > span > small {
  font-size: 9px;
  font-weight: 750;
  opacity: 0.82;
}

body[data-route="offers"] #app .offers-v2-feature-card > span > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(17px, 5vw, 32px);
  font-weight: 900;
  line-height: 1.13;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  color: inherit;
  white-space: nowrap;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount-value {
  display: inline-flex;
  align-items: flex-end;
  direction: ltr;
  line-height: 0.9;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount-side {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount-number {
  font-size: clamp(38px, 11vw, 66px);
  font-weight: 950;
  line-height: 0.84;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount-symbol {
  font-size: clamp(20px, 5.5vw, 31px);
  font-weight: 900;
  line-height: 0.88;
}

body[data-route="offers"] #app .offers-v2-feature-card .promo-discount-prefix {
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

body[data-route="offers"] #app .offers-v2-feature .offers-hero-dots {
  position: static;
  min-height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

body[data-route="offers"] #app .offers-v2-feature .offers-hero-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text), transparent 78%);
  transition: width 220ms ease, background-color 220ms ease;
}

body[data-route="offers"] #app .offers-v2-feature .offers-hero-dots span.active {
  width: 18px;
  background: #7654ca;
}

body[data-route="offers"] #app .offers-v2-discovery > header,
body[data-route="offers"] #app .offers-v2-products > header,
body[data-route="offers"] #app .offers-v2-editorial-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body[data-route="offers"] #app .offers-v2-discovery h2,
body[data-route="offers"] #app .offers-v2-products h2,
body[data-route="offers"] #app .offers-v2-editorial-section h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(19px, 5vw, 28px);
  font-weight: 900;
  line-height: 1.15;
}

body[data-route="offers"] #app .offers-v2-products header small,
body[data-route="offers"] #app .offers-v2-editorial-section > header small {
  display: block;
  margin-bottom: 2px;
  color: #7654ca;
  font-size: 9px;
  font-weight: 850;
}

body[data-route="offers"] #app .offers-v2-products header > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7654ca;
  font-size: 11px;
  font-weight: 850;
}

body[data-route="offers"] #app .offers-v2-discovery-track {
  width: calc(100% + (var(--offers-v2-edge) * 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(27vw, 132px);
  gap: 8px;
  margin-inline: calc(var(--offers-v2-edge) * -1);
  padding: 1px var(--offers-v2-edge) 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body[data-route="offers"] #app .offers-v2-discovery-track > a {
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-rows: 48px auto auto;
  align-content: start;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--text), transparent 89%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface), var(--bg) 18%);
  color: var(--text);
  text-align: center;
}

body[data-route="offers"] #app .offers-v2-discovery-track > a > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

body[data-route="offers"] #app .offers-v2-discovery-track img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

body[data-route="offers"] #app .offers-v2-discovery-icon {
  color: #7654ca;
  background: linear-gradient(145deg, rgba(104, 221, 210, 0.18), rgba(183, 126, 235, 0.2)) !important;
}

body[data-route="offers"] #app .offers-v2-discovery-track strong {
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="offers"] #app .offers-v2-discovery-track small {
  width: 100%;
  overflow: hidden;
  color: #7654ca;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="offers"] #app .offers-deferred {
  min-width: 0;
  display: grid;
  gap: clamp(22px, 5vw, 34px);
}

body[data-route="offers"] #app .offers-deferred > * {
  min-width: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

body[data-route="offers"] #app .offers-v2-product-track {
  width: calc(100% + (var(--offers-v2-edge) * 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(42vw, 208px);
  gap: 8px;
  margin-inline: calc(var(--offers-v2-edge) * -1);
  padding: 2px var(--offers-v2-edge) 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

body[data-route="offers"] #app .offers-v2-product-track .product-card {
  width: 100% !important;
  min-width: 0 !important;
  scroll-snap-align: start;
}

body[data-route="offers"] #app .offers-v2-products.is-soft {
  width: calc(100% + (var(--offers-v2-edge) * 2));
  margin-inline: calc(var(--offers-v2-edge) * -1);
  padding: 18px var(--offers-v2-edge) 12px;
  background: color-mix(in srgb, #bca5ee 7%, var(--bg));
}

body[data-route="offers"] #app .offers-v2-editorial-section .offers-editorial-grid {
  gap: 8px;
}

body[data-route="offers"] #app .offers-v2-editorial-section .offers-editorial-card {
  border-radius: 8px;
}

body[data-route="offers"] #app .offers-experience-v2 .offers-all-products {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="offers"] #app .offers-experience-v2 .offers-all-products .product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-v2-feature-card,
html[data-theme="dark"] body[data-route="offers"] #app .offers-v2-discovery-track > a {
  border-color: rgba(255, 255, 255, 0.1);
  background: #191a21;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-v2-discovery-track > a > span {
  background: rgba(255, 255, 255, 0.94);
}

@media (max-width: 640px) {
  body[data-route="offers"] #app .offers-experience-v2 {
    --offers-v2-edge: 14px;
    padding-inline: var(--offers-v2-edge) !important;
  }

  body[data-route="offers"] #app .offers-v2-feature-track {
    grid-auto-columns: calc(100vw - 38px);
  }

  body[data-route="offers"] #app .offers-v2-feature-card {
    aspect-ratio: 1.62 / 1;
  }

  body[data-route="offers"] #app .offers-v2-feature-card > span {
    width: 62%;
    padding: 13px;
  }

  body[data-route="offers"] #app .offers-v2-discovery-track {
    grid-auto-columns: calc((100vw - 54px) / 3.35);
  }

  body[data-route="offers"] #app .offers-v2-product-track {
    grid-auto-columns: calc((100vw - 44px) / 2.2);
  }

  body[data-route="offers"] #app .offers-experience-v2 .offers-all-products .product-card,
  body[data-route="offers"] #app .offers-v2-product-track .product-card {
    min-width: 0 !important;
  }
}

@media (min-width: 760px) {
  body[data-route="offers"] #app .offers-v2-feature-track {
    grid-auto-columns: min(74vw, 820px);
  }

  body[data-route="offers"] #app .offers-v2-discovery-track {
    grid-auto-columns: 130px;
  }

  body[data-route="offers"] #app .offers-v2-product-track {
    grid-auto-columns: 208px;
  }

  body[data-route="offers"] #app .offers-experience-v2 .offers-all-products .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Keep the cart quantity editor balanced when the live stock ceiling hides +. */
html body[data-route="cart"] #app .cart-item-stepper.is-at-stock-limit {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-route="cart"] #app .cart-item-stepper.is-at-stock-limit > :is(button, span) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Cart add confirmation: preserve the current browsing position while giving
   the customer an explicit five-second choice to keep shopping or open cart. */
.cart-added-prompt {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 125;
  width: min(390px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(18, 18, 24, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #141419;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 18px 46px rgba(23, 20, 36, 0.18);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.cart-added-prompt.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cart-added-prompt-product {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 9px;
}

.cart-added-prompt-image {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(18, 18, 24, 0.07);
  border-radius: 10px;
  background: #fff;
}

.cart-added-prompt-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cart-added-prompt-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: start;
}

.cart-added-prompt-copy small {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6750b8;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

.cart-added-prompt-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #15151a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-added-prompt-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f4f3f7;
  color: #5c5b64;
  padding: 0;
}

.cart-added-prompt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.cart-added-prompt-actions button {
  min-width: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(18, 18, 24, 0.1);
  border-radius: 9px;
  background: #fff;
  color: #18171d;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.cart-added-prompt-actions button.is-primary {
  border-color: #111116;
  background: #111116;
  color: #fff;
}

.cart-added-prompt-timer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #72e5d0, #8c6bec, #cf69df);
  transform-origin: right center;
  animation: cart-added-countdown 5s linear forwards;
}

@keyframes cart-added-countdown {
  to { transform: scaleX(0); }
}

html[dir="ltr"] .cart-added-prompt-timer {
  transform-origin: left center;
}

html[data-theme="dark"] .cart-added-prompt {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(20, 20, 28, 0.96);
  color: #f8f7ff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .cart-added-prompt-image,
html[data-theme="dark"] .cart-added-prompt-actions button:not(.is-primary) {
  border-color: rgba(255, 255, 255, 0.1);
  background: #f7f7fa;
}

html[data-theme="dark"] .cart-added-prompt-copy strong {
  color: #f8f7ff;
}

html[data-theme="dark"] .cart-added-prompt-close {
  background: rgba(255, 255, 255, 0.09);
  color: #f1f0f6;
}

@media (max-width: 640px) {
  .cart-added-prompt {
    right: 50%;
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: min(390px, calc(100vw - 24px));
    transform: translate(50%, 14px) scale(0.98);
  }

  .cart-added-prompt.is-visible {
    transform: translate(50%, 0) scale(1);
  }

  body[data-route="product"] .cart-added-prompt,
  body[data-route="cart"] .cart-added-prompt {
    bottom: calc(166px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 340px) {
  .cart-added-prompt-actions button {
    font-size: 10px;
    padding-inline: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-added-prompt {
    transition-duration: 0.01ms;
  }
}

/* Match the complete live control signature used by the unified-card layer.
   This prevents its 62px desktop stepper track from winning on three-up rows. */
@media (max-width: 759px) {
  html body[data-route="home"] #app .home-catalog-grid .product-card .product-actions > .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid .product-card .product-actions > .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-card .product-actions > .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 2px !important;
    padding: 2px !important;
  }
}

/* Cart sharing: one focused action in a balanced, language-stable header. */
body[data-route="cart"] .cart-page-head {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}

body[data-route="cart"] .cart-page-head h1 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #111114;
  font-size: var(--type-title);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="cart"] .cart-page-head > span {
  grid-column: 3;
  grid-row: 1;
}

body[data-route="cart"] .cart-page-head .cart-share-button {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  justify-self: start;
  padding: 0;
  border-radius: 999px;
  color: #18181d;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

body[data-route="cart"] .cart-page-head .cart-share-button:active {
  transform: scale(0.94);
}

body[data-route="cart"] .cart-page-head .cart-share-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

body[data-route="cart"] .cart-page-count {
  margin: 7px 0 14px;
  color: #7b7b85;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

body[data-route="cart"] .cart-share-loading {
  min-height: 330px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  color: #25252b;
  text-align: center;
}

body[data-route="cart"] .cart-share-loading .cart-empty-icon {
  animation: cart-share-breathe 1.1s ease-in-out infinite alternate;
}

@keyframes cart-share-breathe {
  from { transform: scale(0.96); opacity: 0.72; }
  to { transform: scale(1); opacity: 1; }
}

html[data-theme="dark"] body[data-route="cart"] .cart-page-head {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-page-head h1,
html[data-theme="dark"] body[data-route="cart"] .cart-share-loading {
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-page-head .cart-share-button {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-page-count {
  color: rgba(247, 247, 251, 0.62) !important;
}

@media (max-width: 640px) {
  body[data-route="cart"] .cart-page-head {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    min-height: 52px;
  }

  body[data-route="cart"] .cart-page-head .cart-share-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="cart"] .cart-share-loading .cart-empty-icon {
    animation: none;
  }
}

/* Premium order cards for the account order tracking flow. */
.account-orders-panel {
  padding: 10px 8px 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.12), transparent 32%),
    radial-gradient(circle at 90% 12%, rgba(205, 139, 244, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(250, 250, 253, 0.98), rgba(255, 255, 255, 1));
}

.account-order-list {
  gap: 12px;
}

.account-order-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(24, 24, 30, 0.075);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 251, 255, 0.96)),
    #fff;
  box-shadow:
    0 16px 34px rgba(26, 24, 42, 0.075),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.account-order-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
  opacity: 0.74;
}

.account-order-trigger {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 15px 14px 12px;
  background: transparent;
  text-align: right;
}

.account-order-card.is-open .account-order-trigger {
  background: linear-gradient(180deg, rgba(121, 239, 215, 0.055), rgba(205, 139, 244, 0.055));
}

.account-order-head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  direction: rtl;
}

.account-order-head > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1 1 auto;
  text-align: right;
  direction: rtl;
}

.account-order-head em,
.account-order-summary em {
  display: block;
  color: rgba(22, 22, 28, 0.44);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.2;
}

.account-order-head strong {
  display: block;
  color: #111116;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: 0;
}

.account-order-status-badge {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: none;
  border: 1px solid rgba(112, 93, 215, 0.13);
  border-radius: 999px;
  background: rgba(188, 165, 238, 0.15);
  color: #5b43c5 !important;
  padding: 6px 10px;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  direction: rtl;
}

.account-order-status-shipping .account-order-status-badge {
  background: rgba(121, 239, 215, 0.16);
  color: #168b7a !important;
}

.account-order-status-delivered .account-order-status-badge {
  background: rgba(48, 181, 124, 0.13);
  color: #188a5f !important;
}

.account-order-status-canceled .account-order-status-badge {
  background: rgba(215, 25, 63, 0.08);
  color: #d7193f !important;
}

.account-order-summary {
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  text-align: right !important;
}

.account-order-summary > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(18, 18, 24, 0.055);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 7px;
}

.account-order-summary strong {
  display: block;
  overflow: hidden;
  color: #17171d;
  font-size: 11.3px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-summary > span:last-child strong {
  color: #d7193f;
  font-size: 12px;
}

.account-order-trigger .account-order-cta {
  display: flex !important;
  flex: 0 0 auto;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: #111116;
  color: #fff;
  padding: 9px 12px;
  font-size: 11.4px;
  font-weight: 850;
  box-shadow: 0 9px 18px rgba(17, 17, 22, 0.14);
}

.account-order-timeline {
  margin: 0 12px 12px;
  padding: 14px 7px 11px;
  border-color: rgba(112, 93, 215, 0.10);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(249, 248, 255, 0.92)),
    rgba(255, 255, 255, 0.9);
}

.account-order-timeline::before,
.account-order-timeline-fill {
  top: 29px;
  inset-inline: 25px;
}

.account-order-timeline-fill {
  right: 25px;
}

.account-timeline-dot {
  width: 31px;
  height: 31px;
  background: rgba(255, 255, 255, 0.96);
}

.account-timeline-step strong {
  font-size: 10px;
  font-weight: 800;
}

.account-order-terminal {
  margin: 0 12px 12px;
  min-height: 38px;
  border-radius: 13px;
  justify-content: center;
}

.account-order-cancel {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  border-radius: 12px;
}

.account-order-details {
  margin: -2px 8px 12px;
  padding: 9px;
  border: 1px solid rgba(18, 18, 24, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(26, 24, 42, 0.055);
}

.account-order-details-head {
  padding: 0 2px 2px;
}

.account-order-item {
  min-height: 62px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #fbfbfd);
}

.account-order-item img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}

@media (max-width: 380px) {
  .account-order-trigger {
    padding-inline: 11px;
  }

  .account-order-head strong {
    font-size: 16px;
  }

  .account-order-summary {
    gap: 5px;
  }

  .account-order-summary > span {
    padding-inline: 5px;
  }

  .account-order-summary strong {
    font-size: 10.5px;
  }
}

/* iOS WhatsApp-style bottom tabs: equal, calm, and fast. */
@media (max-width: 640px) {
  .toast {
    left: 50% !important;
    right: auto !important;
    inset-inline: auto !important;
    inset-block-end: calc(96px + env(safe-area-inset-bottom)) !important;
    z-index: 120 !important;
    width: min(calc(100vw - 28px), 320px) !important;
    max-width: min(calc(100vw - 28px), 320px) !important;
    border: 1px solid rgba(188, 165, 238, 0.18) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 245, 255, 0.82)),
      rgba(255, 255, 255, 0.86) !important;
    color: #111116 !important;
    padding: 12px 15px !important;
    text-align: center !important;
    box-shadow:
      0 16px 34px rgba(31, 25, 58, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.44) inset !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    transform: translateX(-50%) !important;
  }

  body[data-route="product"] .detail-sticky-cart {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }

  body[data-route="product"] .detail-screen {
    padding-bottom: calc(156px + env(safe-area-inset-bottom)) !important;
  }
}

/* Suite 85: final mobile cart control sizing and product-card containment. */
@media (max-width: 640px) {
  body:not([data-route="search"]) .product-grid:not(.search-product-list),
  body:not([data-route="search"]) .rail {
    gap: 10px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card,
  body:not([data-route="search"]) .rail .product-card {
    min-width: 0;
    overflow: hidden !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
  body:not([data-route="search"]) .rail .product-body {
    gap: 4px !important;
    padding: 8px 8px 6px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body > *,
  body:not([data-route="search"]) .rail .product-body > *,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions > *,
  body:not([data-route="search"]) .rail .product-actions > * {
    min-width: 0;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .brand-name,
  body:not([data-route="search"]) .rail .brand-name {
    font-size: 8.9px !important;
    line-height: 1.22 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-name,
  body:not([data-route="search"]) .rail .product-name {
    min-height: 28px !important;
    font-size: 10.2px !important;
    line-height: 1.32 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .rating-row,
  body:not([data-route="search"]) .rail .rating-row {
    min-height: 17px;
    gap: 5px;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .price,
  body:not([data-route="search"]) .rail .price {
    font-size: 13.2px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .stock,
  body:not([data-route="search"]) .rail .stock,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .old-price,
  body:not([data-route="search"]) .rail .old-price {
    font-size: 8.5px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
  body:not([data-route="search"]) .rail .product-actions {
    min-height: 44px;
    display: flex;
    align-items: stretch;
    padding: 0 8px 8px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button,
  body:not([data-route="search"]) .rail .add-button,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-control,
  body:not([data-route="search"]) .rail .cart-control {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    border-radius: 9px;
    box-sizing: border-box;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button,
  body:not([data-route="search"]) .rail .add-button {
    justify-content: center;
    gap: 5px;
    padding: 6px 8px !important;
    font-size: 9.1px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-control,
  body:not([data-route="search"]) .rail .cart-control {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: normal;
    gap: 5px !important;
    padding: 4px 6px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-added-label,
  body:not([data-route="search"]) .rail .cart-added-label {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    color: #fff !important;
    font-size: 8.4px !important;
    font-weight: 700;
    line-height: 1.18 !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-flashing,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-flashing {
    min-height: 36px;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-flashing .cart-added-label,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-flashing .cart-added-label {
    font-size: 8.7px !important;
    white-space: normal;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-control.is-flash-only,
  body:not([data-route="search"]) .rail .cart-control.is-flash-only {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    padding: 5px 8px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-stepper,
  body:not([data-route="search"]) .rail .cart-stepper {
    position: static;
    transform: none;
    min-width: 58px;
    gap: 3px;
    justify-self: end;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-count-button,
  body:not([data-route="search"]) .rail .cart-count-button {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    font-size: 10px;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .cart-control strong,
  body:not([data-route="search"]) .rail .cart-control strong {
    min-width: 12px;
    font-size: 9.8px;
  }

  body[data-route="cart"] .page,
  body[data-route="account"] .page {
    padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important;
  }

  body[data-route="cart"] .footer,
  body[data-route="account"] .footer {
    padding-bottom: calc(124px + env(safe-area-inset-bottom)) !important;
  }
}

/* Home hero category icons: show dashboard PNG artwork only, with no frame or background. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-track {
    grid-auto-columns: 78px !important;
    gap: 11px 9px !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 78px !important;
    gap: 6px !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 66px !important;
    height: 66px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    width: 78px !important;
    max-width: 78px !important;
  }
}

/* Home headings: clean text-only titles, no decorative stars beside section labels. */
body[data-route="home"] .section-head h2 .nion-icon {
  display: none !important;
}

body[data-route="home"] .editorial-promos .section-head h2 {
  display: block !important;
  color: #101014 !important;
  font-size: clamp(24px, 5.8vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .editorial-promos .section-head {
    margin-bottom: 13px !important;
    padding-inline: 1px !important;
  }

  body[data-route="home"] .editorial-promos .section-head h2 {
    font-size: 22px !important;
  }
}

/* Fast94 polish: hero fade, category sibling rail, and cleaner liquid-glass dock. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-main::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    z-index: 3 !important;
    display: block !important;
    height: 34% !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0.76) 76%, #fff 100%),
      linear-gradient(90deg, rgba(121, 239, 215, 0.1), rgba(188, 165, 238, 0.08), rgba(223, 176, 238, 0.1)) !important;
  }

  body[data-route="home"] .hero-slides {
    z-index: 1 !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 4 !important;
    inset-block-end: 16px !important;
  }

  .category-sibling-strip {
    width: 100%;
    margin: -2px 0 12px;
    overflow: hidden;
  }

  .category-sibling-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 2px 8px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .category-sibling-track::-webkit-scrollbar {
    display: none;
  }

  .category-sibling-track a {
    min-width: 78px;
    max-width: 88px;
    min-height: 74px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    scroll-snap-align: start;
    border: 1px solid rgba(18, 18, 24, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(20, 20, 27, 0.72);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.045);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
  }

  .category-sibling-track a.active {
    border-color: rgba(188, 165, 238, 0.38);
    background:
      linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.62)) padding-box,
      var(--brand-gradient) border-box;
    color: #6f53d9;
    box-shadow: 0 10px 22px rgba(126, 99, 220, 0.12);
  }

  .category-sibling-track img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    padding: 0;
    background: transparent;
  }

  .category-sibling-track span {
    width: 100%;
    overflow: hidden;
    font-size: 10.2px;
    font-weight: 760;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Fast94 final tune: cleaner mobile hero blend, base-category rail, and stronger liquid dock glass. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-main {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body[data-route="home"] .hero-main::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: -1px !important;
    inset-block-start: auto !important;
    inset-block-end: -1px !important;
    z-index: 5 !important;
    display: block !important;
    height: 38% !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 24%, rgba(255, 255, 255, 0.62) 73%, #fff 100%),
      radial-gradient(120% 72% at 52% 100%, rgba(121, 239, 215, 0.11), rgba(188, 165, 238, 0.08) 48%, rgba(255, 255, 255, 0) 72%) !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 6 !important;
  }

  .category-sibling-strip {
    position: sticky;
    top: 0;
    z-index: 18;
    width: calc(100% + 8px);
    margin: -4px -4px 13px;
    padding: 2px 4px 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 72%, rgba(255, 255, 255, 0));
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
  }

  .category-sibling-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 9px;
    scroll-padding-inline: 4px;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .category-sibling-track::-webkit-scrollbar {
    display: none;
  }

  .category-sibling-track a {
    position: relative;
    isolation: isolate;
    flex: 0 0 74px;
    width: 74px;
    min-width: 74px;
    min-height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    scroll-snap-align: start;
    border: 1px solid rgba(20, 20, 28, 0.055);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    color: rgba(17, 17, 22, 0.64);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 17, 24, 0.045);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }

  .category-sibling-track a.active {
    border-color: rgba(151, 126, 231, 0.34);
    color: #6f53d9;
    box-shadow: 0 11px 24px rgba(111, 83, 217, 0.13);
    transform: translateY(-1px);
  }

  .category-sibling-track a.active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
      linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)) padding-box,
      var(--brand-gradient) border-box;
  }

  .category-sibling-track img {
    width: 35px !important;
    height: 35px !important;
    object-fit: contain !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .category-sibling-track span {
    width: 100%;
    max-width: 66px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 720;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Fast95 account orders: clearer dashboard-synced order cards and timeline. */
@media (max-width: 640px) {
  body[data-route="account"] .account-orders-panel {
    padding: 12px 8px 16px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(121, 239, 215, 0.12), transparent 34%),
      radial-gradient(circle at 92% 0%, rgba(188, 165, 238, 0.12), transparent 36%),
      linear-gradient(180deg, rgba(251, 251, 254, 0.96), rgba(255, 255, 255, 1)) !important;
  }

  body[data-route="account"] .account-order-list {
    display: grid !important;
    gap: 13px !important;
  }

  body[data-route="account"] .account-order-card {
    overflow: hidden !important;
    border: 1px solid rgba(20, 20, 28, 0.065) !important;
    border-radius: 19px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 250, 255, 0.97)),
      #fff !important;
    box-shadow:
      0 16px 36px rgba(20, 19, 34, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  body[data-route="account"] .account-order-card::before {
    height: 4px !important;
    opacity: 0.88 !important;
  }

  body[data-route="account"] .account-order-trigger {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
    padding: 16px 14px 12px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-route="account"] .account-order-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
  }

  body[data-route="account"] .account-order-head > span {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  body[data-route="account"] .account-order-head em,
  body[data-route="account"] .account-order-summary em {
    color: rgba(19, 19, 24, 0.45) !important;
    font-size: 10.2px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  body[data-route="account"] .account-order-head strong {
    color: #101014 !important;
    font-size: 16.5px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    white-space: normal !important;
  }

  body[data-route="account"] .account-order-head small {
    display: block !important;
    color: rgba(19, 19, 24, 0.58) !important;
    font-size: 10.8px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  body[data-route="account"] .account-order-status-badge {
    align-self: start !important;
    min-height: 30px !important;
    max-width: 116px !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(111, 83, 217, 0.12) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(188, 165, 238, 0.18) !important;
    color: #6f53d9 !important;
    font-size: 10.4px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
  }

  body[data-route="account"] .account-order-status-preparing .account-order-status-badge {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(188, 165, 238, 0.2) !important;
    color: #6f53d9 !important;
  }

  body[data-route="account"] .account-order-status-shipping .account-order-status-badge {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
      rgba(121, 239, 215, 0.2) !important;
    color: #168b7a !important;
  }

  body[data-route="account"] .account-order-status-delivered .account-order-status-badge {
    background: rgba(48, 181, 124, 0.12) !important;
    color: #188a5f !important;
  }

  body[data-route="account"] .account-order-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-route="account"] .account-order-summary > span {
    min-width: 0 !important;
    min-height: 58px !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 9px 7px !important;
    border: 1px solid rgba(17, 17, 24, 0.055) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    text-align: right !important;
  }

  body[data-route="account"] .account-order-summary strong {
    color: #16161c !important;
    font-size: 11.2px !important;
    font-weight: 880 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
  }

  body[data-route="account"] .account-order-summary > span:last-child strong {
    color: #d7193f !important;
    font-size: 12px !important;
  }

  body[data-route="account"] .account-order-cta {
    min-height: 38px !important;
    border-radius: 13px !important;
    background: #101014 !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 880 !important;
    letter-spacing: 0 !important;
  }

  body[data-route="account"] .account-order-progress {
    margin: 0 12px 12px !important;
    padding: 12px 10px 10px !important;
    border: 1px solid rgba(111, 83, 217, 0.09) !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 8% 6%, rgba(121, 239, 215, 0.1), transparent 30%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 248, 255, 0.94)) !important;
  }

  body[data-route="account"] .account-order-progress-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  body[data-route="account"] .account-order-progress-head span {
    color: rgba(18, 18, 24, 0.52) !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
  }

  body[data-route="account"] .account-order-progress-head strong {
    color: #101014 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }

  body[data-route="account"] .account-order-timeline {
    margin: 0 !important;
    padding: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="account"] .account-order-timeline::before,
  body[data-route="account"] .account-order-timeline-fill {
    top: 22px !important;
    inset-inline: 31px !important;
    height: 2px !important;
  }

  body[data-route="account"] .account-order-timeline-fill {
    right: 31px !important;
    background: linear-gradient(90deg, #79efd7, #bca5ee, #dfb0ee) !important;
    box-shadow: 0 0 16px rgba(188, 165, 238, 0.24) !important;
  }

  body[data-route="account"] .account-timeline-step {
    gap: 5px !important;
    min-width: 0 !important;
  }

  body[data-route="account"] .account-timeline-dot {
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border-color: rgba(20, 20, 28, 0.075) !important;
    box-shadow: 0 5px 12px rgba(20, 20, 28, 0.06) !important;
  }

  body[data-route="account"] .account-timeline-step strong {
    width: 100% !important;
    max-width: 68px !important;
    min-height: 25px !important;
    color: currentColor !important;
    font-size: 9.4px !important;
    font-weight: 820 !important;
    line-height: 1.22 !important;
  }

  body[data-route="account"] .account-timeline-step small {
    width: 100% !important;
    max-width: 62px !important;
    overflow: hidden !important;
    color: currentColor !important;
    font-size: 8.2px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    opacity: 0.62 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-route="account"] .account-timeline-step.is-active strong,
  body[data-route="account"] .account-timeline-step.is-active small {
    color: #101014 !important;
    opacity: 1 !important;
  }

  body[data-route="account"] .account-order-details {
    margin: -2px 10px 13px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body[data-route="account"] .account-order-cancel {
    min-height: 38px !important;
    margin: 0 12px 12px !important;
    border-radius: 13px !important;
  }
}

/* Fast96 account cleanup: no overlap in order card header and only core social icons. */
@media (max-width: 640px) {
  body[data-route="account"] .account-order-trigger {
    gap: 10px !important;
    padding: 16px 14px 13px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  body[data-route="account"] .account-order-head,
  body[data-route="account"] .account-order-note,
  body[data-route="account"] .account-order-summary,
  body[data-route="account"] .account-order-cta {
    grid-column: 1 / -1 !important;
  }

  body[data-route="account"] .account-order-head {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    direction: rtl !important;
  }

  body[data-route="account"] .account-order-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    text-align: right !important;
  }

  body[data-route="account"] .account-order-title em {
    color: rgba(18, 18, 24, 0.46) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  body[data-route="account"] .account-order-title strong {
    display: block !important;
    color: #101014 !important;
    font-size: 20px !important;
    font-weight: 920 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body[data-route="account"] .account-order-status-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 28px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
  }

  body[data-route="account"] .account-order-note {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: -3px 0 0 !important;
    color: rgba(18, 18, 24, 0.58) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-align: right !important;
  }

  body[data-route="account"] .account-order-summary {
    margin-top: 2px !important;
  }

  body[data-route="account"] .account-order-summary > span {
    min-height: 62px !important;
    padding: 9px 8px !important;
  }

  body[data-route="account"] .account-order-summary strong {
    font-size: 11.4px !important;
    line-height: 1.25 !important;
  }

  body[data-route="account"] .account-order-progress {
    margin-top: 1px !important;
  }

  body[data-route="account"] .social-follow {
    margin-top: 18px !important;
  }

  body[data-route="account"] .social-follow nav {
    max-width: 230px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, 42px) !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  body[data-route="account"] .social-follow nav a {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Fast99 account order flow: three stages only and real social brand icons. */
@media (max-width: 640px) {
  body[data-route="account"] .account-order-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-route="account"] .account-order-timeline::before,
  body[data-route="account"] .account-order-timeline-fill {
    inset-inline: 43px !important;
  }

  body[data-route="account"] .account-order-timeline-fill {
    right: 43px !important;
  }

  body[data-route="account"] .account-timeline-step strong {
    max-width: 86px !important;
    font-size: 10px !important;
  }

  body[data-route="account"] .account-timeline-step small {
    max-width: 76px !important;
  }

  body[data-route="account"] .nion-brand-icon {
    stroke-width: 1.55 !important;
  }

  body[data-route="account"] .nion-brand-icon-facebook,
  body[data-route="account"] .nion-brand-icon-tiktok {
    stroke: none !important;
    fill: currentColor !important;
  }
}

/* Fast100 order timeline: active stage moves clearly with the dashboard status. */
body[data-route="account"] .account-order-progress {
  position: relative !important;
  overflow: hidden !important;
}

body[data-route="account"] .account-order-status-preparing .account-order-progress,
body[data-route="account"] .account-order-status-shipping .account-order-progress {
  border-color: rgba(188, 165, 238, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 11px 28px rgba(111, 83, 217, 0.08) !important;
}

body[data-route="account"] .account-order-status-preparing .account-order-status-badge,
body[data-route="account"] .account-order-status-shipping .account-order-status-badge,
body[data-route="account"] .account-order-status-delivered .account-order-status-badge {
  border-color: transparent !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 45%, #dfb0ee 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(17, 17, 22, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(188, 165, 238, 0.2) !important;
}

body[data-route="account"] .account-order-progress-head strong {
  display: inline-flex !important;
  min-height: 25px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 46%, #dfb0ee 100%) !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-size: 11.2px !important;
  text-shadow: 0 1px 6px rgba(17, 17, 22, 0.16) !important;
}

body[data-route="account"] .account-order-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-route="account"] .account-order-timeline::before {
  background:
    linear-gradient(90deg, rgba(18, 18, 24, 0.08), rgba(18, 18, 24, 0.045)) !important;
}

body[data-route="account"] .account-order-timeline-fill {
  background: linear-gradient(90deg, #79efd7 0%, #a9c4f5 48%, #dfb0ee 100%) !important;
  background-size: 220% 100% !important;
  box-shadow:
    0 0 12px rgba(121, 239, 215, 0.22),
    0 0 18px rgba(188, 165, 238, 0.28) !important;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation: orderTimelineFlow 2.8s linear infinite !important;
}

body[data-route="account"] .account-timeline-step {
  transition:
    color 260ms ease,
    transform 260ms ease,
    opacity 260ms ease !important;
}

body[data-route="account"] .account-timeline-step.is-pending {
  color: rgba(16, 16, 20, 0.42) !important;
}

body[data-route="account"] .account-timeline-step.is-done {
  color: #33a693 !important;
}

body[data-route="account"] .account-timeline-step.is-active {
  color: #101014 !important;
  transform: translateY(-1px) !important;
}

body[data-route="account"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: rgba(121, 239, 215, 0.32) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.88), rgba(188, 165, 238, 0.72)) border-box !important;
  color: #29a28f !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 6px 14px rgba(121, 239, 215, 0.16) !important;
}

body[data-route="account"] .account-timeline-step.is-active .account-timeline-dot {
  position: relative !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 44%, #dfb0ee 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 22px rgba(111, 83, 217, 0.18),
    0 0 0 6px rgba(188, 165, 238, 0.13) !important;
}

body[data-route="account"] .account-timeline-step.is-active .account-timeline-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border: 1px solid rgba(188, 165, 238, 0.45) !important;
  border-radius: inherit !important;
  opacity: 0.78 !important;
  animation: orderStagePulse 1.85s ease-out infinite !important;
}

body[data-route="account"] .account-timeline-step.is-active strong {
  color: #101014 !important;
}

body[data-route="account"] .account-timeline-step.is-done small,
body[data-route="account"] .account-timeline-step.is-active small {
  opacity: 0.86 !important;
}

@keyframes orderTimelineFlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

@keyframes orderStagePulse {
  0% {
    transform: scale(0.82);
    opacity: 0.72;
  }

  78%,
  100% {
    transform: scale(1.34);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="account"] .account-order-timeline-fill,
  body[data-route="account"] .account-timeline-step.is-active .account-timeline-dot::after {
    animation: none !important;
  }
}

/* Fast102 dedicated orders page with segmented order states. */
.orders-screen {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 10px 12px 112px;
  direction: rtl;
}

.orders-page-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.orders-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 18, 24, 0.065);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 249, 255, 0.74)),
    rgba(255, 255, 255, 0.82);
  color: #111116;
  box-shadow:
    0 10px 24px rgba(18, 18, 24, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.orders-page-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: right;
}

.orders-page-head span {
  color: rgba(18, 18, 24, 0.48);
  font-size: 11px;
  font-weight: 800;
}

.orders-page-head strong {
  color: #101014;
  font-size: 21px;
  font-weight: 920;
  line-height: 1.12;
}

.orders-status-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 -2px 14px;
  padding: 8px 2px 10px;
  overflow: visible;
  scrollbar-width: none;
  background:
    linear-gradient(180deg, rgba(250, 250, 253, 0.96), rgba(250, 250, 253, 0.78) 70%, rgba(250, 250, 253, 0));
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.orders-status-tabs::-webkit-scrollbar {
  display: none;
}

.orders-status-tabs a,
.orders-status-tabs > span {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(18, 18, 24, 0.06);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(251, 250, 255, 0.72)),
    rgba(255, 255, 255, 0.78);
  color: rgba(18, 18, 24, 0.62);
  padding: 8px 4px 7px;
  text-decoration: none;
  box-shadow:
    0 8px 18px rgba(18, 18, 24, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.orders-status-tabs a span,
.orders-status-tabs > span {
  min-width: 0;
  color: inherit;
  font-size: 9.4px;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
}

.orders-status-tabs a b {
  position: absolute;
  top: 5px;
  inset-inline-start: 6px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(18, 18, 24, 0.055);
  color: currentColor;
  font-size: 9px;
  font-weight: 900;
}

.orders-status-tabs a.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 46%, #dfb0ee 100%);
  color: #fff;
  box-shadow:
    0 12px 24px rgba(111, 83, 217, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.orders-status-tabs a.is-active b {
  background: rgba(255, 255, 255, 0.26);
}

.orders-status-tabs.is-loading span {
  grid-template-columns: minmax(0, 1fr);
  color: rgba(18, 18, 24, 0.38);
}

.orders-list {
  display: grid;
  gap: 13px;
}

.orders-card-skeleton {
  min-height: 214px;
  border: 1px solid rgba(18, 18, 24, 0.06);
  border-radius: 19px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(245, 244, 251, 0.94), rgba(255, 255, 255, 0.72));
  background-size: 220% 100%;
  box-shadow: 0 14px 32px rgba(18, 18, 24, 0.055);
  animation: ordersSkeleton 1.2s ease-in-out infinite;
}

.orders-empty {
  min-height: 320px;
}

body[data-route="orders"] .account-order-list {
  display: grid !important;
  gap: 13px !important;
}

body[data-route="orders"] .account-order-card {
  overflow: hidden !important;
  border: 1px solid rgba(20, 20, 28, 0.065) !important;
  border-radius: 19px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 250, 255, 0.97)),
    #fff !important;
  box-shadow:
    0 16px 36px rgba(20, 19, 34, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-route="orders"] .account-order-card::before {
  height: 4px !important;
  opacity: 0.88 !important;
}

body[data-route="orders"] .account-order-card.is-live-updated {
  animation: orderLiveUpdate 760ms ease both !important;
}

body[data-route="orders"] .account-order-trigger {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 16px 14px 13px !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-route="orders"] .account-order-head,
body[data-route="orders"] .account-order-note,
body[data-route="orders"] .account-order-summary,
body[data-route="orders"] .account-order-cta {
  grid-column: 1 / -1 !important;
}

body[data-route="orders"] .account-order-head {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  direction: rtl !important;
}

body[data-route="orders"] .account-order-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  text-align: right !important;
}

body[data-route="orders"] .account-order-title em,
body[data-route="orders"] .account-order-summary em {
  color: rgba(18, 18, 24, 0.46) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

body[data-route="orders"] .account-order-title strong {
  display: block !important;
  color: #101014 !important;
  font-size: 20px !important;
  font-weight: 920 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

body[data-route="orders"] .account-order-note {
  display: block !important;
  width: 100% !important;
  margin: -3px 0 0 !important;
  color: rgba(18, 18, 24, 0.58) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
  text-align: right !important;
}

body[data-route="orders"] .account-order-status-badge,
body[data-route="orders"] .account-order-status-preparing .account-order-status-badge,
body[data-route="orders"] .account-order-status-shipping .account-order-status-badge,
body[data-route="orders"] .account-order-status-delivered .account-order-status-badge {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 28px !important;
  max-width: none !important;
  align-self: start !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 45%, #dfb0ee 100%) !important;
  color: #fff !important;
  padding: 7px 10px !important;
  font-size: 10.4px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(188, 165, 238, 0.2) !important;
}

body[data-route="orders"] .account-order-title bdi {
  unicode-bidi: isolate;
}

body[data-route="orders"] .account-order-status-canceled .account-order-status-badge {
  background: rgba(215, 25, 63, 0.08) !important;
  color: #d7193f !important;
}

body[data-route="orders"] .account-order-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 2px !important;
}

body[data-route="orders"] .account-order-summary > span {
  min-width: 0 !important;
  min-height: 62px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 9px 8px !important;
  border: 1px solid rgba(17, 17, 24, 0.055) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  text-align: right !important;
}

body[data-route="orders"] .account-order-summary strong {
  color: #16161c !important;
  font-size: 11.4px !important;
  font-weight: 880 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body[data-route="orders"] .account-order-summary > span:last-child strong {
  color: #d7193f !important;
  font-size: 12px !important;
}

body[data-route="orders"] .account-order-cta {
  width: 100% !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  background: #101014 !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  font-weight: 880 !important;
}

body[data-route="orders"] .account-order-progress {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 12px 12px !important;
  padding: 12px 10px 10px !important;
  border: 1px solid rgba(188, 165, 238, 0.22) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(121, 239, 215, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(249, 248, 255, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 11px 28px rgba(111, 83, 217, 0.08) !important;
}

body[data-route="orders"] .account-order-progress-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

body[data-route="orders"] .account-order-progress-head span {
  color: rgba(18, 18, 24, 0.52) !important;
  font-size: 10.5px !important;
  font-weight: 780 !important;
}

body[data-route="orders"] .account-order-progress-head strong {
  min-height: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 46%, #dfb0ee 100%) !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-size: 11.2px !important;
  font-weight: 900 !important;
}

body[data-route="orders"] .account-order-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-timeline::before,
body[data-route="orders"] .account-order-timeline-fill {
  top: 22px !important;
  inset-inline: 43px !important;
  height: 2px !important;
}

body[data-route="orders"] .account-order-timeline-fill {
  right: 43px !important;
  background: linear-gradient(90deg, #79efd7 0%, #a9c4f5 48%, #dfb0ee 100%) !important;
  background-size: 220% 100% !important;
  box-shadow:
    0 0 12px rgba(121, 239, 215, 0.22),
    0 0 18px rgba(188, 165, 238, 0.28) !important;
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  animation: orderTimelineFlow 2.8s linear infinite !important;
}

body[data-route="orders"] .account-timeline-step {
  gap: 5px !important;
  min-width: 0 !important;
}

body[data-route="orders"] .account-timeline-dot {
  width: 32px !important;
  height: 32px !important;
}

body[data-route="orders"] .account-timeline-step strong {
  width: 100% !important;
  max-width: 86px !important;
  min-height: 25px !important;
  color: currentColor !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  line-height: 1.22 !important;
}

body[data-route="orders"] .account-timeline-step small {
  width: 100% !important;
  max-width: 76px !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 8.2px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  opacity: 0.72 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: rgba(121, 239, 215, 0.32) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.88), rgba(188, 165, 238, 0.72)) border-box !important;
  color: #29a28f !important;
}

body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot {
  position: relative !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 44%, #dfb0ee 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 22px rgba(111, 83, 217, 0.18),
    0 0 0 6px rgba(188, 165, 238, 0.13) !important;
}

body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border: 1px solid rgba(188, 165, 238, 0.45) !important;
  border-radius: inherit !important;
  animation: orderStagePulse 1.85s ease-out infinite !important;
}

body[data-route="orders"] .account-order-details {
  margin: -2px 10px 13px !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

body[data-route="orders"] .account-order-cancel {
  min-height: 38px !important;
  margin: 0 12px 12px !important;
  border-radius: 13px !important;
}

.account-order-cancel.is-confirming {
  border-color: rgba(215, 25, 63, 0.26) !important;
  background: rgba(215, 25, 63, 0.1) !important;
  color: #d7193f !important;
}

.account-order-cancel.is-canceling {
  cursor: wait !important;
  opacity: 0.78 !important;
}

.account-order-cancel.is-canceling .nion-icon {
  animation: nion-spin 0.9s linear infinite;
}

@keyframes ordersSkeleton {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

@keyframes orderLiveUpdate {
  0% {
    transform: translateY(0);
    box-shadow:
      0 16px 36px rgba(20, 19, 34, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  42% {
    transform: translateY(-1px);
    box-shadow:
      0 18px 38px rgba(111, 83, 217, 0.12),
      0 0 0 3px rgba(188, 165, 238, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  100% {
    transform: translateY(0);
    box-shadow:
      0 16px 36px rgba(20, 19, 34, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
}

@media (max-width: 380px) {
  .orders-screen {
    padding-inline: 9px;
  }

  .orders-status-tabs {
    gap: 5px;
  }

  .orders-status-tabs a {
    min-height: 56px;
    padding-inline: 3px;
  }

  .orders-status-tabs a span {
    font-size: 8.8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orders-card-skeleton,
  body[data-route="orders"] .account-order-timeline-fill,
  body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot::after,
  body[data-route="orders"] .account-order-card.is-live-updated {
    animation: none !important;
  }
}

/* Fast106 compact orders: summary row first, full details only on expand. */
body[data-route="orders"] .account-order-compact {
  border-radius: 17px !important;
}

body[data-route="orders"] .account-order-compact:not(.is-open) {
  box-shadow:
    0 10px 24px rgba(20, 19, 34, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-route="orders"] .account-order-compact .account-order-toggle {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
}

body[data-route="orders"] .account-order-compact.is-open .account-order-toggle {
  background:
    radial-gradient(circle at 12% 20%, rgba(121, 239, 215, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 249, 255, 0.68)) !important;
}

body[data-route="orders"] .account-order-compact .account-order-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 28px !important;
  align-items: center !important;
  gap: 9px !important;
}

body[data-route="orders"] .account-order-compact .account-order-title {
  gap: 2px !important;
}

body[data-route="orders"] .account-order-compact .account-order-title em {
  font-size: 9.6px !important;
}

body[data-route="orders"] .account-order-compact .account-order-title strong {
  font-size: 17.5px !important;
}

body[data-route="orders"] .account-order-compact .account-order-status-badge {
  min-height: 30px !important;
  padding: 7px 11px !important;
}

body[data-route="orders"] .account-order-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(18, 18, 24, 0.04);
  color: rgba(18, 18, 24, 0.55);
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

body[data-route="orders"] .account-order-compact.is-open .account-order-chevron {
  transform: rotate(-90deg);
  background: rgba(188, 165, 238, 0.16);
  color: #6f53d9;
}

body[data-route="orders"] .account-order-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 13px;
}

body[data-route="orders"] .account-order-body[hidden] {
  display: none !important;
}

body[data-route="orders"] .account-order-body .account-order-note {
  margin: 0 !important;
}

body[data-route="orders"] .account-order-body .account-order-summary {
  margin-top: 0 !important;
}

body[data-route="orders"] .account-order-body .account-order-progress {
  margin: 0 !important;
}

body[data-route="orders"] .account-order-body .account-order-cta {
  margin-top: 0 !important;
}

body[data-route="orders"] .account-order-review {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #79efd7, #a9c4f5 48%, #dfb0ee) border-box;
  color: #6f53d9;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 900;
  box-shadow:
    0 10px 22px rgba(111, 83, 217, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body[data-route="orders"] .account-order-review .nion-icon {
  width: 16px !important;
  height: 16px !important;
  color: #b27ced !important;
  fill: rgba(223, 176, 238, 0.28) !important;
  stroke-width: 1.7 !important;
}

body[data-route="orders"] .account-order-review:active,
body[data-route="orders"] .account-order-card.is-review-ready .account-order-review {
  background: linear-gradient(135deg, #79efd7 0%, #a9c4f5 46%, #dfb0ee 100%);
  color: #fff;
  transform: translateY(1px);
}

body[data-route="orders"] .account-order-review:active .nion-icon,
body[data-route="orders"] .account-order-card.is-review-ready .account-order-review .nion-icon {
  color: #fff !important;
  fill: rgba(255, 255, 255, 0.24) !important;
}

body[data-route="orders"] .account-order-items-slot:empty {
  display: none;
}

body[data-route="orders"] .account-order-items-slot .account-order-details {
  margin: 0 !important;
}

.collection-loading-title {
  margin-bottom: 12px;
}

.collection-loading-panel {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid rgba(18, 18, 24, 0.055);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 18%, rgba(121, 239, 215, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 247, 255, 0.92));
  box-shadow:
    0 14px 34px rgba(18, 18, 24, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.collection-loading-panel span,
.collection-loading-panel strong {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(237, 238, 247, 0.78), rgba(255, 255, 255, 0.96), rgba(237, 238, 247, 0.78));
  background-size: 220% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}

.collection-loading-panel span {
  width: min(46%, 170px);
  height: 13px;
}

.collection-loading-panel strong {
  width: min(68%, 260px);
  height: 22px;
}

.collection-loading-grid {
  margin-top: 0 !important;
}

.toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  z-index: 999 !important;
  width: max-content !important;
  max-width: min(340px, calc(100vw - 30px)) !important;
  min-width: min(220px, calc(100vw - 42px)) !important;
  border: 1px solid rgba(188, 165, 238, 0.2) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 246, 255, 0.84)),
    rgba(255, 255, 255, 0.82) !important;
  color: #111116 !important;
  padding: 12px 16px !important;
  text-align: center !important;
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
  box-shadow:
    0 18px 42px rgba(31, 25, 58, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.58) inset !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

.toast:not([hidden]) {
  animation: toast-pop-center 0.2s ease both;
}

@keyframes toast-pop-center {
  from {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.account-order-review-slot[hidden],
.account-order-review-slot:empty {
  display: none !important;
}

.order-review-panel {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  border: 1px solid rgba(121, 239, 215, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(251, 250, 255, 0.93)),
    rgba(255, 255, 255, 0.92);
  padding: 12px;
  box-shadow:
    0 14px 34px rgba(32, 27, 57, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.order-review-panel-loading,
.order-review-success {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.order-review-panel-loading strong,
.order-review-success strong {
  font-size: 12.5px;
  font-weight: 900;
  color: #15151a;
}

.order-review-success > span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #79efd7, #a9c4f5 48%, #dfb0ee);
  color: #fff;
}

.order-review-success em {
  display: block;
  margin-top: 3px;
  color: rgba(21, 21, 26, 0.58);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

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

.order-review-head > span {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.25), rgba(223, 176, 238, 0.34));
  color: #6f53d9;
}

.order-review-head strong {
  display: block;
  color: #15151a;
  font-size: 13.5px;
  font-weight: 950;
}

.order-review-head em {
  display: block;
  margin-top: 2px;
  color: rgba(21, 21, 26, 0.56);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.55;
}

.order-review-products {
  display: grid;
  gap: 9px;
}

.order-review-product {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(18, 18, 24, 0.055);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  padding: 9px;
}

.order-review-product img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 13px;
  background: linear-gradient(180deg, #fff, #f7f7fb);
}

.order-review-product-body {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.order-review-product-body strong {
  color: rgba(21, 21, 26, 0.46);
  font-size: 10.5px;
  font-weight: 850;
}

.order-review-product-body em {
  color: #15151a;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.order-review-stars {
  direction: ltr;
  display: inline-flex;
  justify-content: flex-end;
  gap: 2px;
  width: fit-content;
}

.order-review-stars button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: rgba(247, 247, 251, 0.88);
  color: rgba(21, 21, 26, 0.22);
  padding: 0;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.order-review-stars button.is-active {
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.22), rgba(223, 176, 238, 0.34));
  color: #a66ee8;
}

.order-review-stars button.is-active .nion-icon {
  fill: currentColor;
}

.order-review-stars button:active {
  transform: scale(0.94);
}

.order-review-general {
  display: grid;
  gap: 7px;
}

.order-review-general span {
  color: #15151a;
  font-size: 11.5px;
  font-weight: 900;
}

.order-review-product textarea,
.order-review-general textarea {
  width: 100%;
  min-height: 42px;
  resize: vertical;
  border: 1px solid rgba(18, 18, 24, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  color: #15151a;
  padding: 10px 11px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.55;
  outline: none;
}

.order-review-product textarea:focus,
.order-review-general textarea:focus {
  border-color: rgba(166, 110, 232, 0.42);
  box-shadow: 0 0 0 3px rgba(188, 165, 238, 0.13);
}

.order-review-submit {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 15px;
  background: #111116;
  color: #fff;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(17, 17, 22, 0.16);
}

.order-review-submit .nion-icon {
  color: #9df1df;
}

.order-review-submit:disabled {
  opacity: 0.72;
}

.order-review-empty {
  border-radius: 14px;
  background: rgba(247, 247, 251, 0.8);
  color: rgba(21, 21, 26, 0.56);
  padding: 12px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 850;
}

.mini-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(166, 110, 232, 0.16);
  border-top-color: #a66ee8;
  border-radius: 50%;
  animation: mini-spin 0.8s linear infinite;
}

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

.site-header > .category-nav {
  display: none !important;
}

.offers-page-head {
  width: min(100% - 32px, 1040px);
  margin: 10px auto 14px;
  border: 1px solid rgba(188, 165, 238, 0.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 10%, rgba(121, 239, 215, 0.24), transparent 34%),
    radial-gradient(circle at 82% 4%, rgba(223, 176, 238, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 248, 255, 0.9));
  padding: 16px;
  box-shadow:
    0 16px 36px rgba(31, 25, 58, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.offers-page-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7a5de3;
  font-size: 12px;
  font-weight: 950;
}

.offers-page-head h1 {
  margin: 8px 0 5px;
  color: #111116;
  font-size: clamp(22px, 4vw, 36px);
  line-height: 1.18;
  font-weight: 950;
}

.offers-page-head p {
  margin: 0;
  color: rgba(21, 21, 26, 0.58);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
}

.offers-title,
.offers-hero,
.offers-shortcuts,
.offers-banner-mosaic,
body[data-route="offers"] .offers-product-section {
  width: min(100% - 28px, 1040px);
  margin-inline: auto;
}

.offers-title {
  margin-top: 8px;
  margin-bottom: 10px;
  padding-inline: 2px;
}

.offers-title span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7b5de6;
  font-size: 11.5px;
  font-weight: 950;
}

.offers-title h1 {
  margin: 5px 0 2px;
  color: #111116;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 950;
}

.offers-title p {
  margin: 0;
  color: rgba(21, 21, 26, 0.54);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 800;
}

.offers-hero {
  margin-bottom: 12px;
}

.offers-hero-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82%, 342px);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 16px;
  padding-inline: 1px;
}

.offers-hero-track::-webkit-scrollbar,
.offers-shortcut-track::-webkit-scrollbar {
  display: none;
}

.offers-hero-card {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 12%, rgba(121, 239, 215, 0.18), transparent 36%),
    radial-gradient(circle at 85% 8%, rgba(223, 176, 238, 0.22), transparent 36%),
    #f7f8fb;
  aspect-ratio: 1 / 1;
  scroll-snap-align: center;
  box-shadow: 0 12px 26px rgba(18, 18, 24, 0.055);
}

.offers-hero-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.offers-hero-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}

.offers-hero-dots span {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(21, 21, 26, 0.18);
}

.offers-hero-dots span.active {
  width: 18px;
  background: linear-gradient(135deg, #79efd7, #a9c4f5 48%, #dfb0ee);
}

.offers-shortcuts {
  margin-bottom: 16px;
}

.offers-shortcut-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76px;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.offers-shortcut {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #15151a;
  text-align: center;
  scroll-snap-align: start;
}

.offers-shortcut span {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.offers-shortcut img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}

.offers-shortcut strong {
  width: 100%;
  min-height: 28px;
  display: -webkit-box;
  overflow: hidden;
  color: #15151a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.offers-banner-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.offers-banner-card {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 248, 251, 0.92)),
    #f7f8fb;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.05);
}

.offers-banner-card.is-square {
  aspect-ratio: 1 / 1;
}

.offers-banner-card.is-wide {
  grid-column: 1 / -1;
  aspect-ratio: 2.6 / 1;
}

.offers-banner-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

body[data-route="offers"] .promo-showcase,
body[data-route="offers"] .offers-product-section {
  width: min(100% - 32px, 1040px);
  margin-inline: auto;
}

body[data-route="offers"] .promo-showcase .section-head,
body[data-route="offers"] .offers-product-section .section-head {
  margin-bottom: 10px;
}

body[data-route="offers"] .promo-showcase .outline-button,
body[data-route="offers"] .offers-product-section .outline-button {
  display: none !important;
}

body[data-route="offers"] .promo-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="offers"] .promo-card {
  border-radius: 12px;
  overflow: hidden;
}

body[data-route="offers"] .promo-card-square {
  aspect-ratio: 1 / 1;
}

body[data-route="offers"] .promo-card-wide {
  grid-column: 1 / -1;
  aspect-ratio: 2.75 / 1;
}

body[data-route="offers"] .promo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-route="offers"] .promo-card-copy {
  display: none;
}

body[data-route="offers"] .offers-product-section {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 250, 253, 0.7));
  padding: 12px;
}

body[data-route="offers"] .offers-product-section .section-head h2 {
  color: #111116;
  font-size: 20px;
  font-weight: 950;
}

body[data-route="offers"] .offers-product-section .section-head p {
  margin-top: 3px;
  color: rgba(21, 21, 26, 0.52);
  font-size: 11.5px;
  font-weight: 800;
}

body[data-route="offers"] .offers-soft-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 246, 255, 0.72)),
    rgba(188, 165, 238, 0.06);
}

@media (min-width: 641px) {
  body[data-route="offers"] .promo-stack {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-route="offers"] .promo-card-wide {
    grid-column: span 2;
  }
}

.notification-count {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(135deg, #79efd7, #a9c4f5 48%, #dfb0ee);
  color: #111116;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(111, 83, 217, 0.18);
}

.notifications-panel {
  position: fixed;
  top: max(78px, calc(70px + env(safe-area-inset-top)));
  inset-inline-end: max(14px, env(safe-area-inset-right));
  z-index: 140;
  width: min(360px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 124px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(188, 165, 238, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 247, 255, 0.78)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 24px 60px rgba(31, 25, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(26px) saturate(1.18);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
}

.notifications-panel[hidden] {
  display: none !important;
}

.notifications-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(18, 18, 24, 0.06);
}

.notifications-panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #7a5de3;
  font-size: 11px;
  font-weight: 950;
}

.notifications-panel-head strong {
  display: block;
  margin-top: 3px;
  color: #111116;
  font-size: 15px;
  font-weight: 950;
}

.notifications-panel-head button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #111116;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 24, 0.05);
}

.notifications-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: none;
}

.notifications-list::-webkit-scrollbar {
  display: none;
}

.notification-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(18, 18, 24, 0.055);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
  color: #111116;
  padding: 10px;
}

.notification-item.is-unread {
  border-color: rgba(166, 110, 232, 0.24);
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.13), rgba(223, 176, 238, 0.17)),
    rgba(255, 255, 255, 0.82);
}

.notification-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(223, 176, 238, 0.24));
  color: #7a5de3;
}

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

.notification-copy strong {
  color: #111116;
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.45;
}

.notification-copy em {
  color: rgba(21, 21, 26, 0.62);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.55;
}

.notification-copy small {
  color: rgba(21, 21, 26, 0.42);
  font-size: 10.5px;
  font-weight: 850;
}

.notifications-empty {
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(21, 21, 26, 0.52);
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.notifications-empty .nion-icon {
  color: #9b83ea;
}

/* Fast119: slightly wider premium product cards and clear favorite state. */
@keyframes nionFavoritePop {
  0% {
    transform: scale(0.92);
  }
  56% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.fav-button,
body[data-route="product"] .detail-floating-button[data-fav] {
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.fav-button.is-favorite,
body[data-route="product"] .detail-floating-button[data-fav].is-favorite {
  border-color: transparent !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.45), transparent 32%),
    linear-gradient(135deg, #79efd7 0%, #bca5ee 54%, #dfb0ee 100%) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(128, 99, 219, 0.22),
    0 0 0 4px rgba(188, 165, 238, 0.13) !important;
  animation: nionFavoritePop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fav-button.is-favorite .nion-icon,
body[data-route="product"] .detail-floating-button[data-fav].is-favorite .nion-icon {
  color: #fff !important;
  fill: currentColor !important;
  stroke-width: 1.7 !important;
}

@media (max-width: 640px) {
  body:not([data-route="search"]) .section:not(.hero):not(.hero-icon-rail),
  body[data-route="offers"] .promo-showcase,
  body[data-route="offers"] .offers-product-section {
    width: min(100% - 22px, 440px) !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) {
    gap: 8px !important;
  }

  body:not([data-route="search"]) .rail {
    grid-auto-columns: minmax(158px, 43.5vw) !important;
    gap: 10px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media,
  body:not([data-route="search"]) .rail .product-media {
    height: clamp(118px, 35vw, 148px) !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .fav-button,
  body:not([data-route="search"]) .rail .fav-button,
  body[data-route="search"] .search-product-list .fav-button {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
    min-height: 29px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .fav-button.is-favorite,
  body:not([data-route="search"]) .rail .fav-button.is-favorite,
  body[data-route="search"] .search-product-list .fav-button.is-favorite {
    transform: translateZ(0);
  }
}

/* Fast120: polished account menu panels, favorites dropdown, support/about flow. */
.account-favorites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.account-favorites-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-favorites-head strong {
  color: #111116;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.account-favorites-head span {
  color: rgba(21, 21, 26, 0.54);
  font-size: 11px;
  font-weight: 750;
}

.account-favorites-head a {
  flex: 0 0 auto;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgba(188, 165, 238, 0.13);
  color: #6f50da;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 850;
  text-decoration: none;
}

.account-favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.account-favorites-panel {
  background:
    radial-gradient(circle at 10% 0%, rgba(121, 239, 215, 0.1), transparent 32%),
    radial-gradient(circle at 90% 18%, rgba(223, 176, 238, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(250, 250, 253, 0.98), rgba(255, 255, 255, 1)) !important;
}

.account-language-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(188, 165, 238, 0.16);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 247, 255, 0.96)),
    #fff;
  padding: 11px;
  box-shadow: 0 10px 22px rgba(18, 18, 24, 0.045);
}

.account-language-card > .nion-icon:first-child {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(223, 176, 238, 0.2));
  color: #7658dc;
  padding: 9px;
}

.account-language-card strong,
.account-language-card span {
  display: block;
}

.account-language-card strong {
  color: #111116;
  font-size: 13px;
  font-weight: 900;
}

.account-language-card span {
  margin-top: 2px;
  color: rgba(21, 21, 26, 0.56);
  font-size: 11px;
  font-weight: 750;
}

.account-language-card > .nion-icon:last-child {
  color: #46bfa8;
}

.about-page {
  width: min(100% - 28px, 920px);
  margin-inline: auto;
  display: grid;
  gap: 16px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.about-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 15px;
  border: 1px solid rgba(188, 165, 238, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 16%, rgba(121, 239, 215, 0.28), transparent 32%),
    radial-gradient(circle at 86% 22%, rgba(223, 176, 238, 0.26), transparent 36%),
    linear-gradient(145deg, #ffffff 0%, #f8f6ff 56%, #f4fffd 100%);
  padding: 18px;
  box-shadow: 0 18px 42px rgba(26, 24, 42, 0.08);
}

.about-back {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #111116;
  box-shadow: 0 10px 22px rgba(18, 18, 24, 0.08);
  text-decoration: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.about-hero img {
  width: min(190px, 56vw);
  height: auto;
  display: block;
}

.about-hero span {
  display: block;
  color: #7658dc;
  font-size: 12px;
  font-weight: 900;
}

.about-hero h1 {
  max-width: 620px;
  margin: 5px 0 8px;
  color: #111116;
  font-size: clamp(24px, 6vw, 42px);
  font-weight: 950;
  line-height: 1.16;
  letter-spacing: 0;
}

.about-hero p,
.about-policy-list p {
  margin: 0;
  color: rgba(21, 21, 26, 0.68);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.8;
}

.about-feature-grid,
.about-policy-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.about-feature-grid article,
.about-policy-card,
.about-policy-list article {
  border: 1px solid rgba(18, 18, 24, 0.065);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(18, 18, 24, 0.055);
}

.about-feature-grid article {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.about-feature-grid .nion-icon {
  color: #7658dc;
}

.about-feature-grid strong,
.about-policy-list h3 {
  margin: 0;
  color: #111116;
  font-size: 13px;
  font-weight: 900;
}

.about-feature-grid p {
  margin: 0;
  color: rgba(21, 21, 26, 0.62);
  font-size: 11.6px;
  font-weight: 650;
  line-height: 1.7;
}

.about-policy-card {
  padding: 14px;
}

.about-policy-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-policy-list article {
  padding: 13px;
}

.about-support-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  background: #111116;
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 15px 28px rgba(17, 17, 22, 0.16);
}

@media (max-width: 640px) {
  .account-favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .account-favorites-grid .product-card {
    min-height: 0 !important;
    border-radius: 10px !important;
  }

  .account-favorites-grid .product-media {
    height: clamp(116px, 35vw, 142px) !important;
  }

  .about-page {
    width: min(100% - 24px, 440px);
    gap: 13px;
  }

  .about-hero {
    border-radius: 18px;
    padding: 14px;
  }

  .about-feature-grid,
  .about-policy-list {
    grid-template-columns: 1fr;
  }

  .about-policy-card {
    padding: 12px;
  }
}

/* Fast121: account favorites use compact rows instead of full product cards. */
.account-favorites-panel {
  overflow: hidden;
  padding: 0 !important;
  border-top: 1px solid rgba(18, 18, 24, 0.055);
  background:
    radial-gradient(circle at 14% 0%, rgba(121, 239, 215, 0.11), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(223, 176, 238, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(252, 252, 255, 0.98), rgba(255, 255, 255, 1)) !important;
}

.account-favorites-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(18, 18, 24, 0.055);
}

.account-favorites-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-favorites-head strong {
  display: block;
  color: #101014;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  white-space: nowrap;
}

.account-favorites-head span {
  display: block;
  color: rgba(21, 21, 26, 0.52);
  font-size: 11.2px;
  font-weight: 800;
  line-height: 1.25;
}

.account-favorites-browse {
  min-width: 68px;
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(121, 239, 215, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.5), rgba(188, 165, 238, 0.55), rgba(223, 176, 238, 0.45)) border-box;
  color: #6f50da;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.account-favorites-list {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.favorite-mini-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(18, 18, 24, 0.06);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.055);
  padding: 8px;
  overflow: hidden;
  cursor: pointer;
}

.favorite-mini-media {
  width: 74px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background:
    radial-gradient(circle at 22% 16%, rgba(121, 239, 215, 0.14), transparent 38%),
    radial-gradient(circle at 82% 20%, rgba(223, 176, 238, 0.14), transparent 38%),
    #f8f8fb;
}

.favorite-mini-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 8px;
}

.favorite-mini-info {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: center;
}

.favorite-mini-card .brand-name {
  min-height: 0;
  color: rgba(21, 21, 26, 0.48);
  font-size: 9.4px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-mini-card .product-name {
  min-height: 28px;
  margin: 0;
  color: #101014;
  font-size: 10.8px;
  font-weight: 850;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.favorite-mini-card .price-row {
  gap: 4px;
  margin: 0;
}

.favorite-mini-card .price {
  color: #bf2d6b;
  font-size: 13.3px;
  font-weight: 950;
  line-height: 1.1;
}

.favorite-mini-card .old-price {
  font-size: 8.8px;
}

.favorite-mini-card .stock {
  font-size: 9px;
  line-height: 1.2;
}

.favorite-mini-side {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: center;
  justify-items: stretch;
}

.favorite-mini-heart {
  width: 34px;
  height: 34px;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(18, 18, 24, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #111116;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.06);
}

.favorite-mini-heart.is-favorite {
  border-color: transparent;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(135deg, #79efd7 0%, #bca5ee 55%, #dfb0ee 100%);
  color: #fff;
}

.favorite-mini-heart.is-favorite .nion-icon {
  fill: currentColor;
  stroke-width: 1.7;
}

.favorite-mini-action {
  min-width: 0;
}

.favorite-mini-action .add-button,
.favorite-mini-action .cart-control {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border-radius: 11px;
  padding: 6px 7px !important;
  font-size: 9.2px !important;
  line-height: 1.15;
}

.favorite-mini-action .add-button {
  gap: 4px;
}

.favorite-mini-action .add-button .cart-plus {
  width: 18px;
  min-width: 18px;
  height: 18px;
  font-size: 14px;
}

.favorite-mini-action .cart-control.is-added {
  grid-template-columns: 1fr;
  gap: 4px;
}

.favorite-mini-action .cart-added-label {
  display: none;
}

.favorite-mini-action .cart-stepper {
  width: 100%;
  min-height: 26px;
  grid-template-columns: 22px minmax(18px, 1fr) 22px;
  border-radius: 9px;
}

.favorite-mini-action .cart-count-button {
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: 15px;
}

@media (max-width: 380px) {
  .favorite-mini-card {
    grid-template-columns: 68px minmax(0, 1fr) 74px;
    gap: 7px;
    padding: 7px;
  }

  .favorite-mini-media {
    width: 68px;
  }

  .favorite-mini-action .add-button,
  .favorite-mini-action .cart-control {
    font-size: 8.7px !important;
  }
}

/* Fast122: saved checkout address and tighter favorites proportions. */
.checkout-form {
  gap: 11px;
}

.checkout-saved-address,
.checkout-address-intro {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid rgba(188, 165, 238, 0.17);
  border-radius: 15px;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.13), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(223, 176, 238, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.96));
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.055);
}

.checkout-saved-address {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 11px;
}

.checkout-saved-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.5), transparent 36%),
    linear-gradient(135deg, rgba(121, 239, 215, 0.28), rgba(188, 165, 238, 0.3), rgba(223, 176, 238, 0.24));
  color: #7658dc;
}

.checkout-saved-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.checkout-saved-copy span,
.checkout-saved-copy em {
  color: rgba(21, 21, 26, 0.52);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.checkout-saved-copy strong {
  color: #101014;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.checkout-saved-copy p {
  margin: 0;
  color: rgba(21, 21, 26, 0.72);
  font-size: 11.4px;
  font-weight: 750;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.checkout-address-new {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: #111116;
  color: #fff;
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 10px 18px rgba(17, 17, 22, 0.15);
}

.checkout-address-intro {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 11px;
  color: rgba(21, 21, 26, 0.64);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.55;
}

.checkout-address-intro .nion-icon {
  color: #7658dc;
}

.checkout-address-fields {
  display: grid;
  gap: 10px;
}

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

.checkout-address-actions {
  display: flex;
  justify-content: flex-start;
}

.checkout-address-actions .outline-button {
  min-height: 36px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
}

.checkout-form .form-field input,
.checkout-form .form-field select,
.checkout-form .form-field textarea {
  border-color: rgba(18, 18, 24, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
}

.checkout-form .form-field select {
  min-height: 46px;
  width: 100%;
  padding-inline: 12px 38px;
}

.checkout-form #checkoutAddressDetails {
  min-height: 82px;
  resize: vertical;
}

.account-favorites-list {
  gap: 8px;
}

.favorite-mini-card {
  grid-template-columns: 70px minmax(0, 1fr) 76px;
  gap: 8px;
  border-radius: 14px;
  padding: 7px;
}

.favorite-mini-media {
  width: 70px;
  border-radius: 12px;
}

.favorite-mini-card .product-name {
  min-height: 26px;
  font-size: 10.4px;
}

.favorite-mini-card .price {
  font-size: 12.8px;
}

.favorite-mini-side {
  gap: 6px;
}

.favorite-mini-heart {
  width: 31px;
  height: 31px;
}

.favorite-mini-action .add-button,
.favorite-mini-action .cart-control {
  min-height: 31px;
  border-radius: 10px;
  font-size: 8.8px !important;
}

@media (max-width: 640px) {
  .checkout-saved-address {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .checkout-address-new {
    grid-column: 1 / -1;
    width: 100%;
  }

  .checkout-address-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .favorite-mini-card {
    grid-template-columns: 64px minmax(0, 1fr) 70px;
    gap: 6px;
  }

  .favorite-mini-media {
    width: 64px;
  }
}

/* Fast123: favorites cards must never clip actions or text on mobile. */
.account-favorites-panel {
  overflow: visible !important;
}

.account-favorites-list {
  padding: 9px;
}

.favorite-mini-card {
  overflow: visible !important;
  align-items: stretch;
}

.favorite-mini-action .add-button,
.favorite-mini-action .cart-control {
  box-sizing: border-box;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .account-favorites-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }

  .account-favorites-head strong {
    white-space: normal;
  }

  .account-favorites-browse {
    justify-self: stretch;
    width: 100%;
  }

  .favorite-mini-card {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    border-radius: 14px;
    padding: 8px;
  }

  .favorite-mini-media {
    width: 68px;
    align-self: start;
  }

  .favorite-mini-info {
    align-content: start;
    gap: 3px;
    padding-top: 1px;
  }

  .favorite-mini-card .brand-name {
    font-size: 9px;
  }

  .favorite-mini-card .product-name {
    min-height: 0;
    font-size: 10.7px;
    line-height: 1.34;
  }

  .favorite-mini-card .price-row {
    min-height: 18px;
  }

  .favorite-mini-card .price {
    font-size: 12.8px;
  }

  .favorite-mini-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    justify-items: stretch;
  }

  .favorite-mini-heart {
    width: 34px;
    height: 34px;
    justify-self: stretch;
  }

  .favorite-mini-action .add-button,
  .favorite-mini-action .cart-control {
    min-height: 34px;
    font-size: 10px !important;
  }

  .favorite-mini-action .add-button .cart-plus {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }
}

@media (max-width: 380px) {
  .favorite-mini-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .favorite-mini-media {
    width: 62px;
  }

  .favorite-mini-side {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
  }

  .favorite-mini-heart {
    width: 32px;
    height: 32px;
  }

  .favorite-mini-action .add-button,
  .favorite-mini-action .cart-control {
    font-size: 9.3px !important;
  }
}

/* Fast124: simple favorites grid, solid favorite color, no gradient badges. */
:root {
  --nion-solid-favorite: #b45bd8;
  --nion-solid-badge: #b45bd8;
}

#cartCount,
.cart-button span,
.notification-count {
  border-color: #fff !important;
  background: var(--nion-solid-badge) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(180, 91, 216, 0.2) !important;
}

.fav-button.is-favorite,
body[data-route="product"] .detail-floating-button[data-fav].is-favorite,
.favorite-mini-heart.is-favorite {
  border-color: transparent !important;
  background: var(--nion-solid-favorite) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(180, 91, 216, 0.18) !important;
  animation: none !important;
}

.fav-button.is-favorite .nion-icon,
body[data-route="product"] .detail-floating-button[data-fav].is-favorite .nion-icon,
.favorite-mini-heart.is-favorite .nion-icon {
  color: #fff !important;
  fill: currentColor !important;
  stroke-width: 1.75 !important;
}

.account-favorites-panel {
  overflow: hidden !important;
  background: #fff !important;
}

.account-favorites-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 11px !important;
}

.account-favorites-browse {
  width: auto !important;
  min-width: 62px !important;
  min-height: 30px !important;
  border: 0 !important;
  background: rgba(180, 91, 216, 0.1) !important;
  color: var(--nion-solid-favorite) !important;
  padding: 6px 9px !important;
}

.account-favorites-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 10px !important;
}

.favorite-mini-card {
  position: relative !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border: 1px solid rgba(18, 18, 24, 0.065) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.favorite-mini-media {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 12px 12px 0 0 !important;
  background: #fafafd !important;
}

.favorite-mini-media img {
  padding: 11px !important;
}

.favorite-mini-info {
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 4px !important;
  align-content: start !important;
  padding: 8px 8px 6px !important;
}

.favorite-mini-card .brand-name {
  min-height: 13px !important;
  font-size: 8.7px !important;
  line-height: 1.2 !important;
}

.favorite-mini-card .product-name {
  min-height: 27px !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}

.favorite-mini-card .price-row {
  min-height: 19px !important;
  gap: 4px !important;
}

.favorite-mini-card .price {
  color: #c23176 !important;
  font-size: 12.4px !important;
}

.favorite-mini-card .old-price,
.favorite-mini-card .stock {
  font-size: 8.2px !important;
}

.favorite-mini-side {
  display: block !important;
  min-width: 0 !important;
  padding: 0 8px 8px !important;
}

.favorite-mini-heart {
  position: absolute !important;
  inset-block-start: 7px !important;
  inset-inline-end: 7px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: 1px solid rgba(18, 18, 24, 0.08) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #111116 !important;
  box-shadow: 0 7px 14px rgba(18, 18, 24, 0.08) !important;
}

.favorite-mini-heart.is-favorite {
  background: var(--nion-solid-favorite) !important;
  color: #fff !important;
}

.favorite-mini-heart .nion-icon {
  width: 15px !important;
  height: 15px !important;
}

.favorite-mini-action {
  width: 100% !important;
}

.favorite-mini-action .add-button,
.favorite-mini-action .cart-control {
  width: 100% !important;
  min-height: 31px !important;
  border-radius: 9px !important;
  padding: 6px 6px !important;
  font-size: 8.8px !important;
  white-space: nowrap !important;
}

.favorite-mini-action .add-button .cart-plus {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}

@media (max-width: 380px) {
  .account-favorites-list {
    gap: 8px !important;
    padding: 8px !important;
  }

  .favorite-mini-info {
    padding-inline: 7px !important;
  }

  .favorite-mini-card .product-name {
    font-size: 9.5px !important;
  }

  .favorite-mini-action .add-button,
  .favorite-mini-action .cart-control {
    font-size: 8.2px !important;
  }
}

/* Fast125: exact heart centering in every favorite circle. */
.fav-button,
.favorite-mini-heart,
body[data-route="product"] .detail-floating-button[data-fav] {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.fav-button .nion-icon,
.favorite-mini-heart .nion-icon,
body[data-route="product"] .detail-floating-button[data-fav] .nion-icon {
  display: block !important;
  margin: 0 auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.favorite-mini-heart {
  border-radius: 999px !important;
}

/* Fast126: favorites header without the redundant browse action. */
.account-favorites-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Fast127: compact cart quantity control inside favorite product cards. */
.favorite-mini-action .cart-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  min-height: 31px !important;
  padding: 4px 5px !important;
  overflow: hidden !important;
}

.favorite-mini-action .cart-control.is-flash-only {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
}

.favorite-mini-action .cart-control.is-flash-only .cart-added-label {
  display: grid !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  display: none !important;
}

.favorite-mini-action .cart-stepper {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 100% !important;
  min-height: 24px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(20px, 1fr) 24px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  direction: ltr !important;
}

.favorite-mini-action .cart-count-button {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.favorite-mini-action .cart-control strong {
  min-width: 20px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

@media (max-width: 380px) {
  .favorite-mini-action .cart-stepper {
    width: 68px !important;
    min-width: 68px !important;
    grid-template-columns: 22px minmax(18px, 1fr) 22px !important;
  }

  .favorite-mini-action .cart-count-button {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 14px !important;
  }
}

/* Fast129: correct dark-mode inversion for product cards and cart buttons. */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .suggestion-product {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #15151f !important;
  color: #f8f7ff !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26) !important;
}

html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .favorite-mini-card:hover {
  border-color: rgba(180, 91, 216, 0.38) !important;
}

html[data-theme="dark"] .product-body,
html[data-theme="dark"] .product-actions,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-actions,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-body,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-actions,
html[data-theme="dark"] .favorite-mini-info,
html[data-theme="dark"] .favorite-mini-side {
  background: #15151f !important;
  color: #f8f7ff !important;
}

html[data-theme="dark"] .product-media,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-media,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-media,
html[data-theme="dark"] .favorite-mini-media {
  background:
    radial-gradient(circle at 28% 18%, rgba(121, 239, 215, 0.08), transparent 35%),
    radial-gradient(circle at 84% 16%, rgba(180, 91, 216, 0.1), transparent 34%),
    #101019 !important;
}

html[data-theme="dark"] .product-card .product-name,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-name,
html[data-theme="dark"] .favorite-mini-card .product-name {
  color: #f8f7ff !important;
}

html[data-theme="dark"] .product-card .brand-name,
html[data-theme="dark"] body[data-route="search"] .search-product-list .brand-name,
html[data-theme="dark"] .favorite-mini-card .brand-name,
html[data-theme="dark"] .product-card .rating-row,
html[data-theme="dark"] body[data-route="search"] .search-product-list .rating-row,
html[data-theme="dark"] .product-card .old-price,
html[data-theme="dark"] .favorite-mini-card .old-price,
html[data-theme="dark"] .product-card .stock,
html[data-theme="dark"] .favorite-mini-card .stock {
  color: rgba(248, 247, 255, 0.62) !important;
}

html[data-theme="dark"] .product-card .price,
html[data-theme="dark"] body[data-route="search"] .search-product-list .price,
html[data-theme="dark"] .favorite-mini-card .price {
  color: #ff79b7 !important;
  text-shadow: 0 0 14px rgba(255, 121, 183, 0.12) !important;
}

html[data-theme="dark"] .product-card .sale-badge,
html[data-theme="dark"] .favorite-mini-card .sale-badge,
html[data-theme="dark"] .badge {
  background: var(--nion-solid-badge) !important;
  color: #fff !important;
}

html[data-theme="dark"] .product-card .fav-button,
html[data-theme="dark"] .favorite-mini-heart,
html[data-theme="dark"] body[data-route="search"] .search-product-list .fav-button {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #15151f !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .product-card .fav-button.is-favorite,
html[data-theme="dark"] .favorite-mini-heart.is-favorite,
html[data-theme="dark"] body[data-route="search"] .search-product-list .fav-button.is-favorite {
  border-color: transparent !important;
  background: var(--nion-solid-favorite) !important;
  color: #fff !important;
  box-shadow: 0 9px 18px rgba(180, 91, 216, 0.26) !important;
}

html[data-theme="dark"] .product-card .add-button:not(:disabled),
html[data-theme="dark"] .product-card .cart-control,
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled),
html[data-theme="dark"] .favorite-mini-action .cart-control,
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: #ffffff !important;
  color: #111116 !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="dark"] .product-card .add-button:not(:disabled) .nion-icon,
html[data-theme="dark"] .product-card .add-button:not(:disabled) span,
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled) .nion-icon,
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled) span,
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled) .nion-icon,
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled) span {
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-plus,
html[data-theme="dark"] .favorite-mini-action .cart-plus,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-plus {
  width: 19px !important;
  min-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--nion-solid-badge) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

html[data-theme="dark"] .product-card .cart-control .cart-added-label,
html[data-theme="dark"] .favorite-mini-action .cart-control .cart-added-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control .cart-added-label {
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-flashing,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-flashing,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-flashing {
  background: #16a34a !important;
  color: #fff !important;
}

html[data-theme="dark"] .product-card .cart-control.is-flashing .cart-added-label,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-flashing .cart-added-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-flashing .cart-added-label {
  color: #fff !important;
}

html[data-theme="dark"] .product-card .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-stepper {
  border-color: rgba(17, 17, 22, 0.1) !important;
  background: #f4f4f7 !important;
}

html[data-theme="dark"] .product-card .cart-count-button,
html[data-theme="dark"] .favorite-mini-action .cart-count-button,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-count-button {
  background: #fff !important;
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control strong,
html[data-theme="dark"] .favorite-mini-action .cart-control strong,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control strong {
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .add-button:disabled,
html[data-theme="dark"] .favorite-mini-action .add-button:disabled,
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:disabled {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(248, 247, 255, 0.58) !important;
}

/* Fast128: unified cart badges and app-wide light/dark theme. */
:root {
  --nion-theme-bg: #ffffff;
  --nion-theme-bg-soft: #f8f8fb;
  --nion-theme-surface: #ffffff;
  --nion-theme-surface-strong: #ffffff;
  --nion-theme-ink: #111116;
  --nion-theme-muted: #71717c;
  --nion-theme-line: rgba(18, 18, 24, 0.075);
}

html[data-theme="dark"] {
  --nion-theme-bg: #0d0d13;
  --nion-theme-bg-soft: #14141d;
  --nion-theme-surface: #171720;
  --nion-theme-surface-strong: #1d1d28;
  --nion-theme-ink: #f8f7ff;
  --nion-theme-muted: rgba(244, 242, 255, 0.68);
  --nion-theme-line: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}

.theme-toggle {
  overflow: hidden !important;
}

.theme-toggle .nion-icon {
  transition: transform 220ms ease, color 180ms ease;
}

.theme-toggle.is-dark {
  color: #fff !important;
  border-color: transparent !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(121, 239, 215, 0.38), transparent 38%),
    linear-gradient(135deg, #101018, #7055cf 58%, #b45bd8) !important;
  box-shadow: 0 10px 22px rgba(116, 83, 210, 0.22) !important;
}

.theme-toggle.is-dark .nion-icon {
  transform: rotate(18deg) scale(1.02);
}

#cartCount,
.cart-button span,
.notification-count {
  border-color: #fff !important;
  background: var(--nion-solid-badge) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(180, 91, 216, 0.22) !important;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -8%, rgba(121, 239, 215, 0.12), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(180, 91, 216, 0.16), transparent 30%),
    linear-gradient(180deg, #0d0d13 0%, #11111a 42%, #0d0d13 100%) !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .top-strip {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(90deg, rgba(180, 91, 216, 0.18), rgba(15, 15, 23, 0.88), rgba(121, 239, 215, 0.14)),
    #101019 !important;
  color: rgba(248, 247, 255, 0.82) !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] body[data-route="home"] .site-header {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(14, 14, 21, 0.86) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] body[data-route="home"] .brand,
html[data-theme="dark"] .search,
html[data-theme="dark"] body[data-route="home"] .search {
  background:
    linear-gradient(rgba(24, 24, 34, 0.94), rgba(24, 24, 34, 0.94)) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.42), rgba(180, 91, 216, 0.38), rgba(223, 176, 238, 0.32)) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .search input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--nion-theme-ink) !important;
  background-color: transparent !important;
}

html[data-theme="dark"] .search input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(244, 242, 255, 0.48) !important;
}

html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .cart-button,
html[data-theme="dark"] .icon-action,
html[data-theme="dark"] body[data-route="home"] .icon-action,
html[data-theme="dark"] body[data-route="home"] .cart-button.icon-action {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(248, 247, 255, 0.9) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

html[data-theme="dark"] .icon-action:is(:hover, :focus-visible, :active),
html[data-theme="dark"] .icon-action.is-active,
html[data-theme="dark"] .icon-action.is-tapped {
  color: #f8f7ff !important;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(180, 91, 216, 0.22)),
    rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .footer,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section,
html[data-theme="dark"] body[data-route="home"] .section:not(.hero):not(.hero-icon-rail),
html[data-theme="dark"] body[data-route="home"] .hero-icon-rail,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .account-menu-list,
html[data-theme="dark"] .account-profile-card,
html[data-theme="dark"] .account-inline-panel,
html[data-theme="dark"] .account-favorites-panel,
html[data-theme="dark"] .cart-empty-state,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .account-order-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .suggestions,
html[data-theme="dark"] .section-hub-content,
html[data-theme="dark"] .section-hub-tabs,
html[data-theme="dark"] .brand-tile,
html[data-theme="dark"] .quick-tile,
html[data-theme="dark"] .hero-icon-item,
html[data-theme="dark"] .hero-icon-item strong,
html[data-theme="dark"] .promo-card {
  border-color: var(--nion-theme-line) !important;
  background: var(--nion-theme-surface) !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .product-media,
html[data-theme="dark"] .favorite-mini-media,
html[data-theme="dark"] .cart-item img,
html[data-theme="dark"] .order-item img,
html[data-theme="dark"] .account-order-item img,
html[data-theme="dark"] .detail-gallery,
html[data-theme="dark"] .detail-image-stage,
html[data-theme="dark"] .section-banner,
html[data-theme="dark"] .category-tile-media,
html[data-theme="dark"] .brand-card-media {
  background: var(--nion-theme-bg-soft) !important;
}

/* Dashboard-authored campaign cards: artwork stays clean while copy remains editable. */
.promo-showcase .promo-card {
  position: relative;
  isolation: isolate;
  display: block !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f4f5f7 !important;
  box-shadow: 0 5px 18px rgba(17, 17, 22, 0.07) !important;
}

.promo-showcase .promo-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 12, 0.68) 0%, rgba(8, 8, 12, 0.23) 48%, transparent 78%);
  content: "";
  opacity: 0.76;
  pointer-events: none;
}

[dir="rtl"] .promo-showcase .promo-card::after {
  background: linear-gradient(270deg, rgba(8, 8, 12, 0.68) 0%, rgba(8, 8, 12, 0.23) 48%, transparent 78%);
}

.promo-showcase .promo-card.promo-copy-dark::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.48) 50%, transparent 80%);
  opacity: 0.88;
}

[dir="rtl"] .promo-showcase .promo-card.promo-copy-dark::after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.48) 50%, transparent 80%);
}

.promo-showcase .promo-card img,
body[data-route="home"] .promo-showcase .promo-card-wide img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.promo-showcase .promo-card-copy,
body[data-route="home"] .promo-showcase .promo-card-wide .promo-card-copy {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  display: flex !important;
  width: min(68%, 280px);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: clamp(12px, 3.4vw, 24px) !important;
  color: #fff;
  text-align: start !important;
}

.promo-showcase .promo-copy-dark .promo-card-copy {
  color: #121217;
}

.promo-showcase .promo-copy-start .promo-card-copy {
  inset-inline-start: 0;
}

.promo-showcase .promo-copy-end .promo-card-copy {
  inset-inline-end: 0;
}

.promo-showcase .promo-copy-center .promo-card-copy {
  inset-inline: 0;
  width: min(76%, 340px);
  margin-inline: auto;
  align-items: center;
  text-align: center !important;
}

.promo-showcase .promo-card-copy b {
  display: block;
  color: inherit;
  font-size: clamp(21px, 5.2vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.promo-showcase .promo-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: clamp(14px, 3.4vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.promo-showcase .promo-card-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: inherit !important;
  font-size: clamp(10px, 2.45vw, 15px) !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 0.88;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 640px) {
  body[data-route="home"] .promo-showcase .promo-card-square .promo-card-copy {
    width: 82%;
    padding: 10px !important;
  }

  body[data-route="home"] .promo-showcase .promo-card-square .promo-card-copy b {
    font-size: 21px;
  }

  body[data-route="home"] .promo-showcase .promo-card-square .promo-card-copy strong {
    font-size: 13px !important;
  }

  body[data-route="home"] .promo-showcase .promo-card-square .promo-card-copy em {
    font-size: 9.5px !important;
  }

  body[data-route="home"] .promo-showcase .promo-card-wide {
    aspect-ratio: 2.15 / 1 !important;
  }
}

html[data-theme="dark"] .product-card .brand-name,
html[data-theme="dark"] .product-card .old-price,
html[data-theme="dark"] .product-card .stock,
html[data-theme="dark"] .favorite-mini-card .brand-name,
html[data-theme="dark"] .favorite-mini-card .old-price,
html[data-theme="dark"] .favorite-mini-card .stock,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .hero-icon-item span,
html[data-theme="dark"] .account-profile-head span,
html[data-theme="dark"] .account-profile-head em,
html[data-theme="dark"] .account-info-grid span,
html[data-theme="dark"] .notifications-empty,
html[data-theme="dark"] .footer p {
  color: var(--nion-theme-muted) !important;
}

html[data-theme="dark"] .product-card .product-name,
html[data-theme="dark"] .favorite-mini-card .product-name,
html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .hero-icon-item strong,
html[data-theme="dark"] .account-menu-list a,
html[data-theme="dark"] .account-menu-list button,
html[data-theme="dark"] .account-profile-head strong,
html[data-theme="dark"] .account-info-grid strong {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .suggestions button,
html[data-theme="dark"] .account-menu-list a,
html[data-theme="dark"] .account-menu-list button,
html[data-theme="dark"] .account-order-trigger,
html[data-theme="dark"] .notification-item {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .suggestions button:hover,
html[data-theme="dark"] .account-menu-list a:hover,
html[data-theme="dark"] .account-menu-list button:hover,
html[data-theme="dark"] .section-hub-tabs a.active {
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.12), rgba(180, 91, 216, 0.15)),
    rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .hero-icon-track {
  background: transparent !important;
}

html[data-theme="dark"] .hero-icon-item,
html[data-theme="dark"] .hero-icon-item strong {
  box-shadow: none !important;
}

html[data-theme="dark"] .hero-icon-item img {
  background: transparent !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

html[data-theme="dark"] .add-button,
html[data-theme="dark"] .secondary-button {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(#181822, #181822) padding-box,
    var(--brand-gradient) border-box !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .favorite-mini-action .add-button,
html[data-theme="dark"] .detail-sticky-cart .add-button {
  color: #fff !important;
  background:
    linear-gradient(135deg, #050507 0%, #141420 42%, #7055cf 74%, #79efd7 140%) !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] .toast {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background:
      linear-gradient(180deg, rgba(28, 28, 38, 0.94), rgba(19, 19, 29, 0.9)),
      rgba(20, 20, 30, 0.9) !important;
    color: var(--nion-theme-ink) !important;
  }
}

/* Fast130: final dark-mode hierarchy and refined quantity stepper. */
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .page {
  color: #f8f7ff !important;
}

html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] body[data-route="home"] .section-head h2,
html[data-theme="dark"] body[data-route="home"] .home-product-rail .section-head h2,
html[data-theme="dark"] body[data-route="home"] .editorial-promos .section-head h2,
html[data-theme="dark"] body[data-route="offers"] .offers-product-section .section-head h2,
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .offers-title h1,
html[data-theme="dark"] .cart-empty-head h1,
html[data-theme="dark"] .account-favorites-head strong,
html[data-theme="dark"] .section-panel-title strong {
  color: #f8f7ff !important;
  text-shadow: 0 0 18px rgba(180, 91, 216, 0.08) !important;
}

html[data-theme="dark"] .section-head p,
html[data-theme="dark"] body[data-route="home"] .section-head p,
html[data-theme="dark"] .offers-title p,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .section-panel-title span,
html[data-theme="dark"] .section-panel-subtitle,
html[data-theme="dark"] .account-favorites-head span {
  color: rgba(248, 247, 255, 0.64) !important;
}

html[data-theme="dark"] .outline-button,
html[data-theme="dark"] .section-head .outline-button,
html[data-theme="dark"] body[data-route="home"] .home-product-rail .outline-button,
html[data-theme="dark"] body[data-route="offers"] .offers-product-section .outline-button {
  color: #d8b7f2 !important;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .suggestion-product {
  background: #15151f !important;
}

html[data-theme="dark"] .product-body,
html[data-theme="dark"] .product-actions,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-actions,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-body,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-actions,
html[data-theme="dark"] .favorite-mini-info,
html[data-theme="dark"] .favorite-mini-side {
  background: #15151f !important;
}

.product-card .cart-control.is-added:not(.is-flash-only),
.favorite-mini-action .cart-control.is-added:not(.is-flash-only),
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 7px !important;
  min-height: 34px !important;
  padding: 4px 5px 4px 9px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  font-size: 9.2px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  width: 86px !important;
  min-width: 86px !important;
  height: 27px !important;
  min-height: 27px !important;
  display: grid !important;
  grid-template-columns: 26px minmax(22px, 1fr) 26px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.13) !important;
  padding: 2px !important;
  direction: ltr !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button {
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"] {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #17171f !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
  background: var(--nion-solid-badge) !important;
  color: #fff !important;
  box-shadow: 0 6px 12px rgba(180, 91, 216, 0.24) !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) strong {
  min-width: 22px !important;
  height: 23px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #17171f !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 3px !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: #fff !important;
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #f0f0f4 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) strong,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) strong,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) strong {
  background: #fff !important;
  color: #111116 !important;
}

@media (max-width: 380px) {
  .product-card .cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
    gap: 5px !important;
    padding-inline: 6px 4px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
  .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 78px !important;
    min-width: 78px !important;
    grid-template-columns: 23px minmax(20px, 1fr) 23px !important;
  }
}

@media (max-width: 640px) {
  .product-card .cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    padding: 4px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
    display: none !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 96px !important;
    min-width: 96px !important;
    grid-template-columns: 28px minmax(24px, 1fr) 28px !important;
  }
}

/* Fast131: homepage hero chrome and dark-mode fade polish. */
.header-actions .cart-button {
  display: none !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .header-actions .cart-button {
    display: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .search {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background:
      linear-gradient(rgba(15, 15, 22, 0.46), rgba(15, 15, 22, 0.46)) padding-box,
      linear-gradient(135deg, rgba(121, 239, 215, 0.3), rgba(180, 91, 216, 0.28), rgba(223, 176, 238, 0.24)) border-box !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .icon-action,
  html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
    border-color: rgba(255, 255, 255, 0.34) !important;
    background: rgba(15, 15, 22, 0.46) !important;
    color: #f8f7ff !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main {
    background: #0d0d13 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 0 !important;
    inset-block-start: auto !important;
    inset-block-end: 0 !important;
    z-index: 3 !important;
    display: block !important;
    height: 46% !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(13, 13, 19, 0) 0%, rgba(13, 13, 19, 0.22) 42%, rgba(13, 13, 19, 0.82) 82%, #0d0d13 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots {
    z-index: 4 !important;
  }
}

/* Fast132: unified dark mode, no mixed colored section backgrounds. */
html[data-theme="dark"] {
  --nion-theme-bg: #0d0d12;
  --nion-theme-bg-soft: #101015;
  --nion-theme-surface: #15151b;
  --nion-theme-surface-strong: #191920;
  --nion-theme-ink: #f7f7fb;
  --nion-theme-muted: rgba(247, 247, 251, 0.64);
  --nion-theme-line: rgba(255, 255, 255, 0.09);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .page {
  background: #0d0d12 !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html[data-theme="dark"] .page::before,
html[data-theme="dark"] .page::after {
  display: none !important;
  content: none !important;
}

html[data-theme="dark"] .top-strip {
  border-color: var(--nion-theme-line) !important;
  background: #0d0d12 !important;
  color: rgba(247, 247, 251, 0.72) !important;
}

html[data-theme="dark"] .site-header {
  border-color: var(--nion-theme-line) !important;
  background: rgba(13, 13, 18, 0.92) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.06) !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .site-header {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html[data-theme="dark"] .brand,
html[data-theme="dark"] .search,
html[data-theme="dark"] body[data-route="home"] .search,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .icon-action,
html[data-theme="dark"] body[data-route="home"] .icon-action,
html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
  border-color: var(--nion-theme-line) !important;
  background: rgba(21, 21, 27, 0.78) !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-theme="dark"] body[data-route="home"] .search,
html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action,
html[data-theme="dark"] body[data-route="home"] .icon-action {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(18, 18, 24, 0.48) !important;
}

html[data-theme="dark"] .theme-toggle.is-dark {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #15151b !important;
  color: #f7f7fb !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] body[data-route="home"] .section:not(.hero),
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .footer {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .suggestion-product,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .cart-empty-state,
html[data-theme="dark"] .cart-item,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .account-order-card,
html[data-theme="dark"] .account-menu-list,
html[data-theme="dark"] .account-profile-card,
html[data-theme="dark"] .account-inline-panel,
html[data-theme="dark"] .account-favorites-panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .suggestions,
html[data-theme="dark"] .brand-tile,
html[data-theme="dark"] .quick-tile,
html[data-theme="dark"] .promo-card,
html[data-theme="dark"] .editorial-promo-card,
html[data-theme="dark"] .section-hub-content,
html[data-theme="dark"] .section-hub-tabs {
  border-color: var(--nion-theme-line) !important;
  background: var(--nion-theme-surface) !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .product-body,
html[data-theme="dark"] .product-actions,
html[data-theme="dark"] .favorite-mini-info,
html[data-theme="dark"] .favorite-mini-side,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-body,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-actions,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-body,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-actions {
  background: var(--nion-theme-surface) !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .product-media,
html[data-theme="dark"] .favorite-mini-media,
html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media,
html[data-theme="dark"] body:not([data-route="search"]) .rail .product-media,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-media,
html[data-theme="dark"] .section-banner,
html[data-theme="dark"] .category-tile-media,
html[data-theme="dark"] .brand-card-media,
html[data-theme="dark"] .detail-gallery,
html[data-theme="dark"] .detail-image-stage {
  background: var(--nion-theme-bg-soft) !important;
}

html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .section-head strong,
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .offers-title h1,
html[data-theme="dark"] .cart-empty-head h1,
html[data-theme="dark"] .section-panel-title strong,
html[data-theme="dark"] .product-card .product-name,
html[data-theme="dark"] .favorite-mini-card .product-name,
html[data-theme="dark"] .account-menu-list a,
html[data-theme="dark"] .account-menu-list button,
html[data-theme="dark"] .account-profile-head strong,
html[data-theme="dark"] .account-info-grid strong {
  color: var(--nion-theme-ink) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .offers-title p,
html[data-theme="dark"] .product-card .brand-name,
html[data-theme="dark"] .product-card .old-price,
html[data-theme="dark"] .product-card .stock,
html[data-theme="dark"] .product-card .rating-row,
html[data-theme="dark"] .favorite-mini-card .brand-name,
html[data-theme="dark"] .favorite-mini-card .old-price,
html[data-theme="dark"] .favorite-mini-card .stock,
html[data-theme="dark"] .account-profile-head span,
html[data-theme="dark"] .account-profile-head em,
html[data-theme="dark"] .account-info-grid span,
html[data-theme="dark"] .notifications-empty,
html[data-theme="dark"] .footer p {
  color: var(--nion-theme-muted) !important;
}

html[data-theme="dark"] .product-card .price,
html[data-theme="dark"] .favorite-mini-card .price,
html[data-theme="dark"] body[data-route="search"] .search-product-list .price {
  color: #f36aa8 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .outline-button {
  border-color: var(--nion-theme-line) !important;
  background: #15151b !important;
  color: #d8b7f2 !important;
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .add-button:not(:disabled),
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .product-card .add-button:not(:disabled),
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled),
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled),
html[data-theme="dark"] .detail-sticky-cart .add-button {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #ffffff !important;
  color: #111116 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .add-button:not(:disabled) .nion-icon,
html[data-theme="dark"] .add-button:not(:disabled) span,
html[data-theme="dark"] .secondary-button .nion-icon,
html[data-theme="dark"] .secondary-button span {
  color: #111116 !important;
}

html[data-theme="dark"] .sale-badge,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .notification-count {
  background: var(--nion-solid-badge) !important;
  color: #fff !important;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    background: linear-gradient(180deg, rgba(13, 13, 18, 0) 0%, rgba(13, 13, 18, 0.24) 42%, rgba(13, 13, 18, 0.84) 82%, #0d0d12 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    border-color: transparent !important;
    background: #0d0d12 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .hero-icon-item,
  html[data-theme="dark"] .hero-icon-item strong {
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="section"] .page {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    border-color: var(--nion-theme-line) !important;
    background: #0d0d12 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a {
    border-color: transparent !important;
    background: #0d0d12 !important;
    color: rgba(247, 247, 251, 0.58) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a.active {
    border-inline-start-color: #b45bd8 !important;
    background: #15151b !important;
    color: var(--nion-theme-ink) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-content {
    background: #0d0d12 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hero-banner {
    background: #15151b !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--nion-theme-ink) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile img {
    background: #15151b !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile span {
    color: var(--nion-theme-ink) !important;
  }

  html[data-theme="dark"] .category-sibling-strip {
    background: #0d0d12 !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  html[data-theme="dark"] .category-sibling-track a {
    border-color: var(--nion-theme-line) !important;
    background: #15151b !important;
    color: rgba(247, 247, 251, 0.68) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .category-sibling-track a.active {
    border-color: rgba(180, 91, 216, 0.42) !important;
    background: #191920 !important;
    color: #d8b7f2 !important;
  }
}

/* Fast132 account/about readability patch for the unified dark surface. */
html[data-theme="dark"] .account-menu-list a,
html[data-theme="dark"] .account-menu-list button {
  border-color: var(--nion-theme-line) !important;
  background: #15151b !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-menu-list a span,
html[data-theme="dark"] .account-menu-list button span {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .account-menu-list a .nion-icon,
html[data-theme="dark"] .account-menu-list button .nion-icon {
  color: rgba(247, 247, 251, 0.78) !important;
}

html[data-theme="dark"] .account-menu-list a:is(:hover, :focus-visible),
html[data-theme="dark"] .account-menu-list button:is(:hover, :focus-visible),
html[data-theme="dark"] .account-menu-list button.is-open {
  background: #191920 !important;
  color: #d8b7f2 !important;
}

html[data-theme="dark"] .account-info-grid div,
html[data-theme="dark"] .account-language-card,
html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .about-feature-grid article,
html[data-theme="dark"] .about-policy-card,
html[data-theme="dark"] .about-policy-list article {
  border-color: var(--nion-theme-line) !important;
  background: #15151b !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .account-info-grid span,
html[data-theme="dark"] .account-language-card span,
html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .about-policy-list p,
html[data-theme="dark"] .about-feature-grid p {
  color: var(--nion-theme-muted) !important;
}

html[data-theme="dark"] .account-info-grid strong,
html[data-theme="dark"] .account-language-card strong,
html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .about-feature-grid strong,
html[data-theme="dark"] .about-policy-list h3 {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .account-language-card > .nion-icon:first-child,
html[data-theme="dark"] .about-back {
  background: #191920 !important;
  color: #d8b7f2 !important;
}

html[data-theme="dark"] .social-follow {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .social-follow a,
html[data-theme="dark"] .social-follow .nion-icon {
  color: rgba(247, 247, 251, 0.72) !important;
}

/* Fast134: keep homepage dark sections on one continuous background. */
html[data-theme="dark"] body[data-route="home"] .page,
html[data-theme="dark"] body[data-route="home"] .home-deferred,
html[data-theme="dark"] body[data-route="home"] .home-product-feed {
  background: #0d0d12 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="home"] .section:not(.hero),
html[data-theme="dark"] body[data-route="home"] .promo-showcase,
html[data-theme="dark"] body[data-route="home"] .editorial-promos,
html[data-theme="dark"] body[data-route="home"] .home-product-rail,
html[data-theme="dark"] body[data-route="home"] .brand-rail {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="home"] .section:not(.hero)::before,
html[data-theme="dark"] body[data-route="home"] .section:not(.hero)::after,
html[data-theme="dark"] body[data-route="home"] .promo-showcase::before,
html[data-theme="dark"] body[data-route="home"] .promo-showcase::after,
html[data-theme="dark"] body[data-route="home"] .editorial-promos::before,
html[data-theme="dark"] body[data-route="home"] .editorial-promos::after,
html[data-theme="dark"] body[data-route="home"] .home-product-rail::before,
html[data-theme="dark"] body[data-route="home"] .home-product-rail::after {
  content: none !important;
  display: none !important;
}

html[data-theme="dark"] body[data-route="home"] .section-head,
html[data-theme="dark"] body[data-route="home"] .section-head > div {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="home"] .quick-grid,
html[data-theme="dark"] body[data-route="home"] .brand-grid,
html[data-theme="dark"] body[data-route="home"] .editorial-promo-grid,
html[data-theme="dark"] body[data-route="home"] .promo-stack,
html[data-theme="dark"] body[data-route="home"] .rail,
html[data-theme="dark"] body[data-route="home"] .product-grid {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="home"] #app .page .section:not(.hero):not(.hero-icon-rail),
html[data-theme="dark"] body[data-route="home"] #app .page .section.home-primary-rail,
html[data-theme="dark"] body[data-route="home"] #app .page .section.promo-showcase,
html[data-theme="dark"] body[data-route="home"] #app .page .section.editorial-promos,
html[data-theme="dark"] body[data-route="home"] #app .page .section.home-product-rail {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Fast136: professional saved checkout address flow. */
.checkout-address-section {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.checkout-address-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.checkout-address-item {
  position: relative;
  min-width: 0;
}

.checkout-address-choice {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  appearance: none;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.checkout-address-item .checkout-address-choice {
  padding-inline-end: 48px;
}

.checkout-address-delete {
  position: absolute;
  z-index: 2;
  inset-inline-end: 10px;
  inset-block-end: 10px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 52, 83, 0.14);
  border-radius: 10px;
  background: rgba(255, 246, 248, 0.96);
  color: #c63453;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(120, 20, 42, 0.08);
  transition: transform 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.checkout-address-delete:active {
  transform: scale(0.94);
}

.checkout-address-delete:disabled {
  cursor: wait;
  opacity: 0.5;
}

.checkout-address-choice:not(.is-selected) {
  border-color: rgba(18, 18, 24, 0.08);
  box-shadow: none;
}

.checkout-address-choice:active {
  transform: scale(0.992);
}

.checkout-address-radio {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(21, 21, 26, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.checkout-address-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 2px;
}

.checkout-address-heading strong {
  color: #111116;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}

.checkout-address-heading span {
  color: rgba(21, 21, 26, 0.52);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.25;
  white-space: nowrap;
}

.checkout-address-section .checkout-saved-address {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  border-color: rgba(180, 91, 216, 0.22);
  padding: 12px;
  overflow: hidden;
}

.checkout-address-section .checkout-saved-address::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.checkout-address-section .checkout-saved-address.is-selected::before {
  background: linear-gradient(180deg, #79efd7, #bca5ee 52%, #dfb0ee);
}

.checkout-saved-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(180, 91, 216, 0.1);
  color: #8a43bc;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.checkout-address-section .checkout-address-new {
  width: fit-content;
  min-height: 36px;
  justify-self: start;
  border: 1px solid rgba(18, 18, 24, 0.08);
  background: #111116;
  color: #fff;
}

.checkout-form.is-editing-address .checkout-address-section .checkout-address-new {
  display: none;
}

.checkout-form.is-editing-address .checkout-address-fields {
  border: 1px solid rgba(188, 165, 238, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.95));
  padding: 12px;
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.055);
}

.checkout-address-fields[hidden] {
  display: none !important;
}

html[data-theme="dark"] .checkout-address-heading strong,
html[data-theme="dark"] .checkout-saved-copy strong {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .checkout-address-heading span,
html[data-theme="dark"] .checkout-saved-copy span,
html[data-theme="dark"] .checkout-saved-copy em,
html[data-theme="dark"] .checkout-saved-copy p {
  color: var(--nion-theme-muted) !important;
}

html[data-theme="dark"] .checkout-saved-address,
html[data-theme="dark"] .checkout-address-intro,
html[data-theme="dark"] .checkout-form.is-editing-address .checkout-address-fields {
  border-color: var(--nion-theme-line) !important;
  background: #15151b !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .checkout-saved-status {
  background: rgba(180, 91, 216, 0.18) !important;
  color: #dfb0ee !important;
}

html[data-theme="dark"] .checkout-address-choice:not(.is-selected) {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] .checkout-address-radio {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .checkout-address-delete {
  border-color: rgba(255, 122, 148, 0.2);
  background: rgba(198, 52, 83, 0.13);
  color: #ff91aa;
  box-shadow: none;
}

@media (max-width: 640px) {
  .checkout-address-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .checkout-address-heading span {
    white-space: normal;
  }

  .checkout-address-section .checkout-saved-address {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .checkout-address-item .checkout-address-choice {
    padding-inline-end: 44px;
  }

  .checkout-saved-status {
    grid-column: auto;
    justify-self: start;
  }

  .checkout-address-section .checkout-address-new {
    width: 100%;
  }

  .checkout-address-row {
    grid-template-columns: 1fr;
  }
}

/* Fast137: first checkout address must be explicit and saved with the order. */
.checkout-address-first {
  border: 1px solid rgba(188, 165, 238, 0.17);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.11), transparent 34%),
    radial-gradient(circle at 92% 16%, rgba(223, 176, 238, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.96));
  padding: 12px;
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.055);
}

.checkout-address-first .checkout-address-intro {
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
  padding: 9px 0 0;
}

.checkout-address-fields-head {
  display: grid;
  gap: 3px;
  padding-bottom: 2px;
}

.checkout-address-fields-head strong {
  color: #111116;
  font-size: 12.8px;
  font-weight: 950;
  line-height: 1.25;
}

.checkout-address-fields-head span {
  color: rgba(21, 21, 26, 0.54);
  font-size: 10.6px;
  font-weight: 850;
  line-height: 1.45;
}

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

.checkout-address-actions .checkout-address-save {
  min-height: 42px;
  border-radius: 12px;
  box-shadow: none;
}

.checkout-address-actions .outline-button {
  min-height: 42px;
  border-radius: 12px;
}

.checkout-form.no-saved-address .checkout-address-fields {
  border: 1px solid rgba(188, 165, 238, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 249, 255, 0.96));
  padding: 12px;
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.05);
}

.checkout-form [data-checkout-submit] {
  min-height: 44px;
  gap: 8px;
}

html[data-theme="dark"] .checkout-address-first,
html[data-theme="dark"] .checkout-form.no-saved-address .checkout-address-fields {
  border-color: var(--nion-theme-line) !important;
  background: #15151b !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .checkout-address-first .checkout-address-intro {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .checkout-address-fields-head strong {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .checkout-address-fields-head span {
  color: var(--nion-theme-muted) !important;
}

/* Keep checkout geometry steady while mobile browsers animate their keyboard. */
@media (max-width: 760px) {
  html.checkout-control-focused {
    scroll-behavior: auto !important;
  }

  html.checkout-control-focused body[data-route="cart"] .page,
  html.checkout-control-focused body[data-route="cart"] .cart-summary-panel,
  html.checkout-control-focused body[data-route="cart"] .checkout-form {
    overflow-anchor: none !important;
  }

  html.checkout-control-focused body[data-route="cart"] .nion-dock,
  html.checkout-control-focused body[data-route="cart"] .nion-assistant-root,
  html.checkout-control-focused body[data-route="cart"] .cart-sticky-checkout {
    transition-duration: 0s !important;
  }

  body[data-route="cart"] .checkout-form :is(input, select, textarea) {
    scroll-margin-block-start: 22px;
    scroll-margin-block-end: max(28px, calc(var(--checkout-keyboard-inset, 0px) + 20px));
  }

  html.checkout-keyboard-open body[data-route="cart"] {
    overscroll-behavior-y: contain;
  }
}

/* Fast138: wider product cards and a cleaner in-card quantity stepper. */
@media (max-width: 640px) {
  body:not([data-route="search"]) .product-grid:not(.search-product-list) {
    gap: 8px !important;
  }

  body:not([data-route="search"]) .rail {
    grid-auto-columns: clamp(166px, 46vw, 184px) !important;
    gap: 10px !important;
    padding-inline: 2px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card,
  body:not([data-route="search"]) .rail .product-card {
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(18, 18, 24, 0.055) !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-media,
  body:not([data-route="search"]) .rail .product-media {
    height: clamp(120px, 35vw, 148px) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-body,
  body:not([data-route="search"]) .rail .product-body {
    padding: 8px 9px 6px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
  body:not([data-route="search"]) .rail .product-actions {
    min-height: 42px !important;
    padding: 0 9px 9px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button:not(.cart-control),
  body:not([data-route="search"]) .rail .add-button:not(.cart-control) {
    min-height: 33px !important;
    border-radius: 11px !important;
    font-size: 9.4px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only),
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) {
    min-height: 33px !important;
    display: grid !important;
    grid-template-columns: minmax(46px, 1fr) 86px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    border-radius: 11px !important;
    padding: 4px 5px 4px 8px !important;
    overflow: hidden !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label {
    min-width: 0 !important;
    display: block !important;
    color: #fff !important;
    font-size: 8.6px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 86px !important;
    min-width: 86px !important;
    height: 25px !important;
    min-height: 25px !important;
    display: grid !important;
    grid-template-columns: 24px 28px 24px !important;
    place-items: center !important;
    gap: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    padding: 2px !important;
    justify-self: end !important;
    direction: ltr !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"] {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #14141a !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
    background: var(--nion-solid-badge) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(180, 91, 216, 0.26) !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) strong,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) strong {
    width: 26px !important;
    min-width: 26px !important;
    height: 21px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #14141a !important;
    font-size: 10.8px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-flash-only,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-flash-only {
    min-height: 33px !important;
    place-items: center !important;
    padding: 5px 8px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-flash-only .cart-added-label,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-flash-only .cart-added-label {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
  }
}

@media (max-width: 374px) {
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only),
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 4px !important;
    padding-inline: 6px 4px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label {
    font-size: 8px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 78px !important;
    min-width: 78px !important;
    grid-template-columns: 22px 26px 22px !important;
  }
}

html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) {
  background: #fff !important;
  color: #111116 !important;
}

html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
html[data-theme="dark"] body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label {
  color: #111116 !important;
}

html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #f1f1f5 !important;
}

/* Fast139: exact numeric centering for cart steppers and cart badges. */
:root {
  --nion-card-stepper-cell: 22px;
  --nion-card-stepper-gap: 3px;
}

#cartCount,
.cart-button span,
.notification-count {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  border: 1.5px solid #fff !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
}

@media (max-width: 640px) {
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only),
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only),
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) {
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: minmax(42px, 1fr) 78px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    direction: rtl !important;
    border-radius: 12px !important;
    padding: 4px 6px 4px 7px !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    font-size: 8.8px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 78px !important;
    min-width: 78px !important;
    height: 26px !important;
    min-height: 26px !important;
    display: grid !important;
    grid-template-columns:
      var(--nion-card-stepper-cell)
      var(--nion-card-stepper-cell)
      var(--nion-card-stepper-cell) !important;
    grid-auto-flow: column !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    gap: var(--nion-card-stepper-gap) !important;
    border-radius: 999px !important;
    padding: 2px !important;
    direction: rtl !important;
    justify-self: end !important;
    box-sizing: border-box !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) strong,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) strong,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) strong,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) strong {
    width: var(--nion-card-stepper-cell) !important;
    min-width: var(--nion-card-stepper-cell) !important;
    max-width: var(--nion-card-stepper-cell) !important;
    height: var(--nion-card-stepper-cell) !important;
    min-height: var(--nion-card-stepper-cell) !important;
    max-height: var(--nion-card-stepper-cell) !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
    font-style: normal !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    vertical-align: middle !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .add-button.cart-control.is-added:not(.is-flash-only) strong,
  body:not([data-route="search"]) .rail .add-button.cart-control.is-added:not(.is-flash-only) strong,
  body[data-route="search"] .search-product-list .add-button.cart-control.is-added:not(.is-flash-only) strong,
  .favorite-mini-action .add-button.cart-control.is-added:not(.is-flash-only) strong {
    font-size: 11px !important;
    font-weight: 950 !important;
  }

  .cart-item-stepper {
    width: 102px !important;
    min-width: 102px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: grid !important;
    grid-template-columns: 34px 34px 34px !important;
    align-items: center !important;
    justify-items: center !important;
    direction: ltr !important;
    border-radius: 10px !important;
  }

  .cart-item-stepper button,
  .cart-item-stepper span {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
    font-style: normal !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .cart-item-stepper .cart-stepper-plus,
  .cart-item-stepper .cart-stepper-minus {
    font-size: 22px !important;
    font-weight: 300 !important;
  }

  .cart-item-stepper span {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .cart-item-stepper .remove-cart-button,
  .cart-item-stepper .cart-stepper-minus {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
  }

  .cart-item-stepper .remove-cart-button .nion-icon {
    display: block !important;
    margin: 0 !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions,
  body:not([data-route="search"]) .rail .product-actions,
  body[data-route="search"] .search-product-list .product-actions {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions > .add-button,
  body:not([data-route="search"]) .rail .product-actions > .add-button,
  body[data-route="search"] .search-product-list .product-actions > .add-button,
  body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-actions > .cart-control,
  body:not([data-route="search"]) .rail .product-actions > .cart-control,
  body[data-route="search"] .search-product-list .product-actions > .cart-control {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
}

/* Fast142: orders page dark mode without white tab/card surfaces. */
html[data-theme="dark"] body[data-route="orders"],
html[data-theme="dark"] body[data-route="orders"] #app,
html[data-theme="dark"] body[data-route="orders"] .page,
html[data-theme="dark"] body[data-route="orders"] .orders-screen {
  background: #0d0d12 !important;
  color: #f7f4ff !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-page-head span,
html[data-theme="dark"] body[data-route="orders"] .account-order-title em,
html[data-theme="dark"] body[data-route="orders"] .account-order-summary em,
html[data-theme="dark"] body[data-route="orders"] .account-order-note,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress-head span,
html[data-theme="dark"] body[data-route="orders"] .account-timeline-step small {
  color: rgba(247, 244, 255, 0.58) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-page-head strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-title strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-summary strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress-head strong,
html[data-theme="dark"] body[data-route="orders"] .account-timeline-step strong {
  color: #f8f5ff !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-back {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
    #15151d !important;
  color: #f8f5ff !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs {
  background:
    linear-gradient(180deg, rgba(13, 13, 18, 0.98), rgba(13, 13, 18, 0.86) 70%, rgba(13, 13, 18, 0)) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a,
html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs > span {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #15151d !important;
  color: rgba(247, 244, 255, 0.72) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a b {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(247, 244, 255, 0.86) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active {
  border-color: rgba(188, 165, 238, 0.3) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(121, 239, 215, 0.32), transparent 42%),
    linear-gradient(135deg, rgba(121, 239, 215, 0.88), rgba(169, 196, 245, 0.9) 46%, rgba(223, 176, 238, 0.95)) !important;
  color: #101014 !important;
  box-shadow:
    0 14px 28px rgba(111, 83, 217, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active b {
  background: rgba(13, 13, 18, 0.22) !important;
  color: #101014 !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-card {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.075), transparent 34%),
    radial-gradient(circle at 94% 14%, rgba(223, 176, 238, 0.09), transparent 38%),
    linear-gradient(180deg, #171720 0%, #13131b 100%) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-compact.is-open .account-order-toggle {
  background:
    radial-gradient(circle at 14% 18%, rgba(121, 239, 215, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-chevron {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(247, 244, 255, 0.72) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-compact.is-open .account-order-chevron {
  background: rgba(188, 165, 238, 0.16) !important;
  color: #dfb0ee !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-summary > span,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress,
html[data-theme="dark"] body[data-route="orders"] .account-order-details {
  border-color: rgba(255, 255, 255, 0.075) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.03)),
    #111118 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-cta,
html[data-theme="dark"] body[data-route="orders"] .account-order-review {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #f8f5ff !important;
  color: #111116 !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-review .nion-icon {
  color: #b45bd8 !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-timeline-step:not(.is-active):not(.is-done) .account-timeline-dot {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #191923 !important;
  color: rgba(247, 244, 255, 0.56) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: rgba(121, 239, 215, 0.26) !important;
  background:
    linear-gradient(#171720, #171720) padding-box,
    linear-gradient(135deg, rgba(121, 239, 215, 0.85), rgba(188, 165, 238, 0.72)) border-box !important;
  color: #79efd7 !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-timeline::before {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-card-skeleton {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
    #15151d !important;
  background-size: 220% 100% !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-empty {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
    #15151d !important;
}

/* Launch orders: four customer-facing stages with a compact, readable mobile flow. */
body[data-route="orders"] .orders-screen {
  max-width: 680px;
  padding-top: 8px;
}

body[data-route="orders"] .orders-page-head {
  margin-bottom: 10px;
}

body[data-route="orders"] .orders-status-tabs {
  display: flex;
  gap: 7px;
  margin-inline: -12px;
  padding: 7px 12px 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
}

body[data-route="orders"] .orders-status-tabs a,
body[data-route="orders"] .orders-status-tabs > span {
  flex: 0 0 92px;
  min-height: 54px;
  scroll-snap-align: start;
  border-radius: 14px;
}

body[data-route="orders"] .orders-status-tabs a:first-child,
body[data-route="orders"] .orders-status-tabs > span:first-child {
  flex-basis: 74px;
}

body[data-route="orders"] .orders-status-tabs .nion-icon {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.8;
}

body[data-route="orders"] .account-order-card {
  border-radius: 16px !important;
  box-shadow:
    0 10px 28px rgba(20, 19, 34, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

body[data-route="orders"] .account-order-trigger {
  padding: 14px 13px 11px !important;
}

body[data-route="orders"] .account-order-body {
  padding-top: 0 !important;
}

body[data-route="orders"] .account-order-status-badge,
body[data-route="orders"] .account-order-status-preparing .account-order-status-badge,
body[data-route="orders"] .account-order-status-shipping .account-order-status-badge,
body[data-route="orders"] .account-order-status-delivered .account-order-status-badge {
  min-height: 26px !important;
  padding: 6px 9px !important;
  font-size: 9.8px !important;
}

body[data-route="orders"] .account-order-status-pending .account-order-status-badge {
  background: linear-gradient(135deg, #d8b6ef, #a9c4f5) !important;
}

body[data-route="orders"] .account-order-status-preparing .account-order-status-badge {
  background: linear-gradient(135deg, #9adfd7, #86bde9) !important;
}

body[data-route="orders"] .account-order-status-shipping .account-order-status-badge {
  background: linear-gradient(135deg, #7f9ce8, #a779dd) !important;
}

body[data-route="orders"] .account-order-status-delivered .account-order-status-badge {
  background: linear-gradient(135deg, #51bd94, #7bd5b4) !important;
}

body[data-route="orders"] .account-order-progress {
  margin: 0 11px 11px !important;
  padding: 11px 8px 9px !important;
  border-radius: 14px !important;
}

body[data-route="orders"] .account-order-timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 82px;
  padding-top: 5px !important;
}

body[data-route="orders"] .account-order-timeline::before,
body[data-route="orders"] .account-order-timeline-fill {
  top: 21px !important;
  inset-inline: 34px !important;
}

body[data-route="orders"] .account-order-timeline-fill {
  right: 34px !important;
}

html[dir="ltr"] body[data-route="orders"] .account-order-timeline-fill {
  right: auto !important;
  left: 34px !important;
}

body[data-route="orders"] .account-timeline-dot {
  width: 30px !important;
  height: 30px !important;
}

body[data-route="orders"] .account-timeline-dot .nion-icon {
  width: 13px !important;
  height: 13px !important;
}

body[data-route="orders"] .account-timeline-step strong {
  max-width: 72px !important;
  min-height: 24px !important;
  font-size: 8.8px !important;
  line-height: 1.25 !important;
}

body[data-route="orders"] .account-timeline-step small {
  max-width: 68px !important;
  font-size: 7.5px !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs {
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.96), rgba(10, 10, 15, 0.78) 72%, transparent);
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a,
html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs > span {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(25, 25, 34, 0.9);
  color: rgba(248, 246, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(82, 196, 179, 0.92), rgba(130, 114, 215, 0.94), rgba(181, 91, 216, 0.94));
  color: #fff;
}

/* Fast143: lightweight three-language support with clean LTR English surfaces. */
.language-button-mark {
  min-width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.26), rgba(188, 165, 238, 0.3), rgba(223, 176, 238, 0.28));
  color: #211f27;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0;
}

html[data-theme="dark"] .language-button-mark {
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.2), rgba(188, 165, 238, 0.24), rgba(223, 176, 238, 0.2));
  color: #f8f7ff;
}

.account-language-panel {
  display: grid;
  gap: 8px;
}

.account-language-card {
  width: 100%;
  border: 1px solid rgba(188, 165, 238, 0.16);
  cursor: pointer;
  text-align: inherit;
}

.account-language-card.is-active {
  border-color: rgba(166, 110, 232, 0.32);
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.17), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 255, 0.96));
  box-shadow: 0 12px 26px rgba(128, 99, 219, 0.1);
}

html[data-theme="dark"] .account-language-card.is-active {
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.13), transparent 36%),
    linear-gradient(135deg, rgba(30, 30, 38, 0.98), rgba(24, 23, 31, 0.96));
}

html[dir="ltr"] body,
html[dir="ltr"] .top-strip,
html[dir="ltr"] .site-header,
html[dir="ltr"] .page,
html[dir="ltr"] .footer,
html[dir="ltr"] .modal,
html[dir="ltr"] .notifications-panel {
  direction: ltr;
}

html[dir="ltr"] .search input,
html[dir="ltr"] body[data-route="home"] .search input {
  direction: ltr !important;
  text-align: left;
  padding-inline: 18px 52px;
}

html[dir="ltr"] .search button,
html[dir="ltr"] body[data-route="home"] .search button {
  left: auto;
  right: 5px;
}

html[dir="ltr"] .section-head,
html[dir="ltr"] .page-title,
html[dir="ltr"] .offers-title,
html[dir="ltr"] .account-profile-card,
html[dir="ltr"] .account-menu-list,
html[dir="ltr"] .cart-layout,
html[dir="ltr"] .orders-screen,
html[dir="ltr"] .about-page {
  text-align: left;
}

html[dir="ltr"] .product-card,
html[dir="ltr"] .favorite-mini-card,
html[dir="ltr"] .suggestion-product,
html[dir="ltr"] .cart-item,
html[dir="ltr"] .account-order-card,
html[dir="ltr"] .order-review-panel,
html[dir="ltr"] .section-hub {
  direction: ltr;
}

html[dir="ltr"] .price-row,
html[dir="ltr"] .cart-stepper,
html[dir="ltr"] .cart-item-stepper,
html[dir="ltr"] .account-order-summary,
html[dir="ltr"] .account-order-timeline {
  direction: ltr !important;
}

html[dir="ltr"] .brand-name,
html[dir="ltr"] .product-name,
html[dir="ltr"] .stock,
html[dir="ltr"] .rating-row {
  text-align: left;
}

html[dir="ltr"] .fav-button {
  inset-inline-start: auto;
  inset-inline-end: 8px;
}

html[dir="ltr"] .notification-count,
html[dir="ltr"] .cart-button span {
  direction: ltr;
}

.header-actions #languageButton,
body[data-route="home"] .header-actions #languageButton {
  display: inline-grid !important;
  place-items: center;
}

@media (max-width: 640px) {
  .header-actions #languageButton,
  body[data-route="home"] .header-actions #languageButton {
    display: inline-grid !important;
  }
}

/* Fast147: language switching lives only in Account > Language. */
.header-actions #languageButton,
body[data-route="home"] .header-actions #languageButton {
  display: none !important;
}

/* Fast152: keep listing product cards as wide as the homepage cards on mobile. */
@media (max-width: 640px) {
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="cart"]) .offers-product-section,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="cart"]) .page > .product-grid:not(.search-product-list),
  body[data-route="cart"] #app .page .section:has(.product-grid:not(.search-product-list)),
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="cart"]) .page > .product-grid-loading {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin-inline: -12px !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="cart"]) .product-grid:not(.search-product-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="cart"]) .product-grid:not(.search-product-list) .product-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-route="offers"] #app .page > .offers-product-section.offers-product-section,
  body[data-route="category"] #app .page > .product-grid.product-grid:not(.search-product-list),
  body[data-route="brand"] #app .page > .product-grid.product-grid:not(.search-product-list),
  body[data-route="collection"] #app .page > .product-grid.product-grid:not(.search-product-list),
  body[data-route="cart"] #app .page .section:has(.product-grid:not(.search-product-list)) {
    width: calc(100% + 24px) !important;
  }
}

/* Fast153: Kurdish/Sorani gets a more readable Arabic-script font stack. */
:root {
  --font-ku: "Noto Sans Arabic", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[data-lang="ku"],
html[lang="ckb"] {
  font-family: var(--font-ku) !important;
}

html[data-lang="ku"] body,
html[data-lang="ku"] button,
html[data-lang="ku"] input,
html[data-lang="ku"] select,
html[data-lang="ku"] textarea {
  font-family: var(--font-ku) !important;
}

html[data-lang="ku"] body {
  line-height: 1.68;
}

html[data-lang="ku"] .top-strip,
html[data-lang="ku"] .section-head,
html[data-lang="ku"] .page-title,
html[data-lang="ku"] .product-card,
html[data-lang="ku"] .favorite-mini-card,
html[data-lang="ku"] .cart-item,
html[data-lang="ku"] .account-menu-list,
html[data-lang="ku"] .orders-screen,
html[data-lang="ku"] .modal {
  font-family: var(--font-ku) !important;
}

html[data-lang="ku"] .section-head h2,
html[data-lang="ku"] .page-title h1,
html[data-lang="ku"] .offers-title h1,
html[data-lang="ku"] .detail-info h1,
html[data-lang="ku"] .account-order-title strong {
  font-family: var(--font-ku) !important;
  font-weight: 800 !important;
  line-height: 1.42 !important;
}

html[data-lang="ku"] .product-name,
html[data-lang="ku"] .brand-name,
html[data-lang="ku"] .stock,
html[data-lang="ku"] .rating-row,
html[data-lang="ku"] .add-button,
html[data-lang="ku"] .cart-added-label,
html[data-lang="ku"] .account-menu-row,
html[data-lang="ku"] .orders-status-tabs a,
html[data-lang="ku"] .orders-status-tabs > span {
  font-family: var(--font-ku) !important;
  line-height: 1.48 !important;
}

html[data-lang="ku"] .product-name {
  font-weight: 650 !important;
}

html[data-lang="ku"] .brand-name,
html[data-lang="ku"] .stock,
html[data-lang="ku"] .rating-row {
  font-weight: 600 !important;
}

html[data-lang="ku"] .add-button {
  font-weight: 800 !important;
}

html[data-lang="ku"] .search input,
html[data-lang="ku"] body[data-route="home"] .search input {
  font-family: var(--font-ku) !important;
  font-weight: 500 !important;
}

/* Fast154: premium mobile search sheet and cleaner search-result cards. */
.suggestions[hidden] {
  display: none !important;
}

.suggestions .suggestion-product,
.suggestion-product {
  border-radius: 14px !important;
}

@media (max-width: 640px) {
  .search,
  body[data-route="home"] .search {
    isolation: isolate;
  }

  .suggestions,
  body[data-route="home"] .suggestions {
    position: absolute !important;
    inset-block-start: calc(100% + 8px) !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    z-index: 130 !important;
    width: min(330px, calc(100vw - 28px)) !important;
    max-width: none !important;
    max-height: min(430px, calc(100svh - 168px)) !important;
    display: grid !important;
    gap: 7px !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(181, 163, 232, 0.22) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 255, 0.9)),
      rgba(255, 255, 255, 0.9) !important;
    box-shadow:
      0 22px 44px rgba(18, 18, 24, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.52) inset !important;
    backdrop-filter: blur(16px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
    transform: translateZ(0) !important;
    scrollbar-width: thin;
  }

  html[dir="ltr"] .suggestions,
  html[dir="ltr"] body[data-route="home"] .suggestions {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
  }

  .suggestions .suggestion-product,
  .suggestion-product {
    width: 100% !important;
    min-height: 74px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(18, 18, 24, 0.07) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #15151b !important;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.06) !important;
    text-align: start !important;
    overflow: hidden !important;
    direction: inherit !important;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease !important;
  }

  .suggestions .suggestion-product::after,
  .suggestion-product::after {
    content: "";
    width: 7px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(121, 239, 215, 0.85), rgba(180, 91, 216, 0.85));
    opacity: 0.42;
  }

  .suggestions .suggestion-product:is(:hover, :focus-visible),
  .suggestion-product:is(:hover, :focus-visible) {
    border-color: rgba(180, 91, 216, 0.24) !important;
    background:
      linear-gradient(135deg, rgba(121, 239, 215, 0.12), rgba(239, 138, 222, 0.13)),
      rgba(255, 255, 255, 0.98) !important;
    transform: translateY(-1px) !important;
  }

  .suggestion-product-image {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(18, 18, 24, 0.055) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 52% 42%, rgba(121, 239, 215, 0.12), transparent 45%),
      linear-gradient(180deg, #ffffff, #f7f7fb) !important;
  }

  .suggestion-product-image img {
    width: 100% !important;
    height: 100% !important;
    padding: 6px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .suggestion-product-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 3px !important;
    align-content: center !important;
  }

  .suggestion-product-copy small {
    color: #8b8b96 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .suggestion-product-copy strong {
    color: #15151b !important;
    display: -webkit-box !important;
    min-height: 30px !important;
    overflow: hidden !important;
    font-size: 12.4px !important;
    font-weight: 750 !important;
    line-height: 1.34 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .suggestion-price-row {
    min-height: 18px !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    margin: 1px 0 0 !important;
    overflow: hidden !important;
  }

  .suggestion-price-row b {
    color: #15151b !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .suggestion-price-row i {
    color: #9a9aa4 !important;
    font-size: 10px !important;
    font-style: normal !important;
    line-height: 1.1 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
  }

  body[data-route="search"] .page-title {
    margin-block: 8px 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(181, 163, 232, 0.16) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.16), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 247, 255, 0.95)) !important;
    box-shadow: 0 12px 24px rgba(18, 18, 24, 0.06) !important;
  }

  body[data-route="search"] .page-title h1 {
    gap: 8px !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  body[data-route="search"] .page-title p {
    margin: 5px 0 0 !important;
    font-size: 12px !important;
  }

  body[data-route="search"] .search-product-list {
    gap: 8px !important;
  }

  body[data-route="search"] .search-product-list .product-card {
    min-height: 116px !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    border-radius: 15px !important;
    border-color: rgba(18, 18, 24, 0.07) !important;
    box-shadow: 0 10px 22px rgba(18, 18, 24, 0.07) !important;
  }

  body[data-route="search"] .search-product-list .product-media {
    min-height: 116px !important;
    border-radius: 13px !important;
    margin: 7px 0 7px 7px !important;
    border: 1px solid rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="search"] .search-product-list .product-body {
    padding: 10px 11px 4px !important;
  }

  body[data-route="search"] .search-product-list .product-actions {
    padding: 0 11px 9px !important;
  }

  body[data-route="search"] .search-product-list .add-button,
  body[data-route="search"] .search-product-list .cart-control {
    min-height: 34px !important;
    border-radius: 11px !important;
  }
}

html[data-theme="dark"] .suggestions,
html[data-theme="dark"] body[data-route="home"] .suggestions {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(22, 22, 30, 0.94), rgba(14, 14, 20, 0.92)),
    rgba(16, 16, 22, 0.92) !important;
  box-shadow:
    0 24px 46px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset !important;
}

html[data-theme="dark"] .suggestions .suggestion-product,
html[data-theme="dark"] .suggestion-product {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(28, 28, 38, 0.94) !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .suggestions .suggestion-product:is(:hover, :focus-visible),
html[data-theme="dark"] .suggestion-product:is(:hover, :focus-visible) {
  border-color: rgba(180, 91, 216, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.12), rgba(180, 91, 216, 0.14)),
    rgba(32, 32, 43, 0.98) !important;
}

html[data-theme="dark"] .suggestion-product-image {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(121, 239, 215, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(37, 37, 48, 0.96), rgba(25, 25, 34, 0.96)) !important;
}

html[data-theme="dark"] .suggestion-product-copy small,
html[data-theme="dark"] .suggestion-price-row i {
  color: rgba(244, 242, 255, 0.58) !important;
}

html[data-theme="dark"] .suggestion-product-copy strong,
html[data-theme="dark"] .suggestion-price-row b {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body[data-route="search"] .page-title {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(28, 28, 38, 0.98), rgba(20, 20, 28, 0.96)) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] body[data-route="search"] .search-product-list .product-card {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: var(--nion-theme-surface) !important;
}

body[data-route="search"] .filters {
  gap: 8px !important;
  margin: 12px 0 18px !important;
}

body[data-route="search"] .filters .chip {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(181, 163, 232, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #15151b !important;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

html[data-theme="dark"] body[data-route="search"] .filters .chip {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(28, 28, 38, 0.92) !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] body[data-route="search"] .filters .chip:is(:hover, :focus-visible) {
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.12), rgba(180, 91, 216, 0.16)),
    rgba(32, 32, 43, 0.98) !important;
}

/* Fast158: hidden/empty search suggestions must never leave a visible white rail. */
#suggestions[hidden],
#suggestions:empty,
.search #suggestions[hidden],
body[data-route="home"] .search #suggestions[hidden],
body[data-route="home"] .search #suggestions:empty {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Fast161: stable section rails and stronger brand logo tiles. */
.section-hub-tabs,
.category-sibling-track {
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
}

.section-hub-tabs a.active,
.category-sibling-track a.active {
  scroll-margin-inline: 36px;
}

.brand-grid,
.brand-rail {
  align-items: stretch !important;
}

.brand-rail {
  grid-auto-columns: 124px !important;
  gap: 11px !important;
}

.brand-grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 12px !important;
}

.brand-tile {
  min-height: 112px !important;
  grid-template-rows: 68px auto !important;
  gap: 8px !important;
  padding: 11px 9px !important;
  border-radius: 10px !important;
}

.brand-tile img {
  width: 96px !important;
  height: 58px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.brand-lettermark {
  width: 92px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 12%, rgba(121, 239, 215, 0.72), transparent 34%),
    linear-gradient(135deg, rgba(19, 19, 24, 0.98), rgba(156, 112, 227, 0.9));
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: 0 12px 24px rgba(43, 31, 71, 0.14);
}

.brand-tile span {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .brand-tile {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(24, 24, 32, 0.96) !important;
}

html[data-theme="dark"] .brand-tile span {
  color: rgba(247, 246, 255, 0.88) !important;
}

html[data-theme="dark"] .brand-lettermark {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

/* Cart checkout polish: clean mobile-first cart, saved address, and order confirmation. */
body[data-route="cart"] .cart-checkout-layout {
  align-items: start !important;
  gap: 14px !important;
}

body[data-route="cart"] .cart-items-panel,
body[data-route="cart"] .cart-summary-panel {
  border: 1px solid rgba(18, 18, 24, 0.06) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 249, 255, 0.96)) !important;
  box-shadow: 0 18px 42px rgba(22, 18, 35, 0.06) !important;
}

body[data-route="cart"] .cart-items-panel {
  display: grid !important;
  gap: 9px !important;
  padding: 10px !important;
}

body[data-route="cart"] .cart-summary-panel {
  display: grid !important;
  gap: 12px !important;
  padding: 13px !important;
}

body[data-route="cart"] .cart-panel-head,
body[data-route="cart"] .checkout-summary-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 2px 2px 5px !important;
}

body[data-route="cart"] .cart-panel-head strong,
body[data-route="cart"] .checkout-summary-top h2 {
  margin: 0 !important;
  color: #111116 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body[data-route="cart"] .cart-panel-head span,
body[data-route="cart"] .checkout-summary-top > span {
  color: rgba(21, 21, 26, 0.52) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

body[data-route="cart"] .checkout-summary-top > span {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(121, 239, 215, 0.13) !important;
  color: #2d756f !important;
  padding: 6px 9px !important;
  white-space: nowrap !important;
}

body[data-route="cart"] .checkout-coupon-box {
  display: grid !important;
  gap: 8px !important;
  border: 1px solid rgba(143, 103, 241, 0.13) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 6% 0%, rgba(121, 239, 215, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(247, 245, 255, 0.96), rgba(255, 255, 255, 0.98)) !important;
  padding: 10px !important;
}

body[data-route="cart"] .checkout-coupon-head,
body[data-route="cart"] .checkout-coupon-entry {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body[data-route="cart"] .checkout-coupon-head span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #15151b !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

body[data-route="cart"] .checkout-coupon-head .nion-icon {
  color: #8f67f1 !important;
}

body[data-route="cart"] .checkout-coupon-remove {
  border: 0 !important;
  background: transparent !important;
  color: #8f67f1 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 3px 0 !important;
}

body[data-route="cart"] .checkout-coupon-entry input {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: 40px !important;
  border: 1px solid rgba(18, 18, 24, 0.08) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #15151b !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

body[data-route="cart"] .checkout-coupon-entry button {
  flex: 0 0 auto !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #111116 !important;
  color: #fff !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 12px 22px rgba(17, 17, 22, 0.14) !important;
}

body[data-route="cart"] .checkout-coupon-entry button:disabled {
  opacity: 0.56 !important;
  box-shadow: none !important;
}

body[data-route="cart"] .checkout-coupon-box p {
  margin: 0 !important;
  color: rgba(21, 21, 26, 0.54) !important;
  font-size: 10.8px !important;
  font-weight: 820 !important;
  line-height: 1.45 !important;
}

body[data-route="cart"] .checkout-coupon-box p.is-applied,
body[data-route="cart"] .coupon-discount-row strong {
  color: #0f9f82 !important;
}

body[data-route="cart"] .checkout-coupon-box p.is-error {
  color: #d7193f !important;
}

body[data-route="cart"] .cart-item {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  align-items: center !important;
  border: 1px solid rgba(18, 18, 24, 0.06) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  padding: 10px !important;
  box-shadow: 0 10px 22px rgba(20, 18, 28, 0.035) !important;
}

body[data-route="cart"] .cart-item:last-child {
  border-bottom: 1px solid rgba(18, 18, 24, 0.06) !important;
}

body[data-route="cart"] .cart-item-media {
  width: 82px !important;
  height: 82px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: hidden !important;
  text-decoration: none !important;
  font-size: 0 !important;
}

body[data-route="cart"] .cart-item-media img,
body[data-route="cart"] .cart-item img {
  width: 78px !important;
  height: 78px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  object-fit: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

body[data-route="cart"] .cart-item-media.is-empty::after {
  content: "";
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(121, 239, 215, 0.55), transparent 34%),
    linear-gradient(135deg, rgba(188, 165, 238, 0.34), rgba(223, 176, 238, 0.28)) !important;
}

body[data-route="cart"] .cart-item-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

body[data-route="cart"] .cart-item-copy .brand-name {
  color: rgba(21, 21, 26, 0.46) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body[data-route="cart"] .cart-item-title {
  color: #111116 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-route="cart"] .cart-item .price-row {
  margin-top: 1px !important;
}

body[data-route="cart"] .cart-item-actions {
  min-width: 108px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

body[data-route="cart"] .cart-item-stepper {
  width: 108px !important;
  min-width: 108px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 36px 36px 36px !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 18, 24, 0.09) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 16px rgba(18, 18, 24, 0.045) !important;
}

body[data-route="cart"] .cart-item-stepper > * + * {
  border-left: 1px solid rgba(18, 18, 24, 0.08) !important;
}

body[data-route="cart"] .cart-item-stepper button,
body[data-route="cart"] .cart-item-stepper span {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
}

body[data-route="cart"] .cart-item-stepper .cart-stepper-plus,
body[data-route="cart"] .cart-item-stepper .cart-stepper-minus {
  background: #fff !important;
  color: #111116 !important;
  font-size: 21px !important;
  font-weight: 350 !important;
}

body[data-route="cart"] .cart-item-stepper span {
  background: #fff !important;
  color: #111116 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body[data-route="cart"] .cart-item-stepper .remove-cart-button {
  background: rgba(225, 42, 72, 0.06) !important;
  color: #d7193f !important;
}

body[data-route="cart"] .cart-item-stepper .remove-cart-button .nion-icon {
  width: 16px !important;
  height: 16px !important;
  color: #d7193f !important;
  stroke-width: 1.65 !important;
}

body[data-route="cart"] .summary-row {
  min-height: 34px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(18, 18, 24, 0.055) !important;
}

body[data-route="cart"] .summary-row span {
  color: rgba(21, 21, 26, 0.58) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body[data-route="cart"] .summary-row strong {
  color: #111116 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body[data-route="cart"] .summary-row.total {
  border-bottom: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(121, 239, 215, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(246, 244, 255, 0.94), rgba(255, 255, 255, 0.98)) !important;
  padding: 12px !important;
}

body[data-route="cart"] .summary-row.total strong {
  color: #7d45d8 !important;
  font-size: 17px !important;
}

body[data-route="cart"] .checkout-trust-row {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  border: 1px solid rgba(121, 239, 215, 0.18) !important;
  border-radius: 13px !important;
  background: rgba(121, 239, 215, 0.08) !important;
  color: rgba(21, 21, 26, 0.62) !important;
  padding: 9px 10px !important;
  font-size: 10.8px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

body[data-route="cart"] .checkout-trust-row .nion-icon {
  color: #6f55d4 !important;
}

body[data-route="cart"] .checkout-form [data-checkout-submit] {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 28px rgba(17, 17, 22, 0.16) !important;
}

body[data-route="cart"] .checkout-form [data-checkout-submit]:disabled {
  opacity: 0.78 !important;
  cursor: wait !important;
}

body[data-route="cart"] .checkout-form [data-checkout-submit]:disabled .nion-icon {
  animation: nion-spin 0.9s linear infinite;
}

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

html[data-theme="dark"] body[data-route="cart"] .cart-items-panel,
html[data-theme="dark"] body[data-route="cart"] .cart-summary-panel {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #121218 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-panel-head strong,
html[data-theme="dark"] body[data-route="cart"] .checkout-summary-top h2,
html[data-theme="dark"] body[data-route="cart"] .cart-item-title,
html[data-theme="dark"] body[data-route="cart"] .summary-row strong {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-panel-head span,
html[data-theme="dark"] body[data-route="cart"] .checkout-summary-top > span,
html[data-theme="dark"] body[data-route="cart"] .cart-item-copy .brand-name,
html[data-theme="dark"] body[data-route="cart"] .summary-row span,
html[data-theme="dark"] body[data-route="cart"] .checkout-trust-row {
  color: var(--nion-theme-muted) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-item {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: #181820 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-item-media,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper button,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper span {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #20202a !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper > * + *,
html[data-theme="dark"] body[data-route="cart"] .summary-row {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper .remove-cart-button {
  background: rgba(255, 86, 115, 0.12) !important;
  color: #ff6b87 !important;
}

html[data-theme="dark"] body[data-route="cart"] .summary-row.total {
  background:
    radial-gradient(circle at 0% 0%, rgba(121, 239, 215, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(33, 31, 43, 0.98), rgba(24, 24, 32, 0.98)) !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-trust-row,
html[data-theme="dark"] body[data-route="cart"] .checkout-summary-top > span {
  border-color: rgba(121, 239, 215, 0.14) !important;
  background: rgba(121, 239, 215, 0.08) !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-coupon-box {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #181820 !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-coupon-head span {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-coupon-entry input {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #20202a !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-coupon-entry button {
  background: #f7f7fb !important;
  color: #111116 !important;
}

html[data-theme="dark"] body[data-route="cart"] .checkout-coupon-box p {
  color: var(--nion-theme-muted) !important;
}

@media (min-width: 900px) {
  body[data-route="cart"] .cart-summary-panel {
    position: sticky !important;
    top: 92px !important;
  }
}

@media (max-width: 640px) {
  body[data-route="cart"] .cart-checkout-layout {
    gap: 11px !important;
  }

  body[data-route="cart"] .cart-items-panel,
  body[data-route="cart"] .cart-summary-panel {
    border-radius: 17px !important;
  }

  body[data-route="cart"] .cart-item {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px !important;
  }

  body[data-route="cart"] .cart-item-media {
    width: 74px !important;
    height: 74px !important;
  }

  body[data-route="cart"] .cart-item-media img,
  body[data-route="cart"] .cart-item img {
    width: 70px !important;
    height: 70px !important;
  }

  body[data-route="cart"] .cart-item-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  body[data-route="cart"] .cart-item-title {
    font-size: 12.3px !important;
    line-height: 1.42 !important;
  }

  body[data-route="cart"] .checkout-summary-top {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
}

/* Product detail reviews and multi-image carousel polish. */
body[data-route="product"] .detail-thumbs {
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 4px 4px !important;
  scrollbar-width: none !important;
}

body[data-route="product"] .detail-thumbs::-webkit-scrollbar {
  display: none !important;
}

body[data-route="product"] .detail-thumbs button {
  flex: 0 0 auto !important;
}

body[data-route="product"] .detail-review-summary {
  margin-block: -2px 2px !important;
}

html[data-theme="dark"] .detail-review-summary,
html[data-theme="dark"] .product-reviews-total,
html[data-theme="dark"] .product-review-card,
html[data-theme="dark"] .product-review-empty {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #181820 !important;
  color: var(--nion-theme-ink) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .product-review-card p {
  color: rgba(245, 246, 255, 0.78) !important;
}

html[data-theme="dark"] .detail-review-summary span:not(.review-stars):not(.review-star):not(.nion-icon),
html[data-theme="dark"] .product-reviews-total span:last-child,
html[data-theme="dark"] .product-review-card time,
html[data-theme="dark"] .product-review-rank span,
html[data-theme="dark"] .product-review-empty > span:last-child {
  color: rgba(245, 246, 255, 0.58) !important;
}

html[data-theme="dark"] .product-review-rank {
  background: rgba(243, 169, 26, 0.1) !important;
}

html[data-theme="dark"] .product-review-login,
html[data-theme="dark"] .product-review-form,
html[data-theme="dark"] .product-review-success {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(121, 239, 215, 0.08), transparent 38%),
    #181820 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .product-review-login strong,
html[data-theme="dark"] .product-review-success strong,
html[data-theme="dark"] .product-review-form-head strong {
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .product-review-form textarea {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #20202a !important;
  color: var(--nion-theme-ink) !important;
}

html[data-theme="dark"] .product-review-login button,
html[data-theme="dark"] .product-review-submit {
  background: #f7f7fb !important;
  color: #101014 !important;
}

body[data-route="product"] .detail-perks {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-route="product"] .detail-perks span {
  line-height: 1.35 !important;
  text-wrap: balance;
}

body[data-route="product"] .detail-perks .detail-policy-note {
  grid-column: 1 / -1 !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
  font-size: clamp(9px, 2.8vw, 11px) !important;
  line-height: 1 !important;
  text-align: center !important;
}

body[data-route="product"] .detail-perks .detail-policy-note .nion-icon {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  align-self: center !important;
  margin: 0 !important;
}

body[data-route="product"] .detail-policy-copy {
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

body[data-route="product"] .detail-policy-copy strong {
  color: #15151a !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-policy-copy strong {
  color: #f8f6ff !important;
}

@media (max-width: 640px) {
  body[data-route="product"] .detail-perks {
    grid-template-columns: 1fr !important;
  }

  body[data-route="product"] .detail-perks .detail-policy-note {
    grid-column: auto !important;
    min-height: 36px !important;
  }

  body[data-route="product"] .product-review-login {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body[data-route="product"] .product-review-login button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body[data-route="product"] .product-review-form-head {
    display: grid !important;
    gap: 10px !important;
  }
}

/* Fast178: homepage hero and API-driven shortcut product circles. */
@media (max-width: 640px) {
  body[data-route="home"] .hero {
    margin: 0 !important;
  }

  body[data-route="home"] .hero-main {
    aspect-ratio: 1.22 / 1 !important;
    min-height: 318px !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  body[data-route="home"] .hero-slide-link {
    cursor: grab !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center bottom !important;
    transform: scale(1.12) translateY(34px) !important;
  }

  body[data-route="home"] .hero-main::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: -1px !important;
    inset-block-end: -1px !important;
    z-index: 5 !important;
    display: block !important;
    height: 24% !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0.76) 78%, #fff 100%),
      radial-gradient(110% 70% at 50% 100%, rgba(121, 239, 215, 0.12), rgba(188, 165, 238, 0.08) 42%, rgba(255, 255, 255, 0) 72%) !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 6 !important;
    inset-block-end: 58px !important;
  }

  body[data-route="home"] .hero-icon-rail {
    position: relative !important;
    z-index: 7 !important;
    width: 100% !important;
    margin: -46px 0 14px !important;
    padding: 0 0 6px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0 46px, #fff 46px 100%) !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 72px !important;
    grid-template-columns: none !important;
    gap: 8px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 13px 2px !important;
    scroll-padding-inline: 13px !important;
    scroll-snap-type: inline mandatory !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 72px !important;
    gap: 5px !important;
    scroll-snap-align: start !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 58px !important;
    height: 58px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eef8fd !important;
    box-shadow: 0 6px 14px rgba(18, 18, 24, 0.045) !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 100% !important;
    height: 100% !important;
    padding: 5px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: transparent !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    width: 72px !important;
    max-width: 72px !important;
    min-height: 26px !important;
    color: #121217 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    background:
      linear-gradient(180deg, rgba(13, 13, 18, 0) 0%, rgba(13, 13, 18, 0.18) 38%, rgba(13, 13, 18, 0.78) 80%, #0d0d12 100%),
      radial-gradient(110% 70% at 50% 100%, rgba(121, 239, 215, 0.12), rgba(188, 165, 238, 0.08) 42%, rgba(13, 13, 18, 0) 72%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    background: linear-gradient(180deg, rgba(13, 13, 18, 0) 0 46px, #0d0d12 46px 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-item span {
    background: #191922 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-item strong {
    color: #f4f5fb !important;
  }
}

/* Fast182: brand shopping rail uses real dashboard logos as the hero element. */
.brand-showcase-section .section-head h2 .nion-icon {
  display: none !important;
}

.brand-rail {
  align-items: stretch !important;
}

.brand-showcase-section .brand-rail {
  grid-auto-columns: 138px !important;
  gap: 12px !important;
  padding-block: 4px 12px !important;
}

.brand-tile {
  min-height: 124px !important;
  display: grid !important;
  grid-template-rows: 76px auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 13px 10px 11px !important;
  border: 1px solid rgba(188, 165, 238, 0.13) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 22px rgba(18, 18, 24, 0.055) !important;
}

.brand-tile-real {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 252, 255, 0.98)) !important;
}

.brand-logo-missing {
  display: none !important;
}

.brand-logo,
.brand-tile img {
  width: 112px !important;
  height: 72px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: saturate(1.03) contrast(1.02) !important;
}

.brand-tile span {
  width: 100% !important;
  min-height: 30px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #19191f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.brand-lettermark {
  width: 104px !important;
  height: 72px !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(121, 239, 215, 0.68), transparent 34%),
    linear-gradient(135deg, rgba(19, 19, 24, 0.98), rgba(156, 112, 227, 0.92)) !important;
  font-size: 22px !important;
}

@media (max-width: 640px) {
  .brand-showcase-section .brand-rail {
    grid-auto-columns: 128px !important;
    gap: 10px !important;
    padding-inline: 2px 10px !important;
  }

  .brand-tile {
    min-height: 118px !important;
    grid-template-rows: 72px auto !important;
    padding: 12px 9px 10px !important;
  }

  .brand-logo,
  .brand-tile img {
    width: 106px !important;
    height: 68px !important;
  }

  .brand-lettermark {
    width: 98px !important;
    height: 68px !important;
  }
}

html[data-theme="dark"] .brand-tile {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #181820 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .brand-tile span {
  color: rgba(247, 246, 255, 0.9) !important;
}

/* Fast188: NiceOne-style category hub and alphabetical brand directory. */
body[data-route="section"] .section-brand-spotlight {
  margin: 0 0 13px !important;
  padding: 12px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="section"] .section-brand-spotlight .section-panel-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 2px 7px !important;
}

body[data-route="section"] .section-brand-spotlight .section-panel-title strong {
  color: #15151a !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

body[data-route="section"] .section-brand-spotlight .section-panel-title a {
  color: #8b6be8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body[data-route="section"] .section-brand-spotlight p {
  margin: 0 2px 10px !important;
  color: rgba(25, 25, 31, 0.58) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

body[data-route="section"] .section-brand-rail {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 112px !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 1px 2px 8px !important;
  scroll-snap-type: inline mandatory !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

body[data-route="section"] .section-brand-rail::-webkit-scrollbar {
  display: none !important;
}

body[data-route="section"] .section-brand-rail .brand-tile {
  min-height: 104px !important;
  grid-template-rows: 58px auto !important;
  gap: 7px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(188, 165, 238, 0.12) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.05) !important;
  scroll-snap-align: start !important;
}

body[data-route="section"] .section-brand-rail .brand-logo,
body[data-route="section"] .section-brand-rail .brand-tile img {
  width: 88px !important;
  height: 54px !important;
  object-fit: contain !important;
}

body[data-route="section"] .section-panel-subtitle {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 14px 2px 12px !important;
}

body[data-route="section"] .section-panel-subtitle strong {
  color: #15151a !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

body[data-route="section"] .section-panel-subtitle span {
  color: rgba(25, 25, 31, 0.52) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-route="section"] .section-category-grid .quick-tile img {
  width: 70px !important;
  height: 70px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #f6f8fb !important;
  object-fit: cover !important;
  object-position: center center !important;
  box-shadow: 0 6px 16px rgba(18, 18, 24, 0.055) !important;
}

body[data-route="section"] .section-category-grid .quick-tile span {
  color: #16161d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
}

.brands-directory {
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  padding-inline: 8px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.brands-alpha-index {
  position: sticky !important;
  top: 86px !important;
  display: grid !important;
  gap: 5px !important;
  justify-items: center !important;
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
  direction: ltr !important;
  scrollbar-width: none !important;
}

.brands-alpha-index::-webkit-scrollbar {
  display: none !important;
}

.brands-alpha-index a {
  width: 21px !important;
  min-height: 21px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: rgba(25, 25, 31, 0.54) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.brands-alpha-index a:first-child {
  width: 23px !important;
  min-height: 34px !important;
  writing-mode: vertical-rl !important;
  font-size: 9px !important;
}

.brands-alpha-index a.active {
  color: #fff !important;
  background: linear-gradient(135deg, #5fe4d0, #9c70e3 58%, #e49be8) !important;
  box-shadow: 0 8px 18px rgba(156, 112, 227, 0.22) !important;
}

.brands-directory-list {
  direction: rtl !important;
  display: grid !important;
  gap: 17px !important;
  min-width: 0 !important;
}

.brand-letter-section {
  display: grid !important;
  gap: 9px !important;
}

.brand-letter-section h2 {
  margin: 0 !important;
  color: rgba(25, 25, 31, 0.42) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  text-align: left !important;
  direction: ltr !important;
}

.brand-directory-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.brand-directory-tile {
  min-height: 126px !important;
  display: grid !important;
  grid-template-rows: 78px auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  padding: 12px 9px 10px !important;
  border: 1px solid rgba(188, 165, 238, 0.12) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.045) !important;
}

.brand-directory-tile .brand-logo,
.brand-directory-tile img {
  width: 104px !important;
  height: 72px !important;
  object-fit: contain !important;
}

.brand-directory-tile .brand-lettermark {
  width: 98px !important;
  height: 72px !important;
}

.brand-directory-tile span {
  width: 100% !important;
  color: #17171d !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-spotlight .section-panel-title strong,
html[data-theme="dark"] body[data-route="section"] .section-panel-subtitle strong,
html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile span,
html[data-theme="dark"] .brand-directory-tile span {
  color: #f5f4fb !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-spotlight p,
html[data-theme="dark"] body[data-route="section"] .section-panel-subtitle span,
html[data-theme="dark"] .brand-letter-section h2 {
  color: rgba(245, 244, 251, 0.58) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-rail .brand-tile,
html[data-theme="dark"] .brand-directory-tile {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #181820 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .brands-alpha-index a {
  color: rgba(245, 244, 251, 0.58) !important;
}

/* Fast193: compact product rating visible on cards before opening details. */
.product-card .rating-row {
  min-height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-block: 1px 0 !important;
  color: #8a8a95 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.product-card .rating-row > span:last-child {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(25, 25, 31, 0.45) !important;
  font-size: 9.4px !important;
  font-weight: 800 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.card-rating {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(255, 184, 77, 0.24) !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 232, 0.92) !important;
  color: #15151a !important;
  white-space: nowrap !important;
}

.card-rating .nion-icon {
  width: 11px !important;
  height: 11px !important;
  color: #f4a51c !important;
  fill: #f4a51c !important;
  stroke-width: 2 !important;
}

.card-rating b {
  color: #1a1a20 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.card-rating em {
  color: rgba(25, 25, 31, 0.54) !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.card-rating.is-empty {
  border-color: rgba(188, 165, 238, 0.16) !important;
  background: rgba(246, 243, 253, 0.9) !important;
}

.card-rating.is-empty .nion-icon {
  color: #bca5ee !important;
  fill: transparent !important;
}

html[data-theme="dark"] .product-card .rating-row > span:last-child {
  color: rgba(245, 244, 251, 0.5) !important;
}

html[data-theme="dark"] .card-rating {
  border-color: rgba(255, 184, 77, 0.2) !important;
  background: rgba(255, 184, 77, 0.1) !important;
  color: #f6f3ff !important;
}

html[data-theme="dark"] .card-rating b {
  color: #f7f4ff !important;
}

html[data-theme="dark"] .card-rating em {
  color: rgba(247, 244, 255, 0.62) !important;
}

html[data-theme="dark"] .card-rating.is-empty {
  border-color: rgba(188, 165, 238, 0.18) !important;
  background: rgba(188, 165, 238, 0.09) !important;
}

/* Fast186: campaign-style hero inspired by Nion Picks artwork. */
@media (max-width: 640px) {
  body[data-route="home"] .hero {
    margin: 0 !important;
    background: transparent !important;
  }

  body[data-route="home"] .hero-main {
    min-height: 340px !important;
    aspect-ratio: 1.1 / 1 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 18% 22%, rgba(121, 239, 215, 0.3), transparent 28%),
      radial-gradient(circle at 86% 18%, rgba(236, 151, 220, 0.32), transparent 30%),
      linear-gradient(180deg, #f7fbff 0%, #fff4fa 64%, #ffffff 100%) !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-slide-link {
    display: grid !important;
    place-items: end center !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 62%, rgba(255, 255, 255, 0.48) 88%, rgba(255, 255, 255, 0.96) 100%) !important;
  }

  body[data-route="home"] .hero-slide {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    filter: saturate(1.03) contrast(1.02) !important;
  }

  body[data-route="home"] .hero-main::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: -1px !important;
    inset-block-end: -1px !important;
    z-index: 5 !important;
    display: block !important;
    height: 34% !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 36%, rgba(255, 255, 255, 0.78) 74%, #fff 100%),
      radial-gradient(110% 74% at 50% 100%, rgba(121, 239, 215, 0.1), rgba(188, 165, 238, 0.07) 42%, rgba(255, 255, 255, 0) 74%) !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 6 !important;
    inset-block-end: 62px !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -50px !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main {
    background:
      radial-gradient(circle at 18% 22%, rgba(121, 239, 215, 0.18), transparent 30%),
      radial-gradient(circle at 86% 18%, rgba(188, 165, 238, 0.2), transparent 32%),
      linear-gradient(180deg, #111119 0%, #14131c 66%, #0d0d12 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
    background:
      linear-gradient(180deg, rgba(13, 13, 18, 0) 0%, rgba(13, 13, 18, 0.1) 62%, rgba(13, 13, 18, 0.52) 88%, rgba(13, 13, 18, 0.98) 100%) !important;
  }

html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    background:
      linear-gradient(180deg, rgba(13, 13, 18, 0) 0%, rgba(13, 13, 18, 0.28) 38%, rgba(13, 13, 18, 0.82) 76%, #0d0d12 100%),
      radial-gradient(110% 74% at 50% 100%, rgba(121, 239, 215, 0.1), rgba(188, 165, 238, 0.07) 42%, rgba(13, 13, 18, 0) 74%) !important;
  }
}

/* Fast194: richer homepage product feed and dedicated all-products route. */
body[data-route="home"] .home-product-feed {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-route="home"] .home-product-feed > .home-product-rail {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

body[data-route="home"] .home-all-products-preview {
  padding-bottom: 18px !important;
}

body[data-route="home"] .home-all-products-preview .section-head h2,
body[data-route="products"] .all-products-title h1 {
  letter-spacing: 0 !important;
}

body[data-route="home"] .home-all-products-preview .product-grid,
body[data-route="products"] .all-products-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-route="products"] .all-products-title {
  margin: 8px auto 12px !important;
}

body[data-route="products"] .all-products-grid {
  width: min(100%, 1040px) !important;
  margin: 0 auto !important;
  padding-bottom: 116px !important;
}

html[data-theme="dark"] body[data-route="products"] .all-products-title {
  background: transparent !important;
  color: #f7f4ff !important;
}

@media (min-width: 760px) {
  body[data-route="home"] .home-all-products-preview .product-grid,
  body[data-route="products"] .all-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Fast198: keep the product add-to-cart action close to the liquid dock. */
@media (max-width: 640px) {
  body[data-route="product"] .page {
    padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
  }

  body[data-route="product"] .detail-cart {
    left: max(18px, env(safe-area-inset-left)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    min-height: 44px !important;
    max-width: calc(100vw - 36px) !important;
    border-radius: 15px !important;
    padding-block: 0 !important;
    padding-inline: 14px !important;
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  body[data-route="product"] .detail-cart .nion-icon,
  body[data-route="product"] .detail-cart .cart-plus {
    width: 17px !important;
    height: 17px !important;
    font-size: 15px !important;
  }

  body[data-route="product"] .detail-cart.cart-control {
    min-height: 44px !important;
    padding: 4px 6px !important;
    gap: 6px !important;
  }

  body[data-route="product"] .detail-cart.cart-control .cart-stepper {
    min-height: 30px !important;
  }
}

/* Fast199: align product perk icons on one clean axis. */
body[data-route="product"] .detail-perks > span,
body[data-route="product"] .detail-perks .detail-policy-note {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 !important;
  min-height: 50px !important;
  padding-inline: 12px !important;
  text-align: center !important;
}

body[data-route="product"] .detail-perks > span > .nion-icon,
body[data-route="product"] .detail-perks .detail-policy-note > .nion-icon {
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body[data-route="product"] .detail-perks .detail-policy-note > .nion-icon {
  width: 18px !important;
  height: 18px !important;
}

body[data-route="product"] .detail-perks > span {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body[data-route="product"] .detail-policy-copy {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-route="product"] .detail-perks .detail-policy-note {
  white-space: nowrap !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
}

@media (max-width: 640px) {
  body[data-route="product"] .detail-perks > span,
  body[data-route="product"] .detail-perks .detail-policy-note {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    min-height: 48px !important;
    padding-inline: 10px !important;
  }
}

/* Fast200: keep the non-returnable icon aligned but away from the copy. */
body[data-route="product"] .detail-perks .detail-policy-note {
  column-gap: 8px !important;
}

body[data-route="product"] .detail-perks .detail-policy-note > .nion-icon {
  justify-self: center !important;
}

body[data-route="product"] .detail-policy-copy {
  justify-self: center !important;
}

@media (max-width: 640px) {
  body[data-route="product"] .detail-perks .detail-policy-note {
    column-gap: 7px !important;
    font-size: clamp(10px, 2.65vw, 11.5px) !important;
  }
}

/* Fast201: de-duplicated product galleries and balanced rating pill. */
body[data-route="product"] .detail-review-summary {
  display: grid !important;
  grid-template-columns: auto minmax(28px, auto) auto !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 6px !important;
  direction: ltr !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

body[data-route="product"] .detail-review-summary .review-stars {
  display: inline-grid !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

body[data-route="product"] .detail-review-summary strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 18px !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
  direction: ltr !important;
}

body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  direction: rtl !important;
}

/* Fast202: lighter product rating tag and cleaner related-product cards. */
body[data-route="product"] .detail-review-summary {
  min-height: 26px !important;
  padding: 4px 7px !important;
  gap: 4px !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 14px rgba(24, 24, 30, 0.045) !important;
}

body[data-route="product"] .detail-review-summary .review-stars {
  gap: 1px !important;
}

body[data-route="product"] .detail-review-summary .review-star,
body[data-route="product"] .detail-review-summary .review-star .nion-icon {
  width: 11px !important;
  height: 11px !important;
}

body[data-route="product"] .detail-review-summary strong {
  min-width: 22px !important;
  height: 15px !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}

body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
  max-width: 88px !important;
  overflow: hidden !important;
  color: rgba(25, 25, 31, 0.48) !important;
  font-size: 9.8px !important;
  font-weight: 750 !important;
  text-overflow: ellipsis !important;
}

body[data-route="product"] .similar-product-section {
  width: min(100%, 430px) !important;
  margin: 12px auto 0 !important;
}

body[data-route="product"] .similar-product-section .section-head {
  margin: 0 2px 10px !important;
}

body[data-route="product"] .similar-product-section .section-head h2 {
  font-size: clamp(17px, 4.4vw, 20px) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

body[data-route="product"] .similar-product-section .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-items: stretch !important;
  padding-inline: 2px !important;
}

body[data-route="product"] .similar-product-section .product-card {
  min-height: 270px !important;
  display: grid !important;
  grid-template-rows: 112px minmax(118px, 1fr) 40px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  box-shadow: 0 9px 20px rgba(18, 18, 24, 0.055) !important;
}

body[data-route="product"] .similar-product-section .product-media {
  min-height: 112px !important;
  height: 112px !important;
  display: grid !important;
  place-items: center !important;
}

body[data-route="product"] .similar-product-section .product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 11px 8px 8px !important;
}

body[data-route="product"] .similar-product-section .product-body {
  min-height: 118px !important;
  display: grid !important;
  grid-template-rows: 14px 37px 17px minmax(0, auto) 23px 13px !important;
  align-content: start !important;
  gap: 3px !important;
  padding: 7px 7px 4px !important;
}

body[data-route="product"] .similar-product-section .brand-name {
  min-height: 14px !important;
  overflow: hidden !important;
  font-size: 9.2px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="product"] .similar-product-section .product-name {
  height: 37px !important;
  min-height: 37px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: 10.2px !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-route="product"] .similar-product-section .rating-row {
  min-height: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  gap: 0 !important;
}

body[data-route="product"] .similar-product-section .rating-row > span:last-child {
  display: none !important;
}

body[data-route="product"] .similar-product-section .card-rating {
  min-height: 16px !important;
  padding: 1px 5px !important;
  gap: 2px !important;
}

body[data-route="product"] .similar-product-section .card-rating .nion-icon {
  width: 9.5px !important;
  height: 9.5px !important;
}

body[data-route="product"] .similar-product-section .card-rating b {
  font-size: 9.5px !important;
}

body[data-route="product"] .similar-product-section .card-rating em {
  font-size: 8.4px !important;
}

body[data-route="product"] .similar-product-section .product-color-swatches {
  min-height: 0 !important;
  gap: 3px !important;
  margin: 0 !important;
}

body[data-route="product"] .similar-product-section .product-color-swatch {
  width: 18px !important;
  height: 18px !important;
}

body[data-route="product"] .similar-product-section .price-row {
  min-height: 23px !important;
  height: 23px !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}

body[data-route="product"] .similar-product-section .price {
  font-size: 13.4px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-route="product"] .similar-product-section .old-price {
  max-width: 42px !important;
  font-size: 8.4px !important;
}

body[data-route="product"] .similar-product-section .stock {
  min-height: 13px !important;
  overflow: hidden !important;
  font-size: 8.6px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="product"] .similar-product-section .product-actions {
  height: 40px !important;
  padding: 0 7px 7px !important;
  display: flex !important;
  align-items: stretch !important;
}

body[data-route="product"] .similar-product-section .add-button {
  width: 100% !important;
  min-height: 33px !important;
  height: 33px !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 11px !important;
  padding: 0 7px !important;
  font-size: 9.4px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-route="product"] .similar-product-section .add-button .cart-plus,
body[data-route="product"] .similar-product-section .add-button .nion-icon {
  width: 13px !important;
  height: 13px !important;
  font-size: 13px !important;
}

body[data-route="product"] .similar-product-section .add-button.cart-control.is-added:not(.is-flash-only) {
  min-height: 33px !important;
  height: 33px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 3px 5px !important;
}

body[data-route="product"] .similar-product-section .add-button.cart-control.is-added:not(.is-flash-only) .cart-added-label {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 8.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-route="product"] .similar-product-section .add-button.cart-control.is-added:not(.is-flash-only) .cart-stepper {
  min-height: 24px !important;
  gap: 2px !important;
  padding: 2px !important;
}

body[data-route="product"] .similar-product-section .add-button.cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="product"] .similar-product-section .add-button.cart-control.is-added:not(.is-flash-only) strong {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  font-size: 10px !important;
}

body[data-route="product"] .similar-product-section .fav-button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
}

body[data-route="product"] .similar-product-section .sale-badge {
  inset-block-start: 7px !important;
  inset-inline-start: 7px !important;
  padding: 4px 6px !important;
  font-size: 8.2px !important;
}

@media (max-width: 360px) {
  body[data-route="product"] .similar-product-section .product-grid {
    gap: 7px !important;
  }

  body[data-route="product"] .similar-product-section .product-card {
    grid-template-rows: 104px minmax(116px, 1fr) 38px !important;
    min-height: 258px !important;
  }

  body[data-route="product"] .similar-product-section .product-media {
    height: 104px !important;
    min-height: 104px !important;
  }
}

/* Fast203: luxury mobile product scale, consistent grids, and calmer sizing. */
@media (max-width: 640px) {
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .page > .product-grid:not(.search-product-list),
  body[data-route="home"] .home-all-products-preview .product-grid {
    width: calc(100% - 28px) !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-route="product"] .similar-product-section {
    width: calc(100% - 28px) !important;
    max-width: 430px !important;
    margin-inline: auto !important;
  }

  body[data-route="product"] .similar-product-section .product-grid {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card,
  body[data-route="home"] .home-all-products-preview .product-card,
  body[data-route="product"] .similar-product-section .product-card {
    min-height: 300px !important;
    display: grid !important;
    grid-template-rows: 136px minmax(118px, 1fr) 42px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 22px rgba(18, 18, 24, 0.06) !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-media,
  body[data-route="home"] .home-all-products-preview .product-media,
  body[data-route="product"] .similar-product-section .product-media {
    height: 136px !important;
    min-height: 136px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-media img,
  body[data-route="home"] .home-all-products-preview .product-media img,
  body[data-route="product"] .similar-product-section .product-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px 10px 9px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-body,
  body[data-route="home"] .home-all-products-preview .product-body,
  body[data-route="product"] .similar-product-section .product-body {
    min-height: 118px !important;
    display: grid !important;
    grid-template-rows: 14px 38px 18px minmax(0, auto) 24px 13px !important;
    align-content: start !important;
    gap: 3px !important;
    padding: 8px 8px 4px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .brand-name,
  body[data-route="home"] .home-all-products-preview .brand-name,
  body[data-route="product"] .similar-product-section .brand-name {
    min-height: 14px !important;
    overflow: hidden !important;
    font-size: 9.4px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-name,
  body[data-route="home"] .home-all-products-preview .product-name,
  body[data-route="product"] .similar-product-section .product-name {
    height: 38px !important;
    min-height: 38px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .rating-row,
  body[data-route="home"] .home-all-products-preview .rating-row,
  body[data-route="product"] .similar-product-section .rating-row {
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    gap: 4px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .card-rating,
  body[data-route="home"] .home-all-products-preview .card-rating,
  body[data-route="product"] .similar-product-section .card-rating {
    min-height: 17px !important;
    padding: 1px 5px !important;
    gap: 2px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .card-rating .nion-icon,
  body[data-route="home"] .home-all-products-preview .card-rating .nion-icon,
  body[data-route="product"] .similar-product-section .card-rating .nion-icon {
    width: 10px !important;
    height: 10px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .card-rating b,
  body[data-route="home"] .home-all-products-preview .card-rating b,
  body[data-route="product"] .similar-product-section .card-rating b {
    font-size: 9.8px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .price-row,
  body[data-route="home"] .home-all-products-preview .price-row,
  body[data-route="product"] .similar-product-section .price-row {
    height: 24px !important;
    min-height: 24px !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .price,
  body[data-route="home"] .home-all-products-preview .price,
  body[data-route="product"] .similar-product-section .price {
    font-size: 14.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .stock,
  body[data-route="home"] .home-all-products-preview .stock,
  body[data-route="product"] .similar-product-section .stock {
    min-height: 13px !important;
    overflow: hidden !important;
    font-size: 8.8px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-actions,
  body[data-route="home"] .home-all-products-preview .product-actions,
  body[data-route="product"] .similar-product-section .product-actions {
    height: 42px !important;
    padding: 0 8px 8px !important;
    display: flex !important;
    align-items: stretch !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .add-button,
  body[data-route="home"] .home-all-products-preview .add-button,
  body[data-route="product"] .similar-product-section .add-button {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 12px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-route="product"] .detail-review-summary {
    min-height: 23px !important;
    padding: 3px 6px !important;
    gap: 3px !important;
  }

  body[data-route="product"] .detail-review-summary .review-star,
  body[data-route="product"] .detail-review-summary .review-star .nion-icon {
    width: 10px !important;
    height: 10px !important;
  }

  body[data-route="product"] .detail-review-summary strong {
    min-width: 20px !important;
    height: 14px !important;
    font-size: 10px !important;
  }

  body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
    max-width: 56px !important;
    font-size: 9px !important;
  }
}

/* Fast204: remove legacy grid drift and compact empty product-card rows. */
@media (max-width: 640px) {
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) #app .page > .product-grid:not(.search-product-list),
  body[data-route="products"] #app .all-products-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-route="product"] .similar-product-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card,
  body[data-route="home"] .home-all-products-preview .product-card,
  body[data-route="product"] .similar-product-section .product-card {
    min-height: 300px !important;
    grid-template-rows: 134px minmax(123px, auto) 40px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-media,
  body[data-route="home"] .home-all-products-preview .product-media,
  body[data-route="product"] .similar-product-section .product-media {
    height: 134px !important;
    min-height: 134px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-body,
  body[data-route="home"] .home-all-products-preview .product-body,
  body[data-route="product"] .similar-product-section .product-body {
    grid-template-rows: 14px 38px 18px 24px 13px !important;
    min-height: 123px !important;
    max-height: 135px !important;
    gap: 3px !important;
    overflow: hidden !important;
    padding-block: 8px 5px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-body:has(.product-color-swatches),
  body[data-route="home"] .home-all-products-preview .product-body:has(.product-color-swatches),
  body[data-route="product"] .similar-product-section .product-body:has(.product-color-swatches) {
    grid-template-rows: 14px 38px 18px 19px 24px 13px !important;
    max-height: 154px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .stock,
  body[data-route="home"] .home-all-products-preview .stock,
  body[data-route="product"] .similar-product-section .stock {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    line-height: 1.12 !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-actions,
  body[data-route="home"] .home-all-products-preview .product-actions,
  body[data-route="product"] .similar-product-section .product-actions {
    height: 40px !important;
    min-height: 40px !important;
    padding-bottom: 7px !important;
  }

  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .add-button,
  body[data-route="home"] .home-all-products-preview .add-button,
  body[data-route="product"] .similar-product-section .add-button {
    height: 33px !important;
    min-height: 33px !important;
  }
}

/* Fast206: final mobile sizing normalization across product surfaces. */
@media (max-width: 640px) {
  body[data-route="product"] [data-similar-slot] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section {
    width: calc(100% + 22px) !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .section-head {
    margin: 0 0 10px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-card,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card,
  body[data-route="home"] .home-all-products-preview .product-card {
    min-height: 306px !important;
    grid-template-rows: 134px 132px 40px !important;
    border-radius: 13px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-body,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-body,
  body[data-route="home"] .home-all-products-preview .product-body {
    min-height: 132px !important;
    max-height: 132px !important;
    grid-template-rows: 14px 38px 18px 24px 13px !important;
    gap: 3px !important;
    padding: 8px 8px 5px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-body:has(.product-color-swatches),
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-body:has(.product-color-swatches),
  body[data-route="home"] .home-all-products-preview .product-body:has(.product-color-swatches) {
    max-height: 154px !important;
    grid-template-rows: 14px 38px 18px 19px 24px 13px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-media,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-media,
  body[data-route="home"] .home-all-products-preview .product-media {
    height: 134px !important;
    min-height: 134px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-actions,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-actions,
  body[data-route="home"] .home-all-products-preview .product-actions {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px 7px !important;
  }
}

/* Fast210: Nice One-inspired product detail scale and spacing. */
@media (max-width: 640px) {
  body[data-route="product"] .page {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-top: 0 !important;
    padding-bottom: calc(174px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
  }

  body[data-route="product"] .section.product-detail:not(.hero):not(.hero-icon-rail) {
    width: 100% !important;
  }

  body[data-route="product"] .product-detail {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    margin-block: 0 !important;
    padding-inline: 0 !important;
  }

  body[data-route="product"] .detail-media {
    width: 100% !important;
    max-width: none !important;
    height: clamp(390px, 106vw, 462px) !important;
    min-height: clamp(390px, 106vw, 462px) !important;
    border: 0 !important;
    border-radius: 0 0 22px 22px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0.96) 100%),
      radial-gradient(circle at 22% 8%, rgba(121, 239, 215, 0.16), transparent 34%),
      radial-gradient(circle at 78% 6%, rgba(223, 176, 238, 0.16), transparent 36%),
      #fff !important;
    box-shadow: none !important;
  }

  body[data-route="product"] .detail-slide img {
    padding: calc(48px + env(safe-area-inset-top)) 18px calc(84px + env(safe-area-inset-bottom)) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body[data-route="product"] .detail-floating-actions {
    inset-block-start: calc(12px + env(safe-area-inset-top)) !important;
    inset-inline: 14px !important;
  }

  body[data-route="product"] .detail-floating-button {
    width: 38px !important;
    height: 38px !important;
    border-color: rgba(18, 18, 24, 0.06) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    color: #17171c !important;
    box-shadow: 0 10px 24px rgba(18, 18, 24, 0.08) !important;
    backdrop-filter: blur(16px) !important;
  }

  body[data-route="product"] .detail-floating-button .nion-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body[data-route="product"] .detail-slide-dots {
    inset-block-end: calc(58px + env(safe-area-inset-bottom)) !important;
  }

  body[data-route="product"] .detail-thumbs {
    inset-block-end: calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
    max-width: calc(100vw - 28px) !important;
    transform: translateX(-50%) !important;
  }

  body[data-route="product"] .detail-thumbs button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.08) !important;
  }

  body[data-route="product"] .detail-thumbs img {
    padding: 4px !important;
  }

  body[data-route="product"] .detail-info {
    width: calc(100% - 28px) !important;
    margin: 10px auto 0 !important;
    padding: 13px 13px 14px !important;
    gap: 9px !important;
    border: 1px solid rgba(18, 18, 24, 0.07) !important;
    border-radius: 17px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(18, 18, 24, 0.045) !important;
  }

  body[data-route="product"] .detail-meta-row {
    min-height: 16px !important;
    justify-content: flex-start !important;
  }

  body[data-route="product"] .detail-meta-row .brand-name {
    color: rgba(18, 18, 24, 0.42) !important;
    font-size: 12.2px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
  }

  body[data-route="product"] .detail-info h1 {
    margin: 0 !important;
    color: #15151a !important;
    font-size: clamp(18px, 5vw, 21px) !important;
    font-weight: 780 !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
  }

  body[data-route="product"] .detail-review-summary {
    justify-self: flex-start !important;
    min-height: 22px !important;
    margin: -1px 0 0 !important;
    padding: 3px 7px !important;
    gap: 3px !important;
    border: 1px solid rgba(18, 18, 24, 0.06) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body[data-route="product"] .detail-review-summary .review-star,
  body[data-route="product"] .detail-review-summary .review-star .nion-icon {
    width: 10px !important;
    height: 10px !important;
  }

  body[data-route="product"] .detail-review-summary strong {
    min-width: 20px !important;
    height: 13px !important;
    font-size: 9.8px !important;
  }

  body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
    max-width: 58px !important;
    font-size: 8.8px !important;
  }

  body[data-route="product"] .detail-price-card {
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(121, 239, 215, 0.32) !important;
    border-radius: 13px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.98)),
      radial-gradient(circle at 0% 0%, rgba(121, 239, 215, 0.11), transparent 42%) !important;
    box-shadow: none !important;
  }

  body[data-route="product"] .detail-price-card .price-row {
    min-height: 30px !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    grid-column: 1 / -1 !important;
  }

  body[data-route="product"] .detail-price-card .price {
    color: #cf2f69 !important;
    font-size: clamp(23px, 6.5vw, 28px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body[data-route="product"] .detail-price-card .old-price {
    color: rgba(18, 18, 24, 0.34) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  body[data-route="product"] .detail-saving {
    justify-self: flex-start !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    background: #079b63 !important;
    color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body[data-route="product"] .detail-stock {
    min-height: 24px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: rgba(175, 118, 0, 0.08) !important;
    color: #9a6a00 !important;
    font-size: 10.5px !important;
    font-weight: 780 !important;
    line-height: 1.1 !important;
  }

  body[data-route="product"] .detail-perks {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body[data-route="product"] .detail-perks > span,
  body[data-route="product"] .detail-perks .detail-policy-note {
    min-height: 44px !important;
    grid-template-columns: 26px minmax(0, 1fr) 18px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(18, 18, 24, 0.075) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: rgba(18, 18, 24, 0.78) !important;
    font-size: 12.2px !important;
    font-weight: 760 !important;
    box-shadow: none !important;
  }

  body[data-route="product"] .detail-perks > span > .nion-icon,
  body[data-route="product"] .detail-perks .detail-policy-note > .nion-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body[data-route="product"] .detail-policy-copy {
    justify-content: center !important;
    gap: 3px !important;
  }

  body[data-route="product"] .detail-policy-copy strong {
    font-weight: 950 !important;
  }

  body[data-route="product"] .detail-cart {
    left: max(18px, env(safe-area-inset-left)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    min-height: 44px !important;
    max-width: calc(100vw - 36px) !important;
    border-radius: 14px !important;
    padding-inline: 14px !important;
    font-size: 13px !important;
    box-shadow: 0 14px 32px rgba(18, 18, 24, 0.22) !important;
  }

  body[data-route="product"] .detail-panel,
  body[data-route="product"] .product-reviews-section,
  body[data-route="product"] [data-similar-slot] > .similar-product-section {
    width: calc(100% - 28px) !important;
    margin-inline: auto !important;
  }

  body[data-route="product"] .detail-panel {
    margin-top: 14px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  body[data-route="product"] .detail-toggle {
    min-height: 50px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  body[data-route="product"] .product-reviews-section {
    margin-top: 16px !important;
  }

  body[data-route="product"] .product-reviews-head h2,
  body[data-route="product"] [data-similar-slot] .section-head h2 {
    font-size: clamp(18px, 4.8vw, 21px) !important;
    font-weight: 850 !important;
  }
}

html[data-theme="dark"] body[data-route="product"] .page {
  background: #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-info,
html[data-theme="dark"] body[data-route="product"] .detail-price-card,
html[data-theme="dark"] body[data-route="product"] .detail-perks > span,
html[data-theme="dark"] body[data-route="product"] .detail-perks .detail-policy-note,
html[data-theme="dark"] body[data-route="product"] .detail-panel {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #17171f !important;
  color: #f7f4ff !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-info h1,
html[data-theme="dark"] body[data-route="product"] .detail-policy-copy strong {
  color: #f7f4ff !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-meta-row .brand-name,
html[data-theme="dark"] body[data-route="product"] .detail-perks > span,
html[data-theme="dark"] body[data-route="product"] .detail-perks .detail-policy-note {
  color: rgba(247, 244, 255, 0.78) !important;
}

/* Fast211: Nice One-style square hero campaigns and cleaner section imagery. */
@media (max-width: 640px) {
  body[data-route="home"] .hero {
    margin-bottom: 0 !important;
  }

  body[data-route="home"] .hero-main {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 0 20px 20px !important;
    background:
      linear-gradient(145deg, rgba(121, 239, 215, 0.14), rgba(223, 176, 238, 0.16)),
      #fff !important;
  }

  body[data-route="home"] .hero-slide-link {
    position: relative !important;
    flex: 0 0 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #f8f5fb !important;
  }

  body[data-route="home"] .hero-slides {
    height: 100% !important;
    align-items: stretch !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.42), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.78) 100%) !important;
  }

  body[data-route="home"] .hero-slide {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(1.04) contrast(1.02);
  }

  body[data-route="home"] .hero-campaign-copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: none !important;
    place-content: center !important;
    justify-items: center !important;
    gap: 7px !important;
    padding: 44px 32px 82px !important;
    color: #15151a !important;
    text-align: center !important;
    pointer-events: none !important;
    text-shadow: 0 1px 16px rgba(255, 255, 255, 0.56) !important;
  }

  body[data-route="home"] .hero-slide-link.is-generated-campaign .hero-campaign-copy {
    display: grid !important;
  }

  body[data-route="home"] .hero-slide-link.is-generated-campaign .hero-slide {
    object-fit: cover !important;
  }

  body[data-route="home"] .hero-campaign-copy span,
  body[data-route="home"] .hero-campaign-copy em {
    max-width: 250px !important;
    color: rgba(21, 21, 26, 0.72) !important;
    font-style: normal !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    max-width: 292px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #15151a !important;
    font-size: clamp(24px, 8vw, 34px) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body[data-route="home"] .hero-dots {
    inset-block-end: 18px !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -8px !important;
    padding-top: 6px !important;
  }

  body[data-route="home"] .quick-grid .quick-tile img {
    width: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    object-fit: cover !important;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="section"] .section-brand-spotlight {
    display: none !important;
  }

  body[data-route="section"] .section-hub-content {
    padding-top: 8px !important;
  }

  body[data-route="section"] .section-hero-banner {
    aspect-ratio: 1.9 / 1 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(121, 239, 215, 0.13), rgba(223, 176, 238, 0.15)), #f8f5fb !important;
  }

  body[data-route="section"] .section-hero-banner img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-route="section"] .section-category-grid {
    gap: 19px 8px !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile {
    min-height: 112px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile img {
    width: 68px !important;
    height: 68px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #f6f6f7 !important;
    object-fit: cover !important;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile span {
    max-width: 82px !important;
    margin-top: 7px !important;
    color: #17171f !important;
    font-size: 11.5px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
  }

  body[data-route="section"] .section-panel-subtitle {
    margin: 12px 0 15px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body[data-route="section"] .section-panel-subtitle strong {
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  body[data-route="section"] .section-panel-subtitle span {
    font-size: 10.5px !important;
    color: rgba(18, 18, 24, 0.48) !important;
  }
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
  color: #f7f4ff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em {
  color: rgba(247, 244, 255, 0.78) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile span {
  color: #f7f4ff !important;
}

html[data-theme="dark"] body[data-route="section"] .section-panel-subtitle span {
  color: rgba(247, 244, 255, 0.52) !important;
}

/* Fast220: NiceOne-style section directory, clean PNG offer icons, and tighter card pricing. */
@media (max-width: 640px) {
  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    background: #fff !important;
  }

  body[data-route="section"] .section-hub-tabs {
    min-height: calc(100vh - 134px) !important;
    border-inline-start: 1px solid rgba(18, 18, 24, 0.055) !important;
    border-inline-end: 0 !important;
    direction: rtl !important;
    background: #fff !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 66px !important;
    justify-content: flex-start !important;
    border-inline-start: 0 !important;
    border-inline-end: 4px solid transparent !important;
    padding: 8px 15px 8px 8px !important;
    color: rgba(18, 18, 24, 0.58) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    border-inline-end-color: #8f67f1 !important;
    background: linear-gradient(270deg, rgba(143, 103, 241, 0.12), rgba(255, 255, 255, 0) 68%) !important;
    color: #15151a !important;
    font-weight: 900 !important;
  }

  body[data-route="section"] .section-hub-content {
    padding: 0 4px !important;
  }

  body[data-route="section"] .section-brand-directory {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 20px !important;
    gap: 5px !important;
    align-items: start !important;
    width: 100% !important;
  }

  body[data-route="section"] .section-brand-alpha {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 88px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    max-height: calc(100vh - 178px) !important;
    overflow-y: auto !important;
    padding: 2px 0 4px !important;
    direction: ltr !important;
    scrollbar-width: none !important;
  }

  body[data-route="section"] .section-brand-alpha::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="section"] .section-brand-alpha a {
    width: 18px !important;
    min-height: 17px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(18, 18, 24, 0.58) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body[data-route="section"] .section-brand-alpha a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #5fe4d0, #9c70e3 58%, #e49be8) !important;
    box-shadow: 0 6px 14px rgba(156, 112, 227, 0.22) !important;
  }

  body[data-route="section"] .section-brand-logo-grid {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body[data-route="section"] .section-brand-logo-tile {
    min-height: 118px !important;
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 10px 8px 8px !important;
    border: 1px solid rgba(18, 18, 24, 0.045) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-route="section"] .section-brand-logo-tile .brand-logo,
  body[data-route="section"] .section-brand-logo-tile img {
    width: 100% !important;
    max-width: 96px !important;
    height: 72px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body[data-route="section"] .section-brand-logo-tile .brand-lettermark {
    width: 86px !important;
    height: 70px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
  }

  body[data-route="section"] .section-brand-logo-tile span {
    width: 100% !important;
    min-height: 22px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    color: rgba(18, 18, 24, 0.64) !important;
    font-size: 9.6px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body[data-route="home"] .hero-icon-rail {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 64px !important;
    height: 64px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(18, 18, 24, 0.08)) !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  .product-card .price-row {
    direction: rtl !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .product-card .price {
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .product-card .old-price {
    font-size: 10.6px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
  }

  .product-card .card-rating {
    min-height: 16px !important;
    padding: 1px 4px !important;
    gap: 2px !important;
  }

  .product-card .card-rating .nion-icon {
    width: 9px !important;
    height: 9px !important;
  }

  .product-card .card-rating b {
    font-size: 9.2px !important;
  }

  .product-card .card-rating em {
    font-size: 8.2px !important;
  }

  body[data-route="home"] .home-primary-rail .product-card .price-row,
  body[data-route="home"] .home-product-rail .product-card .price-row,
  body[data-route="home"] .home-all-products-preview .product-card .price-row,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card .price-row,
  body[data-route="product"] .similar-product-section .product-card .price-row {
    direction: rtl !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  body[data-route="home"] .home-primary-rail .product-card .price,
  body[data-route="home"] .home-product-rail .product-card .price,
  body[data-route="home"] .home-all-products-preview .product-card .price,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card .price,
  body[data-route="product"] .similar-product-section .product-card .price {
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  body[data-route="home"] .home-primary-rail .product-card .old-price,
  body[data-route="home"] .home-product-rail .product-card .old-price,
  body[data-route="home"] .home-all-products-preview .product-card .old-price,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card .old-price,
  body[data-route="product"] .similar-product-section .product-card .old-price {
    font-size: 10.6px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
  }

  body[data-route="home"] .home-primary-rail .product-card .card-rating,
  body[data-route="home"] .home-product-rail .product-card .card-rating,
  body[data-route="home"] .home-all-products-preview .product-card .card-rating,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card .card-rating,
  body[data-route="product"] .similar-product-section .product-card .card-rating {
    min-height: 16px !important;
    padding: 1px 4px !important;
    gap: 2px !important;
  }

  body[data-route="home"] .home-primary-rail .product-card .card-rating .nion-icon,
  body[data-route="home"] .home-product-rail .product-card .card-rating .nion-icon,
  body[data-route="home"] .home-all-products-preview .product-card .card-rating .nion-icon,
  body:is([data-route="offers"], [data-route="category"], [data-route="brand"], [data-route="collection"], [data-route="products"]) .product-grid:not(.search-product-list) .product-card .card-rating .nion-icon,
  body[data-route="product"] .similar-product-section .product-card .card-rating .nion-icon {
    width: 9px !important;
    height: 9px !important;
  }
}

html[data-theme="dark"] body[data-route="section"] .section-hub,
html[data-theme="dark"] body[data-route="section"] .section-hub-tabs,
html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a,
html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile {
  background: #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
  border-inline-start-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a {
  color: rgba(247, 244, 255, 0.58) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a.active {
  background: linear-gradient(270deg, rgba(156, 112, 227, 0.2), rgba(13, 13, 18, 0) 68%) !important;
  color: #fff !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile span,
html[data-theme="dark"] body[data-route="section"] .section-brand-alpha a {
  color: rgba(247, 244, 255, 0.62) !important;
}

/* Fast222: slimmer section banner and dashboard-editable category imagery fallback. */
@media (max-width: 640px) {
  body[data-route="section"] .section-hero-banner {
    aspect-ratio: 4 / 1 !important;
    min-height: 54px !important;
    max-height: 64px !important;
    margin: 2px 0 12px !important;
    border-radius: 10px !important;
  }

  body[data-route="section"] .section-hero-banner img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  body[data-route="section"] .section-panel-subtitle {
    justify-content: flex-start !important;
    margin: 10px 0 15px !important;
  }

  body[data-route="section"] .section-panel-subtitle strong {
    color: #15151a !important;
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  body[data-route="section"] .section-panel-subtitle span {
    margin-inline-start: auto !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile img {
    background: #fff !important;
    object-fit: contain !important;
    box-shadow: 0 7px 16px rgba(18, 18, 24, 0.045) !important;
  }
}

html[data-theme="dark"] body[data-route="section"] .section-panel-subtitle strong {
  color: #f7f4ff !important;
}

/* Fast226: dynamic hero uses real catalog products with right-aligned copy and unified card pricing. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-slide-link {
    position: relative !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 17% 52%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 34%),
      linear-gradient(135deg, rgba(121, 239, 215, 0.22), rgba(188, 165, 238, 0.17) 50%, rgba(239, 138, 222, 0.2)),
      #f8fbff !important;
  }

  body[data-route="home"] .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.28 !important;
    filter: saturate(1.06) contrast(1.02) !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    height: 40% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 92%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    inset: 0 !important;
    width: 54% !important;
    max-width: 54% !important;
    display: grid !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 6px !important;
    padding: 38px 19px 76px 0 !important;
    margin-inline-start: auto !important;
    color: #15151a !important;
    text-align: right !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-campaign-copy span,
  body[data-route="home"] .hero-campaign-copy em {
    max-width: 100% !important;
    color: rgba(21, 21, 26, 0.64) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-align: right !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    max-width: 100% !important;
    color: #15151a !important;
    font-size: clamp(25px, 8.4vw, 35px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-align: right !important;
    text-shadow: 0 2px 16px rgba(255, 255, 255, 0.54) !important;
  }

  body[data-route="home"] .hero-product-stack {
    position: absolute !important;
    inset-block: 74px 38px !important;
    inset-inline-start: 13px !important;
    width: 45% !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-product-orbit {
    position: absolute !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: 0 18px 36px rgba(18, 18, 24, 0.11) !important;
    backdrop-filter: blur(12px) !important;
  }

  body[data-route="home"] .hero-product-orbit img {
    width: 100% !important;
    height: 100% !important;
    padding: 7px !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 10px 14px rgba(18, 18, 24, 0.12)) !important;
  }

  body[data-route="home"] .hero-product-orbit-1 {
    width: 112px !important;
    height: 142px !important;
    inset-inline-start: 9px !important;
    inset-block-start: 22px !important;
    transform: rotate(-5deg) !important;
  }

  body[data-route="home"] .hero-product-orbit-2 {
    width: 88px !important;
    height: 112px !important;
    inset-inline-start: 82px !important;
    inset-block-start: 0 !important;
    transform: rotate(6deg) !important;
  }

  body[data-route="home"] .hero-product-orbit-3 {
    width: 78px !important;
    height: 96px !important;
    inset-inline-start: 72px !important;
    inset-block-end: 4px !important;
    transform: rotate(-3deg) !important;
  }

  .product-card .price-row,
  .favorite-mini-card .price-row,
  body[data-route="cart"] .cart-item .price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    direction: rtl !important;
  }

  .product-card .price,
  .favorite-mini-card .price,
  body[data-route="cart"] .cart-item .price {
    color: #cf2f69 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .product-card .old-price,
  .favorite-mini-card .old-price,
  body[data-route="cart"] .cart-item .old-price {
    color: rgba(18, 18, 24, 0.38) !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
  }
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
  background:
    radial-gradient(circle at 18% 52%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(121, 239, 215, 0.18), rgba(156, 112, 227, 0.2) 55%, rgba(239, 138, 222, 0.16)),
    #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
  background: linear-gradient(180deg, rgba(13, 13, 18, 0), #0d0d12 92%) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
  color: #f7f4ff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em {
  color: rgba(247, 244, 255, 0.76) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-product-orbit {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .product-card .old-price,
html[data-theme="dark"] .favorite-mini-card .old-price,
html[data-theme="dark"] body[data-route="cart"] .cart-item .old-price {
  color: rgba(247, 244, 255, 0.46) !important;
}

/* Fast232: brand tiles use real brand logo sources instead of generated initials. */
.brand-wordmark {
  width: 112px !important;
  height: 72px !important;
  max-width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #15151a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 24, 0.06) !important;
}

body[data-route="section"] .section-brand-logo-tile .brand-wordmark,
.brand-directory-tile .brand-wordmark {
  width: 100% !important;
  max-width: 96px !important;
  height: 72px !important;
  font-size: 11px !important;
}

html[data-theme="dark"] .brand-wordmark {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #111116 !important;
}

/* Fast242: dashboard-driven shortcuts and clean Nice One-style campaign hero. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-main {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 0 22px 22px !important;
    background:
      radial-gradient(circle at 22% 42%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 34%),
      linear-gradient(135deg, rgba(121, 239, 215, 0.2), rgba(179, 157, 236, 0.18) 52%, rgba(239, 138, 222, 0.18)),
      #f9fbff !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .hero-slide-link {
    background: transparent !important;
  }

  body[data-route="home"] .hero-slide {
    opacity: 0.16 !important;
    object-fit: cover !important;
    filter: saturate(1.08) contrast(1.02) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    height: 46% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 91%) !important;
    z-index: 1 !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    position: absolute !important;
    inset-block: 76px 82px !important;
    inset-inline: auto 18px !important;
    width: 50% !important;
    max-width: 50% !important;
    display: grid !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #16161d !important;
    text-align: right !important;
    z-index: 4 !important;
    pointer-events: none !important;
    text-shadow: 0 2px 18px rgba(255, 255, 255, 0.6) !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    max-width: 100% !important;
    color: #22222a !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    max-width: 100% !important;
    color: rgba(21, 21, 26, 0.68) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
    font-style: normal !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    color: #15151a !important;
    font-size: clamp(54px, 18vw, 76px) !important;
    font-weight: 950 !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
  }

  body[data-route="home"] .hero-product-lineup {
    position: absolute !important;
    inset-block: 82px 46px !important;
    inset-inline-start: 0 !important;
    width: 52% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-product-lineup-item {
    display: grid !important;
    place-items: end center !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 18px rgba(18, 18, 24, 0.16)) !important;
  }

  body[data-route="home"] .hero-product-lineup-item img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  body[data-route="home"] .hero-product-lineup-item-1 {
    width: 98px !important;
    height: 188px !important;
    transform: translateX(24px) translateY(10px) rotate(-2deg) !important;
    z-index: 2 !important;
  }

  body[data-route="home"] .hero-product-lineup-item-2 {
    width: 116px !important;
    height: 220px !important;
    transform: translateY(0) !important;
    z-index: 3 !important;
  }

  body[data-route="home"] .hero-product-lineup-item-3 {
    width: 94px !important;
    height: 178px !important;
    transform: translateX(-24px) translateY(12px) rotate(2deg) !important;
    z-index: 1 !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -3px !important;
    padding-top: 4px !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 62px !important;
    height: 62px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

html[data-theme="dark"] body[data-route="home"] .hero-main {
  background:
    radial-gradient(circle at 22% 42%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(121, 239, 215, 0.16), rgba(156, 112, 227, 0.19) 56%, rgba(239, 138, 222, 0.14)),
    #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
  background: linear-gradient(180deg, rgba(13, 13, 18, 0), #0d0d12 91%) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
  color: #f8f5ff !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em {
  color: rgba(248, 245, 255, 0.72) !important;
}

/* Fast253: final Nice One-style dashboard-driven hero. */
@media (max-width: 640px) {
  body[data-route="home"] .hero {
    margin: 0 !important;
    background: transparent !important;
  }

  body[data-route="home"] .hero-main {
    width: 100% !important;
    min-height: 414px !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(145deg, #f3a6be 0%, #f7bfd1 44%, #f7d7e2 100%) !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-slides {
    height: 100% !important;
  }

  body[data-route="home"] .hero-slide-link {
    position: relative !important;
    height: 100% !important;
    min-height: 414px !important;
    display: block !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 22% 50%, rgba(255,255,255,.76), rgba(255,255,255,0) 33%),
      linear-gradient(145deg, #f0a2bd 0%, #f5b7ca 52%, #f7d6e0 100%) !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      linear-gradient(124deg, rgba(255,255,255,0) 0 23%, rgba(255,255,255,.25) 24% 31%, rgba(255,255,255,0) 32% 100%),
      linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,0) 42%) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    height: 36% !important;
    z-index: 6 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 86%) !important;
  }

  body[data-route="home"] .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: .54 !important;
    filter: saturate(1.04) contrast(1.02) !important;
    z-index: 0 !important;
  }

  body[data-route="home"] .hero-brand-mark {
    position: absolute !important;
    inset-inline-start: 22px !important;
    inset-block-start: 156px !important;
    z-index: 4 !important;
    width: 43px !important;
    height: 43px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.46) !important;
    border: 1px solid rgba(20,20,26,.25) !important;
    backdrop-filter: blur(7px) !important;
  }

  body[data-route="home"] .hero-brand-mark img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  body[data-route="home"] .hero-product-lineup {
    position: absolute !important;
    inset-block: 158px 66px !important;
    inset-inline-start: 34px !important;
    width: 48% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-product-lineup-item {
    display: grid !important;
    place-items: end center !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 18px 15px rgba(42,20,28,.22)) !important;
  }

  body[data-route="home"] .hero-product-lineup-item img {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  body[data-route="home"] .hero-product-lineup-item-1 {
    width: 76px !important;
    height: 178px !important;
    transform: translateX(23px) translateY(5px) rotate(-3deg) !important;
    z-index: 3 !important;
  }

  body[data-route="home"] .hero-product-lineup-item-2 {
    width: 104px !important;
    height: 204px !important;
    transform: translateY(0) !important;
    z-index: 4 !important;
  }

  body[data-route="home"] .hero-product-lineup-item-3 {
    width: 76px !important;
    height: 170px !important;
    transform: translateX(-25px) translateY(7px) rotate(3deg) !important;
    z-index: 2 !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    position: absolute !important;
    inset-block-start: 151px !important;
    inset-inline-end: 20px !important;
    width: 48% !important;
    max-width: 48% !important;
    min-height: 218px !important;
    display: grid !important;
    align-content: center !important;
    justify-items: end !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
    color: #08080b !important;
    text-align: right !important;
    text-shadow: 0 2px 18px rgba(255,255,255,.34) !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    max-width: 178px !important;
    color: #08080b !important;
    font-size: 23px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-align: right !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    max-width: 160px !important;
    color: rgba(8,8,11,.78) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    font-style: normal !important;
    text-align: right !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    color: #08080b !important;
    font-size: clamp(56px, 19vw, 78px) !important;
    font-weight: 1000 !important;
    line-height: .84 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 7 !important;
    inset-block-end: 65px !important;
    gap: 6px !important;
  }

  body[data-route="home"] .hero-dots button {
    width: 8px !important;
    height: 8px !important;
    background: rgba(24,24,28,.22) !important;
  }

  body[data-route="home"] .hero-dots button.active {
    width: 8px !important;
    background: #111116 !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -46px !important;
    padding-top: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0 38px, #fff 38px 100%) !important;
    z-index: 8 !important;
  }
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
  background:
    radial-gradient(circle at 22% 50%, rgba(255,255,255,.16), rgba(255,255,255,0) 33%),
    linear-gradient(145deg, rgba(189,98,139,.62), rgba(75,49,92,.64) 58%, rgba(22,18,25,.95)) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
  background: linear-gradient(180deg, rgba(13,13,18,0), #0d0d12 86%) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
  color: #fff !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
  background: linear-gradient(180deg, rgba(13,13,18,0) 0 38px, #0d0d12 38px 100%) !important;
}

/* Fast253 polish: keep dashboard hero banners clean and shortcut PNGs unframed. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-product-lineup {
    display: none !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -50px !important;
    padding: 0 0 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0 34px, #fff 34px 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px 12px !important;
    padding: 0 18px !important;
    overflow: visible !important;
  }

  body[data-route="home"] .hero-icon-item {
    width: auto !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 66px !important;
    height: 66px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 66px !important;
    height: 66px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 7px 12px rgba(17,17,24,.08)) !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    min-height: 27px !important;
    color: #111116 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}

@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    background: linear-gradient(180deg, rgba(13,13,18,0) 0 34px, #0d0d12 34px 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-item strong {
    color: #f8f5ff !important;
  }
}

/* Fast254: keep product review picker stars in one polished row. */
body[data-route="product"] .product-review-form-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  direction: rtl !important;
  text-align: right !important;
}

body[data-route="product"] .product-review-form-head > div:first-child {
  width: 100% !important;
  justify-items: end !important;
  text-align: right !important;
}

body[data-route="product"] .product-review-form .order-review-stars {
  direction: ltr !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: max-content !important;
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
}

body[data-route="product"] .product-review-form .order-review-stars input {
  display: none !important;
}

body[data-route="product"] .product-review-form .order-review-stars button {
  width: 29px !important;
  height: 29px !important;
  flex: 0 0 29px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
}

@media (max-width: 640px) {
  body[data-route="product"] .product-review-form-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    gap: 9px !important;
  }

body[data-route="product"] .product-review-form .order-review-stars {
    justify-self: end !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
  }
}

/* Fast256: dashboard-owned Nice One-style hero. Keep artwork as the background and copy editable from dashboard data. */
@media (max-width: 640px) {
  body[data-route="home"] .hero {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body[data-route="home"] .hero-main {
    width: 100% !important;
    min-height: 426px !important;
    height: 426px !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f7bfd1 !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  body[data-route="home"] .hero-slides,
  body[data-route="home"] .hero-slide-link {
    height: 100% !important;
    min-height: 426px !important;
  }

  body[data-route="home"] .hero-slide-link {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #f7bfd1 !important;
    isolation: isolate !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.2) 38%, rgba(255,255,255,0) 61%),
      linear-gradient(122deg, rgba(255,255,255,0) 0 27%, rgba(255,255,255,.32) 28% 34%, rgba(255,255,255,0) 35% 100%) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    height: 38% !important;
    z-index: 6 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%) !important;
  }

  body[data-route="home"] .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: saturate(1.03) contrast(1.01) !important;
    z-index: 1 !important;
  }

  body[data-route="home"] .hero-product-lineup {
    display: none !important;
  }

  body[data-route="home"] .hero-brand-mark {
    position: absolute !important;
    left: 22px !important;
    right: auto !important;
    top: 266px !important;
    width: 39px !important;
    height: 39px !important;
    z-index: 4 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(18,18,24,.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.42) !important;
    box-shadow: 0 14px 28px rgba(18,18,24,.08) !important;
    backdrop-filter: blur(9px) saturate(1.25) !important;
  }

  body[data-route="home"] .hero-brand-mark img {
    width: 31px !important;
    height: 31px !important;
    object-fit: contain !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    position: absolute !important;
    left: 22px !important;
    right: auto !important;
    top: 142px !important;
    width: 43% !important;
    max-width: 176px !important;
    min-height: 132px !important;
    z-index: 5 !important;
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #09090d !important;
    text-align: left !important;
    text-shadow: 0 2px 18px rgba(255,255,255,.5) !important;
    pointer-events: none !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    max-width: 176px !important;
    color: #09090d !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    max-width: 150px !important;
    color: rgba(9,9,13,.74) !important;
    font-size: 12.5px !important;
    font-weight: 820 !important;
    line-height: 1.08 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    color: #09090d !important;
    font-size: clamp(56px, 18vw, 76px) !important;
    font-weight: 1000 !important;
    line-height: .82 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
  }

  body[data-route="home"] .hero-dots {
    z-index: 7 !important;
    inset-block-end: 72px !important;
    gap: 6px !important;
  }

  body[data-route="home"] .hero-dots button {
    width: 8px !important;
    height: 8px !important;
    background: rgba(24,24,28,.22) !important;
  }

  body[data-route="home"] .hero-dots button.active {
    width: 8px !important;
    background: #111116 !important;
  }

  body[data-route="home"] .hero-icon-rail {
    position: relative !important;
    z-index: 8 !important;
    margin-top: -52px !important;
    padding: 0 0 10px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0 35px, #fff 35px 100%) !important;
  }
}

@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .hero-main,
  html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::before {
    background:
      linear-gradient(90deg, rgba(13,13,18,.5) 0%, rgba(13,13,18,.18) 42%, rgba(13,13,18,0) 66%),
      linear-gradient(122deg, rgba(255,255,255,0) 0 27%, rgba(255,255,255,.12) 28% 34%, rgba(255,255,255,0) 35% 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
    background: linear-gradient(180deg, rgba(13,13,18,0), #0d0d12 88%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em,
  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.32) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em {
    color: rgba(255,255,255,.76) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    background: linear-gradient(180deg, rgba(13,13,18,0) 0 35px, #0d0d12 35px 100%) !important;
  }
}

/* Fast285: homepage should paint smoothly without offscreen blank gaps. */
@media (max-width: 640px) {
  body[data-route="home"] .home-deferred > .section,
  body[data-route="home"] .home-product-feed,
  body[data-route="home"] .home-product-feed > .home-product-rail,
  body[data-route="home"] .promo-showcase,
  body[data-route="home"] .brand-showcase-section,
  body[data-route="home"] .brand-rail,
  body[data-route="home"] .quick-grid,
  body[data-route="home"] .editorial-promos,
  body[data-route="home"] .editorial-promo-grid {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  body[data-route="home"] .home-deferred.is-loaded {
    display: grid !important;
    gap: 14px !important;
  }
}

/* Fast267: cleaner NiceOne-style section directory and stricter taxonomy layout. */
@media (max-width: 640px) {
  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 0 !important;
    align-items: start !important;
    background: #f4f4f6 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body[data-route="section"] .section-hub-tabs {
    min-height: calc(100vh - 126px) !important;
    max-height: calc(100vh - 116px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 7px 0 96px !important;
    border-inline-start: 1px solid rgba(18, 18, 24, 0.06) !important;
    background: #f1f1f3 !important;
    scrollbar-width: none !important;
  }

  body[data-route="section"] .section-hub-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 48px !important;
    padding: 7px 11px 7px 6px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    border-inline-end: 3px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(18, 18, 24, 0.56) !important;
    font-size: 12.4px !important;
    font-weight: 760 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    border-inline-end-color: #8b68ee !important;
    background: #fff !important;
    color: #15151b !important;
    font-weight: 920 !important;
    box-shadow: -10px 0 22px rgba(18, 18, 24, 0.025) !important;
  }

  body[data-route="section"] .section-hub-content {
    min-height: calc(100vh - 126px) !important;
    padding: 0 8px 104px 8px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  body[data-route="section"] .section-panel-subtitle {
    margin: 7px 0 11px !important;
    padding-inline: 2px !important;
  }

  body[data-route="section"] .section-panel-subtitle strong {
    font-size: 18px !important;
  }

  body[data-route="section"] .section-panel-subtitle span {
    font-size: 10.5px !important;
  }

  body[data-route="section"] .section-brand-directory {
    grid-template-columns: minmax(0, 1fr) 18px !important;
    gap: 6px !important;
  }

  body[data-route="section"] .section-brand-alpha {
    max-height: calc(100vh - 168px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 0 96px !important;
    gap: 2px !important;
    scrollbar-width: none !important;
  }

  body[data-route="section"] .section-brand-alpha::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="section"] .section-brand-alpha a {
    width: 17px !important;
    min-height: 16px !important;
    font-size: 10.5px !important;
    font-weight: 820 !important;
  }

  body[data-route="section"] .section-brand-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-route="section"] .section-brand-logo-tile {
    min-height: 108px !important;
    padding: 8px 6px 7px !important;
    border-radius: 8px !important;
  }

  body[data-route="section"] .section-brand-logo-tile .brand-logo,
  body[data-route="section"] .section-brand-logo-tile img {
    max-width: 92px !important;
    height: 66px !important;
  }

  body[data-route="section"] .section-category-grid {
    gap: 10px 8px !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile {
    padding: 8px 5px 9px !important;
    gap: 6px !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile span {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
}

html[data-theme="dark"] body[data-route="section"] .section-hub {
  background: #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
  background: #15151b !important;
  border-inline-start-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-content,
html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a.active {
  background: #0d0d12 !important;
}

/* Fast281: tighter section rail and stronger marketing banners across all section tabs. */
@media (max-width: 640px) {
  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  body[data-route="section"] .section-hub-tabs {
    padding: 4px 0 92px !important;
    background: #eeeeF1 !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
    padding: 3px 9px 3px 5px !important;
    font-size: 11.3px !important;
    line-height: 1.12 !important;
    font-weight: 760 !important;
    display: flex !important;
    margin: 0 !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    border-inline-end-width: 3px !important;
    box-shadow: -8px 0 16px rgba(18, 18, 24, 0.018) !important;
  }

  body[data-route="section"] .section-hub-content {
    padding-inline: 7px !important;
  }

  body[data-route="section"] .section-hero-banner {
    aspect-ratio: 3.95 / 1 !important;
    min-height: 56px !important;
    max-height: 68px !important;
    margin: 1px 0 10px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, rgba(121, 239, 215, 0.13), rgba(223, 176, 238, 0.16)), #f8f5fb !important;
  }

  body[data-route="section"] .section-hero-banner img {
    object-fit: cover !important;
    object-position: center center !important;
  }
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
  background: #16161d !important;
}

/* Fast264: dashboard quick offers become an editable horizontal product-collection rail. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-rail {
    margin-top: -48px !important;
    padding: 0 0 12px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0 35px, #fff 35px 100%) !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 64px !important;
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, auto) !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 7px 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    padding: 0 14px 3px !important;
  }

  body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="home"] .hero-icon-item {
    width: 64px !important;
    min-width: 64px !important;
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    scroll-snap-align: start !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 54px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    width: 64px !important;
    min-height: 24px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    background: linear-gradient(180deg, rgba(13,13,18,0) 0 35px, #0d0d12 35px 100%) !important;
  }
}

/* Fast287: final homepage viewport lock after all older mobile overrides. */
@media (max-width: 640px) {
  body[data-route="home"] #homeDeferred {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  body[data-route="home"] #homeDeferred > .section,
  body[data-route="home"] #homeDeferred > .brand-showcase-section,
  body[data-route="home"] #homeDeferred > .editorial-promos,
  body[data-route="home"] #homeDeferred > .home-product-feed > .home-product-rail {
    width: min(100% - 22px, 440px) !important;
    max-width: calc(100vw - 22px) !important;
    margin: 14px auto !important;
    position: relative !important;
    inset: auto !important;
    inset-inline: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    justify-self: center !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  body[data-route="home"] #homeDeferred .quick-grid,
  body[data-route="home"] #homeDeferred .brand-rail,
  body[data-route="home"] #homeDeferred .editorial-promo-grid,
  body[data-route="home"] #homeDeferred .rail,
  body[data-route="home"] #homeDeferred .product-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  body[data-route="home"] #homeDeferred > .home-product-feed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    gap: 16px !important;
  }
}

/* Fast289: product gallery thumbs sit below the image, and perks become compact 2x2 chips. */
@media (max-width: 640px) {
  body[data-route="product"] .detail-media {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    border-radius: 0 0 18px 18px !important;
  }

  body[data-route="product"] .detail-slider,
  body[data-route="product"] .detail-track,
  body[data-route="product"] .detail-slide {
    height: clamp(340px, 92vw, 410px) !important;
    min-height: clamp(340px, 92vw, 410px) !important;
  }

  body[data-route="product"] .detail-slide img {
    padding: calc(46px + env(safe-area-inset-top)) 18px 38px !important;
  }

  body[data-route="product"] .detail-slide-dots {
    inset-block-end: 14px !important;
  }

  body[data-route="product"] .detail-thumbs {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 8px auto 0 !important;
    padding: 0 2px 7px !important;
    transform: none !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  body[data-route="product"] .detail-thumbs button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    box-shadow: 0 6px 14px rgba(18, 18, 24, 0.06) !important;
  }

  body[data-route="product"] .detail-thumbs img {
    padding: 4px !important;
  }

  body[data-route="product"] .detail-info {
    margin-top: 8px !important;
  }

  body[data-route="product"] .detail-perks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-route="product"] .detail-perks > span,
  body[data-route="product"] .detail-perks .detail-policy-note {
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: 19px minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: center !important;
    justify-items: start !important;
    padding: 6px 8px !important;
    border-radius: 11px !important;
    font-size: 10.4px !important;
    font-weight: 780 !important;
    line-height: 1.16 !important;
    text-align: start !important;
    white-space: normal !important;
  }

  body[data-route="product"] .detail-perks > span > .nion-icon,
  body[data-route="product"] .detail-perks .detail-policy-note > .nion-icon {
    width: 15px !important;
    height: 15px !important;
    grid-column: 1 !important;
    justify-self: center !important;
  }

  body[data-route="product"] .detail-policy-copy {
    grid-column: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.16 !important;
    white-space: normal !important;
    text-wrap: auto !important;
  }

  body[data-route="product"] .detail-policy-copy strong {
    font-weight: 950 !important;
  }
}

@media (min-width: 641px) {
  body[data-route="product"] .detail-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Fast290: denser right-side section tabs, closer to native commerce category lists. */
@media (max-width: 640px) {
  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  body[data-route="section"] .section-hub-tabs {
    align-content: start !important;
    grid-auto-rows: min-content !important;
    row-gap: 0 !important;
    padding-block-start: 2px !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 2px 8px 2px 4px !important;
    align-items: center !important;
    font-size: 10.6px !important;
    line-height: 1.08 !important;
    font-weight: 760 !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    font-weight: 900 !important;
  }
}

/* Fast291: managed offers page, grouped by dashboard blocks with polished commerce spacing. */
body[data-route="offers"] #app .page {
  padding-bottom: calc(var(--bottom-nav-space) + 16px) !important;
}

body[data-route="offers"] .offers-search-spacer {
  height: 4px !important;
}

body[data-route="offers"] .offers-title {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  padding: 0 2px !important;
}

body[data-route="offers"] .offers-title span {
  color: #8a62ea !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

body[data-route="offers"] .offers-title h1 {
  margin-top: 4px !important;
  font-size: clamp(22px, 6vw, 32px) !important;
  line-height: 1.12 !important;
}

body[data-route="offers"] .offers-title p {
  max-width: 58ch !important;
  color: color-mix(in srgb, var(--text), transparent 42%) !important;
}

body[data-route="offers"] .offers-hero {
  margin-bottom: 14px !important;
}

body[data-route="offers"] .offers-hero-track {
  grid-auto-columns: min(88%, 430px) !important;
  gap: 9px !important;
  border-radius: 14px !important;
}

body[data-route="offers"] .offers-hero-card {
  aspect-ratio: 1.78 / 1 !important;
  border-radius: 14px !important;
  background: #f7f8fb !important;
  box-shadow: 0 10px 22px rgba(18, 18, 24, 0.06) !important;
}

body[data-route="offers"] .offers-hero-card img,
body[data-route="offers"] .offers-banner-card img {
  object-fit: cover !important;
}

body[data-route="offers"] .offers-shortcuts {
  margin-bottom: 14px !important;
}

body[data-route="offers"] .offers-shortcut-track {
  grid-auto-columns: 72px !important;
  gap: 8px !important;
  padding-bottom: 2px !important;
}

body[data-route="offers"] .offers-shortcut span {
  width: 64px !important;
  height: 64px !important;
}

body[data-route="offers"] .offers-shortcut strong {
  font-size: 10.6px !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
}

body[data-route="offers"] .offers-shortcut span {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="offers"] .offers-shortcut img {
  object-fit: contain !important;
  padding: 0 !important;
}

body[data-route="offers"] .offers-picks-feature {
  width: min(100% - 28px, 1040px) !important;
  margin: 2px auto 14px !important;
}

body[data-route="offers"] .offers-picks-feature > a {
  position: relative !important;
  min-height: 148px !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #f4f2f8 !important;
  color: #111116 !important;
}

body[data-route="offers"] .offers-picks-feature img {
  width: 100% !important;
  height: 100% !important;
  min-height: 148px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

body[data-route="offers"] .offers-picks-feature span {
  position: absolute !important;
  inset-block: 0 !important;
  inset-inline-end: 0 !important;
  width: 46% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 3px !important;
  padding: 16px !important;
  text-align: start !important;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.78) 24%, rgba(255,255,255,.96)) !important;
}

html[dir="ltr"] body[data-route="offers"] .offers-picks-feature span {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  background: linear-gradient(270deg, rgba(255,255,255,0), rgba(255,255,255,.78) 24%, rgba(255,255,255,.96)) !important;
}

body[data-route="offers"] .offers-picks-feature small,
body[data-route="offers"] .offers-picks-feature strong,
body[data-route="offers"] .offers-picks-feature em {
  display: block !important;
  letter-spacing: 0 !important;
}

body[data-route="offers"] .offers-picks-feature small {
  color: #7e5cdd !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}

body[data-route="offers"] .offers-picks-feature strong {
  font-size: clamp(20px, 5.7vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

body[data-route="offers"] .offers-picks-feature em {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  color: rgba(17,17,22,.68) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-picks-feature > a {
  background: #15161d !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-picks-feature span {
  background: linear-gradient(90deg, rgba(13,13,18,0), rgba(13,13,18,.78) 24%, rgba(13,13,18,.96)) !important;
}

html[data-theme="dark"] html[dir="ltr"] body[data-route="offers"] .offers-picks-feature span,
html[dir="ltr"][data-theme="dark"] body[data-route="offers"] .offers-picks-feature span {
  background: linear-gradient(270deg, rgba(13,13,18,0), rgba(13,13,18,.78) 24%, rgba(13,13,18,.96)) !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-picks-feature em {
  color: rgba(247,247,251,.68) !important;
}

body[data-route="offers"] .offers-banner-mosaic {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

body[data-route="offers"] .offers-banner-card {
  border-radius: 11px !important;
  background: #f8f8fb !important;
  box-shadow: none !important;
}

body[data-route="offers"] .offers-banner-card.is-wide {
  aspect-ratio: 2.35 / 1 !important;
}

body[data-route="offers"] .offers-product-section {
  margin-bottom: 14px !important;
  padding: 10px !important;
  border: 1px solid rgba(188, 165, 238, 0.14) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--surface), transparent 6%) !important;
  box-shadow: 0 10px 24px rgba(18, 18, 24, 0.045) !important;
}

body[data-route="offers"] .offers-product-section .section-head {
  min-height: 0 !important;
  margin-bottom: 8px !important;
  padding-inline: 2px !important;
}

body[data-route="offers"] .offers-product-section .section-head h2 {
  color: var(--text) !important;
  font-size: clamp(18px, 5vw, 23px) !important;
  line-height: 1.18 !important;
}

body[data-route="offers"] .offers-product-section .section-head p {
  color: color-mix(in srgb, var(--text), transparent 48%) !important;
  font-size: 10.8px !important;
}

body[data-route="offers"] .offers-product-section .product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body[data-route="offers"] .offers-product-section .product-card {
  width: 100% !important;
  min-width: 0 !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-title p,
html[data-theme="dark"] body[data-route="offers"] .offers-product-section .section-head p {
  color: rgba(245, 245, 247, 0.6) !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-hero-card,
html[data-theme="dark"] body[data-route="offers"] .offers-banner-card,
html[data-theme="dark"] body[data-route="offers"] .offers-product-section {
  background: rgba(20, 20, 24, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Fast294: dashboard shortcuts under hero become swipeable 4x2 pages. */
body[data-route="home"] .hero-icon-rail {
  width: min(100% - 22px, 1040px) !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: hidden !important;
}

body[data-route="home"] .hero-icon-track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  grid-template-rows: 1fr !important;
  direction: ltr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  padding: 0 1px 4px !important;
}

body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
  display: none !important;
}

body[data-route="home"] .hero-icon-page {
  width: 100% !important;
  min-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(74px, auto)) !important;
  column-gap: 6px !important;
  row-gap: 8px !important;
  align-items: start !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  direction: rtl !important;
}

body[data-route="home"] .hero-icon-item {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  text-align: center !important;
  scroll-snap-align: none !important;
}

body[data-route="home"] .hero-icon-item span,
body[data-route="home"] .home-loading-chip {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-route="home"] .hero-icon-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  padding: 0 !important;
  filter: none !important;
}

body[data-route="home"] .hero-icon-item strong {
  width: 100% !important;
  min-height: 24px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: 10.4px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-align: center !important;
  text-wrap: balance !important;
}

body[data-route="home"] .home-loading-icons .hero-icon-page {
  grid-template-rows: repeat(2, 62px) !important;
}

body[data-route="home"] .home-loading-chip {
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(245, 245, 247, 0.72), rgba(235, 235, 241, 0.95), rgba(245, 245, 247, 0.72)) !important;
  background-size: 180% 100% !important;
  animation: shimmer 1.1s linear infinite !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-rail,
html[data-theme="dark"] body[data-route="home"] .hero-icon-item,
html[data-theme="dark"] body[data-route="home"] .hero-icon-item span {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-item strong {
  color: rgba(245, 245, 247, 0.88) !important;
}

/* Fast297: final production dark mode sweep across all storefront routes. */
html[data-theme="dark"] {
  --nion-theme-bg: #090a0f;
  --nion-theme-bg-soft: #101119;
  --nion-theme-surface: #15161d;
  --nion-theme-surface-strong: #1b1c25;
  --nion-theme-ink: #f7f7fb;
  --nion-theme-muted: rgba(247, 247, 251, 0.64);
  --nion-theme-line: rgba(255, 255, 255, 0.095);
  --paper: #15161d;
  --surface: #101119;
  --text: #f7f7fb;
  --muted: rgba(247, 247, 251, 0.64);
  --line: rgba(255, 255, 255, 0.095);
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .page {
  background: #090a0f !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
  background: transparent !important;
}

html[data-theme="dark"] .top-strip {
  background: #090a0f !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: rgba(247, 247, 251, 0.74) !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] body[data-route="home"] .site-header {
  background: rgba(9, 10, 15, 0.54) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

html[data-theme="dark"] .search,
html[data-theme="dark"] body[data-route="home"] .search,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .icon-action,
html[data-theme="dark"] body[data-route="home"] .icon-action,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .detail-floating-button,
html[data-theme="dark"] body[data-route="product"] .detail-floating-button,
html[data-theme="dark"] body[data-route="cart"] .cart-empty-head .iconless {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)),
    rgba(15, 16, 23, 0.66) !important;
  color: #f7f7fb !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

html[data-theme="dark"] .search input,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: transparent !important;
  color: #f7f7fb !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .checkout-form input,
html[data-theme="dark"] .checkout-form select,
html[data-theme="dark"] .checkout-form textarea,
html[data-theme="dark"] .account-profile-form input,
html[data-theme="dark"] .account-profile-form select,
html[data-theme="dark"] .account-profile-form textarea {
  background: #11121a !important;
  color: #f7f7fb !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search input::placeholder {
  color: rgba(247, 247, 251, 0.45) !important;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .suggestions,
html[data-theme="dark"] .account-menu-list,
html[data-theme="dark"] .account-profile-card,
html[data-theme="dark"] .account-inline-panel,
html[data-theme="dark"] .account-favorites-panel,
html[data-theme="dark"] .cart-empty-state,
html[data-theme="dark"] .cart-items-panel,
html[data-theme="dark"] .cart-summary-panel,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] .account-order-card,
html[data-theme="dark"] .orders-empty,
html[data-theme="dark"] .detail-info,
html[data-theme="dark"] .detail-price-card,
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .detail-variant-panel,
html[data-theme="dark"] .product-review-form,
html[data-theme="dark"] .product-review-login,
html[data-theme="dark"] .product-review-card,
html[data-theme="dark"] .product-review-empty,
html[data-theme="dark"] .product-reviews-total,
html[data-theme="dark"] .offers-product-section,
html[data-theme="dark"] .offers-hero-card,
html[data-theme="dark"] .offers-banner-card,
html[data-theme="dark"] .quick-tile,
html[data-theme="dark"] .brand-tile {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  color: #f7f7fb !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] body[data-route="home"] .section,
html[data-theme="dark"] body[data-route="home"] #homeDeferred > .section,
html[data-theme="dark"] body[data-route="home"] #homeDeferred > .brand-showcase-section,
html[data-theme="dark"] body[data-route="home"] #homeDeferred > .editorial-promos,
html[data-theme="dark"] body[data-route="home"] #homeDeferred > .home-product-feed > .home-product-rail {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .section-head h2,
html[data-theme="dark"] .page-title h1,
html[data-theme="dark"] .offers-title h1,
html[data-theme="dark"] .cart-empty-head h1,
html[data-theme="dark"] .cart-empty-state h2,
html[data-theme="dark"] .cart-panel-head strong,
html[data-theme="dark"] .checkout-summary-top h2,
html[data-theme="dark"] .account-menu-list a,
html[data-theme="dark"] .account-menu-list button,
html[data-theme="dark"] .account-profile-head strong,
html[data-theme="dark"] .account-info-grid strong,
html[data-theme="dark"] .detail-info h1,
html[data-theme="dark"] .detail-panel strong,
html[data-theme="dark"] .detail-toggle,
html[data-theme="dark"] .product-review-form-head strong,
html[data-theme="dark"] .product-review-empty strong,
html[data-theme="dark"] .orders-page-head strong,
html[data-theme="dark"] .account-order-title strong {
  color: #f7f7fb !important;
  -webkit-text-fill-color: #f7f7fb !important;
}

html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .page-title p,
html[data-theme="dark"] .offers-title p,
html[data-theme="dark"] .cart-empty-state p,
html[data-theme="dark"] .cart-panel-head span,
html[data-theme="dark"] .checkout-summary-top > span,
html[data-theme="dark"] .account-profile-head span,
html[data-theme="dark"] .account-profile-head em,
html[data-theme="dark"] .account-info-grid span,
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .detail-meta-row .brand-name,
html[data-theme="dark"] .details-text,
html[data-theme="dark"] .product-review-form-head span,
html[data-theme="dark"] .product-review-empty span,
html[data-theme="dark"] .account-order-title em,
html[data-theme="dark"] .account-order-summary em {
  color: rgba(247, 247, 251, 0.64) !important;
  -webkit-text-fill-color: rgba(247, 247, 251, 0.64) !important;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .suggestion-product {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] .product-body,
html[data-theme="dark"] .product-actions,
html[data-theme="dark"] .favorite-mini-info,
html[data-theme="dark"] .favorite-mini-side {
  background: #15161d !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] .product-media,
html[data-theme="dark"] .favorite-mini-media,
html[data-theme="dark"] .suggestion-product-image,
html[data-theme="dark"] .cart-item-media,
html[data-theme="dark"] .order-item img,
html[data-theme="dark"] .account-order-item img {
  background: #101119 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .product-card .product-name,
html[data-theme="dark"] .favorite-mini-card .product-name,
html[data-theme="dark"] .suggestion-product-copy strong {
  color: #f7f7fb !important;
}

html[data-theme="dark"] .product-card .brand-name,
html[data-theme="dark"] .product-card .old-price,
html[data-theme="dark"] .product-card .stock,
html[data-theme="dark"] .product-card .rating-row,
html[data-theme="dark"] .favorite-mini-card .brand-name,
html[data-theme="dark"] .favorite-mini-card .old-price,
html[data-theme="dark"] .favorite-mini-card .stock,
html[data-theme="dark"] .suggestion-product-copy small,
html[data-theme="dark"] .suggestion-price-row i {
  color: rgba(247, 247, 251, 0.58) !important;
}

html[data-theme="dark"] .product-card .price,
html[data-theme="dark"] .favorite-mini-card .price,
html[data-theme="dark"] .cart-item-price,
html[data-theme="dark"] .detail-price-card .price {
  color: #e84f86 !important;
  -webkit-text-fill-color: #e84f86 !important;
}

html[data-theme="dark"] .fav-button,
html[data-theme="dark"] .favorite-mini-heart {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] .fav-button.is-favorite,
html[data-theme="dark"] .favorite-mini-heart.is-favorite,
html[data-theme="dark"] .detail-floating-button.is-favorite {
  color: #d95fdd !important;
  background: rgba(217, 95, 221, 0.14) !important;
  border-color: rgba(217, 95, 221, 0.22) !important;
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .account-login,
html[data-theme="dark"] .product-card .add-button:not(:disabled),
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled),
html[data-theme="dark"] .detail-sticky-cart .add-button,
html[data-theme="dark"] .detail-info > .add-button,
html[data-theme="dark"] .product-review-submit {
  background: #f7f7fb !important;
  color: #101116 !important;
  -webkit-text-fill-color: #101116 !important;
  border-color: transparent !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .primary-button .nion-icon,
html[data-theme="dark"] .account-login .nion-icon,
html[data-theme="dark"] .add-button .cart-plus {
  color: #8f67f1 !important;
  -webkit-text-fill-color: #8f67f1 !important;
}

html[data-theme="dark"] .outline-button,
html[data-theme="dark"] .secondary-button {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #d8b7f2 !important;
  border-color: rgba(216, 183, 242, 0.2) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-main,
html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
  background: #090a0f !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
  background: linear-gradient(180deg, rgba(9, 10, 15, 0) 48%, rgba(9, 10, 15, 0.72) 78%, #090a0f 100%) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em,
html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-rail,
html[data-theme="dark"] body[data-route="home"] .hero-icon-page,
html[data-theme="dark"] body[data-route="home"] .hero-icon-item,
html[data-theme="dark"] body[data-route="home"] .hero-icon-item span {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-icon-item strong {
  color: rgba(247, 247, 251, 0.88) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-media {
  background:
    radial-gradient(circle at 30% 10%, rgba(188, 165, 238, 0.09), transparent 38%),
    linear-gradient(180deg, #11121a 0%, #0d0e14 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-slide {
  background: transparent !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-slide img {
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.28)) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-thumbs {
  background: transparent !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-thumbs button {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f7f7fb !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-thumbs button.active {
  border-color: rgba(188, 165, 238, 0.54) !important;
  box-shadow:
    0 0 0 1px rgba(188, 165, 238, 0.16),
    0 10px 20px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-review-summary,
html[data-theme="dark"] body[data-route="product"] .detail-review-summary.is-empty {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: rgba(247, 247, 251, 0.78) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-review-summary strong {
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-variant-panel,
html[data-theme="dark"] body[data-route="product"] .detail-perks > span,
html[data-theme="dark"] body[data-route="product"] .detail-perks .detail-policy-note {
  background: #15161d !important;
  color: rgba(247, 247, 251, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-variant-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-policy-copy strong {
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="product"] .product-review-form textarea {
  background: #11121a !important;
  color: #f7f7fb !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-empty-screen,
html[data-theme="dark"] body[data-route="cart"] .cart-empty-state {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-empty-icon {
  background:
    radial-gradient(circle at 24% 16%, rgba(121, 239, 215, 0.38), transparent 42%),
    linear-gradient(135deg, rgba(188, 165, 238, 0.96), rgba(143, 103, 241, 0.92)) !important;
  color: #fff !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-empty-state h2 {
  color: #f7f7fb !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-empty-state p {
  color: rgba(247, 247, 251, 0.66) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body[data-route="cart"] .cart-item,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper button,
html[data-theme="dark"] body[data-route="cart"] .cart-item-stepper span {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="account"] .account-login {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] body[data-route="account"] .account-menu-list a,
html[data-theme="dark"] body[data-route="account"] .account-menu-list button {
  background: transparent !important;
  color: #f7f7fb !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub {
  background: #090a0f !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
  background: #11121a !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a {
  background: transparent !important;
  color: rgba(247, 247, 251, 0.62) !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a.active {
  background: #15161d !important;
  color: #f7f7fb !important;
  border-inline-end-color: #8f67f1 !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-content,
html[data-theme="dark"] body[data-route="section"] .section-brand-directory,
html[data-theme="dark"] body[data-route="section"] .section-category-grid,
html[data-theme="dark"] body[data-route="section"] .section-panel-subtitle {
  background: #090a0f !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile,
html[data-theme="dark"] body[data-route="section"] .brand-directory-tile,
html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile {
  background: #15161d !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile span,
html[data-theme="dark"] body[data-route="section"] .brand-directory-tile span,
html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile span {
  color: rgba(247, 247, 251, 0.82) !important;
}

html[data-theme="dark"] .brands-alpha-index a,
html[data-theme="dark"] .section-brand-alpha a {
  color: rgba(247, 247, 251, 0.58) !important;
}

html[data-theme="dark"] .brands-alpha-index a.active,
html[data-theme="dark"] .section-brand-alpha a.active {
  color: #d8b7f2 !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-shortcut,
html[data-theme="dark"] body[data-route="offers"] .offers-shortcut span {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-shortcut strong {
  color: rgba(247, 247, 251, 0.88) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs,
html[data-theme="dark"] body[data-route="orders"] .orders-page-head {
  background: #090a0f !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a,
html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs > span {
  background: #15161d !important;
  color: rgba(247, 247, 251, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active {
  background:
    radial-gradient(circle at 20% 16%, rgba(121, 239, 215, 0.34), transparent 40%),
    linear-gradient(135deg, rgba(188, 165, 238, 0.96), rgba(143, 103, 241, 0.9)) !important;
  color: #101116 !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active b {
  color: #101116 !important;
}

html[data-theme="dark"] .toast {
  background: rgba(21, 22, 29, 0.96) !important;
  color: #f7f7fb !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34) !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] .page {
    background: #090a0f !important;
  }

  html[data-theme="dark"] body[data-route="product"] .detail-info {
    margin-inline: auto !important;
  }

  html[data-theme="dark"] body[data-route="cart"] .cart-empty-state {
    padding: 28px 16px !important;
  }
}

html[data-theme="dark"] body[data-route="account"] .account-login,
html[data-theme="dark"] .product-review-login button {
  background:
    radial-gradient(circle at 18% 18%, rgba(121, 239, 215, 0.18), transparent 40%),
    linear-gradient(135deg, #101116 0%, #171823 48%, #8f67f1 120%) !important;
  color: #f7f7fb !important;
  -webkit-text-fill-color: #f7f7fb !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Fast299: keep product-card ratings centered and free of visual artifacts. */
.product-card .card-rating,
.product-card .card-rating * {
  text-decoration: none !important;
}

.product-card .card-rating {
  height: 17px !important;
  min-height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  direction: ltr !important;
  gap: 2.5px !important;
  padding: 1px 5px !important;
  line-height: 1 !important;
}

.product-card .card-rating .nion-icon {
  flex: 0 0 auto !important;
  display: block !important;
  width: 9.5px !important;
  height: 9.5px !important;
}

.product-card .card-rating b,
.product-card .card-rating em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 12px !important;
  line-height: 12px !important;
}

.product-card .rating-row {
  align-items: center !important;
  line-height: 1 !important;
}

/* Fast304: stable category sibling rail. Only product results refresh; the rail keeps its horizontal position. */
body[data-route="category"] .category-page {
  min-width: 0 !important;
}

body[data-route="category"] .category-sibling-strip {
  position: sticky !important;
  top: 0 !important;
  z-index: 22 !important;
  width: calc(100% + 4px) !important;
  margin: 2px -2px 12px !important;
  padding: 8px 0 10px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9) 72%, rgba(255, 255, 255, 0)) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

body[data-route="category"] .category-sibling-track {
  display: flex !important;
  align-items: stretch !important;
  gap: 9px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 3px 4px 8px !important;
  scroll-padding-inline: 18px !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

body[data-route="category"] .category-sibling-track::-webkit-scrollbar {
  display: none !important;
}

body[data-route="category"] .category-sibling-track a {
  position: relative !important;
  flex: 0 0 84px !important;
  width: 84px !important;
  min-width: 84px !important;
  height: 68px !important;
  min-height: 68px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 8px 7px !important;
  border: 1px solid rgba(20, 22, 30, 0.06) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: rgba(18, 18, 24, 0.72) !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 20px rgba(18, 18, 24, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  transform: translateZ(0) !important;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body[data-route="category"] .category-sibling-track a.active {
  border-color: rgba(139, 105, 224, 0.42) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 251, 250, 0.74)) padding-box,
    var(--brand-gradient) border-box !important;
  color: #7758df !important;
  box-shadow:
    0 12px 28px rgba(113, 83, 217, 0.14),
    0 0 0 1px rgba(121, 239, 215, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-route="category"] .category-sibling-track a.active::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: 22px !important;
  inset-block-end: 6px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--brand-gradient) !important;
  opacity: 0.9 !important;
}

body[data-route="category"] .category-sibling-track img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  background: transparent !important;
}

body[data-route="category"] .category-sibling-track span {
  display: -webkit-box !important;
  width: 100% !important;
  max-width: 70px !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  font-size: 10.8px !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

html[data-theme="dark"] body[data-route="category"] .category-sibling-strip {
  background:
    linear-gradient(180deg, rgba(9, 10, 15, 0.98), rgba(9, 10, 15, 0.88) 72%, rgba(9, 10, 15, 0)) !important;
}

html[data-theme="dark"] body[data-route="category"] .category-sibling-track a {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(245, 246, 252, 0.72) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] body[data-route="category"] .category-sibling-track a.active {
  border-color: rgba(216, 183, 242, 0.42) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(121, 239, 215, 0.14), transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(216, 183, 242, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.1) !important;
  color: #d8b7f2 !important;
}

/* Fast309: dashboard-faithful hero, lighter home boot, and cleaner section navigation. */
body[data-route="home"] .hero-brand-mark,
body[data-route="home"] .hero-product-lineup {
  display: none !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .hero-slide-link {
    min-height: 398px !important;
    background: #f7edf3 !important;
  }

  body[data-route="home"] .hero-slide {
    opacity: .78 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translateZ(0) !important;
    filter: saturate(1.03) contrast(1.01) !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    background:
      linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 52%) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    height: 33% !important;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%) !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    inset: 138px 22px auto auto !important;
    right: 22px !important;
    left: auto !important;
    width: min(48%, 218px) !important;
    max-width: min(48%, 218px) !important;
    min-height: 0 !important;
    align-content: start !important;
    justify-items: end !important;
    gap: 6px !important;
    overflow: visible !important;
    direction: rtl !important;
    text-align: right !important;
    text-shadow: 0 2px 18px rgba(255,255,255,.46) !important;
  }

  body[data-route="home"] .hero-campaign-copy span,
  body[data-route="home"] .hero-campaign-copy em,
  body[data-route="home"] .hero-campaign-copy strong {
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    text-wrap: balance !important;
    letter-spacing: 0 !important;
    text-align: right !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    font-size: clamp(21px, 6vw, 25px) !important;
    line-height: 1.12 !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    font-size: 12.5px !important;
    line-height: 1.28 !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    font-size: clamp(50px, 15vw, 68px) !important;
    line-height: .92 !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -42px !important;
  }

  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    background: #f3f3f5 !important;
  }

  body[data-route="section"] .section-hub-tabs {
    display: grid !important;
    align-content: start !important;
    gap: 2px !important;
    padding: 7px 0 104px !important;
    background: #eeeeF1 !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 4px 10px 4px 5px !important;
    font-size: 11.2px !important;
    line-height: 1.12 !important;
    font-weight: 780 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    background: #fff !important;
    color: #111116 !important;
    border-inline-end-color: #8b68ee !important;
  }
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
  background: #151016 !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide {
  opacity: .68 !important;
}

html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
  background: linear-gradient(180deg, rgba(13,13,18,0), #0d0d12 88%) !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub {
  background: #0d0d12 !important;
}

html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
  background: #14151c !important;
}

/* Fast312: stable category switching and manual swipe-only hero shortcuts. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-rail {
    width: min(100% - 18px, 430px) !important;
    margin: -42px auto 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0 30px, #fff 30px 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    contain: layout paint !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    grid-template-columns: none !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 4px !important;
    direction: ltr !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
  }

  body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="home"] .hero-icon-page {
    width: 100% !important;
    min-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(70px, auto)) !important;
    gap: 6px 8px !important;
    padding: 0 4px !important;
    direction: rtl !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    contain: layout paint !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body[data-route="home"] .hero-icon-item:hover,
  body[data-route="home"] .hero-icon-item:active {
    transform: none !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 56px !important;
    height: 56px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    min-height: 24px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-rail {
    background: linear-gradient(180deg, rgba(13,13,18,0) 0 30px, #0d0d12 30px 100%) !important;
  }

  body[data-route="category"] .category-sibling-strip {
    margin: 2px -2px 10px !important;
    padding: 8px 0 9px !important;
    overflow: hidden !important;
    contain: layout paint !important;
  }

  body[data-route="category"] .category-sibling-track {
    gap: 8px !important;
    padding: 0 16px 3px !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  body[data-route="category"] .category-sibling-track a {
    flex: 0 0 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 8px 7px 7px !important;
    gap: 5px !important;
    border-radius: 19px !important;
    transform: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
    contain: layout paint !important;
  }

  body[data-route="category"] .category-sibling-track a.active {
    transform: none !important;
  }

  body[data-route="category"] .category-sibling-track img {
    width: 25px !important;
    height: 25px !important;
  }

  body[data-route="category"] .category-sibling-track span {
    max-width: 72px !important;
    font-size: 10.3px !important;
    line-height: 1.18 !important;
  }
}

/* Dark hero chrome polish with uninterrupted route restoration. */
html.is-route-scroll-restoring #app {
  opacity: 1 !important;
  transition: none !important;
}

@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .site-header {
    background: transparent !important;
    border-color: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header::before,
  html[data-theme="dark"] body[data-route="home"] .site-header::after {
    display: none !important;
    content: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .search {
    background:
      linear-gradient(rgba(12, 12, 18, 0.56), rgba(12, 12, 18, 0.56)) padding-box,
      linear-gradient(135deg, rgba(121, 239, 215, 0.24), rgba(180, 91, 216, 0.26), rgba(255, 255, 255, 0.16)) border-box !important;
    border-color: transparent !important;
    box-shadow:
      0 13px 30px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .icon-action,
  html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
    background: rgba(12, 12, 18, 0.58) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      0 13px 30px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots {
    z-index: 8 !important;
    gap: 6px !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    background: rgba(255, 255, 255, 0.54) !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18), 0 0 12px rgba(255, 255, 255, 0.18) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button.active {
    width: 17px !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16), 0 0 14px rgba(216, 183, 242, 0.4) !important;
  }

  html[data-theme="dark"] body[data-route="category"] .product-grid-loading {
    opacity: 0.72 !important;
  }
}

/* Fast314: mobile rendering containment for smoother long feeds. */
@media (max-width: 640px) {
  body[data-route="home"] .home-deferred > .section,
  body[data-route="home"] .home-product-rail,
  body[data-route="home"] .editorial-promos,
  body[data-route="home"] .quick-sections,
  body[data-route="home"] .brand-strip,
  body[data-route="offers"] .offers-product-section,
  body[data-route="category"] .product-grid,
  body[data-route="collection"] .product-grid,
  body[data-route="brand"] .product-grid,
  body[data-route="products"] .product-grid {
    content-visibility: auto !important;
    contain-intrinsic-size: 560px !important;
  }

  .product-card,
  .quick-tile,
  .brand-tile,
  .editorial-promo-card,
  .hero-icon-item,
  .category-sibling-track a {
    contain: layout paint style !important;
  }

  .product-card,
  .product-card *,
  .category-sibling-track a,
  .hero-icon-item {
    -webkit-tap-highlight-color: transparent !important;
  }

  body.is-scrolling .product-card,
  body.is-scrolling .quick-tile,
  body.is-scrolling .brand-tile {
    transition: none !important;
  }
}

/* Fast315: stable category switching and dock highlight sync. */
@media (max-width: 640px) {
  body.is-category-switching .category-sibling-track,
  body.is-category-switching .category-sibling-track a,
  body.is-category-switching .product-card,
  body.is-category-switching .product-card * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }

  body[data-route="category"] .category-sibling-track {
    will-change: scroll-position !important;
  }

  body[data-route="category"] .category-sibling-track a {
    backface-visibility: hidden !important;
  }
}

/* Fast316: final dark-mode cart/action cleanup and data-faithful category display. */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .favorite-mini-card,
html[data-theme="dark"] .cart-items-panel,
html[data-theme="dark"] .cart-summary-panel,
html[data-theme="dark"] .section-hub,
html[data-theme="dark"] .section-hub-content,
html[data-theme="dark"] .section-brand-directory,
html[data-theme="dark"] .section-brand-logo-tile,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .panel {
  background-color: #11121a !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] .product-card .product-body,
html[data-theme="dark"] .product-card .product-actions,
html[data-theme="dark"] .favorite-mini-info,
html[data-theme="dark"] .favorite-mini-side {
  background: #11121a !important;
}

html[data-theme="dark"] .product-card .add-button:not(:disabled),
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled),
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled),
html[data-theme="dark"] body[data-route="product"] .detail-cart:not(.cart-control) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #f7f7fb !important;
  color: #101116 !important;
  -webkit-text-fill-color: #101116 !important;
  border-color: transparent !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .product-card .add-button:not(:disabled) span:not(.cart-plus),
html[data-theme="dark"] .favorite-mini-action .add-button:not(:disabled) span:not(.cart-plus),
html[data-theme="dark"] body[data-route="search"] .search-product-list .add-button:not(:disabled) span:not(.cart-plus),
html[data-theme="dark"] body[data-route="product"] .detail-cart:not(.cart-control) span:not(.cart-plus) {
  color: #101116 !important;
  -webkit-text-fill-color: #101116 !important;
}

html[data-theme="dark"] .cart-plus,
html[data-theme="dark"] .product-card .cart-plus,
html[data-theme="dark"] .favorite-mini-action .cart-plus,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-plus,
html[data-theme="dark"] body[data-route="product"] .detail-cart .cart-plus {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #8f67f1 !important;
  -webkit-text-fill-color: #8f67f1 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
}

html[data-theme="dark"] .product-card .cart-control,
html[data-theme="dark"] .favorite-mini-action .cart-control,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control,
html[data-theme="dark"] body[data-route="product"] .detail-cart.cart-control {
  background: #f7f7fb !important;
  color: #101116 !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .product-card .cart-control.is-flashing,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-flashing,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-flashing,
html[data-theme="dark"] body[data-route="product"] .detail-cart.cart-control.is-flashing {
  background: #16a34a !important;
  color: #fff !important;
}

html[data-theme="dark"] .section-hub-tabs {
  background: #171821 !important;
}

html[data-theme="dark"] .section-hub-tabs a {
  color: rgba(247, 247, 251, 0.68) !important;
}

html[data-theme="dark"] .section-hub-tabs a.active {
  background: #11121a !important;
  color: #f7f7fb !important;
}

[data-category-results].is-soft-loading {
  position: relative !important;
  min-height: 420px !important;
  pointer-events: none !important;
}

[data-category-results].is-soft-loading::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.56), transparent),
    rgba(255, 255, 255, 0.18) !important;
  background-size: 220% 100%, 100% 100% !important;
  animation: nionSoftLoad 0.9s ease-in-out infinite !important;
  backdrop-filter: blur(1px) !important;
}

html[data-theme="dark"] [data-category-results].is-soft-loading::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    rgba(6, 7, 12, 0.2) !important;
}

@keyframes nionSoftLoad {
  from {
    background-position: 140% 0, 0 0;
  }
  to {
    background-position: -80% 0, 0 0;
  }
}

/* Fast317: hero quick-offer rail follows the active language direction. */
body[data-route="home"] .hero-icon-track {
  scroll-padding-inline: 0 !important;
}

html[data-lang="ar"] body[data-route="home"] .hero-icon-track,
html[data-lang="ku"] body[data-route="home"] .hero-icon-track {
  direction: rtl !important;
}

html[data-lang="en"] body[data-route="home"] .hero-icon-track {
  direction: ltr !important;
}

html[data-lang="ar"] body[data-route="home"] .hero-icon-page,
html[data-lang="ku"] body[data-route="home"] .hero-icon-page {
  direction: rtl !important;
}

/* Fast318: premium OTP auth modal with live phone/code validation. */
#authModal.modal {
  width: min(462px, calc(100vw - 24px)) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(121, 239, 215, 0.18), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(216, 183, 242, 0.2), transparent 32%),
    rgba(255, 255, 255, 0.98) !important;
  color: #111116 !important;
  box-shadow: 0 28px 80px rgba(17, 17, 22, 0.24) !important;
}

#authModal::backdrop {
  background: rgba(12, 12, 16, 0.54) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

#authModal .modal-head {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(17, 17, 22, 0.08) !important;
  background: transparent !important;
}

#authModal .modal-head h2 {
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#authModal #closeAuth {
  min-width: 62px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(17, 17, 22, 0.07) !important;
  color: #17171c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

#authContent {
  padding: 0 20px 20px !important;
}

#authContent .auth-card-note {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 11px !important;
  border: 1px solid rgba(182, 147, 237, 0.22) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.14), rgba(216, 183, 242, 0.14)),
    rgba(255, 255, 255, 0.72) !important;
}

#authContent .auth-card-note > span {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #111116 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(17, 17, 22, 0.18) !important;
}

#authContent .auth-card-note strong,
#authContent .auth-card-note em {
  display: block !important;
  min-width: 0 !important;
  letter-spacing: 0 !important;
}

#authContent .auth-card-note strong {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

#authContent .auth-card-note em {
  margin-top: 2px !important;
  color: rgba(17, 17, 22, 0.58) !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

#authContent .auth-tabs {
  gap: 6px !important;
  margin-bottom: 14px !important;
  padding: 4px !important;
  border: 1px solid rgba(17, 17, 22, 0.06) !important;
  border-radius: 15px !important;
  background: rgba(17, 17, 22, 0.045) !important;
}

#authContent .auth-tabs button {
  min-height: 43px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(17, 17, 22, 0.64) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
}

#authContent .auth-tabs button.active {
  background:
    linear-gradient(135deg, #101014 0%, #17151d 45%, #7e63dc 78%, #79efd7 130%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(92, 68, 172, 0.22) !important;
}

#authContent .form-grid {
  gap: 12px !important;
}

#authContent .auth-phone-summary {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(182, 147, 237, 0.2) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.16), rgba(216, 183, 242, 0.16)),
    rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 14px 30px rgba(17, 17, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

#authContent .auth-phone-summary-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: rgba(17, 17, 22, 0.92) !important;
  color: #fff !important;
}

#authContent .auth-phone-summary-icon .nion-icon {
  stroke-width: 1.9 !important;
}

#authContent .auth-phone-summary-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#authContent .auth-phone-summary-copy small {
  color: rgba(17, 17, 22, 0.5) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

#authContent .auth-phone-summary-copy strong {
  color: #111116 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
  text-align: start !important;
}

#authContent .auth-phone-summary button {
  min-width: 58px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(126, 99, 220, 0.12) !important;
  color: #6c4dd2 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#authContent .auth-phone-summary + .auth-field {
  margin-top: 2px !important;
}

#authContent .auth-field {
  gap: 7px !important;
}

#authContent .auth-field label {
  color: #18181f !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

#authContent .auth-input-shell {
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1.5px solid rgba(17, 17, 22, 0.11) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 0 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

#authContent .auth-input-shell .nion-icon {
  color: rgba(126, 99, 220, 0.78) !important;
  stroke-width: 1.9 !important;
}

#authContent .auth-input-shell input {
  min-height: 50px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: #111116 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  direction: ltr !important;
  text-align: left !important;
}

#authContent .auth-input-shell input::placeholder {
  color: rgba(17, 17, 22, 0.32) !important;
}

#authContent .auth-field-feedback {
  min-height: 18px !important;
  margin: 0 !important;
  color: rgba(17, 17, 22, 0.52) !important;
  font-size: 11.3px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  transition: color 160ms ease !important;
}

#authContent .auth-field[data-state="invalid"] .auth-input-shell {
  border-color: rgba(239, 68, 68, 0.78) !important;
  background: rgba(255, 247, 247, 0.96) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

#authContent .auth-field[data-state="invalid"] .auth-field-feedback,
#authContent .auth-field[data-state="invalid"] .auth-input-shell .nion-icon {
  color: #dc2626 !important;
}

#authContent .auth-field[data-state="valid"] .auth-input-shell {
  border-color: rgba(22, 163, 74, 0.78) !important;
  background: rgba(244, 253, 248, 0.96) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.11) !important;
}

#authContent .auth-field[data-state="valid"] .auth-field-feedback,
#authContent .auth-field[data-state="valid"] .auth-input-shell .nion-icon {
  color: #16a34a !important;
}

#authContent .primary-button {
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 32px rgba(92, 68, 172, 0.24) !important;
}

#authContent .auth-helper {
  margin: -1px 0 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(182, 147, 237, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(248, 246, 255, 0.72) !important;
  color: rgba(17, 17, 22, 0.62) !important;
  font-size: 11.8px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
}

html[data-theme="dark"] #authModal.modal {
  background:
    radial-gradient(circle at 14% 0%, rgba(121, 239, 215, 0.12), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(216, 183, 242, 0.16), transparent 34%),
    #101116 !important;
  color: #f7f7fb !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.56) !important;
}

html[data-theme="dark"] #authModal .modal-head {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #authModal .modal-head h2,
html[data-theme="dark"] #authContent .auth-card-note strong,
html[data-theme="dark"] #authContent .auth-field label {
  color: #f7f7fb !important;
}

html[data-theme="dark"] #authModal #closeAuth {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #f7f7fb !important;
}

html[data-theme="dark"] #authContent .auth-card-note,
html[data-theme="dark"] #authContent .auth-helper {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="dark"] #authContent .auth-phone-summary {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(135deg, rgba(121, 239, 215, 0.08), rgba(216, 183, 242, 0.1)),
    rgba(255, 255, 255, 0.055) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #authContent .auth-phone-summary-icon {
  background: rgba(247, 247, 251, 0.95) !important;
  color: #101116 !important;
}

html[data-theme="dark"] #authContent .auth-phone-summary-copy small {
  color: rgba(247, 247, 251, 0.58) !important;
}

html[data-theme="dark"] #authContent .auth-phone-summary-copy strong {
  color: #f7f7fb !important;
}

html[data-theme="dark"] #authContent .auth-phone-summary button {
  background: rgba(216, 183, 242, 0.16) !important;
  color: #d8b7f2 !important;
}

html[data-theme="dark"] #authContent .auth-card-note > span {
  background: #f7f7fb !important;
  color: #101116 !important;
}

html[data-theme="dark"] #authContent .auth-card-note em,
html[data-theme="dark"] #authContent .auth-helper,
html[data-theme="dark"] #authContent .auth-field-feedback {
  color: rgba(247, 247, 251, 0.62) !important;
}

html[data-theme="dark"] #authContent .auth-tabs {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] #authContent .auth-tabs button {
  color: rgba(247, 247, 251, 0.68) !important;
}

html[data-theme="dark"] #authContent .auth-tabs button.active {
  color: #fff !important;
}

html[data-theme="dark"] #authContent .auth-input-shell {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] #authContent .auth-input-shell input {
  color: #f7f7fb !important;
  -webkit-text-fill-color: #f7f7fb !important;
}

html[data-theme="dark"] #authContent .auth-input-shell input::placeholder {
  color: rgba(247, 247, 251, 0.38) !important;
}

html[data-theme="dark"] #authContent .auth-field[data-state="invalid"] .auth-input-shell {
  border-color: rgba(248, 113, 113, 0.86) !important;
  background: rgba(127, 29, 29, 0.22) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.11) !important;
}

html[data-theme="dark"] #authContent .auth-field[data-state="invalid"] .auth-field-feedback,
html[data-theme="dark"] #authContent .auth-field[data-state="invalid"] .auth-input-shell .nion-icon {
  color: #f87171 !important;
}

html[data-theme="dark"] #authContent .auth-field[data-state="valid"] .auth-input-shell {
  border-color: rgba(74, 222, 128, 0.82) !important;
  background: rgba(20, 83, 45, 0.2) !important;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.11) !important;
}

html[data-theme="dark"] #authContent .auth-field[data-state="valid"] .auth-field-feedback,
html[data-theme="dark"] #authContent .auth-field[data-state="valid"] .auth-input-shell .nion-icon {
  color: #4ade80 !important;
}

@media (max-width: 640px) {
  #authModal.modal {
    width: min(430px, calc(100vw - 22px)) !important;
    max-height: calc(100dvh - 34px) !important;
  }

  #authModal .modal-head {
    padding: 16px 16px 12px !important;
  }

  #authContent {
    padding: 0 16px 16px !important;
  }

  #authContent .auth-card-note {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }

  #authContent .auth-card-note > span {
    width: 38px !important;
    height: 38px !important;
  }

  #authContent .auth-input-shell {
    min-height: 50px !important;
    border-radius: 14px !important;
  }

  #authContent .auth-input-shell input {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* Account-first authentication: phone lookup, OTP, then explicit registration. */
#authContent {
  display: flex !important;
  min-height: 420px !important;
  flex-direction: column !important;
}

#authContent .auth-screen-intro {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 22px 0 20px !important;
}

#authContent .auth-screen-intro > span {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: #111116 !important;
  color: #fff !important;
}

#authContent .auth-screen-intro strong,
#authContent .auth-screen-intro em {
  display: block !important;
  letter-spacing: 0 !important;
}

#authContent .auth-screen-intro strong {
  color: #111116 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

#authContent .auth-screen-intro em {
  margin-top: 4px !important;
  color: rgba(17, 17, 22, 0.58) !important;
  font-size: 12.5px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

#authContent .auth-primary-form,
#authContent .auth-register-form {
  flex: 1 0 auto !important;
  align-content: start !important;
}

#authContent .auth-register-form > .form-field:not(.auth-field) input,
#authContent .auth-register-form select {
  width: 100% !important;
  min-height: 52px !important;
  border: 1.5px solid rgba(17, 17, 22, 0.11) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #111116 !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#authContent .auth-switch-prompt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding: 22px 0 3px !important;
  color: rgba(17, 17, 22, 0.58) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
}

#authContent .auth-switch-prompt button,
#authContent .auth-text-button {
  border: 0 !important;
  background: transparent !important;
  color: #6e4fd3 !important;
  padding: 4px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#authContent .auth-account-missing {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 18px 8px 8px !important;
}

#authContent .auth-account-missing-icon {
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(121, 239, 215, 0.36), rgba(216, 183, 242, 0.42)) !important;
  color: #16131b !important;
}

#authContent .auth-account-missing h3 {
  margin: 18px 0 6px !important;
  color: #111116 !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
}

#authContent .auth-account-missing p {
  max-width: 330px !important;
  margin: 0 !important;
  color: rgba(17, 17, 22, 0.58) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
}

#authContent .auth-account-missing > strong {
  margin: 12px 0 20px !important;
  color: #111116 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

#authContent .auth-account-missing .auth-text-button {
  margin-top: 8px !important;
}

#authContent .primary-button.is-loading {
  opacity: 0.72 !important;
  cursor: wait !important;
}

#authContent .primary-button.is-loading::after {
  width: 15px !important;
  height: 15px !important;
  content: "" !important;
  border: 2px solid rgba(255, 255, 255, 0.42) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: auth-spin 650ms linear infinite !important;
}

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

html[data-theme="dark"] #authContent .auth-screen-intro strong,
html[data-theme="dark"] #authContent .auth-account-missing h3,
html[data-theme="dark"] #authContent .auth-account-missing > strong {
  color: #f7f7fb !important;
}

html[data-theme="dark"] #authContent .auth-screen-intro > span {
  background: #f7f7fb !important;
  color: #111116 !important;
}

html[data-theme="dark"] #authContent .auth-screen-intro em,
html[data-theme="dark"] #authContent .auth-switch-prompt,
html[data-theme="dark"] #authContent .auth-account-missing p {
  color: rgba(247, 247, 251, 0.62) !important;
}

html[data-theme="dark"] #authContent .auth-register-form > .form-field:not(.auth-field) input,
html[data-theme="dark"] #authContent .auth-register-form select {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: #f7f7fb !important;
  -webkit-text-fill-color: #f7f7fb !important;
}

@media (max-width: 640px) {
  #authModal.modal {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #authModal .modal-head {
    min-height: 64px !important;
    padding: max(14px, env(safe-area-inset-top)) 18px 12px !important;
  }

  #authModal .modal-head h2 {
    font-size: 18px !important;
  }

  #authContent {
    min-height: calc(100dvh - 66px) !important;
    padding: 0 22px max(22px, env(safe-area-inset-bottom)) !important;
  }

  #authContent .auth-screen-intro {
    padding-top: 30px !important;
  }

  #authContent .auth-primary-form {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
  }

  #authContent .auth-primary-form > .form-field:last-child {
    margin-top: auto !important;
  }

  #authContent .auth-switch-prompt {
    padding-bottom: 10px !important;
  }
}

/* Fast319: mobile speed pass, stable hero, and no route-return flash. */
html.is-route-scroll-restoring #app {
  opacity: 1 !important;
  transition: none !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .section.hero {
    margin-top: -1px !important;
    contain: layout paint !important;
  }

  body[data-route="home"] .site-header,
  html[data-theme="dark"] body[data-route="home"] .site-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-route="home"] .search,
  body[data-route="home"] .icon-action,
  body[data-route="home"] .ghost-button.icon-action {
    transform: translateZ(0) !important;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
  }

  body[data-route="home"] .hero-main {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    contain: layout paint !important;
    background: #f8f2f7 !important;
  }

  body[data-route="home"] .hero-slides,
  body[data-route="home"] .hero-slide-link {
    height: 390px !important;
    min-height: 390px !important;
    max-height: 390px !important;
  }

  body[data-route="home"] .hero-slide-link {
    background: #f8f2f7 !important;
  }

  body[data-route="home"] .hero-slide {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: none !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .52) 52px, rgba(255, 255, 255, 0) 118px),
      radial-gradient(circle at 82% 48%, rgba(255, 255, 255, .58), rgba(255, 255, 255, 0) 39%),
      linear-gradient(90deg, rgba(255, 255, 255, 0) 0 44%, rgba(255, 255, 255, .2) 72%, rgba(255, 255, 255, .1)) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    height: 50% !important;
    z-index: 4 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .82) 70%, #fff 94%) !important;
  }

  body[data-route="home"] .hero-campaign-copy {
    inset: 144px 22px auto auto !important;
    right: 22px !important;
    left: auto !important;
    width: min(46%, 178px) !important;
    max-width: min(46%, 178px) !important;
    gap: 5px !important;
    overflow: visible !important;
    direction: rtl !important;
    text-align: right !important;
    justify-items: end !important;
    color: #111116 !important;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.92),
      0 0 18px rgba(255, 255, 255, 0.92),
      0 2px 18px rgba(255, 255, 255, 0.64) !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    font-size: clamp(20px, 5.4vw, 24px) !important;
    line-height: 1.12 !important;
    color: #111116 !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    font-size: 12px !important;
    line-height: 1.24 !important;
    color: rgba(17, 17, 22, .78) !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    font-size: clamp(48px, 14vw, 64px) !important;
    line-height: .9 !important;
    color: #111116 !important;
  }

  body[data-route="home"] .hero-dots {
    bottom: 84px !important;
    z-index: 9 !important;
  }

  body[data-route="home"] .hero-dots button {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    border: 0 !important;
    background: rgba(17, 17, 22, .32) !important;
    opacity: 1 !important;
  }

  body[data-route="home"] .hero-dots button.active {
    width: 19px !important;
    background: #111116 !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -34px !important;
    margin-bottom: 14px !important;
    contain: layout paint !important;
  }

  body[data-route="home"] .home-deferred:empty {
    min-height: 1px !important;
  }

  body[data-route="home"] .product-card {
    contain: content !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-main,
  html[data-theme="dark"] body[data-route="home"] .hero-slide-link {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide {
    opacity: .86 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
    background: linear-gradient(180deg, rgba(13, 13, 18, 0), rgba(13, 13, 18, .82) 70%, #0d0d12 94%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::before {
    background:
      linear-gradient(180deg, rgba(13, 13, 18, .92), rgba(13, 13, 18, .52) 52px, rgba(13, 13, 18, 0) 118px),
      radial-gradient(circle at 82% 48%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 37%),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 0 44%, rgba(0, 0, 0, .18) 72%, rgba(0, 0, 0, .1)) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy,
  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy span,
  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy strong {
    color: #fff !important;
    text-shadow:
      0 2px 14px rgba(0, 0, 0, 0.42),
      0 1px 1px rgba(0, 0, 0, 0.32) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy em {
    color: rgba(255, 255, 255, .88) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button {
    background: rgba(255, 255, 255, .52) !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .16) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button.active {
    background: #fff !important;
  }
}

/* UX guard: fixed mobile geometry for multilingual search and sections. */
@media (max-width: 640px) {
  .search {
    position: relative !important;
    min-width: 0 !important;
  }

  .suggestions,
  body[data-route="home"] .suggestions,
  html[dir="ltr"] .suggestions,
  html[dir="rtl"] .suggestions,
  html[dir="ltr"] body[data-route="home"] .suggestions,
  html[dir="rtl"] body[data-route="home"] .suggestions {
    position: absolute !important;
    inset-block-start: calc(100% + 8px) !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    width: min(336px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
  }

  .suggestions .suggestion-product {
    min-width: 0 !important;
  }

  .suggestions .suggestion-product div {
    min-width: 0 !important;
  }

  .suggestions .suggestion-product strong,
  .suggestions .suggestion-product small {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-route="section"] #app,
  body[data-route="section"] .page {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    overflow-x: hidden !important;
  }

  body[data-route="section"] .section-hub,
  html[dir="ltr"] body[data-route="section"] .section-hub,
  html[dir="rtl"] body[data-route="section"] .section-hub {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: 0 !important;
    min-width: 100vw !important;
    grid-template-columns: minmax(0, calc(100vw - 88px)) 88px !important;
    column-gap: 0 !important;
    direction: ltr !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    grid-column: 2 !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    box-sizing: border-box !important;
  }

  body[data-route="section"] .section-hub-content,
  html[dir="ltr"] body[data-route="section"] .section-hub-content,
  html[dir="rtl"] body[data-route="section"] .section-hub-content {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* I18N production guard: marketing images with baked text are replaced by clean art,
   then translated copy is drawn as real HTML so English/Kurdish never inherit Arabic. */
body[data-route="offers"] .offers-hero-card,
body[data-route="offers"] .offers-banner-card {
  position: relative !important;
  overflow: hidden !important;
}

body[data-route="offers"] .offers-card-copy {
  position: absolute !important;
  z-index: 2 !important;
  inset-block-start: 12px !important;
  inset-inline: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  max-width: 64% !important;
  color: #111116 !important;
  text-align: start !important;
  pointer-events: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
}

html[dir="rtl"] body[data-route="offers"] .offers-card-copy {
  margin-inline-start: auto !important;
  text-align: right !important;
  align-items: flex-end !important;
}

html[dir="ltr"] body[data-route="offers"] .offers-card-copy {
  margin-inline-end: auto !important;
  text-align: left !important;
  align-items: flex-start !important;
}

body[data-route="offers"] .offers-card-copy strong {
  font-size: clamp(17px, 5vw, 30px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body[data-route="offers"] .offers-card-copy em {
  font-style: normal !important;
  font-size: clamp(10px, 3vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  color: rgba(18, 18, 24, .72) !important;
}

body[data-route="offers"] .offers-card-copy b {
  display: block !important;
  margin-top: 1px !important;
  font-size: clamp(30px, 12vw, 72px) !important;
  line-height: .92 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body[data-route="offers"] .offers-banner-card.is-square .offers-card-copy {
  max-width: 76% !important;
  inset-block-start: 10px !important;
  inset-inline: 10px !important;
}

body[data-route="offers"] .offers-banner-card.is-square .offers-card-copy strong {
  font-size: clamp(14px, 4.4vw, 22px) !important;
}

body[data-route="offers"] .offers-banner-card.is-square .offers-card-copy b {
  font-size: clamp(24px, 9vw, 46px) !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-card-copy {
  color: #f7f7fb !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
}

html[data-theme="dark"] body[data-route="offers"] .offers-card-copy em {
  color: rgba(255, 255, 255, .74) !important;
}

/* Keep the category directory shape stable across Arabic, English, and Kurdish. */
body[data-route="section"] .section-hub,
html[dir="ltr"] body[data-route="section"] .section-hub,
html[dir="rtl"] body[data-route="section"] .section-hub {
  direction: ltr !important;
}

body[data-route="section"] .section-hub-tabs,
html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
  grid-column: 2 !important;
  direction: rtl !important;
  text-align: right !important;
}

body[data-route="section"] .section-hub-content,
html[dir="ltr"] body[data-route="section"] .section-hub-content,
html[dir="rtl"] body[data-route="section"] .section-hub-content {
  grid-column: 1 !important;
}

body[data-route="section"] .section-hub-tabs a,
html[dir="ltr"] body[data-route="section"] .section-hub-tabs a,
html[dir="rtl"] body[data-route="section"] .section-hub-tabs a {
  text-align: right !important;
  justify-content: flex-start !important;
}

body[data-route="section"] .section-hub-content {
  direction: rtl !important;
}

html[dir="ltr"] body[data-route="section"] .section-brand-logo-tile,
html[dir="ltr"] body[data-route="section"] .brand-directory-tile,
html[dir="ltr"] body[data-route="section"] .section-category-grid .quick-tile {
  direction: ltr !important;
}

/* Rebuild stabilization pass: one authoritative layer for launch-critical mobile UX. */
html.is-route-scroll-restoring #app {
  opacity: 1 !important;
  transition: none !important;
}

html:not(.is-route-scroll-restoring) #app {
  opacity: 1 !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-track {
    direction: rtl;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: calc(25vw - 12px) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 12px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    padding: 0 14px 6px !important;
    -webkit-overflow-scrolling: touch;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr;
  }

  body[data-route="home"] .hero-icon-page {
    display: contents !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 0 !important;
    width: 100% !important;
    scroll-snap-align: start;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 58px !important;
    height: 58px !important;
    margin-inline: auto !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    width: 100% !important;
    max-width: 76px !important;
    min-height: 32px !important;
    margin-inline: auto !important;
    font-size: 11.4px !important;
    line-height: 1.24 !important;
  }

  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    background: #f6f6f8 !important;
  }

  body[data-route="section"] .section-hub-tabs {
    background: #f1f1f4 !important;
    border-inline-start: 1px solid rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 44px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.22 !important;
    background: transparent !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    background: #fff !important;
    border-inline-start-color: #9a6df3 !important;
    color: #121216 !important;
  }

  body[data-route="category"] .category-sibling-track {
    scroll-behavior: auto !important;
    overscroll-behavior-inline: contain;
  }

  body.is-category-switching [data-category-results] {
    opacity: .74;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  body.is-category-switching [data-category-results]::after {
    animation-duration: 680ms !important;
  }

  html[data-theme="dark"] body,
  html[data-theme="dark"] #app,
  html[data-theme="dark"] .page {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header + #app,
  html[data-theme="dark"] body[data-route="home"] .page {
    background: #0d0d12 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button {
    background: rgba(255, 255, 255, .58) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button.active {
    background: #ffffff !important;
  }

  html[data-theme="dark"] .add-button .cart-plus,
  html[data-theme="dark"] .detail-sticky-cart .cart-plus,
  html[data-theme="dark"] .cart-control .cart-plus {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #79efd7 !important;
    -webkit-text-fill-color: #79efd7 !important;
    box-shadow: none !important;
  }
}

/* Launch rescue layer: overrides old fast-version residue without changing API contracts. */
html.is-route-scroll-restoring #app,
html:not(.is-route-scroll-restoring) #app {
  opacity: 1 !important;
  transition: none !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .site-header,
  html[data-theme="dark"] body[data-route="home"] .site-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  body[data-route="home"] .site-header::before,
  body[data-route="home"] .site-header::after,
  html[data-theme="dark"] body[data-route="home"] .site-header::before,
  html[data-theme="dark"] body[data-route="home"] .site-header::after {
    display: none !important;
    content: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .search,
  html[data-theme="dark"] body[data-route="home"] .icon-action,
  html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
    background: rgba(15, 16, 22, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  }

  body[data-route="home"] .hero-icon-track {
    scroll-behavior: auto !important;
    animation: none !important;
  }

  body[data-route="home"] .hero-icon-item,
  body[data-route="home"] .hero-icon-item * {
    animation: none !important;
  }

  body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  body[data-route="section"] .section-hub-tabs {
    gap: 1px !important;
    padding-block: 4px !important;
    overflow-y: auto !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 38px !important;
    padding: 5px 8px !important;
    font-size: 11.4px !important;
    line-height: 1.18 !important;
    font-weight: 760 !important;
  }

  body[data-route="section"] .section-hub-tabs a.active {
    font-weight: 880 !important;
  }

  body[data-route="category"] .category-sibling-strip {
    position: sticky !important;
    top: 78px !important;
    z-index: 16 !important;
    background: color-mix(in srgb, var(--page, #fff) 88%, transparent) !important;
    backdrop-filter: blur(12px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.04) !important;
  }

  body[data-route="category"] .category-sibling-track {
    scroll-behavior: auto !important;
    scrollbar-width: none !important;
  }

  body[data-route="category"] .category-sibling-track::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="category"] .category-sibling-track a {
    min-width: 82px !important;
    max-width: 92px !important;
    min-height: 82px !important;
    border-radius: 18px !important;
  }

  body[data-route="category"] .category-sibling-track img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }

  body[data-route="category"] .category-sibling-track span {
    font-size: 10.8px !important;
    line-height: 1.18 !important;
  }

  html[data-theme="dark"] body[data-route="category"] .category-sibling-strip {
    background: rgba(13, 13, 18, 0.88) !important;
  }

  html[data-theme="dark"] body[data-route="category"] .category-sibling-track a {
    background: #151620 !important;
    color: rgba(247, 247, 251, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  html[data-theme="dark"] body[data-route="category"] .category-sibling-track a.active {
    color: #ffffff !important;
    border-color: rgba(182, 147, 237, 0.65) !important;
    background:
      linear-gradient(#151620, #151620) padding-box,
      linear-gradient(135deg, rgba(121, 239, 215, 0.8), rgba(182, 147, 237, 0.92), rgba(232, 157, 238, 0.82)) border-box !important;
  }

  html[data-theme="dark"] .add-button .cart-plus,
  html[data-theme="dark"] .detail-sticky-cart .cart-plus,
  html[data-theme="dark"] .detail-cart .cart-plus,
  html[data-theme="dark"] .cart-control .cart-plus,
  html[data-theme="dark"] .product-card .cart-plus,
  html[data-theme="dark"] .favorite-mini-action .cart-plus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #79efd7 !important;
    -webkit-text-fill-color: #79efd7 !important;
  }

  html[data-theme="dark"] .product-card,
  html[data-theme="dark"] .product-card .product-body,
  html[data-theme="dark"] .product-card .product-actions,
  html[data-theme="dark"] .favorite-mini-card,
  html[data-theme="dark"] .cart-item,
  html[data-theme="dark"] .checkout-card,
  html[data-theme="dark"] .panel {
    background: #11121a !important;
    color: #f7f7fb !important;
  }

  html[data-theme="dark"] .product-card .product-name,
  html[data-theme="dark"] .favorite-mini-card .product-name,
  html[data-theme="dark"] .cart-item-title,
  html[data-theme="dark"] .checkout-card h2,
  html[data-theme="dark"] .panel h1,
  html[data-theme="dark"] .panel h2,
  html[data-theme="dark"] .panel strong {
    color: #f7f7fb !important;
  }

  html[data-theme="dark"] .product-card .brand-name,
  html[data-theme="dark"] .product-card .old-price,
  html[data-theme="dark"] .product-card .stock,
  html[data-theme="dark"] .product-card .rating-row,
  html[data-theme="dark"] .favorite-mini-card .brand-name,
  html[data-theme="dark"] .cart-item-meta,
  html[data-theme="dark"] .checkout-card p,
  html[data-theme="dark"] .panel p {
    color: rgba(247, 247, 251, 0.66) !important;
  }
}

/* Launch audit hardening: performance, dark mode, and mobile rhythm. */
@media (max-width: 640px) {
  body[data-route="home"] .site-header,
  body[data-route="home"] .top-strip,
  html[data-theme="dark"] body[data-route="home"] .site-header,
  html[data-theme="dark"] body[data-route="home"] .top-strip {
    background-image: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header {
    background: linear-gradient(180deg, rgba(12, 12, 18, .66), rgba(12, 12, 18, .12)) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero::after,
  html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    background: linear-gradient(180deg, transparent 50%, #0d0d12 100%) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button {
    background: rgba(255, 255, 255, .46) !important;
    border-color: rgba(255, 255, 255, .2) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button.active {
    background: #fff !important;
  }

  body[data-route="home"] .hero-icon-rail {
    margin-top: -18px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-inline: 18px !important;
    scroll-padding-inline: 18px !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-icon-track {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="home"] .hero-icon-page {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(66px, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    flex: 0 0 calc(100vw - 36px) !important;
    max-width: 390px !important;
    gap: 10px 8px !important;
    scroll-snap-align: start !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 0 !important;
    min-height: 82px !important;
    gap: 5px !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .82) !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    min-height: 26px !important;
    font-size: 10.8px !important;
    line-height: 1.15 !important;
    color: var(--text, #15151b) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-item strong {
    color: #f7f7fb !important;
  }

  body[data-route="section"] .section-hub-tabs {
    background: #f3f4f7 !important;
    border-inline-start: 1px solid rgba(21, 21, 27, .06) !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 34px !important;
    padding: 4px 7px !important;
    font-size: 10.8px !important;
    margin: 0 !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #11121a !important;
    border-color: rgba(255, 255, 255, .07) !important;
  }

  body[data-route="category"] .category-sibling-track {
    contain: layout paint !important;
  }

  body.is-category-switching [data-category-results] {
    opacity: .98 !important;
    transform: none !important;
  }

  body.is-category-switching [data-category-results]::after {
    display: none !important;
  }
}

.product-section,
.offers-banner-mosaic,
.section-brand-directory,
.section-category-grid,
.product-review-list,
.home-product-rail {
  content-visibility: auto;
  contain-intrinsic-size: 1px 620px;
}

.card-rating,
.rating-pill,
.detail-review-summary,
.product-reviews-total,
.product-review-rank {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.review-stars {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-wrap: nowrap !important;
}

.card-rating svg,
.rating-pill svg {
  width: 10px !important;
  height: 10px !important;
}

.card-rating b,
.card-rating em {
  line-height: 1 !important;
}

html[data-theme="dark"] .add-button,
html[data-theme="dark"] .detail-sticky-cart {
  background: #f7f7fb !important;
  color: #101016 !important;
}

html[data-theme="dark"] .add-button span,
html[data-theme="dark"] .detail-sticky-cart span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .hero-main::after,
  html[data-theme="dark"] body[data-route="home"] .hero-main::after {
    display: none !important;
    content: none !important;
  }

  body[data-route="home"] .hero-slide-link::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, .72) 82%, #fff 100%) !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .72) 82%, #fff 100%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::before,
  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    background: linear-gradient(180deg, rgba(13, 13, 18, 0) 52%, rgba(13, 13, 18, .55) 78%, #0d0d12 100%) !important;
    opacity: 1 !important;
  }
}

/* Final production cleanup: dark home header must float over the hero without a solid strip. */
@media (max-width: 640px) {
  html[data-theme="dark"] body[data-route="home"] .site-header,
  html[data-theme="dark"] body[data-route="home"] .header-main {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .site-header::before,
  html[data-theme="dark"] body[data-route="home"] .site-header::after,
  html[data-theme="dark"] body[data-route="home"] .header-main::before,
  html[data-theme="dark"] body[data-route="home"] .header-main::after {
    display: none !important;
    content: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .search,
  html[data-theme="dark"] body[data-route="home"] .icon-action,
  html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
    background: rgba(14, 14, 22, .58) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button {
    background: rgba(255, 255, 255, .58) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-dots button.active {
    background: #fff !important;
  }
}

/* Last override: product top controls must stay fixed while the detail page scrolls. */
@media (max-width: 640px) {
  body[data-route="product"] .detail-floating-actions {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(560px, calc(100vw - 24px)) !important;
    transform: translateX(-50%) !important;
    z-index: 900 !important;
    display: grid !important;
    grid-template-columns: 44px 44px !important;
    justify-content: space-between !important;
    align-items: center !important;
    direction: ltr !important;
    pointer-events: none !important;
  }

  body[data-route="product"] .detail-floating-button {
    width: 42px !important;
    height: 42px !important;
    pointer-events: auto !important;
    border-radius: 999px !important;
  }

  .product-card .product-media,
  .rail .product-card .product-media,
  body[data-route="home"] .product-card .product-media,
  body[data-route="offers"] .product-card .product-media,
  body[data-route="section"] .product-card .product-media,
  body[data-route="brand"] .product-card .product-media,
  body[data-route="collection"] .product-card .product-media,
  body[data-route="search"] .product-card .product-media {
    overflow: hidden !important;
  }

  .product-card .product-media img,
  .rail .product-card .product-media img,
  body[data-route="home"] .product-card .product-media img,
  body[data-route="offers"] .product-card .product-media img,
  body[data-route="section"] .product-card .product-media img,
  body[data-route="brand"] .product-card .product-media img,
  body[data-route="collection"] .product-card .product-media img,
  body[data-route="search"] .product-card .product-media img {
    box-sizing: border-box !important;
    display: block !important;
    width: calc(100% - 18px) !important;
    height: calc(100% - 18px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    padding: 0 !important;
  }
}

/* Final hero copy direction and contrast: keep one fixed copy zone, only text alignment changes by language. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-campaign-copy {
    top: clamp(128px, 31vw, 148px) !important;
    bottom: auto !important;
    right: 22px !important;
    left: auto !important;
    width: min(48%, 190px) !important;
    max-width: min(48%, 190px) !important;
    display: grid !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: #101016 !important;
    text-decoration: none !important;
    text-shadow: none !important;
  }

  body[data-route="home"] .hero-campaign-copy::before,
  body[data-route="home"] .hero-campaign-copy::after,
  body[data-route="home"] .hero-campaign-copy span::before,
  body[data-route="home"] .hero-campaign-copy span::after,
  body[data-route="home"] .hero-campaign-copy em::before,
  body[data-route="home"] .hero-campaign-copy em::after,
  body[data-route="home"] .hero-campaign-copy strong::before,
  body[data-route="home"] .hero-campaign-copy strong::after {
    display: none !important;
    content: none !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-campaign-copy,
  body[data-route="home"] .hero-campaign-copy[dir="rtl"] {
    right: 22px !important;
    left: auto !important;
    direction: rtl !important;
    text-align: right !important;
    justify-items: end !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-campaign-copy,
  body[data-route="home"] .hero-campaign-copy[dir="ltr"] {
    right: 22px !important;
    left: auto !important;
    direction: ltr !important;
    text-align: left !important;
    justify-items: start !important;
  }

  body[data-route="home"] .hero-campaign-copy span,
  body[data-route="home"] .hero-campaign-copy em,
  body[data-route="home"] .hero-campaign-copy strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    text-align: inherit !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  body[data-route="home"] .hero-campaign-copy span {
    font-size: clamp(21px, 5.8vw, 28px) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
  }

  body[data-route="home"] .hero-campaign-copy em {
    font-size: clamp(12px, 3.45vw, 14px) !important;
    line-height: 1.22 !important;
    font-weight: 700 !important;
    opacity: .9 !important;
    font-style: normal !important;
  }

  body[data-route="home"] .hero-campaign-copy strong {
    font-family: Inter, "SF Pro Display", var(--font-ar), Arial, sans-serif !important;
    font-size: clamp(58px, 16vw, 78px) !important;
    line-height: .84 !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    font-variation-settings: "wght" 1000 !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-campaign-copy {
    color: #fff !important;
    text-shadow:
      0 1px 1px rgba(0, 0, 0, .45),
      0 8px 26px rgba(0, 0, 0, .72),
      0 0 18px rgba(0, 0, 0, .42) !important;
  }
}

/* Final pass: category rail is slightly wider and search suggestions behave like a real mobile store. */
@media (max-width: 640px) {
  body[data-route="section"] #app,
  body[data-route="section"] .page {
    overflow: clip visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  body[data-route="section"] .section-hub,
  html[dir="ltr"] body[data-route="section"] .section-hub,
  html[dir="rtl"] body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, calc(100vw - 106px)) 106px !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    background: #f1f1f4 !important;
  }

  body[data-route="section"] .section-hub-tabs a,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs a,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs a {
    min-height: 48px !important;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.22 !important;
  }

  .suggestions,
  body[data-route="home"] .suggestions,
  html[dir="ltr"] .suggestions,
  html[dir="rtl"] .suggestions,
  html[dir="ltr"] body[data-route="home"] .suggestions,
  html[dir="rtl"] body[data-route="home"] .suggestions {
    width: min(356px, calc(100vw - 22px)) !important;
    max-height: min(68vh, 540px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(150, 120, 238, .16) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 22px 54px rgba(18, 18, 24, .16) !important;
  }

  .suggestions .suggestion-product {
    min-height: 76px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 18px !important;
    background: rgba(248, 248, 252, .92) !important;
  }

  .suggestion-product-image {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    background: #fff !important;
  }

  .suggestion-product-image img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  .suggestion-product-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
  }

  .suggestion-product-copy small {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    color: rgba(18, 18, 24, .52) !important;
  }

  .suggestion-product-copy strong {
    font-size: 12.8px !important;
    line-height: 1.28 !important;
    color: #121216 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
  }

  .suggestion-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .suggestion-price-row b {
    font-size: 12.5px !important;
    color: #c92762 !important;
  }

  .suggestion-price-row i {
    font-size: 10px !important;
    color: rgba(18, 18, 24, .42) !important;
    text-decoration: line-through !important;
  }

  .suggestion-all-results {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: 6px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #111116, #111116 58%, #9c6df2) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
  }

  html[data-theme="dark"] .suggestions,
  html[data-theme="dark"] body[data-route="home"] .suggestions {
    background: rgba(17, 17, 24, .96) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .42) !important;
  }

  html[data-theme="dark"] .suggestions .suggestion-product {
    background: rgba(255, 255, 255, .075) !important;
  }

  html[data-theme="dark"] .suggestion-product-image {
    background: rgba(255, 255, 255, .92) !important;
  }

  html[data-theme="dark"] .suggestion-product-copy strong {
    color: #f8f8fb !important;
  }

  html[data-theme="dark"] .suggestion-product-copy small,
  html[data-theme="dark"] .suggestion-price-row i {
    color: rgba(255, 255, 255, .62) !important;
  }
}

/* Rescue finish: stable Nice One style shortcut strip, wider section rail, and no scroll flash. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-rail {
    margin-top: -10px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    scroll-behavior: auto !important;
    padding: 0 16px 8px !important;
    animation: none !important;
    contain: layout paint !important;
  }

  body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
    display: none !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-icon-track {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-page,
  body[data-route="home"] .hero-icon-strip-page {
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 78px !important;
    grid-template-columns: none !important;
    width: max-content !important;
    max-width: none !important;
    flex: none !important;
    gap: 10px 8px !important;
    scroll-snap-align: start !important;
  }

  body[data-route="home"] .hero-icon-item {
    width: 78px !important;
    min-width: 78px !important;
    min-height: 84px !important;
    gap: 5px !important;
    transform: none !important;
    animation: none !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 60px !important;
    height: 60px !important;
    border-radius: 19px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 8px 18px rgba(17, 18, 26, .06) !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    font-size: 11.2px !important;
    line-height: 1.16 !important;
    min-height: 28px !important;
    max-width: 76px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  body[data-route="home"] .hero-icon-item:hover,
  body[data-route="home"] .hero-icon-item:active {
    transform: none !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-icon-item span {
    background: rgba(255, 255, 255, .92) !important;
  }

  body[data-route="section"] .section-hub,
  html[dir="ltr"] body[data-route="section"] .section-hub,
  html[dir="rtl"] body[data-route="section"] .section-hub {
    grid-template-columns: minmax(0, calc(100vw - 118px)) 118px !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    background: #eef0f4 !important;
  }

  body[data-route="section"] .section-hub-tabs a,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs a,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs a {
    min-height: 52px !important;
    padding: 8px 13px !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #171820 !important;
  }

  html.is-route-scroll-restoring #app,
  html:not(.is-route-scroll-restoring) #app {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Production clean pass: keep mobile browsing fast even with thousands of products. */
@media (max-width: 640px) {
  .product-card,
  .home-product-rail,
  .section-category-grid,
  .section-brand-directory,
  .offers-banner-mosaic,
  .hero-icon-item,
  .category-sibling-track a,
  .section-hub-tabs a,
  .bottom-nav,
  .bottom-nav .nav-indicator {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .product-card:hover,
  .product-card:active,
  .hero-icon-item:hover,
  .hero-icon-item:active,
  .section-hub-tabs a:hover,
  .section-hub-tabs a:active {
    transform: none !important;
  }

  .home-product-rail,
  .section-category-grid,
  .offers-banner-mosaic,
  .product-section,
  .category-results,
  [data-category-results] {
    content-visibility: auto;
    contain-intrinsic-size: 1px 620px;
  }

  html.is-route-scroll-restoring #app,
  html:not(.is-route-scroll-restoring) #app {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Product final override: fixed back/favorite buttons and 3-up similar products. */
@media (max-width: 640px) {
  body[data-route="product"] .detail-floating-actions {
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    z-index: 9999 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    transform: none !important;
    isolation: isolate !important;
  }

  body[data-route="product"] .detail-floating-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #121217 !important;
    box-shadow: 0 12px 28px rgba(17, 18, 26, 0.14) !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
    pointer-events: auto !important;
  }

  html[data-theme="dark"] body[data-route="product"] .detail-floating-button {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(22, 22, 30, 0.78) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section {
    width: calc(100% - 16px) !important;
    max-width: 430px !important;
    margin: 16px auto 0 !important;
    overflow: visible !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-card {
    min-width: 0 !important;
    min-height: 226px !important;
    grid-template-rows: 88px minmax(104px, 1fr) 34px !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(18, 18, 24, 0.055) !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-media {
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 7px 6px 4px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-body {
    padding: 6px 6px 4px !important;
    gap: 3px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .brand-name {
    font-size: 8.8px !important;
    line-height: 1.15 !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-name {
    font-size: 10.2px !important;
    line-height: 1.25 !important;
    min-height: 25px !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .card-rating {
    min-height: 17px !important;
    padding: 1px 4px !important;
    font-size: 8px !important;
    gap: 2px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .card-rating .nion-icon {
    width: 10px !important;
    height: 10px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .price-row {
    gap: 3px !important;
    min-height: 18px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .price {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .old-price,
  body[data-route="product"] [data-similar-slot] > .similar-product-section .stock {
    font-size: 8px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .product-actions {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 5px 5px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .add-button {
    min-height: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
    font-size: 9.5px !important;
    padding-inline: 5px !important;
  }

  body[data-route="product"] [data-similar-slot] > .similar-product-section .fav-button {
    width: 26px !important;
    height: 26px !important;
    inset-block-start: 5px !important;
    inset-inline-start: 5px !important;
  }
}

/* Smooth taxonomy release final override: this must stay at EOF. */
html.is-route-scroll-restoring #app {
  opacity: 1 !important;
}

@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-rail {
    width: min(100% - 18px, 430px) !important;
    margin: -30px auto 12px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="home"] .hero-icon-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    grid-template-columns: none !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
    animation: none !important;
  }

  body[data-route="home"] .hero-icon-track::-webkit-scrollbar {
    display: none !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-icon-track {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-page,
  body[data-route="home"] .hero-icon-strip-page {
    width: 100% !important;
    min-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(68px, auto)) !important;
    gap: 7px 8px !important;
    padding: 0 4px !important;
    scroll-snap-align: start !important;
    contain: layout paint !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-icon-page,
  html[dir="rtl"] body[data-route="home"] .hero-icon-strip-page {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-page,
  html[dir="ltr"] body[data-route="home"] .hero-icon-strip-page {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-item {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 78px !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    touch-action: manipulation !important;
  }

  body[data-route="home"] .hero-icon-item span {
    width: 56px !important;
    height: 56px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-route="home"] .hero-icon-item img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    padding: 0 !important;
  }

  body[data-route="home"] .hero-icon-item strong {
    min-height: 24px !important;
    max-width: 76px !important;
    font-size: 10.5px !important;
    line-height: 1.18 !important;
    font-weight: 760 !important;
  }

  body[data-route="section"] .section-hub-tabs {
    inline-size: 128px !important;
    min-width: 128px !important;
    gap: 2px !important;
    padding-block: 8px !important;
    background: #f1f2f5 !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    padding-block: 3px !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #15161d !important;
  }
}

/* Final cascade lock for catalog text metrics. */
.product-card .rating-row,
.favorite-mini-card .rating-row {
  min-height: 23px !important;
  padding-block: 2px !important;
  align-items: center !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

.product-card .rating-row > span,
.favorite-mini-card .rating-row > span,
.product-card .card-rating,
.favorite-mini-card .card-rating,
.product-card .card-rating b,
.product-card .card-rating em,
.favorite-mini-card .card-rating b,
.favorite-mini-card .card-rating em {
  height: auto !important;
  min-height: 18px !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.3 !important;
}

.product-card .price-row,
.favorite-mini-card .price-row,
.cart-item .price-row,
.detail-price-card .price-row {
  min-height: 30px !important;
  padding-block: 4px !important;
  align-items: center !important;
  overflow: visible !important;
  line-height: 1.3 !important;
}

.product-card .price,
.favorite-mini-card .price,
.cart-item .price,
.detail-price-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.cart-item .old-price,
.detail-price-card .old-price,
.product-card .stock,
.favorite-mini-card .stock,
.detail-stock,
.cart-item-title,
.cart-item-variant {
  height: auto !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

.product-card .stock,
.favorite-mini-card .stock,
.detail-stock {
  min-height: 23px !important;
  padding-block: 3px !important;
}

.cart-stepper strong,
.cart-item-stepper > span,
.cart-count-button,
.cart-stepper-plus,
.cart-stepper-minus,
.remove-cart-button,
.notification-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

/* Product-card quantity control: authoritative last rule. */
.product-card .cart-control.is-added:not(.is-flash-only),
.favorite-mini-action .cart-control.is-added:not(.is-flash-only),
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 80px !important;
  align-items: center !important;
  gap: 7px !important;
  direction: inherit !important;
  box-sizing: border-box !important;
  padding: 4px 6px 4px 10px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 22px) !important;
  place-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #17171d !important;
  background: rgba(255, 255, 255, 0.94) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
  color: #fff !important;
  background: var(--nion-solid-badge) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  color: #17171d !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  color: #111116 !important;
  background: #fff !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #f1f1f5 !important;
}

@media (max-width: 374px) {
  .product-card .cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 5px !important;
    padding-inline: 7px 5px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
    font-size: 9.5px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* Catalog quantity control - final cascade authority. */
.product-card .cart-control.is-added:not(.is-flash-only),
.favorite-mini-action .cart-control.is-added:not(.is-flash-only),
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 80px !important;
  align-items: center !important;
  gap: 7px !important;
  direction: inherit !important;
  box-sizing: border-box !important;
  padding: 4px 6px 4px 10px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 22px) !important;
  place-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-style: normal !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #17171d !important;
  background: rgba(255, 255, 255, 0.94) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
  color: #fff !important;
  background: var(--nion-solid-badge) !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  color: #17171d !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  color: #111116 !important;
  background: #fff !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #f1f1f5 !important;
}

@media (max-width: 374px) {
  .product-card .cart-control.is-added:not(.is-flash-only),
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 5px !important;
    padding-inline: 7px 5px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
    font-size: 9.5px !important;
  }

  .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
  body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* Quick-offer page movement follows the storefront language direction. */
html[dir="rtl"] body[data-route="home"] .hero-icon-page,
html[dir="rtl"] body[data-route="home"] .hero-icon-strip-page {
  direction: rtl !important;
}

html[dir="ltr"] body[data-route="home"] .hero-icon-page,
html[dir="ltr"] body[data-route="home"] .hero-icon-strip-page {
  direction: ltr !important;
}

html[dir="rtl"] body[data-route="home"] .hero-icon-track {
  direction: rtl !important;
}

html[dir="ltr"] body[data-route="home"] .hero-icon-track {
  direction: ltr !important;
}

@media (max-width: 640px) {
  html[dir="rtl"] body[data-route="home"] .hero-icon-track {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-track {
    direction: ltr !important;
  }

  body[data-route="home"] .hero-icon-track {
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: normal !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-icon-page,
  html[dir="rtl"] body[data-route="home"] .hero-icon-strip-page {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-icon-page,
  html[dir="ltr"] body[data-route="home"] .hero-icon-strip-page {
    direction: ltr !important;
  }
}

/* Product review copy follows the storefront language direction. */
html[dir="rtl"] body[data-route="product"] .product-review-form,
html[dir="rtl"] body[data-route="product"] .product-review-form-head,
html[dir="rtl"] body[data-route="product"] .product-review-form-head > div:first-child {
  direction: rtl !important;
}

html[dir="rtl"] body[data-route="product"] .product-review-form-head > div:first-child {
  width: 100% !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  text-align: right !important;
}

html[dir="rtl"] body[data-route="product"] .product-review-form-head > div:first-child > strong,
html[dir="rtl"] body[data-route="product"] .product-review-form-head > div:first-child > em {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

html[dir="ltr"] body[data-route="product"] .product-review-form,
html[dir="ltr"] body[data-route="product"] .product-review-form-head,
html[dir="ltr"] body[data-route="product"] .product-review-form-head > div:first-child {
  direction: ltr !important;
}

html[dir="ltr"] body[data-route="product"] .product-review-form-head > div:first-child {
  width: 100% !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  text-align: left !important;
}

html[dir="ltr"] body[data-route="product"] .product-review-form-head > div:first-child > strong,
html[dir="ltr"] body[data-route="product"] .product-review-form-head > div:first-child > em {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  direction: ltr !important;
}

/* Product detail rating: Tajawal glyphs need real vertical room on mobile. */
body[data-route="product"] .detail-review-summary,
body[data-route="product"] .detail-review-summary.is-empty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  height: auto !important;
  margin-block: 1px 3px !important;
  padding: 4px 8px 5px !important;
  gap: 4px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

body[data-route="product"] .detail-review-summary .review-stars {
  min-height: 16px !important;
  height: auto !important;
  padding-block: 1px !important;
  overflow: visible !important;
  line-height: 1 !important;
}

body[data-route="product"] .detail-review-summary strong,
body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  height: auto !important;
  padding: 2px 0 3px !important;
  overflow: visible !important;
  font-family: "Tajawal", sans-serif !important;
  line-height: 1.35 !important;
  text-overflow: clip !important;
}

body[data-route="product"] .detail-review-summary strong {
  min-width: 24px !important;
  font-size: 10.5px !important;
}

body[data-route="product"] .detail-review-summary > span:not(.review-stars):not(.review-star):not(.nion-icon) {
  max-width: none !important;
  font-size: 9.5px !important;
  white-space: nowrap !important;
}

/* Typography safety: Tajawal needs extra ascent room on Arabic glyphs and digits. */
.product-card .product-body,
.favorite-mini-card .product-body {
  height: auto !important;
  min-height: 142px !important;
  overflow: visible !important;
}

.product-card .product-name,
.favorite-mini-card .product-name {
  height: auto !important;
  min-height: 42px !important;
  padding-block: 2px !important;
  overflow: hidden !important;
  line-height: 1.38 !important;
}

.product-card .brand-name,
.favorite-mini-card .brand-name,
.detail-brand,
.detail-product-name,
.detail-rating,
.detail-rating strong,
.detail-rating span,
.detail-rating em,
.detail-price-card .discount-badge,
.cart-item-title,
.cart-item-variant {
  height: auto !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

.product-card .product-actions,
.favorite-mini-card .product-actions {
  height: auto !important;
  min-height: 38px !important;
  overflow: visible !important;
}

.product-card .product-actions button,
.favorite-mini-card .product-actions button,
.product-card .add-to-cart,
.favorite-mini-card .add-to-cart {
  min-height: 38px !important;
  padding-block: 6px !important;
  line-height: 1.35 !important;
}

.product-card .discount-badge,
.favorite-mini-card .discount-badge,
.hero-copy,
.hero-copy strong,
.hero-copy span,
.hero-copy small,
.section-title,
.section-head h2,
.section-head a,
.quick-tile span {
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

/* Center numeric badges without trimming the top of 0, 2, 5, 7, or 9. */
.notification-count,
.cart-count-button,
.cart-stepper strong,
.cart-item-stepper > span {
  min-height: 18px !important;
  min-width: 18px !important;
  padding: 2px 4px !important;
  box-sizing: border-box !important;
  line-height: 1.35 !important;
}

/* Final text-metrics guard. Keep Arabic ascenders, prices, counts and units
   inside their boxes after all route-specific responsive overrides. */
.product-card .brand-name,
.favorite-mini-card .brand-name,
.product-card .product-name,
.favorite-mini-card .product-name,
.product-card .rating-row,
.favorite-mini-card .rating-row,
.product-card .rating-row > span,
.favorite-mini-card .rating-row > span,
.product-card .card-rating,
.favorite-mini-card .card-rating,
.product-card .card-rating b,
.product-card .card-rating em,
.favorite-mini-card .card-rating b,
.favorite-mini-card .card-rating em,
.product-card .price-row,
.favorite-mini-card .price-row,
.cart-item .price-row,
.detail-price-card .price-row,
.product-card .price,
.favorite-mini-card .price,
.cart-item .price,
.detail-price-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.cart-item .old-price,
.detail-price-card .old-price,
.product-card .stock,
.favorite-mini-card .stock,
.detail-stock,
.cart-item-title,
.cart-item-variant,
.cart-stepper strong,
.cart-item-stepper > span,
.cart-count-button,
.cart-stepper-plus,
.cart-stepper-minus,
.remove-cart-button,
.notification-count {
  box-sizing: border-box !important;
  overflow: visible !important;
  text-decoration-skip-ink: auto !important;
}

.product-card .brand-name,
.favorite-mini-card .brand-name {
  min-height: 19px !important;
  padding-block: 2px !important;
  line-height: 1.4 !important;
}

.product-card .product-name,
.favorite-mini-card .product-name,
.cart-item-title,
.cart-item-variant {
  padding-block: 2px !important;
  line-height: 1.42 !important;
}

.product-card .rating-row,
.favorite-mini-card .rating-row {
  min-height: 23px !important;
  padding-block: 2px !important;
  align-items: center !important;
  line-height: 1.4 !important;
}

.product-card .rating-row > span,
.favorite-mini-card .rating-row > span {
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-block: 2px !important;
  line-height: 1.35 !important;
}

.product-card .card-rating,
.favorite-mini-card .card-rating {
  height: auto !important;
  min-height: 18px !important;
  padding-block: 2px !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

.product-card .card-rating b,
.product-card .card-rating em,
.favorite-mini-card .card-rating b,
.favorite-mini-card .card-rating em {
  height: auto !important;
  min-height: 12px !important;
  padding-block: 1px !important;
  line-height: 1.3 !important;
}

.product-card .price-row,
.favorite-mini-card .price-row,
.cart-item .price-row,
.detail-price-card .price-row {
  min-height: 30px !important;
  padding-block: 4px !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

.product-card .price,
.favorite-mini-card .price,
.cart-item .price,
.detail-price-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.cart-item .old-price,
.detail-price-card .old-price {
  padding-block: 2px !important;
  line-height: 1.3 !important;
}

.product-card .stock,
.favorite-mini-card .stock,
.detail-stock {
  min-height: 23px !important;
  padding-block: 3px !important;
  line-height: 1.4 !important;
}

.cart-stepper strong,
.cart-item-stepper > span,
.cart-count-button,
.cart-stepper-plus,
.cart-stepper-minus,
.remove-cart-button,
.notification-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 2px !important;
  line-height: 1.25 !important;
}

/* Nice One-style section directory: stable right rail, left content only changes. */
@media (max-width: 640px) {
  body[data-route="section"] #app,
  body[data-route="section"] .page {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-inline: 0 !important;
  }

  body[data-route="section"] .section-hub,
  html[dir="ltr"] body[data-route="section"] .section-hub,
  html[dir="rtl"] body[data-route="section"] .section-hub {
    display: grid !important;
    align-items: start !important;
    direction: ltr !important;
    grid-template-columns: minmax(0, calc(100% - 118px)) 118px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: calc(100svh + 640px) !important;
    margin: 0 !important;
    padding: 0 !important;
    column-gap: 0 !important;
    overflow: visible !important;
    background: var(--page, #fff) !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    position: fixed !important;
    top: calc(111px + env(safe-area-inset-top, 0px)) !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    right: env(safe-area-inset-right, 0px) !important;
    left: auto !important;
    bottom: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: calc(100svh - 188px - env(safe-area-inset-top, 0px)) !important;
    min-height: 0 !important;
    max-height: calc(100svh - 188px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 24 !important;
    gap: 0 !important;
    padding: 4px 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f3f3f6 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
    contain: layout paint !important;
  }

  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    direction: rtl !important;
    text-align: right !important;
  }

  html[dir="ltr"] body[data-route="section"] .section-hub-tabs {
    direction: ltr !important;
    text-align: left !important;
  }

  body[data-route="section"] .section-hub-tabs::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="section"] .section-hub-tabs a,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs a,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 46px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 12px 7px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(26, 27, 33, 0.58) !important;
    font-size: 12.5px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    transform: none !important;
  }

  body[data-route="section"] .section-hub-tabs a.active,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs a.active,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs a.active {
    background: #fff !important;
    color: #131318 !important;
    font-weight: 860 !important;
  }

  body[data-route="section"] .section-hub-tabs a.active::after {
    content: "" !important;
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline-end: 0 !important;
    width: 4px !important;
    border-radius: 999px 0 0 999px !important;
    background: linear-gradient(180deg, #6debd2, #9d77ff 58%, #f38ee7) !important;
  }

  body[data-route="section"] .section-hub-content,
  html[dir="ltr"] body[data-route="section"] .section-hub-content,
  html[dir="rtl"] body[data-route="section"] .section-hub-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px 118px !important;
    min-height: calc(100svh + 420px) !important;
    background: var(--page, #fff) !important;
    overflow: visible !important;
  }

  html[dir="rtl"] body[data-route="section"] .section-hub-content {
    direction: rtl !important;
  }

  html[dir="ltr"] body[data-route="section"] .section-hub-content {
    direction: ltr !important;
  }

  body[data-route="section"] .section-hero-banner {
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    margin: 8px 0 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-route="section"] .section-hero-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  body[data-route="section"] .section-panel-title {
    margin: 8px 0 10px !important;
    padding: 0 2px !important;
  }

  body[data-route="section"] .section-panel-title strong {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 880 !important;
  }

  body[data-route="section"] .section-panel-title span {
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: var(--muted, #7e818b) !important;
  }

  body[data-route="section"] .section-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 8px !important;
    padding: 8px 0 22px !important;
    margin: 0 !important;
    background: transparent !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile {
    min-height: 92px !important;
    padding: 0 !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: #f6f6f7 !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile span {
    max-width: 78px !important;
    min-height: 30px !important;
    color: var(--ink, #141418) !important;
    font-size: 12px !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  body[data-route="section"] .section-brand-directory {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 14px !important;
    gap: 8px !important;
    direction: ltr !important;
    align-items: start !important;
    padding: 8px 0 118px !important;
    background: transparent !important;
  }

  body[data-route="section"] .section-brand-logo-grid {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-route="section"] .section-brand-alpha {
    position: sticky !important;
    top: calc(118px + env(safe-area-inset-top, 0px)) !important;
    grid-column: 2 !important;
    display: grid !important;
    align-content: start !important;
    gap: 1px !important;
    max-height: calc(100svh - 196px - env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    padding: 0 !important;
    background: transparent !important;
    scrollbar-width: none !important;
    justify-items: center !important;
  }

  body[data-route="section"] .section-brand-alpha::-webkit-scrollbar {
    display: none !important;
  }

  body[data-route="section"] .section-brand-alpha a {
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    min-height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(30, 32, 40, 0.58) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  body[data-route="section"] .section-brand-logo-tile {
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 7px 4px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 5px 18px rgba(20, 20, 28, 0.05) !important;
    gap: 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-route="section"] .section-brand-logo-tile .brand-logo,
  body[data-route="section"] .section-brand-logo-tile img {
    width: min(60px, calc(100% - 6px)) !important;
    max-width: calc(100% - 6px) !important;
    height: 50px !important;
    object-fit: contain !important;
    display: block !important;
    flex: 0 0 auto !important;
  }

  body[data-route="section"] .section-brand-logo-tile span {
    max-width: 100% !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    color: var(--ink, #141418) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub,
  html[data-theme="dark"] body[data-route="section"] .section-hub-content {
    background: var(--page, #07080c) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #12131a !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a {
    color: rgba(235, 236, 244, 0.58) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs a.active {
    background: #1c1e27 !important;
    color: #fff !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile img {
    background: #171923 !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile {
    background: #11131a !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18) !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-brand-alpha a,
  html[data-theme="dark"] body[data-route="section"] .section-brand-logo-tile span,
  html[data-theme="dark"] body[data-route="section"] .section-category-grid .quick-tile span {
    color: rgba(245, 246, 250, 0.88) !important;
  }
}

/* Rescue web polish: cart recommendations, smoother account, stable section/category rails. */
body[data-route="cart"] .cart-recommendations-slot {
  margin: 18px auto 0 !important;
  width: min(100%, 1180px) !important;
}

body[data-route="cart"] .cart-recommendation-section {
  margin: 0 !important;
  padding-bottom: 118px !important;
}

body[data-route="cart"] .cart-recommendation-section .section-head {
  padding-inline: 2px !important;
}

body[data-route="cart"] .cart-recommendation-section .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
}

body[data-route="account"] .account-screen {
  contain: none !important;
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

body[data-route="account"] .account-menu-list,
body[data-route="account"] .account-profile-card,
body[data-route="account"] .account-inline-panel,
body[data-route="account"] .social-follow {
  transform: none !important;
  backface-visibility: visible !important;
}

body[data-route="account"] .account-profile-card {
  margin-bottom: 10px !important;
}

body[data-route="account"] .account-menu-list > a,
body[data-route="account"] .account-menu-list > button {
  min-height: 52px !important;
}

body[data-route="section"] .section-hub {
  align-items: stretch !important;
  contain: layout paint !important;
}

@media (min-width: 641px) {
  body[data-route="section"] .section-hub-tabs {
    position: sticky !important;
    top: var(--nion-header-offset, 0px) !important;
    align-self: flex-start !important;
    max-height: calc(100dvh - var(--nion-header-offset, 0px) - 88px) !important;
    overscroll-behavior: contain !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
  }

  body[data-route="section"] .section-hub-tabs a {
    min-height: 38px !important;
    padding: 6px 8px !important;
    line-height: 1.25 !important;
  }
}

body[data-route="section"] .section-hub-content {
  min-width: 0 !important;
  contain: layout paint !important;
}

body[data-route="section"] .section-category-grid {
  min-height: 220px !important;
}

body[data-route="category"] .category-sibling-strip {
  position: sticky !important;
  top: var(--nion-header-offset, 0px) !important;
  z-index: 9 !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

body[data-route="category"] .category-sibling-track {
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
}

body[data-route="category"] [data-category-results] {
  min-height: 420px !important;
  transition: opacity .14s ease !important;
}

body[data-route="category"] [data-category-results].is-soft-loading {
  opacity: .72 !important;
  pointer-events: none !important;
}

/* Product imagery: fill the available stage while preserving the full packshot. */
@media (max-width: 640px) {
  .product-card:not(.similar-product-section .product-card) .product-media {
    min-height: 150px !important;
  }

  .product-card .product-media img,
  .rail .product-card .product-media img,
  body[data-route="home"] .product-card .product-media img,
  body[data-route="offers"] .product-card .product-media img,
  body[data-route="section"] .product-card .product-media img,
  body[data-route="brand"] .product-card .product-media img,
  body[data-route="collection"] .product-card .product-media img,
  body[data-route="search"] .product-card .product-media img {
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
  }

  body[data-route="product"] .detail-slider,
  body[data-route="product"] .detail-track,
  body[data-route="product"] .detail-slide {
    height: clamp(380px, 103vw, 430px) !important;
    min-height: clamp(380px, 103vw, 430px) !important;
  }

  body[data-route="product"] .detail-slide {
    position: relative !important;
    overflow: hidden !important;
  }

  body[data-route="product"] .detail-slide img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: calc(46px + env(safe-area-inset-top)) 8px 24px !important;
  }
}

@media (max-width: 640px) {
  body[data-route="cart"] .cart-recommendations-slot {
    margin-top: 14px !important;
  }

  body[data-route="cart"] .cart-recommendation-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-route="section"] .section-hub-tabs {
    overscroll-behavior: contain !important;
  }
}

/* Native-parity section screen: two stable in-flow panes, no fixed page rail. */
@media (max-width: 640px) {
  html:has(body[data-route="section"]) {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-route="section"],
  body[data-route="section"] .page {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body[data-route="section"] .footer {
    display: none !important;
  }

  body[data-route="section"] .page {
    padding-bottom: 0 !important;
  }

  body[data-route="section"] .page > .section.section-hub,
  html[dir="rtl"] body[data-route="section"] .page > .section.section-hub,
  html[dir="ltr"] body[data-route="section"] .page > .section.section-hub {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100vw !important;
    max-width: none !important;
    height: max(440px, calc(100dvh - 189px - env(safe-area-inset-bottom, 0px))) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px calc(50% - 50vw) 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    contain: layout paint !important;
    background: var(--page, #fff) !important;
  }

  html[dir="rtl"] body[data-route="section"] .page > .section.section-hub {
    grid-template-columns: minmax(0, 1fr) 126px !important;
  }

  html[dir="ltr"] body[data-route="section"] .page > .section.section-hub {
    grid-template-columns: 126px minmax(0, 1fr) !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs {
    position: relative !important;
    inset: auto !important;
    align-self: stretch !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 0 96px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: none !important;
    contain: layout paint !important;
    background: #f2f3f6 !important;
  }

  html[dir="rtl"] body[data-route="section"] .section-hub-tabs { grid-column: 2 !important; }
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs { grid-column: 1 !important; }

  body[data-route="section"] .section-hub-tabs a,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs a,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs a {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 6px 12px !important;
    font-size: 12.6px !important;
    line-height: 1.25 !important;
  }

  body[data-route="section"] .section-hub-content,
  html[dir="rtl"] body[data-route="section"] .section-hub-content,
  html[dir="ltr"] body[data-route="section"] .section-hub-content {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 9px 108px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    contain: layout paint !important;
    background: var(--page, #fff) !important;
  }

  html[dir="rtl"] body[data-route="section"] .section-hub-content { grid-column: 1 !important; }
  html[dir="ltr"] body[data-route="section"] .section-hub-content { grid-column: 2 !important; }

  body[data-route="section"] .section-hero-banner {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    margin: 0 0 8px !important;
    border-radius: 10px !important;
  }

  body[data-route="section"] .section-panel-title { margin: 8px 0 10px !important; }

  body[data-route="section"] .section-category-grid {
    gap: 14px 8px !important;
    padding: 0 0 20px !important;
  }

  body[data-route="section"] .section-category-grid .quick-tile { min-height: 96px !important; }

  body[data-route="section"] .section-category-grid .quick-tile img {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    padding: 0 !important;
    object-fit: cover !important;
  }

  body[data-route="section"] .section-brand-directory {
    min-height: 100% !important;
    padding: 0 0 18px !important;
  }

  body[data-route="section"] .section-brand-alpha {
    top: 8px !important;
    max-height: calc(100dvh - 220px) !important;
  }

  body[data-route="section"] .section-brand-logo-grid {
    gap: 8px !important;
    overflow: visible !important;
  }

  body[data-route="section"] .section-brand-logo-tile {
    min-height: 112px !important;
    padding: 7px 5px !important;
    border-radius: 10px !important;
  }

  body[data-route="section"] .section-brand-logo-tile .brand-logo,
  body[data-route="section"] .section-brand-logo-tile img {
    width: min(72px, calc(100% - 4px)) !important;
    max-width: calc(100% - 4px) !important;
    height: 64px !important;
  }

  html[data-theme="dark"] body[data-route="section"] .section-hub-tabs {
    background: #15161d !important;
  }
}

/* Catalog text must remain fully visible after every route-specific rule. */
.product-card .rating-row,
.favorite-mini-card .rating-row {
  min-height: 23px !important;
  padding-block: 2px !important;
  align-items: center !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

.product-card .rating-row > span,
.favorite-mini-card .rating-row > span,
.product-card .card-rating,
.favorite-mini-card .card-rating,
.product-card .card-rating b,
.product-card .card-rating em,
.favorite-mini-card .card-rating b,
.favorite-mini-card .card-rating em {
  height: auto !important;
  min-height: 18px !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.3 !important;
}

.product-card .price-row,
.favorite-mini-card .price-row,
.cart-item .price-row,
.detail-price-card .price-row {
  min-height: 30px !important;
  padding-block: 4px !important;
  align-items: center !important;
  overflow: visible !important;
  line-height: 1.3 !important;
}

.product-card .price,
.favorite-mini-card .price,
.cart-item .price,
.detail-price-card .price,
.product-card .old-price,
.favorite-mini-card .old-price,
.cart-item .old-price,
.detail-price-card .old-price,
.product-card .stock,
.favorite-mini-card .stock,
.detail-stock,
.cart-item-title,
.cart-item-variant {
  height: auto !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.35 !important;
}

.product-card .stock,
.favorite-mini-card .stock,
.detail-stock {
  min-height: 23px !important;
  padding-block: 3px !important;
}

.cart-stepper strong,
.cart-item-stepper > span,
.cart-count-button,
.cart-stepper-plus,
.cart-stepper-minus,
.remove-cart-button,
.notification-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 2px !important;
  overflow: visible !important;
  line-height: 1.25 !important;
}

/* Product-card quantity control: final cascade authority. */
.product-card .cart-control.is-added:not(.is-flash-only),
.favorite-mini-action .cart-control.is-added:not(.is-flash-only),
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 66px !important;
  align-items: center !important;
  gap: 5px !important;
  direction: inherit !important;
  box-sizing: border-box !important;
  padding: 4px 5px 4px 9px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  background: #111116 !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-added-label,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-added-label,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-added-label {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 18px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  width: 66px !important;
  min-width: 66px !important;
  max-width: 66px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  display: grid !important;
  grid-template-columns: 20px 24px 20px !important;
  place-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  direction: ltr !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 17, 22, 0.08) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #17171d !important;
  background: transparent !important;
  font-size: 0 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button svg,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button svg,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button svg {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 1.8 !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="1"] {
  color: #9b58c7 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"],
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-count-button[data-delta="-1"] {
  color: #383840 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
.favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong,
body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper > strong {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  color: #17171d !important;
  background: #fff !important;
  border-inline: 1px solid #ececf1 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) {
  color: #fff !important;
  background: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.is-added:not(.is-flash-only) .cart-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.is-added:not(.is-flash-only) .cart-stepper {
  border-color: rgba(17, 17, 22, 0.08) !important;
  background: #fff !important;
}

/* Product cards: premium compact quantity state. Unique classes isolate it from legacy steppers. */
.product-card .cart-control.card-quantity-control.is-added,
.favorite-mini-action .cart-control.card-quantity-control.is-added,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 5px 4px 8px !important;
  overflow: hidden !important;
  color: #17171d !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(105deg, rgba(103, 221, 207, 0.72), rgba(186, 118, 232, 0.78)) border-box !important;
  box-shadow: 0 4px 12px rgba(44, 38, 62, 0.06) !important;
  direction: inherit !important;
}

.product-card .cart-control.card-quantity-control .card-quantity-state,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-state,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-state {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #24242a !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.product-card .cart-control.card-quantity-control .card-quantity-check,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-check,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-check {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #68dacd, #a86bd8) !important;
  box-shadow: 0 2px 6px rgba(154, 91, 202, 0.24) !important;
}

.product-card .cart-control.card-quantity-control .card-quantity-check svg,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-check svg,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-check svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 2.35 !important;
}

.product-card .cart-control.card-quantity-control .card-quantity-stepper,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-stepper,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-stepper {
  width: 72px !important;
  height: 26px !important;
  flex: 0 0 72px !important;
  display: grid !important;
  grid-template-columns: 23px 26px 23px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #111116 !important;
  box-shadow: 0 3px 8px rgba(17, 17, 22, 0.18) !important;
  direction: inherit !important;
}

.product-card .cart-control.card-quantity-control button.card-quantity-button,
.favorite-mini-action .cart-control.card-quantity-control button.card-quantity-button,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control button.card-quantity-button,
.product-card .cart-control.card-quantity-control .card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-value {
  width: 100% !important;
  height: 26px !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: Inter, "SF Pro Display", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  text-align: center !important;
}

.product-card .cart-control.card-quantity-control button.card-quantity-button,
.favorite-mini-action .cart-control.card-quantity-control button.card-quantity-button,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control button.card-quantity-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-card .cart-control.card-quantity-control button.card-quantity-button svg,
.favorite-mini-action .cart-control.card-quantity-control button.card-quantity-button svg,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control button.card-quantity-button svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 1.9 !important;
}

.product-card .cart-control.card-quantity-control .card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control .card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-value {
  border-inline: 1px solid rgba(255, 255, 255, 0.16) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-inline: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.product-card .cart-control.card-quantity-control button.card-quantity-button[data-delta="1"],
.favorite-mini-action .cart-control.card-quantity-control button.card-quantity-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.card-quantity-control button.card-quantity-button[data-delta="1"] {
  color: #78e2d5 !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  color: #fff !important;
  background:
    linear-gradient(#1a1a20, #1a1a20) padding-box,
    linear-gradient(105deg, rgba(103, 221, 207, 0.58), rgba(186, 118, 232, 0.64)) border-box !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control .card-quantity-state,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control .card-quantity-state,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control .card-quantity-state {
  color: #f6f6f8 !important;
}

/* Added-to-cart card control, retail UI revision. */
.product-card .cart-control.card-quantity-control.is-added,
.favorite-mini-action .cart-control.card-quantity-control.is-added,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 4px 5px 4px 7px !important;
  color: #17171d !important;
  border: 1px solid #e2e2e9 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(24, 24, 32, 0.07) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-state,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-state,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-state {
  min-width: 68px !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: visible !important;
  color: #17171d !important;
  white-space: nowrap !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-check,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-check,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-check {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  flex: 0 0 23px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #65d9ce 0%, #a968d8 100%) !important;
  box-shadow: 0 3px 7px rgba(158, 94, 207, 0.2) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-check svg,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-check svg,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-check svg {
  width: 12px !important;
  height: 12px !important;
  color: #fff !important;
  stroke-width: 1.75 !important;
}

.product-card .cart-control.card-quantity-control.is-added strong.card-quantity-label,
.favorite-mini-action .cart-control.card-quantity-control.is-added strong.card-quantity-label,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added strong.card-quantity-label {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #17171d !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper {
  width: 80px !important;
  height: 28px !important;
  min-width: 80px !important;
  min-height: 28px !important;
  max-width: 80px !important;
  max-height: 28px !important;
  flex: 0 0 80px !important;
  display: grid !important;
  grid-template-columns: 26px 28px 26px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #17171d !important;
  border: 1px solid #e4e4ea !important;
  border-radius: 7px !important;
  background: #f5f5f7 !important;
  box-shadow: none !important;
  direction: inherit !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  width: 100% !important;
  height: 28px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  max-width: none !important;
  max-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #202027 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  border-inline: 1px solid #dedee5 !important;
  background: #fff !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"],
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"] {
  color: #fff !important;
  background: linear-gradient(135deg, #69dacf, #a768d8) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 2 !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  color: #f7f7f9 !important;
  border-color: #34343d !important;
  background: #1a1a20 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added strong.card-quantity-label {
  color: #f7f7f9 !important;
}

/* Final card action: one calm black surface, no decorative icon. */
.product-card .product-actions,
.favorite-mini-card .product-actions {
  padding: 0 10px 12px !important;
}

.product-card .cart-control.card-quantity-control.is-added,
.favorite-mini-action .cart-control.card-quantity-control.is-added,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  padding: 4px 6px 4px 10px !important;
  color: #fff !important;
  border: 1px solid #111116 !important;
  border-radius: 8px !important;
  background: #111116 !important;
  box-shadow: 0 5px 12px rgba(17, 17, 22, 0.16) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-state,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-state,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-state {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  color: #fff !important;
  white-space: nowrap !important;
}

.product-card .cart-control.card-quantity-control.is-added strong.card-quantity-label,
.favorite-mini-action .cart-control.card-quantity-control.is-added strong.card-quantity-label,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added strong.card-quantity-label {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper {
  width: 76px !important;
  height: 26px !important;
  min-width: 76px !important;
  min-height: 26px !important;
  max-width: 76px !important;
  max-height: 26px !important;
  flex: 0 0 76px !important;
  display: grid !important;
  grid-template-columns: 24px 28px 24px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  direction: inherit !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  width: 100% !important;
  height: 26px !important;
  min-width: 0 !important;
  min-height: 26px !important;
  max-width: none !important;
  max-height: 26px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  border-inline: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"],
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"],
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button[data-delta="1"] {
  color: #fff !important;
  background: transparent !important;
}

.product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg,
.favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg,
body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button svg {
  width: 9px !important;
  height: 9px !important;
  color: #fff !important;
  stroke-width: 2 !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  color: #fff !important;
  border-color: #f6f6f8 !important;
  background: #f6f6f8 !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  color: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper {
  border-color: rgba(17, 17, 22, 0.2) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  border-inline-color: rgba(17, 17, 22, 0.18) !important;
  background: rgba(17, 17, 22, 0.06) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added {
  color: #fff !important;
  border-color: #36363f !important;
  background: #111116 !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added strong.card-quantity-label,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > button.card-quantity-button,
html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  color: #fff !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-control.is-added .card-quantity-stepper > strong.card-quantity-value {
  border-inline-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* Product-card cart state: compact retail control inspired by leading beauty stores. */
.product-card .cart-control.card-quantity-v2,
.favorite-mini-action .cart-control.card-quantity-v2,
body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 5px 6px 5px 13px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid #111116 !important;
  border-radius: 10px !important;
  background: #111116 !important;
  box-shadow: 0 6px 14px rgba(17, 17, 22, 0.14) !important;
}

[dir="ltr"] .product-card .cart-control.card-quantity-v2,
[dir="ltr"] .favorite-mini-action .cart-control.card-quantity-v2,
[dir="ltr"] body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 {
  padding: 5px 13px 5px 6px !important;
}

.product-card .card-quantity-v2-state,
.favorite-mini-action .card-quantity-v2-state,
body[data-route="search"] .search-product-list .card-quantity-v2-state {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.product-card .card-quantity-v2-label,
.favorite-mini-action .card-quantity-v2-label,
body[data-route="search"] .search-product-list .card-quantity-v2-label {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card .card-quantity-v2-stepper,
.favorite-mini-action .card-quantity-v2-stepper,
body[data-route="search"] .search-product-list .card-quantity-v2-stepper {
  width: 88px !important;
  height: 30px !important;
  min-width: 88px !important;
  min-height: 30px !important;
  flex: 0 0 88px !important;
  display: grid !important;
  grid-template-columns: 28px 32px 28px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #17171c !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  direction: rtl !important;
}

.product-card .card-quantity-v2-button,
.favorite-mini-action .card-quantity-v2-button,
body[data-route="search"] .search-product-list .card-quantity-v2-button,
.product-card .card-quantity-v2-value,
.favorite-mini-action .card-quantity-v2-value,
body[data-route="search"] .search-product-list .card-quantity-v2-value {
  width: 100% !important;
  height: 30px !important;
  min-width: 0 !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #17171c !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

.product-card .card-quantity-v2-value,
.favorite-mini-action .card-quantity-v2-value,
body[data-route="search"] .search-product-list .card-quantity-v2-value {
  border-inline: 1px solid #e8e8ed !important;
  background: #f7f7f9 !important;
  font-variant-numeric: tabular-nums !important;
}

.product-card .card-quantity-v2-button svg,
.favorite-mini-action .card-quantity-v2-button svg,
body[data-route="search"] .search-product-list .card-quantity-v2-button svg {
  width: 10px !important;
  height: 10px !important;
  color: currentColor !important;
  stroke-width: 2.15 !important;
}

.product-card .card-quantity-v2-button:active,
.favorite-mini-action .card-quantity-v2-button:active,
body[data-route="search"] .search-product-list .card-quantity-v2-button:active {
  background: #ececf1 !important;
  transform: scale(0.94) !important;
}

html[data-theme="dark"] .product-card .cart-control.card-quantity-v2,
html[data-theme="dark"] .favorite-mini-action .cart-control.card-quantity-v2,
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 {
  border-color: #303038 !important;
  background: #0e0e12 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28) !important;
}

/* Keep legacy cart-control rules from reshaping the new product-card control. */
app .hero-campaign-copy > *,
.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 7px !important;
  padding: 5px 6px 5px 10px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid #111116 !important;
  border-radius: 10px !important;
  background: #111116 !important;
}

app .hero-campaign-copy,
.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  padding: 5px 10px 5px 6px !important;
}

html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper {
  width: 74px !important;
  height: 28px !important;
  min-width: 74px !important;
  min-height: 28px !important;
  max-width: 74px !important;
  max-height: 28px !important;
  flex: 0 0 74px !important;
  display: grid !important;
  grid-template-columns: 23px 28px 23px !important;
  align-items: center !important;
  overflow: hidden !important;
  color: #17171c !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  direction: rtl !important;
}

html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  width: 100% !important;
  height: 28px !important;
  min-width: 0 !important;
  min-height: 28px !important;
  max-width: none !important;
  max-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #17171c !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

html body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  border-inline: 1px solid #e8e8ed !important;
  background: #f7f7f9 !important;
}

html[data-theme="dark"] body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  color: #fff !important;
  border-color: #34343c !important;
  background: #0e0e12 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label {
  color: #fff !important;
}

html[data-theme="dark"] body .cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper {
  color: #17171c !important;
  background: #f7f7f9 !important;
}

html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  color: #fff !important;
  border-color: #34343c !important;
  background: #0e0e12 !important;
}

html[data-theme="dark"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) .card-quantity-v2-label,
html[data-theme="dark"] body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) .card-quantity-v2-label {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Final product-grid authority: legacy card rules must not turn v2 back into a grid. */
html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 5px 6px 5px 10px !important;
}

html[dir="ltr"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html[dir="ltr"] body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  padding: 5px 10px 5px 6px !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state {
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label {
  width: 100% !important;
  min-width: 44px !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: Tajawal, "Segoe UI", Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-overflow: clip !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  flex-basis: 70px !important;
  grid-template-columns: 22px 26px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  border-radius: 6px !important;
  background: transparent !important;
  font-size: 10.5px !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button svg,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button svg {
  color: #fff !important;
  width: 10px !important;
  height: 10px !important;
}

/* Product detail brand is a real navigation target, not passive metadata. */
body[data-route="product"] .detail-brand-link {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 0 !important;
  color: rgba(18, 18, 24, 0.5) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 160ms ease, transform 160ms ease !important;
}

body[data-route="product"] .detail-brand-link .brand-name {
  color: inherit !important;
}

body[data-route="product"] .detail-brand-link .nion-icon {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  color: #9b58c7 !important;
  stroke-width: 1.7 !important;
}

body[data-route="product"] .detail-brand-link:active {
  color: #7f42ab !important;
  transform: translateY(1px) !important;
}

html[data-theme="dark"] body[data-route="product"] .detail-brand-link {
  color: rgba(247, 244, 255, 0.76) !important;
}

/* Card cart control: one compact black surface with a fully readable state. */
html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  gap: 2px !important;
  padding: 5px 5px 5px 7px !important;
}

html[dir="ltr"] body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html[dir="ltr"] body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  padding: 5px 7px 5px 5px !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state {
  min-width: 48px !important;
  flex: 1 1 48px !important;
  overflow: visible !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label {
  min-width: 48px !important;
  overflow: visible !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 58px !important;
  grid-template-columns: 18px 22px 18px !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  font-size: 10px !important;
}

html body:not([data-route="search"]) .product-grid:not(.search-product-list) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button svg,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button svg {
  width: 8px !important;
  height: 8px !important;
  stroke-width: 2 !important;
}

/* Final compact card quantity control: readable label with a light, quiet stepper. */
html body #app .product-card .product-actions .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body #app .favorite-mini-action .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(42px, 1fr) 56px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: #0b0b0d !important;
  box-shadow: 0 7px 15px rgba(10, 10, 13, 0.16) !important;
  direction: inherit !important;
}

html body .product-card .cart-control.card-quantity-v2 > .card-quantity-v2-state,
html body .favorite-mini-action .cart-control.card-quantity-v2 > .card-quantity-v2-state,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 > .card-quantity-v2-state {
  width: 100% !important;
  min-width: 42px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

html body .product-card .cart-control.card-quantity-v2 .card-quantity-v2-label,
html body .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-label,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-label {
  width: auto !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  font-family: Tajawal, "Segoe UI", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body .product-card .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
html body .favorite-mini-action .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 > .card-quantity-v2-stepper {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  grid-template-columns: 17px 22px 17px !important;
  align-items: center !important;
  justify-self: end !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  direction: rtl !important;
}

html body .product-card .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body .product-card .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-value {
  width: 100% !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 20px !important;
  max-height: 20px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

html body .product-card .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-value {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-variant-numeric: tabular-nums !important;
}

html body .product-card .cart-control.card-quantity-v2 .card-quantity-v2-button svg,
html body .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-button svg,
html body[data-route="search"] .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-button svg {
  width: 8px !important;
  height: 8px !important;
  color: currentColor !important;
  stroke-width: 1.65 !important;
}

html[data-theme="dark"] body .product-card .product-actions .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html[data-theme="dark"] body .favorite-mini-action .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html[data-theme="dark"] body[data-route="search"] .search-product-list .cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #08080b !important;
}

/* Product-card authority: keep the full label visible beside a compact stepper. */
html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 56px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  direction: rtl !important;
  background: #0b0b0d !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state {
  width: auto !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-state > .card-quantity-v2-label {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  flex: 0 0 56px !important;
  grid-template-columns: 17px 22px 17px !important;
  align-items: center !important;
  justify-self: end !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  direction: rtl !important;
}

html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-button,
html body:not([data-route="search"]) .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value,
html body[data-route="search"] .search-product-list .product-card .product-actions .add-button.cart-control.card-quantity-v2.is-added:not(.is-flash-only) > .card-quantity-v2-stepper > .card-quantity-v2-value {
  width: 100% !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  font-size: 9.5px !important;
}

/* Product image lightbox: fullscreen paging with pinch, wheel and double-tap zoom. */
.image-viewer {
  width: min(1100px, calc(100% - 16px));
  height: min(920px, calc(100dvh - 16px));
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 80px rgba(30, 26, 48, 0.16);
}

.image-viewer::backdrop {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.image-viewer-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  cursor: zoom-in;
  background: #fff;
  contain: layout paint size;
  -webkit-tap-highlight-color: transparent;
}

.image-viewer-stage.is-zoomed {
  cursor: grab;
}

.image-viewer-stage.is-zoomed:active {
  cursor: grabbing;
}

.image-viewer-track {
  position: absolute;
  inset: 0;
  display: flex;
  direction: ltr;
  will-change: transform;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
  transform: translateZ(0);
}

.image-viewer-track.is-dragging {
  transition: none;
}

.image-viewer-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  contain: layout paint size;
}

.image-viewer .image-viewer-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  padding: 58px 42px 72px;
  transform-origin: center;
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  will-change: transform;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform: translateZ(0);
}

.image-viewer .image-viewer-slide img.is-interacting {
  transition: opacity 220ms ease;
}

.image-viewer .image-viewer-slide img.is-loaded {
  opacity: 1;
}

.image-viewer-thumbs {
  position: absolute;
  inset-inline: 64px;
  inset-block-end: 66px;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 7px;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.image-viewer-thumbs::-webkit-scrollbar {
  display: none;
}

.image-viewer-thumbs[hidden] {
  display: none !important;
}

.image-viewer-thumbs button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid rgba(25, 23, 34, 0.12);
  border-radius: 8px;
  background: #fff;
  padding: 2px;
  opacity: 0.62;
  scroll-snap-align: center;
  transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.image-viewer-thumbs button.active {
  border-color: rgba(121, 82, 211, 0.82);
  opacity: 1;
  transform: translateY(-2px);
}

.image-viewer-thumbs img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #fff;
  object-fit: contain;
}

.image-viewer .image-viewer-close {
  z-index: 3;
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 23, 34, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  color: #17151d;
  backdrop-filter: blur(18px);
}

.image-viewer-nav {
  position: absolute;
  inset-block-start: 50%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 23, 34, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #17151d;
  transform: translateY(-50%);
  backdrop-filter: blur(18px);
}

.image-viewer-prev { inset-inline-start: 12px; }
.image-viewer-next { inset-inline-end: 12px; }

.image-viewer-nav:disabled {
  opacity: 0.28;
  pointer-events: none;
}

.image-viewer-tools {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 14px;
  z-index: 3;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(25, 23, 34, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
  color: #17151d;
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.image-viewer-tools button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.image-viewer-tools output {
  min-width: 48px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.image-viewer-count {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 50%;
  z-index: 3;
  color: rgba(23, 21, 29, 0.72);
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
  unicode-bidi: isolate;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  .image-viewer {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }

  .image-viewer .image-viewer-slide img {
    padding: 68px 10px 128px;
  }

  .image-viewer-thumbs {
    inset-inline: 14px;
  }

  .image-viewer-nav {
    display: none;
  }
}

/* Unified product-card cart state across home, catalog, offers, search and favorites. */
html body #app .product-card .product-actions .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body #app .favorite-mini-action .cart-control.card-quantity-v2.is-added:not(.is-flash-only),
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: #0b0b0d !important;
  box-shadow: 0 7px 15px rgba(10, 10, 13, 0.16) !important;
  direction: inherit !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 > .card-quantity-v2-state,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 > .card-quantity-v2-state,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 > .card-quantity-v2-state {
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 .card-quantity-v2-label,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-label,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-label {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #fff !important;
  border: 0 !important;
  background: transparent !important;
  font-family: Tajawal, "Segoe UI", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 > .card-quantity-v2-stepper {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  display: grid !important;
  grid-template-columns: 19px 22px 19px !important;
  align-items: center !important;
  justify-self: end !important;
  overflow: hidden !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  direction: rtl !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-button,
html body #app .product-card .product-actions .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-value {
  width: 100% !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 20px !important;
  max-height: 20px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-value,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-value {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-variant-numeric: tabular-nums !important;
}

html body #app .product-card .product-actions .cart-control.card-quantity-v2 .card-quantity-v2-button svg,
html body #app .favorite-mini-action .cart-control.card-quantity-v2 .card-quantity-v2-button svg,
html body[data-route="search"] #app .search-product-list .cart-control.card-quantity-v2 .card-quantity-v2-button svg {
  width: 8px !important;
  height: 8px !important;
  color: currentColor !important;
  stroke-width: 1.65 !important;
}

/* Final campaign presentation layer. Keep these rules last to avoid legacy promo overrides. */
html body #app .promo-showcase .promo-card {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f4f5f7 !important;
  box-shadow: 0 2px 10px rgba(17, 17, 22, 0.045) !important;
  --campaign-solid: rgba(255, 255, 255, 0.68);
  --campaign-soft: rgba(255, 255, 255, 0.2);
}

html body #app .promo-showcase .promo-card.promo-copy-light {
  --campaign-solid: rgba(10, 10, 14, 0.58);
  --campaign-soft: rgba(10, 10, 14, 0.18);
}

html body #app .promo-showcase .promo-copy-start::after {
  background: none !important;
}

html body #app .promo-showcase .promo-copy-end::after {
  background: none !important;
}

html body #app .promo-showcase .promo-copy-center::after {
  background: none !important;
}

html body #app .promo-showcase .promo-card::after {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  content: "" !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body #app .promo-showcase .promo-card > img,
html body[data-route="home"] #app .promo-showcase .promo-card-wide > img {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  grid-column: auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

html body #app .promo-showcase .promo-card-copy,
html body[data-route="home"] #app .promo-showcase .promo-card-wide .promo-card-copy {
  position: absolute !important;
  z-index: 2 !important;
  inset-block: 0 !important;
  grid-column: auto !important;
  display: flex !important;
  width: min(52%, 250px) !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 2px !important;
  padding: clamp(10px, 2.7vw, 20px) !important;
  color: #141419 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-align: right !important;
  text-shadow: none !important;
}

app .hero-campaign-copy,
#app .promo-showcase .promo-card-copy {
  right: 0 !important;
  left: auto !important;
  align-items: flex-start !important;
  text-align: right !important;
}

html[dir="rtl"] body[data-route="home"] #app .promo-showcase .promo-card-wide .promo-card-copy {
  align-items: flex-start !important;
}

html[dir="ltr"] body #app .promo-showcase .promo-card-copy {
  right: auto !important;
  left: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

html body #app .promo-showcase .promo-copy-light .promo-card-copy {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88), 0 3px 12px rgba(0, 0, 0, 0.56) !important;
}

html[dir="rtl"] body #app .promo-showcase .promo-copy-start .promo-card-copy,
html[dir="rtl"] body #app .promo-showcase .promo-copy-end .promo-card-copy { right: 0 !important; left: auto !important; }
html[dir="ltr"] body #app .promo-showcase .promo-copy-start .promo-card-copy,
html[dir="ltr"] body #app .promo-showcase .promo-copy-end .promo-card-copy { left: 0 !important; right: auto !important; }
html body #app .promo-showcase .promo-copy-center .promo-card-copy {
  inset-inline: 0 !important;
  width: min(72%, 340px) !important;
  margin-inline: auto !important;
  align-items: center !important;
  text-align: center !important;
}

html body #app .promo-showcase .promo-card .promo-card-copy span {
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1px !important;
  margin-block-start: 2px !important;
  color: inherit !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[dir="ltr"] body #app .promo-showcase .promo-card-copy .promo-discount {
  flex-direction: row-reverse !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount-value {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  direction: ltr !important;
  color: inherit !important;
  font-weight: 950 !important;
  line-height: 0.84 !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount-side {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-self: stretch !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 1px !important;
  padding: 1px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount-number {
  font-size: clamp(43px, 10.8vw, 66px) !important;
  font-weight: 950 !important;
  line-height: 0.82 !important;
  transform: translateY(3px) !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount-symbol {
  margin: 0 !important;
  font-size: clamp(20px, 5vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
}

html body #app .promo-showcase .promo-card-copy .promo-discount-prefix {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(8px, 1.9vw, 11px) !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

html body #app .promo-showcase .promo-card-copy strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(11px, 2.7vw, 18px) !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body #app .promo-showcase .promo-card-copy em {
  display: none !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(8px, 1.9vw, 11px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  opacity: 0.86 !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .promo-card-square .promo-card-copy {
    width: 58% !important;
    padding: 8px !important;
  }

  html body[data-route="home"] #app .promo-showcase .promo-card-square .promo-discount-number { font-size: 43px !important; }
  html body[data-route="home"] #app .promo-showcase .promo-card-square .promo-discount-prefix { font-size: 8px !important; }
  html body[data-route="home"] #app .promo-showcase .promo-card-square .promo-card-copy strong { font-size: 10.5px !important; }
  html body[data-route="home"] #app .promo-showcase .promo-card-square .promo-card-copy em { font-size: 7.5px !important; }
  html body[data-route="home"] #app .promo-showcase .promo-card-wide { aspect-ratio: 2.72 / 1 !important; }
  html body[data-route="home"] #app .promo-showcase .promo-card-wide .promo-discount-number {
    font-size: 56px !important;
    transform: translateY(4px) !important;
  }
}

/* Dashboard campaigns always render as a single full image with copy on top. */
html body #app .promo-showcase .promo-stack {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body #app .promo-showcase .dashboard-campaign-card.promo-card-square {
  grid-column: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body #app .promo-showcase .dashboard-campaign-card.promo-card-wide {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  aspect-ratio: 2.72 / 1 !important;
}

html body #app .promo-showcase .dashboard-campaign-card > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body #app .promo-showcase .dashboard-campaign-card > .promo-card-copy {
  position: absolute !important;
  inset-block: 0 !important;
  margin: 0 !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .promo-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body[data-route="home"] #app .promo-showcase .dashboard-campaign-card {
    border-radius: 8px !important;
  }

  html body[data-route="home"] #app .promo-showcase .dashboard-campaign-card.promo-card-square .promo-card-copy {
    width: 58% !important;
    padding: 8px !important;
  }

  html body[data-route="home"] #app .promo-showcase .dashboard-campaign-card.promo-card-square .promo-card-copy strong {
    font-size: 10.5px !important;
  }

  html body[data-route="home"] #app .promo-showcase .dashboard-campaign-card.promo-card-square .promo-card-copy em {
    font-size: 7.5px !important;
  }

  html body[data-route="home"] #app .promo-showcase .dashboard-campaign-card.promo-card-square .promo-discount-number {
    font-size: 43px !important;
  }
}

/* Dashboard-owned care mosaic: four landscape stories followed by three compact stories. */
html body #app .promo-showcase-beauty-mosaic .promo-stack {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-landscape {
  grid-column: span 3 !important;
  min-height: 0 !important;
  aspect-ratio: 1.5 / 1 !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-compact {
  grid-column: span 2 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1.03 !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-copy {
  width: 63% !important;
  padding: 10px !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-copy strong {
  max-width: 100% !important;
  font-size: clamp(11px, 2.9vw, 17px) !important;
  line-height: 1.13 !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-landscape .promo-discount-number {
  font-size: clamp(43px, 11vw, 64px) !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-compact .promo-card-copy {
  width: 72% !important;
  padding: 8px !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-compact .promo-card-copy strong {
  font-size: clamp(9px, 2.35vw, 13px) !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-compact .promo-discount-number {
  font-size: clamp(34px, 8.8vw, 50px) !important;
}

html body #app .promo-showcase-beauty-mosaic .promo-card-compact .promo-discount-symbol {
  font-size: clamp(16px, 4vw, 24px) !important;
}

/* Brand campaigns: uploaded artwork with direct, editable campaign copy. */
html body #app .promo-showcase-brand-campaigns .brand-campaign-card {
  --brand-campaign-bg: #eeb8cc;
  isolation: isolate !important;
  background: var(--brand-campaign-bg) !important;
  box-shadow: 0 6px 18px rgba(26, 28, 38, 0.09) !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="1"] { --brand-campaign-bg: #bcddec; }
html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="2"] { --brand-campaign-bg: #d1bce9; }
html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="3"] { --brand-campaign-bg: #b9ded6; }
html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="4"] { --brand-campaign-bg: #edbfd0; }
html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="5"] { --brand-campaign-bg: #d1bce4; }
html body #app .promo-showcase-brand-campaigns .brand-campaign-card[data-campaign-index="6"] { --brand-campaign-bg: #bce0d0; }

html body #app .promo-showcase-brand-campaigns .brand-campaign-card::after {
  z-index: 2 !important;
  opacity: 1 !important;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.12) 44%, transparent 72%) !important;
}

html[dir="ltr"] body #app .promo-showcase-brand-campaigns .brand-campaign-card::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.12) 44%, transparent 72%) !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-photo {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-photo-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: left center !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.04) contrast(1.03) !important;
  transform: scale(1.025) !important;
  transform-origin: center !important;
}

html[dir="ltr"] body #app .promo-showcase-brand-campaigns .brand-campaign-photo-image {
  object-position: right center !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card > .promo-card-copy {
  z-index: 4 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  width: 54% !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 12px !important;
  color: #101015 !important;
  text-shadow: none !important;
}

html[dir="rtl"] body #app .promo-showcase-brand-campaigns .brand-campaign-card > .promo-card-copy {
  right: 0 !important;
  left: auto !important;
}

html[dir="ltr"] body #app .promo-showcase-brand-campaigns .brand-campaign-card > .promo-card-copy {
  right: auto !important;
  left: 0 !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card .promo-card-copy strong {
  max-width: 100% !important;
  font-size: clamp(11px, 2.7vw, 15px) !important;
  font-weight: 850 !important;
  line-height: 1.14 !important;
  -webkit-line-clamp: 2 !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card .promo-discount {
  margin-block-start: 1px !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card .promo-discount-number {
  font-size: clamp(34px, 8.8vw, 48px) !important;
  line-height: 0.88 !important;
  transform: none !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card .promo-discount-symbol {
  font-size: clamp(17px, 4.2vw, 23px) !important;
  line-height: 0.9 !important;
}

html body #app .promo-showcase-brand-campaigns .brand-campaign-card .promo-discount-prefix {
  font-size: clamp(7.5px, 1.75vw, 9px) !important;
  line-height: 1 !important;
}

html body #app .promo-showcase-brand-campaigns .promo-card-compact > .promo-card-copy {
  width: 56% !important;
  gap: 2px !important;
  padding: 8px 7px !important;
}

html body #app .promo-showcase-brand-campaigns .promo-card-compact .promo-card-copy strong {
  font-size: clamp(8.8px, 2.18vw, 11px) !important;
  line-height: 1.12 !important;
}

html body #app .promo-showcase-brand-campaigns .promo-card-compact .promo-discount-number {
  font-size: clamp(28px, 7.1vw, 36px) !important;
}

html body #app .promo-showcase-brand-campaigns .promo-card-compact .promo-discount-symbol {
  font-size: clamp(14px, 3.5vw, 18px) !important;
}

html body #app .promo-showcase-brand-campaigns .promo-card-compact .promo-discount-prefix {
  font-size: 7px !important;
}

html[data-theme="dark"] body #app .promo-showcase-brand-campaigns .brand-campaign-card {
  background: var(--brand-campaign-bg) !important;
}

html[data-theme="dark"] body #app .promo-showcase-brand-campaigns .brand-campaign-card > .promo-card-copy {
  color: #101015 !important;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .home-product-rail:has(+ .promo-showcase-brand-campaigns) {
    margin-block-end: 0 !important;
  }

  html body[data-route="home"] #app .promo-showcase-brand-campaigns {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    contain-intrinsic-size: 540px !important;
  }

  html body[data-route="home"] #app .promo-showcase-brand-campaigns + .section,
  html body[data-route="home"] #app .promo-showcase-brand-campaigns + .home-product-rail {
    margin-block-start: 0 !important;
  }
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase-beauty-mosaic {
    width: min(100% - 28px, 430px) !important;
    margin-inline: auto !important;
  }

  html body[data-route="home"] #app .promo-showcase-beauty-mosaic .section-head {
    margin-bottom: 10px !important;
  }

  html body[data-route="home"] #app .promo-showcase-beauty-mosaic .promo-stack {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body[data-route="home"] #app .promo-showcase-beauty-mosaic .dashboard-campaign-card {
    border-radius: 8px !important;
  }
}

/* Offers page mirrors the dashboard editorial grid: one wide story, four squares, then a wide story. */
body[data-route="offers"] .offers-experience {
  gap: 18px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-inline: 16px !important;
}

body[data-route="offers"] .offers-page-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-block: 8px 2px;
}

body[data-route="offers"] .offers-page-head h1,
body[data-route="offers"] .offers-page-head p {
  margin: 0;
}

body[data-route="offers"] .offers-page-head h1 {
  color: var(--text);
  font-size: clamp(24px, 6vw, 38px);
  font-weight: 900;
  line-height: 1.15;
}

body[data-route="offers"] .offers-page-head p {
  margin-top: 4px;
  color: color-mix(in srgb, var(--text), transparent 48%);
  font-size: 11px;
  font-weight: 600;
}

body[data-route="offers"] .offers-page-head > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 88%);
  border-radius: 999px;
  color: #7654ca;
  font-size: 10px;
  font-weight: 850;
}

body[data-route="offers"] .offers-editorial-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body[data-route="offers"] .offers-editorial {
  width: 100%;
  min-width: 0;
}

body[data-route="offers"] .offers-editorial-card {
  --editorial-solid: rgba(255, 255, 255, 0.68);
  --editorial-soft: rgba(255, 255, 255, 0.2);
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background: #f1f2f5;
  color: #111116;
}

body[data-route="offers"] .offers-editorial-card.is-wide {
  grid-column: 1 / -1;
  aspect-ratio: 2.72 / 1;
}

body[data-route="offers"] .offers-editorial-card.promo-copy-light {
  --editorial-solid: rgba(10, 10, 14, 0.58);
  --editorial-soft: rgba(10, 10, 14, 0.18);
  color: #fff;
}

body[data-route="offers"] .offers-editorial-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  display: none;
  pointer-events: none;
}

body[data-route="offers"] .offers-editorial-card.promo-copy-start::after {
  background: linear-gradient(90deg, var(--editorial-solid), var(--editorial-soft) 32%, transparent 58%);
}

body[data-route="offers"] .offers-editorial-card.promo-copy-end::after {
  background: linear-gradient(270deg, var(--editorial-solid), var(--editorial-soft) 32%, transparent 58%);
}

body[data-route="offers"] .offers-editorial-card.promo-copy-center::after {
  background: linear-gradient(90deg, transparent 8%, var(--editorial-soft) 34%, var(--editorial-solid) 50%, var(--editorial-soft) 66%, transparent 92%);
}

body[data-route="offers"] .offers-editorial-card > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-route="offers"] .offers-editorial-card > span {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  right: 0;
  width: 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: right;
  text-shadow: none;
}

html[dir="rtl"] body[data-route="offers"] .offers-editorial-card > span {
  right: 0;
  left: auto;
  align-items: flex-start;
  text-align: right;
}

html[dir="ltr"] body[data-route="offers"] .offers-editorial-card > span {
  right: auto;
  left: 0;
  align-items: flex-start;
  text-align: left;
}

body[data-route="offers"] .offers-editorial-card.promo-copy-light > span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88), 0 3px 12px rgba(0, 0, 0, 0.56);
}

html[dir="rtl"] body[data-route="offers"] .offers-editorial-card.promo-copy-start > span,
html[dir="rtl"] body[data-route="offers"] .offers-editorial-card.promo-copy-end > span { right: 0; left: auto; }
html[dir="ltr"] body[data-route="offers"] .offers-editorial-card.promo-copy-start > span,
html[dir="ltr"] body[data-route="offers"] .offers-editorial-card.promo-copy-end > span { left: 0; right: auto; }

body[data-route="offers"] .offers-editorial-card.promo-copy-center > span {
  inset-inline: 0;
  width: 72%;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

body[data-route="offers"] .offers-editorial-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-route="offers"] .offers-editorial-card .promo-discount {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2px;
  color: inherit;
  white-space: nowrap;
}

html[dir="ltr"] body[data-route="offers"] .offers-editorial-card .promo-discount {
  flex-direction: row-reverse;
}

body[data-route="offers"] .offers-editorial-card .promo-discount-value {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  direction: ltr;
  color: inherit;
  font-weight: 950;
  line-height: 0.84;
}

body[data-route="offers"] .offers-editorial-card .promo-discount-side {
  display: inline-flex;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding-top: 1px;
  background: transparent;
}

body[data-route="offers"] .offers-editorial-card .promo-discount-number {
  font-size: 43px;
  font-weight: 950;
  line-height: 0.82;
  transform: translateY(3px);
}

body[data-route="offers"] .offers-editorial-card .promo-discount-symbol {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 0.9;
}

body[data-route="offers"] .offers-editorial-card .promo-discount-prefix {
  position: static;
  inset: auto;
  margin: 0;
  color: inherit;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
}

body[data-route="offers"] .offers-editorial-card em {
  display: none;
  overflow: hidden;
  color: inherit;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 550;
  line-height: 1.3;
  opacity: 0.84;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-route="offers"] .offers-editorial-card.is-wide > span {
  width: 48%;
  padding: 12px 10px;
}

body[data-route="offers"] .offers-editorial-card.is-wide strong {
  font-size: clamp(12px, 3vw, 18px);
}

body[data-route="offers"] .offers-editorial-card.is-wide .promo-discount-number {
  font-size: clamp(56px, 14vw, 68px);
  transform: translateY(4px);
}

body[data-route="offers"] .offers-editorial-card.is-wide .promo-discount-symbol {
  font-size: clamp(28px, 7vw, 36px);
}

body[data-route="offers"] .offers-editorial-card.is-wide .promo-discount-prefix {
  font-size: clamp(9px, 2vw, 11px);
}

@media (max-width: 640px) {
  body[data-route="offers"] #app .offers-experience {
    --offers-edge: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--offers-edge) !important;
  }

  body[data-route="offers"] #app .offers-experience > .offers-product-section.offers-product-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 8px 0 10px !important;
    justify-self: stretch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-grid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 292px !important;
    grid-template-rows: 132px minmax(121px, auto) 38px !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-media {
    height: 132px !important;
    min-height: 132px !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-body {
    height: 121px !important;
    min-height: 121px !important;
    max-height: 121px !important;
    grid-template-rows: 13px 34px 17px 22px 12px !important;
    gap: 2px !important;
    padding: 6px 7px 4px !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-body:has(.product-color-swatches) {
    height: 139px !important;
    min-height: 139px !important;
    max-height: 139px !important;
    grid-template-rows: 13px 34px 17px 20px 22px 12px !important;
  }

  body[data-route="offers"] #app .offers-product-section .product-actions {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 7px 6px !important;
  }

  body[data-route="offers"] #app .offers-product-section .add-button {
    height: 32px !important;
    min-height: 32px !important;
  }
}

@media (min-width: 760px) {
  body[data-route="offers"] .offers-editorial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-route="offers"] .offers-editorial-card.is-wide {
    grid-column: span 2;
  }
}

/* Home catalog stream: dashboard-led rails followed by incremental catalog loading. */
body[data-route="home"] .brand-showcase-section,
body[data-route="home"] #homeDeferred > .brand-showcase-section,
body[data-route="home"] #homeDeferred > .home-category-section,
body[data-route="home"] #homeDeferred > .home-catalog-stream {
  width: min(100% - 24px, 1180px) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 18px auto !important;
}

body[data-route="home"] .brand-showcase-section .section-head,
body[data-route="home"] .home-catalog-stream .section-head {
  align-items: flex-end !important;
}

body[data-route="home"] .brand-rail,
body[data-route="home"] .home-category-rail {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: inline proximity !important;
  scrollbar-width: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body[data-route="home"] .brand-rail::-webkit-scrollbar,
body[data-route="home"] .home-category-rail::-webkit-scrollbar {
  display: none !important;
}

body[data-route="home"] .brand-rail {
  grid-auto-columns: clamp(118px, 30vw, 148px) !important;
  gap: 11px !important;
  padding: 4px 3px 12px !important;
}

body[data-route="home"] .brand-rail > a,
body[data-route="home"] .home-category-rail > a {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
}

body[data-route="home"] .home-category-rail {
  grid-auto-columns: clamp(106px, 27vw, 132px) !important;
  gap: 10px !important;
  padding: 3px 3px 12px !important;
}

body[data-route="home"] .home-category-rail .quick-tile {
  min-height: 132px !important;
  display: grid !important;
  grid-template-rows: 88px auto !important;
  align-content: start !important;
  gap: 8px !important;
  border: 1px solid rgba(188, 165, 238, 0.14) !important;
  border-radius: 10px !important;
  background: var(--surface, #fff) !important;
  box-shadow: 0 8px 22px rgba(18, 18, 24, 0.055) !important;
  padding: 8px !important;
}

body[data-route="home"] .home-category-rail .quick-tile img {
  width: 100% !important;
  height: 88px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

body[data-route="home"] .home-category-rail .quick-tile span {
  min-height: 32px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.32 !important;
  text-align: center !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body[data-route="home"] .home-catalog-stream {
  padding-bottom: 16px !important;
  overflow-anchor: none !important;
}

body[data-route="home"] .home-catalog-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
  overflow-anchor: none !important;
}

body[data-route="home"] #homeDeferred > .home-catalog-stream {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

body[data-route="home"] .home-catalog-spacer {
  grid-column: 1 / -1;
  min-width: 0;
  pointer-events: none;
  contain: strict;
}

.home-catalog-sentinel {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.home-catalog-sentinel[hidden] {
  display: none !important;
}

.home-catalog-sentinel.is-complete {
  min-height: 72px;
  cursor: default;
  color: var(--muted);
  opacity: 0.72;
}

.home-catalog-sentinel.is-complete .home-catalog-spinner {
  display: none;
}

.home-catalog-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(181, 146, 235, 0.22);
  border-top-color: #7654ca;
  border-radius: 50%;
  animation: nion-spin .8s linear infinite;
  opacity: 0;
}

.home-catalog-sentinel.is-loading .home-catalog-spinner {
  opacity: 1;
}

.home-catalog-sentinel.has-error {
  cursor: pointer;
  color: #a33d58;
}

html[data-theme="dark"] body[data-route="home"] .home-category-rail .quick-tile {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #181820 !important;
  box-shadow: none !important;
}

@media (min-width: 760px) {
  body[data-route="home"] .home-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

/* Smart search: first-class brand matches stay compact and lead to the full brand catalogue. */
html[data-theme="dark"] .search-brand-match {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(27, 28, 38, 0.96);
  color: #f7f7fb;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .search-brand-match-logo {
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="dark"] .search-brand-match-copy small {
  color: rgba(247, 247, 251, 0.6);
}

/* Promotions workspace: campaign-led offers, fed directly by the dashboard. */
body[data-route="offers"] .offers-experience {
  --offers-edge: clamp(14px, 4vw, 24px);
  width: min(100%, 1120px);
  display: grid;
  gap: clamp(18px, 4vw, 28px);
  margin-inline: auto;
  padding: 4px var(--offers-edge) 30px;
}

/* Product detail uses its own commerce sections and sticky actions. */
body[data-route="product"] > .footer {
  display: none !important;
}

body[data-route="offers"] .offers-command-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 16px 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--text), transparent 88%);
}

body[data-route="offers"] .offers-command-head > div > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7654ca;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

body[data-route="offers"] .offers-command-head h1 {
  margin: 5px 0 4px;
  color: var(--text);
  font-size: clamp(25px, 6.8vw, 42px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

body[data-route="offers"] .offers-command-head p {
  max-width: 62ch;
  margin: 0;
  color: color-mix(in srgb, var(--text), transparent 42%);
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1.7;
}

body[data-route="offers"] .offers-command-head > strong {
  min-width: 66px;
  display: grid;
  justify-items: center;
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

body[data-route="offers"] .offers-command-head > strong small {
  margin-top: 5px;
  color: color-mix(in srgb, var(--text), transparent 48%);
  font-size: 10px;
  font-weight: 750;
}

body[data-route="offers"] .promotion-spotlight {
  min-width: 0;
}

body[data-route="offers"] .promotion-spotlight > a {
  position: relative;
  width: 100%;
  min-height: clamp(230px, 68vw, 470px);
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #ececf2;
  color: #fff;
  box-shadow: 0 18px 46px rgba(20, 16, 32, 0.12);
}

body[data-route="offers"] .promotion-spotlight img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
}

body[data-route="offers"] .promotion-spotlight-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 7, 11, 0.05) 0%, rgba(7, 7, 11, 0.15) 38%, rgba(7, 7, 11, 0.86) 100%),
    linear-gradient(0deg, rgba(7, 7, 11, 0.36), transparent 48%);
}

html[dir="ltr"] body[data-route="offers"] .promotion-spotlight-shade {
  background:
    linear-gradient(270deg, rgba(7, 7, 11, 0.05) 0%, rgba(7, 7, 11, 0.15) 38%, rgba(7, 7, 11, 0.86) 100%),
    linear-gradient(0deg, rgba(7, 7, 11, 0.36), transparent 48%);
}

body[data-route="offers"] .promotion-spotlight-copy {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(60%, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(22px, 6vw, 56px);
  text-align: start;
}

html[dir="ltr"] body[data-route="offers"] .promotion-spotlight-copy {
  inset-inline-start: 0;
  inset-inline-end: auto;
}

body[data-route="offers"] .promotion-spotlight-copy small {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111116;
  font-size: 11px;
  font-weight: 900;
}

body[data-route="offers"] .promotion-spotlight-copy strong {
  max-width: 15ch;
  margin-top: 10px;
  font-size: clamp(27px, 7.5vw, 58px);
  font-weight: 950;
  line-height: 1.04;
  text-wrap: balance;
}

body[data-route="offers"] .promotion-spotlight-copy p {
  max-width: 38ch;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(11px, 3.2vw, 15px);
  font-weight: 650;
  line-height: 1.55;
}

body[data-route="offers"] .promotion-spotlight-copy em {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

body[data-route="offers"] .promotion-rail {
  width: calc(100% + (var(--offers-edge) * 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 292px);
  gap: 9px;
  margin-inline: calc(var(--offers-edge) * -1);
  padding-inline: var(--offers-edge);
  padding-bottom: 3px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

body[data-route="offers"] .promotion-rail::-webkit-scrollbar,
body[data-route="offers"] .promotion-product-track::-webkit-scrollbar {
  display: none;
}

body[data-route="offers"] .promotion-rail > a {
  min-width: 0;
  min-height: 100px;
  display: grid;
  align-content: center;
  gap: 4px;
  scroll-snap-align: start;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 88%);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(22, 20, 30, 0.045);
}

body[data-route="offers"] .promotion-rail > a.is-current {
  border-color: rgba(118, 84, 202, 0.42);
  background: linear-gradient(135deg, rgba(108, 222, 210, 0.12), rgba(186, 133, 237, 0.15), rgba(244, 128, 183, 0.09));
}

body[data-route="offers"] .promotion-rail span {
  color: #7654ca;
  font-size: 10px;
  font-weight: 900;
}

body[data-route="offers"] .promotion-rail strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="offers"] .promotion-rail small {
  overflow: hidden;
  color: color-mix(in srgb, var(--text), transparent 48%);
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="offers"] .promotion-gallery,
body[data-route="offers"] .promotion-product-shelf {
  min-width: 0;
}

body[data-route="offers"] .promotion-gallery > header,
body[data-route="offers"] .promotion-product-shelf > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
}

body[data-route="offers"] .promotion-gallery header small,
body[data-route="offers"] .promotion-product-shelf header small {
  color: #7654ca;
  font-size: 10px;
  font-weight: 900;
}

body[data-route="offers"] .promotion-gallery header h2,
body[data-route="offers"] .promotion-product-shelf header h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: clamp(20px, 5vw, 29px);
  font-weight: 900;
  line-height: 1.15;
}

body[data-route="offers"] .promotion-product-shelf header p {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--text), transparent 50%);
  font-size: 10px;
  font-weight: 650;
}

body[data-route="offers"] .promotion-product-shelf header > a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7654ca;
  font-size: 11px;
  font-weight: 850;
}

body[data-route="offers"] .promotion-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body[data-route="offers"] .promotion-gallery-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #eeeef3;
  color: #fff;
}

body[data-route="offers"] .promotion-gallery-card.is-wide {
  grid-column: 1 / -1;
  aspect-ratio: 2.2 / 1;
}

body[data-route="offers"] .promotion-gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-route="offers"] .promotion-gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 7, 11, 0.76), rgba(7, 7, 11, 0.02) 62%);
}

body[data-route="offers"] .promotion-gallery-card > span {
  position: absolute;
  z-index: 1;
  inset-inline: 13px;
  inset-block-end: 13px;
  display: grid;
  gap: 3px;
}

body[data-route="offers"] .promotion-gallery-card small {
  font-size: 9px;
  font-weight: 900;
}

body[data-route="offers"] .promotion-gallery-card strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(15px, 4vw, 23px);
  font-weight: 900;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-route="offers"] .promotion-product-track {
  width: calc(100% + (var(--offers-edge) * 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(46vw, 214px);
  gap: 9px;
  margin-inline: calc(var(--offers-edge) * -1);
  padding: 2px var(--offers-edge) 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

body[data-route="offers"] .promotion-product-track .product-card {
  width: 100% !important;
  min-width: 0 !important;
  scroll-snap-align: start;
}

body[data-route="offers"] .promotion-product-shelf.is-tinted {
  width: calc(100% + (var(--offers-edge) * 2));
  margin-inline: calc(var(--offers-edge) * -1);
  padding: 18px var(--offers-edge) 13px;
  background: color-mix(in srgb, #bca5ee 7%, var(--bg));
}

.promotion-collection-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--text), transparent 88%);
}

.promotion-collection-head > a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--text), transparent 86%);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
}

.promotion-collection-head small {
  color: #7654ca;
  font-size: 10px;
  font-weight: 900;
}

.promotion-collection-head h1 {
  margin: 3px 0;
  color: var(--text);
  font-size: clamp(21px, 5.8vw, 32px);
  line-height: 1.12;
}

.promotion-collection-head p {
  margin: 0;
  color: color-mix(in srgb, var(--text), transparent 48%);
  font-size: 10px;
  line-height: 1.45;
}

.promotion-collection-head > strong {
  min-width: 54px;
  display: grid;
  justify-items: center;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.promotion-collection-head > strong span {
  margin-top: 4px;
  color: color-mix(in srgb, var(--text), transparent 50%);
  font-size: 9px;
  font-weight: 700;
}

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

html[data-theme="dark"] body[data-route="offers"] .offers-command-head {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] body[data-route="offers"] .offers-page-head {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 18% 10%, rgba(102, 226, 196, 0.11), transparent 34%),
    radial-gradient(circle at 82% 4%, rgba(170, 138, 244, 0.14), transparent 36%),
    #121219;
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="offers"] .offers-page-head h1 {
  color: #f7f7fb;
}

html[data-theme="dark"] body[data-route="offers"] .offers-page-head p {
  color: rgba(247, 247, 251, 0.62);
}

html[data-theme="dark"] body[data-route="offers"] .promotion-rail > a {
  border-color: rgba(255, 255, 255, 0.08);
  background: #181820;
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="offers"] .promotion-rail > a.is-current {
  border-color: rgba(157, 120, 238, 0.5);
  background: linear-gradient(135deg, rgba(73, 185, 177, 0.16), rgba(132, 84, 208, 0.2), rgba(184, 79, 127, 0.12));
}

html[data-theme="dark"] body[data-route="offers"] .promotion-product-shelf.is-tinted {
  background: #111117;
}

html[data-theme="dark"] .promotion-collection-head,
html[data-theme="dark"] .promotion-collection-head > a {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .promotion-collection-head > a {
  background: #181820;
}

@media (max-width: 520px) {
  body[data-route="offers"] .promotion-spotlight > a {
    min-height: 252px;
  }

  body[data-route="offers"] .promotion-spotlight-copy {
    width: 69%;
    padding: 20px;
  }

  body[data-route="offers"] .promotion-spotlight-copy strong {
    font-size: clamp(25px, 8.4vw, 37px);
  }

  body[data-route="offers"] .promotion-spotlight-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 760px) {
  body[data-route="offers"] .promotion-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-route="offers"] .promotion-gallery-card.is-wide {
    grid-column: span 2;
  }

  body[data-route="offers"] .promotion-product-track {
    grid-auto-columns: min(24vw, 218px);
    gap: 13px;
  }

  .promotion-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .search-brand-match-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .search-brand-match {
    min-height: 64px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    border-radius: 15px;
  }
}

/* Featured product shelf: dashboard banner + swipeable products in one branded band. */
body[data-route="home"] .home-featured-collection {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 32px), 1180px);
  margin: 22px auto;
  padding: 0 0 14px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #67b8df;
  box-shadow: none;
  content-visibility: auto;
  contain-intrinsic-size: 1px 650px;
}

.section-brand-load-more {
  width: min(220px, calc(100% - 24px));
  min-height: 42px;
  margin: 12px auto 22px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--primary, #8d5bea) 30%, transparent);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #17171c);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

html[data-theme="dark"] .section-brand-load-more {
  background: rgba(24, 24, 31, 0.94);
  color: #f7f7fb;
}

body[data-route="home"] .home-featured-collection::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 116, 164, 0.02) 0%, rgba(49, 155, 207, 0.22) 42%, rgba(38, 135, 185, 0.72) 100%);
}

body[data-route="home"] .home-featured-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body[data-route="home"] .home-featured-backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body[data-route="home"] .home-featured-banner {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 2.55 / 1;
  overflow: hidden;
  color: #11131a;
  text-decoration: none;
  background: transparent;
}

body[data-route="home"] .home-featured-banner-copy {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline: 0;
  width: min(72%, 520px);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 5px;
  transform: translateY(-50%);
  text-align: center;
  color: #0d1720;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.72);
}

body[data-route="home"] .home-featured-banner-copy strong {
  font-size: clamp(22px, 4.1vw, 48px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-route="home"] .home-featured-banner-copy em {
  font-size: clamp(12px, 1.7vw, 19px);
  line-height: 1.35;
  font-style: normal;
  font-weight: 650;
}

body[data-route="home"] .home-featured-products.rail {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0 12px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  background: transparent;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body[data-route="home"] .home-featured-products.rail::-webkit-scrollbar {
  display: none;
}

body[data-route="home"] .home-featured-products.rail .product-card {
  flex: 0 0 clamp(174px, 42vw, 214px);
  scroll-snap-align: start;
  border-color: rgba(255, 255, 255, 0.56);
  background: #fff;
  box-shadow: 0 8px 20px rgba(23, 93, 132, 0.09);
}

body[data-route="home"] .home-featured-more {
  position: relative;
  z-index: 2;
  min-height: 32px;
  margin: 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: #101218;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

html[dir="ltr"] body[data-route="home"] .home-featured-banner-copy {
  inset-inline: 0;
}

html[dir="ltr"] body[data-route="home"] .home-featured-more .nion-icon {
  transform: scaleX(-1);
}

html[data-theme="dark"] body[data-route="home"] .home-featured-collection {
  background: #245e7a;
}

html[data-theme="dark"] body[data-route="home"] .home-featured-collection::after {
  background: linear-gradient(180deg, rgba(3, 10, 18, 0.18) 0%, rgba(8, 24, 37, 0.42) 46%, rgba(7, 17, 27, 0.84) 100%);
}

html[data-theme="dark"] body[data-route="home"] .home-featured-backdrop img {
  filter: brightness(0.78) saturate(0.9);
}

html[data-theme="dark"] body[data-route="home"] .home-featured-banner-copy {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.54);
}

html[data-theme="dark"] body[data-route="home"] .home-featured-products.rail .product-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: #11121a;
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="home"] .home-featured-more {
  color: #fff;
}

/* Dashboard-managed care and brand campaigns below the featured shelf. */
body[data-route="home"] .featured-followup {
  display: grid;
  gap: 12px;
}

body[data-route="home"] .featured-followup .section-head {
  margin-bottom: 0;
}

body[data-route="home"] .featured-followup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-route="home"] .featured-followup-card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1.32 / 1;
  overflow: hidden;
  border: 1px solid rgba(22, 27, 38, 0.08);
  border-radius: 8px;
  color: #11131a;
  background: #f5f5f7;
  text-decoration: none;
  isolation: isolate;
}

body[data-route="home"] .featured-followup-card > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms ease;
}

body[data-route="home"] .featured-followup-card:hover > img {
  transform: scale(1.025);
}

body[data-route="home"] .featured-followup-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.08) 58%);
  pointer-events: none;
}

body[data-route="home"] .featured-followup-copy {
  position: absolute;
  z-index: 2;
  inset-inline-end: 9px;
  width: min(68%, 128px);
  inset-block-end: 8px;
  display: grid;
  align-items: flex-end;
  justify-items: end;
  gap: 2px;
  color: inherit;
  text-align: end;
}

body[data-route="home"] .featured-followup-copy > strong {
  width: 100%;
  font-size: clamp(12px, 2.8vw, 18px);
  line-height: 1.2;
  font-weight: 850;
  text-align: end;
}

body[data-route="home"] .featured-followup-copy .promo-discount {
  display: inline-flex;
  margin: 0;
  color: inherit;
  direction: ltr;
  line-height: 1;
  unicode-bidi: isolate;
  white-space: nowrap;
}

body[data-route="home"] .featured-followup-copy .promo-discount-value {
  display: inline-flex;
  align-items: flex-end;
  direction: ltr;
  gap: 1px;
}

body[data-route="home"] .featured-followup-copy .promo-discount-number {
  font-size: clamp(39px, 9.7vw, 54px);
  font-weight: 950;
  line-height: 0.82;
  letter-spacing: 0;
}

body[data-route="home"] .featured-followup-copy .promo-discount-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  padding-block-end: 1px;
}

body[data-route="home"] .featured-followup-copy .promo-discount-prefix {
  margin: 0;
  color: inherit;
  font-size: clamp(7px, 1.9vw, 10px);
  font-weight: 650;
  line-height: 1;
}

body[data-route="home"] .featured-followup-copy .promo-discount-symbol {
  margin: 0;
  font-size: clamp(18px, 4.8vw, 27px);
  font-weight: 950;
  line-height: 0.86;
}

body[data-route="home"] .featured-followup-rail {
  display: flex;
  gap: 9px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 5px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

body[data-route="home"] .featured-followup-rail::-webkit-scrollbar {
  display: none;
}

body[data-route="home"] .featured-followup-card-compact {
  flex: 0 0 clamp(132px, 37vw, 182px);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
}

body[data-route="home"] .featured-followup-card-compact .featured-followup-copy {
  inset-inline-end: 7px;
  inset-block-end: 7px;
  width: min(72%, 104px);
}

body[data-route="home"] .featured-followup-card-compact .featured-followup-copy > strong {
  font-size: clamp(11px, 2.6vw, 15px);
}

body[data-route="home"] .featured-followup-card-compact .promo-discount-number {
  font-size: clamp(32px, 8.2vw, 43px);
}

body[data-route="home"] .featured-followup-card-compact .promo-discount-prefix {
  font-size: clamp(7px, 1.7vw, 9px);
}

body[data-route="home"] .featured-followup-card-compact .promo-discount-symbol {
  font-size: clamp(16px, 4vw, 22px);
}

html[data-theme="dark"] body[data-route="home"] .featured-followup-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #11131a;
}

html[data-theme="dark"] body[data-route="home"] .featured-followup-shade {
  background: linear-gradient(0deg, rgba(6, 8, 13, 0.84) 0%, rgba(6, 8, 13, 0.02) 62%);
}

html[data-theme="dark"] body[data-route="home"] .featured-followup-copy {
  color: #fff;
}

@media (min-width: 760px) {
  body[data-route="home"] .featured-followup-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-route="home"] .home-featured-collection {
    width: min(calc(100% - 22px), 440px);
    margin-block: 17px;
    padding-bottom: 11px;
  }

  body[data-route="home"] .home-featured-banner {
    aspect-ratio: 2.06 / 1;
  }

  body[data-route="home"] .home-featured-banner-copy {
    inset-inline: 0;
    width: min(78%, 290px);
    gap: 4px;
  }

  html[dir="ltr"] body[data-route="home"] .home-featured-banner-copy {
    inset-inline: 0;
  }

  body[data-route="home"] .home-featured-banner-copy strong {
    font-size: clamp(25px, 7.3vw, 31px);
    line-height: 1.06;
  }

  body[data-route="home"] .home-featured-banner-copy em {
    font-size: 12px;
    line-height: 1.32;
  }

  body[data-route="home"] .home-featured-products.rail {
    gap: 9px;
    padding: 0 10px 12px;
  }

  body[data-route="home"] .home-featured-products.rail .product-card {
    flex-basis: min(47vw, 184px);
  }

  body[data-route="home"] .home-featured-more {
    margin-inline: 12px;
    font-size: 13px;
  }
}

/* Final media stack guard for every storefront product card. */
.product-card .product-media {
  isolation: isolate !important;
}

.product-card .product-media > img {
  position: relative !important;
  z-index: 0 !important;
}

.product-card .product-media > :is(.sale-badge, .fav-button) {
  z-index: 5 !important;
}

/* Keep the home hero blend compact so the campaign artwork stays visible. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-slide-link::before,
  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::before {
    display: none !important;
    content: none !important;
  }

  body[data-route="home"] .hero-slide-link::after {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0 66%,
      rgba(255, 255, 255, .16) 74%,
      rgba(255, 255, 255, .76) 91%,
      #fff 100%
    ) !important;
  }

  html[data-theme="dark"] body[data-route="home"] .hero-slide-link::after {
    background: linear-gradient(
      180deg,
      rgba(13, 13, 18, 0) 0 66%,
      rgba(13, 13, 18, .16) 74%,
      rgba(13, 13, 18, .76) 91%,
      #0d0d12 100%
    ) !important;
  }
}

/* Dashboard shortcut PNGs: preserve alpha and clip only the visual corners. */
@media (max-width: 640px) {
  body[data-route="home"] .hero-icon-item > span,
  html[data-theme="dark"] body[data-route="home"] .hero-icon-item > span {
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .hero-icon-item > span > img,
  html[data-theme="dark"] body[data-route="home"] .hero-icon-item > span > img {
    display: block !important;
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* Canonical category tree: compact, recursive, and shared with the API hierarchy. */
.section-category-accordion{display:grid;gap:10px;padding:2px 0 10px}.section-category-group,.section-category-leaf{border:1px solid var(--line,#e8e8ed);border-radius:8px;background:var(--surface,#fff);overflow:hidden}.section-category-group>summary,.section-category-leaf{min-height:64px;display:grid;grid-template-columns:46px minmax(0,1fr) auto 22px;align-items:center;gap:10px;padding:8px 10px;color:var(--text,#17171b);text-decoration:none}.section-category-group>summary{cursor:pointer;list-style:none}.section-category-group>summary::-webkit-details-marker{display:none}.section-category-group-image,.section-category-leaf-image{width:46px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--surface-soft,#f5f5f7)}.section-category-group-image img,.section-category-leaf-image img{width:100%;height:100%;object-fit:cover}.section-category-group strong,.section-category-leaf strong{min-width:0;font-size:14px;line-height:1.45}.section-category-group small{color:var(--muted,#777781);font-size:11px;white-space:nowrap}.section-category-group-chevron,.section-category-leaf-arrow{display:grid;place-items:center;transition:transform .2s ease}.section-category-group[open]>summary .section-category-group-chevron{transform:rotate(180deg)}.section-category-children{display:grid;gap:7px;padding:0 10px 10px;border-top:1px solid var(--line,#e8e8ed)}.section-category-children>:first-child{margin-top:10px}.section-category-children .section-category-group,.section-category-children .section-category-leaf{background:var(--surface-soft,#f7f7f9)}.section-category-children .section-category-children{margin-inline-start:14px}[dir="ltr"] .section-category-leaf-arrow{transform:rotate(180deg)}html[data-theme="dark"] .section-category-group,html[data-theme="dark"] .section-category-leaf{border-color:#292930;background:#111115}html[data-theme="dark"] .section-category-group-image,html[data-theme="dark"] .section-category-leaf-image,html[data-theme="dark"] .section-category-children .section-category-group,html[data-theme="dark"] .section-category-children .section-category-leaf{background:#18181e}

.section-category-direct-link{min-height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto 18px;align-items:center;gap:7px;padding:7px 10px;border:1px dashed var(--line,#e8e8ed);border-radius:7px;color:var(--text,#17171b);background:var(--surface,#fff);text-decoration:none}.section-category-direct-link span{font-size:11px;color:var(--accent,#7f65d8);font-weight:800}.section-category-direct-link strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-category-direct-link small{font-size:10px;color:var(--muted,#777781)}[dir="ltr"] .section-category-direct-link svg{transform:rotate(180deg)}html[data-theme="dark"] .section-category-direct-link{background:#111115;border-color:#35353d}


/* Canonical taxonomy: compact expandable groups with circular visual children. */
body[data-route="section"] .section-panel-subtitle {
  margin: 0 0 6px;
}
body[data-route="section"] .section-panel-subtitle strong {
  font-size: 17px;
  line-height: 24px;
}
body[data-route="section"] .section-category-accordion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px 8px;
  padding: 0 0 10px;
}
body[data-route="section"] .section-category-group {
  grid-column: 1 / -1;
  border: 0;
  border-bottom: 1px solid var(--line, #e8e8ed);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body[data-route="section"] .section-category-group > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  color: var(--text, #17171b);
  cursor: pointer;
  list-style: none;
}
body[data-route="section"] .section-category-group > summary::-webkit-details-marker {
  display: none;
}
body[data-route="section"] .section-category-group > summary strong {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 750;
  text-align: start;
}
body[data-route="section"] .section-category-group-chevron {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--muted, #777781);
  transition: transform .18s ease;
}
body[data-route="section"] .section-category-group[open] > summary .section-category-group-chevron {
  transform: rotate(180deg);
}
body[data-route="section"] .section-category-children {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 8px;
  padding: 10px 2px 13px;
  border-top: 1px solid var(--line, #e8e8ed);
}
body[data-route="section"] .section-category-children > :first-child {
  margin-top: 0;
}
body[data-route="section"] .section-category-children > .section-category-group {
  grid-column: 1 / -1;
}
body[data-route="section"] .section-category-leaf {
  min-width: 0;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text, #17171b);
  text-align: center;
  text-decoration: none;
  overflow: visible;
}
body[data-route="section"] .section-category-leaf-image {
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-soft, #f5f5f7);
}
body[data-route="section"] .section-category-leaf-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-route="section"] .section-category-leaf strong {
  width: 100%;
  min-width: 0;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 650;
  text-align: center;
  overflow-wrap: anywhere;
}
body[data-route="section"] .section-category-direct-link {
  grid-column: 1 / -1;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 6px;
}
body[data-route="section"] .section-category-direct-link strong {
  flex: 1;
  font-size: 11px;
}
.category-coming-soon {
  min-height: 180px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  padding: 28px 16px;
  color: var(--muted, #777781);
  text-align: center;
}
.category-coming-soon > span {
  width: 34px;
  height: 34px;
  border: 2px solid var(--accent, #8367db);
  border-radius: 50%;
  opacity: .72;
  box-shadow: 0 0 0 6px rgba(131, 103, 219, .09);
}
.category-coming-soon > strong {
  max-width: 260px;
  color: var(--text, #17171b);
  font-size: 13px;
  line-height: 20px;
  font-weight: 750;
}
html[data-theme="dark"] body[data-route="section"] .section-category-group {
  border-color: #292930;
  background: transparent;
}
html[data-theme="dark"] body[data-route="section"] .section-category-leaf,
html[data-theme="dark"] body[data-route="section"] .section-category-children .section-category-leaf {
  background: transparent;
}
html[data-theme="dark"] body[data-route="section"] .section-category-leaf-image {
  background: #18181e;
}
html[data-theme="dark"] .category-coming-soon > strong {
  color: #f4f4f6;
}
@media (max-width: 760px) {
  body[data-route="section"] .section-category-accordion,
  body[data-route="section"] .section-category-children {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-route="section"] .section-category-children {
    gap: 11px 6px;
    padding: 9px 0 12px;
  }
  body[data-route="section"] .section-category-leaf-image {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
  body[data-route="section"] .section-category-leaf {
    min-height: 80px;
  }
}


/* Home product rails: keep two full cards plus a quarter-card discovery cue. */
@media (max-width: 640px) {
  body[data-route="home"] :is(.home-primary-rail, .home-product-rail):not(.home-all-products-preview) > .rail,
  body[data-route="home"] .home-featured-products.rail {
    --home-product-rail-gap: 10px;
    grid-auto-columns: calc((100% - (2 * var(--home-product-rail-gap))) / 2.25) !important;
    gap: var(--home-product-rail-gap) !important;
    scroll-snap-type: inline proximity !important;
  }

  body[data-route="home"] :is(.home-primary-rail, .home-product-rail):not(.home-all-products-preview) > .rail > .product-card,
  body[data-route="home"] .home-featured-products.rail > .product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
  }
}

/* Category navigation follows the document vertically and remembers only its
   horizontal browsing position. It must never pin itself over product cards. */
body[data-route="category"] .category-sibling-strip,
html[dir="rtl"] body[data-route="category"] .category-sibling-strip,
html[dir="ltr"] body[data-route="category"] .category-sibling-strip {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  z-index: 1 !important;
  transform: none !important;
  backface-visibility: visible !important;
}

/* A cached category page is reattached before the next paint. Temporarily
   calculate its real height so the browser can restore the exact viewport
   immediately instead of clamping it and visibly jumping afterward. */
body[data-route="category"] [data-category-results],
body[data-route="category"] .product-grid {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

body[data-route="category"] #app,
body[data-route="category"] [data-category-page] {
  overflow-anchor: none !important;
}

html.is-route-scroll-releasing,
html.is-route-scroll-releasing body {
  overflow-anchor: none !important;
}

/* Availability subscriptions: keep the out-of-stock action as prominent as Add to cart. */
.availability-alert-button {
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.availability-alert-button > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.availability-alert-button.is-subscribed {
  background: #151419;
  color: #fff;
  border-color: rgba(105, 224, 208, 0.5);
}

.product-card .availability-alert-button {
  padding-inline: 10px;
  font-size: 12px;
}

html[data-theme="dark"] .availability-alert-button.is-subscribed {
  background: #f7f7fa;
  color: #121116;
  border-color: rgba(180, 137, 255, 0.5);
}

/* Campaign placement is authored as a physical image position in the
   dashboard. Changing language must only change copy direction, never move
   the copy to the other side of the artwork. */
html[dir="rtl"] body #app .promo-showcase .promo-card.promo-copy-start > .promo-card-copy,
html[dir="rtl"] body #app .promo-showcase .promo-card.promo-copy-end > .promo-card-copy,
html[dir="ltr"] body #app .promo-showcase .promo-card.promo-copy-start > .promo-card-copy,
html[dir="ltr"] body #app .promo-showcase .promo-card.promo-copy-end > .promo-card-copy {
  inset-inline: auto !important;
  right: 0 !important;
  left: auto !important;
  text-align: right !important;
  align-items: flex-end !important;
}

/* Launch performance: retain the liquid-glass look without stacking several
   expensive 38-48px GPU blur passes on every mobile frame. */
@media (max-width: 640px) {

  .category-sibling-strip,
  .category-sibling-track a,
  .section-hub-tabs,
  .section-hub-tabs a,
  .quick-tile,
  .toast {
    backdrop-filter: blur(12px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html[dir="rtl"] body #app .promo-showcase .promo-card-copy {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

html[dir="ltr"] body #app .promo-showcase .promo-card-copy {
  direction: ltr !important;
  text-align: right !important;
  align-items: flex-end !important;
}

html body[data-route="offers"] .offers-editorial-card.promo-copy-start > span,
html body[data-route="offers"] .offers-editorial-card.promo-copy-end > span {
  right: 0 !important;
  left: auto !important;
}

html[dir="rtl"] body[data-route="offers"] .offers-editorial-card > span {
  direction: rtl !important;
  text-align: right !important;
  align-items: flex-end !important;
}

html[dir="ltr"] body[data-route="offers"] .offers-editorial-card > span {
  direction: ltr !important;
  text-align: right !important;
  align-items: flex-end !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] .hero-copy-start {
    left: 22px !important;
    right: auto !important;
  }

  html body[data-route="home"] .hero-copy-end {
    right: 22px !important;
    left: auto !important;
  }

  html body[data-route="home"] .hero-copy-center {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Image copy has one physical anchor in every locale. Arabic, English and
   Kurdish may change glyph direction, but never move copy around the image. */
html body #app .promo-showcase .promo-card > .promo-card-copy,
html body #app .promo-showcase .promo-card.promo-copy-start > .promo-card-copy,
html body #app .promo-showcase .promo-card.promo-copy-center > .promo-card-copy,
html body #app .promo-showcase .promo-card.promo-copy-end > .promo-card-copy {
  inset: 0 0 auto auto !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  text-align: right !important;
}

html body[data-route="home"] .home-featured-banner-copy {
  inset: clamp(12px, 3vw, 24px) clamp(12px, 3vw, 24px) auto auto !important;
  width: min(72%, 520px) !important;
  margin: 0 !important;
  transform: none !important;
  justify-items: end !important;
  text-align: right !important;
}

html body[data-route="home"] .editorial-promo-copy,
html body[data-route="offers"] .offers-card-copy,
html body[data-route="offers"] .offers-editorial-card > span,
html body[data-route="offers"] .offers-editorial-card.promo-copy-start > span,
html body[data-route="offers"] .offers-editorial-card.promo-copy-center > span,
html body[data-route="offers"] .offers-editorial-card.promo-copy-end > span {
  inset: 0 0 auto auto !important;
  right: 0 !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] body #app :is(.hero-campaign-copy, .promo-card-copy, .home-featured-banner-copy, .editorial-promo-copy, .offers-card-copy, .offers-editorial-card > span) {
  direction: rtl !important;
}

html[dir="ltr"] body #app :is(.hero-campaign-copy, .promo-card-copy, .home-featured-banner-copy, .editorial-promo-copy, .offers-card-copy, .offers-editorial-card > span) {
  direction: ltr !important;
}


/* Final fixed image-copy contract: the physical anchor never follows locale. */
html body #app .promo-card-copy > *,
html body #app .home-featured-banner-copy > *,
html body #app .editorial-promo-copy > *,
html body #app .offers-card-copy > *,
html body #app .offers-editorial-card > span > * {
  max-width: 100% !important;
  margin-inline: 0 !important;
  align-self: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] body #app .promo-card-copy,
html[dir="rtl"] body #app .home-featured-banner-copy,
html[dir="rtl"] body #app .editorial-promo-copy,
html[dir="rtl"] body #app .offers-card-copy,
html[dir="rtl"] body #app .offers-editorial-card > span {
  direction: rtl !important;
}

html[dir="ltr"] body #app .promo-card-copy,
html[dir="ltr"] body #app .home-featured-banner-copy,
html[dir="ltr"] body #app .editorial-promo-copy,
html[dir="ltr"] body #app .offers-card-copy,
html[dir="ltr"] body #app .offers-editorial-card > span {
  direction: ltr !important;
}


/* Hero keeps its established campaign composition. Only the offer artwork
   below the hero uses the fixed top-right copy contract above. */
@media (max-width: 640px) {
  html body[data-route="home"] .hero-campaign-copy {
    top: clamp(128px, 31vw, 148px) !important;
    bottom: auto !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-campaign-copy {
    direction: rtl !important;
    text-align: right !important;
    align-items: flex-end !important;
    justify-items: end !important;
  }

  html[dir="rtl"] body[data-route="home"] .hero-campaign-copy > * {
    align-self: flex-end !important;
    text-align: right !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-campaign-copy {
    direction: ltr !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
  }

  html[dir="ltr"] body[data-route="home"] .hero-campaign-copy > * {
    align-self: flex-start !important;
    text-align: left !important;
  }
}


/* Final internal-banner contract. The home hero is intentionally excluded. */
html body #app .promo-showcase .promo-card > .promo-card-copy,
html body[data-route="home"] #app .home-featured-banner-copy,
html body[data-route="home"] #app .editorial-promo-copy,
html body[data-route="offers"] #app .offers-card-copy,
html body[data-route="offers"] #app .offers-editorial-card > span,
html body[data-route="offers"] #app .offers-picks-feature > a > span,
html body[data-route="offers"] #app .promotion-spotlight-copy,
html body[data-route="offers"] #app .promotion-gallery-card > span {
  position: absolute !important;
  inset: clamp(8px, 2.4vw, 16px) clamp(8px, 2.4vw, 16px) auto auto !important;
  top: clamp(8px, 2.4vw, 16px) !important;
  right: clamp(8px, 2.4vw, 16px) !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: min(62%, 360px) !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  align-content: start !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  justify-items: end !important;
  text-align: right !important;
  z-index: 3 !important;
}

html body[data-route="home"] #app .home-featured-banner-copy,
html body[data-route="offers"] #app .promotion-spotlight-copy {
  width: auto !important;
  max-width: min(72%, 520px) !important;
}

html body[data-route="offers"] #app .offers-editorial-card.is-wide > span,
html body[data-route="offers"] #app .promotion-gallery-card.is-wide > span {
  width: auto !important;
  max-width: min(56%, 430px) !important;
}

html body #app .promo-showcase .promo-card > .promo-card-copy > *,
html body[data-route="home"] #app .home-featured-banner-copy > *,
html body[data-route="home"] #app .editorial-promo-copy > *,
html body[data-route="offers"] #app .offers-card-copy > *,
html body[data-route="offers"] #app .offers-editorial-card > span > *,
html body[data-route="offers"] #app .offers-picks-feature > a > span > *,
html body[data-route="offers"] #app .promotion-spotlight-copy > *,
html body[data-route="offers"] #app .promotion-gallery-card > span > * {
  max-width: 100% !important;
  margin-inline: 0 !important;
  align-self: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] body #app :is(.promo-card-copy, .home-featured-banner-copy, .editorial-promo-copy, .offers-card-copy, .offers-editorial-card > span, .offers-picks-feature > a > span, .promotion-spotlight-copy, .promotion-gallery-card > span) {
  direction: rtl !important;
}

html[dir="ltr"] body #app :is(.promo-card-copy, .home-featured-banner-copy, .editorial-promo-copy, .offers-card-copy, .offers-editorial-card > span, .offers-picks-feature > a > span, .promotion-spotlight-copy, .promotion-gallery-card > span) {
  direction: ltr !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .promo-card-square > .promo-card-copy,
  html body[data-route="offers"] #app .offers-editorial-card:not(.is-wide) > span,
  html body[data-route="offers"] #app .promotion-gallery-card:not(.is-wide) > span {
    width: auto !important;
    max-width: 68% !important;
  }
}


/* Mobile campaign copy: fixed physical top-right anchor. */
@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy {
    inset: 11px 11px auto auto !important;
    inset-block: 11px auto !important;
    inset-inline: auto 11px !important;
    top: 11px !important;
    right: 11px !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: calc(100% - 22px) !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
    overflow: visible !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy > *,
  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy strong,
  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy .promo-discount {
    width: max-content !important;
    max-width: 100% !important;
    align-self: flex-end !important;
    text-align: right !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy strong {
    display: block !important;
    overflow: visible !important;
    padding-block: 1px !important;
    font-size: 11px !important;
    line-height: 1.22 !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy {
    inset: 10px 10px auto auto !important;
    inset-block: 10px auto !important;
    inset-inline: auto 10px !important;
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy strong {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square .promo-discount-number {
    font-size: 40px !important;
    line-height: 0.9 !important;
    transform: none !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square .promo-discount-symbol {
    font-size: 18px !important;
    line-height: 0.95 !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square .promo-discount-prefix {
    font-size: 7.5px !important;
    line-height: 1.05 !important;
  }
}


/* Product packshots use a neutral white canvas in every theme. */
html body[data-route="product"] #app :is(.detail-media, .detail-slider, .detail-track, .detail-slide),
html[data-theme="dark"] body[data-route="product"] #app :is(.detail-media, .detail-slider, .detail-track, .detail-slide) {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

html body[data-route="product"] #app .detail-slide img,
html[data-theme="dark"] body[data-route="product"] #app .detail-slide img {
  background: #fff !important;
}

/* Dashboard-owned brand offers: 3-slide hero, 2 square stories and a category rail. */
html body #app .brand-offers-showcase {
  display: grid !important;
  gap: 10px !important;
  margin-block: 0 !important;
}

html body #app .brand-offers-showcase .section-head {
  margin-block-end: 1px !important;
}

html body #app :is(.brand-offers-hero-track, .brand-offers-category-track) {
  display: flex !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: inline mandatory !important;
  scrollbar-width: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Horizontal commerce rails claim sideways drags only. A vertical gesture
   that starts over a card continues scrolling the page on Safari and Android. */
@media (max-width: 760px) {
  html body #app :is(
    .home-primary-rail > .rail,
    .home-product-rail > .rail,
    .home-featured-products.rail,
    .brand-offers-hero-track,
    .brand-offers-category-track
  ) {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-y: auto !important;
  }
}

html body #app :is(.brand-offers-hero-track, .brand-offers-category-track)::-webkit-scrollbar {
  display: none !important;
}

html body #app .brand-offers-hero-track {
  gap: 10px !important;
}

html body #app .brand-offer-card {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 22, 30, 0.07) !important;
  border-radius: 8px !important;
  background: #f7f8fa !important;
  box-shadow: 0 6px 18px rgba(26, 28, 38, 0.07) !important;
  isolation: isolate !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

html body #app .brand-offer-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.14) 47%, rgba(255, 255, 255, 0) 76%) !important;
}

html body #app .brand-offer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

html body #app .brand-offer-hero {
  flex: 0 0 100% !important;
  aspect-ratio: 2.65 / 1 !important;
}

html body #app .brand-offers-square-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body #app .brand-offer-square {
  aspect-ratio: 1 / 1 !important;
}

html body #app .brand-offer-copy {
  position: absolute !important;
  z-index: 3 !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: max-content !important;
  max-width: 53% !important;
  color: #101015 !important;
  text-align: right !important;
}

html body #app .brand-offer-copy strong {
  max-width: 100% !important;
  font-size: clamp(12px, 3vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

html body #app .brand-offer-copy .promo-discount {
  margin-block-start: 2px !important;
}

html body #app .brand-offer-copy .promo-discount-number {
  font-size: clamp(46px, 12vw, 72px) !important;
  line-height: 0.88 !important;
  transform: none !important;
}

html body #app .brand-offer-copy .promo-discount-symbol {
  font-size: clamp(20px, 5vw, 30px) !important;
}

html body #app .brand-offer-copy .promo-discount-prefix {
  font-size: clamp(8px, 2vw, 11px) !important;
}

html body #app .brand-offer-square .brand-offer-copy strong {
  font-size: clamp(11px, 2.7vw, 16px) !important;
}

html body #app .brand-offer-square .brand-offer-copy .promo-discount-number {
  font-size: clamp(40px, 10vw, 60px) !important;
}

html body #app .brand-offers-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 7px !important;
}

html body #app .brand-offers-dots i {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(20, 22, 30, 0.18) !important;
  transition: width 180ms ease, background-color 180ms ease !important;
}

html body #app .brand-offers-dots i.is-active {
  width: 20px !important;
  background: #111217 !important;
}

html body #app .brand-offers-category-track {
  gap: 9px !important;
  padding-block: 1px 4px !important;
}

html body #app .brand-offer-category {
  flex: 0 0 25% !important;
  aspect-ratio: 1 / 1 !important;
  box-shadow: none !important;
}

html body #app .brand-offer-category::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.92) 100%) !important;
}

html body #app .brand-offer-category .brand-offer-backdrop {
  object-fit: cover !important;
}

html body #app .brand-offer-category .brand-offer-copy {
  inset: auto 5px 6px 5px !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
}

html body #app .brand-offer-category .brand-offer-copy strong {
  font-size: clamp(10px, 2.6vw, 14px) !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

html[data-theme="dark"] body #app .brand-offer-card {
  border-color: rgba(255, 255, 255, 0.11) !important;
}

html[data-theme="dark"] body #app .brand-offers-dots i {
  background: rgba(255, 255, 255, 0.34) !important;
}

html[data-theme="dark"] body #app .brand-offers-dots i.is-active {
  background: #fff !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .brand-offers-showcase {
    width: min(100% - 28px, 430px) !important;
    margin-inline: auto !important;
  }

  html body #app .brand-offer-hero {
    aspect-ratio: 2.55 / 1 !important;
  }

  html body #app .brand-offer-square {
    aspect-ratio: 1 / 1.02 !important;
  }

  html body #app .brand-offer-category {
    flex-basis: 25.5% !important;
  }
}

/* Brand directory: one neutral circular logo system in light and dark. */
body[data-route="section"] #app .section-brand-logo-tile,
body[data-route="brands"] #app .brand-directory-tile {
  min-width: 0 !important;
  min-height: 92px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}

body[data-route="section"] #app .section-brand-logo-tile .brand-logo,
body[data-route="brands"] #app .brand-directory-tile .brand-logo,
body[data-route="section"] #app .section-brand-logo-tile .brand-logo-fallback,
body[data-route="brands"] #app .brand-directory-tile .brand-logo-fallback {
  display: block !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  flex: 0 0 60px !important;
  padding: 8px !important;
  border: 1px solid rgba(24, 25, 31, 0.09) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
  box-shadow: 0 5px 15px rgba(19, 21, 29, 0.07) !important;
}

body[data-route="section"] #app .section-brand-logo-tile .brand-logo-fallback,
body[data-route="brands"] #app .brand-directory-tile .brand-logo-fallback {
  display: grid !important;
  place-items: center !important;
  color: #17181d !important;
  font-family: "Tajawal", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body[data-route="section"] #app .section-brand-logo-tile > span:not(.brand-logo-fallback),
body[data-route="brands"] #app .brand-directory-tile > span:not(.brand-logo-fallback) {
  width: 100% !important;
  margin: 0 !important;
  color: var(--text) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="dark"] body[data-route="section"] #app .section-brand-logo-tile,
html[data-theme="dark"] body[data-route="brands"] #app .brand-directory-tile {
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] body[data-route="section"] #app .section-brand-logo-tile .brand-logo,
html[data-theme="dark"] body[data-route="brands"] #app .brand-directory-tile .brand-logo,
html[data-theme="dark"] body[data-route="section"] #app .section-brand-logo-tile .brand-logo-fallback,
html[data-theme="dark"] body[data-route="brands"] #app .brand-directory-tile .brand-logo-fallback {
  background: #fff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 640px) {
  body[data-route="section"] #app .section-brand-logo-grid,
  body[data-route="brands"] #app .brand-directory-grid {
    row-gap: 8px !important;
  }

  body[data-route="section"] #app .section-brand-logo-tile,
  body[data-route="brands"] #app .brand-directory-tile {
    height: 94px !important;
  }
}

/* Keep hero copy on the same physical anchor in every language. */
@media (max-width: 640px) {
  html[dir="ltr"] body[data-route="home"] #app .hero-campaign-copy.hero-copy-end {
    right: 22px !important;
    left: auto !important;
  }
}

/* The featured-products banner keeps one physical top-right anchor in every
   language. Locale changes glyph direction only, never the campaign layout. */
html body[data-route="home"] #app .home-featured-banner-copy {
  top: clamp(12px, 3vw, 24px) !important;
  right: clamp(14px, 4vw, 34px) !important;
  bottom: auto !important;
  left: auto !important;
  width: max-content !important;
  max-width: min(72%, 520px) !important;
  transform: none !important;
  align-items: flex-end !important;
  justify-items: end !important;
  text-align: right !important;
}

html body[data-route="home"] #app .home-featured-banner-copy > * {
  align-self: flex-end !important;
  text-align: right !important;
}

/* Launch authority: dark-mode purchase actions use one crisp light surface.
   Keep the already-added quantity control dark so both states are unmistakable. */
html[data-theme="dark"] body #app .add-button:not(.cart-control),
html[data-theme="dark"] body #app .primary-button.detail-cart:not(.cart-control),
html[data-theme="dark"] body #app .detail-sticky-cart:not(.cart-control) {
  color: #111218 !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background: #f8f8fc !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 7px 18px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] body #app .add-button:not(.cart-control) > *,
html[data-theme="dark"] body #app .primary-button.detail-cart:not(.cart-control) > *,
html[data-theme="dark"] body #app .detail-sticky-cart:not(.cart-control) > * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body #app .add-button:not(.cart-control) .cart-plus,
html[data-theme="dark"] body #app .primary-button.detail-cart:not(.cart-control) .cart-plus {
  color: #7445c6 !important;
  -webkit-text-fill-color: #7445c6 !important;
}

html[data-theme="dark"] body #app .cart-control.card-quantity-v2.is-added:not(.is-flash-only) {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: #09090d !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36) !important;
}

/* Launch authority: compact, consistent mobile chrome across every route. */
@media (max-width: 640px) {
  .header-main,
  body[data-route="home"] .header-main {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: 42px !important;
    gap: 7px !important;
    padding-block: 7px !important;
  }

  body[data-route="home"] .header-main {
    padding-top: 9px !important;
  }

  .header-actions,
  body[data-route="home"] .header-actions {
    gap: 6px !important;
  }

  .icon-action,
  .ghost-button.icon-action,
  .cart-button.icon-action,
  body[data-route="home"] .icon-action,
  body[data-route="home"] .ghost-button.icon-action,
  body[data-route="home"] .cart-button.icon-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    box-shadow: 0 8px 20px rgba(18, 18, 24, 0.09) !important;
  }

  .search,
  body[data-route="home"] .search {
    height: 42px !important;
    min-height: 42px !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    box-shadow: 0 9px 22px rgba(18, 18, 24, 0.1) !important;
  }

  .search input,
  body[data-route="home"] .search input {
    height: 40px !important;
    padding-inline: 13px 3px !important;
  }

  .search button,
  body[data-route="home"] .search button {
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html[data-theme="dark"] body[data-route="home"] .search,
  html[data-theme="dark"] body[data-route="home"] .icon-action,
  html[data-theme="dark"] body[data-route="home"] .ghost-button.icon-action {
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.24) !important;
  }
}

/* Homepage campaign banners: keep dashboard copy anchored to the physical
   bottom-right corner in every locale. Hero copy is intentionally excluded. */
html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy {
  inset: auto !important;
  inset-block: auto !important;
  inset-inline: auto !important;
  top: auto !important;
  right: clamp(11px, 2.8vw, 18px) !important;
  bottom: clamp(11px, 2.8vw, 18px) !important;
  left: auto !important;
  width: auto !important;
  max-width: min(74%, 360px) !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  text-align: right !important;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.86),
    0 4px 14px rgba(255, 255, 255, 0.52) !important;
}

html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy > * {
  align-self: flex-end !important;
  text-align: right !important;
}

html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card.promo-copy-light > .promo-card-copy {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy {
    right: 10px !important;
    bottom: 10px !important;
    max-width: 76% !important;
    gap: 2px !important;
  }

  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy {
    right: 9px !important;
    bottom: 9px !important;
    max-width: calc(100% - 18px) !important;
  }
}

/* Brand-offer banners share the same bottom-right copy anchor. The compact
   category rail keeps its centered label treatment. */
html body[data-route="home"] #app .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy {
  inset: auto !important;
  inset-block: auto !important;
  inset-inline: auto !important;
  top: auto !important;
  right: clamp(10px, 2.6vw, 16px) !important;
  bottom: clamp(10px, 2.6vw, 16px) !important;
  left: auto !important;
  width: auto !important;
  max-width: min(74%, 330px) !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  padding: 0 !important;
  text-align: right !important;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.86),
    0 4px 14px rgba(255, 255, 255, 0.5) !important;
}

html body[data-route="home"] #app .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy > * {
  align-self: flex-end !important;
  text-align: right !important;
}

html body[data-route="home"] #app .brand-offers-showcase .brand-offer-card.promo-copy-light:not(.brand-offer-category) > .brand-offer-copy {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.44),
    0 4px 14px rgba(0, 0, 0, 0.28) !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy {
    right: 9px !important;
    bottom: 9px !important;
    max-width: calc(100% - 18px) !important;
  }
}

/* Campaign copy authority: the editable title stays above one compact
   percentage row. Locale changes glyph direction only, never placement. */
html body #app :is(
  .promo-showcase .promo-card-copy,
  .brand-offers-showcase .brand-offer-copy,
  .offers-editorial-card > span
) {
  direction: rtl !important;
}

html body #app :is(
  .promo-showcase .promo-card-copy,
  .brand-offers-showcase .brand-offer-copy
) .promo-discount-value {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  direction: ltr !important;
  white-space: nowrap !important;
}

html body #app :is(
  .promo-showcase .promo-card-copy,
  .brand-offers-showcase .brand-offer-copy
) .promo-discount-symbol {
  display: inline-block !important;
  align-self: flex-end !important;
  margin: 0 0 1px 0 !important;
  line-height: 0.92 !important;
}

html[dir="ltr"] body #app :is(
  .promo-showcase .promo-card-copy,
  .brand-offers-showcase .brand-offer-copy
) > strong {
  direction: ltr !important;
  text-align: right !important;
}

/* Launch placement contract: the selected-offer cards use the physical
   bottom-right corner in every locale. Logical inline positioning moved the
   copy to the left in RTL, which made Arabic differ from the artwork. */
html body[data-route="home"] #app .featured-followup-card > .featured-followup-copy,
html body[data-route="home"] #app .featured-followup-card-compact > .featured-followup-copy {
  inset: auto 9px 8px auto !important;
  inset-block: auto !important;
  inset-inline: auto !important;
  top: auto !important;
  right: 9px !important;
  bottom: 8px !important;
  left: auto !important;
  align-items: end !important;
  justify-items: end !important;
  text-align: right !important;
}

html body[data-route="home"] #app .featured-followup-card > .featured-followup-copy > * {
  width: max-content !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right !important;
}

html body[data-route="home"] #app .featured-followup-card > .featured-followup-copy > strong,
html body[data-route="home"] #app .featured-followup-card-compact > .featured-followup-copy > strong {
  direction: inherit !important;
}

html[dir="rtl"] body[data-route="home"] #app .featured-followup-card > .featured-followup-copy > strong,
html[dir="rtl"] body[data-route="home"] #app .featured-followup-card-compact > .featured-followup-copy > strong {
  direction: rtl !important;
}

html body[data-route="home"] #app .featured-followup-card > .featured-followup-copy > .promo-discount,
html body[data-route="home"] #app .featured-followup-card-compact > .featured-followup-copy > .promo-discount {
  width: max-content !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: auto !important;
  justify-content: flex-end !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  transform: none !important;
}

/* "Exclusively at Nion" is a centred featured-section heading, not promo
   corner copy. Its position remains identical in Arabic, English and Kurdish. */
html body[data-route="home"] #app .home-featured-banner-copy {
  inset: 50% auto auto 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(88%, 520px) !important;
  max-width: min(88%, 520px) !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

html body[data-route="home"] #app .home-featured-banner-copy > * {
  align-self: center !important;
  text-align: center !important;
}

/* Launch banner type scale: increase campaign copy without changing its
   physical anchor or the established hero composition. */
html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy > strong,
html body[data-route="home"] #app .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy > strong,
html body[data-route="home"] #app .featured-followup-card > .featured-followup-copy > strong {
  font-size: clamp(13px, 3.15vw, 19px) !important;
  line-height: 1.14 !important;
}

html body[data-route="home"] #app .editorial-promo-copy > em {
  font-size: clamp(10.5px, 2.8vw, 14px) !important;
  line-height: 1.18 !important;
}

html body[data-route="home"] #app .editorial-promo-copy > strong {
  font-size: clamp(14px, 3.8vw, 19px) !important;
  line-height: 1.15 !important;
}

html body[data-route="home"] #app .editorial-promo-copy > b {
  font-size: clamp(30px, 8.5vw, 46px) !important;
  line-height: 0.96 !important;
}

html body[data-route="home"] #app :is(
  .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy,
  .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy,
  .featured-followup-card > .featured-followup-copy
) .promo-discount-number {
  font-size: clamp(48px, 12.4vw, 76px) !important;
}

html body[data-route="home"] #app :is(
  .promo-showcase .campaign-editorial-grid > .promo-card > .promo-card-copy,
  .brand-offers-showcase .brand-offer-card:not(.brand-offer-category) > .brand-offer-copy,
  .featured-followup-card > .featured-followup-copy
) .promo-discount-symbol {
  font-size: clamp(21px, 5.3vw, 32px) !important;
}

@media (max-width: 640px) {
  html body[data-route="home"] #app .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy > strong,
  html body[data-route="home"] #app .brand-offers-showcase .brand-offer-square:not(.brand-offer-category) > .brand-offer-copy > strong,
  html body[data-route="home"] #app .featured-followup-card-compact > .featured-followup-copy > strong {
    font-size: 12px !important;
    line-height: 1.14 !important;
  }

  html body[data-route="home"] #app :is(
    .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy,
    .brand-offers-showcase .brand-offer-square:not(.brand-offer-category) > .brand-offer-copy,
    .featured-followup-card-compact > .featured-followup-copy
  ) .promo-discount-number {
    font-size: 47px !important;
  }

  html body[data-route="home"] #app :is(
    .promo-showcase .campaign-editorial-grid > .promo-card-square > .promo-card-copy,
    .brand-offers-showcase .brand-offer-square:not(.brand-offer-category) > .brand-offer-copy,
    .featured-followup-card-compact > .featured-followup-copy
  ) .promo-discount-symbol {
    font-size: 21px !important;
  }
}

/* Launch interaction contract: dashboard quick offers are a continuous,
   pixel-precise rail. They never snap into fixed pages or cards. */
html body[data-route="home"] #app .hero-icon-track {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

html body[data-route="home"] #app .hero-icon-page,
html body[data-route="home"] #app .hero-icon-strip-page {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* Launch orders v2: calm, solid surfaces with a clear operational hierarchy. */
body[data-route="orders"] {
  --orders-surface: #ffffff;
  --orders-surface-soft: #f5f6f8;
  --orders-line: #e8e9ee;
  --orders-ink: #15161a;
  --orders-muted: #777b84;
  --orders-accent: #7957d5;
  --orders-accent-soft: #f0ebff;
  --orders-pending: #946200;
  --orders-pending-soft: #fff4d7;
  --orders-preparing: #6950c8;
  --orders-preparing-soft: #efeaff;
  --orders-shipping: #176ca4;
  --orders-shipping-soft: #e7f4fc;
  --orders-delivered: #157657;
  --orders-delivered-soft: #e6f6ef;
  --orders-canceled: #b52c48;
  --orders-canceled-soft: #fff0f3;
}

body[data-route="orders"] #app,
body[data-route="orders"] .page,
body[data-route="orders"] .orders-screen {
  background: #f7f8fa !important;
}

body[data-route="orders"] .orders-screen {
  width: min(100%, 680px) !important;
  padding: 8px 12px 116px !important;
}

body[data-route="orders"] .orders-page-head {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 11px !important;
  margin: 2px 0 12px !important;
  background: transparent !important;
}

body[data-route="orders"] .orders-back {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 12px !important;
  background: var(--orders-surface) !important;
  color: var(--orders-ink) !important;
  box-shadow: 0 4px 14px rgba(19, 22, 30, 0.05) !important;
}

body[data-route="orders"] .orders-page-head > div {
  gap: 2px !important;
}

body[data-route="orders"] .orders-page-head span {
  color: var(--orders-muted) !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}

body[data-route="orders"] .orders-page-head strong {
  color: var(--orders-ink) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
}

body[data-route="orders"] .orders-status-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  display: flex !important;
  gap: 7px !important;
  margin: 0 -12px 12px !important;
  padding: 7px 12px 10px !important;
  overflow-x: auto !important;
  background: rgba(247, 248, 250, 0.94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body[data-route="orders"] .orders-status-tabs a,
body[data-route="orders"] .orders-status-tabs > span {
  flex: 0 0 88px !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 6px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 12px !important;
  background: var(--orders-surface) !important;
  color: #5d616a !important;
  box-shadow: none !important;
}

body[data-route="orders"] .orders-status-tabs a:first-child,
body[data-route="orders"] .orders-status-tabs > span:first-child {
  flex-basis: 76px !important;
}

body[data-route="orders"] .orders-status-tabs a span,
body[data-route="orders"] .orders-status-tabs > span {
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: start !important;
}

body[data-route="orders"] .orders-status-tabs a b {
  top: 4px !important;
  inset-inline-start: 4px !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: var(--orders-surface-soft) !important;
  color: #666a73 !important;
  font-size: 8px !important;
}

body[data-route="orders"] .orders-status-tabs a.is-active {
  border-color: #16171b !important;
  background: #16171b !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(17, 18, 22, 0.13) !important;
}

body[data-route="orders"] .orders-status-tabs a.is-active b {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

body[data-route="orders"] .orders-list,
body[data-route="orders"] .account-order-list {
  gap: 10px !important;
}

body[data-route="orders"] .account-order-card,
body[data-route="orders"] .account-order-compact,
body[data-route="orders"] .account-order-compact:not(.is-open) {
  overflow: hidden !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 12px !important;
  background: var(--orders-surface) !important;
  box-shadow: 0 7px 22px rgba(19, 22, 30, 0.055) !important;
}

body[data-route="orders"] .account-order-card::before {
  display: none !important;
}

body[data-route="orders"] .account-order-compact .account-order-toggle,
body[data-route="orders"] .account-order-compact.is-open .account-order-toggle,
body[data-route="orders"] .account-order-trigger {
  min-height: 60px !important;
  padding: 11px 12px !important;
  border-radius: 0 !important;
  background: var(--orders-surface) !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-compact .account-order-head {
  grid-template-columns: minmax(0, 1fr) auto 27px !important;
  gap: 8px !important;
}

body[data-route="orders"] .account-order-compact .account-order-title {
  gap: 1px !important;
}

body[data-route="orders"] .account-order-title em,
body[data-route="orders"] .account-order-summary em {
  color: var(--orders-muted) !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
}

body[data-route="orders"] .account-order-compact .account-order-title strong,
body[data-route="orders"] .account-order-title strong {
  color: var(--orders-ink) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

body[data-route="orders"] .account-order-status-badge,
body[data-route="orders"] .account-order-status-pending .account-order-status-badge,
body[data-route="orders"] .account-order-status-preparing .account-order-status-badge,
body[data-route="orders"] .account-order-status-shipping .account-order-status-badge,
body[data-route="orders"] .account-order-status-delivered .account-order-status-badge,
body[data-route="orders"] .account-order-status-canceled .account-order-status-badge {
  min-height: 25px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-status-pending .account-order-status-badge {
  background: var(--orders-pending-soft) !important;
  color: var(--orders-pending) !important;
}

body[data-route="orders"] .account-order-status-preparing .account-order-status-badge {
  background: var(--orders-preparing-soft) !important;
  color: var(--orders-preparing) !important;
}

body[data-route="orders"] .account-order-status-shipping .account-order-status-badge {
  background: var(--orders-shipping-soft) !important;
  color: var(--orders-shipping) !important;
}

body[data-route="orders"] .account-order-status-delivered .account-order-status-badge {
  background: var(--orders-delivered-soft) !important;
  color: var(--orders-delivered) !important;
}

body[data-route="orders"] .account-order-status-canceled .account-order-status-badge {
  background: var(--orders-canceled-soft) !important;
  color: var(--orders-canceled) !important;
}

body[data-route="orders"] .account-order-chevron {
  width: 27px !important;
  height: 27px !important;
  background: var(--orders-surface-soft) !important;
  color: #656972 !important;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease !important;
}

body[data-route="orders"] .account-order-compact.is-open .account-order-chevron {
  background: var(--orders-accent-soft) !important;
  color: var(--orders-accent) !important;
}

body[data-route="orders"] .account-order-body {
  gap: 9px !important;
  padding: 0 11px 11px !important;
}

body[data-route="orders"] .account-order-body .account-order-note {
  margin: 0 !important;
  padding-top: 2px !important;
  color: #666a73 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

body[data-route="orders"] .account-order-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 10px !important;
  background: var(--orders-surface-soft) !important;
}

body[data-route="orders"] .account-order-summary > span {
  min-height: 55px !important;
  gap: 3px !important;
  padding: 8px !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--orders-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body[data-route="orders"] .account-order-summary > span:first-child {
  border-inline-start: 0 !important;
}

body[data-route="orders"] .account-order-summary strong {
  color: var(--orders-ink) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-route="orders"] .account-order-summary > span:last-child strong {
  color: #ce3263 !important;
  font-size: 11px !important;
}

body[data-route="orders"] .account-order-progress {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 10px 8px 8px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 10px !important;
  background: var(--orders-surface-soft) !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-progress-head {
  margin: 0 2px 8px !important;
}

body[data-route="orders"] .account-order-progress-head span {
  color: var(--orders-muted) !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
}

body[data-route="orders"] .account-order-progress-head strong {
  min-height: 23px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 999px !important;
  background: var(--orders-surface) !important;
  color: var(--orders-ink) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

body[data-route="orders"] .account-order-timeline {
  min-height: 72px !important;
  padding: 3px 0 0 !important;
}

body[data-route="orders"] .account-order-timeline::before,
body[data-route="orders"] .account-order-timeline-fill {
  top: 17px !important;
  inset-inline: 31px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #dfe1e7 !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-timeline-fill {
  right: 31px !important;
  background: var(--orders-accent) !important;
  animation: none !important;
  transition: width 260ms ease !important;
}

html[dir="ltr"] body[data-route="orders"] .account-order-timeline-fill {
  right: auto !important;
  left: 31px !important;
}

body[data-route="orders"] .account-timeline-dot,
body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot,
body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot {
  width: 27px !important;
  height: 27px !important;
  border: 1px solid #dfe1e7 !important;
  background: var(--orders-surface) !important;
  color: #8a8e97 !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: var(--orders-accent) !important;
  color: var(--orders-accent) !important;
}

body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot {
  border-color: var(--orders-accent) !important;
  background: var(--orders-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px var(--orders-accent-soft) !important;
}

body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot::after {
  display: none !important;
}

body[data-route="orders"] .account-timeline-step strong {
  max-width: 76px !important;
  min-height: 22px !important;
  color: #565a63 !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

body[data-route="orders"] .account-timeline-step small {
  max-width: 72px !important;
  color: var(--orders-muted) !important;
  font-size: 7.3px !important;
  font-weight: 600 !important;
}

body[data-route="orders"] .account-order-support,
body[data-route="orders"] .account-order-cta,
body[data-route="orders"] .account-order-review,
body[data-route="orders"] .account-order-cancel {
  min-height: 38px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-support {
  border: 1px solid var(--orders-line) !important;
  background: var(--orders-surface) !important;
  color: var(--orders-ink) !important;
}

body[data-route="orders"] .account-order-cta {
  border: 1px solid #16171b !important;
  background: #16171b !important;
  color: #ffffff !important;
}

body[data-route="orders"] .account-order-review {
  border: 1px solid var(--orders-line) !important;
  background: var(--orders-surface) !important;
  color: var(--orders-accent) !important;
}

body[data-route="orders"] .account-order-review:active,
body[data-route="orders"] .account-order-card.is-review-ready .account-order-review {
  background: var(--orders-accent) !important;
  color: #ffffff !important;
}

body[data-route="orders"] .account-order-details {
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 10px !important;
  background: var(--orders-surface-soft) !important;
  box-shadow: none !important;
}

body[data-route="orders"] .account-order-item {
  min-height: 58px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 9px !important;
  background: var(--orders-surface) !important;
}

body[data-route="orders"] .orders-card-skeleton {
  min-height: 170px !important;
  border: 1px solid var(--orders-line) !important;
  border-radius: 12px !important;
  background: #eef0f3 !important;
  box-shadow: none !important;
}

body[data-route="orders"] .orders-empty {
  border: 1px solid var(--orders-line) !important;
  border-radius: 12px !important;
  background: var(--orders-surface) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-route="orders"] {
  --orders-surface: #17181d;
  --orders-surface-soft: #111217;
  --orders-line: rgba(255, 255, 255, 0.09);
  --orders-ink: #f4f4f6;
  --orders-muted: #989ba4;
  --orders-accent: #bba4ff;
  --orders-accent-soft: rgba(187, 164, 255, 0.14);
  --orders-pending: #f1c75b;
  --orders-pending-soft: rgba(241, 199, 91, 0.13);
  --orders-preparing: #beaaff;
  --orders-preparing-soft: rgba(190, 170, 255, 0.14);
  --orders-shipping: #80c9f4;
  --orders-shipping-soft: rgba(128, 201, 244, 0.13);
  --orders-delivered: #74d9b3;
  --orders-delivered-soft: rgba(116, 217, 179, 0.13);
  --orders-canceled: #ff8da5;
  --orders-canceled-soft: rgba(255, 141, 165, 0.13);
}

html[data-theme="dark"] body[data-route="orders"] #app,
html[data-theme="dark"] body[data-route="orders"] .page,
html[data-theme="dark"] body[data-route="orders"] .orders-screen,
html[data-theme="dark"] body[data-route="orders"] .orders-page-head {
  background: #0c0d11 !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs {
  background: rgba(12, 13, 17, 0.94) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-back,
html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a,
html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs > span,
html[data-theme="dark"] body[data-route="orders"] .account-order-card,
html[data-theme="dark"] body[data-route="orders"] .account-order-compact .account-order-toggle,
html[data-theme="dark"] body[data-route="orders"] .account-order-compact.is-open .account-order-toggle,
html[data-theme="dark"] body[data-route="orders"] .account-order-trigger,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress-head strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-support,
html[data-theme="dark"] body[data-route="orders"] .account-order-review,
html[data-theme="dark"] body[data-route="orders"] .account-order-item,
html[data-theme="dark"] body[data-route="orders"] .orders-empty {
  background: var(--orders-surface) !important;
  color: var(--orders-ink) !important;
  border-color: var(--orders-line) !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active,
html[data-theme="dark"] body[data-route="orders"] .account-order-cta {
  border-color: #f4f4f6 !important;
  background: #f4f4f6 !important;
  color: #111217 !important;
}

html[data-theme="dark"] body[data-route="orders"] .orders-status-tabs a.is-active b {
  color: #111217 !important;
  background: rgba(17, 18, 23, 0.1) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-summary,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress,
html[data-theme="dark"] body[data-route="orders"] .account-order-details {
  background: var(--orders-surface-soft) !important;
  border-color: var(--orders-line) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-summary strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-title strong,
html[data-theme="dark"] body[data-route="orders"] .orders-page-head strong,
html[data-theme="dark"] body[data-route="orders"] .account-order-progress-head strong {
  color: var(--orders-ink) !important;
  -webkit-text-fill-color: var(--orders-ink) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-timeline::before,
html[data-theme="dark"] body[data-route="orders"] .account-order-timeline-fill {
  background: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-order-timeline-fill {
  background: var(--orders-accent) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-timeline-dot,
html[data-theme="dark"] body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: var(--orders-line) !important;
  background: var(--orders-surface) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-timeline-step.is-done .account-timeline-dot {
  border-color: var(--orders-accent) !important;
  color: var(--orders-accent) !important;
}

html[data-theme="dark"] body[data-route="orders"] .account-timeline-step.is-active .account-timeline-dot {
  border-color: var(--orders-accent) !important;
  background: var(--orders-accent) !important;
  color: #111217 !important;
}

html[dir="ltr"] body[data-route="orders"] .orders-screen {
  direction: ltr !important;
}

html[dir="ltr"] body[data-route="orders"] .orders-page-head > div,
html[dir="ltr"] body[data-route="orders"] .account-order-title,
html[dir="ltr"] body[data-route="orders"] .account-order-note,
html[dir="ltr"] body[data-route="orders"] .account-order-summary > span {
  text-align: left !important;
}

html[dir="ltr"] body[data-route="orders"] .account-order-head {
  direction: ltr !important;
}

html[dir="ltr"] body[data-route="orders"] .orders-status-tabs a span {
  text-align: left !important;
}

@media (max-width: 380px) {
  body[data-route="orders"] .orders-screen {
    padding-inline: 9px !important;
  }

  body[data-route="orders"] .orders-status-tabs {
    margin-inline: -9px !important;
    padding-inline: 9px !important;
  }

  body[data-route="orders"] .account-order-summary > span {
    padding-inline: 6px !important;
  }

  body[data-route="orders"] .account-order-summary strong {
    font-size: 9.8px !important;
  }
}

/* Launch: the final home catalogue stays dense at three products per row. */
@media (max-width: 759px) {
  body[data-route="home"] .home-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-card {
    min-width: 0 !important;
    min-height: 280px !important;
    grid-template-rows: 114px minmax(128px, 1fr) 38px !important;
    border-radius: 11px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-media {
    height: 114px !important;
    min-height: 114px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-media img {
    padding: 8px 6px 6px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-body,
  body[data-route="home"] .home-catalog-grid .product-body:has(.product-color-swatches) {
    min-width: 0 !important;
    min-height: 128px !important;
    max-height: 146px !important;
    gap: 2px !important;
    padding: 6px 5px 3px !important;
  }

  body[data-route="home"] .home-catalog-grid .brand-name {
    min-height: 12px !important;
    font-size: 8px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-name {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 9.4px !important;
    line-height: 1.28 !important;
  }

  body[data-route="home"] .home-catalog-grid .rating-row {
    min-width: 0 !important;
    height: 16px !important;
    min-height: 16px !important;
    gap: 2px !important;
    font-size: 7.5px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-rating {
    min-height: 15px !important;
    padding: 1px 3px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-rating .nion-icon {
    width: 8px !important;
    height: 8px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-rating b {
    font-size: 8px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-rating em {
    font-size: 7px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-color-swatches {
    min-height: 16px !important;
    gap: 3px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-color-swatch {
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
  }

  body[data-route="home"] .home-catalog-grid .price-row {
    min-width: 0 !important;
    height: 21px !important;
    min-height: 21px !important;
    gap: 3px !important;
  }

  body[data-route="home"] .home-catalog-grid .price {
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    text-overflow: ellipsis !important;
  }

  body[data-route="home"] .home-catalog-grid .old-price {
    font-size: 7.4px !important;
  }

  body[data-route="home"] .home-catalog-grid .stock {
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
    font-size: 7.4px !important;
  }

  body[data-route="home"] .home-catalog-grid .sale-badge {
    inset-block-start: 6px !important;
    inset-inline-start: 5px !important;
    padding: 3px 5px !important;
    font-size: 7px !important;
  }

  body[data-route="home"] .home-catalog-grid .fav-button {
    inset-block-start: 5px !important;
    inset-inline-end: 5px !important;
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
  }

  body[data-route="home"] .home-catalog-grid .fav-button .nion-icon {
    width: 13px !important;
    height: 13px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-actions {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 5px 6px !important;
  }

  body[data-route="home"] .home-catalog-grid .add-button,
  body[data-route="home"] .home-catalog-grid .cart-control {
    height: 32px !important;
    min-height: 32px !important;
    gap: 3px !important;
    border-radius: 9px !important;
    padding-inline: 5px !important;
    font-size: 8.4px !important;
  }

  body[data-route="home"] .home-catalog-grid .cart-added-label {
    min-width: 0 !important;
    font-size: 7.4px !important;
  }

  body[data-route="home"] .home-catalog-grid .cart-stepper {
    gap: 2px !important;
  }

  body[data-route="home"] .home-catalog-grid .cart-count-button {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
  }

  body[data-route="home"] .home-catalog-grid .cart-control strong {
    min-width: 12px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 360px) {
  body[data-route="home"] .home-catalog-grid {
    gap: 5px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-card {
    min-height: 266px !important;
    grid-template-rows: 102px minmax(126px, 1fr) 38px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-media {
    height: 102px !important;
    min-height: 102px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-name {
    font-size: 8.8px !important;
  }

  body[data-route="home"] .home-catalog-grid .price {
    font-size: 11.2px !important;
  }
}

/* Launch: reserve the mobile dock once, without leaving long blank page tails. */
@media (min-width: 641px) {
  #app {
    min-height: 0;
  }

  .page {
    padding-bottom: 24px;
  }

  .page > :last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 640px) {
  :root {
    --nion-page-tail: calc(
      var(--nion-mobile-dock-height, 64px) +
      var(--nion-mobile-dock-safe-bottom, max(4px, env(safe-area-inset-bottom, 0px))) +
      10px
    );
    --nion-product-page-tail: calc(var(--nion-page-tail) + 54px);
    --nion-cart-page-tail: calc(var(--nion-page-tail) + 78px);
  }

  body {
    padding-bottom: 0 !important;
  }

  #app,
  body[data-route="home"] #app {
    min-height: 0 !important;
  }

  body:not([data-route="section"]) .page {
    padding-bottom: var(--nion-page-tail) !important;
  }

  body[data-route="product"] .page {
    padding-bottom: var(--nion-product-page-tail) !important;
  }

  body[data-route="cart"]:has(.cart-sticky-checkout) .page {
    padding-bottom: var(--nion-cart-page-tail) !important;
  }

  body[data-route="account"] .account-screen-logged,
  body[data-route="products"] .all-products-grid,
  body[data-route="cart"] .cart-recommendation-section,
  body[data-route="home"] .home-all-products-preview,
  body[data-route="home"] .home-catalog-stream {
    padding-bottom: 0 !important;
  }

  body[data-route="cart"] .cart-recommendations-slot {
    margin-bottom: 0 !important;
  }

  body[data-route="orders"] .page {
    padding-bottom: 0 !important;
  }

  body[data-route="orders"] .orders-screen {
    padding-bottom: var(--nion-page-tail) !important;
  }

  body[data-route="section"] .section-hub-tabs {
    padding-bottom: var(--nion-page-tail) !important;
  }

  body[data-route="section"] .section-hub-content {
    padding-bottom: var(--nion-page-tail) !important;
  }

  body[data-route="section"] .section-brand-directory {
    padding-bottom: 8px !important;
  }

  .home-catalog-sentinel.is-complete {
    min-height: 28px !important;
    padding-block: 4px !important;
  }

  .page > :last-child,
  body[data-route="home"] #homeDeferred > :last-child {
    margin-bottom: 0 !important;
  }
}

/* Launch account tail: hidden social links must not reserve a grid row, and
   the account page keeps only the exact dock-safe scroll allowance. */
body[data-route="account"] .social-follow[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-route="account"] .account-screen,
body[data-route="account"] .account-screen-logged {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  align-content: start !important;
}

body[data-route="account"] .account-screen > :last-child,
body[data-route="account"] .account-screen-logged > :last-child {
  margin-bottom: 0 !important;
}

/* Compact backward control for section/category navigation. */
.section-flow-back-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  direction: ltr;
  min-height: 38px;
  margin: 5px 0 2px;
}

.section-flow-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid rgba(20, 21, 28, 0.09);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #17181d;
  box-shadow: 0 4px 12px rgba(18, 19, 25, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.section-flow-back:hover {
  background: #fff;
  border-color: rgba(112, 82, 222, 0.22);
}

.section-flow-back:active {
  transform: scale(0.94);
}

.section-flow-back:focus-visible {
  outline: 2px solid rgba(112, 82, 222, 0.42);
  outline-offset: 2px;
}

html[data-theme="dark"] .section-flow-back {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(29, 29, 36, 0.94);
  color: #f7f7fb;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
  body[data-route="section"] .section-flow-back-row,
  body[data-route="category"] .section-flow-back-row {
    min-height: 36px;
    margin: 4px 0 1px;
  }

  body[data-route="section"] .section-flow-back,
  body[data-route="category"] .section-flow-back {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

@media (max-width: 640px) {
  html:has(body[data-route="account"]),
  body[data-route="account"] {
    overscroll-behavior-y: auto !important;
  }

  body[data-route="account"] {
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-route="account"] .page {
    padding-bottom: calc(
      var(--nion-mobile-dock-height, 64px) +
      var(--nion-mobile-dock-safe-bottom, max(4px, env(safe-area-inset-bottom, 0px))) +
      12px
    ) !important;
  }
}

/* The brand directory uses a mobile-specific three-column treatment above.
   Give the same markup an explicit desktop grid so its logo list cannot
   collapse when the section hub grows beyond the mobile breakpoint. */
@media (min-width: 641px) {
  body[data-route="section"] .section-hub,
  html[dir="ltr"] body[data-route="section"] .section-hub,
  html[dir="rtl"] body[data-route="section"] .section-hub {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 170px !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    direction: ltr !important;
  }

  body[data-route="section"] .section-hub-tabs,
  html[dir="ltr"] body[data-route="section"] .section-hub-tabs,
  html[dir="rtl"] body[data-route="section"] .section-hub-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  body[data-route="section"] .section-hub-content,
  html[dir="ltr"] body[data-route="section"] .section-hub-content,
  html[dir="rtl"] body[data-route="section"] .section-hub-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body[data-route="section"] .section-brand-directory {
    direction: ltr;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    gap: 14px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 0 24px !important;
  }

  body[data-route="section"] .section-brand-logo-grid {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-route="section"] .section-brand-alpha {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 116px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 2px !important;
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  body[data-route="section"] .section-brand-alpha::-webkit-scrollbar {
    display: none;
  }

  body[data-route="section"] .section-brand-alpha a {
    width: 24px;
    min-height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--muted, #7e818b);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }

  body[data-route="section"] .section-brand-alpha a.active {
    color: #fff;
    background: linear-gradient(135deg, #5fe4d0, #9c70e3 58%, #e49be8);
  }

  body[data-route="section"] .section-brand-load-more {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
  }
}

/* Dense three-column catalogue: reserve one stable row for every card datum. */
@media (max-width: 759px) {
  body[data-route="home"] .home-catalog-grid .product-card {
    display: grid !important;
    grid-template-rows: 114px 158px 38px !important;
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .product-body,
  body[data-route="home"] .home-catalog-grid .product-body:has(.product-color-swatches) {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    align-content: initial !important;
    gap: 2px !important;
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    padding: 7px 5px 4px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .brand-name {
    display: block !important;
    flex: 0 0 14px !important;
    width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    padding: 1px 0 !important;
    overflow: hidden !important;
    font-size: 8px !important;
    line-height: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-route="home"] .home-catalog-grid .product-name {
    display: -webkit-box !important;
    flex: 0 0 34px !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    overflow: hidden !important;
    font-size: 9.4px !important;
    font-weight: 780 !important;
    line-height: 15px !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-route="home"] .home-catalog-grid .rating-row {
    flex: 0 0 22px !important;
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .rating-row > span:last-child {
    min-width: 0 !important;
    min-height: 16px !important;
    padding: 1px 0 !important;
    overflow: hidden !important;
    font-size: 7.5px !important;
    line-height: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-route="home"] .home-catalog-grid .product-color-swatches {
    flex: 0 0 18px !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .price-row {
    flex: 0 0 27px !important;
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    margin: auto 0 0 !important;
    padding: 3px 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .stock {
    display: block !important;
    flex: 0 0 14px !important;
    width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    padding: 1px 0 !important;
    overflow: hidden !important;
    font-size: 7.5px !important;
    line-height: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  body[data-route="home"] .home-catalog-grid .product-card {
    grid-template-rows: 102px 156px 38px !important;
    height: 296px !important;
    min-height: 296px !important;
    max-height: 296px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-body,
  body[data-route="home"] .home-catalog-grid .product-body:has(.product-color-swatches) {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
  }
}

/* Cart quantity reaches the live stock ceiling: remove the unavailable action. */
html body #app .card-quantity-v2-stepper.is-at-stock-limit {
  grid-template-columns: 1fr 1fr !important;
}

html body #app .cart-stepper.is-at-stock-limit,
html body #app .cart-item-stepper.is-at-stock-limit {
  justify-content: center !important;
}

/* Continuous horizontal browsing: every rail follows the finger and can stop
   at any pixel instead of snapping to a page or card. */
html body #app :is(
  .rail,
  .hero-icon-track,
  .quick-grid,
  .brand-rail,
  .category-sibling-track,
  .offers-shortcut-track,
  .promotion-rail,
  .offers-hero-track,
  .brand-offers-hero-track,
  .brand-offers-category-track
) {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
}

html body #app :is(
  .rail,
  .hero-icon-track,
  .quick-grid,
  .brand-rail,
  .category-sibling-track,
  .offers-shortcut-track,
  .promotion-rail,
  .offers-hero-track,
  .brand-offers-hero-track,
  .brand-offers-category-track
) > * {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

@media (max-width: 640px) {
  /* Two quick-offer rows with four complete tiles and half of the next tile
     visible as a clear, touch-friendly continuation cue. */
  html body[data-route="home"] #app .hero-icon-track {
    grid-auto-columns: 87.5% !important;
    gap: 7px !important;
    padding-inline: 0 !important;
  }

  html body[data-route="home"] #app .hero-icon-page,
  html body[data-route="home"] #app .hero-icon-strip-page {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 7px !important;
    row-gap: 8px !important;
    padding-inline: 0 !important;
  }
}

/* Cart recommendations: compact three-up grid on phones. Keep this scoped to
   the recommendation block so cart lines and all other product lists retain
   their established layout. */
@media (max-width: 640px) {
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .product-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .product-body {
    gap: 3px !important;
    padding: 6px 5px 5px !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .brand-name {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .product-name {
    min-height: 30px !important;
    font-size: 9.2px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .price {
    font-size: 11px !important;
  }

  html body[data-route="cart"] #app .cart-recommendation-section .old-price,
  html body[data-route="cart"] #app .cart-recommendation-section .stock,
  html body[data-route="cart"] #app .cart-recommendation-section .rating-row {
    font-size: 8px !important;
  }
}

/* Hero offer targets: the entire slide is tappable. Older visual-only hero
   layers disabled pointer events on the slide itself, which left the managed
   collection href present in the DOM but unreachable on touch devices. */
html body[data-route="home"] #app .hero-slide-link[data-hero-target] {
  pointer-events: auto !important;
  cursor: pointer !important;
  scroll-snap-stop: normal !important;
  touch-action: pan-x pan-y !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

html body[data-route="home"] #app .hero-slide-link[data-hero-target] :is(.hero-slide, .hero-campaign-copy) {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
}

html body[data-route="home"] #app .hero-slides[data-hero-track] {
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 0;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch;
}

/* Product controls belong to the primary product surface. Keep them fixed
   while that surface is visible, then clear them before recommendations so
   they never cover a product-card favorite button. */
@media (max-width: 640px) {
  body[data-route="product"] .detail-floating-actions {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  body[data-route="product"] .detail-floating-actions.is-outside-product {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(0, -8px, 0) !important;
    transition:
      opacity 150ms ease,
      transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 180ms !important;
  }

  body[data-route="product"] .detail-floating-actions.is-outside-product .detail-floating-button {
    pointer-events: none !important;
  }
}

/* Recommendation cards keep their two controls in opposite physical corners.
   Physical edges avoid stale RTL/LTR state placing both controls together. */
@media (max-width: 640px) {
  body[data-route="product"] [data-similar-slot] .product-card .sale-badge {
    inset-block-start: 5px !important;
    inset-inline: auto !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    max-width: calc(100% - 42px) !important;
  }

  body[data-route="product"] [data-similar-slot] .product-card .fav-button {
    inset-block-start: 5px !important;
    inset-inline: auto !important;
    top: 5px !important;
    right: auto !important;
    left: 5px !important;
  }
}

/* Account favorites are product cards, not account-menu rows. Keep their
   controls compact and lock each content row so long titles cannot stretch
   the entire grid row. */
body[data-route="account"] #accountFavoritesPanel .account-favorites-list {
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-card {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-info {
  flex: 0 0 auto !important;
  grid-template-rows: 16px 36px 27px 19px !important;
  gap: 2px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 7px 8px 5px !important;
  overflow: hidden !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-card .brand-name {
  height: 16px !important;
  min-height: 16px !important;
  padding-block: 1px !important;
  line-height: 14px !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-card .product-name {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding-block: 2px !important;
  line-height: 16px !important;
  -webkit-line-clamp: 2 !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-card .price-row {
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  padding-block: 3px !important;
  overflow: hidden !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-card .stock {
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
  padding-block: 2px !important;
  overflow: hidden !important;
  line-height: 15px !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-heart {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
}

body[data-route="account"] #accountFavoritesPanel .favorite-mini-action :is(.add-button, .cart-control) {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding-block: 5px !important;
}

/* Order actions share one visual footprint. The cancel action previously kept
   an older inset width, making it look shorter than the details button above. */
body:is([data-route="orders"], [data-route="account"]) .account-order-body > :is(.account-order-cta, .account-order-cancel) {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  padding: 7px 12px !important;
  line-height: 1.25 !important;
}

/* Compact three-up product cards: the cart action always owns its final row.
   The regular card control is too wide for a phone card at one-third width,
   so this layout keeps the label readable beside a contained mini stepper. */
@media (max-width: 759px) {
  body[data-route="home"] .home-catalog-grid .product-card,
  body[data-route="cart"] .cart-recommendation-section .product-grid .product-card,
  body[data-route="product"] [data-similar-slot] .product-grid .product-card {
    display: grid !important;
    align-content: stretch !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body[data-route="cart"] .cart-recommendation-section .product-grid .product-card {
    grid-template-rows: 96px 154px 38px !important;
    height: 288px !important;
    min-height: 288px !important;
    max-height: 288px !important;
  }

  body[data-route="product"] [data-similar-slot] .product-grid .product-card {
    grid-template-rows: 88px 136px 36px !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }

  body[data-route="cart"] .cart-recommendation-section .product-grid .product-body,
  body[data-route="product"] [data-similar-slot] .product-grid .product-body {
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .product-actions,
  body[data-route="cart"] .cart-recommendation-section .product-grid .product-actions,
  body[data-route="product"] [data-similar-slot] .product-grid .product-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: grid !important;
    place-items: stretch !important;
    margin: 0 !important;
    padding: 2px 4px 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-route="product"] [data-similar-slot] .product-grid .product-actions {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-block: 1px 3px !important;
  }

  body[data-route="home"] .home-catalog-grid .product-actions > .add-button,
  body[data-route="cart"] .cart-recommendation-section .product-grid .product-actions > .add-button,
  body[data-route="product"] [data-similar-slot] .product-grid .product-actions > .add-button {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    font-size: 8.6px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-route="home"] .home-catalog-grid .product-actions > .cart-control.card-quantity-v2,
  body[data-route="cart"] .cart-recommendation-section .product-grid .product-actions > .cart-control.card-quantity-v2,
  body[data-route="product"] [data-similar-slot] .product-grid .product-actions > .cart-control.card-quantity-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 4px !important;
    direction: inherit !important;
  }

  body[data-route="home"] .home-catalog-grid .card-quantity-v2-state,
  body[data-route="cart"] .cart-recommendation-section .card-quantity-v2-state,
  body[data-route="product"] [data-similar-slot] .card-quantity-v2-state {
    width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    overflow: hidden !important;
  }

  body[data-route="home"] .home-catalog-grid .card-quantity-v2-label,
  body[data-route="cart"] .cart-recommendation-section .card-quantity-v2-label,
  body[data-route="product"] [data-similar-slot] .card-quantity-v2-label {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 8.4px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-route="home"] .home-catalog-grid .card-quantity-v2-stepper,
  body[data-route="cart"] .cart-recommendation-section .card-quantity-v2-stepper,
  body[data-route="product"] [data-similar-slot] .card-quantity-v2-stepper {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    grid-template-columns: 15px 20px 15px !important;
    justify-self: end !important;
    border-radius: 7px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-quantity-v2-stepper.is-at-stock-limit,
  body[data-route="cart"] .cart-recommendation-section .card-quantity-v2-stepper.is-at-stock-limit,
  body[data-route="product"] [data-similar-slot] .card-quantity-v2-stepper.is-at-stock-limit {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-route="home"] .home-catalog-grid :is(.card-quantity-v2-button, .card-quantity-v2-value),
  body[data-route="cart"] .cart-recommendation-section :is(.card-quantity-v2-button, .card-quantity-v2-value),
  body[data-route="product"] [data-similar-slot] :is(.card-quantity-v2-button, .card-quantity-v2-value) {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 8.5px !important;
  }

  body[data-route="home"] .home-catalog-grid .card-quantity-v2-button svg,
  body[data-route="cart"] .cart-recommendation-section .card-quantity-v2-button svg,
  body[data-route="product"] [data-similar-slot] .card-quantity-v2-button svg {
    width: 7px !important;
    height: 7px !important;
    stroke-width: 1.8 !important;
  }
}

/* Three-up action geometry authority. Include #app so old unified controls
   cannot restore desktop widths after the compact rules above. */
@media (max-width: 759px) {
  html body[data-route="home"] #app .home-catalog-grid .product-card {
    box-sizing: border-box !important;
    grid-template-rows: 114px 156px 38px !important;
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-media {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-body,
  html body[data-route="home"] #app .home-catalog-grid .product-body:has(.product-color-swatches),
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid .product-body,
  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-body {
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-body,
  html body[data-route="home"] #app .home-catalog-grid .product-body:has(.product-color-swatches) {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-actions,
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid .product-actions,
  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-actions {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    display: grid !important;
    place-items: stretch !important;
    margin: 0 !important;
    padding: 2px 4px 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-actions {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding-block: 1px 3px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-actions > .add-button,
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid .product-actions > .add-button,
  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-actions > .add-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 3px 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-actions > .cart-control.card-quantity-v2,
  html body[data-route="cart"] #app .cart-recommendation-section .product-grid .product-actions > .cart-control.card-quantity-v2,
  html body[data-route="product"] #app [data-similar-slot] .product-grid .product-actions > .cart-control.card-quantity-v2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 2px !important;
    padding: 2px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .cart-control.card-quantity-v2 > .card-quantity-v2-state,
  html body[data-route="cart"] #app .cart-recommendation-section .cart-control.card-quantity-v2 > .card-quantity-v2-state,
  html body[data-route="product"] #app [data-similar-slot] .cart-control.card-quantity-v2 > .card-quantity-v2-state {
    width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    overflow: hidden !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .cart-control.card-quantity-v2 .card-quantity-v2-label,
  html body[data-route="cart"] #app .cart-recommendation-section .cart-control.card-quantity-v2 .card-quantity-v2-label,
  html body[data-route="product"] #app [data-similar-slot] .cart-control.card-quantity-v2 .card-quantity-v2-label {
    overflow: hidden !important;
    font-size: 8.2px !important;
    text-overflow: ellipsis !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
  html body[data-route="cart"] #app .cart-recommendation-section .cart-control.card-quantity-v2 > .card-quantity-v2-stepper,
  html body[data-route="product"] #app [data-similar-slot] .cart-control.card-quantity-v2 > .card-quantity-v2-stepper {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    grid-template-columns: 13px 18px 13px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .cart-control.card-quantity-v2 > .card-quantity-v2-stepper.is-at-stock-limit,
  html body[data-route="cart"] #app .cart-recommendation-section .cart-control.card-quantity-v2 > .card-quantity-v2-stepper.is-at-stock-limit,
  html body[data-route="product"] #app [data-similar-slot] .cart-control.card-quantity-v2 > .card-quantity-v2-stepper.is-at-stock-limit {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 360px) {
  html body[data-route="home"] #app .home-catalog-grid .product-card {
    grid-template-rows: 102px 154px 38px !important;
    height: 296px !important;
    min-height: 296px !important;
    max-height: 296px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-media {
    height: 102px !important;
    min-height: 102px !important;
    max-height: 102px !important;
  }

  html body[data-route="home"] #app .home-catalog-grid .product-body,
  html body[data-route="home"] #app .home-catalog-grid .product-body:has(.product-color-swatches) {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
  }
}

/* Offers hub: a standalone, dashboard-led surface. */
html body[data-route="offers"] #app .offers-hub {
  --offers-hub-edge: clamp(14px, 4vw, 24px);
  width: min(100%, 1120px);
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-inline: auto;
  padding: 4px var(--offers-hub-edge) calc(112px + env(safe-area-inset-bottom));
  overflow: visible;
  box-sizing: border-box;
}

html body[data-route="offers"] #app .offers-hub-heading {
  display: block;
  min-width: 0;
  padding-top: 2px;
}

html body[data-route="offers"] #app .offers-hub-heading > div {
  min-width: 0;
}

html body[data-route="offers"] #app .offers-hub-heading h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(27px, 7vw, 42px);
  font-weight: 900;
  line-height: 1.08;
}

html body[data-route="offers"] #app .offers-hub-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

html body[data-route="offers"] #app .offers-hub-nav {
  width: calc(100% + (var(--offers-hub-edge) * 2));
  max-width: calc(100% + (var(--offers-hub-edge) * 2));
  min-width: 0;
  margin-inline: calc(var(--offers-hub-edge) * -1);
  box-sizing: border-box;
}

html body[data-route="offers"] #app .offers-hub-rail {
  display: flex;
  flex-flow: row nowrap;
  direction: rtl;
  gap: 9px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px var(--offers-hub-edge) 8px;
  scroll-behavior: auto;
  scroll-snap-type: none;
  overscroll-behavior-inline: auto;
  scrollbar-width: none;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

html body[data-route="offers"] #app .offers-hub-rail::-webkit-scrollbar {
  display: none;
}

html[dir="ltr"] body[data-route="offers"] #app .offers-hub-rail {
  direction: ltr;
}

html body[data-route="offers"] #app .offers-hub-tile {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  flex: 0 0 calc((100vw - 50px) / 2.74);
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text), transparent 91%);
  border-radius: 8px;
  background: #edf0f4;
  padding: 0;
  box-shadow: 0 5px 16px rgba(24, 19, 42, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, box-shadow 180ms ease;
}

html body[data-route="offers"] #app .offers-hub-tile > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.002);
}

html body[data-route="offers"] #app .offers-hub-tile-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 8, 13, 0.78) 0%, rgba(7, 8, 13, 0.2) 48%, rgba(7, 8, 13, 0.01) 76%);
  pointer-events: none;
}

html body[data-route="offers"] #app .offers-hub-tile-copy {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 9px;
  left: 9px;
  display: grid;
  gap: 3px;
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.44);
}

html[dir="ltr"] body[data-route="offers"] #app .offers-hub-tile-copy {
  text-align: left;
}

html body[data-route="offers"] #app .offers-hub-tile-copy strong,
html body[data-route="offers"] #app .offers-hub-tile-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body[data-route="offers"] #app .offers-hub-tile-copy strong {
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.2;
}

html body[data-route="offers"] #app .offers-hub-tile-copy small {
  font-size: 8px;
  font-weight: 750;
  line-height: 1.15;
  opacity: 0.9;
}

html body[data-route="offers"] #app .offers-hub-tile:active {
  transform: scale(0.97);
}

html body[data-route="offers"] #app .offers-hub-tile.is-active {
  border-color: #7554d2;
  box-shadow: 0 0 0 2px rgba(117, 84, 210, 0.17), 0 8px 19px rgba(54, 37, 109, 0.16);
}

html body[data-route="offers"] #app .offers-hub-tile.is-active::after {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #7554d2;
  content: "";
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.24);
}

html[dir="ltr"] body[data-route="offers"] #app .offers-hub-tile.is-active::after {
  right: auto;
  left: 7px;
}

html body[data-route="offers"] #app .offers-hub-results {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html body[data-route="offers"] #app .offers-hub-results-inner {
  display: grid;
  gap: 14px;
  min-width: 0;
}

html body[data-route="offers"] #app .offers-hub-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-top: 1px;
}

html body[data-route="offers"] #app .offers-hub-results-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(21px, 5.8vw, 31px);
  font-weight: 900;
  line-height: 1.12;
}

html body[data-route="offers"] #app .offers-hub-results-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
}

html body[data-route="offers"] #app .offers-hub-results-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(117, 84, 210, 0.09);
  color: #7554d2;
  padding: 6px 9px;
  font-size: 8.5px;
  font-weight: 850;
  line-height: 1;
}

html body[data-route="offers"] #app .offers-hub-product-grid {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  box-sizing: border-box;
}

html body[data-route="offers"] #app .offers-hub-product-grid > .product-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  content-visibility: auto;
  contain-intrinsic-size: 151px 374px;
}

html body[data-route="offers"] #app .offers-hub-more {
  justify-self: center;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--text), transparent 86%);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 18px;
  font-size: 11px;
  font-weight: 850;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-hub-more {
  border-color: rgba(255, 255, 255, 0.11);
  background: #15161c;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-hub-tile {
  border-color: rgba(255, 255, 255, 0.1);
  background: #181920;
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="offers"] #app .offers-hub-tile.is-active {
  border-color: rgba(129, 228, 213, 0.86);
  box-shadow: 0 0 0 2px rgba(129, 228, 213, 0.13);
}

@media (min-width: 720px) {
  html body[data-route="offers"] #app .offers-hub-rail {
    gap: 11px;
  }

  html body[data-route="offers"] #app .offers-hub-tile {
    flex-basis: 156px;
  }

  html body[data-route="offers"] #app .offers-hub-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-route="offers"] #app .offers-hub-tile,
  html body[data-route="offers"] #app .offers-hub-results {
    transition: none;
  }
}

/* Keep the mobile search chrome attached to the top when the dashboard
   disables the announcement strip. The home header otherwise reserves the
   strip's fixed 38px offset because it floats over the hero. */
@media (max-width: 640px) {
  body.announcement-hidden[data-route="home"] .site-header,
  html[data-theme="dark"] body.announcement-hidden[data-route="home"] .site-header {
    top: 0 !important;
  }
}