/* ============================================================
   categories.css - Styles for pages/shop/categories.html
   ============================================================ */

.section { padding:3rem 2rem; max-width:1200px; margin:0 auto; }
    .cat-big-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
    .cat-big-card {
      background:var(--dark2); border:1px solid var(--dark4); border-radius:var(--r-xl);
      padding:2rem 1.5rem; text-align:center; cursor:pointer; transition:all .25s;
      display:block; color:var(--text); position:relative; overflow:hidden;
    }
    .cat-big-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 120%, rgba(200,169,110,.08), transparent 70%); opacity:0; transition:opacity .3s; }
    .cat-big-card:hover { border-color:var(--gold); transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,.4); }
    .cat-big-card:hover::before { opacity:1; }
    .cbc-icon { font-size:3rem; margin-bottom:1rem; }
    .cbc-name { font-size:1rem; font-weight:700; margin-bottom:.3rem; }
    .cbc-count { font-size:.8rem; color:var(--text-muted); margin-bottom:1rem; }
    .cbc-tags { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; }
    .cbc-tag { background:var(--dark3); border:1px solid var(--dark4); border-radius:6px; padding:2px 8px; font-size:.7rem; color:var(--text-muted); }
    .featured-cats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2rem; }
    .feat-cat { border-radius:var(--r-xl); padding:2.5rem 2rem; cursor:pointer; transition:transform .25s; position:relative; overflow:hidden; }
    .feat-cat:hover { transform:scale(1.02); }
    .feat-cat-1 { background:linear-gradient(135deg,#1C1A2E,#2A2640); border:1px solid rgba(142,68,173,.3); }
    .feat-cat-2 { background:linear-gradient(135deg,#1A2C1A,#202E20); border:1px solid rgba(39,174,96,.3); }
    .feat-cat h2 { font-size:1.4rem; font-weight:700; margin-bottom:.4rem; color:#F0EAD6; }
    .feat-cat p  { font-size:.85rem; color:rgba(240,234,214,.65); margin-bottom:1rem; }
    .feat-cat-emoji { position:absolute; top:1rem; left:1.5rem; font-size:4rem; opacity:.2; }