/* ===== Продуктов грид и елементи ===== */

/* Телефони ≤ 768px */
@media (max-width: 768px) {
  /* Грид с продукти – 2 колони */
  .products {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    padding: 10px 12px 40px;
  }

  .product {
    padding: 12px;
  }

  .product h3 {
    font-size: 15px;
    line-height: 1.25;
  }

  .product .price {
    font-size: 14px;
  }

  .product input,
  .product button {
    font-size: 14px;
  }
}

/* Малки телефони ≤ 480px */
@media (max-width: 480px) {
  /* Грид с продукти – 1–2 тесни колони */
  .products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 10px 10px 36px;
  }

  .modal-content {
    width: min(92vw, 520px);
    padding: 22px;
  }
}

/* === Центриране и визия на продуктови карти и снимки === */
.product {
  display: flex;
  flex-direction: column;
  align-items: center; /* центрира хоризонтално */
  justify-content: flex-start;
}

.product img {
  width: 80%;
  height: auto; /* без фиксирана височина */
  aspect-ratio: 3 / 4; /* стабилни карти */
  object-fit: contain; /* показвай снимката цялата */
  border-radius: 6px;
  background-color: #f0e0b5;
  margin-bottom: 15px;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.product img:hover {
  transform: scale(1.02);
}

/* Защита от стари правила в други файлове/медии */
@media (max-width: 480px) {
  .product img {
    height: auto !important;
    object-fit: contain !important;
    max-height: 260px; /* по желание – ограничение на височина */
  }
}

/* ===== Попъп описание – подравняване като началната страница ===== */
#modal-product .modal-content #popup-desc {
  text-align: justify; /* основно подравняване */
  text-justify: inter-word; /* равномерно разпределяне на думите */
  text-align-last: left; /* последният ред да не се разтяга */
  line-height: 1.6; /* по-лесно четене */
  hyphens: auto; /* пренасяне по срички */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: anywhere; /* за много дълги думи */
  white-space: pre-line; /* пази нови редове в текста */
}
/* Червен цвят само за опцията „Пподаръкоция“ */
#sort-select option[value="promo"]{
  color:#ff3b3b;
  font-weight:700;
}

/* Когато е избрана „Пподаръкоция“, оцвети и самия select (видимо на мобилни/Chrome) */
#sort-select.is-promo{
  color:#ff3b3b;
  font-weight:700;
}
@media (max-width: 900px){
  header{ position: fixed; top:0; left:0; right:0; z-index: 9999; }
  body{ padding-top: 70px; }

  header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  header .logo{ position:absolute; left:50%; transform:translateX(-50%); top:6px; }
  header .site-logo{ max-height:60px; }

  header nav{
    width:100%;
    margin-top:56px;
    display:flex; gap:12px;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

.modal-content.info-modal-content{ max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }