/* Listing cards and supplier detail pages.
   Uses the shared tokens (--accent amber for the one primary action, --accent-2 cyan for verification). */

.hl-tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.hl-tag{ font-size:13px; border:1px solid var(--line); padding:3px 10px; border-radius:999px; color:var(--muted); }
.hl-tag-key{ color:var(--ink); border-color:rgba(70,220,227,.45); font-weight:600; }
.hl-tag-yes{ border-color:rgba(70,220,227,.75); background:rgba(70,220,227,.10); }
.hl-tag-row-more .hl-tag{ font-size:12px; opacity:.85; }
.hl-card-actions{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }

.hl-listing-card{ padding:16px; }
.hl-listing-card.is-featured{ border-color:rgba(255,173,77,.55); }
.hl-listing-card-body{ display:flex; gap:14px; align-items:flex-start; }
.hl-listing-card-main{ min-width:0; flex:1; }
.hl-listing-logo{ width:64px; height:64px; border-radius:12px; object-fit:contain; background:#0e131b; border:1px solid var(--line); flex:none; }
.hl-listing-card h3{ margin:0 0 2px; font-size:19px; line-height:1.25; }
.hl-listing-card h3 a{ color:inherit; text-decoration:none; }
.hl-listing-card h3 a:hover{ text-decoration:underline; }

.hl-flag-row{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.hl-flag{ display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.02em; border-radius:999px; padding:3px 10px; border:1px solid var(--line); }
.hl-flag-featured{ color:var(--accent); border-color:rgba(255,173,77,.6); background:rgba(255,173,77,.10); }
.hl-flag-verified{ color:var(--accent-2); border-color:rgba(70,220,227,.6); background:rgba(70,220,227,.08); }

.hl-listing-facts{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; font-size:14px; }
.hl-listing-facts div{ display:flex; gap:6px; }
.hl-listing-facts dt{ color:var(--muted); }
.hl-listing-facts dd{ margin:0; color:var(--ink); font-weight:600; }

/* City page note about labeled placement */
.hl-featured-note{ margin:0 0 12px; font-size:14px; color:var(--muted); }

/* Detail page */
.hl-lp{ display:grid; gap:16px; }
.hl-lp-head{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; }
.hl-lp-head h1{ margin:6px 0 4px; font-size:clamp(24px,4vw,34px); line-height:1.15; }
.hl-lp-sub{ margin:0 0 12px; color:var(--muted); font-size:16px; }
.hl-lp-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; border:1px solid var(--line); }
.hl-lp-actions{ display:grid; gap:8px; min-width:230px; }
.hl-lp-actions .hl-btn{ width:100%; box-sizing:border-box; }
.hl-lp-panel{ border:1px solid var(--line); border-radius:14px; padding:16px; background:rgba(255,255,255,.02); }
.hl-lp-panel h2{ margin:0 0 10px; font-size:18px; }
.hl-lp-panel p{ font-size:16px; line-height:1.55; margin:0 0 10px; }
.hl-lp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.hl-lp-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hl-lp-service{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#0e131b; }
.hl-lp-service b{ display:block; margin-bottom:4px; }
.hl-lp-service span{ font-size:14px; color:var(--muted); }
.hl-lp-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; }
.hl-lp-row:last-child{ border-bottom:0; }
.hl-lp-row > span:first-child{ color:var(--muted); flex:none; }
.hl-lp-row > span:last-child{ text-align:right; }
.hl-lp-empty{ color:var(--muted); font-style:italic; }
.hl-lp-empty a{ color:var(--accent); font-style:normal; font-weight:600; }
.hl-lp-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.hl-lp-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.hl-lp-claim{ border:1px solid rgba(70,220,227,.45); border-radius:14px; padding:16px; background:rgba(70,220,227,.05); }
.hl-lp-claim ul{ margin:8px 0 12px 18px; padding:0; color:var(--muted); font-size:15px; }
.hl-lp-stickybar{ display:none; }

@media (max-width:760px){
  .hl-lp-head, .hl-lp-cols, .hl-lp-services{ grid-template-columns:1fr; }
  .hl-lp-actions{ min-width:0; }
  .hl-listing-card-body{ gap:10px; }
  .hl-lp-stickybar{ display:flex; position:sticky; bottom:0; z-index:5; gap:8px; padding:10px; background:rgba(7,10,18,.94); border-top:1px solid var(--line); }
  .hl-lp-stickybar .hl-btn{ flex:1; }
}