/* Clay Handi — menu dish cards.
   Two jobs here:
   1) TEMPORARY: loop item 7727 uses element ids cd000001-cd000008 and section
      template 5738 "Healthy Food & Wraps" uses cd000001/2/3/4/5 for its own
      elements. The loop item renders inside 5738's document, so 5738's rules
      match the card and win on source order. Remove this half once loop item v2
      (7749, ids chdish*) is published and every grid points at it.
   2) PERMANENT: hold the card's shape when a product has no image, no excerpt
      or no dietary/calories line, so every card lines up down the page.
      NOTE Elementor renders NO element at all for a dynamic image, excerpt or
      shortcode that comes back empty — there is nothing to give a min-height to,
      which is why the placeholder circle is drawn with ::before on the card.
      That ::before must be forced back to position:static, because Elementor
      already uses .e-con::before for its background overlay and absolutely
      positions it, which takes it out of the flex row. */

/* The grid item is .e-loop-item, not the card. Without min-width:0 a 1fr track
   grows to the item's min-content width and the page scrolls sideways. */
.elementor-loop-container > .e-loop-item {
  min-width: 0 !important;
  max-width: 100% !important;
}

.ch-dishcard {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px 16px !important;
  padding: 20px 22px 20px 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  --width: 100% !important;
  height: 100% !important;
}

.ch-dishcard > * {
  min-width: 0 !important;
}

/* ---- image ---- */
.ch-dishcard .elementor-widget-image {
  width: 76px !important;
  min-height: 76px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
}

/* no featured image on the product: Elementor renders no widget at all, so the
   card draws the circle itself and keeps the row aligned. Set a featured image
   on the product and the real one takes over automatically. */
.ch-dishcard:not(:has(.elementor-widget-image))::before {
  content: "" !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 76px !important;
  height: 76px !important;
  border: 2px dashed #EEB621 !important;
  border-radius: 50% !important;
  background: #FCF6E8 url("https://antiquewhite-pelican-269801.hostingersite.com/wp-content/uploads/2026/08/placeholder-2.png") center / cover no-repeat !important;
  opacity: .5 !important;
}

/* ---- text column: a floor height so a missing excerpt or kcal line leaves its
       space behind instead of shrinking the whole card ---- */
.ch-dishcard > .e-con {
  min-height: 76px !important;
  justify-content: center !important;
}

.ch-dishcard .ch-dish__name .elementor-heading-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 21px !important;
  line-height: 27px !important;
  font-weight: 600 !important;
  color: #1F130C !important;
  text-align: left !important;
}

.ch-dishcard .elementor-widget-text-editor {
  font-family: "Jost", sans-serif !important;
  font-size: 13.5px !important;
  line-height: 21px !important;
  color: #6B5B4E !important;
  text-align: left !important;
  padding: 4px 0 0 !important;
}

/* ---- price sits hard right so prices line up column to column ---- */
.ch-dishcard .elementor-widget-woocommerce-product-price {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* ---------------------------------------------------------------------------
   TABLET AND PHONE (<=1024px): the card turns into a column — image on top,
   then name, excerpt, kcal, price — so two cards fit per row. Approved on the
   Soup demo 2026-09-17 and rolled out to every section.

   Measured at 390px, 9 cards: 163px per card stacked against 276px per card in
   the old one-up row layout, so this is ~41% less scrolling, not more.

   This has to live here rather than on container cd000001 in loop item 7727,
   because every rule above is !important and would beat the widget's own
   responsive settings. Everything above stays the desktop row layout.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ch-dishcard {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 18px 14px 20px !important;
  }

  /* image moves to the top of the card and centres */
  .ch-dishcard .elementor-widget-image {
    width: 96px !important;
    min-height: 96px !important;
    --width: 96px !important;
    align-self: center !important;
  }
  .ch-dishcard .elementor-widget-image img {
    width: 96px !important;
    height: 96px !important;
    object-fit: cover !important;
  }
  .ch-dishcard:not(:has(.elementor-widget-image))::before {
    width: 96px !important;
    height: 96px !important;
    align-self: center !important;
  }

  /* text column goes full width and centres; the 76px floor is a row-layout
     device and only adds dead space once the card is stacked */
  .ch-dishcard > .e-con {
    width: 100% !important;
    --width: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .ch-dishcard .ch-dish__name .elementor-heading-title {
    text-align: center !important;
    font-size: 18px !important;
    line-height: 23px !important;
  }
  .ch-dishcard .elementor-widget-text-editor {
    text-align: center !important;
    font-size: 13px !important;
    line-height: 19px !important;
    padding-top: 2px !important;
  }
  .ch-dishcard .elementor-widget-shortcode {
    text-align: center !important;
    width: 100% !important;
  }

  /* the 46px dotted rule was a row-layout separator; it reads as a stray line
     once the card is a column */
  .ch-dishcard .elementor-widget-divider {
    display: none !important;
  }

  /* price sits under the text, centred, pinned to the bottom so prices line up
     across a row, and allowed to wrap - a range like "$ 26.99 - $ 52.99" does
     not fit one line in a half-width card */
  .ch-dishcard .elementor-widget-woocommerce-product-price {
    margin-left: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    --width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .ch-dishcard .elementor-widget-woocommerce-product-price .price {
    text-align: center !important;
    white-space: normal !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }
}

/* phone: same stacked card, tightened. Must come AFTER the 1024 block. */
@media (max-width: 767px) {
  .ch-dishcard {
    gap: 6px !important;
    padding: 14px 10px 16px !important;
  }
  .ch-dishcard .elementor-widget-image,
  .ch-dishcard .elementor-widget-image img,
  .ch-dishcard:not(:has(.elementor-widget-image))::before {
    width: 78px !important;
    height: 78px !important;
    min-height: 78px !important;
    --width: 78px !important;
  }
  .ch-dishcard .ch-dish__name .elementor-heading-title {
    font-size: 16px !important;
    line-height: 21px !important;
  }
  .ch-dishcard .elementor-widget-text-editor {
    font-size: 12px !important;
    line-height: 17px !important;
  }
  .ch-dishcard .elementor-widget-woocommerce-product-price .price {
    font-size: 17px !important;
    line-height: 22px !important;
  }
}