/* TL_CATEGORIES_PAGE_V1: /categories — iPhone theme, light and dark */
.tl-cats-page {
    --cp-card: #f2f2f7;
    --cp-ink: #1c1c1e;
    --cp-muted: #6c6c70;
    --cp-fill: #fff;
    --cp-blue: #007aff;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 32px 48px;
    color: var(--cp-ink);
}
html[data-theme="dark"] .tl-cats-page {
    --cp-card: #1c1c1e;
    --cp-ink: #fff;
    --cp-muted: #98989d;
    --cp-fill: #2c2c2e;
    --cp-blue: #0a84ff;
}
.tl-cats-page__head { display: grid; gap: 14px; margin-bottom: 18px; }
.tl-cats-page__head h1 { margin: 0; font-size: 26px; font-weight: 900; color: var(--cp-ink); }
.tl-cats-page__search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 640px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--cp-card);
}
.tl-cats-page__search:focus-within { border-color: var(--cp-blue); background: var(--cp-fill); }
.tl-cats-page__search svg { width: 19px; height: 19px; flex: none; fill: none; stroke: var(--cp-muted); stroke-width: 2; }
.tl-cats-page__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--cp-ink) !important;
    font: inherit;
    font-size: 16px !important;
}
.tl-cats-page__search input::placeholder { color: var(--cp-muted); }
.tl-cats-page__search input::-webkit-search-cancel-button { display: none; }
.tl-cats-page__group { margin-top: 22px; }
.tl-cats-page__group[hidden], .tl-cats-page__grid[hidden], .tl-cats-page__tile[hidden] { display: none; }
.tl-cats-page__group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tl-cats-page__group-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--cp-ink); }
.tl-cats-page__group-head a { color: var(--cp-blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.tl-cats-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.tl-cats-page__tile {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 16px;
    background: var(--cp-card);
    color: var(--cp-ink);
    text-align: center;
    text-decoration: none;
}
.tl-cats-page__img {
    --img-h: 96px;
    width: 100%;
    height: var(--img-h);
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.tl-cats-page__img img { display: block !important; width: 100% !important; height: var(--img-h) !important; max-height: var(--img-h) !important; object-fit: contain !important; padding: 6px !important; box-sizing: border-box !important; }
.tl-cats-page__img b { font-size: 30px; font-weight: 900; color: #1c1c1e; }
.tl-cats-page__tile strong { font-size: 13px; font-weight: 700; line-height: 1.6; }
.tl-cats-page__empty { margin: 24px 0; text-align: center; color: var(--cp-muted); }
@media (max-width: 840px) {
    .tl-cats-page { padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
    .tl-cats-page__head h1 { font-size: 22px; }
    .tl-cats-page__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .tl-cats-page__img { --img-h: 72px; }
    .tl-cats-page__tile { padding: 8px 6px; border-radius: 14px; }
    .tl-cats-page__tile strong { font-size: 12px; }
}
html[data-theme="dark"] .tl-cats-page__img:has(> b) { background: #2c2c2e; }
html[data-theme="dark"] .tl-cats-page__img b { color: #fff; }

/* TL_CATEGORIES_IMAGE_KNOCKOUT_V1: no box behind the pictures; their white background is removed so
   they sit on the tile colour (filter defined in Categories.cshtml). */
.tl-cats-page .tl-cats-page__img { background: transparent; }
.tl-cats-page .tl-cats-page__img img { filter: url("#tl-cats-knockout-white"); }
.tl-cats-page .tl-cats-page__img:has(> b) { background: var(--cp-fill); }