/*
 * AT-2998: the book page and the category pages in the new design language
 * (web-apps apps/web/docs/migration/05-design-language.md). Loaded by
 * Views/Shared/_CatalogThemeStylesheet.cshtml after the site bundle, and scoped
 * to .abj-theme so no other page moves. The markup underneath keeps the legacy
 * classes and data-* hooks the site's scripts, GTM and the tests select on;
 * this file only restyles them.
 *
 * Light only: the legacy site has no dark mode. The hero band is dark by design.
 */

.abj-theme {
  --abj-canvas: #f8f6f4;
  --abj-surface: #fff;
  --abj-surface-2: #f8f6f4;
  --abj-surface-3: #f1efec;
  --abj-border: #e5e7eb;
  --abj-border-strong: #858e98;
  --abj-fg: #0e1a28;
  --abj-fg-2: #5a6470;
  --abj-fg-muted: #646e7a;
  --abj-brand: #e96a2c;
  --abj-brand-strong: #c74f15;
  --abj-brand-stronger: #a64211;
  --abj-brand-fg: #b94a13;
  --abj-brand-soft: #fef2ec;
  --abj-on-brand: #fff;
  --abj-hero-from: #1e1612;
  --abj-hero-to: #0a0806;
  --abj-hero-fg: #fff;
  --abj-hero-fg-strong: #f6f4f2;
  --abj-hero-fg-muted: #beb8b4;
  --abj-hero-chip-bg: #2d1d13;
  --abj-hero-chip-fg: #f68046;
  --abj-tile: #fceed2;
  --abj-shadow-e1: 0 1px 2px rgb(14 26 40 / 0.04), 0 1px 3px rgb(14 26 40 / 0.06);
  --abj-shadow-e2: 0 8px 24px -8px rgb(14 26 40 / 0.25);
  --abj-shadow-e3: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  --abj-font: "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --abj-font-ui: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --abj-gutter: 16px;

  position: relative;
  direction: rtl;
  text-align: start;
  font-family: var(--abj-font);
  color: var(--abj-fg);
  line-height: 1.6;
}

/* The canvas runs edge to edge while the content stays in .page's column. Painted on body: a clip-path or
   transform on .abj-theme would trap the fixed bottom sheet and sticky bar in its own stacking context. */
body:has(.abj-theme) {
  background-color: #f8f6f4;
}

.abj-theme *,
.abj-theme *::before,
.abj-theme *::after {
  box-sizing: border-box;
}

.abj-theme h1,
.abj-theme h2,
.abj-theme h3,
.abj-theme h4,
.abj-theme h5,
.abj-theme h6 {
  letter-spacing: normal;
  text-transform: none;
}

.abj-theme a:focus-visible,
.abj-theme button:focus-visible,
.abj-theme summary:focus-visible,
.abj-theme .abj-check input:focus-visible {
  outline: 2px solid var(--abj-brand-strong);
  outline-offset: 2px;
}

.abj-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1024px) {
  .abj-theme {
    --abj-gutter: 32px;
  }
}

/* ---------- Buttons ---------- */

.abj-theme .abj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.abj-theme .abj-btn--brand {
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

.abj-theme .abj-btn--brand:hover {
  background: var(--abj-brand-stronger);
  color: var(--abj-on-brand);
}

.abj-theme .abj-btn--outline {
  background: var(--abj-surface);
  border-color: var(--abj-brand);
  color: var(--abj-brand-fg);
}

.abj-theme .abj-btn--outline:hover {
  background: var(--abj-brand-soft);
}

.abj-theme .abj-btn--link {
  background: none;
  color: var(--abj-brand-fg);
  padding: 0 8px;
}

.abj-theme .abj-btn--link:hover {
  text-decoration: underline;
}

/* ---------- Dark hero band (always dark) ---------- */

.abj-theme .abj-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: calc(50% - 50vw);
  background: var(--abj-hero-to);
  color: var(--abj-hero-fg);
}

.abj-theme .abj-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(48px);
  transform: scale(1.25);
}

.abj-theme .abj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at top, var(--abj-hero-from), var(--abj-hero-to));
  opacity: 0.88;
}

.abj-theme .abj-hero__inner {
  max-width: 1245px;
  margin: 0 auto;
  padding: 24px var(--abj-gutter) 40px;
}

.abj-theme .abj-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-family: var(--abj-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--abj-hero-fg-muted);
}

.abj-theme .abj-crumbs a {
  color: var(--abj-hero-fg);
  text-decoration: none;
}

.abj-theme .abj-crumbs a:hover {
  color: var(--abj-brand);
  text-decoration: underline;
}

.abj-theme .abj-hero h1 {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--abj-hero-fg);
}

.abj-theme .abj-hero__lead {
  max-width: 768px;
  margin: 12px 0 0;
  font-family: var(--abj-font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--abj-hero-fg-muted);
  white-space: pre-line;
}

.abj-theme .abj-clamp__toggle {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-hero-chip-fg);
  cursor: pointer;
}

@media (max-width: 639px) {
  .abj-theme .abj-clamp:not(.is-expanded) > :first-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 640px) {
  .abj-theme .abj-cat-hero .abj-clamp__toggle {
    display: none;
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-hero__inner {
    padding: 32px var(--abj-gutter) 48px;
  }

  .abj-theme .abj-hero h1 {
    font-size: 40px;
    line-height: 1.25;
  }
}

/* ---------- Category page ---------- */

.abj-theme .abj-cat-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.abj-theme .abj-cat-hero__text {
  min-width: 0;
}

.abj-theme .abj-cat-hero__stat {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--abj-brand);
  line-height: 1.3;
}

.abj-theme .abj-cat-hero__stat .resultcount {
  font-family: var(--abj-font-ui);
  font-size: 28px;
  font-weight: 600;
  color: var(--abj-hero-chip-fg);
  font-variant-numeric: tabular-nums;
}

.abj-theme .abj-cat-hero__stat-label {
  font-size: 14px;
  color: var(--abj-hero-fg-muted);
}

@media (min-width: 1024px) {
  .abj-theme .abj-cat-hero__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .abj-theme .abj-cat-hero__stat .resultcount {
    font-size: 40px;
  }
}

/* Same rhythm as the book page: 24px between blocks on phones, 32px from 1024px, including hero to body,
   around the after-content ad and before the footer. */
.abj-theme .abj-cat-hero {
  margin-bottom: 0 !important;
}

/* "Category Page Light": the category hero is a light warm band (no cover: a category has none), dark text,
   the current crumb and the count in brand orange. The dark hero's tokens are re-pointed, not its rules. */
.abj-theme .abj-cat-hero {
  --abj-hero-from: #fbe9dc;
  --abj-hero-to: #fbf6f1;
  --abj-hero-fg: var(--abj-fg);
  --abj-hero-fg-muted: var(--abj-fg-2);
  --abj-hero-chip-fg: var(--abj-brand-fg);
  border-bottom: 1px solid var(--abj-border);
}

.abj-theme .abj-cat-hero::before {
  background: linear-gradient(100deg, var(--abj-hero-to) 35%, var(--abj-hero-from));
  opacity: 1;
}

.abj-theme .abj-cat-hero .abj-crumbs a {
  color: var(--abj-fg-muted);
}

.abj-theme .abj-cat-hero .abj-crumbs > span:last-child a,
.abj-theme .abj-cat-hero .abj-crumbs > a:last-child {
  color: var(--abj-brand-fg);
  font-weight: 600;
}

.abj-theme .abj-cat-hero h1 {
  font-weight: 700;
}

.abj-theme .abj-cat-hero__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.abj-theme .abj-cat-hero__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

@media (min-width: 640px) {
  .abj-theme .abj-cat-hero__title {
    gap: 16px;
  }

  .abj-theme .abj-cat-hero__icon {
    width: 56px;
    height: 56px;
  }
}

.abj-theme .abj-cat-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

.abj-theme .abj-cat-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.abj-theme .abj-cat-main > .abjjad-ad {
  margin: 0 !important;
}

.abj-theme .abj-card {
  background: var(--abj-surface);
  border: 1px solid var(--abj-border);
  border-radius: 16px;
  box-shadow: var(--abj-shadow-e1);
  padding: 16px;
}

.abj-theme .abj-cat-listing {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "Category Page Light": the listing sits on the page background; only the filter panel is a card. */
.abj-theme .abj-card.abj-cat-listing {
  padding: 0 !important;
  border: 0;
  background: none;
  box-shadow: none;
}

@media (min-width: 640px) {
  .abj-theme .abj-card {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-cat-body {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    padding: 32px 0;
  }

  .abj-theme .abj-cat-main {
    gap: 32px;
  }

  .abj-theme .abj-card {
    padding: 32px;
  }

  .abj-theme .abj-cat-listing {
    gap: 24px;
  }
}

/* Toolbar: heading, search, sort and the phone filter toggle. */

.abj-theme .abj-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.abj-theme .abj-toolbar__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abj-theme .abj-toolbar__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-theme .abj-toolbar__count {
  margin: 0;
  font-size: 13px;
  color: var(--abj-fg-muted);
  font-variant-numeric: tabular-nums;
}

.abj-theme .abj-toolbar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.abj-theme .abj-toolbar__actions {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.abj-theme .abj-sort {
  position: relative;
  margin-inline-start: auto;
}

.abj-theme .abj-sort__summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--abj-border-strong);
  border-radius: 9999px;
  background: var(--abj-surface);
  font-family: var(--abj-font);
  font-size: 14px;
  color: var(--abj-fg);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.abj-theme .abj-sort__summary::-webkit-details-marker {
  display: none;
}

.abj-theme .abj-sort__summary::before,
.abj-theme .abj-sort__summary::after {
  content: none;
  display: none;
}

.abj-theme .abj-sort__by {
  color: var(--abj-fg-muted);
}

.abj-theme .abj-sort__value {
  font-weight: 600;
}

.abj-theme .abj-sort[open] .abj-sort__summary svg {
  transform: rotate(180deg);
}

.abj-theme .abj-sort__menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 50;
  display: block;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--abj-surface);
  border: 1px solid var(--abj-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgb(14 26 40 / 0.25);
}

.abj-theme .abj-sort__menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-theme .abj-sort__menu li[data-ga="Book_Sort_None"] {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--abj-fg-muted);
}

.abj-theme .abj-sort__menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: var(--abj-font);
  font-size: 14px;
  color: var(--abj-fg);
  text-align: start;
  cursor: pointer;
}

.abj-theme .abj-sort__menu button:hover {
  background: var(--abj-surface-3);
}

.abj-theme .abj-sort__menu li.selected button {
  background: var(--abj-brand-soft);
  color: var(--abj-brand-fg);
  font-weight: 600;
}

@media (min-width: 640px) {
  .abj-theme .abj-toolbar__actions {
    flex: 0 0 auto;
  }
}

@media (min-width: 1280px) {
  .abj-theme .abj-toolbar {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .abj-theme .abj-toolbar__form {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-filter-toggle {
    display: none;
  }
}

/* Sub-category chip row: plain links to each sub-category's own route. */

.abj-theme .abj-chiprow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.abj-theme .abj-chiprow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.abj-theme .abj-chiprow__label {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-fg);
}

.abj-theme .abj-chiprow__arrows {
  display: none;
  gap: 8px;
}

.abj-theme .abj-chiprow__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-fg);
  cursor: pointer;
}

.abj-theme .abj-chiprow__arrow:hover {
  border-color: var(--abj-brand);
  color: var(--abj-brand-fg);
}

.abj-theme .abj-chiprow__list {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * 16px);
  padding: 4px 16px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.abj-theme .abj-chiprow__list::-webkit-scrollbar {
  display: none;
}

