/* Kategoria Grid - Progresszív responsive design */

.categories-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr); /* PC: pontosan 4 oszlop */
  margin: 0;
  padding: 0;
}

/* Progresszív oszlop csökkentés */
@media screen and (max-width: 1200px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 oszlop */
  }
}

@media screen and (max-width: 900px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 oszlop */
  }
}

@media screen and (max-width: 600px) {
  .categories-grid {
    grid-template-columns: 1fr; /* 1 oszlop */
  }
}

.category-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.category-item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 text-decoration: none;
 color: black;
}

.category-item figure {
  margin: 0;
}

.category-item figcaption {
  padding: .5rem;
  font-size: .9rem;
  color: #555;
  text-align: center;
}

.category-item h3 {
  margin: .5rem;
  font-size: 1.1rem;
}

.category-item dl {
  display: flex;
  flex-wrap: wrap;
  margin: .5rem;
  font-size: .9rem;
}

.category-item dt {
  flex: 0 0 30%;
  font-weight: bold;
}

.category-item dd {
  flex: 0 0 70%;
  margin: 0 0 .5rem 0;
}

.category-item p {
	font-size: 14px;
	width: 75%;
	text-align: center;
}

.category_image {
	width: 150px;
	height: 150px;
  margin-top:10px;
	object-fit: contain;
	object-position: center;
}

/* Termek Grid - Progresszív responsive design */

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr); /* PC: pontosan 4 oszlop */
  margin: 0;
  padding: 0;
}

/* Progresszív oszlop csökkentés termékeknek */
@media screen and (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 oszlop */
  }
}

@media screen and (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 oszlop */
  }
}

@media screen and (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr; /* 1 oszlop */
  }
}

.product-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.product-item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 text-decoration: none;
 color: black;
}

.product-item figure {
  margin: 0;
}

.product-item figcaption {
  padding: .5rem;
  font-size: .9rem;
  color: #555;
  text-align: center;
}

.product-item h3 {
  margin: .5rem;
  font-size: 1.1rem;
}

.product-item dl {
  display: flex;
  flex-wrap: wrap;
  margin: .5rem;
  font-size: .9rem;
}
.product-item dt {
  flex: 0 0 30%;
  font-weight: bold;
}
.product-item dd {
  flex: 0 0 70%;
  margin: 0 0 .5rem 0;
}

.product-item h1 {
	font-size: 16px;
	width: 90%;
	text-align: center;
	font-weight: bold;
}

.product-item p {
	font-size: 13px;
	width: 75%;
	text-align: center;
}

.product_image {
	width: 150px;
	height: 150px;
  margin-top:10px;
	object-fit: contain;
	object-position: center;
}

.product-item {
	transform: scale(1);
	transition: all 0.3s ease-in-out;
}

.product-item:hover {
	transform: scale(1.025);
	transition: all 0.3s ease-in-out;
  text-decoration: none;
}
.bgcolor {
  background-color: #829dce80;
  border: 1px solid #829dce;
  border-radius: 15px;
}
.nono-product-item {
  padding:15px;
  margin:15px;
  border-radius: 15px;
  border: 1px solid gray;
  background-color: #f0f0f0;
  text-decoration: none;
  color: black;
}
.nono-product-item:hover {
  border: 1px solid #00488d;
}
.nono-product-item a {
  text-decoration: none;
  color: black;
}
.nono-product-item a .back_to_search{
  text-decoration: none;
  color: black;
  opacity: 0.6;
}

.nono-product-item:hover .back_to_search {
  transition: none;
  opacity: 1;
  text-decoration: underline;
  font-weight: bold;
  color: #00488d;
}

.product-item:hover  .back_to_search{
  text-decoration: underline;
  font-weight: bold;
  color: #00488d;
}

.category-item {
	transform: scale(1);
	transition: all 0.3s ease-in-out;
}

.category-item:hover {
	transform: scale(1.025);
	transition: all 0.3s ease-in-out;
}
.back_to_search {
	transform: scale(1);
	transition: all 0.3s ease-in-out;
  font-weight: normal;
}


.oldal_card {
	background-color:rgba(255,255,255,0.5);
	border-radius:7px;
	border: 1px solid rgba(0,0,0,0.25);
	margin:10px;
	display: flex;
	justify-content: center;
	align-items: center;
}


