/* Commerce-only touch/layout corrections; no route or business behavior changes. */

/* The reference alignment layer set these action buttons to height:30px. */
html body #app .lb-order-ref-page .lb-order-ref-actions > button {
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  line-height: 1.4;
}
html body #app .lb-order-ref-page .lb-order-ref-actions {
  flex-wrap: wrap;
}
html body #app .lb-order-ref-page .lb-membercommerce-product-row > div {
  flex: 1;
  min-width: 0;
}
html body #app .lb-order-ref-page .lb-membercommerce-product-row h2 {
  overflow-wrap: anywhere;
}
html body #app .lb-order-ref-page .lb-membercommerce-pagination {
  flex-wrap: wrap;
}
html body #app .lb-order-ref-page .lb-membercommerce-pagination > button {
  min-height: 44px;
}

/* Keep status names on one line and scroll their own strip on compact screens. */
@media (max-width: 767px) {
  html body #app .lb-order-ref-page .lb-order-ref-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  html body #app .lb-order-ref-page .lb-order-ref-tabs > .lb-membercommerce-tab {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 12px 14px;
    white-space: nowrap;
  }
}

/* Only the reference product gallery, favorite and quantity controls. */
html body #app .lb-reference-detail .lb-reference-detail__gallery button,
html body #app .lb-reference-detail .lb-reference-detail__quantity button {
  width: 44px;
  height: 44px;
}
html body #app .lb-reference-detail .lb-reference-detail__favorite {
  min-width: 44px;
  min-height: 44px;
}

/* Search already uses 44px controls except the clear and load-more buttons. */
html body #app .catalog-r9-search .catalog-search--editorial .catalog-search-clear {
  width: 44px;
  height: 44px;
}
html body #app .catalog-r9-search .catalog-more {
  min-height: 44px;
}

/* Record filters remain in their existing two-column toolbar. */
html body #app .lb-ref-records-page .lb-ref-records-content {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
html body #app .lb-ref-records-page .lb-ref-record-toolbar select,
html body #app .lb-ref-records-page .lb-ref-range-pill {
  min-height: 44px;
  height: auto;
}
html body #app .lb-ref-records-page .lb-ref-record-error button,
html body #app .lb-ref-records-page .lb-ref-more {
  min-height: 44px;
}

/* The date picker is teleported to body; use its own exclusive class. */
html body .lb-english-date-picker {
  max-height: calc(100vh - 32px) !important;
}
@supports (height: 100dvh) {
  html body .lb-english-date-picker {
    max-height: calc(100dvh - 32px) !important;
  }
}
html body .lb-english-date-picker input,
html body .lb-english-date-picker select {
  font-size: 16px !important;
}
html body .lb-english-date-picker > div:last-child > button {
  min-height: 44px;
  min-width: 0;
}
@media (max-width: 420px) {
  html body .lb-english-date-picker > div:last-child {
    /* The existing component sets display:flex inline. */
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}