/* Shared controls, panels, tables and catalog utilities. */
.srebro-store {
  .form-control, .btn, .srebro-card__add, .srebro-card__quantity input {
    border-radius: var(--srebro-radius-control);
    transition: border-color var(--srebro-duration-fast) var(--srebro-ease-standard), background-color var(--srebro-duration-fast) var(--srebro-ease-standard), color var(--srebro-duration-fast) var(--srebro-ease-standard), box-shadow var(--srebro-duration-fast) var(--srebro-ease-standard);
  }
  .form-control { min-height: var(--srebro-control-height); border-color: var(--srebro-color-border); box-shadow: none; &:focus { outline: 0; box-shadow: var(--srebro-focus-shadow); } }
  .btn-primary, .btn-primary:active, .btn-primary.active {
    border-color: var(--srebro-color-graphite); background: var(--srebro-color-graphite);
    &:hover, &:focus { border-color: var(--srebro-color-steel); background: var(--srebro-color-steel); }
  }
  .btn-link { color: var(--srebro-color-graphite); &:hover, &:focus { color: var(--srebro-color-steel); } }
  .btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 0; box-shadow: var(--srebro-focus-shadow); }
  .alert, .dropdown-menu, .panel, .well, .thumbnail { border-radius: var(--srebro-radius-card); }
  .dropdown-menu { border-color: var(--srebro-color-line); box-shadow: var(--srebro-shadow-menu); }
  .table > thead > tr > td, .table > thead > tr > th { font-weight: 600; }
  .pagination {
    > li > a, > li > span { border-radius: var(--srebro-radius-control) !important; color: var(--srebro-color-graphite); }
    > .active > span { background: var(--srebro-color-graphite); border-color: var(--srebro-color-graphite); }
  }
  .rating { color: var(--srebro-color-gold); }
  .ocf-btn.ocf-btn-default { border-color: var(--srebro-color-graphite) !important; border-radius: 0 var(--srebro-radius-control) var(--srebro-radius-control) 0 !important; background: var(--srebro-color-graphite) !important; }
}
.srebro-stock {
  display: inline-flex; min-height: 25px; align-items: center; margin: 0 0 var(--srebro-space-2); padding: 3px var(--srebro-space-2);
  border-radius: var(--srebro-radius-pill); background: var(--srebro-color-success-soft); color: var(--srebro-color-success); font-size: var(--srebro-text-sm);
  &.srebro-stock--out, &.srebro-stock--preorder { background: var(--srebro-color-warning-soft); color: var(--srebro-color-warning); }
}
.srebro-buy-disabled {
  display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 13px;
  border: 1px solid var(--srebro-color-gray-400); border-radius: var(--srebro-radius-control); color: var(--srebro-color-muted); font-size: 13px; cursor: not-allowed;
}
#column-left .panel, #column-right .panel, .ocfilter, .ocf-module { border: 1px solid var(--srebro-color-line); border-radius: var(--srebro-radius-card); box-shadow: none; }
.ocfilter {
  .ocfilter-option label, label { color: var(--srebro-color-ink); font-weight: 400; }
  .btn, button { border-radius: var(--srebro-radius-control); background: var(--srebro-color-graphite); color: var(--srebro-color-white); }
  input, select { border-radius: var(--srebro-radius-control); box-shadow: none; }
}
.ocf-selected, .ocfilter-selected { background: var(--srebro-color-porcelain); }
#product-category, #product-search, #product-special {
  .list-group-item { border-color: var(--srebro-color-line); color: var(--srebro-color-ink); }
  .list-group-item.active, .list-group-item.active:hover { border-color: var(--srebro-color-line); background: var(--srebro-color-gray-200); color: var(--srebro-color-graphite); }
  .list-group-item:hover { background: var(--srebro-color-gray-50); color: var(--srebro-color-graphite); }
}
.ocf-container {
  .ocf-filter-header { color: var(--srebro-color-graphite); font-weight: 600; }
  .ocf-value, .ocf-btn {
    border-radius: var(--srebro-radius-control);
    &:hover { border-color: var(--srebro-color-steel); color: var(--srebro-color-steel); }
    &.selected, &.active, &:focus-visible { border-color: var(--srebro-color-steel); background: var(--srebro-color-porcelain); color: var(--srebro-color-graphite); }
  }
  input, select { border-color: var(--srebro-color-border); border-radius: var(--srebro-radius-control); box-shadow: none; }
}
@media (max-width: 767px) { .srebro-store .form-control { min-height: 40px; } }