/**
 * Ghada Ataa — Book detail page. The real cover is the hero; warm paper, one purple shape,
 * a pink bookmark. Reuses the store's card, crumbs and empty state (store.css).
 */
.ga-book > section > .ga-container {
  padding-inline: min(var(--ga-page-margin), var(--ga-space-400));
  max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400));
}
.ga-book > section { padding-block: 0 var(--ga-section-space); }
.ga-book > .ga-bk-hero { padding-block: var(--ga-space-400) var(--ga-section-space); }
.ga-book > section[hidden] { display: none; }
.ga-bk-crumbs ol { margin-block-end: var(--ga-space-300); }
.ga-bk-crumbs li[aria-current] { max-inline-size: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ga-bk-eyebrow { margin: 0; font: var(--ga-type-label-default); color: var(--ga-color-brand-vivid-purple); }
.ga-bk-h2 { margin: 0; font: var(--ga-type-heading-h2); }
.ga-bk-h2 span { color: var(--ga-color-brand-electric-orange); }

/* skeletons while the catalog resolves */
.ga-bk-skel { display: inline-block; block-size: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--ga-color-text-deep-ink-06) 30%, var(--ga-color-text-deep-ink-10) 50%, var(--ga-color-text-deep-ink-06) 70%) 0 0 / 200% 100%; animation: ga-ch-shimmer 1.4s linear infinite; }
.ga-bk-skel--title { inline-size: 70%; block-size: 44px; }
.ga-bk-skel--cover { inline-size: 70%; aspect-ratio: 2 / 3; block-size: auto; border-radius: 6px; }

/* ═════════ Hero ═════════ */
.ga-bk-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--ga-space-800); align-items: start; }

.ga-bk-cover {
  position: sticky; inset-block-start: var(--ga-space-300);
  isolation: isolate; overflow: hidden;
  margin: 0;
  display: grid; place-items: center;
  min-block-size: 520px;
  padding: var(--ga-space-600) var(--ga-space-500);
  border-radius: 24px;
  background: color-mix(in srgb, var(--ga-color-surface-warm-paper) 40%, #EFE2CE);
}
.ga-bk-cover__shape {                                  /* one restrained purple offset shape */
  position: absolute; z-index: -1;
  inline-size: 72%; aspect-ratio: 1; border-radius: 50%;
  inset-block-end: -18%; inset-inline-start: -14%;
  background: var(--ga-color-brand-vivid-purple);
  opacity: .92;
}
.ga-bk-cover__ribbon {                                 /* bookmark motif */
  position: absolute; z-index: 2; inset-block-start: 0; inset-inline-end: var(--ga-space-500);
  inline-size: 26px; block-size: 72px; background: var(--ga-color-accent-pop-pink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.ga-bk-cover__frame { position: relative; display: grid; place-items: center; inline-size: 100%; }
.ga-bk-cover__frame img {
  display: block; inline-size: auto; block-size: auto;
  max-inline-size: min(100%, 380px); max-block-size: 520px;      /* original proportions, never stretched */
  border-radius: 4px 8px 8px 4px;
  box-shadow: 0 2px 0 rgb(38 29 48 / .08), 0 28px 48px rgb(38 29 48 / .28);
}
.ga-bk-cover__frame.is-noimg::after { content: "✳"; font-size: 72px; color: var(--ga-color-brand-vivid-purple); }
.ga-bk-cover__badge { position: absolute; inset-block-start: -12px; inset-inline-start: -12px; padding: 6px 12px; border-radius: 12px; background: var(--ga-color-brand-electric-orange); font: var(--ga-type-label-default); font-weight: 700; rotate: -6deg; }

.ga-bk-info { container-type: inline-size; display: grid; gap: var(--ga-space-200); padding-block-start: var(--ga-space-200); min-inline-size: 0; }
.ga-bk-label { margin: 0; font: var(--ga-type-label-default); font-weight: 700; }
.ga-bk-label a { color: var(--ga-color-brand-vivid-purple); text-decoration: none; border-radius: 4px; }
.ga-bk-label a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ga-bk-title { margin: 0; font: var(--ga-type-display-hero); font-size: min(var(--ga-type-display-hero-font-size), 9cqi); line-height: 1.3; text-wrap: balance; }
.ga-bk-author { margin: 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); }
.ga-bk-author a { color: var(--ga-text-primary); font-weight: 700; text-decoration: underline 2px var(--ga-color-accent-fresh-lime); text-underline-offset: 6px; border-radius: 4px; }
.ga-bk-lead { margin: 0; padding-inline-start: var(--ga-space-200); border-inline-start: 3px solid var(--ga-color-accent-pop-pink); font: var(--ga-type-body-large); max-inline-size: 52ch; }

.ga-bk-buy { display: grid; gap: var(--ga-space-200); margin-block-start: var(--ga-space-100); padding-block: var(--ga-space-300); border-block: 1.5px solid var(--ga-color-text-deep-ink); }
.ga-bk-buy[hidden] { display: none; }
.ga-bk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ga-space-100) var(--ga-space-200); }
.ga-bk-price__now { font: var(--ga-type-heading-h1); }
.ga-bk-price__was { font: var(--ga-type-body-large); color: var(--ga-text-muted); }
.ga-bk-price__off { padding: 2px 10px; border-radius: 8px; background: var(--ga-color-accent-fresh-lime); font: var(--ga-type-label-default); font-weight: 700; }
.ga-bk-price__none { font: var(--ga-type-heading-h4); color: var(--ga-text-muted); }
.ga-bk-stock { display: flex; align-items: center; gap: var(--ga-space-100); margin: 0; font: var(--ga-type-body-small); font-weight: 600; }
.ga-bk-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--ga-text-disabled); flex: none; }
.ga-bk-dot--ok { background: var(--ga-color-functional-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga-color-functional-success) 20%, transparent); }

