/* ==========================================================================
   Pinakes 2026 — public frontend design system.

   One source for the home, the catalogue, the book page and every other
   public page. Colours come from the active theme: --primary-color is the
   accent (#d70161 by default), --secondary-color the dark surfaces, and
   --button-color / --button-text-color the filled buttons. The tints are
   mixed from the accent, so a theme recolours the whole site.

   Contrast rule, as the theme editor checks it: a filled surface always
   carries its paired text colour. Button colour takes --button-text-color,
   the dark secondary takes white; the accent is used for text, rules and
   tints on light surfaces, never as text on itself.
   ========================================================================== */

:root {
    --pk-accent: var(--primary-color, #d70161);
    --pk-accent-text: var(--primary-text, var(--pk-accent));
    /* The accent as text on the page and the white cards: the brand colour
       itself when it reads there (ThemeColorizer::readableOnPaper()). */
    --pk-accent-ink: var(--primary-ink, var(--pk-accent-text));
    /* Darker than --pk-accent-text, which is already AA on the soft tint,
       so text in this colour on the tint reads on every theme too. */
    --pk-accent-strong: color-mix(in srgb, var(--pk-accent-text) 82%, #000);
    --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 8%, #fff);
    --pk-accent-softer: color-mix(in srgb, var(--pk-accent) 5%, #fff);
    --pk-accent-line: color-mix(in srgb, var(--pk-accent) 16%, #fff);
    --pk-accent-hover-line: color-mix(in srgb, var(--pk-accent) 26%, #fff);
    /* The accent as text on the dark surface, lightened as far as AA needs. */
    --pk-accent-bright: var(--primary-on-dark, color-mix(in srgb, var(--pk-accent) 62%, #fff));
    /* Filled surfaces, moved only as far as AA with their text needs
       (ThemeColorizer::readableSurface()): the dark one carries white. */
    --pk-dark: var(--secondary-surface, var(--secondary-color, #1b1720));
    --pk-button: var(--button-surface, var(--button-color, var(--pk-accent)));
    --pk-button-text: var(--button-text-color, #fff);
    --pk-button-hover: var(--button-hover, var(--pk-button));
    --pk-dark-hover: color-mix(in srgb, var(--pk-dark) 85%, #000);

    --pk-ink: #1b1720;
    --pk-ink-2: #2d2630;
    --pk-ink-3: #3d3640;
    --pk-text: #5d5662;
    --pk-muted: #6b6470;
    --pk-faint: var(--pk-muted);
    --pk-bg: #fbfaf9;
    --pk-surface: #fff;
    --pk-soft: #f1edef;
    --pk-soft-2: #f4f0f2;
    --pk-hover: #f2eef0;
    --pk-row-hover: #f7f3f5;
    --pk-line: #ece8ea;
    --pk-line-2: #e2dce0;
    --pk-line-3: #f3eff1;
    --pk-cover-blank: #2a2230;
    /* Form fields, tinted by the theme accent. The rule reads at 3:1 on the
       field and the page (WCAG 1.4.11), so a field's edge is always visible. */
    --pk-field-bg: var(--pk-surface);
    --pk-field-line: color-mix(in srgb, var(--pk-accent-text) 15%, #918990);
    --pk-field-line-hover: color-mix(in srgb, var(--pk-accent-text) 35%, #7a7378);
    /* Focus ring: solid accent text colour, AA on every theme surface. */
    --pk-focus: var(--pk-accent-text);
    /* Status colours shared by the cards, badges and pills. */
    --pk-ok: #16a34a;
    --pk-ok-soft: #dcfce7;
    --pk-warn: #f59e0b;
    --pk-danger: #b42318;
    --pk-danger-soft: #fdecec;
    --pk-danger-ink: #8a1c13;
    --pk-neutral: #9ca3af;

    --pk-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pk-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pk-wrap: 1240px;
    --pk-gutter: 28px;
    --pk-ease: cubic-bezier(.2, .8, .2, 1);

    /* Legacy names the older views still read. */
    --sans: var(--pk-sans);
    --serif: var(--pk-serif);
    --text-color: var(--pk-ink);
    --text-light: var(--pk-muted);
    --text-muted: var(--pk-muted);
    --border-color: var(--pk-line);
    --light-bg: var(--pk-bg);
    --accent-color: var(--pk-soft);
}

/* Phones: every block (sections, catalogue, book page, footer) keeps the
   header's 16px gutter. */
@media (max-width: 767px) { :root { --pk-gutter: 16px; } }

/* ---------- Base ---------------------------------------------------------- */
html { background: var(--pk-bg); }
body.pk {
    margin: 0;
    background: var(--pk-bg);
    color: var(--pk-ink);
    font-family: var(--pk-sans);
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.pk main { background: transparent; }
body.pk h1, body.pk h2, body.pk h3, body.pk h4 {
    font-family: var(--pk-serif);
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--pk-ink);
}
body.pk input, body.pk select, body.pk button, body.pk textarea { font-family: inherit; }

.pk-wrap { max-width: var(--pk-wrap); margin: 0 auto; padding-left: var(--pk-gutter); padding-right: var(--pk-gutter); box-sizing: border-box; }
.pk-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-accent-ink); }
.pk-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); }
.pk-serif { font-family: var(--pk-serif); }

/* ---------- Buttons ------------------------------------------------------- */
.pk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
    font: 600 15px/1.2 var(--pk-sans); cursor: pointer; text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap;
}
.pk-btn--dark { background: var(--pk-dark); color: #fff; }
body.pk .pk-btn--dark { color: #fff; }
body.pk .pk-btn--dark:hover { background: var(--pk-button); color: var(--pk-button-text); }
.pk-btn--ghost { background: var(--pk-surface); color: var(--pk-ink); border-color: var(--pk-line-2); font-weight: 500; font-size: 14px; padding: 11px 18px; }
body.pk .pk-btn--ghost, body.pk .pk-btn--ghost:hover { color: var(--pk-ink); }
.pk-btn--ghost:hover { border-color: var(--pk-ink); }
.pk-btn--sm { padding: 9px 14px; border-radius: 10px; font-size: 13px; }

/* ---------- Header -------------------------------------------------------- */
/* Sticky, in the page flow: the old fixed header needed main { padding-top:
   90px } to stay clear of the content, which here is an empty band. */
body.pk main { padding-top: 0; }
body.pk .header-container {
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--pk-bg) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pk-line); box-shadow: none;
}
body.pk .header-main { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.pk .header-container .header-main > .container { max-width: var(--pk-wrap) !important; width: 100%; padding: 12px var(--pk-gutter); margin: 0 auto; box-sizing: border-box; }
body.pk .header-content { display: flex; align-items: center; gap: 16px; min-height: 40px; }
body.pk .header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
body.pk .header-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
body.pk .header-brand .logo-image { height: 36px; width: auto; display: block; }
body.pk .header-brand .brand-text { font-family: var(--pk-serif); font-weight: 600; font-size: 22px; color: var(--pk-ink); letter-spacing: -.02em; }
body.pk .nav-links { gap: 2px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; overflow: hidden; }
body.pk .nav-links a {
    display: block; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
    color: var(--pk-ink); white-space: nowrap; text-decoration: none; background: transparent;
}
body.pk .nav-links a:hover { background: var(--pk-hover); color: var(--pk-ink); }
body.pk .nav-links a.active { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
body.pk .header-content > .search-form {
    flex: 1 1 120px; min-width: 120px; max-width: 340px; margin-left: auto; position: relative;
}
body.pk .header-content > .search-form .search-input {
    width: 100%; height: 40px; border: 0; border-radius: 999px; background: var(--pk-soft);
    padding: 0 14px 0 38px; font-size: 14px; color: var(--pk-ink); box-shadow: none; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6470' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 14px center;
}
body.pk .header-content > .search-form .search-input::placeholder { color: var(--pk-muted); }
body.pk .header-content > .search-form .search-input:focus { box-shadow: 0 0 0 2px var(--pk-accent-line); }
body.pk .header-content > .search-form .search-input:focus-visible { outline: 2px solid var(--pk-focus); outline-offset: 2px; }
body.pk .user-menu { display: flex; gap: 6px; align-items: center; flex: none; white-space: nowrap; }
body.pk .btn-header {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 500; border: 0; box-shadow: none; text-decoration: none; line-height: 1.2;
}
body.pk .btn-header.btn-outline-header { background: transparent; color: var(--pk-ink); }
body.pk .btn-header.btn-outline-header:hover { background: var(--pk-hover); color: var(--pk-ink); }
body.pk .btn-header.btn-primary-header { background: var(--pk-dark); color: #fff; font-weight: 600; padding: 9px 18px; }
body.pk .btn-header.btn-primary-header:hover { background: var(--pk-button); color: var(--pk-button-text); }
/* Signed out the header reads as words, as in the design; signed in the
   icons tell Reservations, Favourites and Admin apart. */
body.pk .user-menu .pk-guest .hidden { display: inline !important; }
/* Between tablet and desktop the header stays on one row: the user menu
   keeps its icons and its words stay for screen readers only, the nav
   links tighten. */
@media (min-width: 768px) and (max-width: 1099px) {
    body.pk .nav-links a { padding: 8px 10px; }
    body.pk .header-content { gap: 12px; }
    body.pk .user-menu .btn-header { padding: 9px 11px; }
    body.pk .user-menu .btn-header > span:not(.badge-notification),
    body.pk .user-menu .pk-guest .btn-header > span.hidden {
        display: inline !important; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}
@media (min-width: 768px) {
    body.pk .mobile-search-toggle, body.pk .mobile-menu-toggle, body.pk .mobile-search-container { display: none; }
}
@media (max-width: 767px) {
    body.pk .mobile-search-toggle, body.pk .mobile-menu-toggle {
        width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--pk-soft); color: var(--pk-ink);
        display: grid; place-items: center;
    }
}
body.pk .mobile-menu-content { background: var(--pk-bg); }
body.pk .mobile-nav-link { border-radius: 12px; color: var(--pk-ink); font-weight: 500; }
body.pk .mobile-nav-link.active { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
@media (max-width: 767px) {
    body.pk .header-container .header-main > .container { padding: 10px 16px; }
    body.pk .header-left { flex: 1; }
    body.pk .header-brand .logo-image { height: 32px; }
    body.pk .mobile-search-container .search-input { border-radius: 999px; background: var(--pk-soft); border: 0; height: 42px; padding: 0 16px; }
    body.pk .btn-search-mobile { border-radius: 999px; background: var(--pk-dark); color: #fff; border: 0; }
}

/* ---------- Footer -------------------------------------------------------- */
body.pk .footer { background: var(--pk-surface); border-top: 1px solid var(--pk-line); color: var(--pk-muted); padding: 0; margin: 0; }
body.pk .pk-footer { max-width: var(--pk-wrap); margin: 0 auto; padding: 56px var(--pk-gutter) 28px; display: flex; flex-direction: column; gap: 40px; }
/* A real grid: the brand takes the widest track, the link columns share the
   rest of the width. Tablet: brand on its own row, the columns below.
   Phone: Menu and Account side by side, brand and "Seguici" full width. */
body.pk .pk-footer__cols { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(140px, 1fr)); gap: 40px 48px; }
body.pk .pk-footer__cols:has(.social-links) { grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(140px, 1fr)) minmax(240px, 1.4fr); }
body.pk .pk-footer__brand { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.pk .pk-footer__brand p { max-width: 360px; }
@media (max-width: 1024px) {
    body.pk .pk-footer__cols, body.pk .pk-footer__cols:has(.social-links) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.pk .pk-footer__cols:has(.social-links) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.pk .pk-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    body.pk .pk-footer__cols, body.pk .pk-footer__cols:has(.social-links) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
    body.pk .pk-footer__col:has(.social-links) { grid-column: 1 / -1; }
}
body.pk .pk-footer__brand .footer-logo { height: 32px; max-height: 32px; width: auto; max-width: 100%; display: block; margin: 0; object-fit: contain; object-position: left center; }
body.pk .pk-footer__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pk-muted); }
body.pk .pk-footer__brand h5 { margin: 0; font-family: var(--pk-serif); font-size: 22px; color: var(--pk-ink); }
body.pk .pk-footer__col { min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
/* Four rows, like Menu and Account beside it: the profiles fill the first
   column top to bottom, then flow into a second one. */
body.pk .pk-footer__col ul.social-links { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px 24px; }
/* A grid cell holding an inline-flex link keeps the baseline gap below it (0.8px a row), which drifted the rows off Menu's. */
body.pk .pk-footer__col ul.social-links li { display: flex; }

body.pk .pk-footer__col h5 { margin: 0 0 4px; font: 600 12px/1.2 var(--pk-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-faint); }
body.pk .pk-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.pk .pk-footer__col a { color: var(--pk-ink); text-decoration: none; font-weight: 400; }
/* "Seguici" (shown once a social profile is set in Settings): plain links like
   the other columns, the brand icon in front, not the legacy grey tiles. */
body.pk .pk-footer .social-links a { width: auto; height: auto; padding: 0; border-radius: 0; background: none; justify-content: flex-start; gap: 8px; color: var(--pk-ink); }
body.pk .pk-footer .social-links a:hover { background: none; color: var(--pk-accent-ink); }
body.pk .pk-footer .social-links a i { width: 16px; margin: 0; text-align: center; line-height: 1; color: var(--pk-faint); }
body.pk .pk-footer .social-links a:hover i { color: var(--pk-accent-ink); }
/* 24px targets (WCAG 2.2 AA) instead of the old 44px rows: the list keeps the
   design's 10px rhythm. */
body.pk .footer .pk-footer__col ul li a { min-height: 24px; display: inline-flex; align-items: center; }
body.pk .pk-footer__col a:hover { color: var(--pk-accent-ink); }
body.pk .pk-footer__bottom {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px;
    border-top: 1px solid var(--pk-line); font-size: 13px; color: var(--pk-faint);
}
body.pk .pk-footer__bottom a { color: var(--pk-accent-ink); text-decoration: none; }
body.pk .pk-footer__bottom a.pk-footer__rss { color: var(--pk-faint); }

/* ---------- Book card ------------------------------------------------------
   The cover as a 3D book: spine, page block, gloss. Without a cover it is a
   blank book with the title set on it.
   Card style: "Classica" by default (the book alone, no panel). "Tinta" sets
   the book on a panel tinted from the cover's own colour (--pk-tone): add
   the class pk-cards-tinted to <body>. */
:root { --pk-card-panel-bg: transparent; --pk-card-panel-pad: 0; }
/* Declared on the panel: --pk-tone is set per panel by pinakes-2026.js. */
body.pk-cards-tinted :is(.pk-card__panel, .book-card .book-image-container) { --pk-card-panel-bg: var(--pk-tone, #eeeaec); --pk-card-panel-pad: 18px 22px 22px; }
.pk-card { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; color: inherit; }
.pk-card__link { position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.pk-card__link:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 4px; }
.pk-card__panel {
    position: relative; background: var(--pk-card-panel-bg); padding: var(--pk-card-panel-pad); border-radius: 16px;
    transition: transform .3s var(--pk-ease);
}
.pk-card:hover .pk-card__panel { transform: translateY(-4px); }
.pk-book { position: relative; aspect-ratio: 2 / 3; perspective: 900px; }
.pk-book__pages {
    position: absolute; top: 3px; bottom: 3px; right: -5px; width: 12px; border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(90deg, #f6f2ee 0 1px, #e4ddd6 1px 2px);
    box-shadow: inset -1px 0 0 #d6cec6, 0 10px 18px -10px rgba(50, 15, 35, .35);
}
.pk-book__cover {
    position: absolute; inset: 0; border-radius: 2px 5px 5px 2px; overflow: hidden; background: var(--pk-cover-blank);
    transform-origin: left center; transition: transform .45s var(--pk-ease), box-shadow .45s;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 6px 10px -4px rgba(50, 15, 35, .25), 0 24px 32px -16px rgba(50, 15, 35, .5);
}
.pk-card:hover .pk-book__cover {
    transform: rotateY(-14deg);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 12px 10px 18px -6px rgba(50, 15, 35, .3), 20px 30px 40px -16px rgba(50, 15, 35, .55);
}
.pk-book__blank {
    --pk-blank-paper: oklch(0.3220388 0.0387159 319.06746);
    --pk-blank-ink: oklch(0.9491172 0.0221489 80.68704);
    position: absolute; inset: 0; padding: 27% 10% 12% 12%; display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; isolation: isolate;
    color: var(--pk-blank-ink); background: var(--pk-blank-paper);
    background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--pk-blank-ink) 2.5%, transparent) 0 .5px, transparent .5px 5px);
}
.pk-book__blank--tone-1 { --pk-blank-paper: oklch(0.3573442 0.0260737 168.96328); }
.pk-book__blank--tone-2 { --pk-blank-paper: oklch(0.3542877 0.0356628 251.95548); }
.pk-book__blank--tone-3 { --pk-blank-paper: oklch(0.3540994 0.0485377 32.97724); }
.pk-book__cover, .pk-bigcover, .pk-fan__book, body.pk .loans-container .item-cover { container-type: inline-size; }
.pk-book__blank::before { content: ''; position: absolute; inset: 7%; border: 1px solid color-mix(in srgb, var(--pk-blank-ink) 22%, transparent); pointer-events: none; z-index: -1; }
.pk-book__blank::after { content: ''; position: absolute; width: 90%; aspect-ratio: 1; left: 33%; top: 80%; border: 1px solid color-mix(in srgb, var(--pk-blank-ink) 13%, transparent); border-radius: 50%; pointer-events: none; z-index: -1; }
.pk-book__blank-author { grid-row: 1; font-size: clamp(9px, 6.5cqw, 18px); line-height: 1.35; letter-spacing: .035em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pk-book__blank-title { grid-row: 2; align-self: center; font-family: var(--pk-serif); font-weight: 500; font-size: clamp(12px, 12cqw, 38px); line-height: 1.16; letter-spacing: -.015em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; max-height: 100%; }
.pk-book__blank-foot { grid-row: 3; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pk-book__rule { width: 24%; height: 1px; background: color-mix(in srgb, var(--pk-blank-ink, #f6edde) 60%, transparent); }
.pk-book__blank > .pk-book__rule { grid-row: 3; }
.pk-book__brand { font-size: clamp(8px, 5.5cqw, 15px); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-book__blank--compact { padding: 18% 10% 12% 12%; gap: 0; }
.pk-book__blank--compact .pk-book__blank-title { font-size: clamp(8px, 12cqw, 12px); -webkit-line-clamp: 4; }
/* The artwork fills the whole book (object-fit: cover): a cover that is not
   2:3 is cropped to the frame, never framed by bands. The opaque background
   keeps the blank-book title hidden while the image loads. */
.pk-book__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--pk-cover-blank); display: block; }
.pk-book__img.is-missing { display: none; }
.pk-book__spine {
    position: absolute; inset: 0 auto 0 0; width: 14px; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(0,0,0,.08) 3px, rgba(255,255,255,.28) 5px, rgba(255,255,255,0) 8px, rgba(0,0,0,.12) 10px, rgba(0,0,0,0) 14px);
}
.pk-book__gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(0,0,0,.12) 100%); }
.pk-book__edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.2); }
.pk-card__status {
    position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 8px; border-radius: 999px; background: rgba(255,255,255,.94);
    font-size: 11px; font-weight: 600; color: var(--pk-ink); box-shadow: 0 2px 6px rgba(0,0,0,.08);
    max-width: calc(100% - 56px); line-height: 1.3; letter-spacing: normal; text-transform: none; border: 0;
}
.pk-card__status::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-dot, var(--pk-neutral)); }
.pk-card__status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-card__status i { font-size: 10px; }
.pk-card__status.status-available { --pk-dot: var(--pk-ok); }
.pk-card__status.status-reserved { --pk-dot: var(--pk-warn); }
.pk-card__status.status-borrowed { --pk-dot: var(--pk-accent); }
.pk-card__status.status-unavailable, .pk-card__status.availability-pending { --pk-dot: var(--pk-neutral); }
.pk-card__media {
    position: absolute; bottom: 10px; left: 10px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--pk-ink); font-size: 11px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.pk-heart {
    position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.94); border: 0; padding: 0; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: transform .2s; color: var(--pk-accent-ink);
}
.pk-heart:hover { transform: scale(1.08); }
.pk-heart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.pk-heart.is-on svg { fill: currentColor; }
.pk-card__body { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
body.pk .pk-card__title {
    margin: 0; font-family: var(--pk-serif); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty;
}
body.pk .pk-card__title a { color: var(--pk-ink); text-decoration: none; background: none; }
.pk-card__subtitle { margin: 0; font-size: 13px; color: var(--pk-faint); font-style: italic; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pk-card__author, .pk-card__meta { margin: 0; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-card__author { font-size: 13px; color: var(--pk-muted); }
.pk-card__meta { font-size: 12px; color: var(--pk-faint); }

.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 40px 24px; }
.pk-grid--catalog { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 40px 22px; }
@media (max-width: 520px) {
    .pk-grid, .pk-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
    .pk-card__panel { padding: 12px 14px 14px; }
}

/* Row card (catalogue "List" view) */

/* ---------- Section headings --------------------------------------------- */
.pk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.pk-section-head__text { display: flex; flex-direction: column; gap: 8px; }
body.pk .pk-h2 { margin: 0; font-family: var(--pk-serif); font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1; }
.pk-lead { margin: 0; color: var(--pk-muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 640px) { body.pk .pk-h2 { font-size: 34px; } }

/* ---------- Home: hero ---------------------------------------------------- */
.pk-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--pk-accent-softer) 0%, var(--pk-bg) 100%); }
/* The search suggestions open below the hero's search box: while they are
   shown the hero lets them out downwards (still clipping sideways, so the
   decorations never widen the page) and sits above the sections that follow,
   instead of cutting them off under the statistics band. */
.pk-hero:has(.search-results.is-visible) { overflow-x: clip; overflow-y: visible; z-index: 30; }
.pk-hero__inner { max-width: var(--pk-wrap); margin: 0 auto; padding: 72px var(--pk-gutter) 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.pk-hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pk-hero__badge {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: var(--pk-surface); border: 1px solid var(--pk-accent-line); font-size: 13px; font-weight: 500; color: var(--pk-accent-strong);
}
.pk-hero__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-accent); }
body.pk .pk-hero__title { margin: 0; font-family: var(--pk-serif); font-weight: 500; font-size: clamp(44px, 6vw, 76px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; color: var(--pk-ink); }
body.pk .pk-hero__title em { color: var(--pk-accent-ink); }
.pk-hero__subtitle { margin: 0; font-size: 19px; line-height: 1.5; color: var(--pk-text); max-width: 480px; text-wrap: pretty; }
.pk-search {
    display: flex; align-items: center; gap: 8px; background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 16px;
    padding: 8px 8px 8px 18px; max-width: 560px; box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--pk-accent-strong) 35%, transparent);
}
.pk-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--pk-muted); stroke-width: 2; stroke-linecap: round; }
body.pk .pk-search input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 16px; background: transparent; color: var(--pk-ink); padding: 8px 0; box-shadow: none; }
/* The field has no frame of its own: the whole search box shows the focus. */
.pk-search:focus-within { border-color: var(--pk-focus); box-shadow: 0 0 0 1px var(--pk-focus), 0 12px 32px -18px color-mix(in srgb, var(--pk-accent-strong) 35%, transparent); }
/* The field draws nothing of its own when focused: the whole rounded box
   already shows the focus (:focus-within above). A form-reset rule gave the
   input a 1px accent ring, a second rectangle around the typed text. */
body.pk .pk-search input:focus, body.pk .pk-search input:focus-visible { outline: none; box-shadow: none !important; border-color: transparent; }
.pk-search button {
    min-height: 44px; padding: 12px 22px; border-radius: 11px; border: 0; background: var(--pk-button); color: var(--pk-button-text);
    font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .2s;
}
.pk-search button:hover { background: var(--pk-button-hover); }
.pk-hero__links { display: flex; gap: 20px; font-size: 15px; font-weight: 500; flex-wrap: wrap; }
body.pk .pk-hero__links a { color: var(--pk-ink); display: flex; gap: 6px; align-items: center; text-decoration: none; }
.pk-hero__links a span { color: var(--pk-accent-ink); }
.pk-fan { flex: 1 1 380px; min-width: 0; height: 420px; position: relative; overflow: hidden; }
.pk-fan__book {
    position: absolute; top: 50%; left: 50%; width: 160px; aspect-ratio: 2 / 3; margin: -120px 0 0 -80px; border-radius: 4px 7px 7px 4px;
    overflow: hidden; background: var(--pk-cover-blank);
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 30px 50px -20px rgba(60,10,35,.45);
    transform: var(--pk-t); transition: transform .35s var(--pk-ease);
}
.pk-fan__book:hover { transform: var(--pk-th); }
.pk-fan__book .pk-book__blank { padding: 18px; }
.pk-fan__book .pk-book__blank-title { font-size: 18px; }
.pk-fan__book .pk-book__spine { width: 7px; background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.18), rgba(0,0,0,0)); }
.pk-fan__book:nth-child(1) { --pk-t: translate(-78px, 30px) rotate(-12deg); --pk-th: translate(-78px, 12px) rotate(-7.2deg); z-index: 1; }
.pk-fan__book:nth-child(2) { --pk-t: translate(-28px, -10px) rotate(-4deg); --pk-th: translate(-28px, -28px) rotate(-2.4deg); z-index: 2; }
.pk-fan__book:nth-child(3) { --pk-t: translate(24px, 14px) rotate(5deg); --pk-th: translate(24px, -4px) rotate(3deg); z-index: 3; }
.pk-fan__book:nth-child(4) { --pk-t: translate(74px, -6px) rotate(11deg); --pk-th: translate(74px, -24px) rotate(6.6deg); z-index: 4; }
/* Below 924px the fan no longer fits beside the text (440 + 48 + 380 + the
   gutters): the hero stacks, with the books first and the title under them. */
