/* Home browsing — category tiles, plain/spiced switch, section bar (js/home-browse.js). */

/* category tiles */
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:12px;margin:30px 0 30px}
.cat-tile{display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 12px;text-align:start;font:inherit;color:var(--espresso);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.cat-tile:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.cat-tile:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cat-tile[aria-pressed="true"]{border-color:var(--brand);background:linear-gradient(180deg,var(--paper),var(--cream-2));box-shadow:inset 0 0 0 1px var(--brand)}
.cat-pic{flex:0 0 54px;width:54px;height:54px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#3a2618,#1a110c 80%);color:var(--gold-soft)}
.cat-pic img{width:100%;height:100%;object-fit:contain;padding:4px}
.cat-pic svg{width:24px;height:24px}
.cat-tile.is-all .cat-pic{background:var(--brand)}
.cat-txt{display:grid;gap:2px;min-width:0}
.cat-txt b{font-size:1rem;line-height:1.3}
.cat-txt small{font-size:.8rem;color:var(--ink-soft)}
.cat-tile[aria-pressed="true"] .cat-txt b{color:var(--brand)}
.grid-empty{text-align:center;color:var(--ink-soft);padding:30px 0}

/* سادة | محوج on a card */
.card .kind{display:inline-flex;align-self:flex-start;width:max-content;padding:3px;margin:2px 0 8px;border-radius:999px;background:var(--cream-2);border:1px solid var(--line)}
.card .kind button{border:0;background:none;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-soft);padding:5px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.card .kind button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:0 2px 6px -2px rgba(44,24,16,.5)}
.card .kind button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* section bar */
.secnav{position:sticky;top:79px;z-index:35;background:rgba(246,239,227,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,top .25s}
.secnav.is-stuck{border-bottom-color:var(--line);box-shadow:0 8px 18px -16px rgba(44,24,16,.45)}
.secnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.secnav-in::-webkit-scrollbar{display:none}
.secnav a{flex:0 0 auto;padding:7px 16px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink-soft);text-decoration:none;
  border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s}
.secnav a:hover{background:var(--cream-2);color:var(--brand)}
.secnav a.is-on{background:var(--brand);color:#fff}
.secnav a[hidden]{display:none}
.secnav a:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
html{scroll-padding-top:140px}

@media (max-width:760px){
  .secnav{top:calc(var(--appbar-h,56px) + var(--safe-t,0px) + 1px)}  /* + the header's bottom border */
  .secnav.is-top{top:var(--safe-t,0px)}
  .cat-tiles{display:flex;overflow-x:auto;scrollbar-width:none;margin:16px -14px;padding:2px 14px 6px;gap:10px}
  .cat-tiles::-webkit-scrollbar{display:none}
  .cat-tile{flex:0 0 auto;min-height:60px;padding:8px 12px 8px 14px}
  .cat-pic{flex-basis:42px;width:42px;height:42px}
  html{scroll-padding-top:120px}
}
@media (prefers-reduced-motion:reduce){
  .cat-tile,.secnav,.card .kind button{transition:none}
  .cat-tile:hover{transform:none}
}