/* ==========================================================================
   The product page — page-scoped, linked only by product.html (house style: a
   rule for one page goes in that page's own sheet). Started 2026-10-03.

   product.html is the COMMON product page: a photo gallery beside what is
   bought, buy button at once, the details below, the reviews, other covers.
   The long story page that used to be product.html is product-landing.html
   (for advertising and the CRM email). The FAQ's <details> come from
   support.css and the blocks from blocks.css; only what this page adds is here.
   ========================================================================== */
/* ---- breadcrumb: where this page sits in the catalogue ---- */
.breadcrumb {
    padding: var(--space-6) 0 0;
    margin-bottom: var(--space-8);
    font-size: var(--fs-xs);
    color: var(--c-text);

    /* background-color: var(--c-blue-900) */
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li + li::before {
    content: "\203A";
    margin-right: var(--space-2);
    color: var(--c-text-soft);
}

.breadcrumb a {
    color: var(--c-text);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--c-orange);
}

.breadcrumb [aria-current="page"] {
    color: var(--c-blue-900);
    font-weight: 500;
}

/* ---- the top: photos, and what is bought ---- */
.product-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    color: var(--c-text);
    padding-bottom: var(--space-16);
    align-items: start;
}

@media (min-width: 900px) {
    .product-top {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--space-12);
    }

    /* The buy column stays in view while the photos are looked at. */
    .product-buy {
        position: sticky;
        top: var(--space-6);
    }
}

.product-buy {
    text-align: left;
}

/* Under 900px the page is one column and the name belongs ABOVE the photos
   (Zlatan, 2026-10-03). The buy column steps out of the way (display: contents)
   so its head and body are grid items of .product-top, and the head is put
   first; the body follows the gallery. From 900px this is switched off and
   the column is one block beside the gallery, as before. */
@media (max-width: 899px) {
    .product-buy {
        display: contents;
    }

    .product-buy__head {
        order: -1;
        margin-bottom: calc(var(--space-4) * -1);
    }

    .product-buy__head .product-buy__subtitle {
        margin-bottom: 0;
    }

    /* Centred under 900px (Zlatan, 2026-10-07): one column of centred text and
       buttons, as the rest of the page is on a phone. The list of points keeps
       its bullets lined up: the block is centred, its lines are not. */
    .product-buy {
        text-align: center;
    }

    .product-rating,
    .product-buy__actions {
        justify-content: center;
    }

    .product-points {
        width: fit-content;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }
}

.product-buy__kind {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-orange);
}

.product-buy h1 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading-fat);
    font-size: var(--fs-4xl);
    line-height: 1.1;
}

.product-buy__subtitle {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--fs-xl);

    /* color: var(--c-white-75) */
}

/* The rating is the landing page's, left-aligned here. */
.product-rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.product-rating .star-rating {
    margin-bottom: 0;
}

.product-rating .rating-score {
    /* color: var(--c-white-soft) */
    font-weight: var(--fw-bold);
}

.product-rating .rating-count {
    color: var(--c-text);
    font-size: var(--fs-sm);
    text-decoration: underline;
}

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

.product-price .price-note {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
}

/* The cents of a discounted price, raised as on the landing page's offer
   box (€68<sup>40</sup>). */
.product-price sup {
    font-size: .5em;

    /* color: var(--c-blue-900) */
}

.product-points {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.product-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;
}

/* ---- all the photos, as small pictures under the gallery ----
   Made by blocks.js (initImageSlider) from the slides; the film shows its
   poster with a play mark. The shown one is outlined. */
.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
}

.gallery-thumbs__item {
    position: relative;
    padding: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid transparent;
    background-color: var(--c-tan);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.gallery-thumbs__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbs__item:hover,
.gallery-thumbs__item:focus-visible {
    border-color: var(--c-green);
}

.gallery-thumbs__item[aria-current="true"] {
    border-color: var(--c-orange);
}

/* The last tile opens the full-screen view: a flat blue square with the
   corners icon, not a picture, and never outlined as the shown photo. */
.gallery-thumbs__expand {
    border-color: var(--c-blue-850);
    background: var(--c-blue-850) url('../img/icons/expand.svg') no-repeat center / 2.25rem;
    border-radius: var(--radius);
}

.gallery-thumbs__expand:hover {
    background-color: var(--c-green);
}

.gallery-thumbs__item.is-video::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5rem;
    height: 1.5rem;
    margin: -.75rem 0 0 -.75rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55) url('../img/icons/arrow-right.svg') no-repeat 55% 50% / .45rem;
}

/* "See the book in 3D" sits clear of the pictures above it. */
.product-gallery__3d {
    margin-top: var(--space-6);
}

.product-buy__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    /* margin: 0 */
    margin: 0 0 var(--space-2);
}

.product-assurances {
    margin: 0;
    padding: var(--space-4) 0 0;
    border-top: 1px dotted var(--c-border);
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
}

.product-assurances li {
    margin-bottom: var(--space-1);
}

.product-assurances b {
    color: var(--c-text);
    font-weight: var(--fw-semibold);
}

/* ---- the details: the FAQ's folds, in a reading column ---- */
.product-details {
    max-width: 46rem;
    margin: 0 auto;
}

/* ---- _reading_contents — what the reading covers (2026-10-07) ----
   The four groups of the Etsy list, each the Astrology basics chapters'
   .planet-list (blocks.css) under an orange h3. Two columns from 900px, so
   planets sit beside houses and aspects beside the other points: the long
   lists pair with each other and the rows end level. One column below, where
   the keywords need the whole width. */
.reading-contents__lead {
    max-width: 40rem;
    margin: 0 auto var(--space-8);
    color: var(--c-white-75);
}

.reading-contents {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
    .reading-contents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-12);
    }
}

.reading-contents__group h3 {
    margin-bottom: var(--space-1);
    font-size: var(--fs-lg);
}

.reading-contents__note {
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--c-white-75);
}

/* The method line under the four groups: a fact for the reader who asks,
   so small, and out of the way of the one who does not. */
.reading-contents__method {
    margin-bottom: var(--space-8);
    font-size: var(--fs-sm);
    color: var(--c-white-75);
}

/* ---- _lucky_star — the Etsy opening (2026-10-07) ---- */
.lucky-star__sub {
    margin-bottom: var(--space-6);
    font-size: var(--fs-xl);
    color: var(--c-orange);
}