/* ============================================================
   SellFood Listing Card — Unified Component (v2)
   ------------------------------------------------------------
   Layout structure:
     <article.sf-listing-card>
       <a.sf-listing-card__link>            ← image + body wrap
         <div.sf-listing-card__image>
         <div.sf-listing-card__body>
           [category, name, subtitle, desc, pills, divider,
            compliance lines]
       <div.sf-listing-card__action-row>    ← outside link
         [seller-info (shop only)] [watch-btn]
       <div.sf-listing-card__variants>      ← N variant rows
         <div.sf-listing-card__variant-row × N>
           [container·size] [stock|sold-out|coming-soon]
           [price] [watch][cart]

   Consumed by:
     - sellfood-shop-small-batch.html (context: 'shop')
     - sellfood-seller-profile.html  (context: 'profile')
     - sellfood-create-listing.html preview (context: 'preview', 15D1b)

   NOT consumed by:
     - sellfood-shop.html (no main product grid)
     - sellfood-listings.html (seller management view — divergent)
     - sellfood-shop.html market table (curated layout)

   Internal vars below pull from project palette with literal
   fallbacks so the component renders correctly on any consuming
   page regardless of which palette vars that page declares.
   Same defense pattern as 2026-05-02 BUG-17 / BUG-18.
   ============================================================ */

