/*  IPhone 12 Pro design + (max-width: 475px) = enabled */
	
@media (width: 390px), (width: 391px), (max-width: 475px) {

	/* 2 prod pe fiecare rand */
	#content > h3 + div.row {gap: 6px; margin: 0 !important;}
	#content > h3 + div.row > div.col {width: 49% !important; padding: 0 !important; margin: 0 !important;}
	#content > h3 + div.row > div.col > .product-thumb .description h4 {min-height: 71px;}
	#content > h3 + div.row > div.col > .product-thumb .description p {min-height: 94px;}
	
	#content div.product-thumb > .content .button button[type='submit'] {width: 90% !important;}
}

div.Xclose, div.closeX, .fa-caret-down {display: none;}

@media (width: 391px), (max-width: 475px) {
    .search-modal {
        top: 0; /* 148px */
        left: 100vw;
        padding-top: 140px; /*  28px */
        align-items: flex-start;
        background: #515b90d6;
        /*background-image: none;*/
        background-image: linear-gradient(45deg, #00000082, #00000082);
        opacity: 0;
        visibility: hidden;
        transition: left 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s step-end;
    }
    #navbar-menu > div.Xclose {
        display: flex;
        position: absolute;
        top: 10px;
        /*top: 3px;*/
        right: 8px;
        padding: 16px;
        font-size: 36px;
        border-radius: 12px;
        color: white;}
    #searchModal > div.closeX {
        display: flex;
        position: absolute;
        width: 100%;
        top: 10px;
        right: 8px;
        padding: 16px;
        padding-right: calc(12px + (100vw - 370px) / 4);
        font-size: 36px;
        border-radius: 12px;
        color: white;
        justify-content: flex-end;
    }
    .search-modal-content form.input-group {width: initial;}
    #navbar-menu > div.Xclose i.fa-xmark,
    #searchModal > div.closeX i.fa-xmark {
        color: #fcfcfc;
        text-shadow: 2px 2px 2px #020615;
    }
}

@media (width: 391px), (max-width: 475px) {
    #navbar-menu {
        width: 100vw;
        padding: min(58px, 15vw);
        background: #0a1a5ea8;
        background-image: linear-gradient(45deg, #00000082, #00000082);}
        
    #navbar-menu.show {
        opacity: 1;
        visibility: visible;
        /* something as -- transition: left 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s step-end; */
    }
    #menu .navbar-nav > li > a {text-shadow: 1px 2px 2px black;}
    .fa-caret-down {display: inline; float: right; padding-top: 7px; padding-right: 4vw;}
    
    #cart .btn-lg {
        background-color: #20639c;
    }
}

@media (width: 391px), (max-width: 475px) {
    #cart {padding: 0 5px;}
    #navbar-menu {width: min(342px, 92vw);}
}


/* test doar 391 de la 475 in jos = activat */

    @media (width: 391px) {
        /*#navbar-menu {*/
        /*    width: 342px;*/
        /*    max-width: 92vw;*/
        /*}*/
    }

/* end doar 391 */



        /* animatie mobil, beat bootstrap, 391 --> plus toate  */
        
        @media (width: 391px), (max-width: 475px) {
            
                /* meniu mobi ascuns */
                .navbar-collapse.collapse {
                    display: block; /* undo Btstrp */
                
                    position: fixed;
                    top: 0;
                    left: 0;
                
                    width: 100vw;
                    height: 100vh;
                
                    transform: translateX(-100%);
                    opacity: 0;
                    visibility: hidden;
                
                    background: #fff;
                    z-index: 1050;
                
                    transition:
                        transform 0.4s ease,
                        opacity 0.3s ease,
                        visibility 0.4s step-end;
                }
                
                /* meniu mobi afisat */
                .navbar-collapse.collapse.show {
                    transform: translateX(0);
                    opacity: 1;
                    visibility: visible;
                
                    transition:
                        transform 1.85s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 1.62s ease-out,
                        visibility 0s step-start;
                }
        }

/* o coloana de produse de la 362 in jos */

@media (max-width: 362px) {
    #content > h3 + div.row {flex-direction: column;}
    #content > h3 + div.row > div.col {width: initial !important; padding: initial !important;}
    #logo img {
        max-width: 200px;
    }
    #searchModal > div.closeX {
        /*top: 10px;*/
        /*right: 13px;*/
        top: 8px;
        right: 8px;
        /* right: 12px; */
        padding: 12px;
        padding-right: calc(12px + (100vw - 325px) / 4);
    }
    #navbar-menu > div.Xclose {top: 3px;}
}