html {
    /* Start product info */

    .product-information {
        padding-top: 1rem;
    }

    .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left:has(.media-gallery--extend) {
        @media screen and (min-width: 750px) {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .product-information__media {
        @media screen and (min-width: 750px) {
            grid-column: 1 / span 2;
        }
    }

    .product-details > .group-block {
        @media screen and (min-width: 750px) {
            max-width: 75%;
        }
    }

    :where(media-gallery,.product-grid__item) .media-gallery__grid {
        @media screen and (min-width: 750px) {
            --image-gap: .75rem;
        }
    }

    media-gallery.spacing-style {
        @media screen and (max-width: 989px) {
            padding-top: .5rem;
        }
    }

    .swatches-gemstones {
        display: flex;
        flex-flow: row wrap;
        gap: .7rem;
        list-style: none;
        padding: 0;
        margin: 0;
        
        img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            border: 1px solid color(srgb 0 0 0 / 0.1);

            &:hover {
                outline: var(--focus-outline-width) solid rgba(from var(--color-foreground) r g b / var(--opacity-35-55));
                outline-offset: var(--focus-outline-offset);
            }

            &.active {
                outline: var(--focus-outline-width) solid var(--color-foreground);
                outline-offset: var(--focus-outline-offset);
            }
        }
    }

    .swatch {
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
        background: var(--swatch-background);
    }

    .variant-picker .variant-option--buttons label:has(.swatch) {
        border-radius: 50%;

        &:has(:checked) {
            background: none;
        }
    }

    .variant-option__button-label:has([value*="Gold"]) {
        order: -1;
    }

    .variant-option__button-label {
        &:has(input[value="Rhodium Plated"]),
        &:has(input[value="Gold Plated"]),
        &:has(input[value="Plaqué Rhodium"]),
        &:has(input[value="Plaqué Or"]),
        &:has(input[value="Rhodiniert"]),
        &:has(input[value="Vergoldet"]) {
            width: 2rem;
            height: 2rem;
            padding: 0;
            flex: 0 0 2rem;
            min-width: 0;
            min-height: 0;
            border-radius: 50%;
            background: none;
            border: 0;
            outline: var(--focus-outline-width) solid transparent;
            outline-offset: var(--focus-outline-offset);

            .variant-option__button-label__text {
                display: none;
            }

            &:hover {
                background: none;
                outline: var(--focus-outline-width) solid rgba(from var(--color-foreground) r g b / var(--opacity-35-55));
            }

            &:after {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        &:has(input[value="Gold Plated"]),
        &:has(input[value="Plaqué Or"]),
        &:has(input[value="Vergoldet"]) {
            &:has(input[checked]) {
                outline: var(--focus-outline-width) solid #f2d19f;
            }

            &:after {
                background: #f2d19f;
            }
        }

        &:has(input[value="Rhodium Plated"]),
        &:has(input[value="Plaqué Rhodium"]),
        &:has(input[value="Rhodiniert"]) {
            &:has(input[checked]) {
                outline: var(--focus-outline-width) solid #d2d2d2;
            }

            &:after {
                background: #d2d2d2;
            }
        }
    }

    kickflip-customizer-iframe {
        margin-top: 6rem;
    }

    /* End product info */

    /* Start specs */
    [class^="ai-spec-table-"] {
        background: none;
        padding: 0;
    }

    [class^="ai-spec-table__row"] {
        border-bottom: 0;
        padding: 10px 15px;

        &:nth-child(odd) {
            background: #fbfaf8;
        }

        &:nth-child(even) {
            background: #fff;
        }
    }

    [class^="ai-spec-table__label"],
    [class^="ai-spec-table__value"] {
        color: inherit;
        font-size: .8125rem;
    }
    /* End specs */

    /* Start Size Table */
    .popup-link {
        margin-top: var(--padding-sm);
        padding-top: var(--padding-sm);
        border-block-start: var(--style-border-width) solid var(--color-border);

        .popup-link__button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    /* End Size Table */

    /* Breadcrumbs */
    .breadcrumbs {
        margin: max(20px, calc(var(--spacing-scale) * 100px)) 0 0.8rem;
    }

    .breadcrumb-mobile {
        margin-top: 5rem;
    }
    /* End breadcrumbs */
}

.product-usps {
    display: grid;
    grid-template-columns: 1.25rem auto;
    gap: .5rem;
    list-style: none;
    padding: 0;
    font-size: .875rem;

    li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / span 2;

        .icon {
            width: 1.25rem;
            height: 1.25rem;
            margin-top: .1rem;
        }

        svg {
            width: 100%;
            height: 100%;
        }
    }
}
    
/* Start product media */
.product-media {
    filter: brightness(98%);
}
/* End product media */