/* MicroStore terméklista-rács (CSAK store 0/10, product/category|search|special|manufacturer
   oldalakon — a header.tpl kapuzza). Cél: sűrűbb, lyukmentes rács + kompaktabb kártyák. 2026-07-08 */

/* A termékkártyákat tartalmazó sor CSS-griddé alakítása: automatikus oszlopszám,
   egyenlő magasságú cellák — a float-os sorvégi lyukak megszűnnek. */
#content .row:has(> .product-layout) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-left: 0;
  margin-right: 0;
}
/* Fix oszlop-letra: mindegyik osztoja a 24-nek -> az oldal MINDIG teli sorokkal zar */
@media (min-width: 768px)  { #content .row:has(> .product-layout) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { #content .row:has(> .product-layout) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { #content .row:has(> .product-layout) { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 2200px) { #content .row:has(> .product-layout) { grid-template-columns: repeat(8, 1fr); } }
#content .row:has(> .product-layout)::before,
#content .row:has(> .product-layout)::after { display: none; }

#content .row > .product-layout {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#content .row > .product-layout .product-thumb {
  height: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

/* kompaktabb kartya-tartalom */
#content .product-thumb .caption { padding: 8px 10px; }
#content .product-thumb h4, #content .product-thumb h4 a { font-size: 13px; line-height: 1.35; }

/* Tovabbi termekek gomb — hazi zold (#19B40E, mint a Raktáron jelzes) */
.ms-tovabbi-wrap { text-align: center; margin: 20px 0 8px; grid-column: 1 / -1; }
.ms-tovabbi {
  background: #19B40E;
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 14px 48px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(25, 180, 14, .35);
  transition: background .15s;
}
.ms-tovabbi:hover { background: #149A0B; }
.ms-tovabbi[disabled] { opacity: .65; cursor: wait; }

/* kartyan beluli gorgetosavok teljes tiltasa: a sav sehol nem rajzolodhat ki,
   a tartalom valtozatlan marad */
#content .row > .product-layout { min-width: 0; }
#content .row > .product-layout .product-thumb { overflow: hidden; }
#content .row > .product-layout .product-thumb div { scrollbar-width: none; -ms-overflow-style: none; }
#content .row > .product-layout .product-thumb div::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* osszehasonlitas ikon elrejtese a kartyakon (nem mukodik, user kerese 2026-07-08) */
#content .product-thumb .osszehasonlit { display: none !important; }

/* Az ar + darabszam + kosar blokk MINDIG a kartya aljan (a valtozo hosszusagu
   termeknev a kozepso reszben nyelodik el) */
#content .row > .product-layout .product-thumb { display: flex; flex-direction: column; }
#content .row > .product-layout .product-thumb .caption { flex: 1 1 auto; }


/* hover: masodik termekfoto atuszassal + kartya-emeles ("pakli-effekt") */
#content .row > .product-layout .product-thumb .image { position: relative; }
#content .row > .product-layout .product-thumb:hover .ms-hover-kep { opacity: 1 !important; }
#content .row > .product-layout .product-thumb {
  transition: transform .18s ease, box-shadow .18s ease;
}
#content .row > .product-layout .product-thumb:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 26px rgba(15, 37, 87, .16);
  position: relative;
  z-index: 2;
}


/* ===== termekoldal (store 0/10) ===== */
#content #button-cart {
  background: #19B40E !important;
  border-color: #19B40E !important;
  width: 100% !important;
  margin: 12px 0 !important;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
  padding: 14px 20px;
  box-shadow: 0 2px 12px rgba(25, 180, 14, .3);
}
#content #button-cart:hover { background: #149A0B !important; }
#content .h2price { font-size: 34px; color: #0f2557; font-weight: 800; }
.ms-atvetel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 14px;
  color: #334155;
  max-width: 480px;
}
.ms-atvetel-cim { font-weight: 800; color: #0f2557; margin-bottom: 4px; }
.ms-atvetel-sor { line-height: 2; }
.ms-atvetel-sor b { color: #c2410c; }


/* darabszam-lepteto egy sorban (termekoldal + kartyak) */
#content .number-spinner {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  width: auto !important;
  gap: 2px;
  vertical-align: middle;
}
#content .number-spinner .input-group-btn { width: auto; display: inline-block; }
#content .number-spinner input[name="quantity"] { flex: 0 0 48px; width: 48px !important; }