:root {
    --primary: rgb(0, 161, 190);
    --primary-hover: rgb(0, 131, 160);
    --secondary: rgb(211, 161, 84);
    --secondary-hover: rgb(200, 138, 47);
    --danger: rgb(212, 73, 80);
    --danger-hover: rgb(182, 62, 68);
}

/*Scrollbar reset*/
::-webkit-scrollbar {
  inline-size: 10px;
  block-size: 7px;
}

::-webkit-scrollbar-thumb {
    background: rgb(0, 161, 190);
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

::-webkit-scrollbar-corner {
    display: none;
}

.loader {
    width: 30px;
    height: 30px;
    padding: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    --gradient:
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--gradient);
    mask: var(--gradient);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.mt-175 {
    margin-top: 1.75rem;
}

#gallery:has(.panelsvg) {
    position: sticky;
    top: 11vh;
}

.panelsvg {
    width: 100%;
    height: 100%;
    margin-bottom: 1.5rem;
}

.header-width {
    width: 100vw;
}

.banner-btn {
    margin: 0 !important;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    & a {
        padding: 1rem 3rem;
        border-radius: 0;
        background: var(--primary);
        color: white;
        font-size: 1rem;
    }
}

.banner-height {
    min-height: 150px;
    margin-bottom: 2rem;
    position: relative;
    & h2 {
        display: none;
        color: white;
    }
}

.grid-center {
    display: grid;
    place-content: center;
}

.button {
    min-width: 6.5rem;
    height: 3rem;
    padding: .75rem 1rem;
    border-radius: 25px;
    border: none;
    font-size: .9rem;
    color: black;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.button-primary {
    background: var(--primary);
    color: white;
    &:hover {
        background: var(--primary-hover);
    }
}

.button-secondary {
    background: var(--secondary);
    color: white;
    &:hover {
        background: var(--secondary-hover);
    }
}

.columns {
    max-width: 460px !important;
    margin-inline: auto;
    padding-inline: 1rem !important;
}

.product-cols {
    grid-template-columns: repeat(1,minmax(0,1fr));
}

.fill-primary > g {
    fill: var(--primary);
}

.snowdog-topmenu-desktop {
    height: 44px;
    & ul {
        height: 44px;
    }
}

.language-selector {
    position: relative;
    & > button {
        margin: .1rem 0 0 .25rem;
        display: flex;
        align-items: center;
        gap: .25rem;
        color: rgb(100 116 139);
        font-size: .75rem;
        line-height: 1rem;
        border: none;
    }
}

#addToCartWishlist {
    grid-template-columns: repeat(5, 1fr);

    .quantityField {
        grid-row: 1;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    #product-addtocart-button {
        max-width: 20rem;
        max-height: 4rem;
        justify-content: center;
        grid-row: 1;
        grid-column-start: 3;
        grid-column-end: 6;
    }

    .custom-attribute-container {
        max-width: 30rem;
        grid-row: 2;
        grid-column-start: 1;
        grid-column-end: 5;
        .add-option-container {
            display: grid;
            gap: 1rem;
            & input {
                width: 100%;
                margin-bottom: .75rem;
                grid-row: 1;
                grid-column-start: 1;
                grid-column-end: 3;
            }
            & button {
                width: 100%;
                grid-row: 2;
                max-height: 4rem;
                margin-right: 2rem;
                padding: .75rem 1rem;
                border-radius: 25px;
                color: white;
            }
            .saveProject {
                background: var(--primary);
                &:hover {
                    background: var(--primary-hover);
                }
            }
            .deleteProject {
                background: var(--danger);
                &:hover {
                    background: var(--danger-hover);
                }
            }
        }
    }
}

