/**
 * Catalogue panel and listing — drawn from Grafica/7-PAGINA-LIBRI-DIGITALI_SETTEMBRE26.jpg.
 *
 * Everything is scoped under .bd-cs-catalog / .bd-cs-catalog-panel so a child
 * theme can override any of it without specificity games.
 *
 * ── On the colours ───────────────────────────────────────────────────────────
 *
 * Every one is `var(--bd-token, #fallback)`. Since bd-shared 1.24.0 the tokens
 * are really there: they ship in `bd-core-shared/assets/css/tokens.css`, which this
 * file declares as a dependency (through `bd-components`) so it is always in
 * the document first. Until then they lived in a paste-into-Divi tokens file
 * under Grafica/ (since retired), meant for the theme's Custom CSS box, and
 * were on no site at all — every one of these references had been resolving
 * to its own fallback since the day this stylesheet shipped, with nothing to
 * show for it.
 *
 * The fallbacks stay anyway, and are the same values: a plugin that renders
 * grey-on-grey when one stylesheet fails to load would look broken rather than
 * unstyled. Nothing here invents a colour.
 *
 * ── What is no longer here ───────────────────────────────────────────────────
 *
 * The card and the listing container. Both moved to bd-core-shared's components.css
 * in 0.24.0, so this file is now the filter panel, the search box, the toolbar
 * and the pagination — the parts that are the catalogue's and nobody else's.
 *
 * ── And what arrived in 0.25.0 ───────────────────────────────────────────────
 *
 * The search bar's real styling. It had two rules here and everything else in
 * a search-bar sheet under Grafica/ — a third paste-into-Divi file, alongside
 * the tokens and the dashboard menu, all three since retired — so on the live
 * site [bd_cat_shortcodes_search] rendered as a full-width native input beside a
 * native button.
 *
 * @package BD_Cat_Shortcodes
 */

/* The search form is listed here as well as the two catalogue wrappers, and it
   has to be: [bd_cat_shortcodes_search] is meant for a site-wide header, so it renders
   nowhere near .bd-cs-catalog and would inherit none of these. */