@media (max-width: 923px) {
    .pk-hero__inner { flex-direction: column; align-items: stretch; padding-top: 24px; }
    .pk-hero__text { flex: 0 0 auto; }
    .pk-fan { order: -1; flex: 0 0 auto; width: 100%; height: 340px; }
    /* Stacked, the books' shadow falls toward the title: let it through below
       (clip only the sides, where a rotated book could stick out), lift the
       books a little, and keep the text painted above the shadow. */
    .pk-fan { overflow-x: clip; overflow-y: visible; }
    .pk-fan__book { top: 45%; }
    .pk-hero__text { position: relative; z-index: 5; }
}
@media (max-width: 520px) {
    .pk-hero__inner { padding: 8px 16px 40px; gap: 16px; }
    .pk-fan { height: 300px; }
    .pk-fan__book { width: 128px; margin: -96px 0 0 -64px; }
    .pk-search { padding-left: 14px; }
    .pk-search button { padding: 11px 16px; }
}

/* Stats strip */
.pk-stats { border-top: 1px solid var(--pk-line); border-bottom: 1px solid var(--pk-line); background: var(--pk-surface); }
.pk-stats__inner { max-width: var(--pk-wrap); margin: 0 auto; padding: 0 var(--pk-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pk-stat { padding: 26px 0; display: flex; align-items: baseline; gap: 10px; }
.pk-stat__n { font-family: var(--pk-serif); font-size: 40px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--pk-ink); }
.pk-stat__n--accent { color: var(--pk-accent-ink); }
.pk-stat__l { font-size: 14px; color: var(--pk-muted); }
@media (max-width: 520px) { .pk-stats__inner { grid-template-columns: repeat(2, 1fr); padding: 0 16px; } .pk-stat { padding: 18px 0; } .pk-stat__n { font-size: 32px; } }

/* Home sections */
.pk-section { max-width: var(--pk-wrap); margin: 0 auto; padding: 80px var(--pk-gutter) 40px; }
.pk-section--features { padding: 64px var(--pk-gutter) 88px; }
.pk-more { display: flex; justify-content: center; margin-top: 48px; }
.pk-features__head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; margin-bottom: 40px; }
.pk-features__head .pk-h2 { flex: 1 1 320px; }
.pk-features__head .pk-lead { flex: 1 1 320px; max-width: 440px; }
.pk-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.pk-feature { padding: 28px; border-radius: 20px; background: var(--pk-surface); border: 1px solid var(--pk-line); display: flex; flex-direction: column; gap: 14px; }
.pk-feature__n { font-family: var(--pk-serif); font-style: italic; font-size: 28px; color: var(--pk-accent-ink); line-height: 1; }
body.pk .pk-feature__title { margin: 0; font-family: var(--pk-sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--pk-ink); }
.pk-feature__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pk-text); }

