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

/* Телефони ≤ 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: #111;
  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; }


.product .price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product .price .regular-price {
  font-size: 0.95em;
}

.product .price .regular-price.promo-active {
  text-decoration: line-through;
  opacity: 0.7;
}

.product .price .promo-block {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-top: 2px;
}

.product .price .promo-label {
  font-size: 0.85em;
  opacity: 0.9;
}

.product .price .promo-value {
  color: #e53935;
  font-weight: 600;
}


/* Линкове към други категории под продуктите */
.more-categories {
  text-align: center;
  margin: 30px auto 10px;
  font-size: 1.1rem;   /* общ размер на текста (етикетът "Виж още:") */
  color: #FFFFFF;       /* "Виж още:" става бяло */
}

.more-categories a {
  color: #D4AF37;       /* линковете остават златни */
  font-size: 1.1rem;    /* направи буквите на линковете по-големи */
   font-weight: 700; 
  text-decoration: none;
}

.more-categories a:hover,
.more-categories a:focus {
  text-decoration: underline;
}