.bd-cs-catalog,
.bd-cs-catalog-panel,
.bd-cs-catalog-search {
    --bd-cs-blue: var(--bd-blue, #001E60);
    --bd-cs-text: var(--bd-text, #022A61);
    --bd-cs-meta: var(--bd-text-slate, #1E3351);
    --bd-cs-subtle: var(--bd-text-subtle, #5F6B94);
    --bd-cs-border: var(--bd-border, #DDE2F1);
    --bd-cs-field-border: var(--bd-border-strong, #7B8EC9);
    --bd-cs-tint: var(--bd-blue-tint, #EAF1FC);
    --bd-cs-radius: var(--bd-radius, 4px);
}

/* ── Filter panel ───────────────────────────────────────────────────────── */

.bd-cs-catalog-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    color: var(--bd-cs-text);
}

/* The panel body (0.59.0): the plan choice and the form, the whole column the
   toggle and the close X fold away. Same flow and gap as the panel, so the
   spacing between the plan choice and the form is unchanged. */
.bd-cs-catalog-panel__body {
    position: relative; /* the close X's containing block */
    display: flex;
    flex-direction: column;
    gap: 1.25em;
}

.bd-cs-catalog-filters {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* A theme override written for 0.56.0-0.58.0 has no body: its X sits inside
   the form, which is a direct child of the panel and the element the toggle
   folds. These selectors keep its room, corner and first paint. */
.bd-cs-catalog-panel > .bd-cs-catalog-filters--has-close {
    position: relative;
}

/* The "Filters" toggle (0.55.0) and the close X (0.56.0), server-rendered
   `hidden`. catalog-facets.js shows the toggle at 980px and below, and above
   980px while the body is closed; the X shows on every width. Both rules
   restore what `hidden` means: `display:flex` above and bd-core-shared's `.bd-btn`
   inline-flex would otherwise beat the UA's [hidden] rule. */
.bd-cs-catalog-panel__toggle[hidden],
.bd-cs-catalog-panel__close[hidden],
.bd-cs-catalog-panel__body[hidden],
.bd-cs-catalog-filters[hidden] {
    display: none !important;
}

.bd-cs-catalog-panel__toggle {
    align-self: flex-start;
}

/* The X sits at the body's top right, the column's corner. The room above the
   plan choice is reserved as soon as the head script has marked <html> with
   `bd-cs-js`, so nothing shifts when catalog-facets.js later shows the X;
   without JavaScript there is no `bd-cs-js` and the panel keeps its spacing.
   Colours are bd-core-shared's `.bd-btn--icon`; only its published size token is
   set, to 32px (above WCAG 2.5.8's 24px target), and the glyph follows at
   half of it (bd-core-shared's `.bd-btn--icon svg`). */
html.bd-cs-js .bd-cs-catalog-panel__body--has-close,
html.bd-cs-js .bd-cs-catalog-panel > .bd-cs-catalog-filters--has-close {
    padding-top: calc(32px + var(--bd-space-sm, 8px));
}

.bd-cs-catalog-panel__close {
    --bd-btn-icon-size: 32px;

    position: absolute;
    top: 0;
    right: 0;
}

/* First paint (0.56.0), until catalog-facets.js marks the body
   `data-bd-cs-ready` and its own `hidden` takes over: the state the script
   will set, drawn by the classes the head script put on <html>, so the panel
   never flashes open and then collapses. At 980px and below the panel starts
   closed (any `bd-cs-js` page); above, only when the visitor closed it before
   (`html.bd-cs-filters-collapsed`). Only a 0.56.0+ panel (`--has-close`
   body, or form in an older override; `--managed` toggle) is touched. These
   beat the `[hidden]` rule above by specificity. Without JavaScript neither
   class exists: nothing changes. */
@media (max-width: 980px) {
    html.bd-cs-js .bd-cs-catalog-panel__body--has-close:not([data-bd-cs-ready]),
    html.bd-cs-js .bd-cs-catalog-panel > .bd-cs-catalog-filters--has-close:not([data-bd-cs-ready]) {
        display: none !important;
    }

    html.bd-cs-js .bd-cs-catalog-panel__toggle--managed[hidden]:not([data-bd-cs-ready]) {
        display: inline-flex !important;
    }
}

@media (min-width: 981px) {
    html.bd-cs-filters-collapsed .bd-cs-catalog-panel__body--has-close:not([data-bd-cs-ready]),
    html.bd-cs-filters-collapsed .bd-cs-catalog-panel > .bd-cs-catalog-filters--has-close:not([data-bd-cs-ready]) {
        display: none !important;
    }

    html.bd-cs-filters-collapsed .bd-cs-catalog-panel__toggle--managed[hidden]:not([data-bd-cs-ready]) {
        display: inline-flex !important;
    }
}

.bd-cs-catalog-filters__heading {
    margin: 0 0 1em;
    font-size: 1.1em;
    color: var(--bd-cs-blue);
}

/* Each section is a <details>. The rule below it is the separator in the
   mockup; the last one has none, or the panel ends on a stray line. */
.bd-cs-facet {
    margin: 0;
    padding: 1.15em 0;
    border: 0;
    border-bottom: 1px solid var(--bd-cs-border);
}

.bd-cs-facet:first-of-type {
    padding-top: 0;
}

.bd-cs-facet:last-of-type {
    border-bottom: 0;
}

/* The heading + chevron. `list-style: none` and the ::-webkit- rule together
   remove the native disclosure triangle in every engine, leaving the chevron
   drawn below as the only marker. */
.bd-cs-facet__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    margin: 0;
    padding: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bd-cs-blue);
    cursor: pointer;
    list-style: none;
}

.bd-cs-facet__title::-webkit-details-marker {
    display: none;
}

/* The chevron: two borders of an empty box, rotated. It follows the open state
   with no script and takes its colour from the heading. */
.bd-cs-facet__title::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-bottom: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-135deg);
    transition: transform 0.15s ease;
}

.bd-cs-facet:not([open]) > .bd-cs-facet__title::after {
    transform: rotate(45deg);
    margin-bottom: 0;
    margin-top: 3px;
}

.bd-cs-facet__body {
    padding-top: 0.9em;
}

/* Two classes on purpose (0.55.0): Divi's parent sheet styles every
   input[type=text] at (0,1,1) - a #BBBBBB border (1.92:1 on white, below
   WCAG 1.4.11's 3:1), its own colour, padding and font - and one class here
   lost to it. `font: inherit` drops the UA/Divi font so the field speaks the
   panel's; the border is --bd-border-strong, 3.2:1. */
.bd-cs-catalog-filters .bd-cs-facet__input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    margin: 0;
    padding: 0 0.9em;
    border: 1px solid var(--bd-cs-field-border);
    border-radius: var(--bd-cs-radius);
    background-color: var(--bd-white, #FFFFFF);
    color: var(--bd-cs-text);
    font: inherit;
    font-size: var(--bd-fs-md, 15px);
    line-height: 1;
}

.bd-cs-catalog-filters .bd-cs-facet__input:focus-visible {
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: 1px;
}

.bd-cs-catalog-filters .bd-cs-facet__input::placeholder {
    color: var(--bd-cs-subtle);
    opacity: 1;
}

/* The magnifier sits inside the author field, as in the mockup. A background
   image rather than an element: there is nothing to click — the field is
   submitted with the rest of the form — so it must not be in the tab order. */
.bd-cs-catalog-filters .bd-cs-facet__input--search {
    padding-right: 2.6em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2300008A' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.8 12.8 17 17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85em center;
    background-size: 18px 18px;
}

/* list-style and padding are !important for the reason bd-core-shared's
   components.css states at length: Divi styles every ul inside a layout at
   (0,1,1) with list-style-type:disc and padding:0 0 23px 1em, and a single
   class here loses to it. Without this the facet checkboxes carry a bullet. */
.bd-cs-facet__list {
    list-style: none !important;
    margin: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.bd-cs-facet__item label {
    display: flex;
    align-items: flex-start;
    gap: 0.65em;
    cursor: pointer;
    color: var(--bd-cs-meta);
    line-height: 1.35;
}

.bd-cs-facet__item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0.1em 0 0;
    accent-color: var(--bd-cs-blue);
}

.bd-cs-facet__item--depth-1 {
    padding-left: 1.1em;
}

.bd-cs-facet__item--depth-2 {
    padding-left: 2.2em;
}

.bd-cs-facet__item--depth-3 {
    padding-left: 3.3em;
}

/* "Mostra tutte" — a link in the mockup, a <summary> here, so it keeps working
   without JavaScript. HTML requires the <summary> to be the <details>' first
   child, but nothing requires it to be drawn there: a flex column plus
   `order: 2` on the summary alone puts it under the list it opens, so the
   label follows the years instead of sitting on top of them. That works in
   both rendering models — where the <details>' children are flex items
   themselves, and where the browser wraps the content in ::details-content —
   because the summary is the only box carrying an explicit order and
   everything above it keeps the initial 0. Do not add a ::details-content
   rule: it is unneeded, and it is not supported everywhere the rest is. */
.bd-cs-facet__more {
    display: flex;
    flex-direction: column;
}

.bd-cs-facet__more > summary {
    order: 2;
    /* The gap before the link lives here rather than on the <details>: on the
       container it would be drawn above the list, which is the bug this
       replaces. */
    margin-top: 0.85em;
    cursor: pointer;
    color: var(--bd-cs-blue);
    list-style: none;
}

.bd-cs-facet__more > summary::-webkit-details-marker {
    display: none;
}

.bd-cs-facet__more > summary:hover {
    text-decoration: underline;
}

/* 0.55em is .bd-cs-facet__list's own gap: the second list carries on from the
   first at the same rhythm, so the two read as a single block of terms. */
.bd-cs-facet__more > .bd-cs-facet__list {
    margin-top: 0.55em;
}

/* The label follows the open state, still without a line of script. */
.bd-cs-facet__more > summary .bd-cs-facet__more-less,
.bd-cs-facet__more[open] > summary .bd-cs-facet__more-show {
    display: none;
}

.bd-cs-facet__more[open] > summary .bd-cs-facet__more-less {
    display: inline;
}

.bd-cs-catalog-filters__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-top: 1.5em;
}

/* The mockup shows one outlined button, "Pulisci filtri". It needs a submit
   beside it: the listing reloads on submit, so without one a reader with
   JavaScript off could tick a materia and have nothing happen. Both are
   bd-core-shared's `.bd-btn` (primary and ghost), which owns height, padding,
   radius, weight and hover; here only the layout: each fills the filter
   column. */
.bd-cs-catalog-filters__submit,
.bd-cs-catalog-filters__clear {
    box-sizing: border-box;
    width: 100%;
}

/* ── The "match all / match any" choice ─────────────────────────────────── */
/*
 * Deliberately a self-contained block rather than a class shared with
 * [bd_cat_shortcodes_plan_filter]'s choice, which it resembles: that one's stylesheet is
 * enqueued only while the plan feature is on, and this control can be shown
 * without it. Sharing a class across two conditionally-loaded files is how a
 * control ends up unstyled on exactly the configurations nobody tested.
 */

.bd-cs-match {
    margin: 0 0 1.25em;
}

.bd-cs-match__heading {
    margin: 0 0 6px;
    font-size: 0.9em;
    color: var(--bd-cs-subtle);
}

.bd-cs-match__options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bd-cs-match__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--bd-cs-border);
    border-radius: var(--bd-cs-radius);
    color: inherit;
    line-height: 1.3;
    text-decoration: none;
}

