/* ===========================================================================
   STORE SECTIONS — produce / bakery / chef / grocery / deli-cheese
   ---------------------------------------------------------------------------
   The sections engine (js/sections.js) reuses the meat department's CSS
   classes wholesale so all six departments read as one store. This file only
   adds what the meat department doesn't have: per-department floor grids
   (following the hand-drawn plans), the recipe buttons for the oven/kitchen,
   and the section-grid layout inside each piece of furniture.
   =========================================================================== */

/* Department accent tints the HUD bar so each section feels like its own room. */
.sect-overlay .meat-hud {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sect-accent, #b91c1c), #000 55%) 0%,
      rgba(20, 14, 10, 0.94) 100%);
  border-bottom-color: color-mix(in srgb, var(--sect-accent, #b91c1c), #fff 25%);
}
.sect-overlay .meat-hud-title { color: #fef3c7; }

/* ---------- Floor grids ----------
   Each department's furniture is placed with grid areas that follow the
   hand-drawn floor plans. `station`/`buffer`/`stock` is the back-of-house
   column; letters are furniture; `counter`+`queue` are the customer side. */

.sect-floor { display: grid; gap: 8px; align-content: start; }

/* PRODUCE — two big bin tables, backroom crates on the left. */
.sect-floor[data-dept="produce"] {
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    'stock a'
    'stock b'
    'queue queue';
}

/* BAKERY — counter beside the oven, donut & croissant islands, table below
   (counter left, islands right, table under them — as drawn). */
.sect-floor[data-dept="bakery"] {
  grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    'station a a'
    'buffer  b c'
    'buffer  d d'
    'counter queue queue';
}

/* CHEF — the drawn vertical line: salad bar over hot-food counter on the
   left, kitchen + pass in the middle, soup & sandwich island right. */
.sect-floor[data-dept="chef"] {
  grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    'station a c'
    'station b c'
    'buffer  b .'
    'counter queue queue';
}

/* GROCERY — four aisles in a 2x2, pallets on the left, as drawn. */
.sect-floor[data-dept="grocery"] {
  grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    'stock a b'
    'stock c d'
    'queue queue queue';
}

/* DELI/CHEESE — the L: deli arm beside the slicer, cheese arm in front,
   charcuterie island to the right. */
.sect-floor[data-dept="deli"] {
  grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    'stock   a c'
    'station b c'
    'buffer  b .'
    'counter queue queue';
}

/* ---------- Furniture internals ---------- */

.sect-furn-sections { display: grid; gap: 5px; }
.sect-furn-sections.cols-1 { grid-template-columns: 1fr; }
.sect-furn-sections.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sect-furn-sections.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sect-furn-sections.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.sect-furn-tag {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  padding: 1px 5px;
}

/* ---------- Recipe buttons (oven / kitchen) ---------- */

.sect-recipe-row { display: flex; flex-wrap: wrap; gap: 4px; }

.sect-recipe {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--section-color, #b45309), #000 50%), rgba(2, 6, 23, 0.9));
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.sect-recipe:hover { border-color: #f8fafc; transform: translateY(-1px); }
.sect-recipe small { font-size: 9px; color: #cbd5e1; }

/* Self-serve browsers wander the open floor to the right of the wait line. */
.sect-browsers {
  position: absolute;
  right: 12px;
  bottom: 6px;
  height: 70px;
  width: 45%;
  pointer-events: none;
}

/* ---------- Main-menu section chips ---------- */

.mm-sections-label {
  margin-top: 10px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 1.6px;
  color: #94a3b8;
  text-align: center;
}

.mm-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mm-section-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #e2e8f0;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(2, 6, 23, 0.9));
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.mm-section-chip:hover { border-color: #fbbf24; transform: translateY(-1px); }
.mm-section-emoji { font-size: 12px; }

/* Panels sit at the top of whatever row the grid hands them. */
.sect-floor > * , .sect-floor .meat-counter { align-self: start; }
.sect-floor .meat-queue-area { align-self: stretch; }

/* Browsers-only departments have no wait line to paint. */
.meat-queue-area.no-counter::before { display: none; }