/* Dark story band (the CMS "text content" section) */
.pk-story { background: var(--pk-dark); color: #f4eff2; }
.pk-story__inner { max-width: var(--pk-wrap); margin: 0 auto; padding: 96px var(--pk-gutter); display: flex; flex-wrap: wrap; gap: 48px 80px; align-items: flex-start; }
.pk-story__aside { flex: 1 1 340px; display: flex; flex-direction: column; gap: 14px; }
.pk-story__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-accent-bright); }
body.pk .pk-story__title { margin: 0; font-family: var(--pk-serif); font-weight: 400; font-size: clamp(40px, 12vw, 120px); line-height: .9; letter-spacing: -.03em; font-style: italic; color: #fff; overflow-wrap: anywhere; hyphens: auto; }
.pk-story__figure { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.pk-story__figure strong { font-family: var(--pk-serif); font-weight: 400; font-size: 56px; color: var(--pk-accent-bright); letter-spacing: -.02em; line-height: 1; }
.pk-story__figure span { font-size: 15px; color: #b9b0b6; }
.pk-story__body { flex: 1 1 440px; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.65; color: #d8d0d5; max-width: 620px; }
.pk-story__body p { margin: 0; }
.pk-story__body strong { color: #fff; }
.pk-story__body a { color: var(--pk-accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.pk-story--plain .pk-story__title { font-style: normal; font-size: clamp(40px, 5vw, 64px); line-height: 1; }

/* Call to action */
.pk-cta-wrap { max-width: var(--pk-wrap); margin: 0 auto; padding: 80px var(--pk-gutter); }
.pk-cta { border-radius: 28px; background: var(--pk-button); color: var(--pk-button-text); padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.pk-cta__text { display: flex; flex-direction: column; gap: 10px; }
body.pk .pk-cta h2 { margin: 0; font-family: var(--pk-serif); font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1; color: var(--pk-button-text); }
.pk-cta p { margin: 0; font-size: 17px; color: var(--pk-button-text); }
.pk-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
body.pk .pk-cta__btn { padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s; }
body.pk .pk-cta__btn--solid { background: var(--pk-button-text); color: color-mix(in srgb, var(--pk-button) 78%, #000); }
body.pk .pk-cta__btn--solid:hover { background: var(--pk-dark); color: #fff; }
body.pk .pk-cta__btn--line { border: 1px solid color-mix(in srgb, var(--pk-button-text) 60%, transparent); color: var(--pk-button-text); }
body.pk .pk-cta__btn--line:hover { background: color-mix(in srgb, var(--pk-button-text) 12%, transparent); color: var(--pk-button-text); }
@media (max-width: 640px) { .pk-cta { padding: 36px 24px; border-radius: 22px; } body.pk .pk-cta h2 { font-size: 34px; } }

/* ---------- Breadcrumb + page title (catalogue, book, every other page) --- */
.pk-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--pk-muted); margin: 0 0 18px; padding: 0; list-style: none; }
body.pk .pk-crumbs a { color: var(--pk-muted); text-decoration: none; }
body.pk .pk-crumbs a:hover { color: var(--pk-accent-ink); }
.pk-crumbs [aria-current] { color: var(--pk-ink); max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-crumbs__sep { color: var(--pk-muted); }
.pk-page-head { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.pk-page-head__text { display: flex; flex-direction: column; gap: 8px; }
body.pk .pk-h1 { margin: 0; font-family: var(--pk-serif); font-weight: 500; font-size: 56px; letter-spacing: -.025em; line-height: 1; }
@media (max-width: 640px) { body.pk .pk-h1 { font-size: 42px; } }

/* ---------- Pagination ---------------------------------------------------- */

/* ---------- Motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* Nothing on a public page moves: no transitions, no hover lifts, no
       turning icons. */
    body.pk *, body.pk *::before, body.pk *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .pk-card:hover .pk-card__panel, .pk-card:hover .pk-book__cover, .pk-heart:hover, .pk-fan__book:hover,
    body.pk .book-card:hover .book-image-container, body.pk .carousel-book-cover:hover,
    body.pk .loans-container .item-cover:hover, body.pk .filters-mobile-toggle[aria-expanded="true"] i { transform: none !important; }
}

/* "Details" on a card: a quiet text link, the whole card is clickable too. */
body.pk .pk-card .pk-card__actions { margin-top: 4px; position: relative; z-index: 2; }
body.pk .pk-card a.pk-card__details {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; min-height: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: var(--pk-accent-ink); font: 600 13px/1.4 var(--pk-sans); letter-spacing: normal; text-transform: none;
}
body.pk .pk-card a.pk-card__details:hover { background: none; color: var(--pk-accent-strong); }

/* Feature number with the icon the CMS assigns next to it. */
.pk-feature__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-feature__icon { color: var(--pk-faint); font-size: 18px; width: auto; height: auto; background: none; border: 0; display: inline-flex; }

/* ---------- Neutralise the previous card / grid rules ---------------------
   catalog-pages.css and the layout still style .book-card, .books-grid,
   .book-status-badge, .book-actions for the pages not yet on the new card.
   On a .pk-card the new design wins. */
body.pk .books-grid.pk-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 40px 24px; align-items: stretch; }
body.pk .books-grid.pk-grid--catalog { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 40px 22px; }
@media (max-width: 520px) {
    body.pk .books-grid.pk-grid, body.pk .books-grid.pk-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}
body.pk .book-card.pk-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; height: auto; overflow: visible; transform: none; }
body.pk .book-card.pk-card:hover { transform: none; box-shadow: none; }
body.pk .pk-card .book-image-container.pk-card__panel {
    aspect-ratio: auto; height: auto; overflow: visible; margin: 0; display: block;
    background: var(--pk-card-panel-bg); padding: var(--pk-card-panel-pad); border-radius: 16px; border: 0; box-shadow: none;
}
body.pk .pk-card:hover .book-image-container.pk-card__panel { transform: translateY(-4px); box-shadow: none; }
body.pk .pk-card .book-image-container::after { display: none; }
body.pk .pk-card .book-image { transform: none; }
body.pk .pk-card .book-status-badge.pk-card__status {
    position: absolute; top: 10px; left: 10px; right: auto; bottom: auto; transform: none;
    display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: var(--pk-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    font: 600 11px/1.3 var(--pk-sans); letter-spacing: normal; text-transform: none; border: 0; width: auto;
}
body.pk .pk-card .book-media-badge.pk-card__media { position: absolute; bottom: 10px; left: 10px; top: auto; right: auto; }
body.pk .pk-card .book-content.pk-card__body { padding: 0 2px; gap: 4px; display: flex; flex-direction: column; background: none; }
/* Grid: the title always takes its two lines, so a one-line title does not
   lift the author, publisher and Details of its card above its neighbours. */
body.pk .pk-card .book-title.pk-card__title { min-height: 2.4em; margin: 0; font-size: 17px; }
body.pk .pk-card .book-author.pk-card__author { margin: 0; font-size: 13px; line-height: 1.35; color: var(--pk-muted); }
body.pk .pk-card .book-meta.pk-card__meta { margin: 0; font-size: 12px; line-height: 1.35; color: var(--pk-faint); }
body.pk .pk-card .book-subtitle.pk-card__subtitle { margin: 0; font-size: 13px; color: var(--pk-faint); }
body.pk .pk-card .book-actions.pk-card__actions { margin: auto 0 0; padding: 6px 0 0; display: block; }
body.pk .pk-card .book-actions a.pk-card__details,
body.pk .pk-card .book-actions a.pk-card__details:hover {
    width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--pk-accent-ink); font: 600 13px/1.4 var(--pk-sans); letter-spacing: normal; text-transform: none; justify-content: flex-start;
}
body.pk .pk-card .book-actions a.pk-card__details:hover { color: var(--pk-accent-strong); }

/* Hero: the old .hero-content centred everything. */
body.pk .pk-hero .pk-hero__inner.hero-content { max-width: var(--pk-wrap); width: 100%; text-align: left; margin: 0 auto; animation: none; box-sizing: border-box; }
body.pk .pk-hero .hero-search-container, body.pk .pk-hero .hero-search-form { margin: 0; max-width: 560px; width: 100%; }
body.pk .pk-hero .hero-quick-link { padding: 0; border: 0; background: none; text-transform: none; letter-spacing: normal; font-size: 15px; font-weight: 500; min-height: 0; }
body.pk section.pk-story { padding: 0; }
body.pk section.pk-section { padding: 80px var(--pk-gutter) 40px; }
body.pk section.pk-section--features { padding: 64px var(--pk-gutter) 88px; }
body.pk section.pk-cta-wrap { padding: 80px var(--pk-gutter); background: transparent; }
body.pk section.pk-cta-wrap::before { display: none; }

/* ==========================================================================
   Catalogue (2026 design). The filters keep their ids, classes and the
   JavaScript that re-renders them; this only gives them the design's shape.
   ========================================================================== */
body.pk .catalog-header.pk-catalog-head { display: block; background: transparent; color: var(--pk-ink); padding: 40px 0 0; margin: 0; min-height: 0; text-align: left; }
body.pk .catalog-header.pk-catalog-head > .pk-wrap { width: 100%; }
/* Every page wrapper spans the full content width (1240px), like the header. */
body.pk .pk-wrap { width: 100%; }
body.pk .catalog-header.pk-catalog-head::before, body.pk .catalog-header.pk-catalog-head::after { display: none; }
body.pk .pk-catalog-head .breadcrumb.pk-crumbs { justify-content: flex-start; margin: 0 0 18px; padding: 0; background: none; font-size: 13px; }
body.pk .pk-catalog-head .breadcrumb-item { color: var(--pk-ink); padding: 0; }
body.pk .pk-catalog-head .breadcrumb-item::before { display: none; content: none; }
body.pk .pk-catalog-head .breadcrumb-item a { color: var(--pk-muted); opacity: 1; text-decoration: none; }
body.pk .pk-catalog-head .breadcrumb-item a:hover { color: var(--pk-accent-ink); }
body.pk .pk-catalog-head .catalog-title { color: var(--pk-ink); font-size: 56px; margin: 0; text-shadow: none; }
body.pk .pk-catalog-head .catalog-subtitle { color: var(--pk-muted); font-size: 16px; margin: 0; opacity: 1; }
body.pk .pk-catalog-head .catalog-header-content { text-align: left; max-width: none; padding: 0; margin: 0 0 36px; }
@media (max-width: 640px) { body.pk .pk-catalog-head .catalog-title { font-size: 42px; } }

.pk-catalog { padding: 0 0 88px; }
.pk-catalog__layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
/* The filters column has a width of its own: a quarter of the layout, 250 to
   300px. It never grows to its content: a publisher named in a hundred
   characters (shown with an ellipsis) still counted at full length in the
   column's minimum width, which pushed the books under the filters. */
.pk-filters { flex: 0 0 clamp(250px, 25%, 300px); min-width: 0; max-width: 100%; position: sticky; top: 88px; }
/* A zero basis: the results never wrap under the filters on their own, only when the
   filters take the full width below 860px. */
.pk-results { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 860px) { .pk-filters { position: static; flex-basis: 100%; } }

body.pk :is(.pk-filters, .filters-panel) .filters-panel { background: none; border: 0; box-shadow: none; padding: 0; position: static; max-height: none; overflow: visible; }
body.pk :is(.pk-filters, .filters-panel) .filters-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; background: none; }
body.pk :is(.pk-filters, .filters-panel) .filters-title { display: flex; align-items: center; gap: 7px; margin: 0; font: 600 12px/1.2 var(--pk-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-ink); }
body.pk :is(.pk-filters, .filters-panel) .filters-title i { font-size: 11px; color: var(--pk-accent-ink); }
body.pk :is(.pk-filters, .filters-panel) .filters-mobile-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink); }
body.pk .filters-mobile-toggle i { transition: transform .18s var(--pk-ease); }
body.pk .filters-mobile-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* Functional rules carried over from frontend-layouts.css, which the 2026
   design no longer loads: the filters fold on phones, a folded panel is
   really hidden, an empty meta line keeps its height without showing. */
@media (max-width: 768px) {
    body.pk :is(.pk-filters, .filters-panel) .filters-mobile-toggle { display: inline-flex; }
    body.pk .filters-content[hidden] { display: none !important; }
    /* Folded, the panel is just its "Filtri" bar: no room kept below it for
       the content it is not showing. */
    body.pk .filters-panel:has(> .filters-content[hidden]) { margin-bottom: 0; }
    body.pk .filters-panel:has(> .filters-content[hidden]) .filters-header { margin-bottom: 0; }
    body.pk .pk-catalog__layout:has(.filters-content[hidden]) { row-gap: 20px; }
}
/* An empty publisher line keeps the row aligned on desktop and collapses on phones. */
body.pk .book-meta-empty { visibility: hidden; }
@media (max-width: 520px) { body.pk .book-meta-empty { display: none !important; } }
body.pk .nav-links a::after { display: none !important; }
body.pk :is(.pk-filters, .filters-panel) .filters-content { display: flex; flex-direction: column; gap: 28px; padding: 0; }
body.pk :is(.pk-filters, .filters-panel) .filter-section { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
body.pk :is(.pk-filters, .filters-panel) .filter-title {
    margin: 0; padding: 0; border: 0; font: 600 12px/1.2 var(--pk-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted);
}

/* Availability: four rows, the active one on a white card with an accent edge. */
body.pk :is(.pk-filters, .filters-panel) .availability-options { display: flex; flex-direction: column; gap: 4px; }
body.pk :is(.pk-filters, .filters-panel) .availability-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px;
    border: 1px solid transparent; background: transparent; cursor: pointer; box-shadow: none; margin: 0; transform: none;
    width: 100%; font: inherit; color: inherit; text-align: left;
}
body.pk :is(.pk-filters, .filters-panel) .availability-option:hover { background: var(--pk-surface); }
body.pk :is(.pk-filters, .filters-panel) .availability-option.active { background: var(--pk-surface); border-color: var(--pk-accent); }
body.pk :is(.pk-filters, .filters-panel) .availability-option > * { min-width: 0; }
body.pk :is(.pk-filters, .filters-panel) .availability-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
body.pk :is(.pk-filters, .filters-panel) .availability-title { font-size: 14px; font-weight: 600; color: var(--pk-ink); margin: 0; }
body.pk :is(.pk-filters, .filters-panel) .availability-desc { font-size: 12px; color: var(--pk-muted); margin: 0; opacity: 1; }
body.pk :is(.pk-filters, .filters-panel) .availability-count { font-size: 13px; font-weight: 600; color: var(--pk-faint); background: none; padding: 0; min-width: 0; }
body.pk :is(.pk-filters, .filters-panel) .availability-option.active .availability-count { color: var(--pk-accent-ink); }

/* Search boxes (the catalogue search and the author finder). */
body.pk :is(.pk-filters, .filters-panel) .search-box, body.pk :is(.pk-filters, .filters-panel) .pk-filter-search {
    position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px;
    background: var(--pk-surface); border: 1px solid var(--pk-field-line);
}
body.pk :is(.pk-filters, .filters-panel) :is(.search-box, .pk-filter-search):focus-within { border-color: var(--pk-focus); box-shadow: 0 0 0 1px var(--pk-focus); }
body.pk :is(.pk-filters, .filters-panel) .search-box svg, body.pk :is(.pk-filters, .filters-panel) .pk-filter-search svg {
    position: static; order: -1; width: 14px; height: 14px; flex: none; fill: none; stroke: var(--pk-faint); stroke-width: 2; stroke-linecap: round; color: var(--pk-faint); transform: none;
}
body.pk :is(.pk-filters, .filters-panel) .search-box svg path { fill: currentColor; stroke: none; }
/* The box draws the field, so the input inside it draws nothing: it must outrank
   the generic field rule below (body.pk main :is(input[type=…])), or the input
   gets its own rule and fill inside the box's. */
body.pk main :is(.pk-filters, .filters-panel) :is(.search-box, .pk-filter-search) input:not([type=checkbox], [type=radio]) {
    flex: 1; min-width: 0; height: auto; border: 0; outline: none; background: transparent; padding: 0; font-size: 13px; color: var(--pk-ink); box-shadow: none;
}
/* 16px on phones, so iOS Safari does not zoom the page on focus. */
@media (max-width: 767px) {
    body.pk main :is(.pk-filters, .filters-panel) :is(.search-box, .pk-filter-search) input:not([type=checkbox], [type=radio]) { font-size: 16px; }
}
body.pk :is(.pk-filters, .filters-panel) .search-box:focus-within, body.pk :is(.pk-filters, .filters-panel) .pk-filter-search:focus-within { border-color: var(--pk-accent); }

/* Authors, publishers, genres: a list of checkbox rows in a white box. */
body.pk :is(.pk-filters, .filters-panel) #authors-filter, body.pk :is(.pk-filters, .filters-panel) #publishers-filter, body.pk :is(.pk-filters, .filters-panel) #genres-filter {
    display: flex; flex-direction: column; max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--pk-line); border-radius: 12px; background: var(--pk-surface); padding: 4px; gap: 0;
}
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--pk-ink);
    background: none; border: 0; text-decoration: none; flex: none; min-height: 0; margin: 0;
}
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option::before, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option::before, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option::before {
    content: ''; width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid var(--pk-field-line); background: var(--pk-surface); box-sizing: border-box;
}
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option:hover, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option:hover, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option:hover { background: var(--pk-row-hover); }
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option.active, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option.active, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option.active { font-weight: 600; }
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option.active::before, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option.active::before, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option.active::before {
    background: var(--pk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-color: var(--pk-accent);
}
body.pk :is(.pk-filters, .filters-panel) #authors-filter .filter-option > span:first-child, body.pk :is(.pk-filters, .filters-panel) #publishers-filter .filter-option > span:first-child, body.pk :is(.pk-filters, .filters-panel) #genres-filter .filter-option > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pk :is(.pk-filters, .filters-panel) .count-badge { background: none; color: var(--pk-faint); font-size: 12px; font-variant-numeric: tabular-nums; padding: 0; min-width: 0; border-radius: 0; font-weight: 400; }
body.pk :is(.pk-filters, .filters-panel) .pk-filter-total { font-size: 12px; color: var(--pk-faint); }
body.pk :is(.pk-filters, .filters-panel) .filter-back-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; color: var(--pk-accent-ink); text-decoration: none; background: none; border: 0; }
/* Hiding a non-match must win over the facet's ID-specific row styles and
   the generic filter-option display rules further down this stylesheet. */
body.pk :is(.pk-filters, .filters-panel) .filter-option.is-filtered-out { display: none !important; }

/* Media types: chips. */
body.pk :is(.pk-filters, .filters-panel) #media-types-filter { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; max-height: none; border: 0; padding: 0; background: none; }
body.pk :is(.pk-filters, .filters-panel) #media-types-filter .filter-option {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; line-height: 1.2;
    background: var(--pk-surface); color: var(--pk-ink); border: 1px solid var(--pk-line-2); text-decoration: none; min-height: 0; margin: 0; width: auto;
}
body.pk :is(.pk-filters, .filters-panel) #media-types-filter .filter-option:hover { border-color: var(--pk-ink); }
body.pk :is(.pk-filters, .filters-panel) #media-types-filter .filter-option.active { background: var(--pk-dark); color: #fff; border-color: var(--pk-dark); }
body.pk :is(.pk-filters, .filters-panel) #media-types-filter .count-badge { color: var(--pk-muted); opacity: 1; }

