/* Shared marketplace cards for both EAT247 websites. */
:root {
  --market-ink: #191b1d;
  --market-muted: #73777b;
  --market-line: #e9e9eb;
  --market-green: #168344;
  --market-radius: 20px;
  --market-shadow: 0 5px 22px #181b2007;
}

/* Photo-led discovery, dining, celebration and editorial cards. */
:is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard) {
  min-width: 0;
  position: relative;
  border: 1px solid var(--market-line);
  border-radius: var(--market-radius);
  background: #fff;
  color: var(--market-ink);
  overflow: hidden;
  box-shadow: var(--market-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:is(.market-card, .marketCard, .dineCard) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard)[hidden] {
  display: none !important;
}
:is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard):hover {
  transform: translateY(-3px);
  border-color: #d9dade;
  box-shadow: 0 14px 32px #181b2010;
}
:is(.market-card, .marketCard, .dineCard) :is(.card-media, .cardMedia),
:is(.journal-card-media, .journalCardMedia, .edCardImage) {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1.6;
  overflow: hidden;
  background: #f4f2f0;
  isolation: isolate;
}
:is(.card-media, .cardMedia, .journal-card-media, .journalCardMedia, .edCardImage) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
@media (hover: hover) {
  :is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard):hover
  :is(.card-media, .cardMedia, .journal-card-media, .journalCardMedia, .edCardImage) > img {
    transform: scale(1.035);
  }
}
:is(.market-card, .marketCard, .dineCard) :is(.card-body, .cardBody) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 18px;
  gap: 0;
}
:is(.card-title-row, .cardTitleRow) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
:is(.market-card, .marketCard, .dineCard) :is(h3, .card-title) {
  margin: 0;
  font: 750 18px/1.32 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
  color: var(--market-ink);
  overflow-wrap: anywhere;
}
:is(.card-title-row, .cardTitleRow) h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
:is(.market-card, .marketCard, .dineCard) :is(.rating, .cardRating) {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 29px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--market-green);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.2;
}
:is(.rating, .cardRating)[data-pending="true"] {
  background: #f1f3f2;
  color: #50595b;
  border: 1px solid #e7ebe8;
}
:is(.cardCategory, .cardType) {
  position: absolute;
  z-index: 2;
  left: 13px;
  top: 13px;
  max-width: calc(100% - 78px);
  padding: 6px 10px;
  border: 1px solid #ffffff80;
  border-radius: 999px;
  background: #fffffff2;
  color: #303235;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
:is(.market-card, .marketCard, .dineCard) :is(.offer-badge, .offer, .cardOffer) {
  position: absolute;
  z-index: 2;
  left: 13px;
  bottom: 13px;
  top: auto;
  right: auto;
  max-width: calc(100% - 26px);
  background: #d51b46;
  color: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  box-shadow: 0 3px 14px #33041120;
}
:is(.market-card, .marketCard) .heart {
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  background: #fffffff5;
  color: #373b3d;
  border: 1px solid #ffffff90;
  box-shadow: 0 3px 12px #00000012;
  font-size: 22px;
}
:is(.market-card, .marketCard) .heart[aria-pressed="true"] {
  color: #e31d4f;
  background: #fff4f6;
}
:is(.card-meta, .cardMeta, .cardCuisine, .cardLocation) {
  color: var(--market-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 7px 0 0;
  min-width: 0;
}
.cardCuisine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cardLocation {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.cardMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  color: #4b5054;
}
.cardMeta > span + span::before {
  content: '·';
  margin-right: 10px;
  color: #a0a4a7;
}
.cardRatingNote {
  display: block;
  color: #6d7477;
  font-size: 10px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 5px;
}
:is(.market-card, .marketCard, .dineCard) :is(.flowMenuPreview, .cardPreview) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 0;
  margin: 10px 0 0;
  border: 0;
  border-top: 1px solid #f0f0f1;
  border-radius: 0;
  background: transparent;
  color: #7c8285;
  font-size: 10px;
  line-height: 1.45;
}
:is(.flowMenuPreview, .cardPreview) strong {
  margin-left: auto;
  color: #444b4e;
  font-size: 11px;
  font-weight: 650;
}
:is(.flowMenuPreview, .cardPreview) > b {
  font-size: 9px;
  color: #687474;
  background: #f1f5f3;
  border-radius: 4px;
  padding: 3px 5px;
}
:is(.card-foot, .cardFooter) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.45;
}
:is(.card-foot, .cardFooter) strong { font-weight: 650; }
:is(.market-card, .marketCard, .dineCard) :is(.delivery-free, .green) {
  color: var(--market-green);
  font-size: 11px;
  font-weight: 650;
}
:is(.market-card, .marketCard, .dineCard) :is(.cardCta, .card-button.primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #1b1d1f;
  border-radius: 11px;
  background: #1b1d1f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  margin: 14px 0 0;
  box-shadow: none;
}
:is(.market-card, .marketCard, .dineCard) :is(.cardCta, .card-button.primary):hover {
  background: #35393c;
  border-color: #35393c;
}
:is(.market-card, .marketCard) :is(.card-actions, .cardActions) {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: auto 0 0;
}
:is(.card-actions, .cardActions) .cardCta { flex: 1; }
.cardFooter > .cardCta { width: auto; flex: 1; margin-top: 0; }
.cardTrustMeta { gap: 4px 8px; font-size: 10px; }
.cardTrustMeta .cardRatingNote { margin-top: 0; }
:is(.market-card, .marketCard) :is(.cardSecondary, .flowRoadRoute) {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 0;
  margin: 3px 0 0;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #727a7d;
  font-size: 10px;
  font-weight: 550;
  line-height: 1.4;
  box-shadow: none;
}
:is(.market-card, .marketCard) .quick-add {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  margin-top: 14px;
  border: 1px solid #dfe7e2;
  border-radius: 11px;
  color: var(--market-green);
  background: #f6faf7;
  font-size: 18px;
}

/* Stories use the same surface while keeping their editorial layouts. */
:is(.journal-card-body, .journalCardBody, .edCardBody) {
  padding: 20px;
}
:is(.journal-card-body, .journalCardBody, .edCardBody, .fcFeatureBody) h3 {
  font: 750 20px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.035em;
  margin: 0 0 10px;
  color: var(--market-ink);
}
:is(.journal-card-body, .journalCardBody, .edCardBody) > p,
.cardEditorialExcerpt {
  font-size: 13px;
  line-height: 1.65;
  color: var(--market-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 16px;
}
:is(.journal-category, .journalLabel, .edCardLabel) {
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .025em;
}
:is(.journal-card-meta, .journalMeta, .edCardMeta) {
  padding-top: 12px;
  border-top: 1px solid #f0f0f1;
  font-size: 10px;
  line-height: 1.5;
  color: #7c8285;
}
.journalCard.journalCardWide { display: grid; grid-template-columns: 1.15fr .85fr; }
.journalCardWide .journalCardMedia { aspect-ratio: auto; min-height: 270px; }
.journalCardWide .journalCardBody { padding: 28px; }
.journalCardWide .journalCardBody h3 { font-size: 27px; }
:is(.journal-feature-card, .journalFeature, .feature-banner, .feature, .fcFeature) {
  border-radius: 22px;
  overflow: hidden;
}
.fcFeatureBody { padding: 20px; background: #fff; }
.fcFeature { border: 1px solid var(--market-line); box-shadow: var(--market-shadow); }

/* Menu and recommendation cards retain all quantity and option controls. */
:is(.flowRestaurant, .restaurantFlow) .dishCard {
  border-bottom: 1px solid #edeef0;
  padding-top: 28px;
  padding-bottom: 34px;
  gap: 28px;
}
:is(.flowRestaurant, .restaurantFlow) .dishInfo h3 {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.03em;
}
:is(.flowRestaurant, .restaurantFlow) .dishPhoto img {
  border-radius: 18px;
  box-shadow: 0 4px 16px #15181d09;
}
:is(.flowRestaurant, .restaurantFlow) :is(.add-button, .dishAdd) {
  color: var(--market-green);
  border-color: #b9d7c4;
  background: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 750;
  box-shadow: 0 4px 10px #12271909;
}
:is(.flowRestaurant, .restaurantFlow) .dishMenuQuantity {
  border-color: #b9d7c4;
  color: var(--market-green);
  border-radius: 10px;
  background: #fff;
}
.flowRecommendations > article {
  padding: 10px;
  border: 1px solid var(--market-line);
  border-radius: 15px;
  background: #fff;
  min-width: 135px;
}
.flowRecommendations > article img { border-radius: 10px; }
.flowRecommendations > article h3 { font-size: 13px; line-height: 1.35; }

/* Account, offers, order records and utility cards share edges and spacing. */
:is(.commerceCard, .flowCard, .acSection, .value-card, .valueCard, .plan-card, .planCard, .dineOffer) {
  border-color: var(--market-line);
  border-radius: var(--market-radius);
  box-shadow: var(--market-shadow);
}
:is(.journalRestaurant, .featuredRestaurantPanel, .storyRestaurantCard, .story-restaurant-card, .membership-card) {
  border-color: var(--market-line);
  border-radius: var(--market-radius);
  box-shadow: var(--market-shadow);
}
.journalRestaurant > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
}
.journalRestaurant > div { padding: 18px; }
.journalRestaurant h3 { font-size: 18px; font-family: inherit; line-height: 1.3; letter-spacing: -.035em; }
:is(.featuredRestaurantPanel, .storyRestaurantCard, .story-restaurant-card) > img {
  border-radius: 14px;
}
:is(.commerceCard, .flowCard, .acSection, .value-card, .valueCard) :is(h2, h3, h4) {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.03em;
}
:is(.commerceCard, .flowCard, .acSection) h2 { line-height: 1.3; }
.acRestaurantCard { overflow: hidden; padding: 16px; }
.acRestaurantCard > img {
  width: calc(100% + 32px);
  max-width: none;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
  margin: -16px -16px 18px;
  border-radius: 0;
}
.acRestaurantCard h2 { font-size: 19px; margin-bottom: 8px; }
.acRestaurantCard p { font-size: 12px; }
:is(.eatOfferCard, .acCouponCard) {
  border: 1px solid #e3e9f0;
  border-radius: 16px;
  padding: 20px;
  background: #f8fbff;
  margin-top: 12px;
}
.eatOfferCard h3 { font-size: 18px; }
.acCouponCard h2 { font-size: 18px; }
:is(.eatOfferCard, .acCouponCard) :is(code, .acCode) {
  padding: 7px 11px;
  background: #fff;
  border: 1px dashed #a9bed7;
  border-radius: 7px;
  width: fit-content;
}
.value-card .value-icon { border-radius: 50%; background: #fff0f3; }
:is(.cards, .discoveryCards, .dineCards, .journal-cards-three, .journalCardsThree) {
  gap: 24px;
  align-items: stretch;
}
:is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard):focus-within {
  outline: 2px solid #24292c;
  outline-offset: 4px;
}

@media (max-width: 1000px) and (min-width: 601px) {
  :is(.cards, .cards.four, .discoveryCards, .dineCards) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (max-width: 600px) {
  :is(.cards, .cards.four, .discoveryCards) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    overflow: visible;
  }
  :is(.market-card, .marketCard) { min-width: 0; width: 100%; border-radius: 18px; }
  :is(.market-card, .marketCard, .dineCard) :is(.card-body, .cardBody) { padding: 16px; }
  :is(.market-card, .marketCard, .dineCard) h3 { font-size: 18px; }
  :is(.market-card, .marketCard, .dineCard) :is(.cardMeta, .cardLocation, .cardCuisine) { font-size: 12px; }
  :is(.market-card, .marketCard, .dineCard) :is(.cardCta, .card-button.primary) { min-height: 44px; }
  .dineCards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dineRelated .dineCards { display: flex; overflow: auto; padding: 4px 2px 16px; }
  .dineRelated .dineCard { min-width: 270px; width: 270px; }
  :is(.journal-card-body, .journalCardBody, .edCardBody) { padding: 18px; }
  .journalCardWide .journalCardBody { padding: 22px; }
  .journalCard.journalCardWide { grid-template-columns: minmax(0, 1fr); }
  .journalCardWide .journalCardBody h3 { font-size: 24px; }
  :is(.flowRestaurant, .restaurantFlow) .dishCard { gap: 18px; }
  :is(.flowRestaurant, .restaurantFlow) .dishInfo h3 { font-size: 18px; }
  :is(.eatOfferCard, .acCouponCard) { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard),
  :is(.card-media, .cardMedia, .journal-card-media, .journalCardMedia, .edCardImage) > img {
    transition: none;
  }
  :is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard):hover,
  :is(.market-card, .marketCard, .dineCard, .edCard, .journal-card, .journalCard):hover img {
    transform: none;
  }
}