/* cards.css */
/* ==== Общие стили карточек ==== */
.grid-3 {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--spacing-gap);
}
.card {
  background:var(--clr-card-bg);
  padding:var(--spacing-card-padding);
  border-radius:var(--radius-card);
  box-shadow:0 4px 8px var(--clr-shadow-small),0 8px 16px var(--clr-shadow-large);
  display:flex;
  flex-direction:column;
  transition:transform var(--transition-speed), box-shadow var(--transition-speed);
  position:relative;
  overflow:hidden;
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:0 6px 12px var(--clr-shadow-small),0 12px 24px var(--clr-shadow-large);
}
.card-img-wrap {
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  background:#f9fafb;
  border-radius:var(--radius-card);
  overflow:hidden;
  margin-bottom:16px;
}
.card-img-wrap img {
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:var(--radius-img);
  transform:translate(-50%,-50%) scale(1.2);
  transition:transform .5s ease;
}
.card:hover .card-img-wrap img {
  transform:translate(-50%,-50%) scale(1.16);
}
.icon-overlay {
  position:absolute;
  top:12px; right:12px;
  background:var(--clr-icon-bg);
  width:36px; height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:background var(--transition-speed);
}
.card:hover .icon-overlay {
  background:var(--clr-icon-hover-bg);
}
.card h3 {
  font-size:1.4rem;
  margin-bottom:.5rem;
  color:var(--clr-card-title);
}
.card ul {
  list-style:none;
  padding-left:0;
  margin:0 0 16px;
}
.card ul li {
  position:relative;
  padding-left:28px;
  margin-bottom:8px;
  font-size:.95rem;
  color:var(--clr-card-text);
}
.card ul li::before {
  content:'';
  position:absolute; left:0; top:4px;
  width:12px; height:12px;
  background-color:var(--clr-price-new);
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9 16.17l-3.59-3.59L4 14l5 5 9-9-1.41-1.42z"/></svg>') no-repeat center;
  mask-size:contain;
}
.price {
  margin-top:auto;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  font-size:1.1rem;
}
.price .old {
  text-decoration:line-through;
  color:var(--clr-price-old);
  font-size:.95rem;
}
.price .new {
  color:var(--clr-price-new);
  font-weight:bold;
}
@media(max-width:1024px) {
  .card { padding:20px; }
  .card-img-wrap { aspect-ratio: 4/3; }
  .card h3 { font-size:1.3rem; }
  .card ul li { font-size:.9rem; }
  .price { font-size:1rem; }
  .price .old { font-size:.85rem; }
}
@media(max-width:768px) {
  .card-img-wrap { aspect-ratio:3/4; }
}
@media(max-width:480px) {
  .grid-3 { gap:16px; }
  .card { padding:16px; }
  .card-img-wrap { aspect-ratio:1/1.2; }
  .card h3 { font-size:1.2rem; margin-bottom:.4rem; }
  .card ul li { font-size:.85rem; margin-bottom:6px; padding-left:24px; }
  .price { font-size:.95rem; }
  .price .old { font-size:.8rem; }
  .icon-overlay { width:32px; height:32px; font-size:16px; top:8px; right:8px; }
}