/* =========================================
   MARKETPLACE HEADER / SELL ACTION
========================================= */

.marketplace-page-header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 780px)
    240px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    55px;

  margin-top:
    18px;

  margin-bottom:
    16px;
}


.marketplace-page-heading {
  max-width:
    780px;
}


.marketplace-page-heading .title {
  margin-bottom:
    4px;

  color:
    var(--navy);

  font-size:
    2.55rem;

  font-weight:
    900;

  line-height:
    1.08;
}


.marketplace-page-heading .subtitle {
  margin-bottom:
    0;

  color:
    var(--muted);

  font-size:
    0.94rem;

  line-height:
    1.45;
}


/* =========================================
   HEADER SELL BUTTON
========================================= */

.marketplace-header-sell-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  justify-self:
    center;

  width:
    210px;

  min-height:
    50px;

  margin:
    0;

  padding:
    0 26px;

  color:
    var(--navy);

  background:
    linear-gradient(
      135deg,
      var(--orange),
      #f8a91b
    );

  border:
    1px solid
    var(--orange);

  border-radius:
    12px;

  font-size:
    0.93rem;

  font-weight:
    850;

  white-space:
    nowrap;

  box-shadow:
    0 7px 18px
    rgba(
      245,
      158,
      11,
      0.2
    );

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


.marketplace-header-sell-button:hover {
  transform:
    translateY(-2px);

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--orange-dark),
      var(--orange)
    );

  border-color:
    var(--orange-dark);

  box-shadow:
    0 10px 24px
    rgba(
      217,
      119,
      6,
      0.24
    );
}


/* =========================================
   SELL CALLOUT
========================================= */

.sell-callout {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    13px 16px;

  margin-bottom:
    18px;

  background:
    linear-gradient(
      135deg,
      #fffaf3 0%,
      #fff7ed 100%
    );

  border:
    1px solid
    #f6c27a;

  border-radius:
    12px;

  box-shadow:
    0 3px 10px
    rgba(
      15,
      23,
      42,
      0.04
    );
}


.sell-callout strong {
  color:
    var(--navy);

  font-size:
    0.94rem;

  font-weight:
    800;
}


.sell-callout p {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    0.82rem;

  line-height:
    1.4;
}


.sell-callout-button {
  min-width:
    125px;

  min-height:
    38px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-color:
    var(--orange);

  font-size:
    0.82rem;

  font-weight:
    800;

  white-space:
    nowrap;

  box-shadow:
    0 4px 10px
    rgba(
      245,
      158,
      11,
      0.14
    );
}


.sell-callout-button:hover {
  color:
    #ffffff;

  background-color:
    var(--orange-dark);

  border-color:
    var(--orange-dark);
}


/* =========================================
   RESULTS ROW
========================================= */

.marketplace-results-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    0 0 14px;
}


.marketplace-results-row .title {
  margin-bottom:
    0;
}


.marketplace-result-count {
  color:
    var(--muted);

  font-size:
    0.8rem;

  font-weight:
    650;
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 1000px) {

  .marketplace-page-header {
    grid-template-columns:
      minmax(0, 1fr)
      200px;

    gap:
      28px;

    margin-top:
      14px;
  }


  .marketplace-page-heading .title {
    font-size:
      2.2rem;
  }


  .marketplace-header-sell-button {
    width:
      190px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .marketplace-page-header {
    grid-template-columns:
      1fr;

    gap:
      14px;

    justify-content:
      stretch;

    margin-top:
      8px;

    margin-bottom:
      16px;
  }


  .marketplace-page-heading .title {
    font-size:
      1.85rem;

    line-height:
      1.12;
  }


  .marketplace-page-heading .subtitle {
    font-size:
      0.9rem;
  }


  .marketplace-header-sell-button {
    width:
      100%;

    min-height:
      48px;

    justify-self:
      stretch;
  }


  .sell-callout {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .sell-callout-button {
    width:
      100%;
  }


  .marketplace-results-row {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }

}


/* =========================================
   MOBILE LISTING GRID
========================================= */

@media screen and (max-width: 768px) {

  .marketplace-listing-grid {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      10px;

    margin:
      0;
  }


  .marketplace-listing-column {
    width:
      auto !important;

    padding:
      0 !important;
  }

}


@media screen and (max-width: 360px) {

  .marketplace-listing-grid {
    gap:
      8px;
  }

}



/* =========================================
   COMPACT DESKTOP MARKETPLACE
========================================= */

@media screen and (min-width: 1060px) {

  .marketplace-page-header {
    grid-template-columns:
      minmax(0, 1fr)
      210px;

    gap:
      32px;

    margin-top:
      4px;

    margin-bottom:
      8px;
  }


  .marketplace-page-heading .title {
    margin-bottom:
      2px;

    font-size:
      2rem;

    line-height:
      1.04;
  }


  .marketplace-page-heading .subtitle {
    font-size:
      0.86rem;

    line-height:
      1.3;
  }


  .marketplace-header-sell-button {
    width:
      190px;

    min-height:
      42px;
  }


  .marketplace-results-row {
    margin-bottom:
      8px;
  }

}



/* =========================================
   DESKTOP MARKETPLACE POLISH
========================================= */

@media screen and (min-width: 1060px) {

  .marketplace-page {
    width:
      min(
        calc(100% - 48px),
        1480px
      );

    margin:
      0 auto;
  }


  .marketplace-page-header {
    grid-template-columns:
      minmax(0, 1fr)
      190px;

    align-items:
      end;

    gap:
      24px;

    margin-top:
      10px;

    margin-bottom:
      6px;
  }


  .marketplace-page-heading {
    max-width:
      820px;
  }


  .marketplace-page-heading
  .title {
    font-size:
      1.9rem;

    line-height:
      1.04;
  }


  .marketplace-page-heading
  .subtitle {
    max-width:
      760px;

    font-size:
      0.84rem;

    line-height:
      1.28;
  }


  .marketplace-header-sell-button {
    justify-self:
      end;

    width:
      180px;

    min-height:
      40px;

    border-radius:
      10px;
  }


  .marketplace-results-row {
    margin-top:
      2px;

    margin-bottom:
      6px;
  }


  .marketplace-results-row
  .title {
    font-size:
      1.45rem;
  }


  .marketplace-result-count {
    font-size:
      0.74rem;
  }

}