/* ============================================================================
   Author profile page (theme-views/product/author-profile.blade.php).
   Social-profile layout: cover + avatar header, intro column, books feed.
   Uses the dream-theme tokens; logical properties so Arabic mirrors itself.
   --ap-hue (per author) tints the monogram and the mosaic cover.
   ========================================================================== */

.ap-page {
    --ap-radius: var(--dream-radius-lg, 1.25rem);
    --ap-surface: var(--dream-surface, #fff);
    --ap-ink: var(--dream-ink, #1f2430);
    --ap-soft: var(--dream-ink-soft, #6b7280);
    --ap-line: var(--dream-line, rgba(15, 23, 42, .08));
    --ap-primary: var(--dream-primary, #92400E);
    --ap-primary-rgb: var(--dream-primary-rgb, 146, 64, 14);
    /* Brand ring (featured author photo, active highlight): the store's brown
       and gold, same values as the home page's --bp-brand / --bp-accent. */
    --ap-brand: #4A2E1C;
    --ap-gold: #B78845;
    --ap-gold-light: #E3C48E;
    --ap-ring: conic-gradient(from 210deg, var(--ap-brand), var(--ap-gold), var(--ap-gold-light), var(--ap-gold), var(--ap-brand));
    padding-block-start: 1rem;
    color: var(--ap-ink);
}

[dir="rtl"] .ap-page .rb-flip { display: inline-block; transform: scaleX(-1); }

/* ================= hero ================= */
.ap-hero {
    border-radius: var(--ap-radius);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    box-shadow: var(--dream-shadow-sm);
    overflow: hidden;
}

.ap-cover {
    position: relative;
    aspect-ratio: 16 / 4.6;
    min-block-size: 11rem;
    max-block-size: 22rem;
    inline-size: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--ap-hue) 40% 32%), hsl(calc(var(--ap-hue) + 40) 45% 22%));
}

.ap-cover__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* No uploaded cover: the author's own covers, tilted into a moving wall. */
.ap-mosaic {
    position: absolute;
    inset: -35% -8%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: .75rem;
    transform: rotate(-8deg);
    filter: saturate(1.1);
    animation: ap-drift 40s linear infinite alternate;
}

.ap-mosaic img {
    inline-size: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
    opacity: .9;
}

.ap-mosaic img:nth-child(even) { transform: translateY(35%); }

@keyframes ap-drift {
    from { translate: 0 0; }
    to { translate: 0 -12%; }
}

.ap-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 35%, transparent 55%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
}

.ap-cover--mosaic::after {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)),
        linear-gradient(135deg, hsl(var(--ap-hue) 45% 30% / .55), transparent 60%);
}

.ap-cover__crumbs {
    position: absolute;
    z-index: 2;
    inset-block-start: .9rem;
    inset-inline-start: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
}

.ap-cover__crumbs a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.ap-cover__crumbs a:hover { color: #fff; text-decoration: underline; }
.ap-cover__crumbs i { color: rgba(255, 255, 255, .7); font-size: .65rem; }

.ap-cover__share {
    position: absolute;
    z-index: 2;
    inset-block-start: .75rem;
    inset-inline-end: .9rem;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .2s;
}

.ap-cover__share:hover { background: rgba(255, 255, 255, .35); }

/* ---- header row: avatar overlaps the cover ---- */
.ap-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 0 1.5rem 1.25rem;
}

.ap-avatar {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin-block-start: -4.25rem;
    inline-size: 9.5rem;
    block-size: 9.5rem;
    padding: 4px;
    border-radius: 50%;
    background: var(--ap-surface);
    box-shadow: var(--dream-shadow-md);
}

/* featured authors get a story-style ring in the store's brown and gold */
.ap-avatar--story {
    padding: 4px;
    background: var(--ap-ring);
}

.ap-avatar__inner {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--ap-surface);
    background: linear-gradient(145deg, hsl(var(--ap-hue) 45% 92%), hsl(var(--ap-hue) 40% 80%));
    color: hsl(var(--ap-hue) 45% 28%);
}

.ap-avatar__inner img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: 1;
}

.ap-avatar__mono {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
}

