/* search.css — shared styles for the search experience (suggest, parse
 * chips, result cards, price tables, hearts, önska sheet, toast).
 * ONE canonical copy, loaded by index.html and /v9. Relies on the host
 * page's :root vars (--pink, --bg, --border, …) — both pages define the
 * same palette. Page-specific chrome (hero, search box, pulse bar,
 * spotlight, gem modules) stays in each page. */

.home-content { display: block; }
.home-content.hidden { display: none; }

/* v7: the AI parse made visible — removable filter chips. */
.parse-strip { display: none; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.parse-strip.active { display: flex; }
.parse-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-light); flex-shrink: 0;
}
.pchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 9px 8px 14px;
  background: var(--pink-soft); border: 1px solid var(--pink);
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text);
}
.pchip .pchip-facet {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--pink);
}
.pchip .pchip-x {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: rgba(224,96,128,0.15); color: var(--pink);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.pchip .pchip-x:hover { background: var(--pink); color: var(--white); }
/* Soft chip (chip honesty 2026-08-16): the parse UNDERSTOOD this but the
   server did not filter on it — must never look like an applied filter. */
.pchip.soft {
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-light);
}
.pchip.soft .pchip-facet { color: var(--text-light); }
.pchip.soft .pchip-x { background: rgba(0,0,0,0.06); color: var(--text-light); }
.pchip.soft .pchip-x:hover { background: var(--text-light); color: var(--white); }
.pchip-soft-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-light);
}
.parse-reset {
  border: none; background: none; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--text-light);
  text-decoration: underline; cursor: pointer;
}
.parse-reset:hover { color: var(--pink); }

/* Typed suggest — the two-speed search's fast lane (/api/suggest). */
.suggest { display: none; background: var(--white); text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius);
  margin: 8px auto 0; max-width: 560px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.07); }
.suggest.open { display: block; }
.sg-row { display: flex; justify-content: space-between; gap: 12px;
  align-items: baseline; padding: 12px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border); }
.sg-row:hover { background: var(--pink-soft); }
.sg-main { font-weight: 600; font-size: 14.5px; }
.sg-kind { font-size: 12px; color: var(--text-light); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.sg-ask .sg-main, .sg-ask .sg-kind { color: var(--pink); }
.sg-foot { padding: 9px 16px; font-size: 12px; color: var(--text-light);
  background: var(--bg); }

/* Fact badges (ADR 0048 §2) — certification renders stronger (filled,
   green) than practice claims (outlined) and associations (neutral). */
.fact-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.fact-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 4px 11px; border-radius: var(--radius-pill);
}
.fb-certification { background: rgba(45,134,89,0.12); color: var(--green); }
.fb-practice { background: var(--white); border: 1px solid var(--border); color: var(--text-mid); }
.fb-association { background: var(--bg); color: var(--text-mid); border: 1px solid var(--border); }

/* Results list + v7 producer cards. */
.results { display: none; }
.results.active { display: block; }
.result-summary { font-size: 15px; color: var(--text-mid); margin-bottom: 14px; }
.result-summary strong { color: var(--text); }
.result-summary em { font-style: italic; color: var(--text-mid); }

