/*
 * MAK Store v3.15.2
 * Final desktop layout for parent/child model table.
 * Overrides v3.15/v3.15.1 only inside .mak-child-list.
 */

@media (min-width: 769px) {
  .mak-child-list.models {
    padding: 22px 18px 20px;
  }

  .mak-child-list.models h3 {
    margin: 0 0 14px;
  }

  /* Never crop the right edge again. If a layout genuinely needs more
     width (mainly the 2-characteristic variant), horizontal scroll returns. */
  .mak-child-list .models-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .mak-child-list .models-table {
    width: 100%;
    min-width: 100%;
  }

  /*
   * ONE characteristic:
   * fixed widths for the compact service columns, flexible model column.
   * This lets the normal desktop product card fit without clipping.
   */
  .mak-child-list.models--one-attribute .models-head,
  .mak-child-list.models--one-attribute .model-row {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    grid-template-columns:
      82px
      minmax(0, 1fr)
      118px
      100px
      112px
      34px;
    column-gap: 6px;
  }

  /*
   * TWO characteristics:
   * don't crush seven readable columns. Use a sensible fixed table width
   * and let the native horizontal scroller appear when the card is narrower.
   */
  .mak-child-list.models--two-attributes .models-table {
    min-width: 720px;
  }

  .mak-child-list.models--two-attributes .models-head,
  .mak-child-list.models--two-attributes .model-row {
    width: 100%;
    min-width: 720px !important;
    box-sizing: border-box;
    grid-template-columns:
      76px
      minmax(150px, 1fr)
      92px
      92px
      96px
      108px
      34px;
    column-gap: 6px;
  }

  .mak-child-list .models-head {
    min-height: 30px;
    padding: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  .mak-child-list .model-row {
    min-height: 44px !important;
    height: 44px;
    padding: 0;
    font-size: 13px;
    line-height: 1.25;
  }

  .mak-child-list .model-row strong {
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mak-child-list .model-row em {
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mak-child-list .models-head > span,
  .mak-child-list .model-row > span,
  .mak-child-list .model-row > strong,
  .mak-child-list .model-row > em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mak-child-list .model-row button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .mak-child-list .models-scroll {
    overflow-x: auto !important;
  }
}