.abj-theme .abj-chiprow__list li {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.abj-theme .abj-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  font-family: var(--abj-font);
  font-size: 14px;
  color: var(--abj-fg-2);
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.abj-theme a.abj-chip:hover {
  border-color: var(--abj-brand);
  color: var(--abj-brand-fg);
}

.abj-theme .abj-chip.is-current {
  border-color: var(--abj-brand);
  background: var(--abj-brand-soft);
  color: var(--abj-brand-fg);
  font-weight: 600;
}

@media (min-width: 768px) {
  .abj-theme .abj-chiprow__arrows {
    display: flex;
  }

  .abj-theme .abj-chiprow__list {
    margin: 0;
    padding-inline: 0;
  }
}

/* Active filters, each removable. */

.abj-theme .abj-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-theme .abj-removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: 0;
  padding-inline: 12px 4px;
  border: 1px solid var(--abj-brand);
  border-radius: 9999px;
  background: var(--abj-brand-soft);
  font-size: 13px;
  color: var(--abj-brand-fg);
}

.abj-theme .abj-removable a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  color: var(--abj-brand-fg);
}

.abj-theme .abj-removable a:hover {
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

/* Filter panel: a sidebar card from 1024px, a bottom sheet below it. */

.abj-theme .abj-sheet {
  margin: 0;
  padding: 0;
  width: auto !important;
  float: none !important;
}

.abj-theme .abj-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.abj-theme .abj-sheet__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--abj-fg);
}

.abj-theme .abj-sheet__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-fg);
  cursor: pointer;
}

.abj-theme .abj-sheet__foot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.abj-theme .abj-sheet__apply {
  flex: 1;
}

@media (max-width: 1023px) {
  .abj-theme .abj-sheet {
    position: fixed;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    background: var(--abj-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgb(0 0 0 / 0.25);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .abj-theme .abj-sheet.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease;
  }

  .abj-theme .abj-sheet__head {
    margin: 0;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--abj-border);
  }

  .abj-theme .abj-sheet__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 20px;
  }

  .abj-theme .abj-sheet__foot {
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--abj-border);
    background: var(--abj-surface);
  }

  .abj-theme .abj-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgb(10 8 6 / 0.5);
  }

  .abj-theme .abj-filter__apply {
    display: none;
  }

  html.abj-sheet-locked,
  html.abj-sheet-locked body {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .abj-sheet,
  .abj-theme .abj-sheet.is-open {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-sheet {
    padding: 20px;
    background: var(--abj-surface);
    border: 1px solid var(--abj-border);
    border-radius: 16px;
    box-shadow: var(--abj-shadow-e1);
  }

  .abj-theme .abj-sheet__close,
  .abj-theme .abj-sheet__foot,
  .abj-theme .abj-sheet-backdrop {
    display: none;
  }
}

/* The filter list itself (Category/CategoriesFilter.cshtml). */

.abj-theme .abj-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.abj-theme .abj-filter h5 {
  margin: 0;
  font-family: var(--abj-font);
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5;
}

.abj-theme .abj-filter .abj-filter__label {
  font-family: var(--abj-font-ui);
  font-weight: 600;
  color: var(--abj-fg-muted);
}

.abj-theme .abj-filter__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-theme .abj-filter__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-theme .abj-filter__item--current {
  order: -1;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--abj-border);
}

.abj-theme .abj-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--abj-fg) !important;
  text-decoration: none;
}

.abj-theme a.abj-option:hover {
  background: var(--abj-surface-3);
}

.abj-theme .abj-filter__item--current .abj-option {
  font-weight: 600;
}

.abj-theme .abj-option__radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--abj-border-strong);
  border-radius: 9999px;
  background: var(--abj-surface);
}

.abj-theme .abj-option__radio.is-checked {
  border-color: var(--abj-brand-strong);
  background: var(--abj-brand-strong);
  box-shadow: inset 0 0 0 3px var(--abj-surface);
}

.abj-theme .abj-filter__subs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
}

.abj-theme .abj-filter__subs ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  margin-inline-start: 16px;
  padding: 0;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--abj-border);
  list-style: none;
}

.abj-theme .abj-filter__subs li {
  margin: 0;
  padding: 0;
}

.abj-theme .abj-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--abj-fg);
  cursor: pointer;
}

.abj-theme .abj-check:hover {
  background: var(--abj-surface-3);
}

/* The native checkbox is the visible box (appearance: none), so its checked state and focus ring never
   depend on a sibling element the legacy scripts or styles could separate it from. */
.abj-theme .abj-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: static;
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--abj-border-strong);
  border-radius: 4px;
  background: var(--abj-surface) center / 12px no-repeat;
  opacity: 1;
  cursor: pointer;
}

.abj-theme .abj-check input[type="checkbox"]:checked {
  border-color: var(--abj-brand-strong);
  background-color: var(--abj-brand-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.abj-theme .abj-check input:checked ~ .abj-check__text {
  font-weight: 600;
}

/* !important: the legacy ".categories-filter button" rule makes every button in the panel transparent and
   borderless with !important, which left the white-text apply button invisible. */
.abj-theme .categories-filter .abj-filter__apply {
  align-self: stretch;
  width: auto !important;
  border: 1px solid transparent !important;
  background-color: var(--abj-brand-strong) !important;
  color: var(--abj-on-brand);
}

.abj-theme .categories-filter .abj-filter__apply:hover {
  background-color: var(--abj-brand-stronger) !important;
}

/* Once the ticks differ from the page's selection, the apply button follows the bottom of the screen
   down a long list. */
.abj-theme .abj-filter__subs.is-dirty .abj-filter__apply {
  position: sticky;
  bottom: 16px;
  z-index: 1;
  box-shadow: 0 8px 24px -6px rgb(14 26 40 / 0.35);
}

/* "Category Page Light": the open category's subcategories past the eighth fold behind "عرض المزيد" (only
   once _CatalogThemeScript marks the form collapsible), and the other categories are <details> rows. */
.abj-theme .abj-filter__subs.is-collapsible:not(.is-expanded) li.is-extra {
  display: none;
}

.abj-theme .categories-filter .abj-filter__more {
  align-self: flex-start;
  margin: -6px 0 0;
  margin-inline-start: 24px;
  padding: 0;
  color: var(--abj-brand-fg) !important;
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.abj-theme .abj-filter__group {
  border-bottom: 1px solid var(--abj-border);
}

.abj-theme .abj-filter__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.abj-theme .abj-filter__group > summary::-webkit-details-marker {
  display: none;
}

/* A legacy rule draws a "+" before every <summary>; the chevron is this row's marker. */
.abj-theme .abj-filter__group > summary::before {
  content: none !important;
  display: none !important;
}

.abj-theme .abj-filter__group > summary .top-level-category {
  flex: 1 1 auto;
  min-width: 0;
}

.abj-theme .abj-filter__group > summary .abj-option {
  font-weight: 600;
}

.abj-theme .abj-filter__chevron {
  flex-shrink: 0;
  margin-inline-end: 8px;
  color: var(--abj-fg-muted);
  transition: transform 0.15s;
}

.abj-theme .abj-filter__group[open] .abj-filter__chevron {
  transform: rotate(180deg);
}

.abj-theme .abj-filter__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 8px;
  padding: 0;
  padding-inline-start: 16px;
  list-style: none;
}

.abj-theme .categories-filter .abj-filter__links a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--abj-fg-2) !important;
  text-decoration: none;
}

.abj-theme .categories-filter .abj-filter__links a:hover {
  background: var(--abj-surface-3);
  color: var(--abj-brand-fg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .abj-filter__chevron {
    transition: none;
  }
}

/* The legacy filter's own rules, neutralised inside the new panel. */
.abj-theme .categories-filter a {
  color: inherit;
}

.abj-theme .selected-category,
.abj-theme .selected-category span {
  font-size: inherit !important;
}

.abj-theme .children-categories {
  margin-right: 0;
}

/* Grid (Category/_PagedBooks.cshtml). 2 columns on phones, 4 from 768px: a page of 40 and the run of
   12 before the in-grid unit both fill whole rows. */

.abj-theme .abj-gallery {
  margin: 0 !important;
  padding: 0;
}

.abj-theme ul.listing.abj-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.abj-theme ul.listing.abj-grid::before,
.abj-theme ul.listing.abj-grid::after {
  display: none;
}

.abj-theme ul.listing.abj-grid > li {
  float: none;
  width: auto !important;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.abj-theme ul.listing.abj-grid > li.listing-ad {
  grid-column: 1 / -1;
  min-height: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.abj-theme ul.listing.abj-grid > li.listing-ad:has(.adsbygoogle[data-ad-status="unfilled"]) {
  display: none;
}

@media (min-width: 768px) {
  .abj-theme ul.listing.abj-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
  }

  /* AT-2588 SLOT 1: a full-width band after grid row 2. */
  .abj-theme ul.listing.abj-grid > li.listing-ad {
    grid-row: 3;
  }
}

.abj-theme .abj-empty {
  padding: 40px 0;
  text-align: center;
}

.abj-theme .abj-empty h3 {
  font-family: var(--abj-font-ui);
  font-size: 16px;
  color: var(--abj-fg-2);
}

/* Paginator (Shared/DisplayTemplates/PaginatorBar.cshtml). */

.abj-theme .paginator-container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.abj-theme table.paginator {
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 6px 0;
}

.abj-theme table.paginator td {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--abj-font);
  font-size: 14px;
  color: var(--abj-fg-muted);
  text-align: center;
}

.abj-theme table.paginator td a,
.abj-theme table.paginator td span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-fg);
  text-decoration: none;
}

.abj-theme table.paginator td a:hover {
  border-color: var(--abj-brand);
  color: var(--abj-brand-fg);
}

.abj-theme table.paginator td.current-index span {
  border-color: var(--abj-brand-strong);
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-weight: 600;
}

/* The category's own copy. */

.abj-theme section.category-body {
  margin: 0;
}

.abj-theme section.category-body h2 {
  margin: 0 0 12px;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-theme section.category-body p {
  max-width: 896px;
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

/* ---------- Book card (Book/DisplayTemplates/DisplayBookBadge.cshtml) ---------- */

.abj-theme .thebookbadge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas:
    "img img"
    "title title"
    "author author"
    "rating year"
    "formats formats"
    "cta cta";
  align-items: center;
  column-gap: 8px;
  width: auto !important;
  height: 100%;
  min-height: 0;
  margin: 0;
  /* !important: the legacy phone card rule reserves 120px on one side for a cover beside the text, which
     squeezed the whole card into a third of its grid column. */
  padding: 0 !important;
  float: none;
  background: none;
  border: 0;
  text-align: start;
  font-family: var(--abj-font);
}

.abj-theme .thebookbadge > a.img {
  grid-area: img;
  position: relative;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3;
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--abj-surface-3);
  box-shadow: var(--abj-shadow-e2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.abj-theme .thebookbadge > a.img:hover {
  transform: translateY(-2px);
}

.abj-theme .thebookbadge > a.img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
}

.abj-theme .thebookbadge > .tools {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  left: auto;
  z-index: 2;
}

.abj-theme .thebookbadge > .summary-header {
  grid-area: title;
  margin: 0 0 2px !important;
  padding: 0;
  font-family: var(--abj-font-ui);
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  color: var(--abj-fg);
  border: 0;
}

.abj-theme .thebookbadge > .summary-header a {
  display: block !important;
  overflow: hidden;
  white-space: nowrap !important;
  text-overflow: ellipsis;
  color: var(--abj-fg) !important;
  text-decoration: none;
}

.abj-theme .thebookbadge > .summary-header a:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-theme .thebookbadge > .author {
  grid-area: author;
  display: block;
  margin: 0 0 6px !important;
  padding: 0;
  font-family: var(--abj-font) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--abj-fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abj-theme .thebookbadge > .author a {
  color: var(--abj-fg-2) !important;
  text-decoration: none;
}

.abj-theme .thebookbadge > .author a:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-theme .thebookbadge > .rating,
.abj-theme .thebookbadge > span:not([class]) {
  grid-area: rating;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  float: none;
  font-size: 13px;
  line-height: 1.4;
}

.abj-theme .thebookbadge > .rating::before {
  content: "\2605";
  font-size: 15px;
  line-height: 1;
  color: var(--abj-brand);
}

.abj-theme .thebookbadge > .rating .star {
  display: none !important;
}

.abj-theme .thebookbadge > .rating .number {
  display: inline !important;
  font-weight: 600;
  color: var(--abj-fg);
  font-variant-numeric: tabular-nums;
}

.abj-theme .thebookbadge > .published {
  grid-area: year;
  display: block !important;
  justify-self: end;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--abj-fg-muted);
  white-space: nowrap;
}

.abj-theme .thebookbadge > .formats {
  grid-area: formats;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.abj-theme .thebookbadge .format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--abj-brand);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--abj-brand-fg);
  white-space: nowrap;
}

