/* Layout de bază pentru ecrane mari */
@media screen and (max-width: 768px) {
  form > div {
    flex-direction: column;
  }

  aside,
  section,
  form > div > div:last-child {
    width: 100% !important;
    padding: 1rem;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* imaginea principală din popup să se încadreze frumos */
  #popup-main-img {
    max-width: 100%;
    max-height: 60vh;
  }

  /* lista de thumbnails să fie pe orizontală la mobil */
  #popup-thumbs {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    max-height: unset !important;
  }

  #popup-thumbs img {
    height: 50px !important;
  }
  


  #popup-inner {
    width: 95vw;
    max-height: 90vh;
  }




  .product-grid {
    grid-template-columns: 1fr;
  }

  h1, h3 {
    font-size: 1.2rem;
  }



   .logo img {
     height: 40px;
   }
   
 
   .nav-container {
     position: relative; /* permite poziționarea absolută a nav-right */
   }
 
   .nav-right {
     display: none;
     flex-direction: column;  
     color: white;
     width: 100%;
     position: absolute;     
     top: 100%;               
     left: 0;
     z-index: 9999;
     flex-direction: column;
     gap: 0;
  
   }
 
   .nav-right.open {
     display: flex;
  
   }
 
   .nav-right li {
     display: block;
     text-align: left;
     padding: 10px 20px;
     background-color:#333;
     width:100%;
     gap: 0;
   }
 
   .nav-right ul{
      background-color: red;
   }
 
 
   .nav-right a {
     color: white !important;
     display: block;
     padding: 10px 20px;
     text-decoration: none;
    
   }
 

 
   .product-card {
     width: 90%;
     height: auto;
     margin-bottom: 20px;
   }
 
   .product-card img {
     height: auto;
   }
 
   .ads-container {
     height: auto !important;
   }
   .dropdown-menu {
     display: none;
     flex-direction: column;
     background-color: #222;
     padding-left: 20px;
   }
   
   .dropdown:hover .dropdown-menu {
     display: flex;
   }
 
   .nav-right {
     transition: all 0.3s ease;
   }

   
   .product-card {
     width: 100% !important;
     max-width: 360px;
   }
   .product-card img {
     height: auto;
     max-height: 200px;
     object-fit: cover;
   }
   .ads-container {
     display: none;
   }
     
   


   .ads-container {
     height: 50px !important;
   }
 
   .ads-container ins {
     height: 50px !important;
   }
       .product-cards-container {
     flex-direction: column !important;
     align-items: center;
     gap: 30px; /* spațiu între carduri */
    } 
 

 /* Ascunde burger-ul implicit */
    .burger-menu {
      display: none;
      font-size: 28px;
      cursor: pointer;
      padding: 10px;
      background: none;
      border: none;
    }
    
    /* Meniul de navigare implicit (desktop) */
    .nav-menu {
      display: flex;
      gap: 20px;
    }
 
 /* Responsive: activează burger și ascunde meniul clasic */

   .burger-menu {
     display: block;
   }
 
   .nav-menu {
     display: none;
     flex-direction: column;
     background-color: #333;
     position: absolute;
     top: 60px;
     right: 10px;
     padding: 10px;
     border-radius: 8px;
   }
 
   .nav-menu.show {
     display: flex;
   }
 
   .nav-menu a {
     color: white;
     text-decoration: none;
     padding: 5px 10px;
   }
 
 

  .site-footer {
    display: none !important;
  }

  .prices_calculated { 
    margin: 20px auto;
    padding: 10px;
    max-width: 100%;
    line-height: 1.4;
  }
 
    #popup-inner {
      width: 95vw;
      max-height: 90vh;
      padding: 10px;
    }
  
    #popup-inner > div {
      flex-direction: column;
      align-items: center;
    }
  
    #popup-main-img {
      max-width: 100%;
      max-height: 60vh;
    }
  
    #popup-thumbs {
      flex-direction: row;
      gap: 5px;
      margin-top: 10px;
      max-height: unset;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    #popup-thumbs img {
      height: 50px;
    }


    .contact-map contact-info{
      width: 90%;
      margin: auto;
      margin: 5px;
     border:1px solid;
    }

   
      .contact-map {
        flex-direction: column;
      
      }
    
    .contact-map-frame {
        width: 100%;
      }
    
      .contact-map-frame iframe {
        height: 100%;
      }
    }