@import url("/front-menu-layout.css");

/* Step 6 final order-based override. Product article 1-2 are large; product article 3+ are medium. */

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(124px, 43%) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 168px !important;
  padding: 14px !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 38px rgba(68, 48, 25, 0.1) !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-product-media {
  width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  max-height: 136px !important;
  border-radius: 22px !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-product-body,
.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-product-summary {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.38 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-price-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) b,
.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-price {
  font-size: 16px !important;
  font-weight: 900 !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-product-action,
.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-icon-btn {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: end !important;
  z-index: 3 !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(n+3) {
  display: grid !important;
  grid-template-columns: 94px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 112px !important;
  padding: 10px 12px 10px 10px !important;
  border-radius: 20px !important;
}

.mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(n+3) .mf-product-media {
  width: 94px !important;
  height: 86px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  border-radius: 17px !important;
}

@media (max-width: 380px) {
  .mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) {
    grid-template-columns: minmax(112px, 41%) minmax(0, 1fr) !important;
    min-height: 156px !important;
    padding: 12px !important;
  }

  .mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) .mf-product-media {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;
  }

  .mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(-n+2) h3 {
    font-size: 17px !important;
  }

  .mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(n+3) {
    grid-template-columns: 84px minmax(0, 1fr) 38px !important;
    min-height: 102px !important;
  }

  .mf-order-page .mf-list > article[data-go^="/product/"]:nth-of-type(n+3) .mf-product-media {
    width: 84px !important;
    height: 78px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }
}