/* A facet folded to its selection (see applyFacetCollapse()). */
body.pk :is(.pk-filters, .filters-panel) .facet-is-collapsed { border: 0; background: none; padding: 0; max-height: none; }
body.pk :is(.pk-filters, .filters-panel) .facet-collapsed { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); font-size: 13px; font-weight: 500; border: 0; }
body.pk :is(.pk-filters, .filters-panel) .facet-collapsed-remove { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
body.pk :is(.pk-filters, .filters-panel) .facet-change-link { font-size: 13px; color: var(--pk-accent-ink); margin-left: 8px; }

/* Year range: accent track, white thumbs with an accent ring. */
body.pk :is(.pk-filters, .filters-panel) .year-range { display: flex; flex-direction: column; gap: 10px; padding: 0; }
body.pk :is(.pk-filters, .filters-panel) .year-range-label { display: none; }
body.pk :is(.pk-filters, .filters-panel) .year-slider-container { position: relative; height: 24px; margin: 0; background: transparent; border-radius: 0; }
body.pk :is(.pk-filters, .filters-panel) .year-slider-container::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 2px; background: #e8e2e5; }
body.pk :is(.pk-filters, .filters-panel) .year-slider-track { position: absolute; top: 11px; height: 3px; border-radius: 2px; background: var(--pk-accent); z-index: 1; }
body.pk :is(.pk-filters, .filters-panel) .year-slider { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
body.pk :is(.pk-filters, .filters-panel) .year-slider::-webkit-slider-runnable-track { background: none; height: 24px; }
body.pk :is(.pk-filters, .filters-panel) .year-slider::-moz-range-track { background: none; height: 24px; }
body.pk :is(.pk-filters, .filters-panel) .year-slider::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: #fff; border: 2px solid var(--pk-accent); box-shadow: none; cursor: pointer; }
body.pk :is(.pk-filters, .filters-panel) .year-slider::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--pk-accent); cursor: pointer; }
body.pk :is(.pk-filters, .filters-panel) .year-values { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--pk-text); }
body.pk :is(.pk-filters, .filters-panel) .year-value { background: none; border: 0; padding: 0; font-size: 13px; color: var(--pk-text); font-weight: 400; }
body.pk :is(.pk-filters, .filters-panel) .year-reset { background: none; border: 0; color: var(--pk-faint); cursor: pointer; padding: 4px; }
body.pk :is(.pk-filters, .filters-panel) .year-reset:hover { color: var(--pk-accent-ink); }

body.pk :is(.pk-filters, .filters-panel) .clear-all-btn { display: inline-flex; justify-content: flex-start; align-self: flex-start; background: none; border: 0; padding: 0; width: auto; color: var(--pk-accent-ink); font: 500 14px/1.3 var(--pk-sans); cursor: pointer; text-align: left; box-shadow: none; }
body.pk :is(.pk-filters, .filters-panel) .clear-all-btn:hover { color: var(--pk-accent-strong); background: none; }

