.markets-page { max-width: 1100px; margin: 0 auto; padding: 32px 16px 60px; }
.markets-page > * { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Hero ──────────────────────────────────────────────────── */
.markets-hero {
  background: linear-gradient(135deg, #0a7a38 0%, #14a356 55%, #1bc467 100%);
  border-radius: 20px; padding: 44px 40px; text-align: center;
  position: relative; overflow: hidden; margin-bottom: 28px;
}
.markets-hero::before {
  content:''; position:absolute; top:-40%; left:-20%;
  width:160%; height:160%;
  background:radial-gradient(circle at 60% 40%, rgba(255,255,255,0.07) 0%, transparent 55%);
  pointer-events:none;
}
.markets-hero h1 { font-size:2.2rem; margin:0 0 8px; }
.markets-hero p  { font-size:1rem; color:rgba(255,255,255,0.85); margin:0; }

/* ── Filter bar ────────────────────────────────────────────── */
.filter-bar {
  background:rgba(4,28,12,0.82); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  padding:18px 24px; display:flex; gap:14px; align-items:flex-end;
  flex-wrap:wrap; margin-bottom:20px;
}
.filter-bar > * { margin:0 !important; }
.filter-group { display:flex; flex-direction:column; gap:5px; }
.filter-group label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.45); }
.filter-input, .filter-select {
  padding:9px 14px; background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(255,255,255,0.14); border-radius:10px;
  color:white; font-family:inherit; font-size:0.9rem; min-width:180px;
}
.filter-input::placeholder { color:rgba(255,255,255,0.28); }
.filter-input:focus, .filter-select:focus { outline:none; border-color:#1bc467; }
.filter-select option { background:#041c0a; color:white; }
.filter-clear {
  padding:9px 18px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15); border-radius:10px;
  color:rgba(255,255,255,0.6); font-family:inherit; font-size:0.88rem;
  cursor:pointer; transition:background 0.15s,color 0.15s; align-self:flex-end;
}
.filter-clear:hover { background:rgba(255,255,255,0.14); color:white; }

/* ── Results bar ───────────────────────────────────────────── */
.results-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; flex-wrap:wrap; gap:10px;
}
.results-bar > * { margin:0 !important; }
#results-count { font-size:0.88rem; color:rgba(255,255,255,0.45); }

/* ── Market grid ───────────────────────────────────────────── */
.markets-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
}

/* ── Market card ───────────────────────────────────────────── */
.market-card {
  background:rgba(4,20,10,0.88); border:1px solid rgba(255,255,255,0.09);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.market-card:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 44px rgba(0,0,0,0.45);
  border-color:rgba(27,196,103,0.3);
}
.market-card-header {
  background: linear-gradient(145deg, #062e16 0%, #0a4422 100%);
  padding: 22px 20px 18px;
  position: relative;
}
.market-card-county {
  position:absolute; top:14px; right:16px;
  font-size:0.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; padding:3px 10px;
  background:rgba(27,196,103,0.2); border:1px solid rgba(27,196,103,0.35);
  border-radius:20px; color:#4cd98a;
}
.market-card-name {
  font-size:1.05rem; font-weight:800; color:white;
  margin:0 0 4px; line-height:1.3; padding-right:64px;
}
.market-card-location {
  font-size:0.78rem; color:rgba(255,255,255,0.5);
  display:flex; align-items:center; gap:5px; margin:0;
}
.market-card-location svg { width:12px; height:12px; stroke:rgba(27,196,103,0.7); fill:none; stroke-width:2.5; flex-shrink:0; }
.market-card-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; gap:10px; }

/* Day chips */
.market-days { display:flex; flex-wrap:wrap; gap:5px; }
.market-day-chip {
  font-size:0.68rem; font-weight:700; padding:3px 9px;
  border-radius:20px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.75);
  text-transform:uppercase; letter-spacing:0.5px;
}
.market-time { font-size:0.78rem; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:5px; }
.market-time svg { width:12px; height:12px; stroke:rgba(27,196,103,0.7); fill:none; stroke-width:2.5; flex-shrink:0; }
.market-desc {
  font-size:0.8rem; color:rgba(255,255,255,0.48); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Producer chips on card */
.market-producers-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.market-producers-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:rgba(255,255,255,0.35); flex-basis:100%; }
.producer-chip {
  font-size:0.72rem; padding:3px 10px; border-radius:20px;
  background:rgba(27,196,103,0.1); border:1px solid rgba(27,196,103,0.25);
  color:#4cd98a; cursor:default; white-space:nowrap;
}
.no-producers-note { font-size:0.75rem; color:rgba(255,255,255,0.3); font-style:italic; }

