.device-card, .card { overflow: hidden; border-radius: 14px; }
.device-card .media, .card .media, .device-card .thumb, .card .thumb, 
.device-card figure, .card figure { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; margin: 0; border-radius: 12px; }
.device-card .media::before, .card .media::before,
.device-card .thumb::before, .card .thumb::before,
.device-card figure::before, .card figure::before { content:""; display:block; padding-top: 75%; }
.device-card img, .card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none !important; object-fit: cover; display: block; margin: 0 !important; }

/* === v23 HARD FIX for /devices/ overlapping and overflow === */
.devices-grid, .device-list, .cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  align-items: start;
}

.device-card, .card {
  position: relative;
  overflow: hidden !important;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Ensure the media box clips and keeps aspect */
.device-card .media, .card .media, .device-card .thumb, .card .thumb,
.device-card figure, .card figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
}

/* Kill absolute imgs from previous themes */
.device-card img, .card img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
}

/* Titles/labels spacing */
.device-card h3, .card h3, .device-card p, .card p {
  padding: 12px 10px 16px;
  margin: 0;
}

/* === v24 CONTAIN PATCH: images must always fully fit inside the card === */
/* Card is a clipping context */
.device-card, .card { overflow: hidden !important; border-radius: 14px; }
.device-card .media, .card .media, .device-card .thumb, .card .thumb,
.device-card figure, .card figure {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  background: #f8f7f4; /* paper */
}

/* Reset any legacy absolute positioning or transforms on images */
.device-card img, .card img {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* <— show whole blueprint, never crop */
  object-position: center center !important;
  display: block !important;
  transform: none !important;
}

/* If image находится прямо в .device-card без figure — тоже сработает */
.device-card > img, .card > img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* paper background for cards */
.bg-paper{background-image:url('../assets/img/paper.png');background-size:256px 256px;background-repeat:repeat}