/* ==========================================================================
   Shop
   --------------------------------------------------------------------------
   The Shop module's public pages: the shop window, a product page, the
   basket and checkout. Laid out after the site redesign (shop window, product
   page, basket with its step indicator and summary) and built only from the
   site's tokens (tokens.css), the same position content.css and portal.css are
   in.
   ========================================================================== */

.shop {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: var(--space-10) var(--shell-gutter) var(--space-14);
}

.shop__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
}

.shop__intro {
    margin: 0 0 var(--space-8);
    color: var(--color-text-muted);
}

.shop__empty {
    padding: var(--space-8);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    text-align: center;
}

.shop__notice {
    margin-bottom: var(--space-6);
}

/* --- Shop window ----------------------------------------------------------- */

.shop-hero {
    background: var(--color-surface-warm);
}

/* Sized and spaced like every other page's opening (content.css's .pg-hero,
   .pg-rule) so the shop reads as part of the same site: the same heading size,
   the same short accent rule under it, the same body size. */
.shop-hero__inner {
    width: 100%;
    max-width: var(--shell-max);
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 5.25rem) var(--shell-gutter);
}

.shop-hero__title {
    max-width: 42rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-page-hero);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    color: var(--color-ink);
}

.shop-hero__rule {
    display: block;
    width: 3.5rem;
    height: 2px;
    margin: var(--space-5) 0 var(--space-6);
    background: var(--color-accent-light);
}

.shop-hero__text {
    max-width: 38rem;
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text);
}

/* The design's closing thank-you, a tinted band like the opening one. */
.shop-closing {
    background: var(--color-surface-warm);
}

.shop-closing__text {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--space-12) var(--shell-gutter);
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--color-text);
    text-align: center;
}

/* Narrowing the shop window to one category: plain links, styled as pills. */
.shop-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-8);
}

.shop-filter__link {
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.shop-filter__link:hover,
.shop-filter__link:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.shop-filter__link.is-current {
    border-color: var(--color-accent-text);
    background: var(--color-accent-text);
    color: var(--color-ink-inverse);
}

.product-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.product-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    padding: var(--space-6);
    background: var(--color-surface-sunken);
}

.product-card__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: var(--shadow-cover);
}

.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.product-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}

.product-card__title a {
    color: var(--color-text-strong);
    text-decoration: none;
}

.product-card__title a:hover,
.product-card__title a:focus-visible {
    text-decoration: underline;
}

/* Three lines at most, so every card in a row stays the same height whatever
   its product's description runs to; the product page shows it in full. */
.product-card__text {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.product-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
}

.product-card__price {
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
}

.product-card__cta {
    justify-content: center;
    margin-top: var(--space-3);
}

.shop-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface-warm);
    color: var(--color-text-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

/* --- Product page ---------------------------------------------------------- */

.product-page {
    display: grid;
    gap: var(--space-10);
}

.product-gallery__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--color-surface-warm);
}

.product-gallery__image {
    display: block;
    width: 100%;
    max-width: 19rem;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-cover);
}

/* site.js magnifies the picture around a mouse pointer (is-zooming, with the
   pointer's spot in --zoom-x/--zoom-y); the frame clips it to its own box. */
.product-gallery__zoom {
    display: block;
    width: 100%;
    max-width: 19rem;
    overflow: hidden;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-cover);
}

.product-gallery__zoom .product-gallery__image {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform 0.2s ease;
}

.product-gallery__zoom.is-zoomable {
    cursor: zoom-in;
}

.product-gallery__zoom.is-zooming .product-gallery__image {
    transform: scale(2.2);
}

.product-gallery__zoom[hidden],
.flipbook[hidden] {
    display: none;
}

/* A book's front and back cover as one card that turns over (site.js toggles
   is-flipped; without it, "Omdraaien" loads the page on the other side). Only
   the two covers exist, so it turns flat, never showing a spine. */
.flipbook {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    perspective: 1600px;
}

.flipbook__book {
    position: relative;
    display: block;
    width: 100%;
    max-width: 19rem;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
    cursor: zoom-in;
}

/* Turns right to left, the way a book in the hand is turned over to its back. */
.flipbook.is-flipped .flipbook__book {
    transform: rotateY(-180deg);
}

.flipbook__face {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-cover);
    backface-visibility: hidden;
}

.flipbook__face img {
    display: block;
    width: 100%;
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform 0.2s ease;
}

.flipbook__face--back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.flipbook__face--back img {
    height: 100%;
    object-fit: cover;
}

/* Magnified under a mouse pointer (site.js), strongly enough to read a back cover's small print. */
.flipbook__book.is-zooming .flipbook__face img {
    transform: scale(2.6);
}

.product-gallery__sample {
    margin-top: var(--space-4);
}

/* Full screen (site.js builds it on the first click on a picture). Its own
   class, not the gallery's .lightbox, which a content page's gallery uses. */
.has-viewer {
    overflow: hidden;
}

.viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-16);
    background: rgba(250, 245, 239, 0.97);
}

.viewer[hidden] {
    display: none;
}

.viewer__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: var(--shadow-cover);
}

.viewer__close,
.viewer__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.viewer__close:hover,
.viewer__nav:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.viewer__close {
    top: var(--space-4);
    right: var(--space-4);
}

.viewer__nav {
    top: 50%;
    transform: translateY(-50%);
}

.viewer__nav--previous {
    left: var(--space-4);
}

.viewer__nav--next {
    right: var(--space-4);
}

.viewer__count {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    transform: translateX(-50%);
}

@media (max-width: 40rem) {
    .viewer {
        padding: var(--space-16) var(--space-2);
    }

    .viewer__nav {
        top: auto;
        bottom: var(--space-3);
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flipbook__book,
    .flipbook__face img,
    .product-gallery__zoom .product-gallery__image {
        transition: none;
    }
}


.product-gallery__thumbs {
    display: flex;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.product-gallery__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 6rem;
    padding: var(--space-2);
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-sm);
    background: var(--color-surface-warm);
}

.product-gallery__thumb.is-current {
    border-color: var(--color-accent);
}

.product-gallery__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-page__subtitle {
    margin: calc(-1 * var(--space-1)) 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-quote);
    font-style: italic;
    color: var(--color-accent-text);
}

.product-page__lead {
    margin: 0 0 var(--space-6);
    font-size: var(--text-lead);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

.product-page__label {
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.product-page__price {
    margin: 0;
    font-size: var(--text-section);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
}

.product-page__note {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.product-page__form {
    margin-top: var(--space-6);
}

.product-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.product-page__quantity {
    margin: 0;
}

.product-page__quantity .input {
    width: 5rem;
    height: 100%;
    text-align: center;
}

/* The button takes the rest of the row, as in the design ("In winkelmandje ·
   € 19,95", the total added by site.js). */
.product-page__add {
    flex: 1 1 14rem;
    justify-content: center;
}

/* site.js wraps the quantity field in − and + buttons; without it the plain
   number field above is all there is, and works the same. */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 100%;
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.qty-stepper .input {
    width: 2.75rem;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper .input::-webkit-inner-spin-button,
.qty-stepper .input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.qty-stepper__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-lead);
    cursor: pointer;
}

.qty-stepper__button:hover {
    color: var(--color-accent-text);
}

.qty-stepper__button:disabled {
    color: var(--color-text-subtle);
    cursor: default;
}

.format-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* One card per variant, the radio inside hidden visually only (it still takes
   focus and is still what gets posted) — the same treatment the donation form's
   own choices get (content.css's .donation-form__option). */
.format-choice__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.format-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.format-choice__option:hover {
    border-color: var(--color-accent-strong);
}

.format-choice__option:has(input:checked) {
    border-color: var(--color-accent-strong);
    background: var(--color-surface-sunken);
}

.format-choice__option:has(input:focus-visible) {
    outline: 2px solid var(--color-accent-strong);
    outline-offset: 2px;
}

.format-choice__option.is-disabled {
    border-color: var(--color-border-card);
    cursor: not-allowed;
    color: var(--color-text-subtle);
}

.format-choice__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
}

.format-choice__label {
    font-weight: var(--weight-semibold);
}

.format-choice__note {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.format-choice__price {
    font-weight: var(--weight-bold);
}

.product-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-card);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.product-facts__item dt {
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
}

.product-facts__item dd {
    margin: 0;
}

.product-content {
    border-top: 1px solid var(--color-border-card);
}

/* --- Steps, basket and checkout -------------------------------------------- */

.shop-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-8);
    padding: 0;
    list-style: none;
}

.shop-steps__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.shop-steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: var(--text-xs);
}

.shop-steps__item.is-done {
    background: var(--color-accent-light);
    color: var(--color-accent-text);
}

.shop-steps__item.is-done .shop-steps__num {
    background: var(--color-accent);
    color: var(--color-ink-inverse);
}

.shop-steps__item.is-current {
    background: var(--color-ink);
    color: var(--color-ink-inverse);
}

.shop-steps__item.is-current .shop-steps__num {
    background: var(--color-accent-light);
    color: var(--color-ink);
}

.basket,
.checkout {
    display: grid;
    gap: var(--space-8);
}

.basket__items {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.basket-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.basket-item__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 6rem;
}

.basket-item__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.basket-item__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
}

.basket-item__title a {
    color: var(--color-text-strong);
    text-decoration: none;
}

.basket-item__meta {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.basket-item__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.basket-item__total {
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
    text-align: right;
}

/* The basket's donation row: one slim card, a heading line and under it the
   suggested amounts as pills with a field for any other amount beside them. */
.basket__main > * + * {
    margin-top: var(--space-4);
}

.basket-donation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: center;
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-warm);
}

.basket-donation__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-accent-text);
}

.basket-donation__title {
    margin: 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: var(--weight-medium);
    line-height: 1.2;
}

