/*
 * Search typeahead panel.
 *
 * A full-height drawer rather than a centred modal: the suggestion list is the
 * point of this UI, and a centred box clips it to a few rows on a laptop --
 * which is exactly how the Elementor popup this replaces behaved.
 *
 * Desktop: a right-hand sidebar, top of viewport to bottom.
 * Mobile:  the whole screen, so the on-screen keyboard has somewhere to go.
 *
 * Colours are the brand's: navy #001227, gold #FFBB26. The panel itself is
 * white -- product thumbnails are shot on white, and the search popup this
 * replaces was white, so the counter staff see no jarring change.
 */

.vsg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 18, 39, 0.55);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vsg-overlay.is-open { opacity: 1; }

.vsg-panel {
  position: fixed;
  top: 0;
  right: 0;
  /* dvh so the mobile browser chrome collapsing does not crop the last row. */
  height: 100vh;
  height: 100dvh;
  width: min(440px, 100vw);
  background: #fff;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
  font-family: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #001227;
}
.vsg-panel.is-open { transform: none; }

@media (max-width: 767px) {
  .vsg-panel { width: 100vw; left: 0; right: 0; transform: translateY(-100%); }
  .vsg-panel.is-open { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vsg-overlay, .vsg-panel { transition: none; }
}

.vsg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #e6e8ec;
  flex: 0 0 auto;
}
.vsg-input {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 16px/1.3 inherit;
  color: #001227;
  padding: 12px 14px;
  border: 1px solid #001227;
  border-radius: 8px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.vsg-input::placeholder { color: #6d6d6d; }
.vsg-input:focus { outline: 2px solid #ffbb26; outline-offset: 1px; }
.vsg-panel .vsg-close {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 8px;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #001227;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.vsg-panel .vsg-close:hover { background-color: #f2f4f7; color: #001227; }
.vsg-panel .vsg-close:focus-visible { outline: 2px solid #ffbb26; }

.vsg-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid #e6e8ec;
  flex: 0 0 auto;
}
/* The theme styles bare <button> (a pink fill, rounded corners, a shadow), and
 * that bled straight through the first cut of this panel and painted the active
 * tab magenta. Everything the theme sets is reset here explicitly, scoped under
 * .vsg-panel so specificity beats the theme without reaching for !important. */
.vsg-panel .vsg-tab {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  text-shadow: none;
  font: 600 15px/1 inherit;
  letter-spacing: normal;
  text-transform: none;
  color: #6d6d6d;
  padding: 14px 10px;
  margin: 0 0 -1px 0;
  cursor: pointer;
  transition: none;
}
.vsg-panel .vsg-tab:hover,
.vsg-panel .vsg-tab:focus,
.vsg-panel .vsg-tab:active {
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: #001227;
}
.vsg-panel .vsg-tab[aria-selected="true"] {
  color: #001227;
  border-bottom-color: #ffbb26;
  background-color: transparent;
}
.vsg-panel .vsg-tab:focus-visible { outline: 2px solid #ffbb26; outline-offset: -2px; }
.vsg-panel .vsg-count { color: #6d6d6d; font-weight: 500; }

/* The scrolling region. flex:1 means it takes whatever height is left, so the
 * list grows with the viewport instead of being boxed into a fixed height. */
.vsg-results {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.vsg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: #001227;
  border-bottom: 1px solid #f2f4f7;
  min-height: 44px; /* pointer target */
}
.vsg-row:hover, .vsg-row.is-active { background: #f7f8fa; }
.vsg-row:focus-visible { outline: 2px solid #ffbb26; outline-offset: -2px; }

.vsg-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #f2f4f7;
}
/* Page glyph. Same 44px box as .vsg-thumb so a Products row and a Pages row
 * have their titles on the same left edge -- switching tabs should not make the
 * list jump sideways. Tinted by metal, which is the distinction that actually
 * matters to someone scanning this list. */
.vsg-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsg-ico svg { width: 24px; height: 24px; display: block; }
.vsg-ico--gold { background: rgba(255, 187, 38, 0.18); color: #8a6200; }
.vsg-ico--silver { background: rgba(0, 18, 39, 0.07); color: #5f6b78; }
.vsg-ico--navy { background: rgba(0, 18, 39, 0.07); color: #001227; }

.vsg-t {
  flex: 1 1 auto;
  font: 500 15px/1.3 inherit;
  /* Explicit colour: the theme's global heading colour is white, which is how
   * the previous attempt rendered white-on-white and looked empty. */
  color: #001227;
}
.vsg-p { flex: 0 0 auto; font: 600 15px/1.3 inherit; color: #001227; }
.vsg-chev { flex: 0 0 auto; color: #6d6d6d; }

.vsg-msg { padding: 24px 16px; color: #6d6d6d; font: 500 15px/1.4 inherit; }

.vsg-foot {
  flex: 0 0 auto;
  border-top: 1px solid #e6e8ec;
  padding: 12px 16px;
}
.vsg-panel .vsg-all {
  display: block;
  box-shadow: none;
  text-transform: none;
  text-align: center;
  font: 600 15px/1 inherit;
  color: #001227;
  background: #ffbb26;
  padding: 13px 16px;
  border-radius: 10px;
  text-decoration: none;
}
.vsg-all:focus-visible { outline: 2px solid #001227; }

.vsg-lock { overflow: hidden !important; }

/* Glyph tile on the all-results page.
 *
 * Sized to the product photo it stands in for (full width, 340px tall, 10px
 * radius, 15px of air beneath) so a page card and a product card line up in the
 * same grid and the title sits below the artwork in both.
 *
 * It lives inside the card's link, so the tile is clickable like the photo is. */
.vsg-card-ico {
  width: 100%;
  height: 340px;
  margin: 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vsg-card-ico svg { width: 198px; height: 198px; display: block; }

/* No fill behind the glyph on this page, unlike the dropdown rows.
 *
 * The product photographs are cut out and sit straight on the page, so a tinted
 * block behind a glyph made the grid alternate between photo and coloured panel.
 * Transparent, the two card types read as one set. The metal is still carried,
 * by the stroke colour rather than a background. */
.vsg-card-ico--gold { color: #8a6200; }
.vsg-card-ico--silver { color: #5f6b78; }
.vsg-card-ico--navy { color: #001227; }

/* The product image drops to 300px on tablet; match it so the rows stay even. */
@media (max-width: 1024px) {
  .vsg-card-ico { height: 300px; }
  .vsg-card-ico svg { width: 168px; height: 168px; }
}