/* ==========================================================================
   Shri LED Digital Sales Catalogue — Catalogue Page Styles
   catalogue.css — supplements css/styles.css (do NOT modify styles.css)

   This file imports no external resources. All design tokens are inherited
   from css/styles.css which is loaded first in catalogue.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page Shell
   -------------------------------------------------------------------------- */

.catalogue-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
}

.catalogue-main {
  flex: 1;
  padding-top: var(--header-height);   /* clear sticky header */
  padding-bottom: var(--space-4xl);
}

/* --------------------------------------------------------------------------
   2. Catalogue Header (sticky, reuses site-header token values)
   -------------------------------------------------------------------------- */

.cat-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-bg-darkest);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}

.cat-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
}

/* Back button */
.cat-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  padding: var(--space-xs) 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.cat-back-btn:hover,
.cat-back-btn:focus-visible {
  color: var(--color-text-primary);
}

.cat-back-btn[hidden] {
  display: none;
}

.cat-back-icon {
  font-style: normal;
  line-height: 1;
}

/* Page title in header */
.cat-header-title {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Home logo link */
.cat-home-link {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.cat-home-link:hover,
.cat-home-link:focus-visible {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   3. Section shared header
   -------------------------------------------------------------------------- */

.cat-section-header {
  margin-bottom: var(--space-2xl);
}

.cat-kicker {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.cat-section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

.cat-section-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   4. Home — Category Grid
   -------------------------------------------------------------------------- */

.cat-home {
  padding: var(--space-2xl) 0;
}

.cat-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .cat-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .cat-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .cat-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cat-section-title {
    font-size: var(--font-size-3xl);
  }
}

/* Category card */
.cat-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    transform var(--transition-normal);
  cursor: pointer;
}

.cat-card:hover,
.cat-card:focus-visible {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
}

.cat-card-icon {
  color: var(--color-accent);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-subtle);
  border-radius: var(--radius-md);
}

.cat-card-body {
  flex: 1;
  min-width: 0;
}

.cat-card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  margin-bottom: var(--space-2xs);
}

.cat-card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
  margin: 0;
}

.cat-card-arrow {
  color: var(--color-text-dim);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.cat-card:hover .cat-card-arrow,
.cat-card:focus-visible .cat-card-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. Types List
   -------------------------------------------------------------------------- */

.cat-types {
  padding: var(--space-2xl) 0;
}

.cat-type-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.cat-type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal);
  cursor: pointer;
}

.cat-type-item:hover,
.cat-type-item:focus-visible {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-accent);
}

.cat-type-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.cat-type-label {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
}

.cat-type-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-dim);
}

.cat-type-arrow {
  color: var(--color-text-dim);
  font-size: var(--font-size-lg);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.cat-type-item:hover .cat-type-arrow,
.cat-type-item:focus-visible .cat-type-arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Project Gallery
   -------------------------------------------------------------------------- */

.cat-gallery {
  padding: var(--space-2xl) 0;
}

.cat-projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 480px) {
  .cat-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .cat-projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cat-project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--transition-normal),
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
  cursor: pointer;
}

.cat-project-card:hover,
.cat-project-card:focus-visible {
  border-color: var(--color-border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.cat-project-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface);
}

.cat-project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.cat-project-card:hover .cat-project-media img {
  transform: scale(1.04);
}

.cat-project-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-dim);
}

.cat-project-count {
  position: absolute;
  bottom: var(--space-xs);
  right: var(--space-xs);
  background-color: rgba(0,0,0,0.65);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-xs);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.cat-project-body {
  padding: var(--space-md);
}

.cat-project-title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  margin: 0 0 var(--space-2xs);
  line-height: var(--line-height-snug);
}

.cat-project-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin: 0;
  line-height: var(--line-height-snug);
}

.cat-empty {
  color: var(--color-text-dim);
  font-size: var(--font-size-base);
  padding: var(--space-2xl) 0;
}

/* --------------------------------------------------------------------------
   7. Project Viewer
   -------------------------------------------------------------------------- */

.cat-viewer {
  padding: var(--space-2xl) 0;
  max-width: 860px;
}

.cat-viewer-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin: var(--space-xs) 0 var(--space-xl);
}

.cat-viewer-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.cat-viewer-image-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.cat-viewer-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 540px;
  object-fit: contain;
  background-color: var(--color-surface);
}

/* Thumbnail strip */
.cat-viewer-thumbs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.cat-thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}

.cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-thumb:hover,
.cat-thumb:focus-visible {
  border-color: var(--color-accent);
}

.cat-thumb.is-active {
  border-color: var(--color-accent);
}

.cat-viewer-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xl);
}

/* WhatsApp enquiry button */
.cat-viewer-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cat-gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.cat-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: #25D366;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.cat-btn-whatsapp:hover,
.cat-btn-whatsapp:focus-visible {
  background-color: #1ebe5d;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   8. Icon in catalogue header
   -------------------------------------------------------------------------- */

.cat-icon {
  display: block;
}

/* --------------------------------------------------------------------------
   9. Footer — minimal
   -------------------------------------------------------------------------- */

.cat-footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-xl) 0;
}

