/*
 * The shop's own additions to site.css (22 Oct), loaded with @push('head') by the
 * v3 shop pages that need them: the product page, the shelf and the hair shop
 * (whose product sheet carries the buying panel).
 *
 *  - .pb-optgroup__name: a length heading over its colours in the buying panel
 *    (site.parts.product-buy, ShopShelf::groups).
 *  - .pb-colours: the colour chart card on the hair shop.
 */

.pb-optgroup__name {
    margin: 6px 0 0;
    font-family: var(--pb-mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--pb-gold-soft);
}

.pb-buy__opts .pb-optgroup__name:first-of-type { margin-top: 0; }

/* A colour names itself in a word or two: three to a row on a phone, so five lengths of
   five colours is not a page of chips. */
.pb-optgroup__name + .pb-optgrid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

.pb-colours {
    gap: 18px;
    padding: 16px;
}

.pb-colours__chart {
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--pb-raised);
    aspect-ratio: 4 / 3;
}

.pb-colours__chart picture { display: block; width: 100%; height: 100%; }
.pb-colours__chart img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pb-colours__text { display: grid; gap: 10px; align-content: center; justify-items: start; }

@media (min-width: 840px) {
    .pb-colours {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        padding: 20px;
    }
}