/* R74 · Compact catalogue cards; the same product photos also serve detail and comparison.
   The two-ID scope deliberately wins over the inherited inline mobile card layer. */
#demo3 #k4-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}
#demo3 #k4-cards .k4-card:not(.k4-single) {
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  min-width: 0;
  min-height: 0 !important;
  padding: 16px !important;
  border: 1px solid #ced8d2;
  border-radius: 10px !important;
  background: #fff;
  box-shadow: 0 3px 14px #193e4408;
  transform: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
#demo3 #k4-cards .k4-card:hover {
  border-color: #78918a;
  box-shadow: 0 7px 22px #193e4412;
}
#demo3 #k4-cards .k4-card.is-recommended { border-color: #738b78; }
#demo3 #k4-cards .k4-card-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
#demo3 #k4-cards .k4-card-heading { min-width: 0; }
/* Product scale is limited independently of the card width. No forced 4:3 stage. */
#demo3 #k4-cards .k4-card .k4-card-fig {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 168px !important;
  min-height: 0 !important;
  max-height: 168px !important;
  aspect-ratio: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden;
}
#demo3 #k4-cards .k4-card-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 290px !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
  transform: none !important;
}
#demo3 #k4-cards .k4-card-fig svg { width: 80%; height: 80%; max-width: 250px; }
#demo3 #k4-cards .k4-card-name {
  margin: 0 0 4px !important;
  font-size: 23px !important;
  line-height: 1.2 !important;
  color: #193e44;
}
#demo3 #k4-cards .k4-card-type {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #49605f;
}
#demo3 #k4-cards .k4-specs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid #e1e7e2 !important;
}
#demo3 #k4-cards .k4-specs dt {
  margin: 0 0 3px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #546563;
  letter-spacing: .045em !important;
}
#demo3 #k4-cards .k4-specs dd {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: #243a3d;
  overflow-wrap: anywhere;
}
#demo3 #k4-cards .k4-ribbon {
  position: static !important;
  align-self: flex-start;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 4px 7px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: .025em;
}
#demo3 #k4-cards .k4-fit,
#demo3 #k4-cards .k4-why,
#demo3 #k4-cards .k4-checks-box,
#demo3 #k4-cards .k4-checks,
#demo3 #k4-cards .k4-why-reason {
  font-size: 15px !important;
  line-height: 1.5 !important;
}
#demo3 #k4-cards .k4-fit { margin: 0 !important; padding: 0 !important; }
#demo3 #k4-cards .k4-why { min-height: 44px !important; padding: 5px 0 !important; }
#demo3 #k4-cards .k4-checks-box { padding: 12px !important; }
#demo3 #k4-cards .k4-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px 8px !important;
  margin-top: auto !important;
  padding-top: 2px;
}
#demo3 #k4-cards .k4-card-actions .k4-btn {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 10px !important;
  border-radius: 6px;
  font-size: 15px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: break-word;
}
#demo3 #k4-cards [data-k4-details] {
  grid-column: 1 / -1;
  border: 1px solid #193e44;
  background: #193e44;
  color: #fff;
  font-weight: 600;
}
#demo3 #k4-cards [data-k4-details]:hover { background: #2e5759; }
#demo3 #k4-cards [data-k4-compare],
#demo3 #k4-cards [data-k4-save] {
  border: 1px solid transparent;
  background: transparent;
  color: #365956;
  box-shadow: none;
  font-weight: 500;
}
#demo3 #k4-cards [data-k4-compare]:hover,
#demo3 #k4-cards [data-k4-save]:hover { background: #f0f4ef; color: #193e44; }
#demo3 #k4-cards .k4-card-actions [aria-pressed="true"] {
  border-color: #a8bcad;
  background: #e7eee7;
  color: #254733;
}
#demo3 #k4-cards button:focus-visible { outline: 3px solid #9c641f; outline-offset: 3px; }
/* A single match and the product detail retain a generous product view. */
#demo3 #k4-cards .k4-single {
  grid-column: 1 / -1;
  display: block !important;
  padding: 22px !important;
  background: #fff;
}
#demo3 #k4-cards .k4-single-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr) !important;
  gap: 24px;
}
#demo3 #k4-cards .k4-single .k4-card-fig { height: 260px !important; max-height: 260px !important; }
#demo3 #k4-cards .k4-single .k4-card-img { max-width: 100% !important; }
#demo3 #k4-cards .k4-single .k4-card-name { margin-top: 12px !important; }
#demo3 #k4-cards .k4-single .k4-specs { margin: 16px 0 !important; }
#demo3 #k4-modal-body .k4-detail-grid .k4-card-fig {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px !important;
  background: #fff !important;
}
#demo3 #k4-cards[hidden],
#demo3 #k4-cards [hidden] { display: none !important; }
@media (max-width: 600px) {
  #demo3 #k4-cards { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  #demo3 #k4-cards .k4-card:not(.k4-single) { padding: 14px !important; gap: 11px !important; }
  #demo3 #k4-cards .k4-card-overview {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }
  #demo3 #k4-cards .k4-card:not(.k4-single) .k4-card-fig {
    height: 104px !important;
    max-height: 104px !important;
    width: 112px !important;
  }
  #demo3 #k4-cards .k4-card-name { font-size: 21px !important; }
  #demo3 #k4-cards .k4-single { padding: 16px !important; }
  #demo3 #k4-cards .k4-single-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
  #demo3 #k4-cards .k4-single .k4-card-fig { height: 220px !important; max-height: 220px !important; }
  #demo3 #k4-modal-body .k4-detail-grid .k4-card-fig { height: 220px !important; }
}
@media (max-width: 360px) {
  #demo3 #k4-cards .k4-card-overview { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  #demo3 #k4-cards .k4-card:not(.k4-single) .k4-card-fig { width: 88px !important; height: 88px !important; max-height: 88px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #demo3 #k4-cards .k4-card { transition: none !important; }
}
@media (forced-colors: active) {
  #demo3 #k4-cards .k4-card { border-color: CanvasText; box-shadow: none; }
  #demo3 #k4-cards .k4-card-actions .k4-btn { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
}
@media print {
  #demo3 #k4-cards .k4-card-actions,
  #demo3 #k4-cards .k4-why { display: none !important; }
  #demo3 #k4-cards .k4-card { break-inside: avoid; box-shadow: none; }
}