/** Shopify CDN: Minification failed

Line 357:13 Cannot use type selector "__regular" directly after nesting selector "&"

**/
:root {
    --color-primary: #cdf564;
}

@font-face {
    font-family: 'HKGrotesk-Bold';
    src: url('HKGrotesk-Bold.woff2') format('woff2'),
        url('HKGrotesk-Bold.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HKGrotesk-Regular';
    src: url('HKGrotesk-Regular.woff2') format('woff2'),
        url('HKGrotesk-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

.flex-1 {
    flex: 1;
}

.mb-1 {
    margin-bottom: .25rem;
}

.mb-2 {
    margin-bottom: .5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.announcement-bar a {
    text-decoration: underline;
}

.announcement-bar .flickity-viewport {
    cursor: default !important;
}

.announcement__slide {
    .countdown__timer {
        --countdown-gap: var(--sp-4);

        span {
            display: none;
        }

        p {
            width: 20px;
            height: 20px;
            background: black;
            color: white;

            &::after {
                font-size: 12px;
                color: black;
            }
        }

        row-gap: 20px;
    }
}

.mega-menu__item--panels.cates,
.mega-menu__panel.cates {
    max-height: 61.2vh;
    overflow: auto;
    overscroll-behavior: none;

    /* margin-right: calc(var(--header-nav-gap) * -1);
    padding-right: var(--page-padding); */
    .product-card__content {
        padding: 1rem;
    }

    .product-grid.card-grid {
        /* max-width: 960px; */
        padding-right: var(--card-grid-gap);
    }

    @media screen and (min-width: 768px) {
        .product-grid.card-grid {
            --card-grid-per-row: 4;
        }
    }

    @media screen and (min-width: 1280px) {
        .product-grid.card-grid {
            --card-grid-per-row: 5;
        }
    }

    .product-card__details {
        p.grow {
            text-align: center;

            a {
                font-size: 14px;
            }
        }

        p.grow~* {
            display: none;
        }
    }

    h3+a {
        margin-left: 1rem;
        background: var(--color-primary);
        color: #000;
        border-radius: var(--rounded-button);
        padding: 0.3em 0.7rem;
    }
}

.mega-menu__item--icon {
    max-width: calc(16% - var(--header-nav-gap) * 4 / 5);
    min-width: 180px;
    margin: 0 2rem;

    .media-card {
        background: none;
    }
}

.mega-menu__item--panels.cates {
    >ul {
        a {
            outline: none;
        }
    }
}

.header__menu>ul.with-block .menu__item .btn-duplicate {
    display: none;
    /* background: var(--color-primary);
    color: #000; */
}


.mega-menu[open] {
    .mega-menu__container--cates>li {
        --tw-translate-x: 0;
        opacity: 1;
    }
}

@media screen and (max-width: 2200px) {
    /* .mega-menu__panel :is(.card-grid--4) {
        --card-grid-per-row: 4;
    } */


    .mega-menu__panel .card-grid--5 {
        --card-grid-per-row: 4;
    }
}

.mega-menu__panel {
    .button--primary[veikk] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #000;
        width: 180px;

        &::after {
            display: none;
        }
    }
}

.mega-menu__container--cates {
    >li {
        --tw-translate-x: 25%;
        transform: translateX(calc(var(--tw-translate-x) * var(--transform-logical)));
        transition: transform 2s cubic-bezier(.075, .82, .165, 1), opacity 1s cubic-bezier(.19, 1, .22, 1);
        transition-delay: .25s;
    }

    details {
        &[open] {
            svg {
                transform: rotate(180deg);
            }
        }
    }

    .cates__item .font-bold {
        font-family: HKGrotesk-Bold;
    }

    .cates__item span {
        font-family: HKGrotesk-Regular;
        font-size: 20px;
        color: #666;
        padding: .5rem 0 0.2rem;
        /* display: inline-block; */
    }

    [active] {
        span {
            color: #000;
            border-bottom: 1px solid #000;
            /* background: var(--color-primary);
            border-radius: var(--rounded-button); */
        }
    }
}

.section--collection::before {
    background: #f2f2f2;
}

.facet-drawer {

    input:is([type=checkbox], [type=radio]):checked,
    input[type=checkbox].switch:checked {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    input:is([type=checkbox], [type=radio]):checked::after {
        border-color: #000;
    }

    input:is([type=checkbox], [type=radio]):checked {
        box-shadow: var(--color-primary) 0 0 0 1px;
    }

    input[type=checkbox].switch::after {
        background-color: #000;
    }
}

.sort-wrapper .sort-by[open] {

    &::after {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-text {
        color: #000;
    }

}

.sort-wrapper .button--secondary[open] .btn-fill {
    background: var(--color-primary);
}



.product-card--collection {
    
    /* padding-bottom: clamp(var(--sp-4), 2.105vw, var(--sp-10)); */
    .quick-add.add-cart {
        width: 40px;
        right: clamp(var(--sp-4), 2.105vw, var(--sp-10));
        bottom: clamp(var(--sp-4), 2.105vw, var(--sp-10));

        .button {
            width: 40px;
            height: 40px;
            padding: 0;
            background: var(--color-primary);

            &::after {
                background: var(--color-primary);
                border-color: var(--color-primary);
            }
        }

        .icon {
            stroke: #000;
        }


    }



    .product-card__spec {
        border: none;
    }
    .product-card__icons {
            padding: clamp(var(--sp-4), 2.105vw, var(--sp-10));
    }
    .product-card__icon {
        min-width: 32%;
        border: none;
        color: #000;
        padding-left: 15px;
        position: relative;

        .text-opacity {
            color: #4d4d4d;
        }


        &::before {
            content: '';
            display: block;
            position: absolute;
            border: solid 1px #e6e6e6;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            border: solid 1px #e6e6e6;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            left: 1.5px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .best-for {
        padding-top: 0;
    }
}

@media screen and (min-width: 900px) {
    .product-card--collection {
    background: white;
        padding-bottom: clamp(calc(var(--sp-4) * 2), 4.21vw, calc(var(--sp-10) * 2));
        .price {
            position: absolute;
            font-weight: bold;
            left: clamp(var(--sp-4), 2.105vw, var(--sp-10));
            bottom: clamp(var(--sp-4), 2.105vw, var(--sp-10));

            &__regular {
                font-size: calc(var(--font-product-size) * 1.25);
            }

        }
        .product-card__spec {
            margin: -1rem 0 0.5rem;
        }
        .product-card__icons {
            padding: 0 clamp(var(--sp-4), 2.105vw, var(--sp-10));
    }
    }
}

.country-list {
    h2 {
        display: inline-block;
        color: #000;
        border-bottom: 3px solid #B8EC2E;
        line-height: 1;
        margin-bottom: 10px;
    }

    ul li {
        width: 33%;
        line-height: 32px;

        a {
            color: #424242;

            &:hover {
                color: #B8EC2E;
                ;
            }
        }
    }

    container-name: country-list;
    container-type: inline-size;


    @container country-list (max-width: 860px) {
        ul li {
            width: 50%;
        }
    }
}

.modal__container .country-list {
    padding: var(--sp-5);

    ul li {
        width: 100%;
    }
}

@media screen and (min-width: 640px) {
    .address-modal.x-modal .drawer__inner {
        max-width: 90rem;
    }
}
.localization-footer .localization__item{
    background-color: #CCFF66;    
    color: #000;
    padding: 5px 10px;
    border-radius: 15px;
}
@media screen and (max-width: 768px) {
    .localization-footer {
        padding-top: var(--sp-10);
        display: flex;
        justify-content: center;

    }
}