.bd-cs-match__option:hover,
.bd-cs-match__option:focus {
    border-color: var(--bd-cs-field-border);
    color: inherit;
    text-decoration: none;
}

.bd-cs-match__marker {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid var(--bd-cs-field-border);
    border-radius: var(--bd-radius-circle, 50%);
}

.bd-cs-match__option--selected {
    border-color: var(--bd-cs-blue);
    background-color: var(--bd-cs-tint);
}

.bd-cs-match__option--selected .bd-cs-match__marker {
    border-color: var(--bd-cs-blue);
}

.bd-cs-match__option--selected .bd-cs-match__marker::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: var(--bd-radius-circle, 50%);
    background: var(--bd-cs-blue);
}

.bd-cs-match__option--selected .bd-cs-match__label {
    font-weight: 600;
    color: var(--bd-cs-blue);
}

/* ── Search box ─────────────────────────────────────────────────────────── */

/* Until 0.25.0 this section was two rules — a flex row and a stretchy field —
   and the search bar rendered as a full-width native input beside a native
   button. Everything that made it look like the homepage mockup (today
   Grafica/1_HP-GENERICA_SETTEMBRE26.jpg, where the search bar and the hero are
   drawn) lived in a paste-into-Divi search-bar sheet under Grafica/, since
   retired: the same defect as the design tokens, in the same folder, found
   the same way. The measurements below are that file's, sampled at 1535px,
   and they now ship with the plugin.

   Sampled: field 623×59, gap 14, button 193×52, group 829px centred. Two
   deliberate departures, both from that file and both kept: one height for
   both rather than the mockup's 59/52 pair - 44px since 0.52.1, the height of
   bd-shared's .bd-btn (1.47.0), so the bar lines up with every other button -
   and the shared radius (--bd-radius, 4px) rather than the measured 6px
   because it is the radius of every rectangle on the site. The border used to be a third one — a
   saturated indigo hard-coded from the mockup — and since 0.33.0 is the
   platform blue (--bd-blue, #001E60, the brand manual's Pantone 2757 C),
   which clears WCAG 1.4.11's 3:1 with even more room. Since 0.54.0 the 193px
   navy submit is gone, as on www.giappichelli.it: a magnifier inside the
   field submits, and "Advanced search" is a secondary link to the catalogue. */