.cat-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cat-footer-brand {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
}

.cat-footer-brand .logo-accent {
  color: var(--color-accent);
}

.cat-footer-copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Responsive tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .cat-card {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .cat-card-icon {
    width: 38px;
    height: 38px;
  }

  .cat-viewer-title {
    font-size: var(--font-size-xl);
  }

  .cat-type-item {
    padding: var(--space-md) var(--space-lg);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-project-card,
  .cat-project-media img,
  .cat-card-arrow,
  .cat-type-arrow,
  .cat-btn-whatsapp {
    transition: none;
    transform: none;
  }
}


/* CSP-safe loading state (avoids inline styles). */
.cat-loading { color: var(--color-text-muted); padding: var(--space-2xl) 0; }

/* --------------------------------------------------------------------------
   11. Professional catalogue refinements
   -------------------------------------------------------------------------- */
.cat-breadcrumbs { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:var(--space-xl) 0 var(--space-lg); color:var(--color-text-dim); font-size:var(--font-size-xs); }
.cat-breadcrumbs a { color:var(--color-text-muted); transition:color var(--transition-fast); }
.cat-breadcrumbs a:hover,.cat-breadcrumbs a:focus-visible { color:var(--color-accent); }
.cat-breadcrumbs span[aria-hidden="true"] { opacity:.55; }

.cat-type-grid { display:grid; grid-template-columns:1fr; gap:var(--space-md); }
@media (min-width:600px) { .cat-type-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .cat-type-grid { grid-template-columns:repeat(3,1fr); } }
.cat-type-card { display:flex; flex-direction:column; overflow:hidden; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); min-height:100%; transition:border-color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal); }
.cat-type-card:hover,.cat-type-card:focus-visible { border-color:var(--color-border-accent); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.cat-type-media { aspect-ratio:3/2; overflow:hidden; background:var(--color-surface); border-bottom:1px solid var(--color-border-subtle); }
.cat-type-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--transition-slow); }
.cat-type-card:hover .cat-type-media img { transform:scale(1.035); }
.cat-type-fallback { width:100%; height:100%; display:grid; place-items:center; color:var(--color-accent); background:linear-gradient(145deg,var(--color-surface),var(--color-card)); }
.cat-type-content { padding:var(--space-lg); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-lg); flex:1; }
.cat-type-label { display:block; margin:0 0 var(--space-xs); font-family:var(--font-display); font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--color-text-white); }
.cat-type-desc { margin:0; color:var(--color-text-muted); font-size:var(--font-size-sm); line-height:var(--line-height-snug); }
.cat-type-cta { display:flex; align-items:center; justify-content:space-between; color:var(--color-accent); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); }

.cat-project-body { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-md); }
.cat-project-open { color:var(--color-accent); font-size:var(--font-size-lg); transition:transform var(--transition-fast); }
.cat-project-card:hover .cat-project-open { transform:translateX(3px); }
.cat-empty { display:flex; flex-direction:column; gap:var(--space-xs); background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-xl); }
.cat-empty strong { color:var(--color-text-white); font-family:var(--font-display); }