.result-item {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 18px; margin-bottom: 12px;
}
.result-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.result-hero {
  width: 56px; height: 56px; border-radius: 10px;
  background-size: cover; background-position: center; flex-shrink: 0;
}
.result-logo-fallback {
  width: 56px; height: 56px; border-radius: 10px;
  background: var(--pink-soft); color: var(--pink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.result-meta { flex: 1; min-width: 0; }
/* v7: bolder producer name. */
.result-producer-name {
  font-size: 21px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
}
.result-producer-name a:hover { color: var(--pink); }
.result-producer-region {
  font-size: 12.5px; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px;
}
.result-score {
  font-size: 10px; color: var(--text-light); margin-left: 8px;
  font-variant-numeric: tabular-nums;
}

.wine-section { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
/* S1 wine-axis filter: rows that didn't satisfy the active typ/färg
   filter stay visible but recede — the card is the whole producer. */
.wine-section.axis-dim { opacity: .38; }
.wine-section:first-of-type { border-top: none; margin-top: 4px; padding-top: 4px; }
/* v7: bolder wine name. */
.wine-name { font-size: 17px; font-weight: 700; letter-spacing: -0.1px; color: var(--text); margin-bottom: 4px; }
.wine-facets { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--text-light); margin-bottom: 8px; }
.wine-summary { font-size: 15px; color: var(--text-mid); line-height: 1.5; margin: 2px 0 8px; max-width: 640px; }
.wine-facet { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.wine-facet + .wine-facet::before { content: '·'; color: var(--text-light); margin-right: 10px; opacity: 0.5; }

/* ADR 0050 build item 1 — the folded wine row. Collapsed: thumb · name ·
   facets · price summary (från X kr · N butiker). Open: the untouched
   price table + wine summary (all price contracts live there). */
.wine-collapsed { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.wine-collapsed-main { flex: 1; min-width: 0; }
.wine-section.folded .wine-name { margin-bottom: 2px; }
.wine-section.folded .wine-facets { margin-bottom: 0; }
.wine-thumb { width: 30px; height: 44px; object-fit: contain; flex-shrink: 0;
  border-radius: 3px; }
.wine-thumb.empty, .wine-thumb.broken { background: var(--bg);
  border: 1px solid var(--border); }
.wine-thumb.broken { content: url('data:image/gif;base64,R0lGODlhAQABAAAAACw='); }
.wine-price-summary { display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap; flex-shrink: 0; }
.wps-price { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wps-shops { font-size: 12px; color: var(--text-mid); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px 9px; background: var(--white); }
.wine-collapsed:hover .wps-shops { border-color: var(--pink); color: var(--pink); }
.wps-oos { font-size: 12.5px; color: var(--text-light); }
.wps-fw { font-size: 12.5px; color: var(--pink); font-weight: 600; }
.wine-caret { font-size: 11px; color: var(--text-light); transition: transform .15s; }
.wine-section.open .wine-caret { transform: rotate(180deg); }
.wine-detail { display: none; }
.wine-section.open .wine-detail { display: block; padding: 8px 0 2px 42px; }
@media (max-width: 640px) { .wine-section.open .wine-detail { padding-left: 0; } }

.result-availability { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.result-availability-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-light); margin-bottom: 8px;
}

/* v7: PRISJAKT price table — every seller of the SAME wine side by side,
   cheapest in-stock first; "Lägst pris" green; out-of-stock greyed. */
.price-table {
  margin: 4px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.pt-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--bg); font-size: 15px; color: var(--text-mid);
}
.pt-row:last-child { border-bottom: none; }
a.pt-row:hover { background: var(--bg); }
.pt-row.oos { opacity: 0.6; }
.pt-seller { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-seller-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 700; font-size: 13.5px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text);
}
.pt-note { font-size: 13.5px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--text-light); flex-shrink: 0;
}
.pt-tag.best { background: rgba(45,134,89,0.12); border-color: transparent; color: var(--green); }
/* Fanwine price-memory row — the producer's last drop price, from prod. */
.pt-row.fanwine { background: rgba(224,96,128,0.09); border-left: 4px solid var(--pink); }
.pt-row.fanwine .pt-seller-name { color: var(--pink); }
.pt-save {
  background: rgba(45,134,89,0.12); color: var(--green);
  font-weight: 700; font-size: 12.5px;
  padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* (.fanwine-only*, .pt-more pruned 2026-08-16 — ADR 0050 build item 2
   moved the card's drops module and in-card "visa alla" expanders to the
   producer page, which carries its own copies of these rules. Principle
   12: the successor landed, so the superseded CSS goes with it.) */

/* v7 card-level price callout — two TRUE numbers, no same-wine claim:
   cheapest of the latest drop vs cheapest in-stock retail on this card. */
.fanwine-price-callout {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 12px; padding: 12px 16px;
  background: var(--pink-soft);
  border: 1.5px solid rgba(224,96,128,0.35);
  border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--text);
  line-height: 1.4;
}
.fanwine-price-callout .fpc-heart { color: var(--pink); font-size: 18px; flex-shrink: 0; }
.fanwine-price-callout strong { color: var(--pink); font-weight: 700; }
.pt-price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; min-width: 92px; }
.pt-price { font-size: 19px; font-weight: 700; color: var(--pink); white-space: nowrap; }
.pt-price-native { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.pt-diff { font-size: 12.5px; font-weight: 600; color: var(--text-light); white-space: nowrap; }
.pt-arrow { color: var(--text-light); font-size: 16px; flex-shrink: 0; }

/* v7: light empty state — no black block. */
.result-empty-fanwine {
  margin-top: 14px; padding: 18px;
  background: var(--pink-soft); border: 1.5px solid rgba(224,96,128,0.35);
  color: var(--text-mid); border-radius: 10px; text-align: center; font-size: 15px;
}
.result-empty-fanwine strong { display: block; font-size: 17px; color: var(--text); margin-bottom: 6px; font-weight: 600; }

/* The 1-2-3 demand dial (installment four; ported from relaunch-v6).
   A heart is a QUANTITY intent — ♥ Dela låda · ♥♥ En låda · ♥♥♥ Hamstra.
   Request-first: the dial only shows once a producer is önskad; before
   that the card offers "Önska först" (the founding story sheet). */
.heart-context { font-size: 12.5px; color: var(--text-mid); line-height: 1.5;
  margin-top: 16px; }
.heart-context strong { color: var(--text); font-weight: 600; }
.heart-pills-compact { display: flex; gap: 6px; margin-top: 10px; }
.heart-pill-compact { flex: 1; padding: 8px 4px; font-family: inherit;
  font-weight: 600; background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text-mid); cursor: pointer;
  transition: all .15s; display: flex; flex-direction: column;
  align-items: center; gap: 3px; }