.basket-donation__intro {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.basket-donation__choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    grid-column: 1 / -1;
}

/* Shown before the typed amount, which comes first in the markup (see cart.php). */
.basket-donation__amount {
    order: -1;
    padding: 0.4375rem 0.875rem;
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    cursor: pointer;
}

.basket-donation__amount:hover,
.basket-donation__amount:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent-text);
}

.basket-donation__amount[aria-pressed="true"] {
    border-color: var(--color-accent-text);
    background: var(--color-accent-text);
    color: var(--color-ink-inverse);
}

.basket-donation__other {
    display: inline-flex;
    align-items: center;
    padding-left: 0.875rem;
    border: 1.5px solid var(--color-border-card);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.basket-donation__other:focus-within {
    border-color: var(--color-accent);
}

.basket-donation__euro {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.basket-donation__other input {
    width: 7.75rem;
    padding: 0.4375rem 0.375rem;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    line-height: 1.2;
    outline: none;
}

.basket-donation__add {
    align-self: stretch;
    padding: 0 0.875rem;
    border: 0;
    border-left: 1px solid var(--color-border-card);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: transparent;
    color: var(--color-accent-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
}

.basket-donation__add:hover,
.basket-donation__add:focus-visible {
    background: var(--color-surface-warm);
}

.basket-donation__remove {
    padding: 0.25rem;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.basket-donation__remove:hover,
.basket-donation__remove:focus-visible {
    color: var(--color-accent-text);
}

.basket-donation__error {
    grid-column: 1 / -1;
    margin: 0;
}

.basket__qty {
    width: 5rem;
}

.basket-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.shop-summary {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface-warm);
}

.shop-summary__title {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-regular);
    color: var(--color-text-strong);
}

.shop-summary__lines {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.shop-summary__lines li,
.basket-totals__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.basket-totals__row--total {
    align-items: baseline;
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-strong);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
}

.basket-totals__row--total span:last-child {
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: var(--weight-regular);
}

.shop-summary__promise {
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.shop-summary .button {
    width: 100%;
    margin-top: var(--space-4);
    justify-content: center;
}

/* The details form: sections one under the other, each a small heading over a
   two-column grid of fields (one column on a phone), a thin rule between them. */
.checkout__form {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.checkout__section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.checkout__section + .checkout__section {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-card);
}

/* Floated so a fieldset's legend sits inside the section like any heading,
   below the rule, not on the fieldset's own border. */
.checkout__legend {
    float: left;
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-strong);
}

.checkout__legend + * {
    clear: both;
}

.checkout__grid {
    display: grid;
    gap: var(--space-4);
    /* A message under one field must not stretch the fields beside it. */
    align-items: start;
}

/* The same, gentler rounding as the donation form's fields, not the site's pill. */
.checkout__form .input,
.checkout__form .input:focus-visible {
    border-radius: var(--radius-sm);
}

.checkout__check-note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.checkout__lookup {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.checkout__lookup:empty {
    display: none;
}

.checkout__method .format-choice__option + .format-choice__option {
    margin-top: var(--space-3);
}

.checkout__method-note {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
}

.checkout__consents {
    display: grid;
    gap: var(--space-3);
}

.checkout__check {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--color-text-strong);
    font-size: var(--text-base);
    line-height: 1.5;
    cursor: pointer;
}

.checkout__check input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    accent-color: var(--color-accent-text);
}

.checkout__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.field-error {
    margin: var(--space-1) 0 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
}

.shop-cart-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 48rem) {
    .product-page {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: start;
    }

    .basket,
    .checkout {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        align-items: start;
    }

    .shop-summary {
        position: sticky;
        top: var(--space-16);
    }

    .checkout__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Postcode, house number and addition a third of the row each; street and town half each below. */
    .checkout__grid--address {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .checkout__grid--address > .field {
        grid-column: span 2;
    }

    .checkout__grid--address > .checkout__street,
    .checkout__grid--address > .checkout__city {
        grid-column: span 3;
    }
}

/* Discounts: the regular price struck through beside the price paid. */
.price-was {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.75em;
    font-weight: var(--weight-regular, 400);
}

.shop-badge--sale {
    background: var(--color-accent-text);
    color: var(--color-ink-inverse);
}

.product-card__flag {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
}

/* Price and struck-through regular price stay on one line on a card. */
.product-card__price {
    white-space: nowrap;
}

/* The link under the description ("Meer over het boek"). */
.product-page__more {
    margin: calc(-1 * var(--space-3)) 0 var(--space-6);
    font-weight: var(--weight-semibold);
}

/* .site-main in front, to outrank base.css's own ".site-main p a". */
.site-main .product-page__more a {
    color: var(--color-accent-text);
    text-decoration: none;
}

.site-main .product-page__more a:hover,
.site-main .product-page__more a:focus-visible {
    text-decoration: underline;
}

.product-content {
    scroll-margin-top: 6rem;
}