/* Results bar */
body.pk .pk-results .results-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin: 0;
    padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--pk-line); background: none; box-shadow: none;
}
body.pk .pk-results .results-info { font-size: 15px; color: var(--pk-ink); display: flex; gap: 5px; align-items: baseline; }
body.pk .pk-results .results-info strong { color: var(--pk-ink); font-weight: 700; font-size: 15px; }
.pk-results__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.pk .pk-results .sort-select {
    height: 38px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--pk-line-2); background-color: var(--pk-surface); font-size: 14px; color: var(--pk-ink); box-shadow: none;
}
body.pk .pk-results .clear-filters-top-btn {
    height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink);
    font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; box-shadow: none;
}
body.pk .pk-results .clear-filters-top-btn:hover { border-color: var(--pk-ink); }
.pk-view { display: flex; padding: 3px; border-radius: 10px; background: var(--pk-soft); }
.pk-view__btn { padding: 6px 12px; border-radius: 8px; border: 0; background: transparent; font: 500 13px/1.2 var(--pk-sans); color: var(--pk-ink); cursor: pointer; }
.pk-view__btn.is-active { background: var(--pk-surface); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
body.pk .pk-results .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; border: 0; }
body.pk .pk-results .active-filters-title { font-size: 13px; color: var(--pk-muted); margin: 0; }
body.pk .pk-results .filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.pk .pk-results .filter-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); font-size: 13px; font-weight: 500; border: 0; }
body.pk .pk-results .filter-tag-remove { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
body.pk .pk-results .empty-state { padding: 64px 24px; border-radius: 20px; border: 1px dashed var(--pk-line-2); text-align: center; background: none; display: flex; flex-direction: column; gap: 10px; align-items: center; grid-column: 1 / -1; }
body.pk .pk-results .empty-state-title { font-family: var(--pk-serif); font-size: 26px; font-weight: 500; margin: 0; }
body.pk .pk-results .empty-state-text { color: var(--pk-muted); font-size: 15px; margin: 0; }
body.pk .pk-results .empty-state .btn-cta { margin-top: 8px; padding: 10px 18px; border-radius: 999px; background: var(--pk-dark); color: #fff; border: 0; font-size: 14px; font-weight: 600; }

/* Pagination (server-rendered and re-rendered by the catalogue script). */
body.pk .pagination { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
body.pk .pagination .page-item { margin: 0; }
body.pk .pagination .page-link {
    min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 12px; display: grid; place-items: center;
    border: 1px solid var(--pk-line-2); background: transparent; color: var(--pk-ink); font-size: 14px; text-decoration: none; box-shadow: none;
}
body.pk .pagination .page-link:hover { border-color: var(--pk-ink); background: transparent; color: var(--pk-ink); }
body.pk .pagination .page-item.active .page-link { background: var(--pk-dark); border-color: var(--pk-dark); color: #fff; font-weight: 600; }

/* Cards in a row line up: the body fills the card and "Details" sits at the
   bottom, whatever the title, subtitle and publisher lines took. */
body.pk .book-card.pk-card { height: 100%; }
body.pk .pk-card .book-content.pk-card__body { flex: 1 1 auto; }

/* List view: the same cards as rows. The cover panel dissolves (display:
   contents) so its children (book, status, media type, heart) become cells of
   one grid with the text: cover | title, author · publisher, Details | status
   with the digital editions spelled out | heart. Nothing is hidden. */
body.pk .books-grid.pk-grid.is-list { display: flex; flex-direction: column; gap: 10px; }
body.pk .is-list .book-card.pk-card {
    position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto;
    grid-template-areas: "cover body status heart" "cover body media heart";
    align-items: center; column-gap: 18px; row-gap: 6px; padding: 14px 16px; height: auto;
    border-radius: 16px; background: var(--pk-surface); border: 1px solid var(--pk-line); transition: border-color .2s, box-shadow .2s;
}
body.pk .is-list .book-card.pk-card:hover { border-color: var(--pk-accent-hover-line); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--pk-accent) 50%, transparent); }
body.pk .is-list .pk-card .book-image-container.pk-card__panel { display: contents; }
body.pk .is-list .pk-card .pk-card__link { border-radius: 16px; }
body.pk .is-list .pk-card .pk-book { grid-area: cover; width: 64px; align-self: center; }
body.pk .is-list .pk-card .pk-book__pages { display: none; }
body.pk .is-list .pk-card:hover .pk-book__cover { transform: none; }
body.pk .is-list .pk-card .pk-book__blank { padding: 8px 6px; gap: 0; }
body.pk .is-list .pk-card .pk-book__blank-author { display: none; }
body.pk .is-list .pk-card .pk-book__blank-title { font-size: 9px; line-height: 1.15; -webkit-line-clamp: 4; }
body.pk .is-list .pk-card .pk-book__blank-foot { display: none; }
body.pk .is-list .pk-card .book-content.pk-card__body {
    grid-area: body; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 3px;
}
body.pk .is-list .pk-card .book-content.pk-card__body > * { flex: 0 0 100%; }
body.pk .is-list .pk-card .book-title.pk-card__title { font-size: 19px; -webkit-line-clamp: 1; height: auto !important; min-height: 0; }
body.pk .is-list .pk-card .book-subtitle.pk-card__subtitle { height: auto !important; }
/* The grid's row-alignment placeholders mean nothing in a list. */
body.pk .is-list .pk-card .subtitle-ph, body.pk .is-list .pk-card .book-meta-empty { display: none; }
body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__author, body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__meta { flex: 0 1 auto; max-width: 100%; font-size: 13px; }
body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__author { font-size: 14px; color: var(--pk-text); }
body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__meta:not(.book-meta-empty)::before { content: '\00b7'; margin: 0 8px; color: var(--pk-faint); }
body.pk .is-list .pk-card .book-actions.pk-card__actions { margin: 2px 0 0; padding: 0; }
body.pk .is-list .pk-card .book-status-badge.pk-card__status {
    grid-area: status; position: static; transform: none; justify-self: end; align-self: end; max-width: none;
    background: none; box-shadow: none; padding: 0; font-size: 13px; font-weight: 500; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end;
}
/* An article's badge is the record kind on the dark ink: it keeps its pill. */
body.pk .is-list .pk-card .book-status-badge.pk-card__status.status-article { background: var(--pk-dark); color: #fff; padding: 4px 10px; font-size: 12px; font-weight: 600; }
/* Without a media-type badge the status sits level with the text. */
body.pk .is-list .book-card.pk-card:not(:has(.pk-card__media)) { grid-template-areas: "cover body status heart"; }
body.pk .is-list .book-card.pk-card:not(:has(.pk-card__media)) .pk-card__status { align-self: center; }
/* Digital editions: the plugin's icons get their own name in a list. */
body.pk .is-list .pk-card .pk-card__status .digital-badge-icon {
    display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 3px 9px; border-radius: 999px;
    background: var(--pk-soft); font-size: 12px !important; opacity: 1 !important; line-height: 1.2;
    width: auto !important; height: auto !important; flex: none; overflow: visible;
}
body.pk .is-list .pk-card .pk-card__status .digital-badge-icon::after {
    content: attr(title); font-family: var(--pk-sans); font-weight: 500; color: var(--pk-ink);
}
body.pk .is-list .pk-card .book-media-badge.pk-card__media {
    grid-area: media; position: static; justify-self: end; align-self: start; width: auto; height: auto;
    display: inline-flex; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--pk-soft); box-shadow: none; font-size: 12px;
}
body.pk .is-list .pk-card .book-media-badge.pk-card__media::after { content: attr(title); font-family: var(--pk-sans); font-weight: 500; }
body.pk .is-list .pk-card .pk-heart { grid-area: heart; position: relative; top: auto; right: auto; width: 38px; height: 38px; box-shadow: none; background: transparent; border: 1px solid var(--pk-line); }
body.pk .is-list .pk-card .pk-heart:hover { border-color: var(--pk-accent); }
@media (max-width: 640px) {
    /* A phone row: the status as an eyebrow above the title, then the cover
       beside the title (their tops level) with the heart on the right; a
       media type, if any, on its own row under the text. */
    body.pk .is-list .book-card.pk-card {
        grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; padding: 12px;
        grid-template-areas: ". status ." "cover body heart" "cover media media";
    }
    body.pk .is-list .book-card.pk-card:not(:has(.pk-card__media)) { grid-template-areas: ". status ." "cover body heart"; }
    body.pk .is-list .pk-card .pk-book { width: 56px; align-self: start; }
    body.pk .is-list .pk-card .book-content.pk-card__body { align-self: start; }
    body.pk .is-list .pk-card .book-title.pk-card__title { font-size: 17px; -webkit-line-clamp: 2; }
    body.pk .is-list .pk-card .book-status-badge.pk-card__status,
    body.pk .is-list .pk-card .book-media-badge.pk-card__media { justify-self: start; justify-content: flex-start; }
    body.pk .is-list .pk-card .book-status-badge.pk-card__status { align-self: start; font-size: 12px; margin: 0; }
    body.pk .is-list .pk-card .book-media-badge.pk-card__media { margin-top: 4px; }
    body.pk .is-list .pk-card .pk-heart { align-self: start; }
    /* Too narrow for "author · publisher": one line each, no dot. */
    body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__author,
    body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__meta { flex-basis: 100%; }
    body.pk .is-list .pk-card .book-content.pk-card__body > .pk-card__meta:not(.book-meta-empty)::before { content: none; }
}

/* Article card: the badge is the record kind, on the dark ink. */
body.pk .pk-card .book-status-badge.status-article { background: var(--pk-dark); color: #fff; }
body.pk .pk-card .book-status-badge.status-article::before { display: none; }
body.pk .pk-card__author a, body.pk .pk-card__meta a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
body.pk .pk-card__author a:hover, body.pk .pk-card__meta a:hover { color: var(--pk-accent-ink); }
body.pk :is(.pk-filters, .filters-panel) .year-slider { z-index: 2; }
body.pk :is(.pk-filters, .filters-panel) #media-types-filter .filter-option { flex: 0 0 auto; justify-content: flex-start; }
body.pk .pk-footer__bottom a { display: inline-flex; align-items: center; gap: 5px; }

/* Icons stay (every element of the previous design is kept), set quietly:
   the size of the text beside them, in the muted ink or the accent. */
body.pk .user-menu .pk-guest i { font-size: 13px; }
body.pk .pk-hero .hero-quick-link i { color: var(--pk-accent-ink); font-size: 14px; margin-right: 2px; }
body.pk .pk-btn i, body.pk .pk-cta__btn i { font-size: 13px; }
body.pk .pk-card a.pk-card__details i { font-size: 12px; margin-right: 2px; }
body.pk :is(.pk-filters, .filters-panel) .filter-title { display: flex; align-items: center; gap: 7px; }
body.pk :is(.pk-filters, .filters-panel) .filter-title i { font-size: 11px; color: var(--pk-faint); }
body.pk :is(.pk-filters, .filters-panel) .availability-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--pk-soft); color: var(--pk-muted); font-size: 12px; }
body.pk :is(.pk-filters, .filters-panel) .availability-option.active .availability-icon { background: var(--pk-accent-soft); color: var(--pk-accent-text); }
body.pk :is(.pk-filters, .filters-panel) .clear-all-btn i { font-size: 12px; margin-right: 6px; }
body.pk .pk-results .empty-state-icon { font-size: 28px; color: var(--pk-faint); }
body.pk .pk-results .empty-state .btn-cta i { font-size: 12px; }
body.pk .pk-footer__brand h5 i { color: var(--pk-accent-ink); }

/* ==========================================================================
   Book page (2026 design). Every block of the previous page is kept: the
   loan / reserve / wishlist buttons and the plugins' digital buttons sit in
   the availability box, the plugins' players under "Digital content".
   ========================================================================== */
body.pk .book-hero.pk-bookhero {
    position: relative; overflow: visible; min-height: 0; padding: 0; margin: 0; color: var(--pk-ink);
    /* The cover's own tone (set by pinakes-2026.js from the image); until it
       loads, the theme's accent muted. */
    background: linear-gradient(180deg, var(--pk-tone, color-mix(in srgb, var(--pk-accent) 6%, #f7f1f3)) 0%, var(--pk-bg) 520px);
}
body.pk .book-hero.pk-bookhero::before, body.pk .book-hero.pk-bookhero::after { display: none; content: none; }
body.pk .pk-bookhero > .pk-wrap { padding-top: 32px; padding-bottom: 72px; }
body.pk .pk-bookhero .book-breadcrumb { margin: 0 0 32px; }
body.pk .pk-bookhero .breadcrumb.pk-crumbs { margin: 0; padding: 0; background: none; font-size: 13px; flex-wrap: wrap; }
body.pk .pk-bookhero .breadcrumb-item { padding: 0; color: var(--pk-ink); }
body.pk .pk-bookhero .breadcrumb-item::before { display: none; content: none; }
body.pk .pk-bookhero .breadcrumb-item a { color: var(--pk-muted); text-decoration: none; }
body.pk .pk-bookhero .breadcrumb-item a:hover { color: var(--pk-accent-ink); }
body.pk .pk-bookhero .breadcrumb-item.active { max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pk .pk-bookhero__grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
body.pk .pk-bookhero__cover { flex: 0 1 340px; min-width: 240px; margin: 0 auto; text-align: left; padding: 0; position: static; }
.pk-bigcover {
    position: relative; aspect-ratio: 2 / 3; border-radius: 4px 8px 8px 4px; overflow: hidden; background: var(--pk-cover-blank);
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 40px 60px -28px rgba(50,15,35,.55);
}
.pk-bigcover .pk-book__blank { padding: 27% 10% 12% 12%; gap: 16px; }
.pk-bigcover .pk-book__blank-title { font-size: clamp(28px, 12cqw, 38px); line-height: 1.16; }
.pk-bigcover .pk-book__rule { width: 32px; }
body.pk .pk-bigcover img.book-cover-large { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; box-shadow: none; margin: 0; transform: none; }
body.pk .pk-bigcover img.book-cover-large.is-missing { display: none; }
.pk-bigcover .pk-book__spine { width: 10px; background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(255,255,255,.22), rgba(0,0,0,0)); }
body.pk .pk-bookhero__info { flex: 1 1 460px; min-width: 0; padding: 0; }
body.pk .pk-bookhero .hero-text { display: flex; flex-direction: column; gap: 22px; text-align: left; color: var(--pk-ink); }
body.pk .pk-kicker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 500; margin: 0; text-transform: none; letter-spacing: normal; }
body.pk .pk-kicker__type { padding: 4px 10px; border-radius: 999px; background: var(--pk-surface); border: 1px solid var(--pk-line); color: var(--pk-ink); }
body.pk .pk-kicker__type i { color: var(--pk-faint); }
body.pk .pk-kicker__pub, body.pk .pk-kicker__pub a { color: var(--pk-accent-ink); text-decoration: none; }
body.pk .pk-kicker__year { color: var(--pk-faint); }
body.pk .pk-bookhero__title {
    margin: 0; font-family: var(--pk-serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.02em;
    text-wrap: balance; color: var(--pk-ink);
}
body.pk .pk-bookhero__subtitle { margin: -10px 0 0; font-size: 19px; line-height: 1.4; color: var(--pk-text); font-family: var(--pk-serif); font-style: italic; }
body.pk .pk-authors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body.pk .pk-author {
    display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--pk-surface);
    border: 1px solid var(--pk-line); font-size: 14px; font-weight: 500; color: var(--pk-ink); text-decoration: none;
}
body.pk .pk-author:hover { border-color: var(--pk-accent); color: var(--pk-ink); }
.pk-author__initials { width: 24px; height: 24px; border-radius: 50%; background: var(--pk-accent-soft); color: var(--pk-accent-strong); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
body.pk .pk-author .author-item { background: none; border: 0; padding: 0; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
body.pk .pk-bookhero .genre-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--pk-muted); margin: 0; }
body.pk .pk-bookhero .genre-tags > i { color: var(--pk-faint); }
body.pk .pk-bookhero .genre-tag { color: var(--pk-ink); background: none; border: 0; padding: 0; text-decoration: none; }
body.pk .pk-bookhero .genre-tag:hover { color: var(--pk-accent-ink); }

.pk-availbox {
    padding: 22px; border-radius: 20px; background: var(--pk-surface); border: 1px solid var(--pk-line); display: flex; flex-wrap: wrap;
    gap: 18px; align-items: center; justify-content: space-between; box-shadow: 0 16px 40px -28px color-mix(in srgb, color-mix(in srgb, var(--pk-accent) 25%, #1b1720) 35%, transparent);
}
.pk-availbox__status { display: flex; flex-direction: column; gap: 4px; }
body.pk .pk-availbox .availability-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none;
    font-size: 16px; font-weight: 600; color: var(--pk-ink); text-transform: none; letter-spacing: normal; margin: 0; line-height: 1.3;
}
body.pk .pk-availbox .availability-badge i { font-size: 13px; color: var(--pk-neutral); margin: 0; }
body.pk .pk-availbox .availability-badge.available i { color: var(--pk-ok); }
body.pk .pk-availbox .availability-badge.wanted i { color: var(--pk-accent-ink); }
body.pk .pk-availbox .availability-badge:has(i)::before { display: none; }
body.pk .pk-availbox .availability-badge::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--pk-neutral); box-shadow: 0 0 0 4px var(--pk-soft); flex: none; }
body.pk .pk-availbox .availability-badge.available::before { background: var(--pk-ok); box-shadow: 0 0 0 4px var(--pk-ok-soft); }
body.pk .pk-availbox .availability-badge.wanted::before { background: var(--pk-accent); box-shadow: 0 0 0 4px var(--pk-accent-soft); }
.pk-availbox__copies { font-size: 14px; line-height: 1.4; color: var(--pk-muted); }
body.pk .pk-availbox .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; justify-content: flex-end; text-align: left; }
body.pk .pk-availbox .action-buttons .ui-button {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; font: 600 15px/1.2 var(--pk-sans);
    min-height: 0; width: auto; box-shadow: none; text-transform: none; letter-spacing: normal; margin: 0;
}
body.pk .pk-availbox .action-buttons .ui-button i { margin: 0; font-size: 14px; }
body.pk .pk-availbox #btn-request-loan.btn-primary, body.pk .pk-availbox #btn-request-loan.btn-outline-primary {
    background: var(--pk-button); color: var(--pk-button-text); border: 1px solid var(--pk-button);
}
body.pk .pk-availbox #btn-request-loan.btn-primary:hover { background: var(--pk-button-hover); border-color: var(--pk-button-hover); }
body.pk .pk-availbox #btn-request-loan.btn-outline-primary { background: var(--pk-surface); color: var(--pk-ink); border-color: var(--pk-line-2); }
body.pk .pk-availbox #btn-request-loan:disabled { opacity: .55; cursor: not-allowed; }
/* Phones: the loan and favourites buttons stack at the box's full width, so
   two labels of different length no longer sit centred at different widths. */
@media (max-width: 640px) {
    body.pk .pk-availbox { gap: 16px; }
    body.pk .pk-availbox .action-buttons { flex-direction: column; width: 100%; }
    /* Full width, so the buttons start where "Disponibile" starts: book-detail.css
       caps them at 300px and centres them inside the box. */
    body.pk .pk-availbox .action-buttons .ui-button { width: 100%; max-width: none; justify-content: center; }
}
body.pk .pk-availbox .btn-fav-custom, body.pk .pk-availbox .action-buttons .btn-secondary {
    background: var(--pk-surface); color: var(--pk-ink); border: 1px solid var(--pk-line-2); font-weight: 500; padding: 13px 18px;
}
body.pk .pk-availbox .btn-fav-custom i { color: var(--pk-accent-ink); }
/* An outlined heart until the book is in the favourites (btn-danger), as in the design. */
body.pk .pk-availbox .btn-fav-custom:not(.btn-danger) i.fa-heart { font-weight: 400; }
body.pk .pk-availbox .btn-fav-custom:hover { border-color: var(--pk-accent); background: var(--pk-surface); color: var(--pk-ink); }
body.pk .pk-availbox .btn-fav-custom.btn-danger { border-color: var(--pk-accent); color: var(--pk-accent-strong); background: var(--pk-accent-soft); }

body.pk .pk-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--pk-line); border-bottom: 1px solid var(--pk-line); margin: 0; }
/* Four facts are never three and one left alone: four in a row when they
   fit (480px, four 120px columns), otherwise two by two. The clamp() picks
   25% or 50% as the column minimum from the strip's own width. */
