/* ===================================================== */
/* ================= TERMÉK GRID ======================== */
/* ===================================================== */

#products .products{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px;
  padding:10px;
  width:100%;
}

/* ===================================================== */
/* ================= OSZLOPOK =========================== */
/* ===================================================== */

/* MOBIL → 2 oszlop */
#products .product-miniature{
  width:calc(50% - 6px);
}

/* TABLET → 3 oszlop */
@media (min-width:768px){
  #products .product-miniature{
    width:calc(33.33% - 8px);
  }
}

/* PC → 4 oszlop */
@media (min-width:992px){
  #products .product-miniature{
    width:calc(25% - 9px);
  }
}

/* ===================================================== */
/* ================= TERMÉK KÁRTYA ====================== */
/* ===================================================== */

.product-miniature{
  display:flex;
  flex-direction:column;
}

/* ===================================================== */
/* ================= KÁRTYA DOBOZ ======================= */
/* ===================================================== */

.product-miniature .thumbnail-container{
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.08),
             0 10px 25px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:all 0.2s ease;
}

.product-miniature .thumbnail-container:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

/* ===================================================== */
/* ================= KÉP ================================ */
/* ===================================================== */

.product-miniature img{
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ===================================================== */
/* ================= LEÍRÁS ============================= */
/* ===================================================== */

.product-miniature .product-description{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

/* ===================================================== */
/* ================= NÉV ================================ */
/* ===================================================== */

.product-title{
  font-size:15px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===================================================== */
/* ================= ÁR ================================ */
/* ===================================================== */

.product-price-and-shipping{
  display:flex;
  flex-direction:column;
  margin-top:5px;
}

.product-price-and-shipping .regular-price{
  font-size:12px;
  color:#999;
  text-decoration:line-through;
}

.product-price-and-shipping .price{
  font-size:18px;
  font-weight:700;
  color:#ffb800;
}

/* ===================================================== */
/* ================= GOMB ============================== */
/* ===================================================== */

.product-description .highlighted-informations{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
}

.add-to-cart{
  height:36px;
  min-width:90px;
  font-size:14px;
  font-weight:600;
  border-radius:18px;
  background:linear-gradient(90deg,#ff8a00,#ffb800);
  border:1px solid #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(255,138,0,0.25);
  transition:all 0.2s ease;
}

.add-to-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(255,138,0,0.4);
}

.add-to-cart:active{
  transform:scale(0.97);
}