.ga-bk-cartform { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ga-space-200); }
.ga-bk-cartform[hidden] { display: none; }
.ga-bk-qty { display: grid; gap: 4px; }
.ga-bk-qty__label { font: var(--ga-type-body-small); font-weight: 700; }
.ga-bk-qty__box { display: inline-flex; align-items: center; block-size: 56px; border: 1.5px solid var(--ga-border-control); border-radius: var(--ga-radius-button); background: var(--ga-color-functional-white); overflow: hidden; }
.ga-bk-qty__box:focus-within { border-color: var(--ga-border-focus); box-shadow: 0 0 0 var(--ga-space-50) var(--ga-focus-halo); }
.ga-bk-qty__btn { display: grid; place-items: center; inline-size: 48px; block-size: 100%; border: 0; background: none; color: var(--ga-text-primary); cursor: pointer; }
.ga-bk-qty__btn svg { inline-size: 20px; block-size: 20px; }
.ga-bk-qty__btn:hover:not(:disabled) { background: var(--ga-color-text-deep-ink-06); }
.ga-bk-qty__btn:disabled { color: var(--ga-text-disabled); cursor: not-allowed; }
.ga-bk-qty__btn:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: -4px; border-radius: 12px; }
.ga-bk-qty__input { inline-size: 48px; block-size: 100%; border: 0; background: none; text-align: center; font: var(--ga-type-heading-h4); color: var(--ga-text-primary); -moz-appearance: textfield; }
.ga-bk-qty__input::-webkit-inner-spin-button, .ga-bk-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ga-bk-qty__input:focus { outline: none; }
.ga-bk-qty__hint { font-size: 12px; color: var(--ga-text-muted); min-block-size: 0; }
.ga-bk-qty__hint:empty { display: none; }
.ga-bk-add { flex: 1; min-inline-size: 220px; }
.ga-bk-add.is-added, .ga-bk-sticky__add.is-added { --_bg: var(--ga-color-functional-success); --_image: none; --_fg: var(--ga-color-functional-white); }
.ga-bk-incart { margin: 0; font: var(--ga-type-body-small); color: var(--ga-color-brand-vivid-purple); }
.ga-bk-incart:empty { display: none; }

.ga-bk-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ga-space-100) var(--ga-space-300); }
.ga-bk-store, .ga-bk-share {
  display: inline-flex; align-items: center; gap: var(--ga-space-100);
  min-block-size: 44px; padding: 0; border: 0; background: none;
  color: var(--ga-text-primary); font: var(--ga-type-label-default); font-weight: 700;
  text-decoration: underline 1.5px; text-underline-offset: 6px; text-decoration-color: var(--ga-border-control);
  cursor: pointer; border-radius: 4px;
}
.ga-bk-store svg, .ga-bk-share svg { inline-size: 18px; block-size: 18px; }
.ga-bk-store:hover, .ga-bk-share:hover { color: var(--ga-color-brand-vivid-purple); text-decoration-color: currentColor; }
.ga-bk-store:focus-visible, .ga-bk-share:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 2px; }

