/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */
@media only screen and (min-width:959px){
	.toggle-btn {
		cursor: pointer;
		font-weight: bold;
		margin-right: 6px;
		color: #007bff;
	  }
	.nested {
		display: none; /* скриваме вложените списъци по подразбиране */
	  }
	.sub-menu.nested{
		margin-left: 20px;	
	}
	.sub-menu{
		width: 100vw;
		height: 100%;
		position: fixed !important;
		left: 0px !important;
		top: 0px !important;
	}
	.sub-menu li{
		text-align: center;
		display:flex;
	}
	.sub-menu li:first-Child{
		margin-top:200px;
	}
	.dropdown-menu .sub-menu, #searchform-dropdown, .current-shop-items-dropdown{
		background-color: #1b1b1bd1 !important;
	}

	/*menu custom*/
	/* Подравняване и стил за подменю картинките */
	.main-header .sub-menu li a {
	  display: flex;
	  align-items: center;
	  gap: 8px;
	  line-height: 1.4;
	}

	.submenu-img {
	  width: 24px;
	  height: 24px;
	  object-fit: cover;
	  border-radius: 4px;
	}
	/* Desy Mega Menu Styles */

	.main-menu .sub-menu.mega-submenu-wrapper,
	.mega-submenu-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding: 15px;
	}

	.mega-col {
		width: 200px;
		display: flex;
		flex-direction: column;
	}

	.mega-col a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 6px;
		padding: 6px 0;
	}

	.mega-col img.submenu-img {
		width: 40px;
		height: 40px;
		border-radius: 4px;
		object-fit: cover;
	}

	.mega-col .submenu-desc {
		font-size: 13px;
		color: #666;
	}
	/* Мега меню стилове */
	.main-menu .sub-menu.mega-submenu-wrapper,
	.mega-submenu-wrapper {
		display: none;
		flex-wrap: wrap;
		gap: 20px;
		padding: 15px;
		position: absolute;
		background: #fff;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		z-index: 999;
	}

	.mega-col {
		width: 200px;
		display: flex;
		flex-direction: column;
	}

	.mega-col a {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 6px;
		padding: 6px 0;
	}

	.mega-col img.submenu-img {
		width: 40px;
		height: 40px;
		border-radius: 4px;
		object-fit: cover;
	}

	.mega-col .submenu-desc {
		font-size: 13px;
		color: #666;
	}

	.mega-submenu-wrapper .close-submenu {
		position: absolute;
		top: 5px;
		right: 5px;
		background: transparent;
		border: none;
		font-size: 18px;
		cursor: pointer;
		color: #333;
	}

	.close-submenu{
		margin: 20px 130px 0 0;
        background: none;
        border: none;
        font-size: 60px;
        color: #fff;
        bottom: 14%;
        position: absolute;
        z-index: 10001;
        right: 0;
        width: 100px;
        height: 100px;
	}
	.close-submenu:hover{
		background: none;
	}
	.desy-img-txt figcaption{
		margin-top: -55px;
		background: #ffffffb3;
		z-index: 100;
		position: absolute;
		width: 100%;
		color: #333;
		height: 55px;
	}
	.dropdown-menu li .sub-menu li.menu-item{
	    display: block;
		float: left;
		width: 20%;
        margin-top: 40px;
        padding: 10px;
        max-height: calc(100% / 5);
	}
	li .menu-item a img{
		max-height:17vh;
		display: block;
		margin: 0 auto;
	}
	.menu-image-title-below.menu-image-title{
	  /* background: #353535bf;*/
        color: #fff;
		padding: 20px;
        /*  position: absolute;
        top: 50%;
        width: 20vh;
        margin: 0px 23%;
        height: 45%;
        text-align: center;
        left: auto; */
	}
	.sf-menu ul.sub-menu {
		margin-top: 129px;
	}
	.dropdown-menu ul li.menu-item{
		border-bottom: none;
	}
	.custom-logo-link img{
		max-height: 120px;
	}
	.desytrading .elementor-image-box-img{
		width: 100%;
	}
}
#mobile-dropdown{
	max-height: 100vh;
}
#mobile-dropdown .menu-image-title-below.menu-image-title{
		background: #353535bf;
        color: #fff;
        position: absolute;
        top: 50%;
        width: width: calc(100% - 80px);
        padding: 20px;
        margin: 0px auto;
        height: 70px;
        text-align: center;
        left: auto;
	}
@media only screen and (max-width:959px){
	#site-logo {
        max-width: 50%;
    }
}