.sf-listing-card {
  /* Internal palette */
  --sf-cream:         var(--cream,         #FAF6EF);
  --sf-cream-warm:    var(--cream-warm,    #F0E8DC);
  --sf-warm-white:    var(--warm-white,    var(--warm, #FDF9F3));
  --sf-brown:         var(--brown,         #3B2314);
  --sf-brown-mid:     var(--brown-mid,     #6B3F26);
  --sf-brown-light:   var(--brown-light,   #A0673A);
  --sf-amber:         var(--amber,         #D4891A);
  --sf-amber-light:   var(--amber-light,   #F0A830);
  --sf-amber-pale:    var(--amber-pale,    #FEF3DC);
  --sf-sage:          var(--sage,          #7A8C6E);
  --sf-sage-pale:     var(--sage-pale,     #EDF2EA);
  --sf-sage-dark:     var(--sage-dark,     #4A7C3F);
  --sf-terra:         var(--terra,         #C4614A);
  --sf-terra-pale:    var(--terra-pale,    #FCEAE6);
  --sf-sky:           var(--sky,           #4A7FA5);
  --sf-sky-pale:      #E6F1F8;
  --sf-text:          var(--text,          var(--text-dark,  #2A1A0E));
  --sf-text-mid:      var(--text-mid,      #5C3D26);
  --sf-text-light:    var(--text-light,    var(--text-muted, #9A7B65));
  --sf-border:        #E8DDD0;

  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 16px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(59,35,20,0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  font-family: 'DM Sans', Arial, sans-serif;
}

.sf-listing-card:hover {
  box-shadow: 0 8px 28px rgba(59,35,20,0.12);
  border-color: rgba(212,137,26,0.35);
  transform: translateY(-2px);
}

/* ────────── Link row (image + body) ────────── */
.sf-listing-card__link {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sf-listing-card--preview .sf-listing-card__link {
  cursor: default;
  pointer-events: none;
}

/* ────────── Image cell ────────── */
.sf-listing-card__image {
  width: 160px;
  min-width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFFAEE, #FEF3DC);
  border-right: 1px solid var(--sf-border);
  position: relative;
  overflow: hidden;
  min-height: 175px;
}

.sf-listing-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-listing-card__image-emoji {
  font-size: 3.5rem;
  filter: drop-shadow(0 3px 8px rgba(59,35,20,0.12));
  line-height: 1;
}

.sf-listing-card__status-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--sf-sky);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(59,35,20,0.18);
  z-index: 1;
}

/* ────────── Body cell ────────── */
.sf-listing-card__body {
  flex: 1;
  padding: 1.1rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.sf-listing-card__category {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-text-light);
  margin: 0;
}

.sf-listing-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--sf-brown);
  line-height: 1.25;
  margin: 0;
}

.sf-listing-card__subtitle {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--sf-text-mid);
  margin: 0;
}

.sf-listing-card__desc {
  font-size: 0.82rem;
  color: var(--sf-text-light);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ────────── Pill rows (dietary tags, shipping) ────────── */
.sf-listing-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.sf-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.16rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
  line-height: 1.4;
}

.sf-pill--tag {
  color: var(--sf-sage-dark);
  border: 1px solid rgba(74,124,63,0.28);
  background: var(--sf-sage-pale);
}

.sf-pill--ship {
  color: var(--sf-sky);
  border: 1px solid rgba(74,127,165,0.28);
  background: var(--sf-sky-pale);
}

/* ────────── Compliance lines (divider + ingredients + contains) ────────── */
.sf-listing-card__compliance {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.25rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--sf-border);
  font-size: 0.72rem;
  color: var(--sf-text-light);
  line-height: 1.55;
}

.sf-listing-card__compliance-row strong {
  color: var(--sf-text-mid);
  font-weight: 600;
}

/* Allergens use terra emphasis to flag the safety-relevant info */
.sf-listing-card__compliance-row--allergens strong {
  color: var(--sf-terra);
}

/* ────────── Action row (seller info + watch, OUTSIDE link) ────────── */
.sf-listing-card__action-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem 0.7rem calc(160px + 1.25rem);
  flex-wrap: wrap;
  border-top: 1px solid var(--sf-border);
}

.sf-listing-card__seller-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  font-size: 0.73rem;
  color: var(--sf-text-light);
  flex-wrap: wrap;
}

.sf-listing-card__by {
  color: var(--sf-text-light);
}

.sf-listing-card__seller-link {
  font-weight: 700;
  color: var(--sf-brown);
  text-decoration: none;
}

.sf-listing-card__seller-link:hover {
  color: var(--sf-amber);
}

.sf-listing-card__seller-loc,
.sf-listing-card__distance {
  color: var(--sf-text-light);
  white-space: nowrap;
}

.sf-listing-card__distance {
  color: var(--sf-sky);
  font-weight: 600;
}

/* ────────── Variant rows (multi-row, shaded, per-row CTAs) ────────── */
.sf-listing-card__variants {
  display: flex;
  flex-direction: column;
}

.sf-listing-card__variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.8fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem 0.6rem calc(160px + 1.25rem);
  border-top: 1px solid var(--sf-border);
}

/* Warm gradient cycle — applied by variant index modulo 4 (L16 lock).
   Subtle but distinct shades that scale with any variant count. */
.sf-listing-card__variant-row--shade-0 { background: var(--sf-cream); }
.sf-listing-card__variant-row--shade-1 { background: var(--sf-cream-warm); }
.sf-listing-card__variant-row--shade-2 { background: var(--sf-amber-pale); }
.sf-listing-card__variant-row--shade-3 { background: var(--sf-cream-warm); }

/* Out-of-stock or coming-soon variant rows are muted */
.sf-listing-card__variant-row--unavailable {
  opacity: 0.62;
}

.sf-listing-card__variant-label {
  font-size: 0.82rem;
  color: var(--sf-text-mid);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-listing-card__variant-status {
  font-size: 0.74rem;
  color: var(--sf-text-light);
  white-space: nowrap;
}

.sf-listing-card__variant-status--sold-out,
.sf-listing-card__variant-status--coming-soon {
  color: var(--sf-terra);
  font-weight: 600;
}

.sf-listing-card__variant-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sf-brown);
  white-space: nowrap;
  text-align: right;
}

.sf-listing-card__variant-ctas {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ────────── Watch + Cart buttons (shared styling for action-row + variant rows) ────────── */
.sf-listing-card__watch {
  background: #fff;
  color: var(--sf-text-mid);
  border: 1.5px solid var(--sf-border);
  border-radius: 8px;
  padding: 0.36rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', Arial, sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.sf-listing-card__watch:hover {
  border-color: var(--sf-amber);
  color: var(--sf-brown);
}

.sf-listing-card__watch.watching {
  background: var(--sf-sage-pale);
  color: var(--sf-sage-dark);
  border-color: rgba(74,124,63,0.35);
}

.sf-listing-card__watch.watching:hover {
  background: var(--sf-sage-pale);
  border-color: var(--sf-sage-dark);
  color: var(--sf-sage-dark);
}

/* Action-row Watch is slightly larger for visual weight */
.sf-listing-card__action-row .sf-listing-card__watch {
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
}

.sf-listing-card__cart {
  background: var(--sf-amber);
  color: var(--sf-brown);
  border: none;
  border-radius: 8px;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'DM Sans', Arial, sans-serif;
  transition: background 0.18s, transform 0.12s;
  white-space: nowrap;
}

.sf-listing-card__cart:hover {
  background: var(--sf-amber-light);
  transform: translateY(-1px);
}

.sf-listing-card__cart:disabled,
.sf-listing-card__cart.sold-out {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Preview context — buttons visible but non-functional */
.sf-listing-card--preview .sf-listing-card__watch,
.sf-listing-card--preview .sf-listing-card__cart {
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* ────────── Coming-soon placeholder row (when no variants exist) ────────── */
.sf-listing-card__variant-row--placeholder {
  grid-template-columns: 1fr auto;
  font-size: 0.82rem;
  color: var(--sf-text-mid);
  font-style: italic;
  background: var(--sf-cream);
}

/* ────────── Focus visibility (a11y floor) ────────── */
.sf-listing-card__link:focus-visible,
.sf-listing-card__watch:focus-visible,
.sf-listing-card__cart:focus-visible,
.sf-listing-card__seller-link:focus-visible {
  outline: 2px solid var(--sf-amber);
  outline-offset: 2px;
}

/* ────────── Mobile breakpoint ────────── */
@media (max-width: 700px) {
  .sf-listing-card__link {
    flex-direction: column;
  }
  .sf-listing-card__image {
    width: 100%;
    min-width: 0;
    min-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--sf-border);
  }
  .sf-listing-card__body {
    padding: 1rem 1.1rem 0.9rem;
  }
  /* On mobile, action-row + variant-rows drop the desktop image-width left padding */
  .sf-listing-card__action-row,
  .sf-listing-card__variant-row {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
  .sf-listing-card__action-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }
  /* Variant rows stack content on narrow screens — label+status, price+CTAs */
  .sf-listing-card__variant-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "label    price"
      "status   ctas";
    row-gap: 0.3rem;
  }
  .sf-listing-card__variant-label  { grid-area: label; }
  .sf-listing-card__variant-status { grid-area: status; }
  .sf-listing-card__variant-price  { grid-area: price; }
  .sf-listing-card__variant-ctas   { grid-area: ctas; justify-content: flex-end; }
}