/* PAOキーワードサジェスト用スタイル。既存サイトのCSSと衝突しないよう
   すべて pao-sg- プレフィックスを付けたクラス名のみを使用しています。 */

/* MakeShop純正のキーワードサジェスト(id="expsuggestsdiv")を非表示にする。
   純正はz-indexが2147483647(ブラウザが扱える最大値)固定でどうやっても
   こちらのサジェストの下に隠せないため、非表示にして共存を避ける。
   純正側のJS自体は動き続けるが(無害・見た目に影響なし)、表示だけ止める。 */
#expsuggestsdiv {
  display: none !important;
}

.pao-sg-box {
  position: absolute;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
}

.pao-sg-box * {
  box-sizing: border-box;
}

.pao-sg-section + .pao-sg-section {
  border-top: 1px solid #e2e2e2;
}

/* ジャンル絞り込みバー。サジェストボックス(pao-sg-box)とは別に、検索窓と同じ
   ナビ行に直接差し込まれる(app.jsのinsertGenreBar参照)。サイト側のflexレイアウトの
   余白部分に収まる想定なので、display:inline-block(幅は中身に応じて自然に決まる)
   にしてあり、固定幅・絶対配置は使わない。 */
.pao-sg-genre-bar {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.pao-sg-genre-select {
  font-size: 12px;
  max-width: 128px;
  padding: 4px 4px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fff;
  color: #333;
  vertical-align: middle;
  box-sizing: border-box;
}

/* PC表示: ジャンル選択を検索窓の白い丸いバー(.searchForm__inner)の内側左端に
   色付きで入れ込む(app.jsのinsertGenreBar参照)。
   バー全体の長さを「元のジャンル+検索窓」と同じにするため、バーの左端を
   margin-leftで左(=元のジャンルがあった場所)へ広げ、広げた分をpadding-leftで
   確保している(content-boxにして相殺。検索窓の右端・周囲のレイアウトは動かない)。
   108pxを変える時は margin-left / padding-left / .pao-sg-genre-bar--inline の
   width の3か所を揃えること。色は --pao-sg-genre-bg で変更できる。 */
.pao-sg-inner--genre {
  position: relative;
  box-sizing: content-box;
  margin-left: -108px;
  padding-left: 108px;
}

.pao-sg-genre-bar.pao-sg-genre-bar--inline {
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 108px;
  margin: 0;
  display: flex;
  align-items: stretch;
  z-index: 2;
  background: var(--pao-sg-genre-bg, #2b7de9);
  border-radius: 100px 0 0 100px;
  overflow: hidden;
  transition: filter 0.15s;
}

.pao-sg-genre-bar--inline:hover {
  filter: brightness(1.1);
}

.pao-sg-genre-bar--inline:focus-within {
  filter: brightness(0.92);
}

.pao-sg-genre-bar--inline .pao-sg-genre-select {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0 24px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pao-sg-genre-bar--inline .pao-sg-genre-select option {
  color: #222;
  background: #fff;
  font-weight: 400;
}

/* スマホ表示専用。検索窓の横に並べる余白が無いため、検索窓(input)の内側左端に
   小さく重ねて置く(app.jsのinsertGenreBarMobile参照)。position:absoluteなので
   検索窓側のflexレイアウトの横幅計算には一切影響しない。
   常時表示だとプレースホルダーと紛らわしいため、普段はdisplay:noneで隠しておき、
   検索窓をタップした時だけ(--activeが付いた時だけ)表示する(app.jsのsetMobileGenreVisible参照)。 */
.pao-sg-genre-bar--overlay {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin-right: 0;
  display: none;
  height: 22px;
  /* 区切り線だけだとプレースホルダーとの境目が分かりづらいとのことだったので、
     ボタンのように見える見た目(黄緑色の背景+角丸)に変更。この方が「ここが
     押せる場所」だと一目でわかる。この分の余白はinsertGenreBarMobile側で
     input側のpadding-leftとして確保している(app.jsのsetMobileGenreVisible参照)。 */
  background: #9acd32;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.pao-sg-genre-bar--overlay.pao-sg-genre-bar--active {
  display: inline-flex;
  align-items: center;
}

.pao-sg-genre-bar--overlay .pao-sg-genre-select {
  /* 全角5文字分くらいの幅に拡大(元は30px)。 */
  width: 64px;
  max-width: 64px;
  height: 22px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: #1f2a0a;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
}

/* スマホのヘッダー検索窓(.searchFormA)は、検索窓(input)と「キーワード検索は
   こちらから」の画像バナーが同じ行に横並びになっており、画像バナーの方が
   横幅を多く取ってしまうため入力欄がかなり狭くなっていた。画像バナーを
   2段目に折り返し、検索窓自体は1行目に単独でフル幅を使えるようにする。
   サイト本体のCSSファイルは触らず、こちらの上書きスタイルのみで対応。 */
.searchForm.searchFormA {
  flex-wrap: wrap;
}

.searchForm.searchFormA .searchForm__inner {
  flex: 1 0 100%;
  width: 100%;
}

.searchForm.searchFormA img {
  margin-top: 6px;
}

.pao-sg-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  background: #f5f7fa;
  color: #555;
}

.pao-sg-header--category {
  background: #eef4ff;
  color: #2f6fed;
}

.pao-sg-count {
  font-weight: 400;
  color: #888;
}

.pao-sg-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
}

.pao-sg-list li {
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
}

.pao-sg-list li:hover {
  background: #eef4ff;
  color: #2f6fed;
}

.pao-sg-list--category li {
  font-size: 13px;
  color: #444;
}

.pao-sg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 14px 14px;
  max-height: 480px;
  overflow-y: auto;
}

.pao-sg-product-card {
  cursor: pointer;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.pao-sg-product-card:hover {
  border-color: #2f6fed;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.pao-sg-product-card img {
  width: 100%;
  aspect-ratio: 300 / 420;
  object-fit: cover;
  display: block;
  background: #f0f0f0;
}

.pao-sg-product-name {
  font-size: 11.5px;
  line-height: 1.35;
  padding: 6px 8px 2px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pao-sg-product-price {
  font-size: 12.5px;
  font-weight: 700;
  color: #d3402e;
  padding: 0 8px 8px;
}

/* 「◯件をすべて見る」リンク。以前はスタイル未指定でブラウザ標準の
   小さいリンク表示のままだったため、タップしづらいという指摘があった。
   文字を大きく太字にし、上下に余白を持たせてタップ領域自体も広げる。 */
.pao-sg-viewall {
  display: block;
  text-align: center;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 700;
  color: #2f6fed;
  text-decoration: none;
  border-top: 1px solid #e2e2e2;
}

.pao-sg-viewall:hover {
  background: #eef4ff;
}

.pao-sg-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

/* スマホ: 候補ボックスは画面内に収め(app.jsのpositionBoxが位置と最大高さを指定)、
   中身が長いときはボックス全体を縦スクロールさせる。リスト・商品グリッド側の
   固定の最大高さは外し、「◯件をすべて見る」は下端に貼り付けて常にタップできるようにする。 */
.pao-sg-box.pao-sg-box--mobile {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pao-sg-box--mobile .pao-sg-list,
.pao-sg-box--mobile .pao-sg-product-grid {
  max-height: none;
  overflow: visible;
}
.pao-sg-box--mobile .pao-sg-viewall {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 1;
}