/*
 * ssaw Stage 11 - Mobile product-card weight display v1
 *
 * Scope:
 * - Top page only
 * - Mobile view only (max-width: 767px)
 *
 * Purpose:
 * - Show the existing .ssaw-item-weight element at the right edge
 *   of the price row, matching the PC layout.
 * - Keep the mobile typography compact enough for two-column cards.
 */

@media screen and (max-width: 767px) {
  body#pageIndex .items-list .items-price,
  body#pageIndex .items-item .items-price {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  body#pageIndex .items-list .ssaw-item-weight,
  body#pageIndex .items-item .ssaw-item-weight {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin-left: auto !important;
    padding-left: 4px !important;
    color: #00236d !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body#pageIndex .items-list .ssaw-item-weight::before,
  body#pageIndex .items-item .ssaw-item-weight::before {
    content: "WT." !important;
    position: relative !important;
    top: 0 !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin-right: 3px !important;
    color: inherit !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
    white-space: nowrap !important;
  }

  body#pageIndex .items-list .ssaw-item-weight.ssaw-weight-from::after,
  body#pageIndex .items-item .ssaw-item-weight.ssaw-weight-from::after {
    content: "~" !important;
    display: inline-block !important;
    margin-left: .04em !important;
    font: inherit !important;
    color: inherit !important;
  }
}