body.pk .pk-quick:has(> .pk-quick__item:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(clamp(25%, (480px - 100%) * 999, 50%), 1fr)); }
body.pk .pk-quick__item { padding: 16px 0; display: flex; flex-direction: column; gap: 4px; }
body.pk .pk-quick dt { font-size: 12px; color: var(--pk-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
body.pk .pk-quick dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--pk-ink); overflow-wrap: anywhere; }
.pk-digital { display: flex; flex-direction: column; gap: 10px; }
/* Digital Library with one file: its buttons, as small as the cards' own. */
body.pk .pk-digital .plugin-book-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
body.pk .pk-digital .plugin-book-action.ui-button {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 0; width: auto; border-radius: 10px; margin: 0;
    background: var(--pk-surface); color: var(--pk-ink); border: 1px solid var(--pk-line-2); font: 600 13px/1.2 var(--pk-sans); box-shadow: none; text-transform: none; letter-spacing: normal;
}
body.pk .pk-digital .plugin-book-action.ui-button:hover { border-color: var(--pk-ink); background: var(--pk-surface); color: var(--pk-ink); }
body.pk .pk-digital .plugin-book-action.ui-button i { margin: 0; font-size: 12px; }
/* GoodLib "Cerca su": one line of small chips, after the digital files. */
body.pk .pk-digital .plugin-source-search { order: 10; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--pk-muted); }
body.pk .pk-digital .plugin-source-search__heading { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; color: var(--pk-muted); }
body.pk .pk-digital .plugin-source-search__heading i { font-size: 11px; color: var(--pk-faint); }
body.pk .pk-digital .plugin-source-search__links { display: contents; }
/* On a phone the label takes its own line and the chips follow below it. */
@media (max-width: 640px) {
    body.pk .pk-digital .plugin-source-search__heading { flex-basis: 100%; }
}
body.pk .pk-digital .plugin-source-link.ui-button {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; min-height: 0; width: auto; border-radius: 999px; margin: 0;
    background: transparent; color: var(--pk-ink); border: 1px solid var(--pk-line-2); font: 400 13px/1.3 var(--pk-sans); box-shadow: none; text-transform: none; letter-spacing: normal;
}
body.pk .pk-digital .plugin-source-link.ui-button:hover { border-color: var(--pk-accent); color: var(--pk-accent-ink); background: transparent; }
body.pk .pk-digital .plugin-source-link.ui-button i { font-size: 11px; color: var(--pk-faint); margin: 0; }
body.pk .pk-digital .plugin-source-link.ui-button:hover i { color: inherit; }
body.pk .pk-bookhero #book-alerts:empty { display: none; }
body.pk .pk-bookhero .alert { border-radius: 14px; }

/* Body: description, details, keywords, reviews | info and share cards */
.pk-bookbody { padding: 0 0 80px; }
.pk-bookbody__grid { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.pk-bookbody__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.pk-bookbody__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* Details and keywords run under the description and the sidebar, across the
   whole width, so a label and its value stay on one line. */
.pk-bookbody__full { display: flex; flex-direction: column; gap: 48px; margin-top: 48px; }
body.pk .pk-bookbody .book-description-section, body.pk .pk-bookbody .book-details-section, body.pk .pk-bookbody .book-reviews-section {
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; display: flex; flex-direction: column; gap: 16px;
}
body.pk .pk-bookbody .section-title { margin: 0; padding: 0; border: 0; font-family: var(--pk-serif); font-weight: 500; font-size: 32px; letter-spacing: -.015em; color: var(--pk-ink); display: flex; align-items: center; gap: 10px; }
body.pk .pk-bookbody .section-title i { font-size: 18px; color: var(--pk-faint); }
body.pk .pk-bookbody .section-title::after { display: none; }
body.pk .pk-bookbody .description-content, body.pk .pk-bookbody .description-content .prose { font-size: 17px; line-height: 1.7; color: var(--pk-ink-3); max-width: 720px; }
body.pk .pk-bookbody .details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 32px; }
body.pk .pk-bookbody .details-column { display: contents; }
body.pk .pk-bookbody .book-details-section .meta-item {
    display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--pk-line); margin: 0; font-size: 15px; background: none;
}
body.pk .pk-bookbody .book-details-section .meta-label { color: var(--pk-muted); font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal; margin: 0; }
body.pk .pk-bookbody .book-details-section .meta-value { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--pk-ink); font-size: 15px; }
/* The genre path is the one detail too long for a grid cell: it takes the
   whole first row, reads as a breadcrumb, and wraps between levels, never
   inside one. */
/* First row of the grid: in the middle it broke the rows of short pairs. */
body.pk .pk-bookbody .book-details-section .meta-item--genre { grid-column: 1 / -1; order: -1; align-items: baseline; }
body.pk .pk-bookbody .book-details-section .genre-path { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 10px; min-width: 0; }
body.pk .pk-bookbody .genre-path__link { color: var(--pk-ink); text-decoration: none; white-space: nowrap; }
body.pk .pk-bookbody .genre-path__link:hover { color: var(--pk-accent-ink); }
body.pk .pk-bookbody .genre-path__link:last-child { color: var(--pk-accent-strong); }
body.pk .pk-bookbody .genre-path__sep { color: var(--pk-faint); font-weight: 400; }
@media (max-width: 640px) {
    body.pk .pk-bookbody .book-details-section .meta-item--genre { flex-direction: column; gap: 6px; }
    body.pk .pk-bookbody .book-details-section .genre-path { justify-content: flex-start; }
    body.pk .pk-bookbody .genre-path__link { white-space: normal; }
}
body.pk .pk-bookbody .keyword-chip {
    padding: 8px 14px; border-radius: 999px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); border: 0; font-size: 14px; font-weight: 500; text-decoration: none;
}
body.pk .pk-bookbody .keyword-chip.status-badge { text-transform: none; letter-spacing: normal; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; }
body.pk .pk-bookbody .keyword-chip i { color: inherit; opacity: .6; margin: 0; font-size: 12px; }
/* The "Cite" dialog's button sits in the inline actions row, styled as its neighbours. */
body.pk .pk-citebox__actions .cite-block { margin: 0; display: contents; }
body.pk .pk-citebox__actions #cite-open {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--pk-line-2); background: var(--pk-surface);
    color: var(--pk-ink); font: 500 13px/1.2 var(--pk-sans); box-shadow: none; min-height: 0; width: auto; cursor: pointer;
}
body.pk .pk-citebox__actions #cite-open:hover { border-color: var(--pk-ink); }
body.pk .pk-bookbody .keyword-chip:hover { background: var(--pk-accent-line); }
body.pk .pk-bookbody__aside .card {
    padding: 22px; border-radius: 20px; background: var(--pk-surface); border: 1px solid var(--pk-line); box-shadow: none; margin: 0; z-index: auto;
}
/* main.css forces `.card-header { margin: 0 !important }`: the space under a
   card's title is padding, or the buttons sit right against it. */
body.pk .pk-bookbody__aside .card-header { padding: 0 0 12px; margin: 0; border: 0; background: none; }
body.pk .pk-bookbody__aside .card-header h6 { font: 600 12px/1.2 var(--pk-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); margin: 0; }
body.pk .pk-bookbody__aside .card-header h6 i { color: var(--pk-faint); }
body.pk .pk-bookbody__aside .card-body { padding: 0; }
body.pk .pk-bookbody__aside .meta-item { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--pk-line-3); margin: 0; flex-wrap: wrap; }
body.pk .pk-bookbody__aside .meta-label { color: var(--pk-muted); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; margin: 0; }
body.pk .pk-bookbody__aside .meta-value { font-weight: 500; font-size: 14px; text-align: right; color: var(--pk-ink); }
body.pk .pk-bookbody__aside .meta-note { flex-basis: 100%; font-size: 12px; color: var(--pk-faint); }
body.pk .pk-bookbody__aside .book-status-inline { padding: 0; background: none; border: 0; font-weight: 500; color: var(--pk-ink); }

/* Cite section */
.pk-cite { padding: 0 0 80px; }
body.pk .pk-cite #book-cite-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; overflow: visible; }
body.pk .pk-cite #book-cite-card > .card-header { padding: 0 0 18px; margin: 0; background: none; border: 0; }
body.pk .pk-cite #book-cite-card > .card-header h6 { font-family: var(--pk-serif); font-weight: 500; font-size: 32px; letter-spacing: -.015em; color: var(--pk-ink); margin: 0; text-transform: none; }
body.pk .pk-cite #book-cite-card > .card-header h6 i { font-size: 18px; color: var(--pk-faint); }
body.pk .pk-cite #book-cite-card > .card-body { padding: 0; }
.pk-citebox { display: flex; flex-direction: column; gap: 18px; }
.pk-citebox__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-citebox__tab { padding: 6px 10px; border-radius: 8px; border: 0; background: var(--pk-soft-2); color: var(--pk-ink); font: 500 13px/1.2 var(--pk-sans); cursor: pointer; }
.pk-citebox__tab.is-active { background: var(--pk-dark); color: #fff; }
.pk-citebox__text { padding: 22px 24px; border-radius: 16px; background: var(--pk-surface); border: 1px solid var(--pk-line); font-family: var(--pk-serif); font-size: 18px; max-width: 880px; line-height: 1.5; color: var(--pk-ink-2); }
.pk-citebox__actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.pk .pk-cite .cite-block { margin-top: 18px; }
/* On a phone a row of buttons is never wrapped unevenly: the citation styles
   stay on one line that scrolls sideways, the actions go one per row. */
@media (max-width: 640px) {
    .pk-citebox__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pk-gutter)); padding-right: var(--pk-gutter); scroll-snap-type: x proximity; }
    .pk-citebox__tabs::-webkit-scrollbar { display: none; }
    .pk-citebox__tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
    .pk-citebox__actions { flex-direction: column; }
    .pk-citebox__actions > *, body.pk .pk-citebox__actions #cite-open { width: 100%; justify-content: center; }
}

/* Series and related */
body.pk .book-series-section { padding: 0 0 56px; background: none; }
body.pk .book-series-section > .container { max-width: var(--pk-wrap); padding: 0 var(--pk-gutter); margin: 0 auto; }
body.pk .book-series-title { font-family: var(--pk-serif); font-weight: 500; font-size: 26px; color: var(--pk-ink); margin: 0 0 16px; text-align: left; }
body.pk .book-series-section .flex.justify-center { justify-content: flex-start; }
body.pk .book-series-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink); text-decoration: none; font-size: 14px; }
body.pk .book-series-chip:hover { border-color: var(--pk-accent); }
body.pk .book-series-number { font-weight: 700; color: var(--pk-accent-ink); }
.pk-related { border-top: 1px solid var(--pk-line); background: var(--pk-surface); }
.pk-related > .pk-wrap { padding-top: 72px; padding-bottom: 88px; }
body.pk .pk-related__title { margin: 0 0 32px; font-size: 40px; display: flex; align-items: center; gap: 12px; }
body.pk .pk-related__title i { font-size: 22px; color: var(--pk-faint); }
@media (max-width: 640px) { body.pk .pk-related__title { font-size: 34px; } }
body.pk .pk-related .related-books-wrap { max-width: none; }
@media (min-width: 1024px) {
    body.pk .pk-related .related-books-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); column-gap: 22px; justify-content: stretch; padding-top: 6px; }
}
body.pk .pk-related .book-card.related-book-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.pk .pk-bookhero__cover.book-cover-column { display: block; }
body.pk .pk-bookhero .pk-bigcover { width: 100%; }
body.pk .pk-bookhero .book-hero-content img.book-cover-large { height: 100%; width: 100%; max-height: none; }

/* Shared breadcrumb (partials/breadcrumb.php) on every page. */
body.pk .pk-breadcrumb .breadcrumb.pk-crumbs, body.pk .book-breadcrumb .breadcrumb.pk-crumbs { margin: 0 0 18px; padding: 0; background: none; font-size: 13px; justify-content: flex-start; flex-wrap: wrap; }
body.pk .pk-crumbs .breadcrumb-item { padding: 0; color: var(--pk-ink); }
body.pk .pk-crumbs .breadcrumb-item::before { display: none; content: none; }
body.pk .pk-crumbs .breadcrumb-item a { color: var(--pk-muted); text-decoration: none; opacity: 1; }
body.pk .pk-crumbs .breadcrumb-item a:hover { color: var(--pk-accent-ink); }
body.pk .pk-crumbs .breadcrumb-item.active { color: var(--pk-ink); max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Static pages (About, Contact, Privacy, Cookies, CMS pages) */
body.pk .static-page { padding: 0 0 88px; background: none; }
body.pk .static-page > .container { max-width: var(--pk-wrap); padding: 0 var(--pk-gutter); margin: 0 auto; }
body.pk .static-content { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--pk-ink-3); }
body.pk .static-content h2, body.pk .static-content h3 { font-family: var(--pk-serif); font-weight: 500; color: var(--pk-ink); letter-spacing: -.015em; margin: 1.6em 0 .5em; }
body.pk .static-content h2 { font-size: 32px; } body.pk .static-content h3 { font-size: 24px; }
body.pk .static-content a { color: var(--pk-accent-ink); }
body.pk .static-image { border-radius: 20px; }

/* ==========================================================================
   The rest of the public site follows (2026 design): same width as the
   header, the same filters and the same card shape on the archive, the
   periodicals, events and every listing not yet on the shared card partial.
   ========================================================================== */
/* main.css caps .container at 92vw !important: the design's 1240px has to win the same way. */
body.pk main .container { max-width: var(--pk-wrap) !important; padding-left: var(--pk-gutter); padding-right: var(--pk-gutter); margin-left: auto; margin-right: auto; box-sizing: border-box; width: 100%; }
@media (max-width: 640px) { body.pk main .container { padding-left: 16px; padding-right: 16px; } }

/* Generic facet rows (archive levels, periodical types, …). */
body.pk .filters-panel .filter-options { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--pk-line); border-radius: 12px; background: var(--pk-surface); padding: 4px; max-height: 260px; overflow-y: auto; }
body.pk .filters-panel .filter-options .filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--pk-ink); text-decoration: none; background: none; border: 0; margin: 0; min-height: 0; }
body.pk .filters-panel .filter-options .filter-option:hover { background: var(--pk-row-hover); }
body.pk .filters-panel .filter-options .filter-option.active { font-weight: 600; color: var(--pk-accent-strong); background: var(--pk-accent-soft); }