.ga-bk-trust { display: flex; flex-wrap: wrap; gap: var(--ga-space-50) var(--ga-space-300); margin: 0; padding: 0; list-style: none; font: var(--ga-type-body-small); }
.ga-bk-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ga-bk-trust__k { color: var(--ga-text-muted); }
.ga-bk-trust a { display: inline-flex; align-items: center; gap: 4px; color: var(--ga-text-primary); font-weight: 600; text-decoration: none; border-radius: 4px; }
.ga-bk-trust a svg { inline-size: 14px; block-size: 14px; }
.ga-bk-trust a:hover { color: var(--ga-color-brand-vivid-purple); text-decoration: underline; }

/* ═════════ About the book ═════════ */
.ga-bk-about__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--ga-space-800); padding-block-start: var(--ga-space-500); border-block-start: 2px solid var(--ga-color-text-deep-ink); }
.ga-bk-about__head { display: grid; gap: var(--ga-space-100); align-content: start; position: sticky; inset-block-start: var(--ga-space-300); }
.ga-bk-about__head .ga-bk-h2 { font: var(--ga-type-display-hero); }
.ga-bk-about__head::after { content: "✳"; font-size: 40px; line-height: 1; color: var(--ga-color-accent-pop-pink); margin-block-start: var(--ga-space-200); }
.ga-bk-about__body { display: grid; justify-items: start; gap: var(--ga-space-300); max-inline-size: 68ch; }
.ga-bk-desc { position: relative; display: grid; gap: var(--ga-space-300); font: var(--ga-type-body-large); line-height: 2; }
.ga-bk-desc p { margin: 0; }
.ga-bk-desc__first::first-line { font-weight: 700; }
.ga-bk-desc__verse { margin: 0; padding: var(--ga-space-100) var(--ga-space-300); border-inline-start: 4px solid var(--ga-color-accent-fresh-lime); font: var(--ga-type-heading-h4); font-weight: 500; line-height: 1.9; }
.ga-bk-desc__empty { color: var(--ga-text-muted); }
.ga-bk-desc__empty a, .ga-bk-desc a { color: var(--ga-color-brand-vivid-purple); font-weight: 700; }
.ga-bk-desc.is-folded { max-block-size: 22em; overflow: hidden; }   /* keep in sync with DESC_FOLD_EM in js/book.js */
.ga-bk-desc.is-folded::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 6em; background: linear-gradient(transparent, var(--ga-color-surface-warm-paper)); pointer-events: none; }

/* ═════════ Discover (typographic, not icon cards) ═════════ */
.ga-bk-discover__panel { padding: var(--ga-space-600); border-radius: 24px; background: var(--ga-color-functional-white); box-shadow: inset 0 0 0 1.5px var(--ga-color-text-deep-ink); }
.ga-bk-themes { display: grid; gap: var(--ga-space-200); margin: var(--ga-space-400) 0 0; padding: 0; list-style: none; }
.ga-bk-theme { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; gap: var(--ga-space-200); padding-block-end: var(--ga-space-200); border-block-end: 1px dashed var(--ga-border-default); }
.ga-bk-theme__n { font-size: 13px; font-weight: 700; color: var(--ga-color-brand-electric-orange); }
.ga-bk-theme__t { justify-self: start; font: var(--ga-type-heading-h3); line-height: 1.6; }   /* highlights hug the words */
.ga-bk-theme--1 .ga-bk-theme__t { background: linear-gradient(var(--ga-color-accent-fresh-lime), var(--ga-color-accent-fresh-lime)) right 90% / 100% 34% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ga-bk-theme--3 .ga-bk-theme__t { text-decoration: underline 3px color-mix(in srgb, var(--ga-color-accent-pop-pink) 60%, transparent); text-underline-offset: 8px; }
.ga-bk-sections { margin-block-start: var(--ga-space-400); }
.ga-bk-sections[hidden] { display: none; }
.ga-bk-sections__title { margin: 0 0 var(--ga-space-200); font: var(--ga-type-heading-h4); }
.ga-bk-sections ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ga-space-300); margin: 0; padding: 0; list-style: none; }
.ga-bk-sections li { display: grid; gap: var(--ga-space-50); padding-inline-start: var(--ga-space-200); border-inline-start: 3px solid var(--ga-color-brand-vivid-purple); font: var(--ga-type-body-default); }
.ga-bk-sections li b { font: var(--ga-type-heading-h4); }
.ga-bk-discover__src { margin: var(--ga-space-400) 0 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }

/* ═════════ Related ═════════ */
.ga-bk-related__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--ga-space-200); }
.ga-bk-related__lead { margin: var(--ga-space-100) 0 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); }
.ga-bk-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ga-bk-missing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ga-space-100); }
.ga-book > .ga-bk-missing { padding-block: var(--ga-space-500) var(--ga-section-space); }