.bd-cs-catalog-search {
    --bd-sb-max: 830px;
    --bd-sb-gap: 14px;
    --bd-sb-h: 44px;
    --bd-sb-pad-x: 20px;
    --bd-sb-border-color: var(--bd-blue, #001E60);

    display: flex;
    /* Wraps only when the field would fall below its basis (12rem unless the
       page sets --bd-sb-field-basis; a narrow header column, or a phone under
       ~360px): the link goes underneath. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bd-space-sm, 8px) var(--bd-sb-gap);
    width: 100%;
    max-width: var(--bd-sb-max);
    margin-inline: auto;
}

/* The field and its in-field submit (0.54.0). min-width:0 is not optional:
   without it a flex item never shrinks below its intrinsic width.
   --bd-sb-field-basis (0.55.0) is the width under which the field pushes the
   "Advanced search" link to a second row. It is deliberately NOT declared on
   the form, so a header or any ancestor can set it (BD-divi lowers it to 9rem
   between 768px and 980px); unset, it is 12rem, the 0.54.0 behaviour. */
.bd-cs-catalog-search__box {
    position: relative;
    flex: 1 1 var(--bd-sb-field-basis, 12rem);
    min-width: 0;
}

/* Rules shared by both markups. The in-field submit and the field's end
   padding are scoped to __box below; a theme override of catalog-search.php
   written before 0.54.0 has no __box, so its field and submit are direct
   children of the form and keep the pre-0.54.0 inline navy button (the
   `> ` rules), instead of an absolutely placed submit escaping the form. */
.bd-cs-catalog-search__field {
    box-sizing: border-box;
    height: var(--bd-sb-h);
    margin: 0;
    padding-block: 0;
    padding-inline: var(--bd-sb-pad-x);
    border: 1px solid var(--bd-sb-border-color);
    border-radius: var(--bd-cs-radius);
    background-color: var(--bd-white, #FFFFFF);
    color: var(--bd-cs-text);
    font-size: var(--bd-fs-md, 15px);
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.bd-cs-catalog-search__field::placeholder {
    color: var(--bd-cs-subtle);
}

/* The clear "x" WebKit adds to an input[type=search]: absent from the mockup,
   and it would appear in some browsers and not others. */
.bd-cs-catalog-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.bd-cs-catalog-search__submit {
    box-sizing: border-box;
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

.bd-cs-catalog-search__submit-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Divi puts an arrow in ::after on every button and widens its padding on
   hover, so without this and the hover paddings below the glyph would jump
   under the cursor. */
.bd-cs-catalog-search__submit::after {
    display: none !important;
}

/* ── Current markup: the field reserves the submit's 44px at its end so
   typed text never runs under the magnifier. */
.bd-cs-catalog-search__box .bd-cs-catalog-search__field {
    display: block;
    width: 100%;
    padding-inline: var(--bd-sb-pad-x) var(--bd-sb-h);
}

/* The magnifier: a 44x44 target over the field's end, transparent, the glyph
   in --bd-text-muted (5.6:1 on white, WCAG 1.4.11 asks 3:1), navy on hover.
   Its name is the visually hidden "Search" inside it. */
.bd-cs-catalog-search__box .bd-cs-catalog-search__submit {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bd-sb-h);
    min-width: 0;
    height: var(--bd-sb-h);
    padding: 0;
    border: 0;
    border-radius: var(--bd-cs-radius);
    background: transparent;
    color: var(--bd-text-muted, #5A6989);
}

.bd-cs-catalog-search__box .bd-cs-catalog-search__submit:hover,
.bd-cs-catalog-search__box .bd-cs-catalog-search__submit:focus-visible {
    background: transparent;
    color: var(--bd-cs-blue);
}

.bd-cs-catalog-search__box .bd-cs-catalog-search__submit:hover {
    padding: 0 !important;
}

/* Inside the field's own border, so the ring is never clipped by a header
   container; navy on the white field, 15.5:1. */
.bd-cs-catalog-search__box .bd-cs-catalog-search__submit:focus-visible {
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: -4px;
}

/* "Advanced search" is bd-core-shared's default `.bd-btn--ghost` (0.55.0: 44px,
   the field's height, so both sit on one centre line; it was `--sm`, 36px):
   only its place in the row is set here. border-box because bd-core-shared's
   `.bd-btn` leaves the UA's content-box: without a theme-wide border-box
   its 1px border would make it 46px beside the 44px field. */
.bd-cs-catalog-search__advanced {
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* ── Pre-0.54.0 override markup: field and submit side by side, the submit
   the old navy button with its visible label (white on navy, 15.5:1). */
.bd-cs-catalog-search > .bd-cs-catalog-search__field {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-cs-catalog-search > .bd-cs-catalog-search__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 193px;
    height: var(--bd-sb-h);
    padding-block: 0;
    padding-inline: var(--bd-sb-pad-x);
    border: 0;
    border-radius: var(--bd-cs-radius);
    background-color: var(--bd-blue-navy, #001E60);
    color: var(--bd-text-invert, #FFFFFF);
    font-size: var(--bd-fs-md, 15px);
    font-weight: 600;
    white-space: nowrap;
}

.bd-cs-catalog-search > .bd-cs-catalog-search__submit:hover,
.bd-cs-catalog-search > .bd-cs-catalog-search__submit:focus-visible {
    background-color: var(--bd-blue-dark, #00153F);
}

.bd-cs-catalog-search > .bd-cs-catalog-search__submit:hover {
    padding-inline: var(--bd-sb-pad-x) !important;
}

.bd-cs-catalog-search > .bd-cs-catalog-search__submit:focus-visible {
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .bd-cs-catalog-search > .bd-cs-catalog-search__field,
    .bd-cs-catalog-search > .bd-cs-catalog-search__submit {
        flex: 1 1 100%;
    }
}

/* ── Listing ────────────────────────────────────────────────────────────── */

.bd-cs-catalog {
    color: var(--bd-cs-text);
}

/* The `title` attribute: the heading of a band, such as the related books on
   a product page. Size and family stay the theme's own h2. Spacing is on the
   bd-core-shared scale, kept tight so the listing does not float in white space. */
.bd-cs-catalog__title {
    margin: 0 0 var(--bd-space-md, 16px);
    color: var(--bd-cs-blue);
}

/* One type size for the whole row, set here and inherited, so the count on the
   left and the controls on the right sit on the same optical line. They used
   to be 1.05em and 0.9em: two different sizes on one row read as a misaligned
   row even when every box is perfectly centred, because the eye aligns
   x-heights and not boxes. */
.bd-cs-catalog__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-sm, 8px) var(--bd-space-lg, 24px);
    margin-bottom: var(--bd-space-md, 16px);
    font-size: 0.95em;
    line-height: 1;
}

.bd-cs-catalog__count {
    margin: 0;
    font-size: 1.05em;
    color: var(--bd-cs-text);
}

.bd-cs-catalog__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25em;
}

/* Every control in the bar is 36px high (0.55.0, plan round 4 D10): the sort
   options, the grid/list pair and the pagination. The sort options are
   14px; the current one is navy 700 and carries aria-current, so it is not
   told by colour alone. */
.bd-cs-catalog__order {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.75em;
    margin: 0;
    padding: 0 !important;
    font-size: 14px;
}

.bd-cs-catalog__order li {
    display: flex;
    margin: 0;
    padding: 0;
}

.bd-cs-catalog__order a,
.bd-cs-catalog__order-current {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--bd-btn-h-sm, 36px);
    font-size: 14px;
    line-height: 1;
}

.bd-cs-catalog__order a {
    color: var(--bd-cs-subtle);
    text-decoration: none;
}

.bd-cs-catalog__order a:hover {
    color: var(--bd-cs-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bd-cs-catalog__order a:focus-visible {
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: 2px;
}

.bd-cs-catalog__order-current {
    font-weight: 700;
    color: var(--bd-cs-blue);
}

/* The Griglia/Elenco pair (0.54.0, after www.giappichelli.it): two 36px glyph
   buttons joined in one group with a 1px navy outer border (15.5:1, WCAG
   1.4.11), 3px outer corners. The text labels are visually hidden and stay the
   accessible names; the chosen one is a navy fill with a white glyph AND
   aria-current, so it is never told by colour alone. No overflow:hidden on the
   group: it would clip the focus ring. */
.bd-cs-catalog__views {
    display: inline-flex;
    border: 1px solid var(--bd-cs-blue);
    border-radius: 3px;
}

.bd-cs-catalog__view {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--bd-btn-h-sm, 36px);
    height: calc(var(--bd-btn-h-sm, 36px) - 2px);
    padding: 0 10px;
    background-color: var(--bd-bg-subtle, #F3F5FB);
    color: var(--bd-cs-blue);
    line-height: 1;
    text-decoration: none;
    border-inline-end: 1px solid var(--bd-cs-blue);
}

.bd-cs-catalog__view:first-child {
    border-start-start-radius: 2px;
    border-end-start-radius: 2px;
}

.bd-cs-catalog__view:last-child {
    border-inline-end: 0;
    border-start-end-radius: 2px;
    border-end-end-radius: 2px;
}

.bd-cs-catalog__view:hover {
    background-color: var(--bd-cs-tint);
    color: var(--bd-cs-blue);
    text-decoration: none;
}

.bd-cs-catalog__view:focus-visible {
    z-index: 1;
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: 2px;
}

.bd-cs-catalog__view.is-active,
.bd-cs-catalog__view.is-active:hover {
    background-color: var(--bd-cs-blue);
    color: var(--bd-text-invert, #FFFFFF);
}

.bd-cs-catalog__view-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ── Listing container and card ─────────────────────────────────────────── */
/* Both moved to bd-core-shared's components.css in 0.24.0. The listing is now
   .bd-books-list with a --grid or --list modifier, and the card is
   .bd-book-card — the same one My Home and the homepage carousel use, which is
   the whole point: the three screens the mockups draw share their code now
   instead of being realigned by hand each time one of them changes.

   .bd-cs-catalog__items and .bd-cs-card* are still emitted alongside the
   shared classes, and .bd-cs-card still carries the out-of-plan mark, so a
   site that styled either of them keeps working. They are deprecated and
   carry no rules of their own here any more.

   One measurement changed on the way: the grid steps down at 980px and 767px,
   Divi 5's own two enabled breakpoints, rather than at the 1100px and 600px
   this file had picked for itself. Three columns at full width is unchanged. */

/* ── Pagination ─────────────────────────────────────────────────────────── */

/* Since 0.54.0, after www.giappichelli.it but readable: the numbers are
   unboxed (the old #DDE2F1 box measured 1.29:1), navy 15px (15.5:1) in a
   36x36 minimum target (32px until 0.55.0: every bar control is 36px). The current page (paginate_links() marks it
   aria-current="page") is 700 navy on --bd-neutral-soft (12.4:1) with a 2px
   navy underline, so it is not told by colour alone. Previous/next are a navy
   chevron on --bd-bg-subtle in a 1px navy box, their label visually hidden. */
.bd-cs-catalog__pagination {
    display: flex;
    /* paginate_links() emits up to eleven items, which do not fit a phone in
       one row, and a page must never scroll sideways. */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    /* 48px (0.63.3), on the shared scale: clear of the last card row. */
    margin-top: calc(var(--bd-space-md, 16px) * 3);
}

.bd-cs-catalog__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--bd-btn-h-sm, 36px);
    height: var(--bd-btn-h-sm, 36px);
    padding: 0 6px;
    border: 0;
    border-radius: 3px;
    background-color: transparent;
    color: var(--bd-cs-blue);
    font-size: var(--bd-fs-md, 15px);
    line-height: 1;
    text-decoration: none;
}

.bd-cs-catalog__pagination a.page-numbers:hover {
    background-color: var(--bd-cs-tint);
    color: var(--bd-cs-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bd-cs-catalog__pagination a.page-numbers:focus-visible {
    outline: 2px solid var(--bd-cs-blue);
    outline-offset: 2px;
}

.bd-cs-catalog__pagination .page-numbers.current {
    background-color: var(--bd-neutral-soft, #E0E4EC);
    color: var(--bd-cs-blue);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--bd-cs-blue);
}

.bd-cs-catalog__pagination .page-numbers.dots {
    color: var(--bd-text-muted, #5A6989);
}

.bd-cs-catalog__pagination .page-numbers.prev,
.bd-cs-catalog__pagination .page-numbers.next {
    width: var(--bd-btn-h-sm, 36px);
    padding: 0;
    border: 1px solid var(--bd-cs-blue);
    background-color: var(--bd-bg-subtle, #F3F5FB);
}

.bd-cs-catalog__pagination .page-numbers.prev:hover,
.bd-cs-catalog__pagination .page-numbers.next:hover {
    background-color: var(--bd-cs-tint);
}

.bd-cs-catalog__page-arrow {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bd-cs-catalog__empty {
    margin: var(--bd-space-md, 16px) 0;
    color: var(--bd-cs-subtle);
}

/* ── Journal card ───────────────────────────────────────────────────────── */

/* A [bd_cat_shortcodes_journals] card has no visible action since 0.58.0: its foot
   row holds only bd-cat-quickview's hidden preview carrier, so it is hidden
   too, leaving no empty gap under the meta lines. The preview script finds
   the carrier with querySelector(), which ignores display. */
.bd-cs-journal .bd-book-card__foot {
    display: none;
}

/* ── Filter drawer (0.63.0) ─────────────────────────────────────────────── */

/* `filters="yes"` on [bd_cat_shortcodes_results]/[bd_cat_shortcodes_journals]: a "Filters"
   button at the start of the toolbar, beside the count, and the filter panel
   sliding in from the left over the first card column. The button is printed
   `hidden` and shown from the first paint once the head script has marked
   <html> with `bd-cs-js` (catalog-facets.js marks it too); without
   JavaScript it stays hidden and the drawer is an ordinary block above the
   cards. The 0.56.0 column collapse (`bd-cs-filters-collapsed`) never
   reaches a drawer: its rules key on `.bd-cs-catalog-panel__body--has-close`,
   which a drawer's panel does not carry. */
.bd-cs-catalog__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bd-space-sm, 8px) var(--bd-space-md, 16px);
}

.bd-cs-catalog__filters-toggle[hidden] {
    display: none !important;
}

html.bd-cs-js .bd-cs-catalog__filters-toggle[hidden] {
    display: inline-flex !important;
}

.bd-cs-catalog__filters-toggle {
    min-height: var(--bd-btn-h-sm, 36px);
}

/* The drawer's positioned container: the cards, the empty message and the
   pagination. `overflow-x: clip` (not `hidden`, which would make it a scroll
   container and break the sticky inner panel) keeps the closed, translated
   drawer from widening the page. The template sets the desktop column count;
   the step-downs mirror bd-core-shared's grid (two at 980px, one at 767px). */
.bd-cs-catalog__stage {
    --bd-cs-drawer-cols: var(--bd-cs-drawer-cols-desktop, 3);
    --bd-cs-drawer-gap: var(--bd-space-md, 16px);
    --bd-cs-drawer-duration: 0.25s;

    position: relative;
    overflow-x: clip;
}

/* While the drawer is open (catalog-facets.js sets `is-drawer-open`) the
   stage is at least the drawer's floor, the same expression as the drawer's
   min-height, so the footer and anything below an empty or short listing
   move down instead of hiding under the drawer. Dropped on close. */
html.bd-cs-js .bd-cs-catalog__stage.is-drawer-open {
    min-height: min(calc(100vh - var(--bd-cs-drawer-top, var(--bd-cs-drawer-top-auto, 0px))), 24rem);
}

/* On an empty listing the "no results" message moves right of the open
   drawer (its measured width, `--bd-cs-drawer-shift`, plus the grid gap),
   so it stays readable. On a phone the drawer is the whole width: the
   message stays under it and shows again on close. */
html.bd-cs-js .bd-cs-catalog__stage.is-drawer-open > .bd-cs-catalog__empty {
    padding-inline-start: calc(var(--bd-cs-drawer-shift, 0px) + var(--bd-cs-drawer-gap));
}

@media (max-width: 767px) {
    html.bd-cs-js .bd-cs-catalog__stage.is-drawer-open > .bd-cs-catalog__empty {
        padding-inline-start: 0;
    }
}

.bd-cs-catalog-drawer {
    margin-bottom: var(--bd-space-md, 16px);
}

/* Whole card columns, never part of one: one column, or as many as reach a
   usable 17.5rem form (two columns plus the gap, and so on), never wider
   than the stage. catalog-facets.js measures this from the first grid card
   into `--bd-cs-drawer-w`; the calc() below is the same rule from the grid's
   own count and gap (`--bd-cs-drawer-col`), used until then, rounded up to
   whole columns where CSS round() exists. In list view there are no columns
   to cut, and the drawer is simply at least 17.5rem. As tall as the
   cards (0.63.1: no longer the viewport, so it ends above the pagination),
   and never under the band the panel keeps: the visible viewport, at most
   24rem, room for both sticky rows and a usable strip of the form (0.63.1). */
html.bd-cs-js .bd-cs-catalog-drawer {
    --bd-cs-drawer-col: calc((100% - (var(--bd-cs-drawer-cols) - 1) * var(--bd-cs-drawer-gap)) / var(--bd-cs-drawer-cols));

    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    box-sizing: border-box;
    width: var(--bd-cs-drawer-w, var(--bd-cs-drawer-col));
    max-width: 100%;
    min-height: max(100%, min(calc(100vh - var(--bd-cs-drawer-top, var(--bd-cs-drawer-top-auto, 0px))), 24rem));
    margin: 0;
    border-inline-end: 1px solid var(--bd-cs-border);
    background-color: var(--bd-surface, var(--bd-white, #FFFFFF));
    box-shadow: 4px 0 16px rgba(0, 30, 96, 0.12);
    transform: translateX(calc(-100% - 24px));
    visibility: hidden;
    transition: transform var(--bd-cs-drawer-duration) ease, visibility 0s linear var(--bd-cs-drawer-duration);
}

/* Closed, the drawer adds no height below the stage, from the first paint:
   no floor, held to the stage's height, anything taller clipped (`clip`,
   not `hidden`, so it never becomes a scroll container). The cap lifts on
   open and returns when catalog-facets.js drops `is-closing`, after the
   slide-out (at once under reduced motion). */
html.bd-cs-js .bd-cs-catalog-drawer:not(.is-open):not(.is-closing) {
    min-height: 0;
    max-height: 100%;
    overflow: clip;
}

@supports (width: round(up, 1px, 1px)) {
    html.bd-cs-js .bd-cs-catalog-drawer {
        width: var(--bd-cs-drawer-w, min(100%, max(var(--bd-cs-drawer-col), round(up, 17.5rem + var(--bd-cs-drawer-gap), var(--bd-cs-drawer-col) + var(--bd-cs-drawer-gap)) - var(--bd-cs-drawer-gap))));
    }
}

html.bd-cs-js .bd-cs-catalog--list .bd-cs-catalog-drawer {
    min-width: min(100%, 17.5rem);
}

html.bd-cs-js .bd-cs-catalog-drawer.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--bd-cs-drawer-duration) ease, visibility 0s linear 0s;
}

/* The panel stays in view while the cards scroll past it, with its own
   scroll when it is taller than the space it has, pinned just under the
   site's sticky header. catalog-facets.js detects that header's bottom edge
   (`--bd-cs-drawer-top-auto`, on the stage; a theme's explicit
   `--bd-cs-drawer-top` wins) and sets `--bd-cs-drawer-visible` to the
   viewport left below max(header, stage top), on open, on scroll and on
   resize, so the Search button is in view without scrolling the page. */
html.bd-cs-js .bd-cs-catalog-drawer__inner {
    position: sticky;
    top: var(--bd-cs-drawer-top, var(--bd-cs-drawer-top-auto, 0px));
    max-height: var(--bd-cs-drawer-visible, calc(100vh - var(--bd-cs-drawer-top, var(--bd-cs-drawer-top-auto, 0px))));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Each sticky row's measured height (catalog-facets.js), so a focused
       field never hides under one; the rem values are the fallback. */
    scroll-padding-block: var(--bd-cs-drawer-pad-start, 5rem) var(--bd-cs-drawer-pad-end, 9rem);
}

/* The action row (Search, and Clear filters when there is one) stays at the
   bottom of the panel's scroll (0.63.1): a form taller than the panel scrolls
   under it, so Search is reachable on the first open. Drawer only, never the
   [bd_cat_shortcodes_filters] column. The panel's own bottom padding moves onto the
   row, so the row sits flush with the scroll edge whichever edge a browser
   pins sticky content to; background and border are the drawer's own. */
html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-drawer__inner {
    padding-top: 0;
    padding-bottom: 0;
}

/* The action row is sticky within its parent box. In the drawer the boxes of
   the panel, its body and the form are dropped (`display: contents`: the
   form still submits every field, custom properties still inherit), so that
   parent is the drawer's own content wrapper, `.bd-cs-catalog-drawer__body`,
   right under the sticky head: the row pins to the panel's bottom wherever
   the form starts, even while the plan choice alone fills the view. The plan
   choice keeps the body's former gap as its margin, and the wrapper is the
   gapless column the body was, so no margin collapses differently. Drawer
   only: the [bd_cat_shortcodes_filters] column keeps every box. */
html.bd-cs-js .bd-cs-catalog-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-panel__plan {
    margin-bottom: 1.25em;
}

html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-panel,
html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-panel__body:not([hidden]),
html.bd-cs-js .bd-cs-catalog-drawer form.bd-cs-catalog-filters:not([hidden]) {
    display: contents;
}

/* Both sticky rows span the panel's full inner width (negative inline margin,
   matching padding), so nothing scrolling under them, a facet chevron
   included, shows beside them. The panel's top padding moves onto the head
   as its bottom padding moved onto the action row. */
html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-filters__actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-inline: calc(-1 * var(--bd-space-md, 16px));
    padding: var(--bd-space-sm, 8px) var(--bd-space-md, 16px) var(--bd-space-md, 16px);
    border-top: 1px solid var(--bd-cs-border);
    background-color: var(--bd-surface, var(--bd-white, #FFFFFF));
}

/* The heading and the X stay at the top of the panel's scroll, so the X is
   reachable while the form scrolls. Drawer only. */
html.bd-cs-js .bd-cs-catalog-drawer .bd-cs-catalog-drawer__head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-inline: calc(-1 * var(--bd-space-md, 16px));
    padding: var(--bd-space-md, 16px) var(--bd-space-md, 16px) var(--bd-space-sm, 8px);
    border-bottom: 1px solid var(--bd-cs-border);
    background-color: var(--bd-surface, var(--bd-white, #FFFFFF));
}

.bd-cs-catalog-drawer__inner {
    box-sizing: border-box;
    padding: var(--bd-space-md, 16px);
}

.bd-cs-catalog-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bd-space-sm, 8px);
    margin-bottom: var(--bd-space-md, 16px);
}

.bd-cs-catalog-drawer__title {
    margin: 0;
    padding: 0;
    color: var(--bd-cs-blue);
    font-size: 1.25em;
    line-height: 1.2;
}

/* Same 32px target as the column panel's X (above WCAG 2.5.8's 24px). */
.bd-cs-catalog-drawer__close {
    --bd-btn-icon-size: 32px;

    flex: 0 0 auto;
}

/* Without JavaScript the X cannot close anything. */
html:not(.bd-cs-js) .bd-cs-catalog-drawer__close {
    display: none;
}

@media (max-width: 980px) {
    .bd-cs-catalog__stage {
        --bd-cs-drawer-cols: min(2, var(--bd-cs-drawer-cols-desktop, 3));
    }
}

/* A phone: the whole width, whatever was measured. */
@media (max-width: 767px) {
    html.bd-cs-js .bd-cs-catalog-drawer {
        width: 100%;
        min-width: 0;
    }
}

/* ── Narrower screens ───────────────────────────────────────────────────── */

/* The grid's own step-downs now live in bd-core-shared's components.css, on Divi's
   980px and 767px. What is left here is the toolbar, which is this plugin's. */
@media (max-width: 767px) {
    .bd-cs-catalog__toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bd-cs-facet__title::after {
        transition: none;
    }

    html.bd-cs-js .bd-cs-catalog-drawer,
    html.bd-cs-js .bd-cs-catalog-drawer.is-open {
        transition: none;
    }
}