@import url("../theme.css?v=3");

@media (hover: hover) {
    .shop-link a:hover .shop-button { margin-right: 9px; }
    .basket-img:hover svg { fill: var(--color-animation-basket-img); }
}

@media (hover: none) {
    .shop-link a:active .shop-button { margin-right: 9px; }
    .basket-img:active svg { fill: var(--color-animation-basket-img); }
}

@media (min-width: 1400px) and (max-width: 1700px) {
    .logo-nav {
        width: 80px;
        height: 70px;
    }

    .shop-button { font-size: 18px; }

    .shop-link svg {
        height: 11px;
        width: 11px;
    }

    .basket-img svg {
        width: 35px;
        height: 35px;
    }

    .counter { 
        font-size: 11px;

        width: 25px;
        height: 12px;

        right: -1px;
    }
}

@media (min-width: 1100px) and (max-width: 1400px) {
    .name-page { font-size: 13px; }

    .logo-nav {
        width: 70px;
        height: 60px;
    }
    
    .name-page-wraper { gap: 7px; }

    .name-page-wraper svg {
        width: 35px;
        height: 15px;
    }

    .shop-button { font-size: 16px; }

    .shop-link svg {
        height: 10px;
        width: 10px;
    }

    .arrow-back-nav { left: -40px; }

    .name-page-top { font-size: 9px; }

    .basket-img svg {
        width: 32px;
        height: 32px;
    }

    .counter { 
        font-size: 11px;

        width: 23px;
        height: 12px;

        right: 0px;
    }

    .language-button, .theme-button {
        width: 28px;
        height: 60px;

        padding: 5px;
    }

    .theme-button svg {
        width: 12px;
        height: 12px;
    }

    .ru-button, .en-button, .light-button, .dark-button { 
        font-size: 10px; 
        
        height: 18px;
        width: 18px;
    }

    .active-language-background, .active-theme-background {
        height: 18px;
        width: 18px;
    }
}

@media (min-width: 800px) and (max-width: 1100px) {
    .name-page { font-size: 11px; }

    .logo-nav {
        width: 60px;
        height: 50px;
    }

    .name-page-wraper { gap: 5px; }

    .name-page-wraper svg {
        width: 33px;
        height: 13px;
    }

    .shop-button { font-size: 14px; }

    .shop-link svg {
        height: 8px;
        width: 8px;
    }

    .social-item {
        height: 50px;
        width: 50px;
    }

    .arrow-back-nav { left: -40px; }

    .name-page-top { font-size: 8px; }

    .basket-img svg {
        width: 30px;
        height: 30px;
    }

    .counter { 
        font-size: 10px;

        width: 22px;
        height: 12px;

        right: 0px;
    }

    .language-and-basket-button-wraper { gap: 14px; }

    .language-button, .theme-button {
        width: 26px;
        height: 58px;

        padding: 5px;
    }

    .theme-button svg {
        width: 12px;
        height: 12px;
    }

    .ru-button, .en-button, .light-button, .dark-button { 
        font-size: 10px; 
        
        height: 17px;
        width: 17px;
    }

    .active-language-background, .active-theme-background {
        height: 17px;
        width: 17px;
    }
}

@media (min-width: 0px) and (max-width: 800px) {
    .container { padding: 0px 10px; }
}

@media (min-width: 600px) and (max-width: 800px) {
    .name-page { font-size: 11px; }

    .logo-nav {
        width: 60px;
        height: 50px;
    }

    .name-page-wraper { gap: 4px; }

    .name-page-wraper svg {
        width: 33px;
        height: 13px;
    }

    .shop-button { font-size: 14px; }

    .shop-link svg {
        height: 8px;
        width: 8px;
    }

    .arrow-back-nav { left: -40px; }

    .name-page-column-wraper { gap: 5px; }

    .name-page-top { font-size: 7px; }

    .basket-img svg {
        width: 30px;
        height: 30px;
    }

    .counter { 
        font-size: 11px;

        width: 22px;
        height: 12px;

        right: 1px;
    }
        
    .language-and-basket-button-wraper { gap: 15px; }

    .language-button, .theme-button {
        width: 24px;
        height: 54px;

        padding: 5px;
    }

    .theme-button svg {
        width: 11px;
        height: 11px;
    }

    .ru-button, .en-button, .light-button, .dark-button { 
        font-size: 9px; 
        
        height: 16px;
        width: 16px;
    }

    .active-language-background, .active-theme-background {
        height: 16px;
        width: 16px;
    }
}

@media (min-width: 0px) and (max-width: 600px) {
    .name-page { 
        font-size: 9px;
        letter-spacing: 0px;
    }

    .logo-nav {
        width: 55px;
        height: 45px;
    }

    .name-page-wraper { gap: 4px; }

    .name-page-wraper svg {
        width: 25px;
        height: 12px;
    }

    .shop-button { font-size: 14px; }

    .shop-link svg {
        height: 8px;
        width: 8px;
    }

    .arrow-back-nav { left: -25px; }

    .name-page-column-wraper { gap: 5px; }

    .name-page-top { font-size: 7px; }

    .basket-img svg {
        width: 25px;
        height: 25px;
    }

    .counter { 
        font-size: 9px;

        width: 19px;
        height: 9px;

        bottom: -3px;
        right: 3px;
    }

    .language-and-basket-button-wraper { gap: 8px; }

    .language-button, .theme-button {
        width: 24px;
        height: 48px;

        padding: 5px;
    }

    .theme-button svg {
        width: 10px;
        height: 10px;
    }

    .ru-button, .en-button, .light-button, .dark-button { 
        font-size: 8px; 
        
        height: 15px;
        width: 15px;
    }

    .active-language-background, .active-theme-background {
        height: 15px;
        width: 15px;
    }
}

@media (min-width: 0px) and (max-width: 340px) { 
    .name-page { font-size: 7px; }
}