/* =========================================================
   Category Page (SCOPED) – modern, mobile-first, accessible
   File: static/css/category_page.css

   IMPORTANT:
   - Scoped to .scharrcat-container to avoid collisions with base.html styles.
   - Does NOT touch :root, body, header, nav, .site-logo, etc.
   - Product images fully visible (contain).
   - Mobile: 2 products per row.
   ========================================================= */

.scharrcat-container{
  --cat-bg: #ffffff;
  --cat-surface: #ffffff;
  --cat-surface-2: #f6f7f8;
  --cat-text: #101828;
  --cat-muted: #475467;
  --cat-border: #e4e7ec;
  --cat-brand: #111111;
  --cat-brand-2: #111111;
  --cat-focus: rgba(17,17,17,0.22);
  --cat-radius: 14px;
  --cat-radius-lg: 18px;
  --cat-shadow: 0 8px 14px -12px rgba(16,24,40,0.28);
  --cat-max: 1200px;

  --s1: 6px;
  --s2: 10px;
  --s3: 14px;
  --s4: 18px;
  --s5: 24px;
  --s6: 32px;

  max-width: var(--cat-max);
  margin: 0 auto;
  padding: var(--s5) var(--s4);
  color: var(--cat-text);

  /* Desktop defaults: readable, "normal" sizes */
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 480px){
  .scharrcat-container{ padding: var(--s4) var(--s3); }
}

.scharrcat-container .scharrcat-visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.scharrcat-container :focus-visible{
  outline: 3px solid var(--cat-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .scharrcat-container *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Breadcrumb */
.scharrcat-container .scharrcat-breadcrumb{
  font-size: 0.92rem;
  color: var(--cat-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--s3);
}

.scharrcat-container .scharrcat-bc-link{
  color: var(--cat-muted);
  text-decoration: none;
  border-radius: 10px;
  padding: 4px 6px; /* a bit more tap-friendly */
}
.scharrcat-container .scharrcat-bc-link:hover{
  color: var(--cat-text);
  background: var(--cat-surface-2);
}
.scharrcat-container .scharrcat-bc-current{
  color: var(--cat-text);
  font-weight: 600;
}
.scharrcat-container .scharrcat-bc-sep{
  opacity: .7;
}