/* ============================================================
   LISTINGS.CSS — Classified Ads Section
   Phase 2B polished — cards clickable, status, actions, responsive
   ============================================================ */

.listings-section {
  background: var(--surface-sunken);
  padding-block: var(--space-16);
}

/* ── Listing Filters Bar ──────────────────────────────────── */
.listings-toolbar {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.listings-search-bar{
  display:flex;gap:10px;align-items:stretch;margin-bottom:var(--space-4);
}
.listings-search-field{
  flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  background:var(--surface-sunken);border:1.5px solid var(--border-strong);
  border-radius:999px;padding:6px 10px 6px 6px;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}
.listings-search-field:focus-within{
  border-color:var(--brand-300);background:var(--surface-raised);
  box-shadow:0 0 0 3px rgba(46,142,46,.13),var(--shadow-sm);
}
.listings-search-icon{flex:0 0 auto;width:20px;height:20px;color:var(--text-muted);pointer-events:none;transition:color var(--transition-fast)}
.listings-search-field:focus-within .listings-search-icon{color:var(--brand-600)}
.listings-search-input{
  flex:1;min-width:0;padding:8px 2px;border:none;background:transparent;
  font-family:var(--font-family);font-size:var(--text-base);color:var(--text);
  direction:rtl;outline:none;
}
.listings-search-input::placeholder{color:var(--text-faint)}
.listings-search-clear{
  flex:0 0 auto;width:30px;height:30px;border:none;border-radius:50%;
  background:var(--surface-raised);border:1px solid var(--border);color:var(--text-muted);
  display:grid;place-items:center;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);
}
.listings-search-clear:hover{background:var(--surface-sunken);color:var(--text);border-color:var(--border-strong)}
.listings-search-clear svg{width:14px;height:14px}
.listings-search-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  background:var(--brand-600);color:#fff;border:1.5px solid var(--brand-600);
  border-radius:999px;padding:0 22px;min-height:44px;
  font-family:var(--font-family);font-size:var(--text-sm);font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;
  box-shadow:0 2px 8px rgba(35,112,35,.20);
  transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
