/* 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: 30px;
   }
   
 
   .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;
    }



      .brands-banner{
        display: none;
      }
      .face{
        flex: 100%; 
        background: url('/img/face.jpg') center/cover no-repeat;
        position:relative;
        height: auto;
      }

      .home-page {
        width: 100%;
        margin: 0;
        padding: 0;
      }

   

      .boxshadow {
        background: #fff;
        width:300px ;
        height: auto;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }


      #filter-form{
        width: 90%;
      }
      .contact-table{
        width: 100%;
      }

      .contact-body {
        flex-direction: column;
      
      }
      .contact-map{
        width: 100%;
      }

      .contact-header{
        margin-top: 30px;
        padding: 5px;
      }
  
      .service {
        flex-direction: column;
        gap: 0;
      }
    
      .service aside {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid #ddd;
      }
    
      .service section {
        width: 100%;
        padding: 20px;
        border: none;
      }
    
      .service-table th, .service-table  td {
        font-size: 14px;
        padding: 8px;
      }
    
      #service-banner {
        height: 150px;
      }
      h2 {
        font-size: 18px;
      }
    
      .service aside div {
        font-size: 16px;
        padding: 8px;
      }
    
      .pagination a {
        padding: 6px 10px;
        font-size: 14px;
      }
    
     

    
  
    }