/*
 * Shared product-card foundation.
 *
 * This layer owns semantic structure, interaction surfaces and content
 * containment only. Viewport geometry belongs exclusively to mobile.css or
 * desktop.css so a mobile density change cannot silently alter desktop cards.
 */

.product-card.product-card--responsive {
  --budscho-product-card-active-contract: foundation;
  box-sizing: border-box;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100%;
  min-height: 0 !important;
  overflow: visible;
}

:is(#mfilter-content-container, #product-search, #product-special, .account-wishlist) .col-grid {
  box-sizing: border-box;
  display: flex !important;
}

.product-card--responsive .product-card-image {
  position: relative;
  display: flex !important;
  flex: 0 0 auto;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  padding-top: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  text-align: center !important;
}

.product-card--responsive .product-card-image a,
.product-card--responsive .product-card-image a:focus,
.product-card--responsive .product-card-image a:active {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden !important;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.product-card--responsive .product-card-image a:focus-visible,
.product-card--responsive .product-card-name a:focus-visible {
  outline: 3px solid var(--main-red-color, #f8c630) !important;
  outline-offset: -4px;
  border-radius: 6px;
}

.product-card--responsive .product-card-name a:focus-visible {
  outline-offset: 2px;
  border-radius: 3px;
}

.product-card--responsive .product-card-image img,
.product-card--responsive .product-card-image img:focus,
.product-card--responsive .product-card-image img:focus-visible {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  outline: none;
  border-radius: 5px;
  color: transparent !important;
  font-size: 0 !important;
  user-select: none;
  -webkit-user-drag: none;
}

.product-card--responsive .product-card-image img::selection {
  background: transparent;
}

.product-card--responsive .product-image-badges {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  max-width: calc(100% - 8px);
}

.product-card--responsive .product-image-badges .product-card-label {
  position: static;
  top: auto;
  left: auto;
  max-width: 105px;
}

.product-card--responsive .product-card-code {
  position: absolute !important;
  top: 1px !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2;
  width: auto !important;
  max-width: calc(100% - 112px) !important;
  overflow: hidden !important;
  color: var(--main-text-color, #333);
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 15px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.product-card--responsive .product-card-name {
  flex: 0 0 auto;
  overflow: hidden;
}

.product-card--responsive .product-card-name a {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
}

.product-card--responsive .product-card-group {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0;
}

.product-card--responsive .stok_status_id-7 .product-card-available {
  color: #f03136;
}

.product-card--responsive .stok_status_id-8 .product-card-available {
  color: #e67e00;
}

.product-card--responsive .stok_status_id-9 .product-card-available {
  color: #a3a3a3;
}

.product-card--responsive .product-card-price.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.product-card--responsive .product-card-action {
  margin-right: -12px;
  margin-bottom: -2px;
  margin-left: -12px;
}

.product-card--responsive .product-card-action .btn {
  width: 100% !important;
  min-height: 45px;
}