.abj-theme .thebookbadge .format-ebook {
  border-color: #f4c7aa;
  background: #fdf1e8;
}

.abj-theme .thebookbadge .format-audio {
  border-color: #d5cbf3;
  background: #f1eefc;
  color: #5b35c4;
}

.abj-theme .thebookbadge > .rdbk {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}

/* The "مجّانًا" badge is positioned against the card, so .rdbk must not be a containing block. The inline
   _Layout rule ".gallery.pagedgallery.giant .rdbk" makes it relative with !important at a higher specificity;
   :not(#abj-none) adds an id's weight to outrank it. */
.abj-theme .thebookbadge > .rdbk:not(#abj-none) {
  position: static !important;
}

.abj-theme .thebookbadge .rdbk .btnread,
.abj-theme .thebookbadge .rdbk .btnun {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 9999px;
  box-shadow: none;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* The inline _Layout rule ".gallery.compact .rdbk .btnread" sets display:block !important, which left the
   label sitting at the top of the button; :not(#abj-none) gives this an id's weight to keep it centred. */
.abj-theme .thebookbadge .rdbk .btnread:not(#abj-none),
.abj-theme .thebookbadge .rdbk .btnun:not(#abj-none) {
  display: flex !important;
}

.abj-theme .thebookbadge .rdbk .btnread {
  border: 0;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

.abj-theme .thebookbadge .rdbk .btnread:hover {
  background: var(--abj-brand-stronger);
}

.abj-theme .thebookbadge .rdbk .btnun {
  border: 1px solid var(--abj-brand);
  background: var(--abj-surface);
  color: var(--abj-brand-fg);
}

.abj-theme .thebookbadge .rdbk .btnread::before,
.abj-theme .thebookbadge .rdbk .btnun::before {
  display: none;
}

/* "مجّانًا" sits on the cover, top start, as the design's free badge. The !important beat the card
   rules in Shared/_Layout.cshtml, which pin it to the top left. */
.abj-theme .thebookbadge .rdbk .bfree {
  position: absolute !important;
  top: 8px;
  right: 8px !important;
  left: auto !important;
  z-index: 2 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-family: var(--abj-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
}

/* A text link under the read button, as in the design; _Layout.cshtml styles it as a flashing button. */
.abj-theme .thebookbadge .rdbk .subscribe-now-book-btn {
  display: block !important;
  align-self: center;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 2px 4px !important;
  border: 0;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none;
  animation: none !important;
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--abj-brand-fg) !important;
  text-align: center !important;
  text-decoration: none !important;
}

.abj-theme .thebookbadge .rdbk .subscribe-now-book-btn:hover {
  text-decoration: underline !important;
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .thebookbadge > a.img {
    transition: none;
  }

  .abj-theme .thebookbadge > a.img:hover {
    transform: none;
  }
}

/* ---------- Book page (Book/BookDetails.cshtml) ---------- */

.abj-theme .abj-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.abj-theme .abj-pill--outline {
  background: transparent;
  border-color: var(--abj-brand);
  color: var(--abj-brand-fg);
}

.abj-theme .abj-hero .abj-pill--outline {
  color: var(--abj-hero-chip-fg);
}

.abj-theme .abj-pill--sm {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

/* The legacy .page reserves 70px plus .wrapper's 10px for a 50px fixed header, which left a white strip over
   the hero; catalog pages start at the measured header height instead. */
.page.contentwrapper.mainpage:has(.abj-theme) {
  margin-top: var(--abj-header-h, 50px);
}

.page.contentwrapper.mainpage > .wrapper:has(> .abj-theme) {
  padding-top: 0;
  padding-bottom: 0;
}

/* .stickyelement carries top:-70px and z-index:4001 for its fixed state; on the in-flow (position:relative)
   hero they would shift it up and lift it over the header's mega-menu (z-index 2500). */
.abj-book .abj-book-hero {
  top: 0;
  z-index: auto;
  margin-top: 0;
  padding: 0 !important;
  min-height: 0;
  text-align: start;
}

.abj-book .abj-book-crumbs {
  margin-bottom: 24px;
}

.abj-book .abj-crumbs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-book .abj-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.abj-book .abj-crumbs li + li::before {
  content: ">";
  color: var(--abj-hero-fg-muted);
}

.abj-book .abj-crumbs [aria-current] {
  max-width: 24ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The legacy badge positions its parts absolutely around a fixed-width column; the hero lays them out
   as one centred stack on phones and as cover + content columns from 1024px. */
.abj-book .thebadge.bookbadge {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  background: none;
  border: 0;
  color: var(--abj-hero-fg);
  text-align: center;
}

.abj-book .abj-book-hero__media,
.abj-book .abj-book-hero__body,
.abj-book .bookeditbadge,
.abj-book .thebadge .img.editionphoto {
  display: contents;
}

.abj-book .thebadge .img.editionphoto > a { order: 1; }
.abj-book .abj-book-hero__type { order: 2; }
.abj-book .bookeditbadge > h1 { order: 3; }
.abj-book .bookeditbadge > .author { order: 4; }
.abj-book .thebadge .btexp.oim { order: 5; }
.abj-book .thebadge .incols.stats { order: 6; }
.abj-book .thebadge .book_sharing { order: 7; }
.abj-book .bookeditbadge > .description[data-behavior] { order: 8; }
.abj-book .bookeditbadge > .description:not([data-behavior]) { order: 9; }

.abj-book .thebadge .img.editionphoto > a {
  display: block;
  position: static;
  width: 208px;
  max-width: 70vw;
  margin: 0;
  padding: 0;
}

.abj-book .thebadge .img.editionphoto img {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--abj-hero-from);
  box-shadow: var(--abj-shadow-e3);
}

.abj-book .abj-book-hero__type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.abj-book .abj-pill--desktop {
  display: none;
}

.abj-book .bookeditbadge > h1 {
  margin: 12px 0 0;
  padding: 0;
  font-family: var(--abj-font-ui);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--abj-hero-fg) !important;
}

.abj-book .bookeditbadge > .author {
  display: block;
  margin: 8px 0 0;
  font-family: var(--abj-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--abj-hero-fg-muted);
}

.abj-book .bookeditbadge > .author a {
  color: var(--abj-hero-fg) !important;
  text-decoration: none;
}

.abj-book .bookeditbadge > .author a:hover {
  color: var(--abj-brand) !important;
  text-decoration: underline;
}

.abj-book .abj-publisher > span[aria-hidden] {
  margin: 0 4px;
}

/* Read buttons (Shared/Book/_ReadButtonInternal.cshtml), in the hero. */

.abj-book .abj-book-hero .btexp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
}

.abj-book .abj-book-hero .btexp.oim {
  width: 100%;
  max-width: 448px;
  margin-top: 24px;
}

.abj-book .abj-book-hero .btexp .btnread,
.abj-book .abj-book-hero .btexp .btnun,
.abj-book .abj-book-hero .btexp .subscribe-now-book-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 140px;
  min-width: 0 !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 9999px !important;
  box-shadow: none;
  animation: none !important;
  font-family: var(--abj-font-ui);
  font-size: 16px;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

.abj-book .abj-book-hero .btexp .btnread {
  border: 0;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand) !important;
}

.abj-book .abj-book-hero .btexp .btnread:hover {
  background: var(--abj-brand-stronger);
}

.abj-book .abj-book-hero .btexp .btnun,
.abj-book .abj-book-hero .btexp .subscribe-now-book-btn {
  border: 1px solid rgb(255 255 255 / 0.35) !important;
  background: rgb(255 255 255 / 0.06) !important;
  color: var(--abj-hero-fg) !important;
}

.abj-book .abj-book-hero .btexp .btnun:hover,
.abj-book .abj-book-hero .btexp .subscribe-now-book-btn:hover {
  border-color: var(--abj-brand) !important;
  color: var(--abj-hero-chip-fg) !important;
}

.abj-book .abj-book-hero .btexp .btnread::before,
.abj-book .abj-book-hero .btexp .btnun::before {
  display: none;
}

.abj-book .abj-book-hero .btexp .bfree {
  position: static;
  order: -1;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--abj-hero-chip-fg);
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

/* Stats row. */

.abj-book .thebadge .incols.stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  position: static;
  width: 100%;
  max-width: 560px;
  margin: 24px 0 0;
  padding: 12px 16px;
  border: 1px solid rgb(255 255 255 / 0.15);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.05);
  color: var(--abj-hero-fg-muted);
}

.abj-book .thebadge .incols.stats::before,
.abj-book .thebadge .incols.stats::after {
  display: none;
}

.abj-book .thebadge .incols.stats .col {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: none;
  width: auto !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--abj-hero-fg-muted);
  text-align: start;
}

.abj-book .thebadge .incols.stats .col > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.abj-book .thebadge .incols.stats .abj-stat svg {
  color: var(--abj-brand);
  flex-shrink: 0;
}

.abj-book .thebadge .incols.stats .number {
  font-family: var(--abj-font-ui);
  font-size: 18px;
  font-weight: 600;
  color: var(--abj-hero-fg-strong);
  font-variant-numeric: tabular-nums;
}

.abj-book .thebadge .incols.stats .rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: none;
  margin: 0;
}

.abj-book .thebadge .incols.stats .rating::before {
  content: "\2605";
  order: -1;
  font-size: 18px;
  line-height: 1;
  color: var(--abj-brand);
}

.abj-book .thebadge .incols.stats .rating .star {
  display: none !important;
}

/* "★ 3.8 (1,559 تقييم)": the count reads as part of the rating stat, in brackets. */
.abj-book .thebadge .incols.stats .ratingcount {
  display: inline;
  margin: 0;
  font-size: 14px;
  color: var(--abj-hero-fg-muted);
  font-variant-numeric: tabular-nums;
}

.abj-book .thebadge .incols.stats .totalcommunity {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: var(--abj-hero-fg-muted);
}

.abj-book .thebadge .incols.stats h6 {
  margin: 0;
  font-family: var(--abj-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--abj-hero-fg-muted);
}

/* Share row. */

.abj-book .thebadge .book_sharing {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 20px 0 0;
  padding: 0 !important;
  background: none !important;
  overflow: visible;
  color: var(--abj-hero-fg-muted);
  font-size: 13px;
}

.abj-book .thebadge .book_sharing .actions,
.abj-book .thebadge .book_sharing .c {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
}

.abj-book .thebadge .book_sharing a,
.abj-book .thebadge .book_sharing .lk {
  color: var(--abj-hero-fg) !important;
  opacity: 0.85;
}

.abj-book .thebadge .book_sharing a:hover,
.abj-book .thebadge .book_sharing .lk:hover {
  color: var(--abj-brand) !important;
  opacity: 1;
}

/* About the book, categories, the edition and the second read button. */

.abj-book .bookeditbadge > .description {
  position: static;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--abj-hero-fg-muted);
  text-align: start;
  background: none;
}

.abj-book .bookeditbadge > .description[data-behavior] {
  margin-top: 32px !important;
}

.abj-book .bookeditbadge .summary-header {
  margin: 0 0 12px !important;
  padding: 0;
  border: 0;
  font-family: var(--abj-font-ui);
  font-size: 20px !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-brand) !important;
}

.abj-book .bookeditbadge .description .content {
  font-family: var(--abj-font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--abj-hero-fg-muted);
  white-space: pre-line;
}

.abj-book .bookeditbadge .description .a.h {
  color: var(--abj-hero-chip-fg) !important;
  font-family: var(--abj-font-ui);
  font-weight: 600;
  cursor: pointer;
}

.abj-book .bookeditbadge h6 {
  margin: 24px 0 12px;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-hero-fg-muted);
}

