@media only screen and (max-width: 1168px) {
    .product .split.details {
        display: flex;
        flex-direction: column;
        gap: var(--default-gap);
    }
}
@media only screen and (max-width: 940px) {
    .main .section.grid {
        grid-template-columns: 1fr;
    }
    #mobileMenuBtn {
        display: flex;
    }
    #Sidenav {
        left: -280px;
    }
    #Sidenav.show {
        left: 0;
    }
    .sidenav {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 280px;
        background: var(--background-color-primary);
        z-index: 10;
        padding-top: calc(60px + var(--default-gap));
        box-shadow: var(--default-shadow);
    }
    .hero {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 853px) {
    .user-page {
        grid-template-columns: auto;
    }
    #Sidebar {
        left: -280px;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    #Sidebar.toggle {
        left: 0;
    }
    #sidebarOverlay.toggle {
        display: block;
        z-index: 20;
        background: rgba(0,0,0,.2);
    }
    .user-page .sidebar {
        width: 280px;
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 50;
        background: var(--background-color-primary);
        box-shadow: var(--default-shadow);
    }
}
@media only screen and (max-width: 735px) {
    .hero .greeting {
        transform: scale(.8);
    }
    .hero {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 653px) {
    .products .list-item {
        width: 50%;
    }
    .hero .greeting {
        transform: scale(.5);
    }
    .hero {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 624px) {
    .product .tab-btn .list-row .tab-item {
        width: auto;
    }
    .product .tab-btn .list-row .tab-item .icon {
        font-size: 16px;
    }
    .product .tab-btn .list-row .tab-item .text {
        font-size: 10px;
    }
}
@media only screen and (max-width: 575px) {
    .product .split.details .left {
        display: flex;
        flex-direction: column;
        gap: var(--default-gap);
    }
    .product .product-detail {
        padding: var(--default-gap) 0;
    }
}
@media only screen and (max-width: 460px) {
    .products .list-item {
        min-width: 100px;
        width: 50%;
    }
    .topbar .login-btn .button-default-round-primary-invert .text {
        display: none;
    }
    .topbar .section {
        width: auto;
    }
    .topbar .wrapper {
        justify-content: space-between;
    }
    .topnav {
        justify-content: space-between;
    }
    .topnav .left,
    .topnav .right {
        width: auto;
    }
    .hero {
        border-radius: 10px;
    }
    .hero .greeting {
        width: 100%;
        transform: scale(1);
    }
    .hero .greeting p.text,
    .hero .greeting .promo-btn {
        font-size: 12px;
    }
    .hero .greeting .promo-btn {
        border-width: 2px;
        padding: 10px 12px;
    }
    .hero .greeting .promo-btn .icon {
        font-size: 14px;
    }
}
@media only screen and (max-width: 450px) {
    .product .order-now .form {
        padding: 0 !important;
    }
    .product .order-now .form .input-group.rows {
        flex-direction: column;
        justify-content: center;
        gap: auto;
    }
    .product .order-now .form .input-group.rows .label {
        width: 100%;
    }
    .product .order-now .form .input-group.rows .label .text {
        min-width: 130px;
    }
    .product .order-now .form .input-group.rows .input {
        width: 100%;
        max-width: auto;
    }
    .product .order-now .form .input-group.rows .errorText {
        position: relative;
        left: auto;
        bottom: auto;
    }
}
@media only screen and (max-width: 486px) {
    .product .tab-btn .list-row {
        gap: 0;
    }
    .product .tab-btn .list-row .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 25%;
    }
}
@media only screen and (max-width: 440px) {
    .product .tab-btn .list-row .tab-item .icon {
        font-size: 20px;
    }
}
@media only screen and (max-width: 375px) {
    .products .list-item {
        padding: 6px;
    }
}
@media only screen and (max-width: 325px) {
    .product-rating .list-row {
        transform: scale(.9);
    }
}
@media only screen and (max-width: 310px) {
    .product-rating .list-row {
        transform: scale(.7);
    }
}