.listings-search-btn:hover{background:var(--brand-700);border-color:var(--brand-700);box-shadow:0 4px 14px rgba(35,112,35,.26)}
.listings-search-btn:active{background:var(--brand-800);border-color:var(--brand-800);transform:translateY(1px)}
.listings-search-btn:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px}
.listings-search-btn-icon{width:17px;height:17px;flex:0 0 auto}
.listings-filters{
  display:grid;grid-template-columns:repeat(4,1fr) auto;gap:10px;align-items:end;
}
.listings-filter{display:flex;flex-direction:column;gap:6px;min-width:0}
.listings-filter-label{font-size:11.5px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.listings-filter-icon{width:15px;height:15px;flex:0 0 auto;color:var(--brand-600);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.listings-filter-select{
  width:100%;min-height:42px;padding:8px 10px;border:1.5px solid var(--border);
  border-radius:10px;background:var(--surface-raised);font-family:var(--font-family);
  font-size:13px;color:var(--text);direction:rtl;cursor:pointer;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.listings-filter-select:focus{outline:none;border-color:var(--brand-300);box-shadow:0 0 0 3px rgba(46,142,46,.12)}
.listings-filter--check{
  flex-direction:row;align-items:center;gap:8px;min-height:42px;padding:0 12px;
  border:1.5px solid var(--border);border-radius:999px;background:var(--surface-raised);cursor:pointer;
  transition:border-color var(--transition-fast),background var(--transition-fast);
}
.listings-filter--check:hover{border-color:var(--brand-200);background:var(--brand-50)}
.listings-filter--check input{position:absolute;opacity:0;pointer-events:none}
.listings-check-box{
  width:20px;height:20px;border:1.5px solid var(--border-strong);border-radius:6px;
  display:grid;place-items:center;background:#fff;color:transparent;flex:0 0 auto;
  transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
}
.listings-filter--check input:checked + .listings-check-box{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.listings-check-box svg{width:13px;height:13px}
.listings-active-filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.listings-active-filters:empty{display:none}
.listings-active-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--brand-50);border:1px solid var(--brand-100);font-size:11.5px;font-weight:700;color:var(--brand-700)}
.listings-active-chip button{width:18px;height:18px;border:none;border-radius:50%;background:var(--brand-600);color:#fff;display:grid;place-items:center;cursor:pointer}
.listings-active-chip button svg{width:10px;height:10px}
@media(max-width:860px){.listings-filters{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .listings-search-bar{flex-direction:column}
  .listings-search-btn{width:100%;justify-content:center;min-height:46px}
  .listings-filters{grid-template-columns:1fr}
}

/* ── Sort + Results Row ──────────────────────────────────── */
.listings-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.listings-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.listings-count strong { color: var(--text); }
.sort-select {
  padding: 0.4em 0.8em;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-raised);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--text);
  direction: rtl;
  cursor: pointer;
}

/* ── Listing Card ─────────────────────────────────────────── */
.listing-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
  position: relative;
  isolation: isolate;
}
.listing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--brand-200);
}
.listing-card:focus-within {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 3px rgba(46,142,46,0.14), var(--shadow-md);
}
.listing-card--featured {
  border-color: var(--accent-300);
  box-shadow: 0 0 0 2px rgba(245,162,0,0.12);
}
.listing-card--featured:hover {
  box-shadow: 0 0 0 2px rgba(245,162,0,0.18), var(--shadow-lg);
}
.listing-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.listing-card-link:focus-visible { outline: none; }
.listing-card-link:focus-visible .listing-card-title {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.listing-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.listing-card-seller {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.listing-seller-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--brand-700);
  font-weight: var(--font-weight-bold);
}
.listing-seller-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.listing-seller-location {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.listing-card-header-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.listing-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
}
.listing-status--available { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(30,126,52,0.18); }
.listing-status--limited   { background: var(--color-warning-bg); color: var(--color-warning); border-color: rgba(198,124,0,0.18); }
.listing-status--featured  { background: var(--accent-100); color: var(--accent-700); border-color: var(--accent-200); }
.listing-card-body { padding: var(--space-4) var(--space-5); flex: 1; display: flex; flex-direction: column; }
.listing-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--text);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}
.listing-card:hover .listing-card-title { color: var(--color-primary); }
.listing-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.listing-detail {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
}
.listing-detail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.listing-detail-value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listing-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  margin-top: auto;
}
.listing-price {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.listing-price-unit {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.listing-card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.listing-date {
  font-size: var(--text-xs);
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.listing-date::before { content: "\25F7"; font-size: 11px; }
.listing-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.listing-card-actions .btn { position: relative; z-index: 1; }

/* ── Featured Badge Row ──────────────────────────────────── */
.featured-listings { margin-bottom: var(--space-8); }
.featured-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-700);
  margin-bottom: var(--space-4);
}
.featured-label::before { content: "\2B50"; }

/* ── Dense compact listing (home) ────────────────────────── */
.listing-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.listing-compact:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.listing-compact.is-featured { border-color: var(--accent-200); background: linear-gradient(135deg, var(--surface-raised), var(--accent-50)); }
.listing-compact-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.listing-compact-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.listing-compact-info { flex: 1; min-width: 0; }
.listing-compact-title { font-size: 12.5px; font-weight: var(--font-weight-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-compact-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing-compact-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.listing-compact-date { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
#home-listings-grid, #home-listings-featured { display: flex; flex-direction: column; gap: 8px; }

/* ── AD SINGLE PAGE ─────────────────────────────────────── */
.ad-single-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 32px; }
.ad-breadcrumb { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ad-breadcrumb a { color: var(--color-info); text-decoration: none; }
.ad-breadcrumb a:hover { text-decoration: underline; }
.ad-breadcrumb-sep { opacity: 0.4; }
.ad-single-layout { display: grid; grid-template-columns: 1.55fr 0.9fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ad-single-layout { grid-template-columns: 1fr; } }
.ad-single-main, .ad-single-side { display: flex; flex-direction: column; gap: 14px; }
.ad-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.ad-card-pad { padding: 18px; }
.ad-single-title { font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--text); margin: 0 0 8px; }
.ad-single-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.ad-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.ad-single-price-box { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ad-price { font-size: 22px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ad-price small { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ad-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .ad-specs { grid-template-columns: 1fr; } }
.ad-spec { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; }
.ad-spec dt { color: var(--text-muted); }
.ad-spec dd { font-weight: 700; color: var(--text); }
.ad-seller-box { display: flex; gap: 12px; align-items: center; padding: 14px; background: linear-gradient(135deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); border-radius: var(--radius-lg); }
.ad-broker-note{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.9;font-weight:600;color:var(--brand-800);background:linear-gradient(135deg,#ecfdf5 0%,#f6fbf6 100%);border:1px solid var(--brand-200);border-radius:var(--radius-md);padding:9px 11px;margin:0}
.ad-broker-note>span:first-child{flex-shrink:0;line-height:1.9}
.ad-ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ad-broker-note>.ad-ic{margin-top:3px;color:var(--brand-600)}
.ad-broker-note>span{min-width:0}
.ad-seller-avatar>.ad-ic{width:20px;height:20px;stroke-width:1.6}
.ad-trust-item>.ad-ic{width:16px;height:16px;color:var(--brand-600)}
.ad-seller-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; border: 2px solid var(--surface-raised); box-shadow: var(--shadow-sm); }
.ad-seller-name { font-weight: 800; color: var(--text); }
.ad-seller-type { font-size: 12px; color: var(--text-muted); }
.ad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ad-actions .btn { flex: 1 1 140px; }
.ad-section-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.ad-section-title::before { content: ""; width: 3px; height: 16px; border-radius: 999px; background: var(--brand-500); }
.ad-desc { font-size: 13.5px; line-height: 1.9; color: var(--text-muted); }
.ad-desc strong { color: var(--text); }
.ad-sidebar-sticky { position: sticky; top: 86px; }
@media (max-width: 900px) { .ad-sidebar-sticky { position: static; } }
.ad-contact-card { padding: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 10px; }
.ad-contact-title { font-size: 13px; font-weight: 800; color: var(--text); }
.ad-contact-note { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }
.ad-similar { margin-top: 10px; }
.ad-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ad-empty { text-align: center; padding: 22px; background: var(--surface-raised); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 13px; line-height: 1.8; }
/* ── AD COMMENTS / Q&A (frontend demo) ─────────────────────── */
.ad-comments { margin-top: 2px; }
.ad-comments-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ad-comments-count { font-size: 12px; color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--border); padding: 3px 9px; border-radius: var(--radius-full); }
.ad-comment-form { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ad-comment-form-row { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
@media (max-width: 560px) { .ad-comment-form-row { grid-template-columns: 1fr; } }
.ad-comment-textarea { min-height: 88px; resize: vertical; line-height: 1.8; }
.ad-comment-list { display: flex; flex-direction: column; gap: 10px; }
.ad-comment { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.ad-comment:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.ad-comment--reply { margin-inline-start: 18px; border-inline-start: 3px solid var(--brand-200); background: var(--surface-sunken); }
.ad-comment-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ad-comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.ad-comment-author { font-weight: 800; font-size: 13px; color: var(--text); }
.ad-comment-role { font-size: 11px; color: var(--text-muted); }
.ad-comment-date { font-size: 11.5px; color: var(--text-faint); }
.ad-comment-body { font-size: 13px; line-height: 1.85; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.ad-comment-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ad-comment-actions .btn { height: 30px; min-height: 30px; font-size: 12px; padding: 0 10px; }
.ad-comments-empty { text-align: center; padding: 18px; color: var(--text-muted); font-size: 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); }

@media (max-width: 480px) {
  .listing-card-header { padding: 14px; }
  .listing-card-body { padding: 14px; }
  .listing-card-footer { padding: 10px 14px; }
  .listing-details-grid { grid-template-columns: 1fr; }
  .ad-single-wrap { padding-inline: 12px; }
  .ad-card-pad { padding: 14px; }
  .ad-single-title { font-size: 18px; }
  .ad-comment--reply { margin-inline-start: 10px; }
}

 /* ── Purchase Modal ──────────────────────────────────────────── */
 .purchase-modal{max-width:460px}
 .purchase-qty-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
 .qty-step{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface-raised);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
 .qty-step:hover{border-color:var(--brand-400);color:var(--brand-700)}
 .qty-input{flex:1;text-align:center;font-size:18px;font-weight:800;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:10px;background:var(--surface-raised);font-family:var(--font-family);font-variant-numeric:tabular-nums}
 .qty-slider{width:100%;accent-color:var(--brand-600)}
 .purchase-total{display:flex;align-items:baseline;gap:8px;justify-content:space-between;padding:12px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:12px}
 .purchase-total-label{font-size:var(--text-sm);color:var(--text-muted)}
 .purchase-total-value{font-size:var(--text-xl);font-weight:800;color:var(--brand-700);font-variant-numeric:tabular-nums}
 .purchase-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
 

 /* ── Ad Gallery ─────────────────────────────────────────────── */
 .ad-gallery{margin:14px 0 6px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px}
 .ad-gallery-main{aspect-ratio:16/9;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:48px;min-height:160px}
 .ad-gallery-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
 .ad-thumb{width:52px;height:52px;flex-shrink:0;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-raised);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
 .ad-thumb.is-active{border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(46,142,46,.18)}
 .ad-thumb:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

/* ── Ad single: buy modes, tier discount, lab card, steps, trust ── */
.ad-buy-card{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.ad-buy-tabs{display:flex;gap:6px;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-full);padding:5px;margin-bottom:12px}
.ad-buy-tab{flex:1;border:none;background:transparent;color:var(--text-muted);font-family:var(--font-family);font-size:13px;font-weight:700;padding:8px 10px;border-radius:var(--radius-full);cursor:pointer}
.ad-buy-tab.is-active{background:var(--surface-raised);color:var(--brand-700);box-shadow:var(--shadow-sm)}
.ad-buy-panel[hidden]{display:none}
.ad-buy-qty{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}
.ad-buy-unit{font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.ad-buy-calc{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:10px 12px;margin:10px 0;display:flex;flex-direction:column;gap:6px;background:var(--surface-sunken)}
.ad-calc-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--text-muted)}
.ad-calc-row.ad-calc-off{color:var(--color-success);font-weight:700}
.ad-calc-row.ad-calc-total{font-size:14px;font-weight:800;color:var(--text);border-top:1px solid var(--border);padding-top:6px}
.ad-pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ad-pack-btn{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--border);background:var(--surface-raised);border-radius:var(--radius-lg);padding:12px 8px;cursor:pointer;font-family:var(--font-family);transition:border-color .15s ease,box-shadow .15s ease}
.ad-pack-btn:hover{border-color:var(--brand-500);box-shadow:var(--shadow-sm)}
.ad-pack-weight{font-size:13px;font-weight:800;color:var(--text)}
.ad-pack-total{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ad-pack-off{font-size:10.5px;font-weight:800;color:var(--color-success)}
.ad-tier-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}
.ad-tier-table th,.ad-tier-table td{border:1px solid var(--border);padding:8px 10px;text-align:right}
.ad-tier-table thead th{background:var(--surface-sunken);font-weight:800;color:var(--text)}
.ad-tier-off{color:var(--color-success);font-weight:800}
.ad-lab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:8px}
.ad-lab-item{border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;text-align:center;background:var(--surface-raised)}
.ad-lab-label{font-size:11.5px;color:var(--text-muted);margin-bottom:4px}
.ad-lab-value{font-size:18px;font-weight:800;color:var(--brand-700);font-variant-numeric:tabular-nums}
.ad-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ad-steps li{display:flex;gap:10px;align-items:flex-start}
.ad-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--brand-600);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.ad-step-title{font-size:13px;font-weight:800;color:var(--text)}
.ad-step-desc{font-size:12px;color:var(--text-muted);line-height:1.7}
.ad-trust-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.ad-trust-item{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text)}
.ad-trust-ic{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);display:flex;align-items:center;justify-content:center;font-size:12px}

/* ── Redesigned B2B listing card (lc-*) ───────────────────── */
.lc-card { padding: 0; }
.lc-band {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--brand-50) 0%, #ffffff 70%);
  border-bottom: 1px solid var(--border);
}
.lc-card--featured .lc-band { background: linear-gradient(135deg, #fff8e6 0%, #ffffff 70%); }
.lc-card--direct .lc-band { background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 70%); }
.lc-band-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  border-radius: var(--radius-lg);
  background: #ffffff;
  border: 1px solid var(--brand-100);
  box-shadow: var(--shadow-sm);
}
.lc-band-cat { font-size: 12px; font-weight: 800; color: var(--brand-700); }
.lc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; justify-content: flex-end; }
.lc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 5px 9px; border-radius: var(--radius-full);
  border: 1px solid transparent; white-space: nowrap;
}
.lc-pill--brokered { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.lc-pill--direct   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.lc-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.lc-title { font-size: var(--text-md); font-weight: 800; line-height: 1.5; margin: 0; }
.lc-title a { color: inherit; text-decoration: none; }
.lc-card:hover .lc-title a { color: var(--color-primary); }
.lc-seller { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lc-seller-name { color: var(--text); font-weight: 700; text-decoration: none; }
.lc-seller-name--masked { color: var(--text-muted); font-weight: 700; }
a.lc-seller-name:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.lc-lock-note {
  font-size: 11.5px; font-weight: 700; color: var(--brand-700);
  background: var(--brand-50); border: 1px dashed var(--brand-200);
  border-radius: var(--radius-md); padding: 6px 10px;
}
.lc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lc-info {
  display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto;
  column-gap: 6px; align-items: center;
  background: var(--surface-sunken); border-radius: var(--radius-md);
  padding: 7px 9px; min-width: 0;
}
.lc-info-ic { grid-row: 1 / span 2; font-size: 14px; }
.lc-info-label { font-size: 10.5px; color: var(--text-muted); }
.lc-info-value { font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-price-box {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: linear-gradient(135deg, #f6fbf6 0%, #ffffff 70%);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
}
.lc-price-main { display: flex; align-items: baseline; gap: 6px; }
.lc-price {
  font-size: var(--text-xl); font-weight: 900; color: var(--brand-700);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.lc-price-unit { font-size: 11.5px; color: var(--text-muted); }
.lc-tier-hint { font-size: 11px; color: var(--text-muted); text-align: end; }
.lc-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
}
.lc-actions .btn { flex: 1 1 46%; justify-content: center; }
@media (max-width: 480px) {
  .lc-info-grid { grid-template-columns: 1fr; }
  .lc-actions .btn { flex: 1 1 100%; }
}
.listing-compact-pill{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;line-height:1;padding:3px 7px;border-radius:var(--radius-full);background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-200);vertical-align:middle}
.listing-compact-pill.is-direct{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.listing-compact-ic{font-size:12px;margin-inline-end:2px}
.listing-compact.is-brokered{border-inline-start:3px solid var(--brand-300)}

/* ── compat: old class names map to new bar (index fallback until migrated) ── */
.listings-search-row{display:flex;gap:10px;align-items:stretch;margin-bottom:var(--space-4)}
.listings-search-wrap{flex:1;display:flex;align-items:center;gap:8px;min-width:0;background:var(--surface-sunken);border:1.5px solid var(--border-strong);border-radius:999px;padding:6px 10px 6px 6px;box-shadow:var(--shadow-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}
.listings-search-wrap:focus-within{border-color:var(--brand-300);background:var(--surface-raised);box-shadow:0 0 0 3px rgba(46,142,46,.13),var(--shadow-sm)}
.listings-filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3)}
@media(max-width:560px){.listings-search-row{flex-direction:column}.listings-filters-grid{grid-template-columns:1fr}}


/* ── Motion polish ───────────────────────────────────────────── */
.listings-active-chip {
  animation: mb-pop-in var(--motion-base) var(--motion-ease-out) both;
}
.listings-active-chip button,
.qty-step,
.ad-pack-btn,
.ad-buy-tab {
  transition: background var(--motion-base) var(--motion-ease-out),
              color var(--motion-base) var(--motion-ease-out),
              border-color var(--motion-base) var(--motion-ease-out),
              box-shadow var(--motion-base) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.listings-active-chip button:active,
.qty-step:active,
.ad-pack-btn:active,
.ad-buy-tab:active {
  transform: scale(0.96);
}
.listings-active-chip button:active { transform: scale(0.9); }

.purchase-total-value,
.ad-calc-total span:last-child {
  display: inline-block;
}

.ad-calc-total span:last-child {
  animation: mb-num-bump 180ms var(--motion-spring) both;
}

.qty-input {
  transition: border-color var(--motion-base) var(--motion-ease-out),
              box-shadow var(--motion-base) var(--motion-ease-out);
}
.qty-input:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(46,142,46,0.12);
}

/* Brand range slider with a real filled rail (RTL: low on the right). */
.qty-slider {
  -webkit-appearance: none;
  appearance: none;
  direction: rtl;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.qty-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(to left,
      var(--brand-500) 0 var(--range-p, 0%),
      var(--brand-100) var(--range-p, 0%) 100%);
  box-shadow: inset 0 0 0 1px rgba(35, 31, 24, 0.08);
}
.qty-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--brand-600);
  box-shadow: 0 2px 8px rgba(35, 31, 24, 0.26);
  transition: transform var(--motion-fast) var(--motion-ease-out),
              box-shadow var(--motion-fast) var(--motion-ease-out);
}
.qty-slider:active::-webkit-slider-thumb,
.qty-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.16);
  box-shadow: 0 0 0 4px rgba(46,142,46,0.16), 0 3px 9px rgba(35, 31, 24, 0.24);
}
.qty-slider:focus-visible { outline: none; }
.qty-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(to left,
      var(--brand-500) 0 var(--range-p, 0%),
      var(--brand-100) var(--range-p, 0%) 100%);
  box-shadow: inset 0 0 0 1px rgba(35, 31, 24, 0.08);
}
.qty-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--brand-600);
  box-shadow: 0 2px 8px rgba(35, 31, 24, 0.26);
}

.ad-gallery-main > span {
  animation: mb-pop-in var(--motion-base) var(--motion-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .listings-active-chip,
  .ad-calc-total span:last-child,
  .ad-gallery-main > span {
    animation: none !important;
  }
}