.buying-guides--wide {
    padding-top: 1.5rem;
}

.buying-guides--wide .buying-guides__breadcrumbs ol {
    margin-bottom: 1.5rem;
}

.buying-guides--wide .buying-guide__contents {
    margin: 1.25rem 0;
    padding: .8rem 0;
}

.buying-guides--wide .buying-guides__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
}

.buying-guides--wide .buying-guide {
    max-width: none;
}

.buying-guides--wide .buying-guides__sidebar {
    position: static;
    border-top: 1px solid var(--guide-line);
    padding-top: 1.5rem;
}

.buying-guides--wide .buying-guides__sidebar ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem 1.5rem;
}

.colour-guide [hidden] {
    display: none !important;
}

.colour-guide__palette-section > h2 {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: 0;
}

.colour-guide__palette {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.colour-guide__colour {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .65rem .3rem;
    border: 0;
    border-radius: 6px;
    color: var(--guide-ink);
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    scroll-margin-top: calc(var(--shop-header-scroll-offset, 85px) + 9rem);
}

.colour-guide__colour:hover,
.colour-guide__colour[aria-pressed="true"] {
    background: #eaf1ff;
}

.colour-guide__colour[aria-pressed="true"] .colour-guide__swatch {
    outline: 2px solid var(--guide-blue);
    outline-offset: 3px;
}

.colour-guide__swatch {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: rgb(var(--swatch-rgb, 222, 226, 233));
    box-shadow: inset 0 0 0 1px #00000020;
}

.colour-guide__swatch::after {
    position: absolute;
    inset: 0;
    content: "";
    background-image: var(--swatch-texture, none), var(--swatch-sheen, none);
    background-size: var(--swatch-texture-size, auto), auto;
}

.colour-guide__swatch.is-transparent,
.colour-guide__swatch.is-glitter,
.colour-guide__swatch.is-satin {
    background-image:
        linear-gradient(rgba(var(--swatch-rgb, 222, 226, 233), .35), rgba(var(--swatch-rgb, 222, 226, 233), .35)),
        conic-gradient(#e5e7eb 25%, #fafbfc 0 50%, #e5e7eb 0 75%, #fafbfc 0);
    background-size: auto, 10px 10px;
}

.colour-guide__swatch.is-pearl {
    --swatch-sheen: linear-gradient(135deg, #ffffff80, transparent 45%, #ffffff50 70%, transparent);
}

.colour-guide__swatch.is-metallic {
    --swatch-sheen: linear-gradient(135deg, #ffffff80, transparent 30%, #ffffffa6 50%, #00000045 75%, transparent);
}

.colour-guide__swatch.is-chrome {
    --swatch-sheen: linear-gradient(135deg, #ffffffb8, #00000060 27%, #ffffffdc 43%, #ffffff10 48%, #00000080 60%, #ffffffa0 82%, transparent);
}

.colour-guide__swatch.is-satin {
    --swatch-sheen: linear-gradient(135deg, #ffffffa0, #d3eaff45 28%, #f5d9ff65 52%, #ffffff80 72%, transparent);
}

.colour-guide__swatch.is-glitter {
    --swatch-texture: radial-gradient(circle at 2px 2px, #ffffffe0 0 .65px, transparent 1px);
    --swatch-texture-size: 5px 5px;
}

.colour-guide__swatch.is-speckle {
    --swatch-texture: radial-gradient(ellipse at 2px 3px, #f5f5eed0 0 1px, #00000030 1.1px 1.4px, transparent 1.5px);
    --swatch-texture-size: 7px 6px;
}

.colour-guide__swatch.is-unknown {
    background: repeating-linear-gradient(135deg, #d1d5dc 0 5px, #f8fafc 5px 10px);
}

.colour-guide__selection {
    position: sticky;
    top: var(--shop-header-scroll-offset, 85px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    border: 1px solid var(--guide-line);
    border-radius: 8px;
    background: #f0f5fb;
}

.colour-guide__selection strong {
    display: block;
    margin-bottom: .25rem;
    font-size: 18px;
}

.colour-guide__aliases {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.25rem;
    color: var(--guide-muted);
    font-size: 13px;
    line-height: 1.5;
}

.colour-guide__all-colours {
    padding: .5rem 0;
    border-top: 1px solid var(--guide-line);
    border-bottom: 1px solid var(--guide-line);
}

.colour-guide__all-colours > summary {
    padding: .6rem 0;
    color: var(--guide-blue);
    font-weight: 650;
    cursor: pointer;
}

.colour-guide__all-colours > p {
    margin-top: 1rem;
}

.colour-guide__palette-group {
    margin: 1.75rem 0;
}

.colour-guide__palette-group h3 {
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--guide-line);
}

.colour-guide .colour-guide__caption {
    margin-top: 1rem;
    color: var(--guide-muted);
    font-size: 13px;
    line-height: 1.6;
}

.colour-guide__starting-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.colour-guide__starting-points > section {
    padding: 1rem;
    border: 1px solid var(--guide-line);
    border-radius: 8px;
}

.colour-guide__starting-points h3 {
    margin-top: 0;
}

.colour-guide__starting-points p:last-child {
    margin-bottom: 0;
}

.colour-guide__names th,
.colour-guide__names td {
    min-width: 0;
}

.colour-guide__names th:first-child {
    width: 34%;
}

.colour-guide__names td span {
    color: var(--guide-muted);
}

.colour-guide__comparisons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.colour-guide__comparison {
    min-width: 0;
    padding-top: 1rem;
    border-top: 3px solid var(--guide-ink);
}

.colour-guide__comparison h3 {
    margin: 0 0 1rem;
}

.colour-guide__pair,
.colour-guide__finishes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.colour-guide__pair figure,
.colour-guide__finishes figure {
    min-width: 0;
    margin: 0;
}

.colour-guide__pair img,
.colour-guide__finishes img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.colour-guide__pair figcaption,
.colour-guide__finishes figcaption {
    margin-top: .75rem;
    font-size: 14px;
    line-height: 1.6;
}

.colour-guide__pair figcaption {
    font-size: 12px;
    color: var(--guide-muted);
}

.colour-guide__pair figcaption .colour-guide__era {
    margin-bottom: .3rem;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.colour-guide__pair figcaption strong,
.colour-guide__pair figcaption span,
.colour-guide__finishes figcaption strong,
.colour-guide__finishes figcaption span {
    display: block;
}

.colour-guide__pair figcaption strong,
.colour-guide__finishes figcaption strong {
    margin-bottom: .35rem;
    font-size: 16px;
}

.colour-guide__finishes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem 1.25rem;
    margin: 1.5rem 0;
}

.colour-guide__specimen {
    position: relative;
}

.colour-guide__finish-example {
    color: var(--guide-muted);
    font-size: 12px;
}

.colour-guide__finish p {
    margin: .5rem 0 0;
    font-size: 14px;
    line-height: 1.6;
}

.colour-guide__glow-toggle {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    min-height: 44px;
    padding: .4rem .65rem;
    border: 1px solid var(--guide-line);
    border-radius: 5px;
    color: var(--guide-ink);
    background: #fff;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.colour-guide__finish-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--guide-line);
}

.colour-guide__finish-notes h3 {
    margin-top: 0;
}

@media (max-width: 991px) {
    .colour-guide__finishes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.colour-guide .buying-guide__diagram img {
    max-width: 30rem;
}

@media (max-width: 767px) {
    .colour-guide__starting-points {
        grid-template-columns: minmax(0, 1fr);
    }

    .colour-guide__comparisons {
        grid-template-columns: minmax(0, 1fr);
    }

    .colour-guide__pair img {
        max-height: 220px;
        object-fit: contain;
        background: #fff;
    }

    .buying-guides--wide .buying-guides__sidebar ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .colour-guide__palette {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

    .colour-guide__selection {
        padding: .8rem;
    }

    .colour-guide__aliases {
        display: block;
    }

    .colour-guide__aliases > span {
        display: block;
    }

    .colour-guide__pair {
        gap: .75rem;
    }

    .colour-guide__finishes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .colour-guide__finishes img {
        max-width: none;
    }

    .colour-guide__finish-notes {
        grid-template-columns: minmax(0, 1fr);
    }
}