/*
 * Product Catalogue - Products module. Every colour is a token. Each one follows the site template's own
 * Bootstrap colours (so the module takes on the template's theme,
 * light or dark, whatever the template does); the value after the
 * comma is Bootstrap 5.3's own, used only where a template sets none.
 * A site may override five of them (buttons, button text, links, lines
 * and the filter titles' background) in the module's Colours settings;
 * a page that needs other colours gets its own module. Contrast is measured on the fallbacks
 * by the build and on a module's overrides on its settings screen.
 */

:root {
  --s4xprodcat-ink: var(--bs-body-color, #212529);
  --s4xprodcat-canvas: var(--bs-body-bg, #FFFFFF);
  --s4xprodcat-panel: var(--bs-tertiary-bg, #F8F9FA);
  --s4xprodcat-muted: var(--bs-secondary-color, #6C757D);
  --s4xprodcat-accent: var(--bs-primary, #0B5ED7);
  --s4xprodcat-on-accent: var(--bs-white, #FFFFFF);
  --s4xprodcat-link: var(--bs-link-color, #0A58CA);
  --s4xprodcat-rule: var(--bs-primary, #0B5ED7);
  --s4xprodcat-border: var(--bs-secondary-color, #6C757D);
  --s4xprodcat-focus: var(--bs-primary, #0B5ED7);
  --s4xprodcat-toast: var(--bs-dark, #212529);
  --s4xprodcat-on-toast: var(--bs-white, #FFFFFF);
  --s4xprodcat-thumb: var(--bs-secondary-bg, #E9ECEF);
}

/* Side padding: half the template's column gutter, so the module sits in
   from the edges as the template's own content does; a module's Side
   padding setting replaces it. */
.s4xprodcat-products {
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.s4xprodcat-products a {
  color: var(--s4xprodcat-link);
}

.s4xprodcat-products :focus-visible {
  outline: 2px solid var(--s4xprodcat-focus);
  outline-offset: 2px;
}

.s4xprodcat-filter-group {
  margin-bottom: 0.75rem;
}

.s4xprodcat-filter-group > summary {
  background: var(--s4xprodcat-panel);
  color: var(--s4xprodcat-ink);
  border-bottom: 2px solid var(--s4xprodcat-rule);
  padding: 0.5rem;
  font-weight: 700;
  cursor: pointer;
}

.s4xprodcat-filter-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.25rem 0.5rem;
}

.s4xprodcat-filter-list li {
  margin: 0.25rem 0;
}

.s4xprodcat-filter-list input {
  border-color: var(--s4xprodcat-border);
  margin-inline-end: 0.5rem;
}

.s4xprodcat-btn {
  background: var(--s4xprodcat-accent);
  color: var(--s4xprodcat-on-accent);
  border: 0;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  display: inline-block;
}

.s4xprodcat-btn:hover,
.s4xprodcat-btn:focus-visible,
.s4xprodcat-products a.s4xprodcat-btn {
  color: var(--s4xprodcat-on-accent);
}

.s4xprodcat-btn[aria-pressed="true"] {
  text-decoration: underline;
}

.s4xprodcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.s4xprodcat-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--s4xprodcat-rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.s4xprodcat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1.5rem;
}

.s4xprodcat-card[hidden],
.s4xprodcat-row[hidden] {
  display: none;
}

.s4xprodcat-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--s4xprodcat-thumb);
}

.s4xprodcat-card-title {
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem;
}

.s4xprodcat-specs {
  margin: 0;
}

.s4xprodcat-specs dt {
  color: var(--s4xprodcat-muted);
  font-weight: 400;
}

.s4xprodcat-specs dd {
  margin: 0 0 0.25rem;
}

.s4xprodcat-list-thumb {
  max-width: 4rem;
}

.s4xprodcat-more {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.s4xprodcat-toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--s4xprodcat-toast);
  color: var(--s4xprodcat-on-toast);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  z-index: 1080;
}

.s4xprodcat-busy {
  opacity: 0.6;
}