/* Final customer workspace density overrides.
   Keep this file loaded after premium.css so page spacing is easy to tune. */

html body.customer-commerce .shell {
  gap: 10px !important;
}

/* zzz-absolute-final-2 mobile product card clipping fix. */
@media (max-width: 640px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-list {
    grid-auto-rows: auto !important;
    align-items: start !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item {
    box-sizing: border-box !important;
    grid-template-rows: minmax(126px, max-content) max-content !important;
    height: auto !important;
    min-height: 218px !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    contain: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item > img.thumb {
    align-self: start !important;
    object-fit: contain !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .product-card-main {
    height: auto !important;
    min-height: 126px !important;
    max-height: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .product-card-buy {
    height: auto !important;
    min-height: 70px !important;
    max-height: none !important;
    margin: 8px -10px 0 !important;
    padding: 7px 10px 7px !important;
    overflow: visible !important;
  }



  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .product-card-hint {
    display: block !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

/* zzz-final mobile product cards: formal-version list layout. */
@media (max-width: 640px) {

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-item {

    height: auto !important;
    max-height: none !important;
    padding: 10px 10px 0 !important;
    overflow: visible !important;
  }














}

/* zzz-mobile-catalog-filter-final: 2x2 controls with sort and clear in the last cell. */




/* Mobile catalog filters: no title block, 2x2 controls, sort dialog trigger + clear confirm. */


@media (max-width: 640px) {


  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #keywordInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #brandFilterInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #categoryFilterInput {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 10px !important;
    line-height: 40px !important;
  }



  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .mobile-catalog-sort-button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton {
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 7px !important;
    z-index: auto !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .mobile-catalog-sort-button::before {
    display: block;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }


  .mobile-sort-modal .mobile-sort-panel {
    width: min(92vw, 420px) !important;
    max-height: min(78vh, 560px) !important;
    padding: 14px !important;
    overflow: auto !important;
  }

  .mobile-sort-modal .mobile-sort-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  .mobile-sort-modal .mobile-sort-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .mobile-sort-options {
    display: grid !important;
    gap: 8px !important;
  }

  .mobile-sort-option {
    width: 100% !important;
    height: 42px !important;
    border: 1px solid #d9e6e3 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0 12px !important;
  }

  .mobile-sort-option.active {
    border-color: #0f766e !important;
    background: #eef8f6 !important;
    color: #0f766e !important;
  }
}

/* zzz-absolute-final-3 mobile product image/detail polish. */
@media (max-width: 640px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item > img.thumb {
    width: 92px !important;
    height: 126px !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: #fff !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .product-card-buy {
    min-height: 64px !important;
    margin-top: 6px !important;
    padding: 6px 10px 5px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .customer-price-tiers {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 5px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .customer-price-tiers div {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 5px 7px 4px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .customer-price-tiers span,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .customer-price-tiers small {
    font-size: 10px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] article.product-item .customer-price-tiers strong {
    font-size: 15px !important;
  }

  html body.customer-commerce .product-detail-panel {
    display: block !important;
    width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: 14px !important;
    overflow: auto !important;
  }

  html body.customer-commerce .product-detail-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.75fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  html body.customer-commerce .product-detail-header h2 {
    font-size: 20px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html body.customer-commerce .product-detail-header .muted {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
    overflow-wrap: anywhere !important;
  }

  html body.customer-commerce .product-detail-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  html body.customer-commerce .product-detail-gallery {
    display: flex !important;
    gap: 8px !important;
    min-height: 76px !important;
    overflow-x: auto !important;
  }

  html body.customer-commerce .product-detail-image-button,
  html body.customer-commerce .product-detail-image-button img {
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
  }

  html body.customer-commerce .product-detail-image-button img {
    object-fit: contain !important;
    background: #fff !important;
  }

  html body.customer-commerce .product-detail-table {
    max-height: none !important;
    overflow: visible !important;
    border-radius: 8px !important;
  }

  html body.customer-commerce .product-detail-table div {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    align-items: center !important;
  }

  html body.customer-commerce .product-detail-table strong,
  html body.customer-commerce .product-detail-table span {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  html body.customer-commerce .product-detail-table strong {
    color: #64748b !important;
    font-weight: 800 !important;
    background: transparent !important;
  }

  html body.customer-commerce .product-detail-table span {
    color: #111827 !important;
    font-weight: 800 !important;
  }

  html body.customer-commerce .product-detail-purchase {
    margin-top: 12px !important;
    padding: 12px !important;
  }

  html body.customer-commerce .detail-quantity-control {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }

  html body.customer-commerce .detail-quantity-control button,
  html body.customer-commerce .detail-quantity-control input,
  html body.customer-commerce #productDetailAddButton {
    min-height: 38px !important;
    font-size: 14px !important;
  }
}

/* Final phone header override: keep logo, balance, logout, and nav in fixed non-overlapping slots. */
@media (max-width: 640px) {

  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    padding-right: 0 !important;
    justify-self: start !important;
  }

  html body.customer-commerce #dashboardView .customer-topbar-actions {
    padding-left: 0 !important;
  }

  html body.customer-commerce #dashboardView .mobile-refresh-actions,
  html body.customer-commerce #dashboardView .mobile-refresh-actions .icon-refresh-button {
    display: none !important;
  }

  html body.customer-commerce #dashboardView .balance-pill {
    align-self: start !important;
    justify-self: stretch !important;
  }



  html body.customer-commerce #dashboardView #logoutButton {
    width: 56px !important;
    min-width: 56px !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  html body.customer-commerce #dashboardView #customerPageNav {
    grid-area: nav !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    justify-self: stretch !important;
  }

  html body.customer-commerce #dashboardView > .topbar h1.brand-logo {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 108px) !important;
    gap: 6px !important;
    width: 150px !important;
    max-width: 150px !important;
    height: 40px !important;
  }




}

/* Mobile shell centering and title trim: keep the four customer pages on the same axis as the account card. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {







  html body.customer-commerce #dashboardView #keywordInput,
  html body.customer-commerce #dashboardView #brandFilterInput,
  html body.customer-commerce #dashboardView #categoryFilterInput,
  html body.customer-commerce #dashboardView #productSortInput,
  html body.customer-commerce #dashboardView #orderKeywordInput,
  html body.customer-commerce #dashboardView #orderStatusFilterInput,
  html body.customer-commerce #dashboardView #logStartDateInput,
  html body.customer-commerce #dashboardView #logEndDateInput {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}

html body.customer-commerce #dashboardView {
  gap: 10px !important;
}

html body.customer-commerce #dashboardView > .topbar {
  grid-template-columns: minmax(320px, 0.8fr) minmax(620px, auto) !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 104px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
}

html body.customer-commerce #dashboardView > .topbar > div:first-child {
  display: grid !important;
  grid-template-columns: auto minmax(0, auto) !important;
  grid-template-areas:
    "logo badge"
    "logo meta" !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: start !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  min-width: 0 !important;
}

html body.customer-commerce #dashboardView > .topbar .brand-eyebrow {
  grid-area: badge !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body.customer-commerce #dashboardView > .topbar .brand-logo {
  grid-area: logo !important;
  align-self: center !important;
  height: 44px !important;
  margin: 0 !important;
}

html body.customer-commerce #customerMeta {
  grid-area: meta !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html body.customer-commerce .customer-topbar-actions {
  grid-template-columns: auto auto auto !important;
  grid-template-areas: "balance nav logout" !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 10px !important;
}

html body.customer-commerce .customer-topbar-actions .mobile-refresh-actions {
  display: none !important;
}

html body.customer-commerce .balance-pill {
  grid-area: balance !important;
  box-sizing: border-box !important;
  min-width: 112px !important;
  width: 132px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 6px 16px !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}

html body.customer-commerce .balance-pill span {
  font-size: 11px !important;
  line-height: 1 !important;
}

html body.customer-commerce .balance-pill strong {
  font-size: 22px !important;
  line-height: 1 !important;
}

html body.customer-commerce .customer-page-nav {
  grid-area: nav !important;
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 3px !important;
  align-self: stretch !important;
  align-items: center !important;
}

html body.customer-commerce .customer-page-nav button {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
}

html body.customer-commerce #logoutButton {
  grid-area: logout !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  align-self: stretch !important;
}

html body.customer-commerce #dashboardView > .grid {
  gap: 10px !important;
  margin-top: 0 !important;
}

html body.customer-commerce .customer-page-panel {
  padding: 20px 24px !important;
}

html body.customer-commerce .customer-page-panel > .topbar {
  box-sizing: content-box !important;
  align-items: center !important;
  height: 24px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #ece7df !important;
  overflow: visible !important;
}

html body.customer-commerce .customer-page-panel > .topbar > div:first-child {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.customer-commerce .customer-page-panel > .topbar h2 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

html body.customer-commerce .customer-page-panel > .topbar .muted {
  display: inline !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.customer-commerce [data-customer-page-panel="products"] > .topbar .muted {
  display: none !important;
}

html body.customer-commerce .customer-page-panel > .topbar + .toolbar,
html body.customer-commerce .customer-page-panel > .topbar + .cart-list,
html body.customer-commerce .customer-page-panel > .topbar + .order-list,
html body.customer-commerce .customer-page-panel > .topbar + .log-list {
  margin-top: 12px !important;
}

html body.customer-commerce .toolbar {
  margin-bottom: 10px !important;
}

html body.customer-commerce .filter-result-count {
  margin: 8px 0 12px !important;
}

html body.customer-commerce .cart-list,
html body.customer-commerce .order-list,
html body.customer-commerce .log-list {
  gap: 10px !important;
}

@media (max-width: 1280px) {
  html body.customer-commerce #dashboardView > .topbar {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  html body.customer-commerce .customer-topbar-actions {
    grid-template-columns: auto 1fr auto !important;
    justify-content: stretch !important;
  }
}

@media (max-width: 760px) {
  html body.customer-commerce #dashboardView > .topbar {
    padding: 12px !important;
  }

  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    grid-template-columns: auto 1fr !important;
  }

  html body.customer-commerce .customer-topbar-actions {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "balance logout"
      "nav nav" !important;
  }

  html body.customer-commerce .customer-page-panel {
    padding: 16px 14px !important;
  }

  html body.customer-commerce .customer-page-panel > .topbar h2 {
    font-size: 21px !important;
  }
}

/* Final page-title density: title metadata stays on the same line. */
html body.customer-commerce .customer-page-panel > div.topbar > div:first-child {
  display: inline-flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  height: 24px !important;
}

html body.customer-commerce .customer-page-panel > div.topbar > div:first-child > h2 {
  display: inline !important;
  flex: 0 0 auto !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  height: 24px !important;
}

html body.customer-commerce .customer-page-panel > div.topbar > div:first-child > p.muted {
  display: inline !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body.customer-commerce [data-customer-page-panel="products"] > div.topbar > div:first-child > p.muted,
html body.customer-commerce #productCountText {
  display: none !important;
}

/* Product meta should read as plain text, not as a pill card. */
html body.customer-commerce .product-meta-line {
  display: block !important;
  width: auto !important;
  margin: 8px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f766e !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Product filter bar: denser single-row controls with visible sorting. */
html body.customer-commerce [data-customer-page-panel="products"] > .toolbar {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) 170px 170px 170px 68px !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] > .toolbar:has(#productSortInput),
html body.customer-commerce [data-customer-page-panel="products"] > .toolbar:has(#productSortInput.hidden) {
  grid-template-columns: minmax(320px, 1fr) 170px 170px 170px 68px !important;
}

html body.customer-commerce #productSortInput,
html body.customer-commerce #productSortInput.hidden {
  display: block !important;
  visibility: visible !important;
}

html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > input,
html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > select,
html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > button {
  box-sizing: border-box !important;
  height: 40px !important;
  min-height: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

@media (max-width: 980px) {
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar {
    grid-template-columns: 1fr 1fr !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > input {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 981px) {
  html body.customer-commerce #keywordInput {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #brandFilterInput {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #categoryFilterInput {
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #productSortInput {
    grid-column: 4 / 5 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #clearCatalogFiltersButton {
    grid-column: 5 / 6 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Product cards: match the formal version's calm spacing and alignment. */
html body.customer-commerce [data-customer-page-panel="products"] .product-list {
  align-items: stretch !important;
  gap: 18px !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-item {
  display: grid !important;
  grid-template-rows: 178px minmax(118px, auto) auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #ebe4db !important;
  border-radius: 8px !important;
  background: #fffdf9 !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05) !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-item:hover,
html body.customer-commerce [data-customer-page-panel="products"] .product-item:focus-visible {
  border-color: rgba(199, 151, 67, 0.5) !important;
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08) !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-item > .thumb {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 178px !important;
  min-height: 178px !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #eef8f8 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-card-main {
  display: block !important;
  padding: 5px 16px 7px !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-card-main strong {
  display: -webkit-box !important;
  min-height: 35px !important;
  margin: 0 0 7px !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-meta-line {
  margin: 0 0 8px !important;
  color: #0f766e !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-sku-line {
  margin: 0 0 8px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-model-spec-line {
  display: -webkit-box !important;
  min-height: 36px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-card-buy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 4px !important;
  align-self: end !important;
  min-height: 0 !important;
  padding: 6px 16px 6px !important;
  border-top: 1px solid #f0ebe4 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: 22px !important;
  gap: 2px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers div {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 50px minmax(70px, 1fr) 28px !important;
  align-items: center !important;
  column-gap: 6px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers span,
html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers strong,
html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers small {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers span {
  justify-self: start !important;
  color: #63767b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers strong {
  justify-self: center !important;
  color: #e11d2e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers small {
  justify-self: end !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: right !important;
}

html body.customer-commerce [data-customer-page-panel="products"] .product-card-hint {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

@media (max-width: 760px) {
  html body.customer-commerce [data-customer-page-panel="products"] .product-item {
    grid-template-rows: auto !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-item > .thumb {
    height: 190px !important;
  }
}

/* Cart checkout: keep the address book visible on the right side. */
html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 42%) !important;
  gap: 18px !important;
  align-items: start !important;
  margin-top: 14px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form,
html body.customer-commerce [data-customer-page-panel="cart"] .customer-address-book {
  min-width: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form {
  display: grid !important;
  gap: 10px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form > .field {
  margin: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form input,
html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form select {
  min-height: 42px !important;
  height: 42px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form textarea {
  min-height: 70px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-form #submitOrderButton {
  width: min(280px, 100%) !important;
  min-height: 44px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .customer-address-book {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid #e7e1d8 !important;
  border-radius: 8px !important;
  background: #fffdf9 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-header h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-header .muted {
  display: block !important;
  margin: 4px 0 0 !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-actions .compact-button {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-search-input {
  width: 100% !important;
  min-height: 40px !important;
  height: 40px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-list {
  display: grid !important;
  gap: 8px !important;
  max-height: 300px !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-item {
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 7px !important;
  background: #ffffff !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-book-item.selected {
  border-color: #0f766e !important;
  background: #f0fdfa !important;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.2) !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-select-button {
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  text-align: left !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-select-button strong {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-select-button p {
  margin: 0 !important;
  color: #4b5563 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body.customer-commerce [data-customer-page-panel="cart"] .address-item-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor.hidden {
  display: none !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid #e7e1d8 !important;
  border-radius: 8px !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel > .topbar {
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel > .topbar h2 {
  margin: 0 !important;
  font-size: 16px !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel > .topbar .muted {
  display: none !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .field {
  margin-bottom: 8px !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor input,
html body.customer-commerce #addressEditor.customer-inline-address-editor select {
  min-height: 38px !important;
  height: 38px !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor textarea {
  min-height: 58px !important;
}

html body.customer-commerce #addressEditor.customer-inline-address-editor .form-actions {
  justify-content: flex-end !important;
  margin-top: 8px !important;
}

@media (max-width: 980px) {
  html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-layout {
    grid-template-columns: 1fr !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .address-book-list {
    max-height: 260px !important;
  }
}

/* Mobile workspace repair: the desktop density rules above are intentionally
   strong, so keep the phone rules last and explicit. */
@media (max-width: 700px) {
  html,
  html body.customer-commerce {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.customer-commerce {
    min-width: 0 !important;
  }

  html body.customer-commerce *,
  html body.customer-commerce *::before,
  html body.customer-commerce *::after {
    box-sizing: border-box !important;
  }

  html body.customer-commerce .shell,
  html body.customer-commerce #dashboardView,
  html body.customer-commerce #dashboardView > .grid,
  html body.customer-commerce .customer-page-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.customer-commerce .shell {
    gap: 8px !important;
    padding: 8px !important;
  }

  html body.customer-commerce #dashboardView {
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "logo badge"
      "logo meta" !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    min-width: 0 !important;
  }

  html body.customer-commerce #dashboardView > .topbar h1.brand-logo {
    grid-area: logo !important;
    display: inline-grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    height: 40px !important;
    min-width: 0 !important;
    max-width: 178px !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
    z-index: 2 !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word {
    display: grid !important;
    align-content: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > span {
    display: block !important;
    font-size: 22px !important;
    line-height: 0.9 !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-eyebrow {
    grid-area: badge !important;
    align-self: end !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #customerMeta {
    grid-area: meta !important;
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce .customer-topbar-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "balance logout"
      "nav nav" !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
  }

  html body.customer-commerce .balance-pill,
  html body.customer-commerce #logoutButton {
    height: 40px !important;
    min-height: 40px !important;
    align-self: stretch !important;
  }

  html body.customer-commerce .balance-pill {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 10px !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 8px !important;
  }

  html body.customer-commerce .balance-pill span,
  html body.customer-commerce .balance-pill strong {
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce .balance-pill strong {
    justify-self: start !important;
    font-size: 20px !important;
  }

  html body.customer-commerce #logoutButton {
    width: 64px !important;
    padding: 0 12px !important;
  }

  html body.customer-commerce .customer-page-nav {
    display: grid !important;
    position: static !important;
    inset: auto !important;
    z-index: 1 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }

  html body.customer-commerce .customer-page-nav button {
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 4px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce .customer-page-panel {
    padding: 12px 10px !important;
    border-radius: 8px !important;
  }

  html body.customer-commerce .customer-page-panel > .topbar,
  html body.customer-commerce [data-customer-page-panel="products"] > .topbar,
  html body.customer-commerce [data-customer-page-panel="orders"] > .topbar,
  html body.customer-commerce [data-customer-page-panel="logs"] > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 0 0 8px !important;
    align-items: center !important;
  }

  html body.customer-commerce .customer-page-panel > .topbar > div:first-child {
    height: auto !important;
    min-width: 0 !important;
  }

  html body.customer-commerce .customer-page-panel > .topbar h2 {
    height: auto !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce .customer-export-actions {
    min-width: 0 !important;
    gap: 6px !important;
  }

  html body.customer-commerce .customer-export-actions .icon-refresh-button {
    display: none !important;
  }

  html body.customer-commerce .customer-export-actions button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  html body.customer-commerce .toolbar,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar,
  html body.customer-commerce [data-customer-page-panel="orders"] .toolbar,
  html body.customer-commerce .log-filter-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 8px 0 10px !important;
    padding: 8px !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  html body.customer-commerce .toolbar > *,
  html body.customer-commerce .toolbar input,
  html body.customer-commerce .toolbar select,
  html body.customer-commerce .toolbar button,
  html body.customer-commerce .toolbar .mobile-date-field {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: none !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > input,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > select,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > button,
  html body.customer-commerce [data-customer-page-panel="orders"] .toolbar > input {
    grid-column: 1 / -1 !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar #keywordInput,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar #brandFilterInput,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar #categoryFilterInput,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar #productSortInput,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar #clearCatalogFiltersButton {
    display: block !important;
    flex: 0 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > button,
  html body.customer-commerce [data-customer-page-panel="orders"] .toolbar > button,
  html body.customer-commerce .log-filter-toolbar > button {
    grid-column: auto !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > select,
  html body.customer-commerce [data-customer-page-panel="products"] > .toolbar > button {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.customer-commerce .mobile-date-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
  }

  html body.customer-commerce .mobile-date-field span {
    position: static !important;
    display: block !important;
    min-width: max-content !important;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce .mobile-date-field input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 176px auto auto !important;
    width: 100% !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-item > .thumb {
    display: block !important;
    width: 100% !important;
    height: 176px !important;
    min-height: 176px !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    object-fit: contain !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-card-main {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    padding: 7px 12px 5px !important;
    text-align: left !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-card-main strong {
    min-height: 32px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-meta-line,
  html body.customer-commerce [data-customer-page-panel="products"] .product-sku-line,
  html body.customer-commerce [data-customer-page-panel="products"] .product-model-spec-line {
    font-size: 11px !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .product-card-buy {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 5px 12px 6px !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 19px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers div {
    display: grid !important;
    grid-template-columns: 52px 70px 36px !important;
    grid-template-rows: 22px !important;
    grid-auto-rows: 0 !important;
    justify-content: start !important;
    align-items: center !important;
    height: 22px !important;
    min-height: 22px !important;
    column-gap: 4px !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers span {
    display: block !important;
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    place-self: center start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers strong {
    display: block !important;
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    place-self: center start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    justify-self: start !important;
    font-size: 13px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="products"] .customer-price-tiers small {
    display: block !important;
    grid-column: 3 / 4 !important;
    grid-row: 1 !important;
    place-self: center start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-item.cart-item-detailed {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-item-thumb-button {
    width: 82px !important;
    height: 82px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-item-thumb {
    width: 82px !important;
    height: 82px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-item-main {
    min-width: 0 !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-quantity-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 7px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-delete-button,
  html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .cart-checkout-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .address-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .customer-address-book {
    padding: 10px !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-header {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    justify-content: stretch !important;
  }

  html body.customer-commerce [data-customer-page-panel="cart"] .address-book-inline-actions .compact-button {
    width: 100% !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.customer-commerce .order-list,
  html body.customer-commerce .log-list {
    gap: 8px !important;
  }

  html body.customer-commerce .order-list article,
  html body.customer-commerce .log-list article,
  html body.customer-commerce .log-item {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.customer-commerce .customer-order-product {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px 10px !important;
    align-items: center !important;
  }

  html body.customer-commerce .customer-order-product > * {
    min-width: 0 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  html body.customer-commerce .log-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html body.customer-commerce .log-item strong,
  html body.customer-commerce .log-item .amount {
    min-width: max-content !important;
    white-space: nowrap !important;
  }
}

/* Final mobile layout override for local testing. Keep this at EOF. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView .customer-page-panel.hidden,
  html body.customer-commerce #dashboardView [data-customer-page-panel].hidden {
    display: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel]:not(.hidden) {
    display: block !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel] {
    padding: 12px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel] > .topbar {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel] > .topbar h2 {
    font-size: clamp(22px, 5vw, 30px) !important;
    line-height: 1.05 !important;
  }

  html body.customer-commerce #dashboardView .balance-pill {
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView .balance-pill strong {
    min-width: 0 !important;
    max-width: 5.8em !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar p,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar .icon-refresh-button {
    display: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .catalog-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .catalog-filter-toolbar > input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .catalog-filter-toolbar > select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .filter-result-count {
    display: none !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] #cartList,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] label.field:has(textarea),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-book {
    grid-column: 1 / -1 !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .field {
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] select {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] textarea {
    min-height: 68px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item.cart-item-detailed {
    display: grid !important;
    grid-template-columns: clamp(72px, 22vw, 104px) minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: 28px 42px 28px 40px !important;
    grid-auto-rows: 32px !important;
    gap: 5px !important;
    justify-self: end !important;
    align-self: start !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions .cart-quantity-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions .cart-delete-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 100% !important;
    font-size: 12px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions .cart-checkout-button {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-book,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-book-list {
    width: 100% !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-item-actions button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > *,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .mobile-date-field,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .mobile-date-field {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 0 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .mobile-date-field span,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .mobile-date-field span {
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

/* Final explicit mobile placement pass. Keep below all compact rules. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel].hidden {
    display: none !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderRecipientNameInput) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderContactPhoneInput) {
    grid-column: 2 !important;
    grid-row: auto !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(1) {
    grid-column: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(2) {
    grid-column: 2 !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .customer-address-book {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .customer-address-book,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .cart-submit-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .customer-address-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > label.field:has(textarea) {
    grid-column: 1 / -1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .address-grid {
    display: contents !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #orderKeywordInput {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #orderStatusFilterInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] label.mobile-date-field:has(#orderStartDateInput) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] label.mobile-date-field:has(#orderEndDateInput) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #searchOrdersButton {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #clearOrderFiltersButton {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] label.mobile-date-field:has(#logStartDateInput) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] label.mobile-date-field:has(#logEndDateInput) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #searchLogsButton {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #clearLogFiltersButton {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}


/* Touch-device mobile placement pass for high-resolution phones. */

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel].hidden {
    display: none !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"]:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderRecipientNameInput) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderContactPhoneInput) {
    grid-column: 2 !important;
    grid-row: auto !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid {
    display: contents !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(1) {
    grid-column: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(2) {
    grid-column: 2 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .customer-address-book {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .customer-address-book,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .cart-submit-actions,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .customer-address-actions,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > label.field:has(textarea) {
    grid-column: 1 / -1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout > .address-grid {
    display: contents !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #orderKeywordInput {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #orderStatusFilterInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] label.mobile-date-field:has(#orderStartDateInput) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] label.mobile-date-field:has(#orderEndDateInput) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #searchOrdersButton {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #clearOrderFiltersButton {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] label.mobile-date-field:has(#logStartDateInput) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] label.mobile-date-field:has(#logEndDateInput) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #searchLogsButton {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #clearLogFiltersButton {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

/* Local testing mobile polish, 2026-06-26. Keep at EOF so it wins over the
   older desktop-density and touch-device overrides above. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html.mobile-customer-layout body.customer-commerce #dashboardView .balance-pill {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView .balance-pill strong {
    max-width: 6.4em !important;
    font-size: clamp(18px, 5.1vw, 25px) !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"]:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .topbar,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-list,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .customer-address-actions,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-submit-actions,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(textarea) {
    grid-column: 1 / -1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(input),
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field {
    min-width: 0 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid {
    display: contents !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(1),
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(2) {
    grid-column: span 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] input,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] select,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] textarea {
    width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(13px, 3.2vw, 15px) !important;
    line-height: 1.25 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] textarea {
    min-height: 82px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-list {
    gap: 8px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item.cart-item-detailed {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px 10px !important;
    padding: 10px !important;
    min-height: 0 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-thumb-button,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-thumb {
    width: 96px !important;
    height: 96px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-main {
    min-width: 0 !important;
    gap: 3px !important;
    align-self: start !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-main strong {
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.24 !important;
    -webkit-line-clamp: 2 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-main p {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(46px, 1fr) 38px 58px !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions button,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-delete-button {
    grid-column: 4 !important;
    width: 100% !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-book,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-layout {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-book-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-item-actions button {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product {
    display: grid !important;
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    align-items: start !important;
    padding: 8px 10px !important;
    min-height: 0 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product p,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product strong,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product span {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product p,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product strong {
    white-space: nowrap !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-list {
    gap: 7px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item {
    padding: 10px 12px !important;
    min-height: 0 !important;
    gap: 6px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item p {
    margin-top: 5px !important;
    line-height: 1.24 !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item strong,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item .amount {
    line-height: 1.15 !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 390px), (max-width: 390px) {
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item.cart-item-detailed {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 9px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-thumb-button,
  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-thumb {
    width: 86px !important;
    height: 86px !important;
  }

  html.mobile-customer-layout body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-quantity-actions {
    grid-template-columns: 34px minmax(42px, 1fr) 34px 52px !important;
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"]:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-list,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .customer-address-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-submit-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(textarea),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .cart-checkout-layout,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > .customer-address-book {
    grid-column: 1 / -1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderRecipientNameInput),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderContactPhoneInput),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderRecipientNameInput),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(1) {
    grid-column: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] > label.field:has(#orderContactPhoneInput),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(2) {
    grid-column: 2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid {
    display: contents !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-grid > label.field:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* Local testing mobile form hardening: target the DOM after addresses.js moves the checkout fields. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-layout {
    display: grid !important;
    gap: 10px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    min-width: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field:has(textarea),
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .cart-submit-actions {
    grid-column: 1 / -1 !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .address-grid > label.field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }




  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form select,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form textarea {
    min-height: 42px !important;
    font-size: clamp(13px, 3.4vw, 15px) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form textarea {
    min-height: 72px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions .primary {
    width: 100% !important;
    min-height: 46px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-book {
    padding: 12px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-book-inline-header {
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-book-inline-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-book-inline-actions button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .address-item-actions button {
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: 12px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-main strong {
    font-size: clamp(12px, 3.25vw, 14px) !important;
    line-height: 1.2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-item-main p {
    font-size: clamp(10.5px, 2.95vw, 12.5px) !important;
    line-height: 1.2 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product {
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    gap: 3px 10px !important;
    padding: 7px 9px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-order-product span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item {
    padding: 8px 10px !important;
    gap: 4px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-item p {
    margin-top: 3px !important;
    line-height: 1.18 !important;
  }
}

/* Local testing mobile checkout grid: full-width rows for shipping fields. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field:has(#orderRecipientNameInput) {
    grid-column: 1 / 4 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field:has(#orderContactPhoneInput) {
    grid-column: 4 / 7 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .address-grid {
    display: contents !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .address-grid > label.field:nth-child(1) {
    grid-column: 1 / 3 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .address-grid > label.field:nth-child(2) {
    grid-column: 3 / 5 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .address-grid > label.field:nth-child(3) {
    grid-column: 5 / 7 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field:has(#orderShippingAddressInput) {
    grid-column: 1 / 4 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > label.field:has(#orderRemarkInput) {
    grid-column: 4 / 7 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] #orderShippingAddressInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] #orderRemarkInput {
    min-height: 96px !important;
    height: 96px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-checkout-form > .cart-submit-actions {
    grid-column: 1 / -1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .customer-address-book {
    grid-column: 1 / -1 !important;
  }
}

/* Local testing mobile header/filter compaction: align titles and action buttons. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {



  html body.customer-commerce #dashboardView .customer-page-panel > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar h2 {
    margin: 0 !important;
    font-size: clamp(25px, 6.2vw, 34px) !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar .muted,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar .muted,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar .muted {
    margin: 0 !important;
    font-size: clamp(14px, 3.7vw, 18px) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .customer-export-actions {
    display: flex !important;
    align-items: center !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar > input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar > select,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > select,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: clamp(14px, 3.7vw, 17px) !important;
    line-height: 1.1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field span,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field span {
    line-height: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field input {
    line-height: 1 !important;
  }
}

/* Desktop catalog filter row: keep mobile sort trigger out of the desktop layout. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar {
    display: grid !important;
    grid-template-columns: minmax(360px, 0.82fr) minmax(130px, 170px) minmax(130px, 170px) minmax(150px, 190px) 72px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 7px 10px !important;
    box-sizing: border-box !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .mobile-catalog-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .mobile-catalog-sort-select {
    display: contents !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .mobile-catalog-sort-button {
    display: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #keywordInput {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #brandFilterInput {
    grid-column: 2 / 3 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #categoryFilterInput {
    grid-column: 3 / 4 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #productSortInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #productSortInput.hidden {
    position: static !important;
    inset: auto !important;
    grid-column: 4 / 5 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton {
    grid-column: 5 / 6 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }
}

/* Local testing mobile header/filter refinement: make the title row lower and cleaner. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {



  html body.customer-commerce #dashboardView .customer-page-panel > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar h2 {
    font-size: clamp(22px, 5.25vw, 29px) !important;
    letter-spacing: 0 !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    padding: 0 14px !important;
    font-size: clamp(13px, 3.45vw, 16px) !important;
    border-radius: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton {
    min-width: 72px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    min-width: 86px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .customer-export-actions {
    height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar {
    gap: 5px !important;
    padding: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar > input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar > select,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > select,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field {
    height: var(--xm-mobile-filter-height) !important;
    min-height: var(--xm-mobile-filter-height) !important;
    max-height: var(--xm-mobile-filter-height) !important;
    font-size: clamp(12px, 3.15vw, 15px) !important;
    border-radius: 7px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar.catalog-filter-toolbar > input {
    padding-left: 10px !important;
    padding-right: 8px !important;
    text-overflow: ellipsis !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field {
    gap: 4px !important;
    padding-left: 9px !important;
    padding-right: 7px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .toolbar > .mobile-date-field input,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .log-filter-toolbar > .mobile-date-field input {
    height: calc(var(--xm-mobile-filter-height) - 2px) !important;
    min-height: calc(var(--xm-mobile-filter-height) - 2px) !important;
    max-height: calc(var(--xm-mobile-filter-height) - 2px) !important;
    font-size: inherit !important;
  }
}

/* Final mobile shell centering and title trim. This stays last so the four panels match the account card axis. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {

  html body.customer-commerce #dashboardView > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel],
  html body.customer-commerce #dashboardView [data-customer-page-panel]:not(.hidden) {
    box-sizing: border-box !important;
    width: var(--xm-mobile-shell-width) !important;
    max-width: var(--xm-mobile-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


  html body.customer-commerce #dashboardView .customer-page-panel > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar {
    height: auto !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar h2 {
    font-size: clamp(19px, 4.7vw, 26px) !important;
    height: auto !important;
  }


  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    font-size: clamp(12px, 3.05vw, 14px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Mobile final alignment: keep account card and the four page panels on the same center axis. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView {
    --xm-mobile-shell-width: min(100%, calc(100vw - 32px));
    display: grid !important;
    justify-items: center !important;
  }

  html body.customer-commerce #dashboardView > .topbar,
  html body.customer-commerce #dashboardView > .grid,
  html body.customer-commerce #dashboardView [data-customer-page-panel],
  html body.customer-commerce #dashboardView [data-customer-page-panel]:not(.hidden) {
    box-sizing: border-box !important;
    width: var(--xm-mobile-shell-width) !important;
    max-width: var(--xm-mobile-shell-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.customer-commerce #dashboardView > .grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel {
    --xm-mobile-title-action-height: 35px;
    --xm-mobile-filter-height: 36px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }




}

/* Mobile title/action row lock: prevent older rules from dropping buttons under the title. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView .customer-page-panel > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar > div:first-child,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar > div:first-child,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar > div:first-child,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar > div:first-child {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: var(--xm-mobile-title-action-height) !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar .icon-refresh-button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar .icon-refresh-button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar .icon-refresh-button {
    display: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] .customer-export-actions {
    display: contents !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
  }
}

/* Mobile hard alignment lock: top account card and content panels share one shell. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView {
    --xm-mobile-shell-width: min(720px, calc(100vw - 32px));
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  html body.customer-commerce #dashboardView > .topbar,
  html body.customer-commerce #dashboardView > .grid {
    box-sizing: border-box !important;
    width: var(--xm-mobile-shell-width) !important;
    max-width: var(--xm-mobile-shell-width) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  html body.customer-commerce #dashboardView > .grid > .customer-page-panel,
  html body.customer-commerce #dashboardView > .grid > [data-customer-page-panel],
  html body.customer-commerce #dashboardView > .grid > [data-customer-page-panel]:not(.hidden) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-column: 1 !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel {
    --xm-mobile-title-action-height: 34px;
    position: relative !important;
    padding: 12px !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar {
    min-height: var(--xm-mobile-title-action-height) !important;
    padding-bottom: 4px !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar h2,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar h2 {
    font-size: clamp(17px, 4.15vw, 23px) !important;
    line-height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
  }

  html body.customer-commerce #dashboardView .customer-page-panel > .topbar .muted,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar .muted,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] > .topbar .muted {
    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="logs"] #exportLogsButton {
    height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
    max-height: var(--xm-mobile-title-action-height) !important;
    font-size: clamp(11px, 2.9vw, 13px) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .topbar {
    padding-right: calc(136px + 10px) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px 8px !important;
    position: static !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #keywordInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #brandFilterInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #categoryFilterInput,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] > .toolbar #productSortInput {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] #clearCatalogFiltersButton {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: min(136px, 36vw) !important;
    z-index: 2 !important;
  }
}

/* Mobile top card component lock: active tabs must not move or resize. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView > .topbar {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    justify-items: stretch !important;
    overflow: hidden !important;
  }


  html body.customer-commerce #dashboardView .customer-topbar-actions {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "balance logout"
      "nav nav" !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-content: stretch !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView .balance-pill {
    grid-area: balance !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  html body.customer-commerce #dashboardView #logoutButton {
    grid-area: logout !important;
    justify-self: end !important;
  }

  html body.customer-commerce #dashboardView .customer-page-nav {
    grid-area: nav !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 3px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  html body.customer-commerce #dashboardView .customer-page-nav button,
  html body.customer-commerce #dashboardView .customer-page-nav button.active {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    transform: none !important;
    line-height: 44px !important;
    text-align: center !important;
  }

  html body.customer-commerce #dashboardView .customer-page-nav button.active {
    border-color: rgba(33, 126, 115, 0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(33, 126, 115, 0.16), 0 0 0 3px rgba(33, 126, 115, 0.08) !important;
  }
}

/* Mobile top brand lock: keep the XINMEI logo proportional and clear of the balance area. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    box-sizing: border-box !important;
    width: min(45%, 228px) !important;
    max-width: min(45%, 228px) !important;
    min-width: 0 !important;
    overflow: visible !important;
    justify-self: start !important;
  }

  html body.customer-commerce #dashboardView > .topbar h1.brand-logo {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 142px) !important;
    align-items: center !important;
    gap: 7px !important;
    width: 190px !important;
    max-width: 190px !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-mark {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 12px !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word {
    display: grid !important;
    align-content: center !important;
    width: 142px !important;
    max-width: 142px !important;
    min-width: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > span {
    display: block !important;
    width: 142px !important;
    max-width: 142px !important;
    font-size: 20px !important;
    line-height: 0.92 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
    font-stretch: normal !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView .customer-topbar-actions {
    padding-left: max(12px, 2vw) !important;
  }

  html body.customer-commerce #dashboardView .balance-pill {
    column-gap: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html body.customer-commerce #dashboardView .balance-pill span {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView .balance-pill strong {
    max-width: none !important;
    font-size: clamp(15px, 3.8vw, 19px) !important;
    line-height: 1 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* z-final mobile header lock: this must stay at the end of the file. */
@media (max-width: 640px) {
  html body.customer-commerce #dashboardView > .topbar {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) 56px !important;
    grid-template-areas:
      "brand balance logout"
      "nav nav nav" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    width: 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
  }












  html body.customer-commerce #dashboardView .customer-page-nav,
  html body.customer-commerce #dashboardView .customer-tabs {
    grid-area: nav !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

/* zzz-final phone header geometry lock. Keep this as the last rule block. */
@media (max-width: 640px) {
  html body.customer-commerce #dashboardView > header.topbar,
  html body.customer-commerce #dashboardView > .topbar {
    display: grid !important;
    grid-template-columns: 136px minmax(0, 1fr) 54px !important;
    grid-template-areas:
      "brand balance logout"
      "nav nav nav" !important;
    column-gap: 7px !important;
    row-gap: 8px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView > .topbar > div:first-child {
    grid-area: brand !important;
    display: block !important;
    width: 136px !important;
    max-width: 136px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView > .topbar > div:first-child > .brand-eyebrow,
  html body.customer-commerce #dashboardView > .topbar > div:first-child > #customerMeta {
    display: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar h1.brand-logo {
    display: flex !important;
    align-items: center !important;
    width: 136px !important;
    max-width: 136px !important;
    min-width: 0 !important;
    height: 38px !important;
    gap: 5px !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-mark {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    aspect-ratio: 1 / 1 !important;
    font-size: 10px !important;
    line-height: 34px !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word {
    display: grid !important;
    align-content: center !important;
    width: 94px !important;
    max-width: 94px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > span {
    width: 94px !important;
    max-width: 94px !important;
    font-size: 16px !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  html body.customer-commerce #dashboardView > .topbar .brand-logo-word > small {
    width: 94px !important;
    max-width: 94px !important;
    margin-top: 1px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html body.customer-commerce #dashboardView .customer-topbar-actions {
    display: contents !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.customer-commerce #dashboardView .mobile-refresh-actions {
    display: none !important;
  }

  html body.customer-commerce #dashboardView .balance-pill {
    grid-area: balance !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body.customer-commerce #dashboardView .balance-pill span {
    flex: 0 0 auto !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView .balance-pill strong {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body.customer-commerce #dashboardView #logoutButton {
    grid-area: logout !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html body.customer-commerce #dashboardView .customer-page-nav {
    grid-area: nav !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

/* zzz-absolute-final mobile product cards: formal-version list layout. */
@media (max-width: 640px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-item {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "photo info"
      "buy buy" !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 10px 10px 8px !important;
    overflow: hidden !important;
    border: 1px solid #ece3d8 !important;
    border-radius: 8px !important;
    background: #fffdf9 !important;
    box-shadow: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-item > .thumb {
    grid-area: photo !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    background: #eef8f8 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-card-main {
    grid-area: info !important;
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-card-main strong {
    display: -webkit-box !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-meta-line,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-sku-line,
  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-model-spec-line {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-meta-line {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-sku-line {
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-model-spec-line {
    display: -webkit-box !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-card-buy {
    grid-area: buy !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 8px -10px -8px !important;
    padding: 8px 10px 6px !important;
    overflow: visible !important;
    border-top: 1px solid #eee7de !important;
    background: #fffdf9 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .customer-price-tiers {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .customer-price-tiers div {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: end !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 7px 8px 6px !important;
    overflow: hidden !important;
    border: 1px solid #d7ebe9 !important;
    border-radius: 6px !important;
    background: #f8ffff !important;
    box-shadow: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .customer-price-tiers span {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .customer-price-tiers strong {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: end !important;
    color: #e11d2e !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .customer-price-tiers small {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: end !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="products"] .product-card-hint {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }
}

/* zzz-mobile-orders-invoice-actions-final: keep invoice/export on the title line. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar > div:first-child {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: clamp(156px, 40vw, 216px) !important;
    height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
    align-items: stretch !important;
    justify-self: end !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions .icon-refresh-button {
    display: none !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #requestInvoiceButton,
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] #exportOrdersButton {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--xm-mobile-title-action-height) !important;
    min-height: var(--xm-mobile-title-action-height) !important;
    max-height: var(--xm-mobile-title-action-height) !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 8px !important;
    font-size: clamp(11px, 2.75vw, 13px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 430px), (max-width: 430px) {
  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] > .topbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="orders"] .customer-export-actions {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Customer phone acceptance anchors: 360/390/393 CSS px, including DPR-3 devices. */
@media (hover: none) and (pointer: coarse), (max-width: 640px) {
  html body.customer-commerce .product-detail-panel {
    width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  html body.customer-commerce .product-detail-body,
  html body.customer-commerce .product-detail-info {
    min-height: auto !important;
    overflow: visible !important;
  }

  html body.customer-commerce .product-detail-table {
    max-height: none !important;
    overflow: visible !important;
  }

  html body.customer-commerce .product-detail-header {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: start !important;
  }

  html body.customer-commerce .product-detail-header h2 {
    display: none !important;
  }

  html body.customer-commerce .product-detail-header button,
  html body.customer-commerce .product-image-viewer-header button {
    min-width: 58px !important;
    width: auto !important;
    padding: 7px 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }

  html body.customer-commerce .product-image-viewer-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: start !important;
    gap: 10px !important;
  }

  html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel > .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 8px !important;
  }

  html body.customer-commerce #addressEditor.customer-inline-address-editor .address-modal-panel > .topbar h2 {
    white-space: nowrap !important;
  }

  html body.customer-commerce #addressEditor.customer-inline-address-editor #cancelAddressEditButton {
    width: auto !important;
    min-width: 54px !important;
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #addressEditor.customer-inline-address-editor .check-row {
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    overflow: hidden !important;
  }

  html body.customer-commerce #addressEditor.customer-inline-address-editor .check-row span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions button,
  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions .primary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 6px !important;
    font-size: clamp(11px, 3.25vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions #saveCheckoutAddressButton {
    grid-column: 1 !important;
  }

  html body.customer-commerce #dashboardView [data-customer-page-panel="cart"] .cart-submit-actions #submitOrderButton {
    grid-column: 2 !important;
  }
}