/* EatsOne front order V7.12 — show promotion pill beside product name
   in BOTH horizontal list and vertical grid views.
   Existing eligibility checks, modal full promotion text, and checkout stay unchanged. */

/* No promotion label should cover a product photo in either view. */
body.order-front-v7 .order-content-area.is-grid-view .hybrid-product > .product-promo-tags-v292 {
  display:none !important;
}

/* Match the inline badge/name alignment already used by the list layout. */
body.order-front-v7 .order-content-area.is-grid-view .hybrid-product .hybrid-product-title {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  column-gap:7px;
  row-gap:5px;
  width:100%;
  min-width:0;
}
body.order-front-v7 .order-content-area.is-grid-view .hybrid-product .hybrid-product-title h3 {
  flex:0 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
}

/* The real promo element is populated dynamically by backend-bridge.js.
   :has() follows it when products, branches, or ordering modes change. */
body.order-front-v7 .order-content-area.is-grid-view .hybrid-product:has(> .product-promo-tags-v292:not([hidden]) > span) .hybrid-product-title::before {
  content:"優惠中";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:#584b40;
  color:#fff;
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
}
@media(max-width:600px){
  body.order-front-v7 .order-content-area.is-grid-view .hybrid-product .hybrid-product-title {column-gap:6px;row-gap:4px}
  body.order-front-v7 .order-content-area.is-grid-view .hybrid-product:has(> .product-promo-tags-v292:not([hidden]) > span) .hybrid-product-title::before {
    min-height:20px;
    padding:0 7px;
    font-size:9px;
  }
}