.wc-product-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    .wc-product-stepper {
        display: flex;
        align-items: center;

        .wc-product-nav-next,
        .wc-product-nav-prev {
            display: flex;
            padding: 4px 0;
            align-items: center;
            white-space: nowrap;
            gap: 0.5rem;
            font-size: 15px;
            transition: color 300ms ease-in-out;

            svg {
                flex: 1 0 26px;
                height: 1.4rem;
                transition: fill 300ms ease-in-out;
            }

            &:hover {
                color: #a87f45;

                svg {
                    fill: #a87f45;
                }
            }
        }

        .wc-product-nav-prev:has( + .wc-product-nav-next) {
            padding-right: 2.75rem;
            border-right-width: 1px;
            border-right-color: #666;
            border-right-style: solid;
        }

        .wc-product-nav-next {
            padding-left: 1.5rem;

            svg {
                rotate: 90deg;
            }
        }

        .wc-product-nav-prev {
            svg {
                margin-top: -2px;
                rotate: -90deg;
            }
        }
    }

    &.wc-product-nav-footer {
        & > a {
            font-size: 12px;
        }
    }
}