/* =========================================
   MARKETPLACE LISTING CARDS
========================================= */

.marketplace-listing-card {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  height:
    100%;

  overflow:
    hidden;

  background-color:
    #ffffff;

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

  border-radius:
    13px;

  box-shadow:
    0 4px 14px
    rgba(
      15,
      23,
      42,
      0.07
    );

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


.marketplace-listing-card:hover {
  transform:
    translateY(-3px);

  border-color:
    #c8d3dd;

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


/* =========================================
   RESERVED LISTING CARD
========================================= */

.marketplace-listing-card.is-reserved {
  background:
    linear-gradient(
      180deg,
      #fffaf5 0%,
      #ffffff 36%
    );

  border:
    1px solid
    #fdba74;

  box-shadow:
    0 6px 18px
    rgba(
      245,
      158,
      11,
      0.12
    );
}


.marketplace-listing-card.is-reserved
.marketplace-card-image img {
  opacity:
    0.84;
}


/* =========================================
   IMAGE
========================================= */

.marketplace-card-image {
  position:
    relative;

  display:
    block;

  flex-shrink:
    0;

  width:
    100%;

  aspect-ratio:
    4 / 3;

  overflow:
    hidden;

  color:
    inherit;

  background-color:
    #eef2f6;

  text-decoration:
    none;
}


.marketplace-card-image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 0.25s ease;
}


.marketplace-listing-card:hover
.marketplace-card-image img {
  transform:
    scale(1.025);
}


/* =========================================
   NO IMAGE
========================================= */

.no-listing-image {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  color:
    var(--muted);

  background:
    linear-gradient(
      135deg,
      #eef2f6,
      #e2e8f0
    );

  font-size:
    0.8rem;

  font-weight:
    700;

  text-decoration:
    none;
}


/* =========================================
   PRICE OVER IMAGE
========================================= */

.marketplace-image-price {
  position:
    absolute;

  left:
    13px;

  bottom:
    13px;

  z-index:
    2;

  padding:
    7px 11px;

  color:
    #ffffff;

  background-color:
    rgba(
      24,
      36,
      51,
      0.94
    );

  border-radius:
    8px;

  font-size:
    0.98rem;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.01em;

  box-shadow:
    0 4px 11px
    rgba(
      15,
      23,
      42,
      0.22
    );

  backdrop-filter:
    blur(5px);
}


/* =========================================
   RESERVED BADGE
========================================= */

.marketplace-image-status {
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  z-index:
    2;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    25px;

  padding:
    0 9px;

  color:
    var(--navy);

  background-color:
    var(--orange);

  border-radius:
    999px;

  font-size:
    0.64rem;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;

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


/* =========================================
   CARD CONTENT
========================================= */

.marketplace-card-content {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  padding:
    15px 16px 15px;
}


/* =========================================
   TITLE
========================================= */

.marketplace-card-title {
  display:
    -webkit-box;

  margin:
    0 0 7px !important;

  overflow:
    hidden;

  color:
    var(--navy);

  font-size:
    1.02rem !important;

  font-weight:
    850;

  line-height:
    1.25;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


.marketplace-card-title-link {
  color:
    inherit;

  text-decoration:
    none;
}


.marketplace-card-title-link:hover {
  color:
    var(--orange-dark);
}


/* =========================================
   LOCATION / DELIVERY / TIME
========================================= */

.marketplace-card-info-row {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;
}


.marketplace-card-info-left {
  flex:
    1;

  min-width:
    0;
}


.marketplace-card-location {
  display:
    flex;

  align-items:
    baseline;

  flex-wrap:
    wrap;

  gap:
    3px;

  margin:
    0 0 4px;

  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    0.84rem;

  line-height:
    1.35;
}


.marketplace-card-location-name {
  font-weight:
    750;
}


.marketplace-card-distance {
  color:
    var(--light-muted);

  font-size:
    0.74rem;

  font-weight:
    550;

  white-space:
    nowrap;
}


.marketplace-card-delivery {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.78rem;

  font-weight:
    600;

  line-height:
    1.35;
}


.marketplace-card-posted-time {
  flex-shrink:
    0;

  margin:
    0;

  color:
    var(--light-muted);

  font-size:
    0.69rem;

  font-weight:
    500;

  line-height:
    1.3;

  white-space:
    nowrap;

  text-align:
    right;
}


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

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

  .marketplace-card-image {
    aspect-ratio:
      4 / 3;
  }

}


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

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

  .marketplace-card-image {
    aspect-ratio:
      4 / 3;
  }


  .marketplace-card-content {
    padding:
      14px;
  }


  .marketplace-card-title {
    font-size:
      0.98rem !important;
  }


  .marketplace-card-info-row {
    align-items:
      flex-end;

    gap:
      9px;
  }


  .marketplace-card-location {
    font-size:
      0.82rem;
  }


  .marketplace-card-distance {
    font-size:
      0.7rem;
  }


  .marketplace-card-delivery {
    font-size:
      0.77rem;
  }


  .marketplace-card-posted-time {
    font-size:
      0.67rem;
  }


  .marketplace-image-price {
    left:
      11px;

    bottom:
      11px;

    font-size:
      0.94rem;
  }


  .marketplace-image-status {
    top:
      11px;

    right:
      11px;
  }

}


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

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

  .marketplace-card-image {
    aspect-ratio:
      4 / 3;
  }

}


