/* Список підказок товару в калькуляторах (№79, 2026-08-14).
   Окремий файл, а не доповнення calc.css: sw.js кешує статику cache-first без
   ревалідації, тож правка наявного файла не дійшла б до повторних відвідувачів.
   Токени й розміри — з DESIGN_SYSTEM (ті самі, що в .calc-input/.calc-hint). */

/* Рядок поля стає системою координат для випадайки.
   Клас, а не :has() — щоб не залежати від підтримки селектора в старих браузерах. */
.calc-row-pick { position: relative; }

.calc-sug {
  position: absolute;
  top: calc(100% - 1.1rem);          /* під полем, над підказкою-хінтом */
  left: 0; right: 0;
  z-index: 40;
  max-height: 264px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--clay);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 15, 13, .14);
}
.calc-sug[hidden] { display: none; }

.calc-sug-item {
  display: block;
  width: 100%;
  padding: 9px 13px;
  border: none;
  border-bottom: 1px solid var(--sand);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.calc-sug-item:last-child { border-bottom: none; }
.calc-sug-item:hover,
.calc-sug-item.on { background: var(--off); }

.calc-sug-n {
  display: block;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.35;
}
.calc-sug-s {
  display: block;
  font-size: 11px;
  font-weight: 300;
  color: var(--warm);
  margin-top: 2px;
}

@media (max-width: 768px) {
  .calc-sug { max-height: 208px; }
  .calc-sug-item { padding: 11px 13px; }   /* палець, не курсор */
}