.searching {
	margin:10px;
	padding:0px;
	display: flex; 
	align-items: center;
	gap: 0;
	padding: 0;
}


.oldal_szoveg {
	  display: flex;
  justify-content: center; 
  align-items: center;   
}



.param_combobox {
	border-radius: 7px;
	height: 25px;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	width: 200px;
}


.hozzaad {
	border-left:none;
}


.add_param {
	margin:10px;
	display:flex;
	flex-direction:row;
}

.keres {
	border-left: none;background-color:#084c8c;height:25px;border-radius:7px;border-top-left-radius:0px;border-bottom-left-radius:0px;
	cursor:pointer;
}


.param-block {
	border-left: none;
	border-right: none;
}


.oldal_input {
	width: 250px;
}

.param-block {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.param-block.show {
  opacity: 1;
  transform: translateY(0);
}

.param-block.hide {
  opacity: 0;
  transform: translateY(-10px);
}


.oldal_input input {
	
	width: 10px;
}

.category-item, .product-item, .nono {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  filter: blur(2px);
  transition: 
    opacity 0.6s ease-out,
    transform 0.6s ease-out,
    filter 0.6s ease-out;
  will-change: opacity, transform, filter;
}

.category-item.animated, .product-item.animated, .nono.animated {
  opacity: 1;
  transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Mobil CSS - Responsive design mobilra és tabletre */
@media screen and (max-width: 1024px) {
  body, html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  
  .site-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Center div mobilra optimalizálás - ERŐSEBB SPECIFICITÁS */
  .site-content .center {
    height: auto !important;
    padding: 10px !important;
    margin: 0 !important;
    background-color: transparent !important;
    display: block !important;
    position: static !important;
  }
  
  /* Kategória grid mobilra optimalizálás */
  .categories-grid {
    gap: 0.2rem;
    padding: 20px;
    margin: 0;
    width: 100% !important;
  }
  
  /* Kategória elemek mobilra */
  .category-item {
    min-height: 200px;
    padding: 10px;
  }
  
  .category-item a img {
    width: 150px;
    height: 150px;
  }
  
  .category-item a p {
    font-size: 18px;
    width: 90%;
  }
  
  /* Termék grid mobilra optimalizálás */
  .product-grid {
    gap: 0.5rem;
    padding: 0px;
    margin: 0;
    width: 100% !important;
  }
  
  /* Termék elemek mobilra */
  .product-item {
    min-height: 200px;
    padding: 10px;
  }
  
  .product-item img {
    width: 250px;
    height: 250px;
  }
  
  .product-item a h1 {
    font-size: 20px;
    width: 95%;
  }
  
  .product-item a p {
    font-size: 18px;
    width: 90%;
  }
  
  /* Paraméter szűrő mobilra */
  .param_combobox {
    width: 150px;
    font-size: 14px;
  }
  
  .oldal_input {
    width: 200px;
  }
  
  .add_param {
    margin: 5px;
    flex-direction: column;
    gap: 5px;
  }
  
  .oldal_card {
    margin: 5px;
    padding: 10px;
  }
}

/* Extra kis mobilokra (telefon álló módban) */
@media screen and (max-width: 480px) {
  body, html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  
  .site-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Center div kis mobilra - ERŐSEBB SPECIFICITÁS */
  .site-content .center {
    padding: 5px !important;
  }
  
  /* Kategória grid kis mobilra */
  .categories-grid {
    gap: 0.3rem;
    padding: 5px;
    margin: 0;
  }
  
  /* Termék grid kis mobilra */
  .product-grid {
    gap: 0.3rem;
    padding: 5px;
    margin: 0;
  }
  
  .category_image, .product_image {
    width: 200px;
    height: 100px;
  }
  
  .category-item p, .product-item p {
    font-size: 18px;
  }
  
  .product-item h1 {
    font-size: 12px;
  }
  
  /* Paraméter szűrő kis mobilra */
  .param_combobox {
    width: 130px;
    font-size: 12px;
  }
  
  .oldal_input {
    width: 150px;
  }
  
  .add_param {
    margin: 3px;
  }
  
  .oldal_card {
    margin: 3px;
    padding: 5px;
  }
}