@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,600&display=swap");

:root {
    --black: #0f0f0f;
    --white: #ffffff;
    --orange: #febc0b;
    --white-link: #54524fad;
    --blue-gray: #edecec;
    --dark-gray-100: #212121;
    --dark-gray-200: #54524f;
    --star-pose: #ce3643;
    --green: #14a31b;

    --night-ride: #343434;
    --table-grays: #8f8c92;
    --btn-green: #1eb946;
    --dark-gray-300: #4f4e4e;

    --yelow: #edb62b;

    --primary-text-color: var(--black);
    --title-text-color: var(--white);
    --accent-color: var(--orange);
    --secondary-accent-color: var(--white-link);
    --title-accent-color: var(--blue-gray);
    --primary-background-color: var(--dark-gray-100);
    --secondary-background-color: var(--dark-gray-200);
    --title-background-color: var(--star-pose);
    --cart--accent-color: var(--green);

    --footer-text-color: var(--night-ride);
    --table-gray-color: var(--table-grays);
    --btn-green-color: var(--btn-green);

    --basket-item-color: var(--dark-gray-300);
    --bottom-accent-color: var(--yelow);
}
body {
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
    /* font-family: "Open Sans", sans-serif; */
    letter-spacing: 0.03em;
    margin: 0 auto;
    padding-inline-start: 0;
}

a {
    text-decoration: none;
    outline: none;
    display: inline-block;
}

ul {
    padding-inline-start: 0;
}

li {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 767px) {
    .container {
        /* width: 100%; */
        padding: 0;
        margin: auto;
    }
    .menu {
        font-family: "Mulish", sans-serif;

        font-size: 10px;
        text-transform: uppercase;
        margin-bottom: 30px;
        margin-top: 30px;
        color: var(--accent-color);
    }
    .menu-item {
        display: inline;
    }
    .menu-item a {
        font-size: 12.5px;
        display: inline;
        color: var(--orange);
    }
    .menu-item::after {
        content: ">";
        padding: 0 7px;
        font-family: inherit;
    }
    .menu-item:last-child:after {
        content: "";
        display: none;
    }

    .image.first {
        opacity: 0;
        display: block;
        position: absolute;
        overflow: hidden;
        left: -100%;
        transition: left 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
    

    
    .image.second {
        opacity: 1;
        display: block;
    
        transition: 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
   
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .container {
        /* width: 100%; */
        padding: 0;
        margin: auto;
    }
    .menu {
        font-family: "Mulish", sans-serif;

        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 30px;
        margin-top: 30px;
        color: var(--accent-color);
    }
    .menu-item {
        display: inline;
    }
    .menu-item a {
        font-size: 20px;
        display: inline;
        color: var(--orange);
    }
    .menu-item::after {
        content: ">";
        padding: 0 7px;
        font-family: inherit;
    }
    .menu-item:last-child:after {
        content: "";
        display: none;
    }

    .image.first {
        opacity: 0;
        display: block;
        position: absolute;
        overflow: hidden;
        left: -100%;
        transition: left 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
    
    .ImgField:hover > .first {
        opacity: 1;
        left: 0;
    }
    
    .image.second {
        opacity: 1;
        display: block;
    
        transition: 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
    .image.second:hover {
        opacity: 0;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding-left: 33px;
        padding-right: 33px;
        margin: auto;
    }
    .menu {
        font-family: "Mulish", sans-serif;

        font-size: 14px;
        text-transform: uppercase;
        margin-bottom: 30px;
        margin-top: 30px;
        color: var(--accent-color);
    }
    .menu-item {
        display: inline;
    }
    .menu-item a {
        font-size: 14px;
        display: inline;
        color: var(--orange);
    }
    .menu-item::after {
        content: ">";
        padding: 0 7px;
        font-family: inherit;
    }
    .menu-item:last-child:after {
        content: "";
        display: none;
    }

    .image.first {
        opacity: 0;
        display: block;
        position: absolute;
        overflow: hidden;
        left: -100%;
        transition: left 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
    
    .ImgField:hover > .first {
        opacity: 1;
        left: 0;
    }
    
    .image.second {
        opacity: 1;
        display: block;
    
        transition: 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -o-transition: 0.2s;
        -ms-transition: 0.2s;
    }
    
    .image.second:hover {
        opacity: 0;
    }
}

.header__link--title{
    position: relative;
}

.header__link--title:after {
    display: block;
position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--table-gray-color);
    content: "";
    transition: width 0.3s ease-out;
    margin-top: 5px;
}

.header__link--title:hover:after,
.header__link--title:focus:after {
    width: 100%;
}
.special__cart_svg:hover,
.kostet__cart_svg:hover,
.footer__social_ul a:hover,
.special__cart_svg:focus,
.kostet__cart_svg:focus,
.footer__social_ul a:focus {
    filter: drop-shadow(0 0 0.75rem grey);
    transition: 0.3s;
}

.new__svg:hover,
.best__svg:hover,
.kostet__svg:hover,
.popular__svg:hover,
.special__svg:hover,
.arrow-left:hover,
.arrow-right:hover,
.new__svg:focus,
.best__svg:focus,
.kostet__svg:focus,
.popular__svg:focus,
.special__svg:focus,
.arrow-left:focus,
.arrow-right:focus {
    box-shadow: 5px gray;
    transition: 0.3s;
    border-radius: 50%;
}
button {
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}




.section {
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    display: block;
}

svg {
    display: inline-block;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;

    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}