/* Search page (search.html) in the Hairline look (2026-09-15).
   Loaded after css/hairline.css. Every rule is scoped to body.hl-site.pg-search.
   Sections: the hero with the search field and the popular options, then the
   results, which sit on hairlines as rows (media stage, name, price, note,
   tracked tags, link). The rows are built by js/main.js from data/products.json
   (.product-card.pc2 > .pmedia + .pbody > .prow h3 + price/status, .sub, .ptags, .cta-row). */

/* ---------- hero: label, title, field, options ---------- */
.hl-site.pg-search .sr-hero { padding-bottom: 0; }
.hl-site.pg-search .sr-hero h1 { margin-top: 22px; }

/* the field: transparent, one hairline, a drawn magnifier, the light under it on focus */
.hl-site.pg-search .search-box {
  position: relative;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0 18px 0 50px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  transition: border-color 0.15s ease;
}
.hl-site.pg-search .search-box:hover { border-color: rgba(143, 208, 255, 0.28); }
.hl-site.pg-search .search-box:focus-within { border-color: var(--hl-ice); }
.hl-site.pg-search .search-box::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 1px;
  background: var(--hl-light);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.hl-site.pg-search .search-box:focus-within::after { opacity: 1; }
/* the old spark glyph gives way to a thin magnifier drawn in hairlines */
.hl-site.pg-search .search-box > span[aria-hidden] {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  pointer-events: none;
}
.hl-site.pg-search .search-box > span[aria-hidden]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--hl-soft);
  border-radius: 50%;
}
.hl-site.pg-search .search-box > span[aria-hidden]::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--hl-soft);
  transform: rotate(45deg);
  transform-origin: 0 50%;
}
.hl-site.pg-search .search-box input {
  min-width: 0;
  padding: 17px 0;
  color: var(--hl-bright);
  font: 400 16px/1.4 "Inter", sans-serif;
  text-overflow: ellipsis;
}
.hl-site.pg-search .search-box input::placeholder { color: #8f9bc8; }
.hl-site.pg-search .search-box input:focus-visible { outline: none; }
.hl-site.pg-search .search-box input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); opacity: 0.7; cursor: pointer; }

/* popular options: the group name as a tracked label, then plain text options */
.hl-site.pg-search .sr-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 28px;
  margin-top: 20px;
}
.hl-site.pg-search .sr-try .hl-opts { justify-content: center; }

/* ---------- results: rows on hairlines ---------- */
.hl-site.pg-search .sr-results { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(88px, 10vw, 144px); }

.hl-site.pg-search .products-grid {
  position: relative;
  display: block;
  margin: 0;
  border-top: 1px solid var(--line);
}
.hl-site.pg-search .products-grid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--hl-light);
  pointer-events: none;
}

/* one result: no glass, no tilt, no beam, spotlight or sheen */
.hl-site.pg-search .product-card {
  position: relative;
  aspect-ratio: auto;
  overflow: visible;
  padding: 32px 0;
  border: 0;
  border-bottom: 1px solid var(--hl-rule);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  opacity: 1;
  transform: none !important;
  transition: none;
}
.hl-site.pg-search .product-card:hover { transform: none; box-shadow: none; border-color: var(--hl-rule); }
.hl-site.pg-search .product-card::before, .hl-site.pg-search .product-card::after { content: none; }
.hl-site.pg-search .product-card .spotlight, .hl-site.pg-search .product-card .sheen { display: none; }

.hl-site.pg-search .product-card.pc2 {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  column-gap: 40px;
  align-items: start;
}
/* the body and title row hand their children to the row grid */
.hl-site.pg-search .pc2 .pbody, .hl-site.pg-search .pc2 .prow { display: contents; }

/* the media stage */
.hl-site.pg-search .pc2 .pmedia {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--hl-stage);
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.hl-site.pg-search .pc2 .pmedia img.cover { transform: none; }
.hl-site.pg-search .pc2:hover .pmedia img.cover { transform: none; }
.hl-site.pg-search a.pc2:hover .pmedia { border-color: rgba(143, 208, 255, 0.32); }
/* a product not out yet: the black stage carries one tracked label (the same
   treatment on products, search and the home lineup) */
