.web-discover { width:min(1200px,calc(100% - 40px)); margin:0 auto; padding:30px 0 50px; color:#292c33; font-family:"Noto Kufi Arabic",Arial,sans-serif; }
.web-discover button,.web-discover input { font:inherit; }
.web-discover button { cursor:pointer; }
.web-discover button:disabled { cursor:default; }
.web-discover a:focus-visible,.web-discover button:focus-visible,.web-discover input:focus-visible { outline:3px solid #315bf6; outline-offset:3px; }
.web-discover-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:30px; }
.web-discover-heading h1 { margin:0; font:700 25px/1.5 "Noto Kufi Arabic",Arial,sans-serif; }
.web-discover-heading form { display:flex; align-items:center; width:min(500px,60%); gap:10px; padding:6px 12px; border:1px solid #dfe3ec; border-radius:5px; }
.web-discover-heading input { min-width:0; flex:1; border:0; background:transparent; color:inherit; font-size:12px; }
.web-discover-heading svg { width:18px; height:18px; color:#7b8392; }
.web-discover-heading form button { border:0; background:#315bf6; color:#fff; border-radius:4px; padding:8px 18px; min-height:38px; font-size:12px; }
.web-discover-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start; }
.web-discover-sidebar,.web-discover-content { min-width:0; }
.web-discover-sidebar .catalog-accordion__heading { font-size:17px; padding-block:18px; color:#292c33; }
.web-discover-sidebar .catalog-accordion:first-child .catalog-accordion__heading { padding-top:0; }
.web-discover-sidebar .browse-genres { gap:4px 12px; }
.web-discover-sidebar .browse-genres button { min-height:40px; padding:7px 8px; border-radius:4px; font-size:12px; font-weight:500; }
.web-discover-sidebar .browse-genres button[aria-pressed=true] { color:#315bf6; background:#edf0ff; }
.web-discover-all { padding:7px 12px; margin-bottom:20px; min-height:36px; border:1px solid #dfe3ec; border-radius:18px; color:#6d7480; background:#fff; font-size:12px!important; }
.web-discover-all[aria-pressed=true] { color:#315bf6; background:#edf0ff; border-color:#edf0ff; }
.web-discover-filters h2,.web-discover-sorts h2 { margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid #e1e4ea; color:#70747c; font-size:18px; font-weight:600; }
.web-discover-sorts { margin-top:24px; }
.web-discover-pills { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.web-discover-pills > span { color:#747985; font-size:12px; margin-inline-end:8px; }
.web-discover-pills button { min-height:36px; border:1px solid #dce0e8; border-radius:22px; background:#fff; color:#40444d; padding:6px 13px; font-size:12px; font-weight:400; }
.web-discover-pills button[aria-pressed=true] { border-color:#e9edff; background:#e9edff; color:#315bf6; }
.web-discover-selected { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:18px; font-size:11px; }
.web-discover-selected > span { padding:5px 10px; background:#f5f6fb; border-radius:4px; }
.web-discover-selected button { display:flex; gap:5px; align-items:center; border:0; background:none; color:#315bf6; font-size:11px; }
.web-discover-selected svg { width:14px; height:14px; }
.web-discover-count { color:#838792; font-size:11px; margin:22px 0 16px; }
.web-discover-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px; }
.web-discover-card { min-width:0; display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; align-items:start; }
.web-discover-cover { display:block; width:104px; height:139px; border-radius:4px; overflow:hidden; }
.web-discover .editorial-cover { position:relative; isolation:isolate; display:block; width:100%; height:100%; overflow:hidden; background:#eceef4; }
.web-discover .editorial-cover__backdrop { position:absolute; inset:-12%; z-index:0; background-position:center; background-size:cover; filter:blur(12px) brightness(.8); }
.web-discover .editorial-cover > img,.web-discover .editorial-cover > .reader-cover-fallback { position:relative; z-index:1; display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:transparent; border-radius:0; }
.web-discover-copy { min-width:0; }
.web-discover-tags { display:flex; gap:8px; overflow:hidden; min-height:20px; font-size:10px; font-weight:700; color:#315bf6; }
.web-discover-tags a { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.web-discover-card h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:3px 0 5px; color:#292c33; font-size:16px; line-height:1.6; font-weight:700; }
.web-discover-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:0 0 7px; color:#555b65; font-size:13px; line-height:1.8; }
.web-discover-latest { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#315bf6; font-size:10px; margin-bottom:6px; }
.web-discover-stats { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; color:#888d97; font-size:10px; line-height:1.6; }
.web-discover-stats > span,.web-discover-stats button { display:inline-flex; align-items:center; gap:4px; }
.web-discover-stats svg { width:13px; height:13px; flex-shrink:0; }
.web-discover-stats button { border:0; background:transparent; padding:4px 0; min-height:28px; color:#315bf6; font-size:11px; white-space:nowrap; }
.web-discover-stats button:disabled { color:#788ba8; }
.web-discover-more { display:block; margin:20px auto; min-height:42px; padding:8px 18px; border:1px solid #dce0e8; border-radius:22px; background:#fff; color:#315bf6; font-size:12px!important; }
.web-discover-loading,.web-discover-end { display:flex; justify-content:center; gap:7px; align-items:center; min-height:52px; color:#838792; font-size:12px; }
.web-discover-loading span { width:5px; height:5px; border-radius:50%; background:#315bf6; }
.web-discover-state { margin-block:25px; color:#747985; font-size:13px; }
.web-discover-state h2 { font-size:17px; }
.web-discover-state button { border:0; background:transparent; color:#315bf6; padding:8px; }
.web-discover-sentinel { height:1px; }
.web-discover-toggle,.web-discover-done { display:none; }
.web-discover:lang(en) { font-family:Arial,sans-serif; }
.web-discover:lang(en) .web-discover-card h2 { font-size:17px; }
.web-discover:lang(en) .web-discover-description { font-size:14px; line-height:1.5; }
.web-discover:lang(en) .web-discover-tags { font-size:11px; }
@media(max-width:1100px) {
 .web-discover-layout { grid-template-columns:210px minmax(0,1fr); gap:24px; }
 .web-discover-grid { gap:24px 20px; }
 .web-discover-card { grid-template-columns:88px minmax(0,1fr); gap:12px; }
 .web-discover-cover { width:88px; height:118px; }
}
@media(max-width:850px) {
 .web-discover-grid { grid-template-columns:minmax(0,1fr); }
 .web-discover-card { grid-template-columns:104px minmax(0,1fr); }
 .web-discover-cover { width:104px; height:139px; }
}
@media(max-width:700px) {
 .web-discover { width:calc(100% - 32px); padding-top:22px; }
 .web-discover-heading { gap:14px; flex-wrap:wrap; margin-bottom:18px; }
 .web-discover-heading h1 { font-size:23px; }
 .web-discover-heading form { width:100%; }
 .web-discover-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 .web-discover-sidebar { display:none; }
 .web-discover-sidebar.is-open { display:block; }
 .web-discover-toggle,.web-discover-done { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:8px 14px; border:1px solid #dce0e8; border-radius:5px; color:#315bf6; background:#fff; margin-bottom:20px; font-size:12px!important; }
 .web-discover-toggle svg { width:17px; height:17px; }
 .web-discover-done { width:100%; margin:16px 0 0; }
 .web-discover-filters h2,.web-discover-sorts h2 { font-size:16px; }
 .web-discover-pills { gap:8px; }
 .web-discover-pills button { min-height:38px; font-size:11px; padding-inline:12px; }
 .web-discover-card { grid-template-columns:88px minmax(0,1fr); gap:12px; }
 .web-discover-cover { width:88px; height:118px; }
 .web-discover-card h2 { font-size:14px; }
 .web-discover-stats button { min-height:36px; }
}

@media(max-width:700px) {
 .web-discover-filters h2,.web-discover-sorts h2 { display:none; }
 .web-discover-sorts { margin-top:16px; }
 .web-discover-sorts .web-discover-pills { flex-wrap:nowrap; overflow-x:auto; padding:4px 2px 10px; }
 .web-discover-sorts .web-discover-pills button { flex:none; white-space:nowrap; }
}

/* Only browser navigation receives the catalogue container. Native shells keep their styles. */
.site-header.site-header--web .site-header__inner { width:min(1200px,calc(100% - 40px)); gap:18px; flex-wrap:nowrap; }
.site-header.site-header--web { height:80px; }
.site-header.site-header--web .site-nav { order:0; flex:1; justify-content:flex-start; gap:8px; }
.site-header.site-header--web .site-header__actions { gap:10px; margin-inline-start:auto; }
.site-header.site-header--web .site-nav > a { padding:10px 9px; white-space:nowrap; font-size:14px; }
.site-header.site-header--web .site-nav > a svg { width:21px; height:21px; }
.site-header.site-header--web .brand--mark { width:56px; height:56px; }
@media(min-width:981px) and (max-width:1240px) {
 .site-header.site-header--web .site-header__inner { gap:10px; }
 .site-header.site-header--web .site-header__actions { gap:6px; }
 .site-header.site-header--web .header-library-link span,
 .site-header.site-header--web .account-trigger__copy { display:none; }
 .site-header.site-header--web .header-publish { padding-inline:8px; }
}
@media(max-width:980px) {
 .site-header.site-header--web { height:auto; }
 .site-header.site-header--web .site-header__inner { width:calc(100% - 32px); height:64px; }
 .site-header.site-header--web .brand--mark { width:46px; height:46px; }
 .site-header.site-header--web .site-nav { flex:initial; }
 .site-header.site-header--web .reader-mobile-nav--catalog-home { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .site-header.site-header--web .reader-mobile-nav--catalog-home a { font-size:11px; }
}
@media(max-width:400px) {
 .site-header.site-header--web .site-header__inner { width:calc(100% - 24px); gap:8px; }
 .site-header.site-header--web .site-header__actions { gap:5px; }
 .site-header.site-header--web .reader-mobile-nav--catalog-home a { font-size:10px; }
}