/* ==========================================================================
   shop.css — rules only "Get your reading" (shop.html) uses
   Added 2026-10-08, when the page split into three sections: the books,
   the PDF book and the dog books (Zlatan). A rule for one page goes in
   that page's own stylesheet (house style, 2026-10-01).
   ========================================================================== */
/* ---- the jumps on the catalogue bar ----
   The old Ebook and Dogs filters, now links down the page. Same square
   outline as the filters beside them, but never filled — they are not a
   choice that stays on — and with the thin down chevron after the word,
   so they read as "go there", not "show these". margin-right: auto keeps
   them beside the filters and leaves the sort on the right. */
.catalogue-jump {
    margin-right: auto;
}

.catalogue-jump a {
    padding-right: var(--space-8);
    background-image: url('../img/icons/chevron-down-white.svg');
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: .75rem;
}

/* ---- _ebook_band — the PDF book, on tan ----
   A .row of two .col-48 (since Zlatan's pass, 2026-10-08; it was two
   .w-container-50 halves): photos left, product right; stacked under
   768px with the photo first. Text is dark on the light ground, as on
   product.html's top. */
.ebook-band {
    color: var(--c-text);
    text-shadow: none;
}

.ebook-band__photos .card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ebook-band__text {
    align-self: center;
}

@media (max-width: 767px) {
    .ebook-band__photos {
        margin-bottom: var(--space-12);
    }

    .ebook-band__text {
        text-align: center;
    }
}

/* From 768px the two columns are spaced from the middle. The text is
   centred against the photo by align-self (.row is flex); the padding-top
   that did it while the halves floated is no longer needed. */
@media (min-width: 768px) {
    .ebook-band__text {
        /* padding-top: var(--space-12) */
        padding-left: var(--space-6);
    }

    .ebook-band__photos {
        padding-right: var(--space-6);
    }
}

.ebook-band__name {
    font-family: var(--font-heading-fat);
    font-size: var(--fs-4xl);
    line-height: 1.1;
    color: var(--c-blue-900);
}

/* The product page's star list, on the same ground. */
.ebook-band__points {
    padding: 0;
    list-style: none;
    text-align: left;
}

.ebook-band__points li {
    margin-bottom: var(--space-2);
    padding-left: var(--space-6);
    background: url('../img/icons/astro-star-bullet.svg') no-repeat left .35em / .85rem;
}

@media (max-width: 767px) {
    .ebook-band__points {
        width: fit-content;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
    }
}

.ebook-band__price {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-4xl);
    line-height: 1.1;
    color: var(--c-blue-900);
}

.ebook-band .button-row {
    text-align: left;
}

@media (max-width: 767px) {
    .ebook-band .button-row {
        text-align: center;
    }
}

/* ---- "What is in your reading": its two buttons ----
   The sample (outline) and "See all books" (filled, back up to the grid),
   added 2026-10-22 (Zlatan). Side by side and centred, wrapping on a phone
   with the same gap. The filled one takes the small outline's padding plus
   the 2px the outline's border adds, so the two stand the same height. */
.reading-detail__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* rows (a phone) --space-2 apart, the two side by side --space-6 apart
       (Zlatan, 2026-10-22: "more space on left"; it was --space-2) */
    gap: var(--space-2) var(--space-6);
}

.reading-detail__buttons .button.small-button:not(.outline) {
    padding: calc(var(--space-2) + 2px) calc(var(--space-4) + 2px);
}