/* ============================================
   本店トップページの固定ブロック（sayakobo.jp/2026/css/top.css）
   カテゴリーから探す・条件で探す。中身は top.tpl にあり、layout.js が並び順の位置へ移す。
   変数と .tl-* の見た目は layout.css にあるので、そちらを先に読み込む
   ============================================ */

/* ---------- 固定ブロック（design-proto/css/top.css から） ---------- */
.tl-fixed-blocks[hidden] { display: none; }
.tl .quick-cat,
.tl-fixed-blocks .quick-cat { padding: 24px var(--tl-gutter) 8px; }
.tl .find-by,
.tl-fixed-blocks .find-by { padding: 24px var(--tl-gutter) 8px; }
[data-top-fixed] .section-head { margin-bottom: 28px; text-align: center; }
[data-top-fixed] .section-head .en {
  font-family: var(--tl-font-en);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--tl-gold);
}
[data-top-fixed] .section-head h2 {
  margin: 10px 0 0;
  font-size: .85rem;
  font-weight: 500;
  color: var(--tl-gray);
  letter-spacing: .08em;
}
[data-top-fixed] .cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 18px 10px;
}
[data-top-fixed] .cat-tile a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: inherit; text-decoration: none; }
[data-top-fixed] .cat-tile .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid var(--tl-line);
  border-radius: 50%;
  background: #fff;
  font-size: 1.05rem;
  transition: border-color .2s ease, transform .2s ease;
}
[data-top-fixed] .cat-tile .icon img { width: 70%; height: auto; }
[data-top-fixed] .cat-tile a:hover .icon { border-color: var(--tl-gold); transform: translateY(-2px); }
[data-top-fixed] .cat-tile span { font-size: .7rem; font-weight: 500; color: var(--tl-charcoal); letter-spacing: .02em; }
[data-top-fixed] .find-by-inner {
  padding: 28px 18px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  background: var(--tl-card);
}
[data-top-fixed] .find-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
[data-top-fixed] .find-tab {
  padding: 8px 18px;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  background: var(--tl-cream);
  color: var(--tl-gray);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
[data-top-fixed] .find-tab.active,
[data-top-fixed] .find-tab:hover { border-color: var(--tl-gold); background: var(--tl-gold); color: #fff; }
/*
 * 色・価格帯は押せる（js.js が Nav.php の中身でリンクにしている）。
 * 見た目は引き出しメニューの「色から探す／価格帯から探す」とそろえてある（nav.css）
 */

/* ---- 色から：丸い色見本を5列に ---- */
[data-top-fixed] .color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 6px;
}

[data-top-fixed] .color-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  font-size: .65rem;
  line-height: 1.3;
  text-align: center;
}

[data-top-fixed] .color-chip em {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* 光沢をのせて、金属色（ゴールド・シルバーなど）も平たく見えないようにする */
  background-image: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.18) 100%);
  /* 白銀・クリアのような淡い色も輪郭が見えるように */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  transition: transform .15s ease;
}

[data-top-fixed] .color-chip:hover em,
[data-top-fixed] .color-chip:focus-visible em {
  transform: scale(1.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3px var(--tl-gold);
}

/* ---- 価格帯から：2列のボタン ---- */
[data-top-fixed] .price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

[data-top-fixed] .price-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--tl-line);
  border-radius: 6px;
  background: var(--tl-cream);
  color: inherit;
  text-decoration: none;
  /* 見出しの英字書体ではなく、ほかの文字と同じ書体にそろえる */
  font-family: inherit;
  font-size: .8rem;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

[data-top-fixed] .price-tile:hover,
[data-top-fixed] .price-tile:focus-visible {
  border-color: var(--tl-gold);
  background: var(--tl-gold);
  color: #fff;
}

@container tl (min-width: 769px) {
  [data-top-fixed] .cat-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px; }
  [data-top-fixed] .find-by-inner { padding: 44px 32px; }
}