/*
 * ssaw Stage 11 - Mobile price / weight layout v4
 *
 * Scope:
 * - Top page only
 * - Mobile view only (max-width: 767px)
 *
 * Normal item:
 *   ¥17,600
 *                         WT. 244g
 *
 * Discounted item:
 *   ¥17,600
 *   15% OFF               WT. 244g
 */

@media screen and (max-width: 767px) {
  body#pageIndex .items-list .items-price,
  body#pageIndex .items-item .items-price {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    column-gap: 4px !important;
    row-gap: 1px !important;
  }

  /*
   * First row: selling price.
   * Both normal and discounted selling prices use the full width.
   */
  body#pageIndex .items-list .items-price > .default,
  body#pageIndex .items-item .items-price > .default,
  body#pageIndex .items-list .items-price > .discount,
  body#pageIndex .items-item .items-price > .discount {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.2 !important;
  }

  /*
   * Second row, left: discount percentage.
   */
  body#pageIndex .items-list .items-price > .ratio,
  body#pageIndex .items-item .items-price > .ratio {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.1 !important;
  }

  /*
   * Second row, right: weight.
   * It stays at the upper-right edge of the second line.
   */
  body#pageIndex .items-list .ssaw-item-weight,
  body#pageIndex .items-item .ssaw-item-weight {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #00236d !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.1 !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;
  }
}


/*
 * Mobile All Items card spacing
 *
 * Reduce only the excessive vertical space between card rows.
 * The three-column width and horizontal gaps remain unchanged.
 */
@media screen and (max-width: 767px) {
  body#pageIndex #itemsList {
    row-gap: 22px !important;
    align-items: start !important;
  }

  body#pageIndex #itemsList > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body#pageIndex #itemsList > li > a {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body#pageIndex #itemsList .items-data {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 6px !important;
    padding-bottom: 0 !important;
  }

  body#pageIndex #itemsList .items-title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  body#pageIndex #itemsList .items-price {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body#pageIndex #itemsList .items-status {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
  }
}