@media (hover: hover) {
    .button-stock:hover .button-background-text/*, .button-order:hover .button-background-text*/ { background-position: 30% 50% !important; }
    .button-stock:hover .background-boxes-black/*, .button-order:hover .background-boxes-black*/ { opacity: 0.1; }
    .button-stock:hover .text-wrapper/*, .button-order:hover .text-wrapper*/ { transform: translateX(20%); }
    .button-brand:hover .button-background-text { background-position: 70% 50% !important; }
    .button-brand:hover .background-boxes-black { opacity: 0.1; }
    .button-brand:hover .text-wrapper { transform: translateX(-20%); }

    .button-all:hover .background-button-all { transform: scale(1.1); }
    .button-all:hover .background-boxes-black { opacity: 0.1; }
}

@media (hover: none) {
    .button-stock:active .button-background-text/*, .button-order:active .button-background-text*/ { background-position: 30% 50% !important; }
    .button-stock:active .background-boxes-black/*, .button-order:active .background-boxes-black*/ { opacity: 0.1; }
    .button-stock:active .text-wrapper/*, .button-order:active .text-wrapper*/ { transform: translateX(20%); }
    .button-brand:active .button-background-text { background-position: 70% 50% !important; }
    .button-brand:active .background-boxes-black { opacity: 0.1; }
    .button-brand:active .text-wrapper { transform: translateX(-20%); }
    
    .button-all:active .background-button-all { transform: scale(1.1); }
    .button-all:active .background-boxes-black { opacity: 0.1; }
}

@media (min-width: 1400px) and (max-width: 1700px) {
    :root {
        --width-box: 60%;
        --font-size-product: 19px;
    }

    .box-with-shoes { 
        width: 36%;
        height: 115px;
    }

    .titel-box {
        padding: 5px;
    }
}

@media (min-width: 1100px) and (max-width: 1400px) {
    :root {
        --width-box: 70%;
        --font-size-product: 18px;
    }

    /* СВОЙСТВА ДЯЛ БЛОКА БЛОКИРОВКИ РАЗДЕЛА */

    .none-active-block { gap: 9px; }
    
    .none-active-block svg {
        width: 26px;
        height: 26px;
    }

    .text-none-active-block {
        font-size: 10px;
    }

    /* КОНЕЦ СВОЙСТВ БЛОКИРОВКИ РАЗДЕЛА*/

    .box-with-shoes { 
        width: 36%;
    }

    .titel-box {
        padding: 4px;
    }
}

@media (min-width: 800px) and (max-width: 1100px) {
    :root {
        --width-box: 70%;
        --font-size-product: 16px;
    }

    /* СВОЙСТВА ДЯЛ БЛОКА БЛОКИРОВКИ РАЗДЕЛА */
    
    .none-active-block { gap: 8px; }

    .none-active-block svg {
        width: 22px;
        height: 22px;
    }

    .text-none-active-block {
        font-size: 9px;
    }

    /* КОНЕЦ СВОЙСТВ БЛОКИРОВКИ РАЗДЕЛА*/

    .choice-boxes-button-wrapper a { height: 85px; }

    .box-with-shoes { 
        width: 40%;
        height: 95px;
    }

    .titel-box {
        padding: 4px;
    }

    .shelf-under-box {
        width: 60%;
        height: 20px;
    }

    .button-stock .button-background-text, 
    .button-order .button-background-text {
        background-position: 100% 100% !important;
        background-size: 70% 100% !important;
    }

    .button-brand .button-background-text {
        background-position: 0% 100% !important;
        background-size: 70% 100% !important;
    }
}
@media (min-width: 600px) and (max-width: 800px) {
    :root {
        --width-box: 75%;
        --font-size-product: 15px;
        --radius-box: 5px;
    }

    /* СВОЙСТВА ДЯЛ БЛОКА БЛОКИРОВКИ РАЗДЕЛА */

    .none-active-block svg {
        width: 20px;
        height: 20px;
    }

    .text-none-active-block {
        font-size: 8px;
    }

    /* КОНЕЦ СВОЙСТВ БЛОКИРОВКИ РАЗДЕЛА*/

    .choice-boxes-button-wrapper a { height: 80px; }

    .box-with-shoes { 
        width: 60%;
        height: 95px;
    }

    .titel-box {
        padding: 3px;
    }

    .logo-text-timb { max-width: 30%; }

    .logo-timb { max-width: 8%; }

    .shelf-under-box {
        width: 80%;
        height: 18px;
    }

    .button-stock .button-background-text, 
    .button-order .button-background-text {
        background-position: 100% 100% !important;
        background-size: 70% 100% !important;
    }

    .button-brand .button-background-text {
        background-position: 0% 100% !important;
        background-size: 70% 100% !important;
    }
}

@media (min-width: 400px) and (max-width: 600px) {
        :root {
        --width-box: 90%;
        --font-size-product: 13px;
        --radius-box: 4px;
    }

    /* СВОЙСТВА ДЯЛ БЛОКА БЛОКИРОВКИ РАЗДЕЛА */

    .none-active-block { gap: 6px; }

    .none-active-block svg {
        width: 18px;
        height: 18px;
    }

    .text-none-active-block {
        font-size: 7px;
    }

    /* КОНЕЦ СВОЙСТВ БЛОКИРОВКИ РАЗДЕЛА*/

    .choice-boxes-button-wrapper a { height: 60px; }

    .box-with-shoes { 
        width: 60%;
        height: 80px;
    }

    .titel-box {
        padding: 3px;
    }

    .logo-text-timb { max-width: 30%; }

    .logo-timb { max-width: 8%; }

    .shelf-under-box {
        width: 90%;
        height: 16px;
    }

    .button-stock .button-background-text, 
    .button-order .button-background-text {
        background-position: 100% 100% !important;
        background-size: 70% 100% !important;
    }

    .button-brand .button-background-text {
        background-position: 0% 100% !important;
        background-size: 70% 100% !important;
    }
}

@media (min-width: 0px) and (max-width: 400px) {
        :root {
        --width-box: 100%;
        --font-size-product: 11px;
        --radius-box: 3px;
    }

    /* СВОЙСТВА ДЯЛ БЛОКА БЛОКИРОВКИ РАЗДЕЛА */

    .none-active-block { gap: 4px; }

    .none-active-block svg {
        width: 14px;
        height: 14px;
    }

    .text-none-active-block {
        font-size: 6px;
    }

    /* КОНЕЦ СВОЙСТВ БЛОКИРОВКИ РАЗДЕЛА*/

    .choice-boxes-button-wrapper a { height: 50px; }

    .box-dot {
        width: 7px;
        height: 7px; 
    }

    .box-with-shoes { 
        width: 70%;
        height: 70px;
    }

    .titel-box {
        padding: 3px;
    }

    .logo-text-timb { max-width: 30%; }

    .logo-timb { max-width: 8%; }

    .shelf-under-box {
        width: 120%;
        height: 14px;
    }


    .button-stock .button-background-text, 
    .button-order .button-background-text {
        background-position: 100% 100% !important;
        background-size: 70% 100% !important;
    }

    .button-brand .button-background-text {
        background-position: 0% 100% !important;
        background-size: 70% 100% !important;
    }
}