/*
 Theme Name: Free Icon Bazaar Child
 Template: cocoon-master
 Version: 1.0
*/

/* ===== tokens (くすみ系) ===== */
:root{
  --bg:#F7F7F5; --ink:#111; --ink-2:#666; --line:#E6E6E6;
  --brand:#2A8F6A; --brand-ink:#1F6D51;
  --radius:16px; --gap:16px; --section:56px;
}
.fib-container{max-width:1200px;margin:0 auto;padding:0 24px;background:var(--bg);color:var(--ink);}

/* ===== 上部カテゴリ水平ナビ（sticky & scrollable） ===== */
.fib-cats-wrap{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);}
.fib-cats{overflow:auto;padding:10px 0;}
.fib-catlist{display:flex;gap:10px;list-style:none;margin:0;padding:2px 0 8px;}
.fib-catlist a{
  display:block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);background:#fff;text-decoration:none;white-space:nowrap;
}
.fib-catlist a:hover{border-color:var(--brand);color:var(--brand-ink);}

/* ===== 検索バー ===== */
.fib-search{padding:16px 0 8px;}
.fib-search form{display:flex;gap:8px}
.fib-search input[type="search"]{
  flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.fib-search input[type="submit"]{
  padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;
}
.fib-search input[type="submit"]:hover{border-color:var(--brand);color:var(--brand-ink)}

/* ===== 広告枠 ===== */
.fib-ad{display:flex;justify-content:center;align-items:center;margin:16px 0;}
.fib-ad--top{margin-top:8px;}
.icon-grid__item--ad{grid-column:1 / -1}

/* ===== グリッド（5x6） ===== */
.fib-grid{padding:var(--section) 0 var(--gap);}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);}
@media (max-width:1024px){.icon-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width:768px){.icon-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:480px){.icon-grid{grid-template-columns:repeat(2,1fr);} }

/* ===== カード ===== */
.icon-card{
  display:block;padding:16px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;text-decoration:none;color:inherit;transition:transform .06s ease, box-shadow .06s ease;
}
.icon-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);}
.icon-card__media{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin:0 0 10px;}
.icon-card__media img{max-width:80%;max-height:80%;object-fit:contain;}
.icon-card__ph{width:64px;height:64px;background:linear-gradient(135deg,#eee,#fafafa);border-radius:8px;}
.icon-card__title{font-size:.92rem;color:var(--ink-2);text-align:center;}

/* ===== ページャー ===== */
.fib-pager{display:flex;justify-content:center;padding:32px 0;border-top:1px solid var(--line);}
.fib-pager .page-numbers{
  margin:0 6px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink-2);background:#fff;
}
.fib-pager .current{background:#fff;color:var(--ink);border-color:var(--brand);}