/* Older cards (.book-card without the shared partial). The dashboard's
   .book-card rows (icon, text, action in a line: user_dashboard/index.php)
   are another component and keep their own layout. */
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; display: flex; flex-direction: column; gap: 14px; height: 100%; transform: none; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)):hover { transform: none; box-shadow: none; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-image-container {
    position: relative; background: var(--pk-card-panel-bg); padding: var(--pk-card-panel-pad); border-radius: 16px; margin: 0; aspect-ratio: auto; height: auto; overflow: visible;
    border: 0; box-shadow: none; transition: transform .3s var(--pk-ease);
}
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)):hover .book-image-container { transform: translateY(-4px); }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-image-container::after { display: none; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-image-container > a { display: block; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-image {
    display: block; width: 100%; aspect-ratio: 2 / 3; height: auto; object-fit: cover; border-radius: 2px 5px 5px 2px; background: var(--pk-cover-blank);
    box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 10px -4px rgba(50,15,35,.25), 0 24px 32px -16px rgba(50,15,35,.5); transform: none;
}
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-image-icon { border-radius: 2px 5px 5px 2px; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-status-badge {
    position: absolute; top: 10px; left: 10px; right: auto; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
    background: rgba(255,255,255,.94); color: var(--pk-ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); font: 600 11px/1.3 var(--pk-sans); letter-spacing: normal; text-transform: none; border: 0;
}
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-content { padding: 0 2px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; background: none; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-title { margin: 0; min-height: 0; font-family: var(--pk-serif); font-size: 17px; font-weight: 500; line-height: 1.2; letter-spacing: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-title a { color: var(--pk-ink); text-decoration: none; background: none; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-subtitle { margin: 0; font-size: 13px; color: var(--pk-faint); font-style: italic; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-author { margin: 0; font-size: 13px; color: var(--pk-muted); }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-meta { margin: 0; font-size: 12px; color: var(--pk-faint); }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-actions { margin-top: auto; padding-top: 6px; display: block; }
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-actions .btn-cta, body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-actions .btn-cta:hover {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; min-height: 24px; width: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
    color: var(--pk-accent-ink); font: 600 13px/1.4 var(--pk-sans); letter-spacing: normal; text-transform: none;
}
body.pk .book-card:not(.pk-card, :has(> .book-card-icon)) .book-actions .btn-cta i { font-size: 12px; }
body.pk .books-grid:not(.pk-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 40px 22px; align-items: stretch; }
@media (max-width: 520px) { body.pk .books-grid:not(.pk-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }

/* Event cards (events list, other events on an event page): landscape, like
   the home's event cards. An event is not a book, so no 2:3 volume. */
body.pk .books-grid:has(> .book-card--event) { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
body.pk .book-card.book-card--event { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 20px; overflow: hidden; gap: 0; }
body.pk .book-card.book-card--event .book-image-container { padding: 0; border-radius: 0; background: var(--pk-line); aspect-ratio: 16 / 10; display: flex; }
body.pk .book-card.book-card--event:hover .book-image-container { transform: none; }
body.pk .book-card.book-card--event .book-image-container > a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body.pk .book-card.book-card--event .book-image { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
body.pk .book-card.book-card--event .book-image-icon { width: auto; height: auto; aspect-ratio: auto; background: none; box-shadow: none; font-size: 30px; color: var(--pk-muted); border-radius: 0; }
body.pk .book-card.book-card--event .book-content { padding: 18px 20px 20px; }
body.pk .book-card.book-card--event .book-title { font-size: 20px; -webkit-line-clamp: 3; }

/* Single-resource hero (periodical, issue, article pages: partials/resource-hero.php). */
body.pk .book-hero.resource-hero { background: linear-gradient(180deg, var(--pk-accent-softer) 0%, var(--pk-bg) 520px); color: var(--pk-ink); padding: 32px 0 64px; margin: 0; min-height: 0; }
body.pk .book-hero.resource-hero::before, body.pk .book-hero.resource-hero::after { display: none; content: none; }
body.pk .resource-hero .book-hero-content { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
body.pk .resource-hero .book-cover-column { flex: 0 1 300px; min-width: 200px; display: block; text-align: left; }
body.pk .resource-hero img.book-cover-large { width: 100%; height: auto; border-radius: 4px 8px 8px 4px; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 40px 60px -28px rgba(50,15,35,.55); }
body.pk .resource-hero .book-info-column { flex: 1 1 460px; min-width: 0; }
body.pk .resource-hero .hero-text { display: flex; flex-direction: column; gap: 18px; text-align: left; color: var(--pk-ink); }
body.pk .resource-hero h1 { font-family: var(--pk-serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.02em; color: var(--pk-ink); margin: 0; }
body.pk .resource-hero .book-kicker { font-size: 13px; color: var(--pk-muted); text-transform: none; letter-spacing: normal; }
body.pk .resource-hero .book-kicker a { color: var(--pk-accent-ink); }
/* The dot between a record's kind and its publisher (book, archive, periodical pages). */
body.pk .book-kicker-separator { color: var(--pk-faint); }
/* FRBR/LRM work page (frbr-lrm plugin). */
body.pk .frbr-opera-page { padding-block: clamp(3rem, 7vw, 6rem); }
body.pk .frbr-opera-page :is(h1, h2, h3) { font-family: var(--pk-serif); font-weight: 500; letter-spacing: -.02em; }

/* Generic cards and sections of the other pages. */
body.pk main .card { border-radius: 20px; border: 1px solid var(--pk-line); box-shadow: none; background: var(--pk-surface); }
body.pk main .card-header { background: none; border-bottom: 1px solid var(--pk-line); }
body.pk main .section-title { font-family: var(--pk-serif); font-weight: 500; letter-spacing: -.02em; color: var(--pk-ink); }
body.pk main .btn-cta:not(.pk-card__details) { border-radius: 999px; }
/* Form fields: one look everywhere in the public pages, a white field and a
   thin rule mixed from the theme accent so every theme tints it. */
body.pk main :is(input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search]:not(.search-input), input[type=date], input[type=number], input[type=url], select, textarea) {
    border-radius: 10px; border: 1px solid var(--pk-field-line); background-color: var(--pk-field-bg); color: var(--pk-ink); box-shadow: none;
}
body.pk main :is(input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search]:not(.search-input), input[type=date], input[type=number], input[type=url], select, textarea):hover { border-color: var(--pk-field-line-hover); }
body.pk main :is(input[type=checkbox], input[type=radio]) { accent-color: var(--pk-accent); }
body.pk main :is(input, select, textarea) { box-sizing: border-box; max-width: 100%; }
body.pk main input:focus, body.pk main select:focus, body.pk main textarea:focus { border-color: var(--pk-focus); background-color: var(--pk-surface); outline: none; box-shadow: 0 0 0 1px var(--pk-focus); }

/* A short page still ends at the viewport's bottom (was in frontend-layouts.css). */
body.pk { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.pk > main { flex: 1 0 auto; }
body.pk > footer { flex-shrink: 0; }
body.pk :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pk-focus); outline-offset: 2px; }

/* A card without an image: a blank dark book carrying the record's icon.
   Not for events, which are landscape (see the event cards above). */
body.pk .book-card:not(.pk-card, .book-card--event) .book-image-container > a:has(> .book-image-icon) {
    display: grid; place-items: center; aspect-ratio: 2 / 3; border-radius: 2px 5px 5px 2px; background: var(--pk-cover-blank);
    box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 10px -4px rgba(50,15,35,.25), 0 24px 32px -16px rgba(50,15,35,.5);
}
body.pk .book-card:not(.pk-card, .book-card--event) .book-image-icon { font-size: 34px; color: rgba(255,255,255,.55); background: none; width: auto; height: auto; }
body.pk main .pk-story .pk-story__title { color: #fff; }
body.pk main .pk-cta .cta-title { color: var(--pk-button-text); }

/* main.css sets body { font-family: Inter … !important }: the design's sans
   has to win with the same weight. */
body.pk { font-family: var(--pk-sans) !important; }

/* ==========================================================================
   Account pages (dashboard, wishlist, reservations, profile): the same
   width, page head and cards as the rest of the site.
   ========================================================================== */
body.pk .dashboard-hero {
    background: transparent; color: var(--pk-ink); padding: 40px 0 0; margin: 0; min-height: 0; text-align: left;
}
body.pk .dashboard-hero::before, body.pk .dashboard-hero::after { display: none; content: none; }
body.pk .dashboard-hero > .container { text-align: left; }
body.pk .dashboard-hero .hero-title {
    margin: 0 0 8px; font-family: var(--pk-serif); font-weight: 500; font-size: 56px; letter-spacing: -.025em; line-height: 1; color: var(--pk-ink); text-align: left; text-shadow: none;
}
body.pk .dashboard-hero .hero-subtitle { margin: 0 0 36px; color: var(--pk-muted); font-size: 16px; text-align: left; max-width: none; opacity: 1; }
@media (max-width: 640px) { body.pk .dashboard-hero .hero-title { font-size: 42px; } }
body.pk main .loans-container { max-width: var(--pk-wrap); width: 100%; margin: 0 auto; padding: 40px var(--pk-gutter) 88px; box-sizing: border-box; }
body.pk main section.container + section.container { margin-top: 24px; }
body.pk main > section.container:last-of-type { padding-bottom: 88px; }

/* Stat tiles (dashboard) in the design's counter style. */
body.pk .dashboard-stats-grid { gap: 20px; }
body.pk .stat-card { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 20px; box-shadow: none; padding: 24px; text-align: left; transform: none; }
body.pk .stat-card:hover { transform: none; box-shadow: none; }
body.pk .stat-card .stat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--pk-accent-soft); color: var(--pk-accent-text); display: grid; place-items: center; margin: 0 0 14px; font-size: 15px; }
body.pk .stat-card .stat-number { font-family: var(--pk-serif); font-weight: 500; font-size: 40px; letter-spacing: -.02em; line-height: 1; color: var(--pk-ink); }
body.pk .stat-card .stat-label { font-size: 14px; color: var(--pk-muted); text-transform: none; letter-spacing: normal; margin-top: 6px; font-weight: 400; }

/* Account cards and sections. */
body.pk :is(.wishlist-info-card, .section-card) {
    background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 20px; box-shadow: none;
}
body.pk .section-header h2 { font-family: var(--pk-serif); font-weight: 500; letter-spacing: -.015em; color: var(--pk-ink); }
/* The reservations pages' section icons (inline-coloured squares before):
   the same quiet tile as the dashboard's stat icons. */
body.pk .section-icon, body.pk .section-icon[style] { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--pk-accent-soft) !important; color: var(--pk-accent-text); }
/* !important: the views colour the icon inline (white on the old coloured square). */
body.pk .section-icon i, body.pk .section-icon svg { width: auto; height: auto; font-size: 14px; color: var(--pk-accent-text) !important; }
body.pk main .dashboard-hero > .container { padding-left: var(--pk-gutter); padding-right: var(--pk-gutter); }
/* Wishlist (profile/wishlist.php): the account head, a summary card with
   the three counters, the quick search, then the catalogue's book cards. */
body.pk .account-page-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin: 0 0 28px; padding: 0; border: 0; }
body.pk .account-page-heading__eyebrow { margin: 0 0 10px; color: var(--pk-accent-ink); font: 600 12px/1.2 var(--pk-sans); letter-spacing: .1em; text-transform: uppercase; }
body.pk .account-page-heading h1 { margin: 0 0 8px; font-family: var(--pk-serif); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -.025em; color: var(--pk-ink); }
body.pk .account-page-heading__subtitle { margin: 0; color: var(--pk-muted); font-size: 16px; }
body.pk .account-page-heading__actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.pk .account-page-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink); font: 500 14px/1.2 var(--pk-sans); text-decoration: none; }
body.pk .account-page-link:hover { border-color: var(--pk-ink); color: var(--pk-ink); }
body.pk .account-page-link i { color: var(--pk-accent-ink); font-size: 13px; }
@media (max-width: 640px) { body.pk .account-page-heading h1 { font-size: 42px; } }

body.pk .pk-wishlist .pk-wishlist__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 24px 28px; margin: 0 0 20px; }
body.pk .pk-wishlist__intro { flex: 1 1 320px; min-width: 0; }
body.pk .pk-wishlist__intro h2 { margin: 0 0 6px; font-family: var(--pk-serif); font-weight: 500; font-size: 24px; letter-spacing: -.015em; color: var(--pk-ink); }
body.pk .pk-wishlist__intro p { margin: 0; color: var(--pk-muted); font-size: 15px; line-height: 1.55; }
body.pk .pk-wishlist__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
body.pk .pk-wishlist__stats .wishlist-stat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); font-size: 14px; font-weight: 500; }
body.pk .pk-wishlist__stats .wishlist-stat strong { font-family: var(--pk-serif); font-size: 20px; font-weight: 500; line-height: 1; color: var(--pk-ink); }
body.pk .pk-wishlist__stats .wishlist-stat i { font-size: 12px; color: var(--pk-accent-text); }

body.pk .pk-wishlist .pk-wishlist__tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 32px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
body.pk .pk-wishlist__tools .wishlist-filter-field { flex: 1 1 320px; max-width: 520px; display: flex; flex-direction: column; gap: 8px; }
body.pk .pk-wishlist__tools label { margin: 0; color: var(--pk-muted); font: 600 12px/1.2 var(--pk-sans); letter-spacing: .08em; text-transform: uppercase; }
body.pk .pk-wishlist__tools input[type=search] { width: 100%; padding: 11px 14px; font-size: 15px; }
body.pk .pk-wishlist__tools #clear-search { display: inline-flex; align-items: center; gap: 8px; padding: 11px 6px; border: 0; background: none; color: var(--pk-accent-ink); font: 500 14px/1.2 var(--pk-sans); letter-spacing: normal; text-transform: none; cursor: pointer; }
body.pk .pk-wishlist__tools #clear-search:hover { color: var(--pk-accent-strong); }

body.pk .pk-wishlist #wishlist-no-results { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); font-weight: 500; }
body.pk .pk-wishlist #wishlist-no-results[hidden] { display: none; }
body.pk .pk-wishlist #wishlist-no-results i { margin-right: 8px; }
body.pk .pk-wishlist .wishlist-card[hidden] { display: none; }
body.pk .pk-wishlist .wishlist-card { transform: none; box-shadow: none; background: none; border-radius: 0; }
body.pk .pk-wishlist .pk-card .book-actions.pk-card__actions.wishlist-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.pk .pk-wishlist .remove-fav-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-muted); cursor: pointer; position: relative; z-index: 2; }
body.pk .pk-wishlist .remove-fav-btn:hover { border-color: var(--pk-danger); color: var(--pk-danger); }
body.pk .pk-wishlist .remove-fav-btn i { font-size: 13px; }
body.pk .pk-wishlist .pk-card__meta i { margin-right: 4px; color: var(--pk-faint); }