.abj-book .bookeditbadge .cats,
.abj-book .bookeditbadge .about {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

/* At most two rows of chips; the rest stay in the document (links for crawlers) but are not shown. */
.abj-book .bookeditbadge .book-category-genre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 80px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.abj-book .bookeditbadge .book-category-genre::-webkit-scrollbar {
  display: none;
}

.abj-book .bookeditbadge .book-category-main,
.abj-book .bookeditbadge .book-category-subs {
  display: contents;
}

.abj-book .bookeditbadge .cats > h6 {
  display: none;
}

.abj-book .bookeditbadge .book-category-genre .tag {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgb(233 106 44 / 0.45) !important;
  border-radius: 9999px !important;
  background: var(--abj-hero-chip-bg) !important;
  color: var(--abj-hero-chip-fg) !important;
  font-family: var(--abj-font);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

.abj-book .bookeditbadge .book-category-genre .tag:hover {
  border-color: var(--abj-brand) !important;
}

.abj-book .bookeditbadge .about .rowlist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-book .bookeditbadge .about .rowlist li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  color: var(--abj-hero-fg-muted);
}

.abj-book .bookeditbadge .about .rowlist a {
  color: var(--abj-hero-fg) !important;
}

.abj-book .bookeditbadge .btexp.indes {
  justify-content: flex-start;
  margin-top: 32px;
}

/* The Figma hero shows the read button with no heading over it. The existing h2 stays in the document
   for its text and the outline, visually hidden. */
.abj-book .bookeditbadge .btexp.indes .summary-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


.abj-book .bookeditbadge .btexp.indes > br {
  display: none;
}

@media (min-width: 640px) {
  .abj-book .thebadge .img.editionphoto > a {
    width: 224px;
  }
}

@media (min-width: 1024px) {
  .abj-book .thebadge.bookbadge {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    text-align: start;
  }

  .abj-book .abj-book-hero__media {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .abj-book .thebadge .img.editionphoto {
    display: block;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .abj-book .thebadge .img.editionphoto > a {
    width: 100%;
    max-width: none;
  }

  .abj-book .thebadge .btexp.oim {
    display: none;
  }

  .abj-book .thebadge .book_sharing {
    margin: 0;
    align-self: center;
  }

  .abj-book .abj-book-hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .abj-book .abj-book-hero__type {
    justify-content: flex-start;
    margin-top: 0;
  }

  .abj-book .abj-pill--desktop {
    display: inline-flex;
  }

  .abj-book .abj-pill--mobile {
    display: none;
  }

  .abj-book .bookeditbadge > h1 {
    font-size: 40px;
    line-height: 1.25;
  }

  .abj-book .thebadge .incols.stats {
    justify-content: flex-start;
    max-width: none;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: none;
    gap: 12px 28px;
  }

  .abj-book .thebadge .incols.stats .number {
    font-size: 22px;
  }

  .abj-book .abj-book-hero .btexp .btnread,
  .abj-book .abj-book-hero .btexp .btnun,
  .abj-book .abj-book-hero .btexp .subscribe-now-book-btn {
    flex: 0 0 auto;
  }
}

/* The badge sticks to the top once scrolled past (data-behavior="Sticky"): a compact dark bar. */

/* Under the header, not over it, so the header's menus still open on top; --abj-header-h is measured by
   _CatalogThemeScript. */
.abj-book .abj-book-hero.fixed {
  position: fixed;
  top: var(--abj-header-h, 50px);
  right: 0;
  left: 0;
  z-index: 2400;
  margin: 0 !important;
  background: rgb(10 8 6 / 0.97);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

.abj-book .abj-book-hero.fixed::before,
.abj-book .abj-book-hero.fixed .abj-hero__backdrop,
.abj-book .abj-book-hero.fixed .abj-book-crumbs,
.abj-book .abj-book-hero.fixed .abj-book-hero__type,
.abj-book .abj-book-hero.fixed .bookeditbadge > .author,
.abj-book .abj-book-hero.fixed .bookeditbadge > .description,
.abj-book .abj-book-hero.fixed .btexp.oim,
.abj-book .abj-book-hero.fixed .book_sharing,
.abj-book .abj-book-hero.fixed .incols.stats {
  display: none !important;
}

.abj-book .abj-book-hero.fixed .abj-hero__inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

.abj-book .abj-book-hero.fixed .thebadge.bookbadge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.abj-book .abj-book-hero.fixed .abj-book-hero__media,
.abj-book .abj-book-hero.fixed .abj-book-hero__body {
  display: contents;
}

.abj-book .abj-book-hero.fixed .img.editionphoto > a {
  width: 32px;
}

.abj-book .abj-book-hero.fixed .bookeditbadge > h1 {
  margin: 0;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The page under the hero: the legacy blocks as section cards. */

.abj-book .abj-card {
  float: none;
}

body:has(.abj-book) .mactionlist {
  display: none !important;
}

/* One rhythm under the hero: 24px between sections on phones, 32px from 1024px, and the same from the
   hero to the top ad, from the ad to the first section and from the last section to the footer. */
.abj-book .mobile-view > .abjjad-ad {
  margin: 24px 0 0 !important;
}

.abj-book .abj-book-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

/* Legacy clearfix pseudo-elements would be flex items here, each adding a gap. */
.abj-book .abj-book-sections::before,
.abj-book .abj-book-sections::after,
.abj-book .sectionscontainer::before,
.abj-book .sectionscontainer::after,
.abj-book .bookextras::before,
.abj-book .bookextras::after {
  content: none !important;
  display: none !important;
}

/* The section cards' legacy bottom margins would stack on the gap. */
.abj-book .sectionscontainer > *,
.abj-book .abj-book-sections > *:not(.sectionscontainer) {
  margin-bottom: 0 !important;
}

.abj-book .sectionmenu.abj-book-reviews-head {
  position: static !important;
  display: block !important;
  margin: 0;
  padding: 20px 20px 0;
  border: 1px solid var(--abj-border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--abj-surface);
  box-shadow: none;
}

.abj-book .sectionmenu.abj-book-reviews-head + .cushion {
  display: none !important;
}

/* ServerTabs marks the list .short on phones, which the legacy styles hide; the heading and its count are
   the design's "مراجعات القرّاء (N)" at every width, so the list's own "مراجعات" h3 is not shown twice. */
.abj-book .sectionmenu.abj-book-reviews-head .servertabs {
  display: block !important;
}

.abj-book #Reviews h3.msection {
  display: none;
}

.abj-book .sectionmenu .servertabs {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.abj-book .sectionmenu .servertabs li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none !important;
}

.abj-book .sectionmenu .servertabs h2 {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg) !important;
}

.abj-book .sectionmenu .servertabs em {
  font-style: normal;
  font-size: 14px;
  color: var(--abj-fg-muted);
}

.abj-book .sectionscontainer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Under the reviews heading the container continues its card; the Sticky behaviour may put a .cushion
   between them. */
.abj-book .sectionmenu.abj-book-reviews-head ~ .sectionscontainer {
  margin-top: -24px;
}

.abj-book .abj-book-sections > section,
.abj-book .sectionscontainer > section {
  float: none !important;
  width: auto !important;
  margin: 0;
}

.abj-book .profilesections.books {
  float: none;
  width: auto !important;
  margin: 0;
  padding: 8px 20px 20px !important;
  border: 1px solid var(--abj-border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: var(--abj-surface);
  box-shadow: var(--abj-shadow-e1);
}

.abj-book .bookextras {
  display: flex;
  flex-direction: column;
  gap: 24px;
  float: none;
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

.abj-book .bookextras > section,
.abj-book .bookextras > div {
  float: none !important;
  width: auto !important;
  margin: 0;
}

.abj-book .bookextras > div:empty {
  display: none;
}

/* About the author (Book/DisplayTemplates/AuthorBadge.cshtml), "Book Page Light": the avatar beside the
   eyebrow and the name, the bio full width under them, "تصفح كتب المؤلف" at the bottom, inline-end. The
   badge's wrappers (and the bio's <p>, which also holds the name) are display: contents so their parts join
   the card's own grid. */
.abj-book section.abj-book-author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "img eyebrow"
    "img name"
    "text text"
    "more more"
    "edit edit"
    "btn btn";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px !important;
  text-align: start;
}

.abj-book .abj-book-author .aboutauthor,
.abj-book .abj-book-author .authorbadge,
.abj-book .abj-book-author .authorbadge > p {
  display: contents;
}

.abj-book .abj-book-author > h6 {
  grid-area: eyebrow;
  align-self: end;
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--abj-brand-fg);
}

.abj-book .abj-book-author .authorbadge > a.img {
  grid-area: img;
  position: static;
  float: none;
  display: block;
  width: 56px !important;
  height: 56px !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--abj-surface-3);
}

.abj-book .abj-book-author .authorbadge > a.img img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
}

.abj-book .abj-book-author .authorbadge > p > a:first-child {
  grid-area: name;
  align-self: start;
  display: block;
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--abj-fg) !important;
  text-decoration: none;
}

.abj-book .abj-book-author .authorbadge > p > a:first-child:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-book .abj-book-author .authorbadge .content {
  grid-area: text;
  margin-top: 12px;
  font-family: var(--abj-font);
  font-size: 15px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-book .abj-book-author:not(.is-expanded) .authorbadge .content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.abj-book .abj-book-author .authorbadge .content > br:first-child,
.abj-book .abj-book-author .authorbadge .a.h,
.abj-book .abj-book-author .authorbadge .year {
  display: none;
}

.abj-book .abj-book-author__more {
  grid-area: more;
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--abj-brand-fg);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.abj-book .abj-book-author__more[hidden] {
  display: none;
}

.abj-book .abj-book-author .authorbadge .btnfollow {
  display: none;
}

/* Editors' "عدل معلومات المؤلف": a caption link under the bio, without the legacy icon box. */
.abj-book .abj-book-author .authorbadge > .editlink {
  grid-area: edit;
  justify-self: start;
  position: static;
  float: none;
  margin: 4px 0 0;
  padding: 0;
  background: none !important;
  font-size: 13px;
  color: var(--abj-fg-muted) !important;
}

.abj-book .abj-book-author .authorbadge > .editlink::before {
  display: none !important;
}

.abj-book .abj-book-author__links {
  grid-area: btn;
  justify-self: end;
  display: flex;
  margin: 12px 0 0;
}

.abj-book .abj-book-author__links .abj-btn {
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

@media (min-width: 768px) {
  .abj-book section.abj-book-author {
    padding: 24px 28px !important;
  }
}

@media (min-width: 1024px) {
  .abj-book .abj-book-sections {
    gap: 32px;
    padding: 32px 0;
  }

  .abj-book .sectionscontainer {
    gap: 32px;
  }

  .abj-book .sectionmenu.abj-book-reviews-head ~ .sectionscontainer {
    margin-top: -32px;
  }

  .abj-book .bookextras {
    gap: 32px;
  }

  .abj-book .mobile-view > .abjjad-ad {
    margin-top: 32px !important;
  }

  .abj-book .sectionmenu.abj-book-reviews-head {
    padding: 32px 32px 0;
  }

  .abj-book .profilesections.books {
    padding: 8px 32px 32px !important;
  }

}

/* FAQ (Book/_BookFaq.cshtml). The accordion only collapses once the script marked it .is-enhanced. */

.abj-theme .abj-faq h2 {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-theme .abj-section-subtitle {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--abj-fg-2);
}

.abj-theme .abj-faq .abj-section-subtitle {
  margin-bottom: 12px;
}

.abj-theme .abj-faq h3 {
  margin: 0;
  border-top: 1px solid var(--abj-border);
  font-family: var(--abj-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--abj-fg);
}

.abj-theme .abj-faq .abj-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 16px 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.abj-theme .abj-faq .abj-faq__toggle svg {
  flex-shrink: 0;
  color: var(--abj-fg-muted);
  transition: transform 0.2s;
}

.abj-theme .abj-faq h3.is-open .abj-faq__toggle svg {
  transform: rotate(180deg);
}

.abj-theme .abj-faq p {
  margin: 0;
  padding: 0 0 16px;
  font-family: var(--abj-font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-theme .abj-faq.is-enhanced h3:not(.is-open) + p {
  display: none;
}

.abj-theme .abj-faq.is-enhanced:not(.is-expanded) h3:nth-of-type(n + 6),
.abj-theme .abj-faq.is-enhanced:not(.is-expanded) p:nth-of-type(n + 6) {
  display: none;
}

.abj-theme .abj-faq .abj-faq__more {
  display: block;
  margin: 16px auto 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-brand-fg);
  cursor: pointer;
}

.abj-theme .abj-faq .abj-faq__more[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .abj-faq .abj-faq__toggle svg {
    transition: none;
  }
}

/* "Readers also read", other authors and the category tiles (Book/_RelatedSections.cshtml). */

.abj-theme .abj-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 16px;
}

.abj-theme .abj-section-head h2 {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-theme .abj-section-head--center {
  justify-content: center;
  text-align: center;
}

.abj-theme .abj-see-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-brand-fg) !important;
  text-decoration: none;
  white-space: nowrap;
}

.abj-theme .abj-see-more:hover {
  text-decoration: underline;
}

.abj-theme .abj-rail__frame {
  position: relative;
}

.abj-theme .abj-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 12px) / 2.4);
  gap: 12px;
  margin: 0;
  padding: 4px 0 8px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.abj-theme .abj-rail__list::-webkit-scrollbar {
  display: none;
}

