@charset "utf-8";
/* CSS Document */
        /* header */
		.heeader-icons{
			border-bottom: 2px solid #f1f1f1;
			height: auto; 
			width: auto; 
            overflow: hidden; 
            background-color: #ffffff; 
			box-shadow: 2px 2px 4px 2px #f1f1f1;
			padding: 0 0 5px 0;
		}
        .heeader-icons .bar{
			max-width: 1400px; 
            border: 0 solid blue;
			margin: auto; 
            overflow: hidden;
		}
		.heeader-icons .top{
			border-bottom: 1px solid #f1f1f1;
			padding: 0 0 3px 0;
			overflow: hidden;
		}
        .heeader-icons .logo{
            border: 0 solid red; 
            display: block; 
            width: 70px; 
            height: 70px; 
            float: left; 
            overflow: hidden;
        }
        .heeader-icons .domen{
            border: 0 solid red; 
            overflow: hidden; 
            float: left;  
            font-weight: bold; 
            padding: 9px 0 0 0; 
			height: 61px;
        }
		@media screen and (max-width: 550px) {
			.heeader-icons .domen{ display: none;}
        }
        .domen .name{
            font-size: 21px; 
            color: #08612E;
        }
        .domen .slogan{
            font-size: 16px; 
            color: #C1AA49;
        }
        .cart-box{
            border: 0 solid red; 
            max-width: 1400px; 
            margin: auto;
            overflow: hidden; 
            text-align: right; 
            padding: 7px; 
			height: 56px;
        }
        .cart-box .cart-part{
            background-color: #38A169;
			text-decoration: none;
			padding: 9px 10px 9px 10px;
			position: relative;
			display: inline-block;

			border-radius: 10px; 
            font-size: 16px; 
            color: #ffffff; 
            box-shadow: 1px 1px 4px 1px #f1f1f1;
            transition: 0.3s;
        }
        .cart-box .cart-part:hover {
            background-color:#F09029;
			color: #ffffff;
        }
	   .cart-box .cart {
			background-color: #fff;
			text-decoration: none;
			padding: 12px;
			position: relative;
			display: inline-block;
			border-radius: 10px;
            border: 1px solid #f1f1f1; 
            font-size: 15px; 
            color: #333333; 
            box-shadow: 1px 1px 4px 1px #f1f1f1; 
            transition: 0.3s;
		}

      .cart-box .cart:hover {
            background: #f7f8f9;
        }

      .cart-box .cart .badge {
            position: absolute;
            top: -2px;
            right: -5px;
            padding: 2px 6px;
            border-radius: 50%;
            color: #666666;
        }
		
        
        .box-menu{
			overflow: hidden;
			border: 0 solid red;
			margin: 3px 0 0 0; float: left;
		}
        
        .menu{
            border: 0 solid red; 
            overflow: hidden; 
            padding: 0; 
        }
        
        @media screen and (max-width: 768px) {
            .menu { display: none;}
        }
		
        .menu a{
            display: block;
            float: left;
            text-decoration: none;
            text-align: center;
            border: 0 solid red; 
            padding: 10px 20px 10px 20px; 
            color: #333333;
        }
        #menu-right {
           float: right;
        }
        
        .burger {
            display: inline-block;
            cursor: pointer;
            float: left;
        }
        
        @media screen and (min-width: 768px) {
            .burger-container { display: none;}
        }
       @media screen and (max-width: 767px) {
            .burger-container { display: none;}
        
        /* --- ბურგერ ღილაკის სტილები --- */
        .burger-container {
            display: inline-block;
            cursor: pointer; 
			float: right; margin-right: 5px;
        }

        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 4px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
            border-radius: 2px;
        }
        
        /* ანიმაცია: X-ად გადაქცევა */
        .change .bar1 {
            transform: translate(0, 10px) rotate(-45deg);
        }

        .change .bar2 {opacity: 0;}

        .change .bar3 {
            transform: translate(0, -10px) rotate(45deg);
        }
		
} 

/* --- გვერდითა მენიუს (Sidepanel) სტილები --- */
        .sidepanel {
            height: 100%;
            width: 250px;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: -260px; /* თავდაპირველად დამალულია მარცხნივ */
            background-color: #111;
            overflow-x: hidden;
            padding-top: 60px;
            transition: left 0.5s ease; /* გლუვი ანიმაცია */
            box-shadow: 3px 0 10px rgba(0,0,0,0.2);
        }

        /* მენიუს გახსნის კლასი */
        .sidepanel.open {
            left: 0;
        }
        
        .sidepanel a {
            padding: 10px 15px 10px 32px;
            text-decoration: none;
            font-size: 22px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

        .sidepanel a:hover {
            color: #f1f1f1;
        }

/* --- ეკრანის დაბურვა მენიუს გახსნისას --- */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .overlay.visible {
            opacity: 1;
            visibility: visible;
        }
        /* header */