@layer theme {
    .button.button-1,
    .button.button--primary,
    .button.button-2,
    .button.button--secondary {
        padding-left: 24px;
        padding-right: 24px;
    }

    :root {
        --restock-badge-color: #1E88E5CC;
        --restock-badge-text-color: #fff;
    }

    .products-carousel .product-item, .products-grid .product-item, .productGrid, .wishlist-items-display {
        height: 100%;

        .card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .badge {
            font-size: 1.4rem;
            line-height: 1.8rem;
            border-radius: 1.6rem;
            font-family: var(--font-family-2);

            &.sale-badge {
                font-size: 1.8rem;
                line-height: 2rem;
            }

            &.preorder-badge {
                background-color: #6F2DBDCC;
                color: #fff;
            }

            &.restock-badge {
                background-color: var(--restock-badge-color);
                color: var(--restock-badge-text-color);
            }
        }

        .card-media {
            border-radius: 1.6rem;
            overflow: clip;
            aspect-ratio: 5/6;
            padding: 0;
        }

        img {
            border-radius: 1.6rem;
        }

        .card-link {
            aspect-ratio: 5/6;
        }

        .card-title .text {
            animation: none;
            font-size: 16px;
            @media (max-width: 767px) {
                font-size: 14px;
            }
        }

        .card-price {
            margin-top: 0;
        }

        .price__regular, .price__sale {
            .price__last .price-item {
                font-family: var(--font-family-2);
                font-size: 2rem;
                line-height: 2.4rem;
            }
        }

        .price__compare, .price__regular:not(:is(.price--on-sale *)) {
            display: flex;
            flex-wrap: wrap;
            column-gap: .8rem;
        }

        .price__sale {
            align-items: start;
            flex-direction: column-reverse;

            .price__compare .price-item {
                font-size: 1.2rem;
                line-height: 1.6rem;
                color: var(--product-compare-price-color);
            }
        }

        .card-action .button {
            font-size: 1.4rem;
            padding: 1.2rem 1.6rem;

            svg {
                width: 2.4rem;
                height: 2.4rem;
            }

            .icon-cart-plus-path {
                stroke: var(--color-bg-dark);
                transition: var(--duration-long) var(--button-transition-ease);
                transition-property: all;
            }

            &:hover {
                .icon-cart-plus-path {
                    stroke: var(--product-action-bg-hover);;
                }
            }
        }

        .card-information {
            padding: .4rem 0;
            display: flex;
            flex-direction: column;
            flex: 1;

            .wrapper__card {
                padding-top: 2rem;
                margin-top: auto;
            }

            .brand-image {
                margin: 0;
                height: 3.6rem;
                width: auto;
                max-width: 100%;
            }
        }
    }


    .products-carousel {
        display: flex;

        .slick-list {
            width: 100%;
        }

        .slick-track {
            display: flex;
            align-items: stretch;
        }

        .product {
            height: auto;
        }

        .card {
            border: none;
        }
    }

    .productView-brand {
        margin-bottom: 0.4rem;

        .brand-name {
            font-family: var(--font-family-2);
        }

        .brand-image {
            width: 80px;
            height: 48px;
            object-fit: contain;
            object-position: left;
        }
    }

    .slick-prev {
        left: 2.1rem;
    }

    .slick-next {
        right: 2.1rem;
    }

    .pagination {
        .pagination-page-item {
            color: var(--color-text-light);
        }

        .pagination-total-progress {
            display: none;
        }

        .pagination-num .pagination__item {
            background-color: var(--color-bg-dark);
            border-color: var(--color-bg-dark);
            color: var(--color-text-light);
            font-family: var(--font-family-2);
            font-weight: 700;
            font-size: 2rem;

            &.pagination__item--current {
                border-color: #FFFFFF33;
                background-color: var(--color-bg-input);
            }
        }

        .pagination-arrow .pagination__item {
            border-color: #FFFFFF33;
            background-color: transparent;
            color: var(--color-text-light);
        }
    }

    .wishlist-items-container .toolbar {
        display: none;
    }

    .halo-wishlist-content {
        .wishlist-share:hover .text {
            text-decoration: none;
        }
        .mail-icon-container {
            display: none;
        }
    }

    .card-product__group-item.card-wishlist {
        .icon-close {
            display: none;
        }
    }

    .wishlist-items-display .card-product__group-item.card-wishlist {
        .wishlist-icon {
            background-color: transparent;

            &::before, &::after {
                content: none;
            }
        }

        .icon-close {
            display: inline-block;
        }
    }

    .newsletter_privacy_policy_link {
        color: #f5f5f5;
        margin-top: 4px;
        display: flex;
        gap: 8px;
        font-size: 1.4rem;
        width: 100%;

        span {
            text-transform: none;
        }

        a {
            color: unset;
        }

        input {
            margin: 4px 0 0;
            flex-shrink: 0;
            border: solid 1px var(--form-input-border);
            border-radius: 4px;
            position: static;
            display: block;
            width: 15px;
            height: 15px;
            transition: all .3s;
            background-color: #1A1A1A;
            background-position: center;
            background-repeat: no-repeat;

            &:checked {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path%3D%22url(%23clip0_155_22532)%22%3E%0A%3Cpath%20d%3D%22M7.66138%201.46717L3.03756%206.09099L1.3386%204.39203C1.25623%204.30966%201.12267%204.30966%201.04028%204.39203L0.543102%204.88921C0.46073%204.97158%200.46073%205.10514%200.543102%205.18753L2.88839%207.53282C2.97076%207.61519%203.10432%207.61519%203.18671%207.53282L8.45686%202.26267C8.53923%202.1803%208.53923%202.04674%208.45686%201.96435L7.95968%201.46717C7.87731%201.3848%207.74375%201.3848%207.66138%201.46717Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0_155_22532%22%3E%0A%3Crect%20width%3D%229%22%20height%3D%229%22%20fill%3D%22white%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
            }
        }
    }
}