.heart-pill-compact:hover { border-color: var(--pink); color: var(--pink); }
.heart-pill-compact.active { background: var(--pink-soft);
  border-color: var(--pink); color: var(--pink); }
.heart-pill-compact .pc-hearts { color: var(--pink); font-size: 13px; line-height: 1; }
.heart-pill-compact .pc-desc { font-size: 9.5px; font-weight: 600;
  color: var(--text-light); text-transform: uppercase; letter-spacing: .6px;
  line-height: 1; }
.heart-pill-compact.active .pc-desc { color: var(--pink); }
.onska-forst { margin-top: 10px; padding: 9px 16px; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--pink); background: var(--pink-soft);
  border: 1.5px solid var(--pink); border-radius: var(--radius-pill);
  cursor: pointer; transition: all .15s; }
.onska-forst:hover { background: var(--pink); color: #fff; }

/* Önska sheet (ONE story question) + veil + toast. */
.sheet-veil { position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 200; }
.sheet-veil.open { opacity: 1; pointer-events: auto; }
.ask-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
  background: var(--white); border-radius: 18px 18px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; transform: translateY(105%);
  transition: transform .3s ease; box-shadow: 0 -12px 40px rgba(0,0,0,0.14); }
.ask-sheet.open { transform: translateY(0); }
.ask-title { font-size: 20px; font-weight: 700; }
.ask-sub { font-size: 14.5px; color: var(--text-mid); line-height: 1.55;
  margin-top: 8px; }
.ask-input { width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; font: inherit; font-size: 15px; margin-top: 12px; }
textarea.ask-input { min-height: 96px; resize: vertical; }
.ask-note { font-size: 12.5px; color: var(--text-light); margin-top: 8px;
  line-height: 1.5; }
.ask-cta { display: block; width: 100%; margin-top: 14px; border: none;
  background: var(--text); color: #fff; font: inherit; font-weight: 600;
  font-size: 15px; padding: 13px; border-radius: var(--radius-pill);
  cursor: pointer; }
.ask-later { display: block; width: 100%; margin-top: 8px; border: none;
  background: none; color: var(--text-light); font: inherit; font-size: 13.5px;
  padding: 8px; cursor: pointer; }
.wish-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 80px);
  background: var(--text); color: #fff; font-size: 14px; padding: 12px 20px;
  border-radius: var(--radius-pill); opacity: 0; transition: all .3s;
  z-index: 300; max-width: 90vw; text-align: center; }
.wish-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* "Kan köpas nu" toggle (ADR 0049 F-B(a)) — rendered in #resultSummary,
   inherits each page's .chip look; .on = active filter state. */
.buyable-toggle { cursor: pointer; vertical-align: middle; }
.buyable-toggle.on { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }

/* Red-pen 2026-07-25 — result-card density + honest states */
/* Grey (axis-dim) wines say why they're grey. */
.axis-dim-tag { display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; color: var(--text-light);
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-pill);
  padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
/* Top 3 wines visible; the rest behind "Visa alla viner (N)". */
/* (the .extra hide/expand pair pruned 2026-08-16 — the card shows its top
   three wines and sends the rest to the producer page, ADR 0050 §5.) */
.wines-more { margin-top: 4px; }
/* Wine texts clamp to two lines in results — the card is a list entry,
   not the producer page. */