/* =========================================
   COMPACT MOBILE MARKETPLACE CARDS
========================================= */

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

  .marketplace-listing-card {
    border-radius:
      10px;

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


  .marketplace-card-content {
    padding:
      9px 9px 10px;
  }


  .marketplace-card-title {
    min-height:
      2.35em;

    margin-bottom:
      5px !important;

    font-size:
      0.82rem !important;

    line-height:
      1.18;
  }


  .marketplace-card-info-row {
    display:
      block;
  }


  .marketplace-card-location {
    display:
      block;

    margin-bottom:
      2px;

    overflow:
      hidden;

    font-size:
      0.7rem;

    line-height:
      1.25;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .marketplace-card-distance {
    margin:
      0;

    overflow:
      hidden;

    font-size:
      0.64rem;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .marketplace-card-delivery,
  .marketplace-card-posted-time,
  .listing-posted-time {
    display:
      none;
  }


  .marketplace-image-price {
    left:
      7px;

    bottom:
      7px;

    padding:
      5px 7px;

    border-radius:
      6px;

    font-size:
      0.72rem;
  }


  .marketplace-image-status {
    top:
      7px;

    right:
      7px;

    min-height:
      20px;

    padding:
      0 6px;

    font-size:
      0.52rem;
  }


  .no-listing-image {
    font-size:
      0.68rem;
  }

}


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

  .marketplace-card-content {
    padding:
      8px;
  }


  .marketplace-card-title {
    font-size:
      0.76rem !important;
  }


  .marketplace-image-price {
    font-size:
      0.66rem;
  }

}



/* =========================================
   MOBILE IMAGE EMPHASIS
========================================= */

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

  .marketplace-card-image {
    aspect-ratio:
      1 / 1;
  }

}



/* =========================================
   CLICKABLE MOBILE LISTING CARD
========================================= */

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

  .marketplace-listing-card {
    cursor:
      pointer;
  }


  .marketplace-listing-card:active {
    transform:
      scale(0.99);
  }

}



/* =========================================
   MOBILE CARD CONDITION
========================================= */

.marketplace-card-condition {
  display:
    none;
}


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

  .marketplace-card-condition {
    display:
      inline-flex;

    align-items:
      center;

    width:
      fit-content;

    min-height:
      18px;

    margin:
      0 0 5px;

    padding:
      0 6px;

    color:
      #475569;

    background-color:
      #f1f5f9;

    border:
      1px solid
      #dbe3ea;

    border-radius:
      999px;

    font-size:
      0.58rem;

    font-weight:
      750;

    line-height:
      1;
  }


  .marketplace-card-distance {
    margin-top:
      2px;
  }

}



/* =========================================
   CONSISTENT MOBILE CARD TITLE HEIGHT
========================================= */

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

  .marketplace-card-title {
    min-height:
      2.36em;

    max-height:
      2.36em;

    margin-bottom:
      6px !important;

    overflow:
      hidden;
  }

}



/* =========================================
   MOBILE FAVOURITE HEART
========================================= */

.marketplace-card-heart {
  display:
    none;
}


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

  .marketplace-card-heart {
    position:
      absolute;

    top:
      7px;

    right:
      7px;

    z-index:
      5;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      34px;

    height:
      34px;

    padding:
      0;

    color:
      var(--navy);

    background-color:
      rgba(
        255,
        255,
        255,
        0.94
      );

    border:
      0;

    border-radius:
      999px;

    font-size:
      1.22rem;

    line-height:
      1;

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

    cursor:
      pointer;
  }


  .marketplace-card-heart.is-favourited {
    color:
      var(--orange-dark);
  }


  .marketplace-card-heart:active {
    transform:
      scale(0.92);
  }


  /* leaves room for heart on reserved cards */
  .marketplace-image-status {
    top:
      46px;
  }

}



/* =========================================
   DESKTOP CARD POLISH
========================================= */

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

  .marketplace-listing-grid {
    margin-top:
      0;
  }


  .marketplace-listing-column {
    padding-top:
      6px !important;

    padding-bottom:
      6px !important;
  }


  .marketplace-listing-card {
    border-radius:
      11px;
  }


  .marketplace-card-image {
    aspect-ratio:
      16 / 10;
  }


  .marketplace-card-content {
    padding:
      11px 12px 12px;
  }


  .marketplace-card-title {
    min-height:
      2.45em;

    max-height:
      2.45em;

    margin-bottom:
      5px !important;

    font-size:
      0.9rem !important;

    line-height:
      1.22;
  }


  .marketplace-card-info-row {
    gap:
      8px;
  }


  .marketplace-card-location {
    margin-bottom:
      2px;

    font-size:
      0.76rem;
  }


  .marketplace-card-distance {
    font-size:
      0.68rem;
  }


  .marketplace-card-delivery {
    font-size:
      0.7rem;
  }


  .marketplace-card-posted-time,
  .listing-posted-time {
    font-size:
      0.64rem;
  }


  .marketplace-image-price {
    left:
      10px;

    bottom:
      10px;

    padding:
      6px 9px;

    font-size:
      0.84rem;
  }

}