.category-btn-wrapper {
    max-width: 1538px;
    margin-inline: auto;
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr ;
    gap: 1rem;
    cursor: pointer;

    .category-btn {
        width: 100%;
        padding: 1rem;
        position: relative;
        outline: 1px solid rgb(225, 225, 225);
        border-bottom: 7px solid transparent;
        transition: box-shadow .3s, border .3s, outline .3s;
        &:hover {
            outline: 1px solid var(--primary);
            border-bottom: 7px solid var(--primary);
            & span {
                color: var(--primary);
            }
        }
        & img {
            width: 100%;
            aspect-ratio: 1/1;
        }
        & span {
            padding: 2rem 0 0;
            font-size: 1.25rem;
            font-weight: bold;
            float: left;
            color: black;
        }
    }
}

.measurements-rows .measurement-row {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0 0;
    position: relative;

    & > .field {
        margin: 0;
        display: flex;
        gap: .125rem .5rem;

        .action.add {
            padding: .5rem 1rem;
            background: var(--primary);
            border-radius: 25px;
            color: white;
        }

        .action.remove {
            width: 2.5rem;
            height: 2.5rem;
            background: var(--danger);
            border-radius: 25px;
            color: white;
            position: relative;
                &:after {
                content: url('data:image/svg+xml,%3Csvg width=\'16\' height=\'20\' viewBox=\'0 0 16 20\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M14 4.53003H15\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M5 8.46997V14.53\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M8 7.31006V15.5801\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M11 8.46997V14.53\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M11.795 18.4721H4.205C2.987 18.4721 2 17.4851 2 16.2671V4.52808H14V16.2671C14 17.4851 13.013 18.4721 11.795 18.4721Z\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M12 4.52808L11.262 2.22308C11.129 1.80908 10.744 1.52808 10.31 1.52808H5.69C5.255 1.52808 4.87 1.80908 4.738 2.22308L4 4.52808\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3Cpath d=\'M1 4.53003H2\' stroke=\'white\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E%0A');
                position: absolute;
                top: 57%;
                left: 50%;
                    transform: translate(-50%, -50%);
            }
        }
    }

    .switchField {
        width: calc(100% - 2rem);
    }

    .swap-button {
        padding: .4rem .5rem 0;
        position: absolute;
        top: 2rem;
        right: 0;
        &::after {
            content: url('data:image/svg+xml,%3C%3Fxml version=\'1.0\' standalone=\'no\'%3F%3E%3C!DOCTYPE svg PUBLIC \'-//W3C//DTD SVG 20010904//EN\' \'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\'%3E%3Csvg version=\'1.0\' xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 512 512\' preserveAspectRatio=\'xMidYMid meet\'%3E%3Cg transform=\'translate(0.000000,512.000000) scale(0.100000,-0.100000)\'%0Afill=\'%23000000\' stroke=\'none\'%3E%3Cpath d=\'M985 4915 c-30 -11 -146 -121 -512 -487 -442 -442 -473 -476 -473%0A-508 0 -33 31 -66 477 -512 423 -421 483 -478 521 -488 81 -21 111 -4 259 143%0A108 108 133 140 143 175 20 78 3 112 -128 245 l-116 117 1450 0 c1595 0 1503%0A3 1625 -61 141 -75 249 -253 249 -407 0 -75 20 -123 75 -177 63 -64 100 -75%0A245 -75 145 0 182 11 245 75 74 74 88 142 65 310 -42 291 -188 550 -411 728%0A-91 73 -239 154 -351 192 -168 56 -147 55 -1732 55 l-1460 0 116 118 c131 132%0A148 166 127 245 -9 34 -35 66 -132 165 -67 68 -133 130 -147 137 -42 22 -92%0A26 -135 10z\'/%3E%3Cpath d=\'M160 2227 c-49 -16 -133 -102 -148 -153 -16 -54 -15 -128 3 -244 74%0A-488 463 -869 960 -940 44 -6 616 -10 1529 -10 l1460 0 -116 -118 c-131 -132%0A-148 -166 -128 -245 10 -34 35 -66 143 -174 148 -147 178 -164 260 -143 37 10%0A97 67 520 488 446 447 477 479 477 512 0 33 -31 65 -477 512 -423 421 -483%0A478 -520 488 -82 21 -112 4 -260 -143 -108 -108 -133 -140 -143 -174 -20 -79%0A-3 -113 128 -245 l116 -118 -1450 0 c-1579 0 -1500 -3 -1616 56 -145 73 -258%0A255 -258 412 0 25 -5 63 -12 86 -16 55 -99 138 -154 154 -51 15 -266 14 -314%0A-1z\'/%3E%3C/g%3E%3C/svg%3E%0A');
        }
    }
}