.abj-theme .abj-rail__list > li {
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

.abj-theme .abj-rail__arrow {
  position: absolute;
  top: 35%;
  z-index: 2;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-fg);
  box-shadow: var(--abj-shadow-e2);
  cursor: pointer;
}

.abj-theme .abj-rail__arrow--prev {
  right: -12px;
}

.abj-theme .abj-rail__arrow--next {
  left: -12px;
}

.abj-theme .abj-rail__arrow:hover {
  color: var(--abj-brand-fg);
  border-color: var(--abj-brand);
}

@media (min-width: 640px) {
  .abj-theme .abj-rail__list {
    grid-auto-columns: calc((100% - 3 * 16px) / 3.4);
    gap: 16px;
  }
}

@media (min-width: 768px) {
  .abj-theme .abj-rail__list {
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-rail__list {
    grid-auto-columns: calc((100% - 4 * 20px) / 5);
  }

  .abj-theme .abj-rail__arrow {
    display: grid;
  }
}

.abj-theme .abj-rail-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.abj-theme .abj-rail-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--abj-surface-3);
  box-shadow: var(--abj-shadow-e2);
}

.abj-theme .abj-rail-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abj-theme .abj-free {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-family: var(--abj-font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.abj-theme .abj-rail-card__title {
  margin: 0 0 2px;
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.abj-theme .abj-rail-card__title a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--abj-fg) !important;
  text-decoration: none;
}

.abj-theme .abj-rail-card__title a:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-theme .abj-rail-card__author {
  margin: 0 0 6px;
  overflow: hidden;
  font-family: var(--abj-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.abj-theme .abj-rail-card__author a {
  color: var(--abj-fg-2) !important;
  text-decoration: none;
}

.abj-theme .abj-rail-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--abj-fg-muted);
}

.abj-theme .abj-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--abj-fg);
  font-variant-numeric: tabular-nums;
}

.abj-theme .abj-rating::before {
  content: "\2605";
  font-size: 15px;
  line-height: 1;
  color: var(--abj-brand);
}

.abj-theme .abj-rail-card__formats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.abj-theme .abj-rail-card__cta {
  width: 100%;
  margin-top: auto;
  justify-content: center;
  text-align: center;
}

/* Other authors: white cards on the canvas. */

.abj-theme .abj-authors .abj-rail__list {
  grid-auto-columns: calc((100% - 2 * 12px) / 2.4);
}

@media (min-width: 640px) {
  .abj-theme .abj-authors .abj-rail__list {
    grid-auto-columns: calc((100% - 3 * 16px) / 3.4);
  }
}

@media (min-width: 768px) {
  .abj-theme .abj-authors .abj-rail__list {
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-authors .abj-rail__list {
    grid-auto-columns: calc((100% - 5 * 20px) / 6);
  }
}

.abj-theme .abj-author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 20px 12px;
  border: 1px solid var(--abj-border);
  border-radius: 16px;
  background: var(--abj-surface);
  box-shadow: var(--abj-shadow-e1);
  text-align: center;
}

.abj-theme .abj-author-card__photo {
  display: block;
  width: 112px;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--abj-surface-3);
}

.abj-theme .abj-author-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abj-theme .abj-author-card__name {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.abj-theme .abj-author-card__name a {
  color: var(--abj-fg) !important;
  text-decoration: none;
}

.abj-theme .abj-author-card__name a:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-theme .abj-author-card__meta {
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--abj-fg-muted);
  font-variant-numeric: tabular-nums;
}

.abj-theme .abj-author-card__cta {
  margin-top: auto;
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
}

/* Category tiles. */

.abj-theme .abj-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .abj-theme .abj-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .abj-theme .abj-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
  }
}

.abj-theme .abj-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 160px;
  margin: 0;
  padding: 24px 12px;
  border-radius: 16px;
  background: var(--abj-tile);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.abj-theme .abj-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--abj-shadow-e2);
}

.abj-theme .abj-tile__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.7);
  color: var(--abj-brand);
}

.abj-theme .abj-tile__name {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.abj-theme .abj-tile__name a {
  color: var(--abj-fg) !important;
  text-decoration: none;
}

/* The whole tile is the link's hit area. */
.abj-theme .abj-tile__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.abj-theme .abj-tile:focus-within {
  outline: 2px solid var(--abj-brand-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .abj-tile,
  .abj-theme .abj-tile:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- Ratings block (Book/_BookRatings.cshtml) ---------- */

.abj-book .abj-book-ratings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.abj-book .abj-book-ratings__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}


.abj-book .abj-book-ratings__average {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
}

.abj-book .abj-book-ratings__value {
  font-family: var(--abj-font-ui);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--abj-fg);
  font-variant-numeric: tabular-nums;
}

.abj-theme .abj-stars {
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--abj-border);
}

.abj-theme .abj-stars::before {
  content: "\2605\2605\2605\2605\2605";
}

/* The filled row is clipped from the start edge, so in RTL it fills from the right like the reading order. */
.abj-theme .abj-stars::after {
  content: "\2605\2605\2605\2605\2605";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--abj-stars, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--abj-brand);
}

.abj-book .abj-book-ratings__count {
  font-size: 13px;
  color: var(--abj-fg-muted);
}

.abj-book .abj-book-ratings__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abj-book .abj-book-ratings__bars li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--abj-fg-2);
  font-variant-numeric: tabular-nums;
}

.abj-book .abj-book-ratings__star::after {
  content: " \2605";
  color: var(--abj-brand);
}

.abj-book .abj-book-ratings__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--abj-surface-3);
}

.abj-book .abj-book-ratings__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--abj-brand);
}

.abj-book .abj-book-ratings__share {
  text-align: end;
  color: var(--abj-fg-muted);
}

.abj-book .abj-book-ratings__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--abj-brand-soft);
}

.abj-book .abj-book-ratings__rate-label {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--abj-brand-fg);
}

.abj-book .abj-book-ratings .starrate {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  padding: 4px 0;
  font-size: 30px;
  line-height: 1;
}

.abj-book .abj-book-ratings .starrate .star {
  display: inline-block;
  color: var(--abj-brand);
}

/* Plain star characters instead of the icon font's outline/filled glyphs, like every other star on the page. */
.abj-book .abj-book-ratings .starrate .star::before {
  content: "\2606";
  margin: 0;
  font-family: var(--abj-font-ui);
  color: var(--abj-brand);
}

.abj-book .abj-book-ratings .starrate .star.full::before {
  content: "\2605";
}

.abj-book .abj-book-ratings__note {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--abj-fg-2);
}

/* .btnreview carries the legacy icon button look; this one is the design's full-width pill. */
.abj-book .abj-book-ratings a.abj-book-ratings__review {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 48px;
  margin: 0;
  overflow: visible;
  font-size: 16px;
  text-indent: 0;
  color: var(--abj-on-brand) !important;
}

.abj-book .abj-book-ratings a.abj-book-ratings__review::before {
  display: none;
}


/* ---------- Reviews and their comments (Book/DisplayTemplates/ReviewBadge.cshtml, Personal/_ReviewComments) ---------- */

.abj-book .profilesections .rowlist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.abj-book .profilesections .rowlist > li {
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
}

.abj-book .profilesections .storybadge.indent {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--abj-border);
  border-radius: 16px;
  background: var(--abj-surface);
  box-shadow: var(--abj-shadow-e1);
}

.abj-book .profilesections .storybadge > [itemprop="itemReviewed"],
.abj-book .profilesections .storybadge > span.h {
  display: none;
}

.abj-book .profilesections .storybadge .userimg {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  float: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 9999px;
  background: var(--abj-surface-3);
}

.abj-book .profilesections .storybadge .userimg img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abj-book .profilesections .storybadge > h5.name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.abj-book .profilesections .storybadge > h5.name a {
  color: var(--abj-fg);
  text-decoration: none;
}

.abj-book .profilesections .storybadge > h5.name a:hover {
  color: var(--abj-brand-fg);
}

/* "Book Page Light": the stars under the name, the date at the card's top inline-end. */
.abj-book .profilesections .storybadge > [itemprop="reviewRating"],
.abj-book .profilesections .storybadge > .rating {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.abj-book .profilesections .storybadge.indent > h5.name {
  padding-inline-end: 96px;
}

.abj-book .profilesections .storybadge .rating {
  display: inline-flex;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

.abj-book .profilesections .storybadge .rating .star::before {
  content: "\2605";
  margin: 0;
  font-family: var(--abj-font-ui);
  color: var(--abj-border);
}

.abj-book .profilesections .storybadge .rating .star.full::before {
  color: var(--abj-brand);
}

.abj-book .profilesections .storybadge .content.review {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--abj-font);
  font-size: 15px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-book .profilesections .storybadge .content.review .guts.ar {
  line-height: 1.9;
}

/* "عرض المزيد" on a long review (CurtainBox in ui.web.js). The site bundle clamps the article at 170px but its
   .guts at 185px and pulls the chevron up under the clamp, so 5px of it showed; and expanding sets .guts to a
   pixel height measured on load, before the web font and this layout, so a long review stayed cut. Here the
   clamp is on .guts alone (CurtainBox reads 170px back as its collapsed height), the chevron sits whole on an
   opaque fade over the last lines, and the open state sizes to the text whatever was measured. */
.abj-book .profilesections .storybadge .content.review {
  max-height: none;
  padding-bottom: 0;
}

.abj-book .profilesections .storybadge .content.review .guts {
  height: 170px;
}

.abj-book .profilesections .storybadge .content.review.expanded .guts {
  height: auto !important;
}

.abj-book .profilesections .storybadge .content.review .h {
  position: relative;
  top: auto;
  height: 56px;
  margin-top: -56px;
  box-shadow: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--abj-surface) 70%);
}

.abj-book .profilesections .storybadge .content.review .h::before {
  margin-top: 34px;
}

.abj-book .profilesections .storybadge .content.review.expanded .h {
  height: auto;
  margin-top: 0;
  background: none;
}

.abj-book .profilesections .storybadge .content.review.expanded .h::before {
  margin-top: 8px;
}

.abj-book .profilesections .storybadge .actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  max-width: none;
  padding-top: 12px;
  border-top: 1px solid var(--abj-border);
  font-size: 13px;
  color: var(--abj-fg-muted);
}

.abj-book .profilesections .storybadge .actions .r {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
}

.abj-book .profilesections .storybadge .actions .fb,
.abj-book .profilesections .storybadge .actions .tw {
  display: none !important;
}

.abj-book .profilesections .storybadge .actions .r > .time {
  position: absolute;
  top: 18px;
  inset-inline-end: 16px;
  margin: 0;
}

/* The trailing "." after the time in ReviewBadge. */
.abj-book .profilesections .storybadge .actions .r {
  font-size: 0;
}