.ap-head__main {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-block-start: .9rem;
}

.ap-page .ap-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
}

.ap-badge { color: #1d9bf0; font-size: 1.25rem; line-height: 1; }

.ap-tagline {
    margin: .2rem 0 .7rem;
    color: var(--ap-soft);
    font-size: .9rem;
}

.ap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-stats li { display: flex; align-items: baseline; gap: .35rem; }
.ap-stats b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ap-stats span { color: var(--ap-soft); font-size: .85rem; }

.ap-actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* ---- buttons ---- */
.ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--dream-radius-pill, 50rem);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s var(--dream-ease, ease), box-shadow .2s, background .2s;
}

.ap-btn:hover { transform: translateY(-1px); box-shadow: var(--dream-shadow-sm); color: var(--ap-ink); }

.ap-btn--primary {
    border-color: var(--ap-primary);
    background: var(--ap-primary);
    color: var(--dream-on-primary, #fff) !important;
}

.ap-btn--primary:hover { box-shadow: 0 6px 16px rgba(var(--ap-primary-rgb), .3); }
.ap-btn--sm { padding: .38rem .9rem; font-size: .78rem; }

/* ---- sticky mini bar ---- */
.ap-mini {
    position: fixed;
    z-index: 1020;
    inset-block-start: .75rem;
    inset-inline-start: 50%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .45rem .35rem .9rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    box-shadow: var(--dream-shadow-lg);
    transform: translate(-50%, -150%);
    opacity: 0;
    pointer-events: none;
    transition: transform .35s var(--dream-ease, ease), opacity .35s;
}

[dir="rtl"] .ap-mini { transform: translate(50%, -150%); padding: .35rem .9rem .35rem .45rem; }

.ap-mini.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
[dir="rtl"] .ap-mini.is-on { transform: translate(50%, 0); }

.ap-mini__avatar {
    inline-size: 2rem;
    block-size: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: hsl(var(--ap-hue) 40% 86%);
    color: hsl(var(--ap-hue) 45% 28%);
    font-size: .75rem;
    font-weight: 800;
}

.ap-mini__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ap-mini__name { font-weight: 800; font-size: .9rem; white-space: nowrap; }

.ap-mini__link {
    padding: .3rem .8rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: var(--ap-primary);
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* ================= two columns ================= */
.ap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-block-start: 1.25rem;
}

@media (min-width: 992px) {
    .ap-layout { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; }
    .ap-side { position: sticky; inset-block-start: 1rem; }
}

.ap-side { display: flex; flex-direction: column; gap: 1rem; }

.ap-card {
    padding: 1.1rem 1.15rem;
    border-radius: var(--ap-radius);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    box-shadow: var(--dream-shadow-xs);
}

.ap-page .ap-card__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 800;
}

.ap-card__title i { color: var(--ap-primary); }

.ap-bio {
    margin: 0;
    font-size: .88rem;
    line-height: 1.85;
    color: var(--ap-ink);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

.ap-bio.is-open { -webkit-line-clamp: unset; display: block; }

.ap-more {
    margin-block-start: .3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ap-primary);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.ap-quote {
    position: relative;
    margin: 1rem 0 0;
    padding: .9rem 1rem .8rem;
    border-radius: var(--dream-radius, .875rem);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--ap-primary-rgb), .14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(var(--ap-primary-rgb), .07), var(--ap-surface) 70%);
    border: 1px solid rgba(var(--ap-primary-rgb), .12);
}

.ap-quote > i { position: absolute; inset-block-start: -.2rem; inset-inline-end: .5rem; font-size: 2.6rem; color: rgba(var(--ap-primary-rgb), .18); }
.ap-quote p { margin: 0; font-family: 'Amiri', serif; font-size: 1.05rem; line-height: 1.8; }
.ap-quote cite { display: block; margin-block-start: .3rem; font-size: .75rem; font-style: normal; color: var(--ap-soft); }

.ap-facts {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .9rem 0 0;
    border-block-start: 1px solid var(--ap-line);
    list-style: none;
    font-size: .84rem;
}