/* View market button */
.market-card-footer {
  padding:0 20px 18px; margin-top:auto;
}
.view-market-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:10px; border:1.5px solid rgba(27,196,103,0.35);
  border-radius:10px; background:transparent; color:#4cd98a;
  font-family:inherit; font-size:0.88rem; font-weight:600;
  cursor:pointer; transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.view-market-btn:hover { background:rgba(27,196,103,0.12); border-color:#1bc467; color:#7de8ab; }
.view-market-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── Market detail panel ───────────────────────────────────── */
.market-detail-panel {
  display:none;
  background:rgba(4,20,10,0.94); border:1px solid rgba(27,196,103,0.25);
  border-radius:18px; padding:28px 28px 32px;
  margin-bottom:24px; position:relative;
}
.market-detail-panel.open { display:block; }
.panel-close-btn {
  position:absolute; top:16px; right:18px;
  background:none; border:none; color:rgba(255,255,255,0.4);
  cursor:pointer; padding:4px; border-radius:6px;
  transition:color 0.15s, background 0.15s;
}
.panel-close-btn:hover { color:white; background:rgba(255,255,255,0.1); }
.panel-close-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

.panel-header { margin:0 0 20px; }
.panel-header h2 { font-size:1.4rem; margin:0 0 4px; padding-right:40px; }
.panel-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px; }
.panel-meta-item { display:flex; align-items:center; gap:5px; font-size:0.82rem; color:rgba(255,255,255,0.55); }
.panel-meta-item svg { width:14px; height:14px; stroke:#1bc467; fill:none; stroke-width:2; flex-shrink:0; }

.panel-section-title {
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  color:rgba(255,255,255,0.35); margin:20px 0 12px;
}
.panel-divider { height:1px; background:rgba(255,255,255,0.08); margin:18px 0; }

/* Producer section inside panel */
.panel-producer-block {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:16px 18px; margin-bottom:14px;
}
.panel-producer-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.panel-producer-name { font-size:0.95rem; font-weight:700; color:white; flex:1; }
.panel-producer-county { font-size:0.7rem; color:rgba(255,255,255,0.45); }

/* Product mini-cards inside panel */
.panel-products-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:10px;
}
.panel-product-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09);
  border-radius:10px; overflow:hidden;
}
.panel-product-img {
  width:100%; aspect-ratio:4/3; object-fit:cover;
  background:rgba(255,255,255,0.04);
}
.panel-product-body { padding:9px 11px; }
.panel-product-name { font-size:0.82rem; font-weight:700; color:white; margin:0 0 4px; line-height:1.3; }
.panel-product-price { font-size:0.88rem; font-weight:800; color:#4cd98a; }
.panel-product-footer { padding:0 11px 10px; display:flex; gap:6px; align-items:center; }
.panel-qty-input {
  width:44px; padding:5px 6px; text-align:center;
  background:rgba(255,255,255,0.07); border:1.5px solid rgba(255,255,255,0.14);
  border-radius:7px; color:white; font-family:inherit; font-size:0.82rem;
}
.panel-qty-input:focus { outline:none; border-color:#1bc467; }
.panel-add-btn {
  flex:1; padding:6px 10px; border:none; border-radius:7px;
  background:linear-gradient(135deg,#14a356 0%,#1bc467 100%);
  color:white; font-family:inherit; font-size:0.78rem; font-weight:700;
  cursor:pointer; transition:filter 0.15s;
  display:flex; align-items:center; justify-content:center; gap:4px;
  white-space:nowrap;
}
.panel-add-btn:hover { filter:brightness(1.1); }
.panel-add-btn:disabled { opacity:0.5; cursor:not-allowed; filter:none; }
.panel-add-btn svg { width:12px; height:12px; stroke:white; fill:none; stroke-width:2.5; }

.no-products-note { font-size:0.8rem; color:rgba(255,255,255,0.35); font-style:italic; padding:4px 0; }

/* Map inside panel */
#market-detail-map {
  height:200px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.12); margin-bottom:18px;
}

/* No results */
.no-results {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:rgba(255,255,255,0.35);
}
.no-results p { font-size:1rem; margin:0 0 6px; }
.no-results small { font-size:0.83rem; }
.page-loading { text-align:center; padding:60px 20px; color:rgba(255,255,255,0.35); font-size:0.95rem; }

@media (max-width: 600px) {
  .markets-hero { padding:32px 24px; }
  .markets-hero h1 { font-size:1.7rem; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-input, .filter-select { min-width:0; width:100%; }
  .market-detail-panel { padding:20px 16px 24px; }
  .panel-products-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
}