.cat-viewer { max-width:980px; }
.cat-viewer-header { margin-bottom:var(--space-lg); }
.cat-viewer-image-wrap { position:relative; min-height:260px; display:grid; place-items:center; }
.cat-viewer-image-wrap img { max-height:680px; }
.cat-viewer-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(10,10,10,.72); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px); font-size:1.1rem; transition:background var(--transition-fast),border-color var(--transition-fast); }
.cat-viewer-nav:hover,.cat-viewer-nav:focus-visible { background:rgba(10,10,10,.92); border-color:var(--color-accent); }
.cat-viewer-prev { left:var(--space-md); }
.cat-viewer-next { right:var(--space-md); }
.cat-viewer-counter { position:absolute; right:var(--space-md); bottom:var(--space-md); padding:.35rem .65rem; border-radius:var(--radius-full); background:rgba(10,10,10,.75); color:#fff; font-size:var(--font-size-xs); backdrop-filter:blur(8px); }
.cat-viewer-thumbs { flex-wrap:nowrap; overflow-x:auto; padding:2px 2px var(--space-xs); scrollbar-width:none; scroll-snap-type:x proximity; }
.cat-thumb { width:96px; height:72px; scroll-snap-align:start; background:var(--color-surface); }
.cat-thumb[aria-current="true"] { border-color:var(--color-accent); }

@media (max-width:599px) {
  .cat-type-grid { gap:var(--space-sm); }
  .cat-type-card { display:grid; grid-template-columns:112px 1fr; min-height:112px; }
  .cat-type-media { aspect-ratio:auto; height:100%; border-bottom:0; border-right:1px solid var(--color-border-subtle); }
  .cat-type-content { padding:var(--space-md); gap:var(--space-sm); }
  .cat-type-label { font-size:var(--font-size-base); }
  .cat-type-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .cat-viewer-nav { width:38px; height:38px; }
  .cat-viewer-prev { left:var(--space-xs); } .cat-viewer-next { right:var(--space-xs); }
  .cat-thumb { width:76px; height:58px; }
}
@media (prefers-reduced-motion:reduce) { .cat-type-card,.cat-type-media img,.cat-project-open,.cat-viewer-nav { transition:none; transform:none; } }

/* Real-work photo galleries */
.cat-detail-intro{max-width:760px}.cat-gallery-meta{display:inline-flex;align-items:baseline;gap:.4rem;margin-top:var(--space-md);padding:.45rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:var(--font-size-xs);background:var(--color-card)}.cat-gallery-meta strong{color:var(--color-accent);font-size:var(--font-size-sm)}.cat-work-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);margin:0 0 var(--space-md)}.cat-work-heading h2{margin:0;color:var(--color-text-white);font-family:var(--font-display);font-size:var(--font-size-lg)}.cat-work-heading p{margin:0;color:var(--color-text-dim);font-size:var(--font-size-xs)}.cat-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}@media(min-width:720px){.cat-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}}.cat-photo-tile{position:relative;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-card);aspect-ratio:4/3;cursor:zoom-in;transition:transform var(--transition-normal),border-color var(--transition-normal),box-shadow var(--transition-normal)}.cat-photo-tile img{width:100%;height:100%;display:block;object-fit:cover;transition:transform var(--transition-slow)}.cat-photo-tile:hover,.cat-photo-tile:focus-visible{transform:translateY(-2px);border-color:var(--color-border-accent);box-shadow:var(--shadow-card-hover)}.cat-photo-tile:hover img{transform:scale(1.025)}.cat-photo-tile.is-hidden{display:none}.cat-photo-number{position:absolute;right:.5rem;bottom:.5rem;padding:.2rem .45rem;border-radius:var(--radius-full);background:rgba(8,8,8,.72);color:#fff;font-size:.68rem;backdrop-filter:blur(6px)}.cat-show-more{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin:var(--space-xl) auto 0;padding:.7rem 1.4rem;border:1px solid var(--color-border-accent);border-radius:var(--radius-full);background:var(--color-card);color:var(--color-text-white);font:600 var(--font-size-sm)/1.2 var(--font-body);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.cat-show-more span{color:var(--color-text-dim);font-size:var(--font-size-xs);font-weight:400}.cat-show-more:hover,.cat-show-more:focus-visible{background:var(--color-surface-hover);transform:translateY(-1px)}body.cat-lightbox-open{overflow:hidden}.cat-lightbox{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:4rem 5rem 2rem;background:rgba(0,0,0,.92);backdrop-filter:blur(10px)}.cat-lightbox figure{margin:0;width:min(1100px,100%);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm)}.cat-lightbox figure img{max-width:100%;max-height:calc(100vh - 9rem);object-fit:contain;border-radius:var(--radius-md)}.cat-lightbox figcaption{display:flex;gap:var(--space-md);color:var(--color-text-muted);font-size:var(--font-size-xs)}.cat-lightbox-count{color:var(--color-text-white);font-weight:600}.cat-lightbox-close,.cat-lightbox-nav{position:absolute;border:1px solid rgba(255,255,255,.2);background:rgba(20,20,20,.72);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px)}.cat-lightbox-close{top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;font-size:1.7rem}.cat-lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;font-size:1.15rem}.cat-lightbox-prev{left:1rem}.cat-lightbox-next{right:1rem}.cat-lightbox-close:hover,.cat-lightbox-close:focus-visible,.cat-lightbox-nav:hover,.cat-lightbox-nav:focus-visible{border-color:var(--color-accent);color:var(--color-accent)}@media(max-width:599px){.cat-work-heading{align-items:start;flex-direction:column;gap:.25rem}.cat-lightbox{padding:4rem .75rem 1.5rem}.cat-lightbox-nav{width:40px;height:40px;top:auto;bottom:1.25rem}.cat-lightbox-prev{left:1rem}.cat-lightbox-next{right:1rem}.cat-lightbox figure img{max-height:calc(100vh - 10rem)}.cat-lightbox figcaption{margin-bottom:3rem}.cat-photo-number{display:none}}@media(prefers-reduced-motion:reduce){.cat-photo-tile,.cat-photo-tile img,.cat-show-more{transition:none;transform:none}}

.cat-noscript{max-width:680px;margin:2rem auto;padding:1rem 1.2rem;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);background:var(--color-card);line-height:1.6}.cat-footer-copy a{color:inherit;text-decoration:underline;text-underline-offset:3px}.cat-footer-copy a:hover,.cat-footer-copy a:focus-visible{color:var(--color-accent)}.cat-image-error{display:grid;place-items:center;min-height:220px;background:var(--color-card);color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-md)}

/* Keep thumbnail scrolling functional without a visible scrollbar. */
.cat-viewer-thumbs::-webkit-scrollbar { display: none; }