/* Live-search dropdown for the shop search box. The JS (tamirset-shop-page.runtime.js)
   already built and populated .tmset-shop-suggestions / .tmset-shop-suggestion, but two
   things were missing: (1) no stylesheet ever gave it a floating-panel look, so it
   rendered as a bare list of links; (2) the search box lives inside
   .tmset-shop-hero__content, which has overflow:hidden + isolation:isolate for its own
   decorative background - any position:absolute dropdown nested inside it gets clipped
   and can never stack above content outside that box, which is what actually made the
   dropdown look "squeezed" into the page instead of floating over it. The JS now appends
   this element to <body> instead (a portal) and sets position/top/left/width inline via
   getBoundingClientRect(), escaping that clipping entirely; this stylesheet only owns the
   panel's look, not its position. */
body.tmset-has-shop-page .tmset-shop-suggestions {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(11, 34, 57, 0.08);
  box-shadow: 0 20px 45px rgba(11, 34, 57, 0.16);
}

body.tmset-has-shop-page .tmset-shop-suggestions[hidden] {
  display: none;
}

body.tmset-has-shop-page .tmset-shop-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--tmset-shop-blue, #0b2239);
}

body.tmset-has-shop-page .tmset-shop-suggestion strong {
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.tmset-has-shop-page .tmset-shop-suggestion small {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--tmset-shop-green, #0e7f50);
  white-space: nowrap;
}

body.tmset-has-shop-page .tmset-shop-suggestion:hover,
body.tmset-has-shop-page .tmset-shop-suggestion:focus-visible,
body.tmset-has-shop-page .tmset-shop-suggestion[aria-selected="true"] {
  background: var(--tmset-surface, #f4f7f9);
}

body.tmset-has-shop-page .tmset-shop-suggestion--more {
  justify-content: center;
  margin-top: 4px;
  border-top: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: 0 0 10px 10px;
  padding-top: 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tmset-shop-green, #0e7f50);
}

body.tmset-has-shop-page .tmset-shop-suggestion--more:hover,
body.tmset-has-shop-page .tmset-shop-suggestion--more:focus-visible {
  background: var(--tmset-teal-soft, #eaf7f8);
}