.abj-book .profilesections .storybadge .actions a.lk.abj-review-share {
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--abj-border);
  background: var(--abj-surface);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--abj-fg-2);
  text-decoration: none;
}

.abj-book .profilesections .storybadge .actions a.lk.abj-review-share::before {
  display: none;
}

.abj-book .profilesections .storybadge .actions .fb,
.abj-book .profilesections .storybadge .actions .tw,
.abj-book .profilesections .storybadge .actions .lk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--abj-surface-2);
  color: var(--abj-fg-2);
  font-size: 0;
}

.abj-book .profilesections .storybadge .actions .fb::before,
.abj-book .profilesections .storybadge .actions .tw::before,
.abj-book .profilesections .storybadge .actions .lk::before {
  margin: 0;
  font-size: 15px;
}

.abj-book .profilesections .storybadge .actions .fb:hover,
.abj-book .profilesections .storybadge .actions .tw:hover,
.abj-book .profilesections .storybadge .actions .lk:hover {
  background: var(--abj-brand-soft);
  color: var(--abj-brand-fg);
}

.abj-book .profilesections .storybadge .actions .time,
.abj-book .profilesections .storybadge .actions .edit {
  margin-inline-start: 6px;
  font-size: 13px;
  color: var(--abj-fg-muted);
}

.abj-book .profilesections .storybadge .actions [data-behavior~="AgreeBtn"] {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
}

.abj-book .profilesections .storybadge .actions .agree {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto;
  color: var(--abj-fg-2) !important;
}

/* The legacy thumbs-up is the abjjadicons glyph "O", which at this size reads like a stray hamza before
   "أوافق"; a masked lucide thumbs-up takes its place and follows the text colour. */
.abj-book .profilesections .storybadge .actions .agree::before {
  content: "" !important;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  background: currentColor !important;
  color: var(--abj-fg-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abj-book .profilesections .storybadge .actions .agree.toggle::before {
  color: var(--abj-brand);
}

.abj-book .profilesections .storybadge .actions .agreed {
  margin: 0;
  color: var(--abj-fg-2);
  text-decoration: none;
}

/* .comments stays the behaviour's root (LoadOnce,ExpandList toggle it); display: contents lets its label sit
   in the actions row and the loaded thread take the full width under it. */
.abj-book .profilesections .storybadge .comments {
  display: contents;
}

.abj-book .profilesections .storybadge .comments .comment.h {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-fg-2);
  font-family: var(--abj-font-ui);
  font-weight: 600;
  cursor: pointer;
}

/* Open thread (ExpandList's toggle class): the pill fills, as in the design. */
.abj-book .profilesections .storybadge .comments.toggle .comment.h {
  border-color: var(--abj-brand-strong);
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

.abj-book .profilesections .commentsbox__less {
  display: block;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--abj-brand-fg);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.abj-book .profilesections .storybadge .comments .guts {
  flex: 1 1 100%;
  order: 10;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--abj-fg-2);
}

.abj-book .profilesections .commentsbox {
  padding: 16px;
  border: 1px solid var(--abj-border);
  border-radius: 12px;
  background: var(--abj-surface);
}

.abj-book .profilesections .commentsbox::before {
  content: "التعليقات";
  display: block;
  margin-bottom: 8px;
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--abj-fg);
}

.abj-book .profilesections .commentsbox .rowlist {
  gap: 0;
  margin: 0;
}

.abj-book .profilesections .commentsbox .rowlist > li {
  padding: 12px 0;
  border-bottom: 1px solid var(--abj-border) !important;
}

.abj-book .profilesections .useractionbadge.ucomment {
  position: relative;
  margin: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 0;
}

.abj-book .profilesections .useractionbadge.ucomment .img {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 36px;
  height: 36px;
  margin: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--abj-surface-3);
}

.abj-book .profilesections .useractionbadge.ucomment .img img {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abj-book .profilesections .useractionbadge.ucomment .name {
  grid-column: 2;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-fg);
}

.abj-book .profilesections .useractionbadge.ucomment .commenttime {
  grid-column: 3;
  grid-row: 1;
  font-size: 13px;
  color: var(--abj-fg-muted);
}

.abj-book .profilesections .useractionbadge.ucomment [itemprop="commentText"] {
  grid-column: 2 / -1;
  font-size: 14px;
  line-height: 1.8;
  color: var(--abj-fg-2);
}

.abj-book .profilesections .useractionbadge.ucomment .tail {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

.abj-book .profilesections .commentpane {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.abj-book .profilesections .commentpane textarea.comment {
  flex: 1 1 200px;
  overflow: hidden;
  resize: none;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--abj-border-strong);
  border-radius: 12px;
  background: var(--abj-surface);
  font-family: var(--abj-font);
  font-size: 14px;
  color: var(--abj-fg);
}

.abj-book .profilesections .commentpane .submit {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.abj-book .profilesections .paged > .actionarea {
  margin: 16px 0 0;
  text-align: start;
}

.abj-book .profilesections .actionarea .btnreview {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 20px;
  overflow: visible;
  border: 1px solid var(--abj-brand);
  border-radius: 9999px;
  background: var(--abj-surface);
  color: var(--abj-brand-fg);
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.abj-book .profilesections .actionarea .btnreview:hover {
  background: var(--abj-brand-soft);
}

.abj-book .profilesections .paged .morepages.scaled {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 44px;
  margin: 16px 0 0 !important;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  box-shadow: none;
  color: var(--abj-brand-fg);
  font-family: var(--abj-font-ui);
  font-size: 14px;
}

.abj-book .profilesections .paged .morepages.scaled::after {
  display: none;
}

@media (min-width: 1024px) {
  .abj-book .profilesections .storybadge.indent {
    padding: 20px 24px;
  }
}

/* ---------- App banners (Book/_BookAppPromo.cshtml): pocket, slim and big ---------- */

.abj-book .abj-book-app {
  --abj-banner: #fdf1e7;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 24px var(--abj-gutter);
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--abj-banner);
  text-align: center;
}

.abj-book .abj-book-app__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.abj-book .abj-book-app__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-book .abj-book-app__text {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-book .abj-book-app__stores-label {
  margin: 4px 0 0;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--abj-brand-fg);
}

.abj-book .abj-book-app--pocket {
  --abj-banner: #fdf5ee;
}

/* The design's illustration is opaque on a near-white ground. Multiply melts that ground into the banner, and
   the edge mask hides the faint box multiply still leaves where the ground meets the banner colour.
   The width must stay fixed: the desktop grid sizes the art's column from its content, and with a percentage
   width an unloaded lazy image gives that column 0px, so it never scrolls into view and never loads. */
.abj-book .abj-book-app__art {
  --abj-art-fade: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 94%, transparent);
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--abj-art-fade);
  -webkit-mask-composite: source-in;
  mask-image: var(--abj-art-fade);
  mask-composite: intersect;
}

.abj-book .abj-book-app__cta {
  min-height: 44px;
}

@media (min-width: 768px) {
  .abj-book .abj-book-app {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    gap: 32px;
    padding: 32px 40px;
    text-align: start;
  }

  .abj-book .abj-book-app__copy {
    align-items: flex-start;
  }

  .abj-book .abj-stores {
    justify-content: flex-start;
  }

  .abj-book .abj-book-app--pocket {
    padding: 24px 40px;
  }

  .abj-book .abj-book-app__art {
    width: 340px;
  }
}

/* Store buttons (Shared/Book/_AppStoreButton.cshtml). */

.abj-theme .abj-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.abj-theme a.abj-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 168px;
  height: 48px;
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid var(--abj-border);
  border-radius: 12px;
  background: var(--abj-surface);
  color: var(--abj-fg);
  text-decoration: none;
  text-indent: 0;
}

.abj-theme a.abj-store:hover {
  border-color: var(--abj-fg);
}

.abj-theme .abj-store__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.abj-theme .abj-store__icon svg {
  width: 20px;
  height: 20px;
}

.abj-theme .abj-store__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

.abj-theme .abj-store__top {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 9px;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--abj-fg-muted);
}

