/* Shared cards and listing presentation for home, category, search and specials. */
.srebro-product-grid { display: flex; flex-wrap: wrap; > .product-layout { display: flex; float: none; margin-bottom: 28px; } }
.product-layout { margin-bottom: 30px; }
.product-thumb {
  height: 100%; border: 0; border-radius: var(--srebro-radius-card); background: transparent; transition: transform var(--srebro-duration-standard) var(--srebro-ease-standard);
  &:hover { transform: translateY(-2px); }
  .image { position: relative; overflow: hidden; border-radius: var(--srebro-radius-card); background: var(--srebro-color-gray-100); img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; } }
  .caption {
    min-height: 115px; padding: 15px 2px 4px;
    h4 { margin: 0 0 7px; font-size: 19px; line-height: 1.24; a { color: var(--srebro-color-graphite); } }
    p { margin: 7px 0; color: var(--srebro-color-muted); font-size: 13px; }
  }
  .price { color: var(--srebro-color-graphite); font: 600 var(--srebro-text-lg) var(--srebro-font-body); .price-old { margin-left: var(--srebro-space-2); color: var(--srebro-color-gray-500); font-size: var(--srebro-text-md); font-weight: 400; text-decoration: line-through; } .price-new { color: var(--srebro-color-price-sale); } }
  .button-group {
    display: flex; gap: var(--srebro-space-2); padding: 0 2px 4px;
    button { height: 40px; padding: 0 13px; border: 1px solid var(--srebro-color-graphite); border-radius: var(--srebro-radius-control); background: var(--srebro-color-graphite); color: var(--srebro-color-white); font-size: 13px; &:hover { border-color: var(--srebro-color-steel); background: var(--srebro-color-steel); } }
  }
}
.srebro-product-card {
  display: flex; min-width: 0; height: 100%; flex: 1 1 auto; flex-direction: column; border: 0; border-radius: var(--srebro-radius-card); background: var(--srebro-color-white);
  .image {
    position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--srebro-radius-card); background: var(--srebro-color-porcelain);
    > a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
    img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--srebro-duration-standard) var(--srebro-ease-standard); }
  }
  &:hover .image img { transform: scale(1.025); }
  .caption {
    min-height: 0; flex: 1 1 auto; padding: 14px 2px 8px;
    h3 { display: -webkit-box; min-height: 42px; margin: 0 0 10px; overflow: hidden; font: 400 18px/1.25 var(--srebro-font-display); -webkit-box-orient: vertical; -webkit-line-clamp: 2; a { color: var(--srebro-color-graphite); } }
    .srebro-stock { min-height: 0; margin: 0 0 7px; padding: 0; background: none; color: var(--srebro-color-success); font-size: var(--srebro-text-sm); &.srebro-stock--out, &.srebro-stock--preorder { color: var(--srebro-color-warning); } }
    .price { margin: 0; color: var(--srebro-color-graphite); font: 700 var(--srebro-text-price)/1.12 var(--srebro-font-body); }
  }
  .price { .price-old { margin-left: var(--srebro-space-2); font-size: 15px; } .price-new { color: var(--srebro-color-price-sale); } }
}
.srebro-card__wishlist {
  position: absolute; top: var(--srebro-space-3); right: var(--srebro-space-3); display: flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--srebro-color-line); border-radius: var(--srebro-radius-circle); background: var(--srebro-overlay-white-94); color: var(--srebro-color-rose-soft); font-size: 17px;
  transition: color var(--srebro-duration-fast), border-color var(--srebro-duration-fast);
  &:hover, &:focus { border-color: var(--srebro-color-rose-border); background: var(--srebro-color-white); color: var(--srebro-color-rose); }
}
.srebro-card__weight {
  position: absolute; right: var(--srebro-space-3); bottom: var(--srebro-space-3); display: inline-flex; min-height: 31px; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--srebro-color-gold-border); border-radius: var(--srebro-radius-pill); background: var(--srebro-overlay-white-96);
  color: var(--srebro-color-gold-deep); font-size: var(--srebro-text-sm); font-weight: 700; line-height: 1.2;
  .fa { font-size: var(--srebro-text-sm); }
}
.srebro-card__purchase { display: flex; align-items: stretch; gap: var(--srebro-space-2); padding: 0 2px 3px; }
.srebro-card__quantity {
  flex: 0 0 68px; margin: 0;
  .form-control { height: var(--srebro-control-height); padding: 6px 4px; border: 1px solid var(--srebro-color-input-line); border-radius: var(--srebro-radius-control); background: var(--srebro-color-white); box-shadow: none; color: var(--srebro-color-graphite); font-size: 15px; text-align: center; }
}
.srebro-card__add {
  display: inline-flex; min-width: 0; min-height: var(--srebro-control-height); flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--srebro-space-2);
  padding: 0 var(--srebro-space-3); border: 1px solid var(--srebro-color-silver); border-radius: var(--srebro-radius-control); background: var(--srebro-color-white);
  color: var(--srebro-color-graphite); font: 600 var(--srebro-text-md) var(--srebro-font-body);
  transition: color var(--srebro-duration-fast), border-color var(--srebro-duration-fast), background var(--srebro-duration-fast);
  &:hover, &:focus { border-color: var(--srebro-color-steel); background: var(--srebro-color-gray-50); color: var(--srebro-color-steel); }
  &.srebro-card__add--disabled, &.srebro-card__add--disabled:hover { border-color: var(--srebro-color-gray-300); background: var(--srebro-color-gray-100); color: var(--srebro-color-silver-deep); cursor: not-allowed; }
}
#product-category, #product-search, #product-special { .sorts select, .limits select { border-radius: var(--srebro-radius-control); } }
.ocf-container, .ocfilter, .ocf-module { border-radius: var(--srebro-radius-card); }
@media (max-width: 767px) {
  .srebro-product-grid > .product-layout { margin-bottom: 21px; }
  .product-thumb .caption { min-height: 120px; padding-top: 10px; h4 { font-size: 17px; } }
  .product-thumb .button-group button { padding: 0 9px; }
  .srebro-product-card .caption { padding-top: 10px; h3 { min-height: 40px; font-size: var(--srebro-text-md); } .price { font-size: var(--srebro-text-xl); } }
  .srebro-card__purchase { gap: 6px; }
  .srebro-card__quantity { flex-basis: 56px; .form-control { height: 40px; } }
  .srebro-card__add { min-height: 40px; padding: 0 8px; font-size: 13px; }
}
@media (max-width: 420px) {
  .product-layout { padding-right: 6px; padding-left: 6px; }
  .srebro-card__add { flex: 0 0 42px; }
  .srebro-card__add-label { display: none; }
  .srebro-card__weight { right: var(--srebro-space-2); bottom: var(--srebro-space-2); min-height: 28px; padding: 4px 8px; font-size: var(--srebro-text-xs); }
  .srebro-card__wishlist { top: var(--srebro-space-2); right: var(--srebro-space-2); width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .srebro-product-card .image img { transition: none; } }