/* ═════════ Sticky purchase bar ═════════ */
.ga-bk-sticky {
  position: fixed; z-index: 900; inset-inline: 0; inset-block-end: 0;
  padding-block: var(--ga-space-100) calc(var(--ga-space-100) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ga-color-functional-white) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 -1px 0 var(--ga-border-default), 0 -12px 30px rgb(38 29 48 / .08);
  translate: 0 110%;
  transition: translate 260ms cubic-bezier(.2,.8,.2,1);
}
.ga-bk-sticky.is-shown { translate: 0 0; }
.ga-bk-sticky[hidden] { display: none; }
.ga-bk-sticky__inner { display: flex; align-items: center; gap: var(--ga-space-200); padding-inline: min(var(--ga-page-margin), var(--ga-space-400)); max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400)); }
.ga-bk-sticky__thumb { flex: none; inline-size: 36px; }
.ga-bk-sticky__thumb img { display: block; inline-size: 100%; block-size: auto; border-radius: 3px; box-shadow: 0 4px 10px rgb(38 29 48 / .2); }
.ga-bk-sticky__text { flex: 1; min-inline-size: 0; display: grid; }
.ga-bk-sticky__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--ga-type-label-default); font-weight: 700; }
.ga-bk-sticky__text span { font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-bk-sticky__add { flex: none; }
body.ga-bk-has-sticky { padding-block-end: 80px; }   /* the bar never covers the last lines of content */

/* ═════════ Responsive ═════════ */
@media (max-width: 1199px) {
  .ga-bk-hero__grid { gap: var(--ga-space-500); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ga-bk-cover { min-block-size: 440px; padding: var(--ga-space-500) var(--ga-space-400); }
  .ga-bk-about__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-300); }
  .ga-bk-about__head { position: static; }
  .ga-bk-about__head::after { display: none; }
  .ga-bk-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ga-bk-related__grid > :nth-child(4) { display: none; }
  .ga-bk-discover__panel { padding: var(--ga-space-500); }
}
@media (max-width: 767px) {
  .ga-book > .ga-bk-hero { padding-block-start: var(--ga-space-200); }
  .ga-bk-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ga-space-300); }
  .ga-bk-cover { position: relative; min-block-size: 0; padding: var(--ga-space-400) var(--ga-space-300); }
  .ga-bk-cover__frame img { max-inline-size: min(72%, 260px); max-block-size: 380px; }
  .ga-bk-cover__ribbon { inset-inline-end: var(--ga-space-300); block-size: 52px; inline-size: 20px; }
  .ga-bk-info { padding: 0; }
  .ga-bk-title { font: var(--ga-type-heading-h1); }
  .ga-bk-lead, .ga-bk-author { font: var(--ga-type-body-default); }
  .ga-bk-price__now { font: var(--ga-type-heading-h2); }
  .ga-bk-cartform { flex-wrap: nowrap; }
  .ga-bk-add { min-inline-size: 0; }
  .ga-bk-about__head .ga-bk-h2 { font: var(--ga-type-heading-h1); }
  .ga-bk-desc { font: var(--ga-type-body-default); line-height: 1.95; }
  .ga-bk-desc__verse { font: var(--ga-type-body-large); line-height: 1.9; padding-inline: var(--ga-space-200); }
  .ga-bk-discover__panel { padding: var(--ga-space-400) var(--ga-space-300); }
  .ga-bk-h2 { font: var(--ga-type-heading-h3); }
  .ga-bk-theme { grid-template-columns: 32px minmax(0, 1fr); gap: var(--ga-space-100); }
  .ga-bk-theme__t { font: var(--ga-type-heading-h4); line-height: 1.7; }
  .ga-bk-sections ol { grid-template-columns: minmax(0, 1fr); }
  .ga-bk-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ga-bk-related__grid > :nth-child(4) { display: flex; }
  .ga-bk-related__head .ga-btn { inline-size: 100%; }
  .ga-bk-sticky__thumb { display: none; }
  .ga-bk-sticky__add { padding-inline: var(--ga-space-200); }
  body.ga-bk-has-sticky { padding-block-end: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-bk-skel { animation: none; }
  .ga-bk-sticky { transition: none; }
}

/* save for later (js/activity.js): a quiet text button, filled mark when saved */
.ga-bk-share.ga-save-btn.is-saved { color: var(--ga-color-brand-vivid-purple); text-decoration-color: currentColor; }
.ga-bk-share.ga-save-btn.is-saved svg path { fill: currentColor; }