.ap-facts li { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.ap-facts i { color: var(--ap-soft); }
.ap-facts a { color: var(--ap-primary); font-weight: 700; }

/* ---- writing map ---- */
.ap-map { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }

.ap-map__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .5rem;
    inline-size: 100%;
    padding: .4rem .5rem;
    border: 0;
    border-radius: var(--dream-radius-sm, .625rem);
    background: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: background .2s;
}

.ap-map__row:hover, .ap-map__row.is-active { background: rgba(var(--ap-primary-rgb), .07); }
.ap-map__name { font-size: .84rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-map__val { font-size: .75rem; color: var(--ap-soft); font-variant-numeric: tabular-nums; }

.ap-map__bar {
    grid-column: 1 / -1;
    block-size: .4rem;
    border-radius: 1rem;
    background: rgba(var(--ap-primary-rgb), .1);
    overflow: hidden;
}

.ap-map__bar span {
    display: block;
    block-size: 100%;
    inline-size: var(--p);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ap-primary), rgba(var(--ap-primary-rgb), .6));
    animation: ap-grow .9s var(--dream-ease, ease) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes ap-grow { from { inline-size: 0; } }

.ap-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.ap-chip {
    padding: .3rem .75rem;
    border-radius: var(--dream-radius-pill, 50rem);
    border: 1px solid var(--ap-line);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
}

.ap-chip:hover { border-color: var(--ap-primary); color: var(--ap-primary); }

/* ================= books feed ================= */
.ap-main { min-inline-size: 0; scroll-margin-top: 1rem; }

/* highlights (story circles) */
.ap-highlights {
    display: flex;
    gap: 1rem;
    margin-block-end: 1rem;
    padding: .9rem 1rem .7rem;
    border-radius: var(--ap-radius);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    overflow-x: auto;
    scrollbar-width: thin;
}

.ap-hl {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    inline-size: 5.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* The ring is a fixed circle that clips its picture: the theme's global
   `img { height: auto }` otherwise lets a portrait cover stretch the circle
   into a tall oval over the label. */
.ap-hl__ring {
    position: relative;
    flex-shrink: 0;
    inline-size: 4.4rem;
    block-size: 4.4rem;
    padding: 3px;
    border-radius: 50%;
    background: var(--ap-line);
    transition: transform .25s var(--dream-ease, ease), background .25s;
}

.ap-hl.is-active .ap-hl__ring {
    background: var(--ap-ring);
}

.ap-hl:hover .ap-hl__ring { transform: scale(1.06); }
.ap-hl:focus-visible { outline: none; }
.ap-hl:focus-visible .ap-hl__ring { box-shadow: 0 0 0 3px rgba(var(--ap-primary-rgb), .35); }

.ap-hl__pic,
.ap-hl__all {
    position: absolute;
    inset: 3px;
    display: block;
    border-radius: 50%;
    border: 3px solid var(--ap-surface);
    overflow: hidden;
    background: var(--ap-surface);
}

.ap-hl__pic img {
    position: absolute;
    inset: 0;
    inline-size: 100% !important;
    block-size: 100% !important;
    max-inline-size: none;
    object-fit: cover;
    object-position: center 20%;
}

.ap-hl__all {
    display: grid;
    place-items: center;
    background: linear-gradient(rgba(var(--ap-primary-rgb), .1), rgba(var(--ap-primary-rgb), .1)), var(--ap-surface);
    color: var(--ap-primary);
    font-size: 1.4rem;
}

.ap-hl__name {
    max-inline-size: 100%;
    min-block-size: 2.5em;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-hl.is-active .ap-hl__name { color: var(--ap-primary); }

.ap-hl__count {
    padding: 0 .4rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--ap-primary-rgb), .08);
    font-size: .68rem;
    font-weight: 700;
    color: var(--ap-soft);
    line-height: 1.5;
}

/* pinned book */
.ap-pinned {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-block-end: 1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--ap-radius);
    border: 1px solid rgba(var(--ap-primary-rgb), .14);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--ap-primary-rgb), .14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(var(--ap-primary-rgb), .07), var(--ap-surface) 70%);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.ap-pinned__tag {
    position: absolute;
    inset-block-start: .7rem;
    inset-inline-end: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .6rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--ap-primary-rgb), .12);
    color: var(--ap-primary);
    font-size: .7rem;
    font-weight: 800;
}