body.pk .pk-wishlist .pk-wishlist__empty { padding: 56px 28px; border-radius: 20px; border: 1px solid var(--pk-line); background: var(--pk-surface); box-shadow: none; text-align: center; }
body.pk .pk-wishlist__empty .wishlist-empty-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pk-accent-soft); color: var(--pk-accent-text); }
body.pk .pk-wishlist__empty .account-line-icon { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.pk .pk-wishlist__empty h2 { margin: 0 0 8px; font-family: var(--pk-serif); font-weight: 500; font-size: 28px; color: var(--pk-ink); }
body.pk .pk-wishlist__empty p { margin: 0 auto 24px; max-width: 460px; color: var(--pk-muted); font-size: 15px; line-height: 1.55; }
body.pk .pk-wishlist__empty .wishlist-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Loans and reservations (user_dashboard/prenotazioni.php, profile/reservations.php):
   the items as account cards, the cover as a book, status and dates as quiet
   pills (only lateness speaks up), and the actions as compact pills. */
body.pk .loans-container .items-grid { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 16px; }
body.pk .loans-container .item-card { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 20px; padding: 20px; box-shadow: none; }
body.pk .loans-container .item-card:hover { border-color: var(--pk-accent-hover-line); box-shadow: none; }
body.pk .loans-container .item-inner { gap: 20px; align-items: flex-start; }
body.pk .loans-container .item-cover {
    width: 76px; height: auto; aspect-ratio: 2 / 3; border-radius: 3px 6px 6px 3px; background: var(--pk-cover-blank); position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 16px 26px -14px rgba(60,10,35,.45); transform: none;
}
body.pk .loans-container .item-cover:hover { transform: translateY(-2px); }
/* Keep artwork opaque above the typeset fallback; it fills the cover frame. */
body.pk .loans-container .item-cover img { position: relative; background: var(--pk-cover-blank); object-fit: cover; }
/* No cover: the placeholder image gives way to the typeset book. */
body.pk .loans-container .item-cover img[src$="placeholder.jpg"] { opacity: 0; }
body.pk .loans-container .item-title { margin: 0 0 12px; font-family: var(--pk-serif); font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
body.pk .loans-container .item-title a { color: var(--pk-ink); }
body.pk .loans-container .item-title a:hover { color: var(--pk-accent-ink); }
body.pk .loans-container .item-badges { gap: 6px; }
body.pk .loans-container .status-badge { gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--pk-soft); color: var(--pk-ink-3); font-size: 13px; font-weight: 500; }
body.pk .loans-container .status-badge::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-dot, var(--pk-faint)); }
body.pk .loans-container .status-badge.badge-date::before { display: none; }
body.pk .loans-container .badge-active { --pk-dot: var(--pk-ok); }
body.pk .loans-container .badge-pending, body.pk .loans-container .badge-scheduled { --pk-dot: var(--pk-warn); }
body.pk .loans-container .badge-position { --pk-dot: var(--pk-accent); }
body.pk .loans-container .badge-overdue { --pk-dot: var(--pk-danger); background: var(--pk-danger-soft); color: var(--pk-danger-ink); }
body.pk .loans-container :is(.btn-review, .btn-cancel) {
    display: inline-flex; width: auto; margin: 16px 8px 0 0; padding: 9px 16px; border-radius: 999px; font: 600 13px/1.2 var(--pk-sans); box-shadow: none;
}
body.pk .loans-container .btn-review { background: var(--pk-button); color: var(--pk-button-text); border: 1px solid transparent; }
body.pk .loans-container .btn-review:hover { background: var(--pk-button-hover); }
body.pk .loans-container .btn-review:disabled { background: var(--pk-soft); color: var(--pk-muted); opacity: 1; }
body.pk .loans-container .btn-cancel { background: var(--pk-surface); color: var(--pk-danger); border: 1px solid #f1c8c4; }
body.pk .loans-container .btn-cancel:hover { background: var(--pk-danger-soft); border-color: var(--pk-danger); color: var(--pk-danger-ink); }
body.pk .loans-container .empty-state { border-radius: 20px; border: 1px solid var(--pk-line); background: var(--pk-surface); }
body.pk .loans-container .section-divider { background: var(--pk-line); }
body.pk .loans-container .review-heading { margin-top: 8px; font: 600 14px/1.3 var(--pk-sans); color: var(--pk-ink); }

/* A facet folded to its selection pill keeps no box, rule or scroll fade. */
body.pk :is(.pk-filters, .filters-panel) :is(#authors-filter, #genres-filter, #publishers-filter, #media-types-filter, .filter-options).facet-is-collapsed {
    border: 0; background: none; padding: 0; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none;
}
/* #298: the spacer the row-alignment script adds must take exactly the room a
   real subtitle takes, or the author lines drift. */
body.pk .pk-card .book-subtitle.subtitle-ph { margin: 0; padding: 0; font-size: 13px; line-height: inherit; }

/* Home: genre carousels and events, in the design's section rhythm. */
body.pk #genre-carousels { padding: 40px 0 0; }
body.pk #genre-carousels > .container > .section-title, body.pk #genre-carousels .section-title { font-family: var(--pk-serif); font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1; text-align: left; margin: 0 0 8px; }
body.pk #genre-carousels .section-subtitle { text-align: left; color: var(--pk-muted); font-size: 16px; margin: 0 0 28px; }
body.pk #genre-carousels > .container.text-center { text-align: left; }
body.pk .genre-carousel-section { padding: 28px 0; background: none; }
body.pk .genre-carousel-section:nth-child(even) { background: none; }
/* Inset by one nav button (40px) plus the gap, so the title lines up with the first cover. */
body.pk .genre-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 52px 20px; }
body.pk .genre-carousel-section .carousel-wrapper { padding-bottom: 28px; margin-bottom: -28px; }
body.pk .genre-carousel-title { font-family: var(--pk-serif); font-weight: 500; font-size: 28px; letter-spacing: -.015em; color: var(--pk-ink); margin: 0; }
body.pk .genre-carousel-viewall { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
body.pk .genre-carousel-viewall:hover { border-color: var(--pk-ink); color: var(--pk-ink); }
body.pk .carousel-track { gap: 22px; }
/* Five covers per row, as the latest-books grid; the old fixed 280x380 cover is gone. */
body.pk .genre-carousel-section .carousel-container { gap: 12px; }
body.pk .carousel-book-card { flex: 0 0 calc((100% - 4 * 22px) / 5); min-width: 150px; }
body.pk .carousel-book-cover { height: auto; }
@media (max-width: 1024px) { body.pk .carousel-book-card { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 640px) { body.pk .carousel-book-card { flex-basis: calc((100% - 22px) / 2); } }
/* At 768px and below home.php moves the arrows under the track and centres a
   single card; the 2026 rows hold two or three, so the cards start at the
   left edge, and the heading drops the indent kept for side arrows. */
@media (max-width: 768px) {
    body.pk .genre-carousel-header { margin-left: 0; margin-right: 0; }
    body.pk .carousel-book-card { margin: 0; max-width: none; }
}
body.pk .carousel-book-card { overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; transform: none; }
body.pk .carousel-book-card:hover { transform: none; box-shadow: none; }
body.pk .carousel-book-cover {
    border-radius: 2px 5px 5px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 6px 10px -4px rgba(50,15,35,.25), 0 24px 32px -16px rgba(50,15,35,.5);
    background: var(--pk-cover-blank); aspect-ratio: 2 / 3; object-fit: cover; transition: transform .3s var(--pk-ease);
}
body.pk .carousel-book-card:hover .carousel-book-cover { transform: translateY(-4px); }
body.pk .carousel-book-info { padding: 14px 2px 0; }
body.pk .carousel-book-title { font-family: var(--pk-serif); font-size: 17px; font-weight: 500; line-height: 1.2; color: var(--pk-ink); }
body.pk .carousel-book-author, body.pk .carousel-book-year { font-size: 13px; color: var(--pk-muted); }
body.pk .carousel-nav-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--pk-surface); border: 1px solid var(--pk-line-2); color: var(--pk-ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
body.pk .carousel-nav-btn:hover:not(:disabled) { border-color: var(--pk-ink); background: var(--pk-surface); color: var(--pk-ink); }

body.pk .home-events { padding: 80px 0 40px; background: none; }
body.pk .home-events__header { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; text-align: left; }
body.pk .home-events .page-hero__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-accent-ink); }
body.pk .home-events__title { font-family: var(--pk-serif); font-weight: 500; font-size: 44px; letter-spacing: -.02em; line-height: 1; margin: 8px 0; color: var(--pk-ink); }
body.pk .home-events__subtitle { color: var(--pk-muted); font-size: 16px; margin: 0; }
body.pk .home-events__all-link { align-self: flex-end; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--pk-line-2); background: var(--pk-surface); color: var(--pk-ink); font-size: 14px; font-weight: 500; text-decoration: none; }
body.pk .home-events__all-link:hover { border-color: var(--pk-ink); color: var(--pk-ink); }
body.pk .home-events-grid { gap: 20px; }
body.pk .home-events-grid .event-card { background: var(--pk-surface); border: 1px solid var(--pk-line); border-radius: 20px; overflow: hidden; box-shadow: none; }
body.pk .home-events-grid .event-card__thumb { border-radius: 0; }
body.pk .home-events-grid .event-card__body { padding: 20px 22px 22px; }
body.pk .home-events-grid .event-card__title { font-family: var(--pk-serif); font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--pk-ink); }
body.pk .home-events-grid .event-card__meta { font-size: 13px; color: var(--pk-muted); }
body.pk .home-events-grid .event-card__button { border-radius: 999px; border-color: var(--pk-line-2); color: var(--pk-ink); }
body.pk .home-events-grid .event-card__button:hover { background: var(--pk-dark); border-color: var(--pk-dark); color: #fff; }

/* Share buttons as labelled chips (partials/social-sharing.php), as in the design. */
body.pk #book-share-card .social-share-btn {
    display: inline-flex; align-items: center; width: auto; height: auto; min-height: 0; padding: 7px 12px; gap: 6px; border-radius: 999px; background: transparent !important; text-decoration: none; box-shadow: none;
    border: 1px solid var(--pk-line-2); color: var(--pk-ink); font: 400 13px/1.2 var(--pk-sans); transform: none; opacity: 1;
}
body.pk #book-share-card .social-share-btn i { font-size: 12px; color: var(--pk-muted); }
body.pk #book-share-card .social-share-btn:hover { border-color: var(--pk-accent); color: var(--pk-accent-ink); transform: none; opacity: 1; }
body.pk #book-share-card .social-share-btn:hover i { color: inherit; }
body.pk #book-share-card .social-share-btn__label { display: inline; }
body.pk #book-share-card .card-body > div { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
@media (max-width: 640px) {
    /* One share button per row on a phone, never three and two. */
    body.pk #book-share-card .card-body > div { flex-direction: column; gap: 8px; }
    body.pk #book-share-card .social-share-btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 1023px) {
    /* book-detail.css centres the hero on small screens; the design keeps it left-aligned. */
    body.pk .pk-bookhero__info { text-align: left; }
    body.pk .pk-bookhero .pk-authors, body.pk .pk-bookhero .genre-tags { justify-content: flex-start; }
}
body.pk #book-share-card .card-body { padding: 0 !important; }
/* "Classica" cards: the status badge sits on the book itself, so a blank book's title starts below it. */
body:not(.pk-cards-tinted) .pk-card .pk-book__blank { padding-top: 40px; }
/* No fade-in on cards or sections anywhere: content is there when the page is.
   (catalog.php still toggles .fade-in on the grid after an AJAX refresh.) */
body.pk .fade-in, body.pk .reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }

/* Hero style "Centrato" (theme option, body.pk-hero-centered): title, search
   and links centred in a narrower column, no fan of covers. */
body.pk.pk-hero-centered .pk-hero .pk-hero__inner.hero-content { max-width: 860px; flex-direction: column; text-align: center; padding-top: 96px; padding-bottom: 72px; }
body.pk.pk-hero-centered .pk-hero__text { flex: 0 1 auto; width: 100%; align-items: center; }
body.pk.pk-hero-centered .pk-hero__badge { align-self: center; }
body.pk.pk-hero-centered .pk-hero__title { font-size: clamp(44px, 7vw, 84px); }
body.pk.pk-hero-centered .hero-search-container, body.pk.pk-hero-centered .pk-hero__text .pk-search { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
body.pk.pk-hero-centered .pk-hero__links { justify-content: center; }
body.pk.pk-hero-centered .pk-fan { display: none; }
@media (max-width: 640px) { body.pk.pk-hero-centered .pk-hero .pk-hero__inner.hero-content { padding-top: 56px; padding-bottom: 44px; } }

/* Inline citation: the Copy outcome. Read out by screen readers; shown only
   when copying failed (success is already on the button). */
.pk-citebox__status { margin: -8px 0 0; font-size: 13px; color: var(--pk-muted, #6b6470); }
.pk-citebox__status:empty,
.pk-citebox__status[data-state="ok"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Phone tab bar (frontend/partials/mobile-tabbar.php), as the Android app's
   bottom navigation. Off screen until the reader first scrolls, and again
   once the footer is in view; never on wider screens, where the header
   carries the same links. */
.pk-tabbar { display: none; }
@media (max-width: 767px) {
    .pk-tabbar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, #fff 94%, transparent);
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        border-top: 1px solid var(--pk-line);
        box-shadow: 0 -8px 24px -18px color-mix(in srgb, var(--pk-ink) 40%, transparent);
        transform: translateY(110%); visibility: hidden;
        transition: transform .28s var(--pk-ease), visibility 0s linear .28s;
    }
    .pk-tabbar.is-visible { transform: none; visibility: visible; transition: transform .28s var(--pk-ease), visibility 0s; }
    .pk-tabbar__list { display: flex; justify-content: space-around; gap: 4px; margin: 0; padding: 0; list-style: none; }
    .pk-tabbar__list > li { flex: 1 1 0; min-width: 0; }
    .pk-tabbar__item {
        display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 4px 2px;
        color: var(--pk-muted); text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .pk-tabbar__icon {
        position: relative; display: flex; align-items: center; justify-content: center;
        width: 56px; height: 30px; border-radius: 999px; font-size: 1.05rem;
        transition: background-color .2s var(--pk-ease), color .2s var(--pk-ease);
    }
    .pk-tabbar__label { max-width: 100%; font-size: .6875rem; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pk-tabbar__item.is-active { color: var(--pk-accent-ink); }
    .pk-tabbar__item.is-active .pk-tabbar__icon { background: var(--pk-accent-soft); }
    .pk-tabbar__item.is-active .pk-tabbar__label { font-weight: 600; }
    .pk-tabbar__item:focus-visible { outline: none; }
    .pk-tabbar__item:focus-visible .pk-tabbar__icon { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
    .pk-tabbar__badge {
        position: absolute; top: -2px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
        border-radius: 999px; background: var(--pk-accent); color: var(--button-text-color, #fff);
        font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center;
    }
    .pk-tabbar__badge[hidden] { display: none; }
    /* The back-to-top button and the cookie icon move above the bar. */
    body.pk-tabbar-on #scroll-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
    body.pk-tabbar-on #silktide-cookie-icon { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; transition: bottom .28s var(--pk-ease); }
    /* The cookie banner too: at its own bottom: 16px it lay over the bar, and a
       visitor who had not answered it yet tapped the banner instead of the
       tab, which then needed a second tap. */
    body.pk-tabbar-on #silktide-banner { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px)); transition: bottom .28s var(--pk-ease); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .pk-tabbar, .pk-tabbar.is-visible { transition: none; }
}