.abj-theme .abj-store__name {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Three across a phone leaves each button about 100px, too narrow for icon and name side by side, so the
   icon goes above the name. Under 96px each (phones narrower than ~340px) they wrap two and one. */
@media (max-width: 639px) {
  .abj-theme .abj-stores {
    width: 100%;
  }

  .abj-theme a.abj-store {
    flex-direction: column;
    gap: 2px;
    height: auto;
    min-height: 52px;
    min-width: 96px;
    max-width: none;
    padding: 6px 4px;
  }

  .abj-theme .abj-store__top {
    display: none;
  }

  .abj-theme .abj-store__text {
    align-items: center;
    text-align: center;
  }

  .abj-theme .abj-store__icon svg {
    width: 16px;
    height: 16px;
  }

  .abj-theme .abj-store__name {
    font-size: 12px;
  }

}

@media (min-width: 640px) {
  .abj-theme a.abj-store {
    padding: 0 12px;
  }

  .abj-theme .abj-store__name {
    font-size: 14px;
  }
}

/* The pocket banner's compact pills: icon and store name on one line, at every width. Kept after the rules
   above, which they override at the same specificity. */
.abj-theme .abj-stores--compact {
  gap: 8px;
}

.abj-theme a.abj-store--compact {
  flex: 0 0 auto;
  max-width: none;
  height: 36px;
  padding: 0 12px;
  gap: 8px;
  border-radius: 8px;
}

.abj-theme a.abj-store--compact .abj-store__icon svg {
  width: 16px;
  height: 16px;
}

.abj-theme a.abj-store--compact .abj-store__name {
  font-size: 13px;
}

@media (max-width: 639px) {
  .abj-theme a.abj-store--compact {
    flex: 1 1 0;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    height: 36px;
    padding: 0 6px;
  }

  .abj-theme a.abj-store--compact .abj-store__name {
    font-size: 12px;
  }
}


/* ---------- AT-2998 v2 book page: light hero, ratings card, quotes, empty states, plain tiles ---------- */

/* "Book Page Light": the hero is a light band tinted by the book's own cover (the hero <img>'s URL, so no
   second fetch): blurred, saturated and faded behind the content. The dark band only stays for the sticky
   (.fixed) bar. */
.abj-book .abj-book-hero:not(.fixed) {
  --abj-hero-band: #fbf6f1;
  --abj-hero-scrim: rgb(251 246 241 / 0.7);
  background: var(--abj-hero-band);
  color: var(--abj-fg);
}

.abj-book .abj-book-hero:not(.fixed) .abj-hero__backdrop {
  inset: -100px -117px;
  filter: blur(60px) saturate(1.3);
  opacity: 0.4;
  transform: none;
  pointer-events: none;
}

/* A dark or saturated cover takes the tint below 4.5:1 for the secondary and orange text that sits on the
   band itself, so a 70% band-coloured scrim covers where that text is: the crumbs' strip at the top and, on
   phones, everything under the cover; from 1024px everything beside it (the cover column is 208px at the
   container's inline-start). Together with the darker text below every cover measured passes. */
.abj-book .abj-book-hero:not(.fixed)::before {
  display: block;
  opacity: 1;
  background:
    linear-gradient(to bottom, var(--abj-hero-scrim) 0, var(--abj-hero-scrim) 56px, transparent 88px, transparent 380px, var(--abj-hero-scrim) 420px);
}

@media (min-width: 1024px) {
  .abj-book .abj-book-hero:not(.fixed)::before {
    background:
      linear-gradient(to bottom, var(--abj-hero-scrim) 0, var(--abj-hero-scrim) 64px, transparent 64px),
      linear-gradient(to left, transparent calc(max(0px, 50% - 622px) + var(--abj-gutter) + 216px), var(--abj-hero-scrim) calc(max(0px, 50% - 622px) + var(--abj-gutter) + 272px));
  }
}

.abj-book .abj-book-hero:not(.fixed) .abj-crumbs,
.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .author,
.abj-book .abj-book-hero:not(.fixed) .incols.stats,
.abj-book .abj-book-hero:not(.fixed) .bfree {
  --abj-fg-2: #4b5563;
  --abj-fg-muted: #4b5563;
  --abj-brand-fg: #a03e0e;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .author a,
.abj-book .abj-book-hero:not(.fixed) .bfree {
  color: #a03e0e !important;
}

.abj-book .abj-book-hero:not(.fixed) .abj-hero__inner {
  padding: 24px var(--abj-gutter) 32px;
}

.abj-book .abj-book-hero:not(.fixed) .abj-crumbs {
  color: var(--abj-fg-muted);
}

.abj-book .abj-book-hero:not(.fixed) .abj-crumbs a {
  color: var(--abj-fg-2);
}

.abj-book .abj-book-hero:not(.fixed) .abj-crumbs li + li::before {
  color: var(--abj-fg-muted);
}

.abj-book .abj-book-hero:not(.fixed) .thebadge.bookbadge {
  color: var(--abj-fg);
}

.abj-book .abj-book-hero:not(.fixed) .thebadge .img.editionphoto img {
  background: var(--abj-surface-3);
  box-shadow: var(--abj-shadow-e2);
}

.abj-book .abj-book-hero:not(.fixed) .abj-pill {
  border-color: rgb(233 106 44 / 0.35);
  background: var(--abj-brand-soft);
  color: var(--abj-brand-fg);
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > h1 {
  color: var(--abj-fg) !important;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .author {
  color: var(--abj-fg-2);
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .author a {
  color: var(--abj-brand-fg) !important;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats {
    border-color: var(--abj-border);
    background: var(--abj-surface);
  }
}

.abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats .col,
.abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats .ratingcount,
.abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats .totalcommunity {
  color: var(--abj-fg-2);
}

.abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats .number {
  color: var(--abj-fg);
}

/* The read button lives in the white card at every width; the copy under the cover only serves the sticky
   bar. */
.abj-book .abj-book-hero:not(.fixed) .thebadge .btexp.oim {
  display: none;
}

/* AT-3215: "نبذة" and the chips sit on the hero band itself, with no card behind them. */
.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .description[data-behavior] {
  margin-top: 24px !important;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .description:not([data-behavior]) {
  padding-top: 16px !important;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .summary-header {
  color: var(--abj-fg) !important;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .description .content {
  color: var(--abj-fg-2);
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .description .a.h {
  color: var(--abj-brand-fg) !important;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .book-category-genre .tag {
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgb(233 106 44 / 0.3) !important;
  background: #fff8f3 !important;
  color: var(--abj-brand-fg) !important;
  font-size: 13px;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .book-category-genre .tag-main {
  border-color: var(--abj-brand) !important;
  background: var(--abj-brand-soft) !important;
  font-weight: 600;
}

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .about .rowlist li,
.abj-book .abj-book-hero:not(.fixed) .bookeditbadge .about .rowlist a {
  color: var(--abj-fg-2) !important;
}



.abj-book .abj-book-hero:not(.fixed) .btexp .btnun {
  border: 1px solid var(--abj-brand) !important;
  background: var(--abj-surface) !important;
  color: var(--abj-brand-fg) !important;
}

.abj-book .abj-book-hero:not(.fixed) .btexp .bfree {
  color: var(--abj-brand-fg);
}

@media (min-width: 1024px) {
  .abj-book .abj-book-hero:not(.fixed) .abj-hero__inner {
    padding-top: 32px;
  }
}

/* "تقييمات القرّاء": the title, score and rate pill in one column, the distribution, then the add-review call. */
.abj-book .abj-book-ratings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "avg"
    "rate"
    "bars"
    "cta";
  align-items: center;
  gap: 16px;
}

.abj-book .abj-book-ratings__title { grid-area: title; }
.abj-book .abj-book-ratings__average { grid-area: avg; }
.abj-book .abj-book-ratings__bars { grid-area: bars; }
.abj-book .abj-book-ratings__rate { grid-area: rate; }
.abj-book .abj-book-ratings__cta { grid-area: cta; }

.abj-book .abj-book-ratings .abj-book-ratings__average {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.abj-book .abj-book-ratings__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abj-book .abj-book-ratings__summary .abj-stars {
  font-size: 18px;
}

.abj-book .abj-book-ratings .abj-book-ratings__rate {
  flex-direction: row;
  justify-content: space-between;
  align-self: start;
  gap: 12px;
  padding: 6px 14px;
}

.abj-book .abj-book-ratings .abj-book-ratings__rate .starrate {
  font-size: 22px;
  gap: 4px;
}

.abj-book .abj-book-ratings__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 1024px) {
  .abj-book .abj-book-ratings {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) 260px;
    grid-template-areas:
      "title bars cta"
      "avg bars cta"
      "rate bars cta";
    column-gap: 48px;
    row-gap: 12px;
  }

  .abj-book .abj-book-ratings__title {
    align-self: end;
  }

  .abj-book .abj-book-ratings__note {
    text-align: start;
  }
}

/* "الإقتباسات": the top quote (Book/_BookTopQuote.cshtml) or the empty state. */
.abj-book .abj-book-quotes .quotes {
  margin: 0;
  padding: 0;
  border: 0;
}

.abj-book .abj-book-quotes h2.summary-header,
.abj-book .abj-book-quotes__title {
  margin: 0 0 16px;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--abj-fg);
}

.abj-book .abj-book-quotes h2.summary-header a {
  color: var(--abj-fg);
  text-decoration: none;
}

.abj-book .abj-book-quotes h2.summary-header a:hover {
  color: var(--abj-brand-fg);
}

/* "Book Page Light": the reviews and the quotes are separate cards on the page background under their
   heading, each list ending in a plain "عرض المزيد" link. With none, the empty state keeps its card. */
.abj-book .abj-book-quotes.abj-card:not(.is-empty),
.abj-book .abj-book-sections:has(#pagereviews .rowlist > li) .sectionmenu.abj-book-reviews-head,
.abj-book .abj-book-sections:has(#pagereviews .rowlist > li) .profilesections.books {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.abj-book .profilesections.books .rowlist {
  gap: 16px;
}

.abj-book .abj-book-sections:has(#pagereviews .rowlist > li) .sectionmenu.abj-book-reviews-head ~ .sectionscontainer {
  margin-top: -8px;
}

.abj-book .abj-book-quotes .quotes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.abj-book .abj-book-quotes h2.summary-header {
  margin: 0;
}

/* A quote card: the initial, the name and the date, the text, then the agree pill and a closing mark. The
   legacy blockquote and contributor-line glyphs (icon font ::before/::after) are dropped. */
.abj-book .abj-book-quotes .storybadge.abj-quote-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--abj-border);
  border-radius: 16px;
  background: var(--abj-surface);
  box-shadow: var(--abj-shadow-e1);
}

.abj-book .abj-book-quotes .abj-quote-card__avatar {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--abj-brand-soft);
  color: var(--abj-brand-fg);
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 700;
}

.abj-book .abj-book-quotes a.abj-quote-card__time {
  grid-column: 3;
  grid-row: 1;
  font-size: 13px;
  color: var(--abj-fg-muted) !important;
  text-decoration: none;
}

.abj-book .abj-book-quotes a.abj-quote-card__time:hover {
  text-decoration: underline;
}

.abj-book .abj-book-quotes .abj-quote-card .content.quote {
  grid-column: 1 / -1;
  max-height: none;
  margin: 0;
  padding: 0;
}

.abj-book .abj-book-quotes .abj-quote-card blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--abj-font);
  font-size: 15px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-book .abj-book-quotes .abj-quote-card blockquote::before,
.abj-book .abj-book-quotes .abj-quote-card blockquote::after,
.abj-book .abj-book-quotes .quotename::before,
.abj-book .abj-book-quotes .quotename a::before,
.abj-book .abj-book-quotes .quotename a::after,
.abj-book .abj-book-quotes .abj-quotes-all::before,
.abj-book .abj-book-quotes .abj-quotes-all::after {
  content: none !important;
  display: none !important;
}

.abj-book .abj-book-quotes .quotename {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 15px;
  font-weight: 600;
}

.abj-book .abj-book-quotes .quotename a {
  color: var(--abj-fg) !important;
  text-decoration: none;
  background: none !important;
}

.abj-book .abj-book-quotes .quotename a:hover {
  color: var(--abj-brand-fg) !important;
}

.abj-book .abj-book-quotes .abj-quote-card__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--abj-border);
  font-size: 13px;
  color: var(--abj-fg-2);
}

.abj-book .abj-book-quotes .abj-quote-card__foot [data-behavior~="AgreeBtn"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
}

.abj-book .abj-book-quotes .abj-quote-card__foot .agree {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  width: auto;
  color: var(--abj-fg-2) !important;
}

.abj-book .abj-book-quotes .abj-quote-card__foot .agree::before {
  content: "" !important;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10v12'/%3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abj-book .abj-book-quotes .abj-quote-card__foot .agree.toggle::before {
  color: var(--abj-brand);
}

.abj-book .abj-book-quotes .abj-quote-card__foot .agreed {
  color: var(--abj-fg-2);
  text-decoration: none;
}

/* !important: a legacy badge rule (!important itself) otherwise shrinks it to the row's 13px. */
.abj-book .abj-book-quotes .abj-quote-card__mark {
  margin-inline-start: auto;
  font-family: Georgia, serif;
  font-size: 36px !important;
  line-height: 0.6 !important;
  color: var(--abj-brand);
}

/* "عرض المزيد من المراجعات" / "عرض المزيد من الإقتباسات": plain brand-coloured links under the cards. */
.abj-book .abj-book-quotes a.abj-quotes-all,
.abj-book #Reviews .paged a.morepages {
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 4px 8px;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: var(--abj-brand-fg) !important;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.abj-book .abj-book-quotes a.abj-quotes-all:hover,
.abj-book #Reviews .paged a.morepages:hover {
  text-decoration: underline;
}

.abj-theme .abj-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  text-align: center;
}

.abj-theme .abj-empty-state__icon,
.abj-book .profilesections .paged.zero .emptysection.review::before {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 9999px;
  background: var(--abj-brand-soft) center / 30px no-repeat;
}

.abj-theme .abj-empty-state__icon--quote {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c74f15'%3E%3Cpath d='M9.5 6C6.5 6 4 8.5 4 11.5V18h6v-6H7c0-1.7 1.3-3 3-3h.5V6h-1Zm9 0c-3 0-5.5 2.5-5.5 5.5V18h6v-6h-3c0-1.7 1.3-3 3-3h.5V6h-1Z'/%3E%3C/svg%3E");
}

.abj-theme .abj-empty-state__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--abj-fg);
}

.abj-theme .abj-empty-state__text {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--abj-fg-muted);
}

/* Reviews' empty state (Book/_Reviews.cshtml), drawn like the quotes one in place of the legacy picture. */
.abj-book .profilesections .paged.zero .emptysection.review {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 24px 0 8px;
  background: none !important;
}

.abj-book .profilesections .paged.zero .emptysection.review::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c74f15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
}

.abj-book .profilesections .paged.zero .emptysection.review h3 {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--abj-fg);
}