.hl-site.pg-search .pc2 .pmedia-blank {
  padding: 0 16px;
  font-size: 0;
  color: transparent;
  text-shadow: none;
}
.hl-site.pg-search .pc2 .pmedia-blank::before {
  content: "In the workshop";
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hl-eyebrow);
}

/* name, note, tags, link */
.hl-site.pg-search .pc2 .prow h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 2px 0 0;
  padding: 0;
  font: 600 clamp(26px, 2.4vw, 32px)/1.1 "Space Grotesk", sans-serif;
  letter-spacing: -0.025em;
  color: var(--hl-bright);
  text-shadow: none;
  transform: none;
}
.hl-site.pg-search .pc2 .sub {
  grid-column: 2;
  grid-row: 2;
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--hl-soft);
  text-shadow: none;
}
.hl-site.pg-search .pc2 .ptags {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  /* shifted left by one gap and clipped, so the divider in front of the
     first tag on every line falls outside and never hangs at a line start */
  margin: 18px 0 0 -16px;
  overflow: hidden;
}
/* the features read as plain text split by hairlines, like the home lineup */
.hl-site.pg-search .pc2 .ptags span {
  position: relative;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 500 14px/1.4 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hl-body);
  white-space: nowrap;
}
.hl-site.pg-search .pc2 .ptags span::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}
.hl-site.pg-search .pc2 .cta-row {
  grid-column: 2;
  grid-row: 4;
  position: static;
  align-self: end;
  margin: 14px 0 -10px;
  padding: 10px 2px;
  font: 600 15px/1.3 "Inter", sans-serif;
  letter-spacing: 0;
  color: var(--hl-bright);
}
.hl-site.pg-search a.pc2 .cta-row {
  justify-self: start;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  transition: text-decoration-color 0.15s ease;
}
.hl-site.pg-search a.pc2:hover .cta-row { color: #fff; text-decoration-color: var(--hl-ice); }
/* the drawn arrow of every secondary link (products shows the same one) */
.hl-site.pg-search a.pc2 .cta-row::after {
  content: "\2192";
  content: "\2192" / "";
  display: inline-block;
  margin-left: 10px;
  text-decoration: none;
  transition: translate 0.15s ease;
}
.hl-site.pg-search a.pc2:hover .cta-row::after { translate: 3px 0; }
.hl-site.pg-search .pc2.soon .cta-row { color: var(--hl-soft); font-weight: 500; }

/* price as a light numeral, the status as a tracked label */
.hl-site.pg-search .pc2 .prow .price-pill, .hl-site.pg-search .pc2 .prow .status-pill {
  grid-column: 3;
  grid-row: 1 / span 2;
  position: static;
  justify-self: end;
  transform: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  animation: none;
}
.hl-site.pg-search .pc2 .prow .price-pill {
  font: 600 34px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: var(--hl-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hl-site.pg-search .pc2 .prow .status-pill {
  margin-top: 10px;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-eyebrow);
}
.hl-site.pg-search .pc2 .status-pill i { display: none; }

/* the hovered result lights like an active row: a 1px vertical light just outside the column */
.hl-site.pg-search a.pc2::after {
  content: "";
  position: absolute;
  left: -14px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: var(--hl-light-v);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.hl-site.pg-search a.pc2:hover::after, .hl-site.pg-search a.pc2:focus-visible::after { opacity: 1; }
.hl-site.pg-search a.pc2:focus-visible { outline-offset: 6px; border-radius: 4px; }

/* the static fallback card (shown only if the data file cannot load) */
.hl-site.pg-search .product-card:not(.pc2) { display: flex; gap: 32px; align-items: center; }
.hl-site.pg-search .product-card:not(.pc2) img.cover { position: static; width: 300px; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; transform: none; }
.hl-site.pg-search .product-card:not(.pc2) .info { position: static; padding: 0; flex: 1; }
.hl-site.pg-search .product-card:not(.pc2) .info::before { content: none; }
.hl-site.pg-search .product-card:not(.pc2) .cta-row { position: static; }

/* nothing matched: a quiet note under the rule */
.hl-site.pg-search .placeholder-note {
  margin: 0;
  padding: 36px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--hl-soft);
}

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .hl-site.pg-search .product-card.pc2 { grid-template-columns: 240px minmax(0, 1fr) auto; column-gap: 28px; }
}
@media (max-width: 820px) {
  .hl-site.pg-search .search-box { margin-top: 32px; }
  .hl-site.pg-search .sr-try { gap: 0 24px; margin-top: 14px; }
  .hl-site.pg-search .sr-try > .hl-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
  .hl-site.pg-search .sr-results { padding-top: 48px; padding-bottom: 72px; }
  .hl-site.pg-search .product-card { padding: 26px 0 28px; }
  .hl-site.pg-search .product-card.pc2 { grid-template-columns: 220px minmax(0, 1fr) auto; column-gap: 24px; }
  .hl-site.pg-search .pc2 .prow .price-pill { font-size: 34px; }
}
/* phones: the stage on top, then name and price on one line, then the rest */
@media (max-width: 640px) {
  .hl-site.pg-search .product-card.pc2 {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto;
    column-gap: 16px;
  }
  .hl-site.pg-search .pc2 .pmedia { grid-column: 1 / -1; grid-row: 1; margin-bottom: 20px; }
  .hl-site.pg-search .pc2 .prow h3 { grid-column: 1; grid-row: 2; align-self: center; margin: 0; }
  .hl-site.pg-search .pc2 .prow .price-pill, .hl-site.pg-search .pc2 .prow .status-pill { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
  .hl-site.pg-search .pc2 .sub { grid-column: 1 / -1; grid-row: 3; }
  .hl-site.pg-search .pc2 .ptags { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }
  /* no empty outline on phones: a coming-soon result starts at its name */
  .hl-site.pg-search .pc2.soon .pmedia { display: none; }
  .hl-site.pg-search .pc2 .prow .price-pill { font-size: 30px; }
  .hl-site.pg-search .pc2 .cta-row { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; }
  .hl-site.pg-search a.pc2::after { display: none; }
  .hl-site.pg-search .product-card:not(.pc2) { display: block; }
  .hl-site.pg-search .product-card:not(.pc2) img.cover { width: 100%; margin-bottom: 20px; }
}
/* style.css forces every section to 84px on phones; this page sets its own rhythm */
@media (max-width: 640px) {
  .hl-site.pg-search main > .sr-hero { padding-top: 58px !important; padding-bottom: 0 !important; }
  .hl-site.pg-search main > .sr-results { padding-top: 44px !important; padding-bottom: 72px !important; }
}
@media (max-width: 480px) {
  .hl-site.pg-search .sr-try .hl-opts { gap: 0 14px; }
  .hl-site.pg-search .pc2 .ptags { margin-left: -12px; }
  .hl-site.pg-search .pc2 .ptags span { padding: 0 12px; }
}

/* ---------- motion, contrast themes ---------- */
@media (prefers-reduced-motion: reduce) {
  .hl-site.pg-search .search-box, .hl-site.pg-search .search-box::after, .hl-site.pg-search .pc2 .pmedia,
  .hl-site.pg-search a.pc2::after, .hl-site.pg-search a.pc2 .cta-row { transition: none; }
}
html[data-motion="off"] .hl-site.pg-search .search-box::after, html[data-motion="off"] .hl-site.pg-search a.pc2::after { transition: none; }
@media (forced-colors: active) {
  .hl-site.pg-search .products-grid::before, .hl-site.pg-search .search-box::after, .hl-site.pg-search a.pc2::after {
    forced-color-adjust: none; background: CanvasText;
  }
  .hl-site.pg-search .pc2 .prow .price-pill { forced-color-adjust: none; background: none; color: CanvasText; }
  .hl-site.pg-search .search-box > span[aria-hidden]::before { border-color: CanvasText; }
  .hl-site.pg-search .search-box > span[aria-hidden]::after { forced-color-adjust: none; background: CanvasText; }
}