.ap-pinned__cover {
    flex-shrink: 0;
    inline-size: 5.5rem;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    border: 3px solid var(--ap-surface);
    box-shadow: var(--dream-shadow-lg);
    transform: rotate(-3deg);
    transition: transform .3s var(--dream-ease, ease);
}

.ap-pinned:hover .ap-pinned__cover { transform: rotate(0) translateY(-3px); }

.ap-pinned__body { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-inline-size: 0; padding-block-start: 1rem; }
.ap-pinned__name { font-size: 1.15rem; font-weight: 800; line-height: 1.35; }
.ap-pinned__meta { font-size: .78rem; color: var(--ap-soft); }
.ap-pinned__meta i { color: var(--ap-primary); }

/* price */
.ap-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.ap-price ins { text-decoration: none; font-weight: 800; color: var(--ap-primary); }
.ap-price del { font-size: .78em; color: var(--ap-soft); }

/* toolbar */
.ap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-block-end: .9rem;
}

.ap-page .ap-toolbar__title {
    margin: 0;
    margin-inline-end: auto;
    font-size: 1.15rem;
    font-weight: 800;
}

.ap-toolbar__title span {
    display: inline-block;
    min-inline-size: 1.7rem;
    padding: .05rem .5rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--ap-primary-rgb), .1);
    color: var(--ap-primary);
    font-size: .8rem;
    text-align: center;
    vertical-align: middle;
}

.ap-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .4rem .8rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--dream-radius-pill, 50rem);
    background: var(--ap-surface);
    color: var(--ap-soft);
}

.ap-search:focus-within { border-color: var(--ap-primary); }
.ap-search input { inline-size: 12rem; border: 0; outline: 0; background: none; font-size: .82rem; color: var(--ap-ink); }

.ap-sort {
    padding: .45rem .8rem;
    border: 1px solid var(--ap-line);
    border-radius: var(--dream-radius-pill, 50rem);
    background: var(--ap-surface);
    color: var(--ap-ink);
    font-size: .82rem;
}

.ap-views {
    display: inline-flex;
    padding: .2rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: rgba(var(--ap-primary-rgb), .07);
}

.ap-views button {
    inline-size: 2.1rem;
    block-size: 2rem;
    border: 0;
    border-radius: var(--dream-radius-pill, 50rem);
    background: none;
    color: var(--ap-soft);
    cursor: pointer;
}

.ap-views button.is-active { background: var(--ap-surface); color: var(--ap-primary); box-shadow: var(--dream-shadow-xs); }

/* grid */
.ap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1.1rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-book { animation: ap-in .45s var(--dream-ease, ease) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
.ap-book[hidden] { display: none; }

@keyframes ap-in { from { opacity: 0; transform: translateY(10px); } }

.ap-book { display: flex; flex-direction: column; gap: .5rem; min-inline-size: 0; }

.ap-book__cover {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ap-line);
    box-shadow: var(--dream-shadow-sm);
    transition: transform .3s var(--dream-ease, ease), box-shadow .3s;
}

.ap-book__img { display: block; inline-size: 100%; block-size: 100%; }
.ap-book__cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .45s var(--dream-ease, ease); }

.ap-book:hover .ap-book__cover { transform: translateY(-4px); box-shadow: var(--dream-shadow-lg); }
.ap-book:hover .ap-book__cover img { transform: scale(1.04); }

.ap-book__off,
.ap-book__pin {
    position: absolute;
    z-index: 2;
    inset-block-start: .45rem;
    padding: .1rem .45rem;
    border-radius: var(--dream-radius-pill, 50rem);
    font-size: .7rem;
    font-weight: 800;
    pointer-events: none;
}

