/* =========================================
   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;
}


/* =========================================
   FREE MARKETPLACE NOTICE
========================================= */

.marketplace-free-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-bottom: 16px;
  padding: 12px 16px;
  color: #166534;
  background-color: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}

.marketplace-free-notice strong {
  font-size: 1rem;
  font-weight: 800;
}

.marketplace-free-notice p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.marketplace-header-title-mobile {
  display: none;
}


/* =========================================
   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) {

  .section:has(.marketplace-page) {
    padding-top: 12px;
  }

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

    gap:
      10px;

    align-items:
      center;

    justify-content:
      stretch;

    margin-top:
      0;

    margin-bottom:
      8px;
  }


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

    line-height:
      1.15;

    margin-bottom:
      0;
  }

  .marketplace-header-title-desktop,
  .marketplace-subtitle {
    display: none;
  }

  .marketplace-header-title-mobile {
    display: inline;
  }

  .marketplace-free-notice {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .marketplace-free-notice p {
    font-size: 0.72rem;
  }

  .marketplace-free-notice strong {
    font-size: 0.85rem;
    line-height: 1.4;
  }

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


  .marketplace-header-sell-button {
    width:
      auto;

    min-width:
      0;

    min-height:
      44px;

    padding:
      0 12px;

    font-size:
      0.78rem;

    justify-self:
      end;
  }


  .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-page-heading .title {
    font-size: 1.1rem;
  }

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

}

/* Desktop browse layout */
@media screen and (min-width: 1024px) {
  .section:has(.marketplace-page) {
    padding-top: 26px;
  }

  .marketplace-page {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
  }

  .marketplace-page-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin: 0 0 16px;
  }

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

  .marketplace-page-heading .title {
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
  }

  .marketplace-page-heading .marketplace-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .marketplace-header-sell-button {
    justify-self: end;
    width: auto;
    min-width: 156px;
    min-height: 44px;
    border-radius: 9px;
    box-shadow: var(--shadow-small);
  }

  .marketplace-free-notice {
    gap: 12px;
    margin-bottom: 16px;
    padding: 9px 14px;
    border-radius: 9px;
  }

  .marketplace-free-notice strong,
  .marketplace-free-notice p {
    font-size: 0.82rem;
  }

  .marketplace-results-row {
    margin: 24px 0 14px;
  }

  .marketplace-results-row > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
  }

  .marketplace-results-row .title {
    font-size: 1.3rem;
    font-weight: 800;
  }

  .marketplace-result-count {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
  }

  .columns.marketplace-listing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
  }

  .marketplace-listing-grid > .marketplace-listing-column {
    width: auto;
    min-width: 0;
    padding: 0;
  }
}

@media screen and (min-width: 1280px) {
  .columns.marketplace-listing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}