/*
 * The product page (functions/webshop/bekijk, Decision 23).
 *
 * Below 1024px one column in the order a purchase goes: the photos, then the
 * buying area (name, price, availability, colour, quantity, order), then the
 * description, the specifications, the shop's reviews and the accessories.
 *
 * From 1024px the buying area stands beside the photos in a column of its own
 * and keeps it while the description runs on under them, so the description
 * begins with the photos rather than waiting for whichever column is taller -
 * a buying area with many colours or a long offer notice would otherwise leave
 * the page empty under the photos. (So the photos are not sticky: they would
 * travel down over the description that now follows them.) Below both, the
 * specifications, the reviews and the accessories run across the full width.
 */

.product-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shop-rhythm-section);
    padding-block: var(--shop-rhythm-heading) var(--shop-rhythm-section);
}

.product-page__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--shop-rhythm-subsection);
    margin-block-start: calc(var(--shop-rhythm-heading) - var(--shop-rhythm-section));
}

.product-page__section {
    display: grid;
    align-content: start;
    gap: var(--shop-space-4);
    min-width: 0;
}

/* combined.css sets h2 in its own size and weight; answered here. */
.product-page__heading {
    margin: 0;
    color: var(--shop-ink);
    font-size: var(--shop-text-xl);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.product-page__description .cms-prose {
    max-width: 68ch;
}

@media (min-width: 1024px) {
    .product-page__main {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto auto auto;
        column-gap: var(--shop-space-10);
        row-gap: var(--shop-rhythm-section);
        align-items: start;
    }

    .product-page__gallery {
        grid-area: 1 / 1;
    }

    .product-page__description {
        grid-area: 2 / 1;
    }

    /* Under both columns: a band of its own, in two columns of rows so the
       facts fill the width rather than trailing down one side. */
    .product-page__specs {
        grid-area: 3 / 1 / 4 / -1;
    }

    .product-page__specs .spec-list {
        columns: 2;
        column-gap: var(--shop-space-10);
    }

    /* The buying area holds the second column beside the photos and the
       description - never into the specifications' row, which crosses both. */
    .product-page__buy {
        grid-area: 1 / 2 / 3 / 3;
    }

    /* A colour without photos has no gallery: its description takes the first
       row rather than leaving one empty beside the buying area. */
    .product-page__main:not(:has(.product-page__gallery)) .product-page__description {
        grid-area: 1 / 1;
    }

    .product-page__main:not(:has(.product-page__gallery)) .product-page__specs {
        grid-area: 2 / 1 / 3 / -1;
    }

    .product-page__main:not(:has(.product-page__gallery)) .product-page__buy {
        grid-area: 1 / 2 / 2 / 3;
    }

    /* Without a description the specifications move up, and the buying area's
       column ends with them - no empty row between. */
    .product-page__main:not(:has(.product-page__description)) .product-page__specs {
        grid-area: 2 / 1 / 3 / -1;
    }

    .product-page__main:not(:has(.product-page__description)) .product-page__buy {
        grid-area: 1 / 2 / 2 / 3;
    }
}

/* Below 1024px the floating Trusted Shops badge sits over the buying area,
   beside the price and the order button. While that area is on screen it is
   hidden - the page carries the shop's rating in the buying area and its
   reviews in a section of their own - and it returns as soon as the visitor
   scrolls past it. The widget itself is untouched (it positions itself, hence
   !important), as layers.css already does for the footer. */
@media (max-width: 1023.98px) {
    html.product-buy-in-view [id^="trustbadge-container"] {
        display: none !important;
    }
}