.ap-book__off { inset-inline-start: .45rem; background: #dc2626; color: #fff; direction: ltr; }
.ap-book__pin { inset-inline-start: .45rem; inset-block-start: 2rem; background: var(--ap-gold); color: #fff; }
.ap-book__cover:not(:has(.ap-book__off)) .ap-book__pin { inset-block-start: .45rem; }

/* wishlist / compare / quick view: a column on the cover's end edge.
   Revealed on hover where hover exists, always visible on touch screens. */
.ap-book__actions {
    position: absolute;
    z-index: 2;
    inset-block-start: .45rem;
    inset-inline-end: .45rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ap-act {
    display: grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--ap-ink) !important;
    font-size: .9rem;
    box-shadow: var(--dream-shadow-sm);
    text-decoration: none;
    transition: transform .25s var(--dream-ease, ease), background .2s, color .2s, opacity .25s;
}

.ap-act:hover { background: var(--ap-primary); color: #fff !important; transform: scale(1.08); }
.ap-act.wishlist_icon_active,
.ap-act.compare_list_icon_active { background: var(--ap-primary); color: #fff !important; }
.ap-act.wishlist_icon_active i::before { content: "\f415"; }   /* bi-heart-fill */

@media (hover: hover) {
    .ap-act { opacity: 0; transform: translateX(8px); }
    [dir="rtl"] .ap-act { transform: translateX(-8px); }
    .ap-act.wishlist_icon_active,
    .ap-act.compare_list_icon_active,
    .ap-book:hover .ap-act,
    .ap-book:focus-within .ap-act { opacity: 1; transform: none; }
    .ap-book:hover .ap-act:nth-child(2) { transition-delay: .04s; }
    .ap-book:hover .ap-act:nth-child(3) { transition-delay: .08s; }
}

.ap-book__body { display: flex; flex-direction: column; gap: .2rem; min-inline-size: 0; flex: 1 1 auto; }

.ap-book__name {
    color: inherit;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-book__name:hover { color: var(--ap-primary); }
.ap-book__pub { font-size: .74rem; color: var(--ap-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-book__sold { font-size: .72rem; color: var(--ap-soft); }
.ap-book__sold i { color: var(--ap-primary); }

/* add to cart: full-width under the price (dream-cart.js adds is-loading / is-done) */
.ap-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-block-start: auto;
    padding: .5rem .75rem;
    border-radius: var(--dream-radius-pill, 50rem);
    border: 1px solid var(--ap-primary);
    background: transparent;
    color: var(--ap-primary) !important;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--dream-ease, ease);
}

.ap-book__sold + .ap-cart,
.ap-price + .ap-cart { margin-block-start: .45rem; }

.ap-cart:hover,
.ap-cart.is-done {
    background: var(--ap-primary);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(var(--ap-primary-rgb), .28);
}

.ap-cart:active { transform: scale(.97); }

/* list view */
.ap-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: .6rem; }

.ap-grid.is-list .ap-book {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: .6rem;
    border-radius: var(--dream-radius, .875rem);
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
}

.ap-grid.is-list .ap-book__cover { flex: 0 0 5rem; }
.ap-grid.is-list .ap-book:hover .ap-book__cover { transform: none; }
.ap-grid.is-list .ap-book__actions { display: none; }
.ap-grid.is-list .ap-book__name { font-size: .95rem; }

.ap-grid.is-list .ap-book__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
}

.ap-grid.is-list .ap-book__body > :not(.ap-cart) { grid-column: 1; }
.ap-grid.is-list .ap-cart { grid-column: 2; grid-row: 1 / span 4; margin: 0; }

@media (max-width: 575.98px) {
    .ap-grid.is-list .ap-cart .product__cart-btn__label { display: none; }
    .ap-grid.is-list .ap-cart { padding: .55rem; }
}

.ap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.5rem 1rem;
    color: var(--ap-soft);
    text-align: center;
}

.ap-empty i { font-size: 2rem; }

/* ================= similar authors ================= */
.ap-similar { margin-block-start: 2rem; }

.ap-page .ap-similar__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .9rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.ap-similar__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 10rem;
    gap: .9rem;
    padding-block-end: .5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.ap-person {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    /* banner 4rem + avatar (top 2rem, 4rem tall) ends at 6rem; text starts below it */
    padding: 6.6rem .75rem 1rem;
    border-radius: var(--ap-radius);
    border: 1px solid var(--ap-line);
    background: var(--ap-surface);
    color: inherit;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .25s var(--dream-ease, ease), box-shadow .25s;
}

.ap-person:hover { transform: translateY(-3px); box-shadow: var(--dream-shadow-md); color: inherit; }

.ap-person__bg {
    position: absolute;
    inset: 0 0 auto;
    block-size: 4rem;
    inline-size: 100%;
    object-fit: cover;
    filter: blur(2px) brightness(.8);
    transform: scale(1.1);
}

.ap-person::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: 4rem;
    background: linear-gradient(135deg, hsl(var(--ap-hue) 40% 40% / .55), transparent);
}

.ap-person__avatar {
    position: absolute;
    z-index: 1;
    inset-block-start: 2rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    border: 3px solid var(--ap-surface);
    overflow: hidden;
    background: linear-gradient(145deg, hsl(var(--ap-hue) 45% 92%), hsl(var(--ap-hue) 40% 80%));
    color: hsl(var(--ap-hue) 45% 28%);
    font-weight: 800;
}

[dir="rtl"] .ap-person__avatar { translate: 50% 0; }
.ap-person__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.ap-person__name {
    position: relative;
    max-inline-size: 100%;
    min-block-size: 2.4em;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-person:hover .ap-person__name { color: var(--ap-primary); }
.ap-person__meta { font-size: .74rem; color: var(--ap-soft); }

/* toast */
.ap-toast {
    position: fixed;
    z-index: 1080;
    inset-block-end: 1.5rem;
    inset-inline-start: 50%;
    translate: -50% 1rem;
    padding: .55rem 1.1rem;
    border-radius: var(--dream-radius-pill, 50rem);
    background: #111827;
    color: #fff;
    font-size: .85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, translate .25s;
}

[dir="rtl"] .ap-toast { translate: 50% 1rem; }
.ap-toast.is-on { opacity: 1; translate: -50% 0; }
[dir="rtl"] .ap-toast.is-on { translate: 50% 0; }

/* ================= dark mode ================= */
body[theme="dark"] .ap-page { --ap-brand: #8A5A3A; --ap-gold: #D7A85B; --ap-gold-light: #F0D49B; }
body[theme="dark"] .ap-mini { background: rgba(30, 33, 40, .92); }
body[theme="dark"] .ap-pinned,
body[theme="dark"] .ap-quote { background: rgba(255, 255, 255, .04); }

/* ================= tablets & phones ================= */
@media (max-width: 991.98px) {
    .ap-head { flex-wrap: wrap; }
    .ap-actions { inline-size: 100%; }
    .ap-actions .ap-btn { flex: 1 1 0; }
}

@media (max-width: 575.98px) {
    .ap-page { padding-block-start: .5rem; }
    .ap-cover { aspect-ratio: 16 / 7; min-block-size: 9rem; }
    .ap-mosaic { grid-template-columns: repeat(6, 1fr); gap: .45rem; }
    .ap-head { flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 0 1rem 1rem; }
    .ap-avatar { margin-block-start: -3.5rem; inline-size: 7rem; block-size: 7rem; }
    .ap-avatar__mono { font-size: 2.1rem; }
    .ap-head__main { padding-block-start: 0; }
    .ap-page .ap-name { justify-content: center; font-size: 1.4rem; }
    .ap-stats { justify-content: center; gap: .3rem 1.2rem; }
    .ap-stats li { flex-direction: column; align-items: center; gap: 0; }
    .ap-search { flex: 1 1 100%; order: 3; }
    .ap-search input { inline-size: 100%; }
    .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .7rem; }
    .ap-pinned { padding: .85rem; gap: .85rem; }
    .ap-pinned__cover { inline-size: 4.4rem; }
    .ap-pinned__name { font-size: 1rem; }
    .ap-highlights { gap: .7rem; padding: .75rem .75rem .6rem; }
    .ap-hl { inline-size: 4.6rem; }
    .ap-hl__ring { inline-size: 3.8rem; block-size: 3.8rem; }
    .ap-mini__name { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-mosaic, .ap-book, .ap-map__bar span { animation: none; }
    .ap-mini, .ap-book__cover, .ap-hl__ring, .ap-pinned__cover { transition: none; }
}