.abj-book .profilesections .emptysection .actionarea .btnreview {
  border-color: var(--abj-brand-strong);
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

/* Category tiles are icon cards: a white card with the category's icon (a glyph on its own peach square)
   over the name. */
.abj-theme .abj-tile {
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 20px 12px 18px;
  border: 1px solid #ece4da;
  background: #fff;
}

.abj-theme .abj-tile:hover {
  border-color: #f3c7a5;
  box-shadow: 0 6px 18px rgb(14 26 40 / 0.08);
}

.abj-theme .abj-tile__art {
  display: block;
}

.abj-theme .abj-tile__art img {
  display: block;
  width: 72px;
  height: 72px;
  transition: transform 0.2s;
}

.abj-theme .abj-tile:hover .abj-tile__art img {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .abj-theme .abj-tile {
    padding: 16px 8px 14px;
  }

  .abj-theme .abj-tile__art img {
    width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abj-theme .abj-tile:hover .abj-tile__art img {
    transform: none;
  }
}

/* Hero buttons under the summary card: "اقرأ عينة" (orange) and "اسمع عينة" (purple) open the existing read
   button's flow; next to them that button reads as the secondary action. */
.abj-book .bookeditbadge > .btexp.indes { order: 10; }

.abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .btexp.indes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}

.abj-theme .abj-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 140px;
  min-height: 48px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
  font-family: var(--abj-font-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.abj-theme .abj-sample:hover {
  background: var(--abj-brand-stronger);
}

/* AT-3215 ("Book Page Light" 1a/2a): beside "اقرأ عيّنة مجاناً" the listen sample is the outlined secondary
   button; on its own (audio only) it keeps the filled look. */
.abj-theme .btexp:has(.abj-sample--read) .abj-sample--listen {
  border: 1px solid var(--abj-brand);
  background: var(--abj-surface);
  color: var(--abj-brand-fg);
}

.abj-theme .btexp:has(.abj-sample--read) .abj-sample--listen:hover {
  background: var(--abj-brand-soft);
}

.abj-book .abj-book-hero:not(.fixed) .btexp.indes:has(.abj-sample) .btnread {
  border: 1px solid var(--abj-brand) !important;
  background: var(--abj-surface) !important;
  color: var(--abj-brand-fg) !important;
}

/* AT-3215 / AT-3236: the samples replace "تحميل الكتاب" / "اسمع الكتاب" in the hero and in the sticky bar.
   Hidden, not removed: both sample buttons open the reader by clicking this button (_CatalogThemeScript).
   Each is hidden only by its own format's sample, so an e-book without a read sample keeps its button. */
.abj-book .abj-book-hero .btexp.indes:has(.abj-sample--read) .btnread[data-gabook="ReadNow"],
.abj-book .abj-book-hero .btexp.indes:has(.abj-sample--listen) .btnread[data-gabook="ListenNow"] {
  display: none !important;
}

@media (min-width: 1024px) {
  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .btexp.indes {
    justify-content: flex-start;
  }

  .abj-theme .abj-sample {
    flex: 0 0 auto;
  }
}

/* Author card: no photo → the default avatar. */
.abj-book .abj-book-author--no-photo .authorbadge > a.img {
  background: var(--abj-surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858e98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 55% no-repeat;
}

.abj-book .abj-book-author--no-photo .authorbadge > a.img img {
  display: none !important;
}

/* The reading / listening cards under the author (Book/_BookAppPromo.cshtml "ebook" / "audio", "Book Page
   Light"): soft peach for reading, soft lavender for listening, dark text and the animated phone
   (Shared/Book/_DemoPhone.cshtml). Reading puts the phone at inline-end, cut by the card's bottom edge;
   listening at inline-start. On phones the text comes first and the phone is centred under it. */
.abj-book .abj-book-format {
  --abj-format-bg: #fdf1e8;
  --abj-format-eyebrow: var(--abj-brand-fg);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 28px 20px 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--abj-format-bg);
  color: var(--abj-fg);
}

.abj-book .abj-book-format--audio {
  --abj-format-bg: #f1eefc;
  --abj-format-eyebrow: #5b35c4;
  padding-bottom: 28px;
}

.abj-book .abj-book-format__device {
  display: flex;
  justify-content: center;
  --dp-size: 9px;
}

.abj-book .abj-book-format--ebook .abj-book-format__device {
  height: 240px;
  overflow: hidden;
  align-items: flex-start;
}

.abj-book .abj-book-format__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.abj-book .abj-book-format__eyebrow {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--abj-format-eyebrow);
}

.abj-book .abj-book-format__title {
  margin: 0;
  font-family: var(--abj-font-ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--abj-fg);
}

.abj-book .abj-book-format__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--abj-fg-2);
}

.abj-book .abj-book-format__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.abj-book .abj-book-format__chips li {
  margin: 0;
  padding: 5px 14px;
  border: 1px solid var(--abj-border);
  border-radius: 9999px;
  background: var(--abj-surface);
  font-family: var(--abj-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--abj-fg);
}

/* The design has no button; the app link the card had stays, as a quiet text link under the chips. */
.abj-book .abj-book-format__cta {
  align-self: flex-start;
  margin-top: 4px;
  color: var(--abj-format-eyebrow) !important;
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.abj-book .abj-book-format__cta:hover {
  text-decoration-thickness: 2px !important;
}

/* Phones only: product dropped the link from the desktop card. It stays in the markup for phones. */
@media (min-width: 768px) {
  .abj-book .abj-book-format__cta {
    display: none;
  }
}

@media (min-width: 768px) {
  .abj-book .abj-book-format {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
    padding: 0 64px;
    border-radius: 32px;
  }

  .abj-book .abj-book-format__body {
    grid-column: 1;
    grid-row: 1;
    max-width: 640px;
    padding: 56px 0;
  }

  .abj-book .abj-book-format__device {
    grid-column: 2;
    grid-row: 1;
    --dp-size: 11px;
  }

  .abj-book .abj-book-format--ebook .abj-book-format__device {
    align-self: end;
    height: 320px;
  }

  .abj-book .abj-book-format--audio {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 40px 64px;
  }

  .abj-book .abj-book-format--audio .abj-book-format__body {
    grid-column: 2;
    padding: 0;
  }

  .abj-book .abj-book-format--audio .abj-book-format__device {
    grid-column: 1;
  }

  .abj-book .abj-book-format__title {
    font-size: 26px;
  }

  .abj-book .abj-book-format__text {
    font-size: 16px;
  }
}

/* Phones only ("Book Page Light" 2a): the app strip closing the hero, after the summary and its chips. */
.abj-book .abj-app-strip {
  order: 11;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--abj-border);
  border-radius: 16px;
  background: var(--abj-surface);
  text-align: start;
}

.abj-book .abj-app-strip__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand);
}

.abj-book .abj-app-strip__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.abj-book .abj-app-strip__title {
  font-family: var(--abj-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--abj-fg);
}

.abj-book .abj-app-strip__text {
  font-size: 13px;
  color: var(--abj-fg-muted);
}

.abj-book a.abj-app-strip__cta {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 9999px;
  background: var(--abj-brand-strong);
  color: var(--abj-on-brand) !important;
  font-family: var(--abj-font-ui);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}

@media (min-width: 768px) {
  .abj-book .abj-app-strip {
    display: none;
  }
}

.abj-book .abj-book-hero.fixed .abj-app-strip {
  display: none;
}

/* Phones and tablets ("Book Page Light" 2a): the hero's buttons right under the author, before the stats. */
@media (max-width: 1023px) {
  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .btexp.indes {
    order: 5;
  }
}

/* "اقرأ عيّنة مجاناً" beside the read button on one line at 375px. */
@media (max-width: 639px) {
  .abj-theme .abj-sample {
    gap: 6px;
    padding: 0 12px;
    font-size: 15px;
    white-space: nowrap;
  }
}

/* The book page's type floor: 13px for anything tappable or informative (action rows, counts, dates,
   captions, badges). Above, the book page's own rules say 13px; these lift what it shares with the category
   pages (.abj-theme) and what the site bundle sets smaller (the review row's "أوافق" / "التعليقات" were
   11.2px), on this page only. */
.abj-book .profilesections .storybadge .actions .agree,
.abj-book .profilesections .storybadge .actions .agreed,
.abj-book .profilesections .storybadge .actions .totalagreed,
.abj-book .profilesections .storybadge .comments .comment.h,
.abj-book .thebookbadge > .published,
.abj-book .thebookbadge .format,
.abj-book .thebookbadge .rdbk .bfree,
.abj-book .abj-pill--sm,
.abj-book .abj-free,
.abj-book .abj-rail-card__meta,
.abj-book .abj-author-card__meta,
.abj-book .abj-store__top {
  font-size: 13px;
}

/* The site bundle's ".top-quote .quotes .storybadge * { font-size: 95% !important }" compounds at every level
   of the quote card (its text came out at 12px), so the card's sizes need !important to hold. */
.abj-book .abj-book-quotes .abj-quote-card blockquote {
  font-size: 15px !important;
}

.abj-book .abj-book-quotes .abj-quote-card blockquote * {
  font-size: inherit !important;
}

.abj-book .abj-book-quotes .abj-quote-card__foot .agree,
.abj-book .abj-book-quotes .abj-quote-card__foot .agreed,
.abj-book .abj-book-quotes .abj-quote-card__foot .totalagreed,
.abj-book .abj-book-quotes a.abj-quote-card__time,
.abj-book .abj-book-quotes a.abj-quote-card__time time {
  font-size: 13px !important;
}

@media (max-width: 639px) {
  .abj-book .abj-store__name,
  .abj-book a.abj-store--compact .abj-store__name {
    font-size: 13px;
  }
}

/* Phones and tablets: the stats card is a grid that never leaves one item alone on a row (3 → one row, 4 → 2 x 2,
   5 → 3 + 2 with the two centred, 6 → 3 + 3), each stat its figure over its label. */
@media (max-width: 1023px) {
  .abj-book .thebadge .incols.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .abj-book .thebadge .incols.stats:has(> .col:nth-child(2):last-child),
  .abj-book .thebadge .incols.stats:has(> .col:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .abj-book .thebadge .incols.stats:has(> .col:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .abj-book .thebadge .incols.stats:has(> .col:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .abj-book .thebadge .incols.stats:has(> .col:nth-child(5):last-child) > .col {
    grid-column: span 2;
  }

  .abj-book .thebadge .incols.stats:has(> .col:nth-child(5):last-child) > .col:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .abj-book .thebadge .incols.stats .col {
    justify-content: center;
    text-align: center;
  }

  .abj-book .thebadge .incols.stats .col.abj-stat {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 0 6px;
  }

  .abj-book .thebadge .incols.stats .abj-stat__label {
    grid-column: 1 / -1;
  }

  .abj-book .thebadge .incols.stats .col > div,
  .abj-book .thebadge .incols.stats .totalcommunity {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

/* The cover takes at most ~45% of a short screen's height (width x 3/2), so the title and the sample buttons
   are on the first screen at 320 x 568. */
@media (max-width: 1023px) {
  .abj-book .thebadge .img.editionphoto > a {
    width: min(176px, 30vh);
    width: min(176px, 30svh);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .abj-book .thebadge .img.editionphoto > a {
    width: min(208px, 30vh);
    width: min(208px, 30svh);
  }
}

/* Short portrait phones (320 x 568): ~27% of the height, so the title and the first buttons clear the fold. */
@media (orientation: portrait) and (max-height: 600px) and (max-width: 1023px) {
  .abj-book .thebadge .img.editionphoto > a {
    width: min(176px, 18vh);
    width: min(176px, 18svh);
  }
}

/* Under 360px the two samples still share one row (they wrapped at 320px, pushing "اسمع" below the fold). */
@media (max-width: 359px) {
  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .btexp.indes {
    column-gap: 8px;
  }

  .abj-theme .abj-sample {
    flex-basis: 0;
    gap: 4px;
    padding: 0 8px;
    font-size: 13px;
  }

  .abj-theme .abj-sample svg {
    width: 16px;
    height: 16px;
  }
}

/* Phones held sideways: the cover beside the title and the buttons, so the calls to action are above the fold;
   the summary and what follows run full width under them. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  .abj-book .abj-book-hero:not(.fixed) .thebadge.bookbadge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 24px;
    text-align: start;
  }

  .abj-book .abj-book-hero:not(.fixed) .thebadge.bookbadge > * ,
  .abj-book .abj-book-hero:not(.fixed) .abj-book-hero__body > *,
  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > * {
    grid-column: 2;
  }

  .abj-book .abj-book-hero:not(.fixed) .thebadge .img.editionphoto > a {
    grid-column: 1;
    grid-row: 1 / span 5;
  }

  .abj-book .abj-book-hero:not(.fixed) .abj-book-hero__type {
    justify-content: flex-start;
    margin-top: 0;
  }

  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .btexp.indes {
    justify-content: flex-start;
  }

  .abj-book .abj-book-hero:not(.fixed) .thebadge .incols.stats {
    max-width: none;
  }

  .abj-book .abj-book-hero:not(.fixed) .bookeditbadge > .description,
  .abj-book .abj-book-hero:not(.fixed) .abj-app-strip {
    grid-column: 1 / -1;
  }
}