/*
 * SWT Search Suggest
 *
 * Principle:
 * - Plugin provides stable HTML + minimal defaults so the feature is usable.
 * - Theme is expected to own the final look (sizes, typography, spacing, colors).
 *
 * Stable theme hooks:
 * - .swt-search-suggest-panel
 * - .swt-search-suggest-header / .swt-search-suggest-footer
 * - .swt-search-suggest-list
 * - .swt-search-suggest-item
 * - .swt-search-suggest-thumb
 * - .swt-search-suggest-title
 * - .swt-search-suggest-meta / .swt-search-suggest-price / .swt-search-suggest-sku
 *
 * Width control:
 * - JS sets: --swt-ss-anchor-width (input width)
 * - Theme can override: --swt-ss-panel-width (e.g. 1100px on desktop)
 */

.swt-block.swt-search-suggest-panel,
.swt-block.swt-ss__panel{
  /*
   * FIX: Use fixed positioning so the panel can be anchored reliably under
   * a sticky/fixed header search field (document offsets can otherwise place
   * the panel on top of the input).
   */
  position: fixed;
  /* Theme can override stacking context (sticky headers etc.) */
  z-index: var(--swt-ss-z, 9999);
  top: 0;
  left: 0;
  margin-top: 10px;
  width: var(--swt-ss-panel-width, var(--swt-ss-anchor-width, 320px));
  max-width: calc(100vw - 20px);
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-header,
.swt-block.swt-search-suggest-panel .swt-search-suggest-footer,
.swt-block.swt-ss__panel .swt-ss__header,
.swt-block.swt-ss__panel .swt-ss__footer{
  padding: 10px 12px;
  font-size: 13px;
  opacity: .9;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-header,
.swt-block.swt-ss__panel .swt-ss__header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-footer,
.swt-block.swt-ss__panel .swt-ss__footer{
  border-top: 1px solid rgba(0,0,0,.08);
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-list,
.swt-block.swt-ss__panel .swt-ss__list{
  display: block;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-item,
.swt-block.swt-ss__panel .swt-ss__item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-item:hover,
.swt-block.swt-search-suggest-panel .swt-search-suggest-item:focus,
.swt-block.swt-ss__panel .swt-ss__item:hover,
.swt-block.swt-ss__panel .swt-ss__item:focus{
  background: rgba(0,0,0,.04);
  outline: none;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-thumb,
.swt-block.swt-ss__panel .swt-ss__thumb{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  object-fit: cover;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-body,
.swt-block.swt-ss__panel .swt-ss__meta{
  min-width: 0;
  flex: 1 1 auto;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-title,
.swt-block.swt-ss__panel .swt-ss__title{
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-meta,
.swt-block.swt-ss__panel .swt-ss__sub{
  margin-top: 2px;
  font-size: 12px;
  opacity: .85;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-sku,
.swt-block.swt-ss__panel .swt-ss__sku{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.swt-block.swt-search-suggest-panel .swt-search-suggest-empty,
.swt-block.swt-ss__panel .swt-ss__empty{
  padding: 10px 12px;
  font-size: 13px;
  opacity: .85;
}

/* Mild desktop defaults (theme can override freely) */
@media (min-width: 992px){
  .swt-block.swt-search-suggest-panel,
  .swt-block.swt-ss__panel{ border-radius: 14px; }

  .swt-block.swt-search-suggest-panel .swt-search-suggest-item,
  .swt-block.swt-ss__panel .swt-ss__item{ gap: 12px; padding: 14px 16px; }

  .swt-block.swt-search-suggest-panel .swt-search-suggest-thumb,
  .swt-block.swt-ss__panel .swt-ss__thumb{ width: 56px; height: 56px; flex-basis: 56px; border-radius: 10px; }

  .swt-block.swt-search-suggest-panel .swt-search-suggest-title,
  .swt-block.swt-ss__panel .swt-ss__title{ font-size: 16px; }

  .swt-block.swt-search-suggest-panel .swt-search-suggest-meta,
  .swt-block.swt-ss__panel .swt-ss__sub{ font-size: 13px; margin-top: 4px; }

  .swt-block.swt-search-suggest-panel .swt-search-suggest-header,
  .swt-block.swt-search-suggest-panel .swt-search-suggest-footer,
  .swt-block.swt-ss__panel .swt-ss__header,
  .swt-block.swt-ss__panel .swt-ss__footer{ padding: 12px 16px; font-size: 14px; }
}

/* ------------------------------------------------------------------
   Puuilo-style layouts (minimal defaults; theme may override freely)
------------------------------------------------------------------- */
.swt-block.swt-ss__panel .swt-ss__prelude{padding:14px 16px}
.swt-block.swt-ss__panel .swt-ss__prelude-title{font-weight:700;margin:2px 0 10px}
.swt-block.swt-ss__panel .swt-ss__chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.swt-block.swt-ss__panel .swt-ss__chip{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.04);text-decoration:none;font-weight:600}
.swt-block.swt-ss__panel .swt-ss__cards{display:flex;gap:14px;overflow:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.swt-block.swt-ss__panel .swt-ss__card{flex:0 0 220px;display:block;padding:16px;border-radius:16px;background:rgba(0,0,0,.04);text-decoration:none}
.swt-block.swt-ss__panel .swt-ss__card-title{font-weight:800;letter-spacing:.02em;margin:0 0 6px}
.swt-block.swt-ss__panel .swt-ss__card-text{font-size:13px;opacity:.85;line-height:1.35}

.swt-block.swt-ss__panel .swt-ss__layout{display:grid;grid-template-columns:280px 1fr;gap:18px;padding:14px 16px}
.swt-block.swt-ss__panel .swt-ss__section-title{font-weight:800;margin:0 0 8px}
.swt-block.swt-ss__panel .swt-ss__links{display:flex;flex-direction:column;gap:8px}
.swt-block.swt-ss__panel .swt-ss__link{text-decoration:none;font-weight:650;opacity:.9}
.swt-block.swt-ss__panel .swt-ss__link:hover{opacity:1;text-decoration:underline}
.swt-block.swt-ss__panel .swt-ss__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.swt-block.swt-ss__panel .swt-ss__product{display:block;border:1px solid rgba(0,0,0,.08);border-radius:16px;text-decoration:none;overflow:hidden;background:#fff}
.swt-block.swt-ss__panel .swt-ss__product-img{width:100%;height:140px;object-fit:contain;background:rgba(0,0,0,.03)}
.swt-block.swt-ss__panel .swt-ss__product-body{padding:12px}
.swt-block.swt-ss__panel .swt-ss__product-title{font-weight:700;line-height:1.25;min-height:2.5em}
.swt-block.swt-ss__panel .swt-ss__product-price{margin-top:8px;font-size:18px;font-weight:900}
.swt-block.swt-ss__panel .swt-ss__viewall{display:flex;justify-content:center;align-items:center;margin:12px 0 0;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.06);text-decoration:none;font-weight:900}

@media (max-width: 991.98px){
  .swt-block.swt-ss__panel .swt-ss__layout{grid-template-columns:1fr}
  .swt-block.swt-ss__panel .swt-ss__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .swt-block.swt-ss__panel .swt-ss__product-img{height:110px}
}