.wine-section .wine-summary { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }

/* Compact price grid (red-pen 2026-07-25): one row per retailer+vintage,
   volumes as chips. */
.pt-chips { flex: 2; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end; }
.pt-chip { display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid var(--border, #e3e3e3); border-radius: var(--radius-pill);
  padding: 6px 12px; text-decoration: none; color: inherit; white-space: nowrap; }
a.pt-chip:hover { border-color: var(--pink); background: var(--bg); }
.ptc-vol { font-size: 12px; color: var(--text-light); }
.ptc-price { font-weight: 700; font-size: 14px; color: var(--pink); }
.pt-chip .pt-diff { font-size: 12px; }
.pt-chip.oos { opacity: .55; }
.pt-chip.oos .ptc-price { color: var(--text-light); }
/* ADR 0059 — the price's basis, rendered beside the amount. Quiet: it
   qualifies the price, it must not compete with it. */
.ptc-case { font-size: 11px; color: var(--text-light); margin-left: 3px; white-space: nowrap; }
.ptc-single { font-size: 11px; color: var(--text-light); margin-left: 5px; white-space: nowrap; }
.ptc-oos { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-light); }

/* Facet navigation (stay-on-site 2026-07-25): badges + retailer names click. */
.fact-badge { cursor: pointer; }
.fact-badge:hover { border-color: var(--pink); color: var(--pink); }
.pt-retailer-link { color: inherit; text-decoration: none; }
.pt-retailer-link:hover { color: var(--pink); text-decoration: underline; }

/* Channel facts on result cards. Were links into a separate mode until
   ADR 0050 build item 2 made them chips — so they read as CONTROLS now
   (button affordance), not as sentences with words underlined. */
.result-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fact-tag {
  padding: 4px 10px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text-mid);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; line-height: 1.35;
}
.fact-tag:hover { color: var(--pink); border-color: var(--pink); }
.fact-tag:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Scarcity line (2026-07-25): rarity is the feature — quiet, factual. */
.result-scarcity { font-size: 13px; color: var(--pink); font-weight: 600;
  margin-top: 8px; }

/* Geo facet links (2026-07-25): region/country lines click into filters. */
.geo-link { cursor: pointer; }
.geo-link:hover { color: var(--pink); }

/* Producer summary on the card (2026-07-25): two lines, full text on the
   producer page. */
.result-producer-summary { font-size: 13.5px; color: var(--text-mid);
  line-height: 1.55; margin-top: 10px; max-width: 640px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* ─── ADR 0050 build item 2 — the compact producer section ──────────
   Same blocks as the heavy card; what changes is rhythm. Every value
   here is a density decision, so they sit together rather than being
   scattered through the file: smaller hero, tighter vertical gaps,
   quieter name. The CONTRACTS (§6) live inside .wine-section and are
   deliberately untouched by this block. */
.result-item.compact { padding: 14px 16px; margin-bottom: 8px; }
.result-item.compact .result-header { gap: 12px; margin-bottom: 8px; }
.result-item.compact .result-hero,
.result-item.compact .result-logo-fallback {
  width: 44px; height: 44px; border-radius: 8px; font-size: 14px;
}
.result-item.compact .result-producer-name { font-size: 18px; }
.result-item.compact .result-producer-region { font-size: 11.5px; letter-spacing: 1.2px; }
.result-item.compact .result-producer-summary { margin-top: 6px; font-size: 13px; }
.result-item.compact .fact-badges { margin: 8px 0 0; }
.result-item.compact .result-scarcity { margin-top: 6px; font-size: 12.5px; }
.result-item.compact .fanwine-price-callout { margin-top: 10px; }
.result-item.compact .result-availability { margin-top: 10px; padding-top: 10px; }
.result-item.compact .wine-section { margin-top: 8px; padding-top: 8px; }

/* The way deeper. Not a button — the producer page is a place, and this
   line says what is there rather than pretending the card holds it all. */
.result-more { margin-top: 10px; font-size: 12.5px; }
.result-more a { color: var(--text-mid); font-weight: 600; text-decoration: none; }
.result-more a:hover { color: var(--pink); }

/* "Visa fler" (2026-08-22) — the page is a slice of a server-stated universe;
   this is the only way from the Fanwine block down into the market mix. */
.show-more { display: block; margin: 18px auto 4px; padding: 10px 22px; }