.price-display table {
    width: 100%;
    margin-block: 1rem;
    & thead tr {
        background: rgb(240, 240, 240);
        & th {
            padding: .5rem;
            text-align: start;
        }
    }
    & tbody tr {
        border-bottom: 1px solid rgb(240, 240, 240);
    }
    & tfoot {
        & tr:first-of-type td:first-of-type {
            font-weight: bold;
        }
        & tr:nth-of-type(2) td {
            font-weight: bold;
            &:nth-of-type(2) {
                font-size: 1.4rem;
        }
        }
    }
}

.page-header > .navigation {
    background: var(--primary);

    & li:not([data-open = 'true']) {
        .group.uppercase a {
            color: white !important;
        }
        & div > button > svg {
            color: white;
        }
    }
}

.snowdog-topmenu-mobile {
    margin: 7px -6px 0 0;
    display: flex;
    flex-direction: row-reverse;
    /*gap: .25rem;*/
}
.snowdog-menu-link {
    font-weight: bold;
}

.action.fetch-price {
    margin: 1.5rem 0 .5rem;
    padding: .5rem 1rem;
    background: var(--secondary);
    color: white;
    border-radius: 25px;
}

.cart-popup {
    left: 3.5rem;
    &:before, &:after {
        right: 3.5rem;
    }
}

div.item.product.product-item.border.border-secondary.h-full {
    display: none;
}

.product-info div a img {
    display: none;
}

.wishlistStar {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: .75rem;
    right: .75rem;
    border-radius: 50%;
    border: 1px solid var(--secondary);
    background: white;

    & > svg {
        stroke: var(--secondary);
    }

    &:hover {
        border: 1px solid var(--primary);

        & > svg {
            stroke: var(--primary);
        }
    }
}

.addToWishlist {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &:hover > svg {
        fill: var(--secondary);
    }
}

.error-message {
    font-size: .8rem;
    margin-top: 5px;
    padding: 5px 10px;
    color: white;
    background: var(--danger);
    border-radius: 25px;
}

@media screen and (min-width: 768px) {
    .columns {
        max-width: 768px !important;
    }

    .banner-height h2 {
        display: block;
        font-size: 2rem;
        margin-top: 2.5rem;
        text-shadow: 0 0 3px black;
    }

    .category-btn-wrapper {
        padding-inline: 4rem;
    }

    .product-cols {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .language-selector > button {
        margin: .4rem 0 0 .25rem;
    }
}

@media screen and (min-width: 1024px) {
    .columns {
        max-width: 1024px !important;
    }

    .category-btn-wrapper {
        grid-template: 1fr / repeat(4, 1fr);
        gap: 3rem;
        margin-top: 3rem;
        padding-inline: 0;
    }

    .header-width {
        width: 100%;
    }

    .banner-btn a {
        padding: 2rem 3rem;
        font-size: 1.5rem;
    }

    .language-selector {
        display: flex;
        justify-content: end;
    }

    .snowdog-topmenu-mobile {
        display: none;
    }
}

@media screen and (min-width: 1280px) {
    .banner-height {
        min-height: 250px;
        & h2 {
            font-size: 3rem;
            margin-top: 11rem;
        }
    }

    .columns {
        max-width: 1280px !important;
    }
    .measurements-rows .measurement-row {
        max-width: 25rem;
    }
}

@media screen and (min-width: 1536px) {
    .columns {
        max-width: 1536px !important;
    }
}