/* ===== SheetReference by DPC — Frontend (Own Horizontal Scroll + Frozen Title) ===== */

/* === SRDPC embed: contain width so the site never gets a horizontal scrollbar === */
.srdpc-embed {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;     /* critical in flex/grid parents */
  overflow-x: hidden;           /* prevent page-wide horizontal scroll */
  contain: inline-size;         /* isolate inline size (modern browsers) */
}

/* If parent is flex/grid, allow this region to shrink instead of expanding page */
.srdpc-embed,
.srdpc-group-wrap,
.srdpc-table-wrap {
  min-width: 0 !important;
}

/* The plugin's own horizontal scroller lives here */
.srdpc-table-wrap,
.srdpc-scrollview {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;  /* only this area scrolls left↔right */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  position: relative;
  /* keep both scrollbars stable if shown */
  scrollbar-gutter: stable both-edges;
}

/* Optional: mobile stickiness rendering stability on iOS.
   IMPORTANT: only applied when NOT in scroll-capped (sticky header) mode —
   a `transform` on any ancestor of a `position: sticky` element breaks
   sticky in every browser, and this table is the direct ancestor of the
   sticky <th> cells. This is what was causing the header to scroll away
   with the rows instead of staying pinned. */
.srdpc-table-wrap:not(.srdpc-scroll-capped) .srdpc-front-table {
  -webkit-transform: translateZ(0);
}

/* —— You can keep your existing column widths, sticky Title, and nowrap rules below —— */

/* === SRDPC: AUTO-SIZE COLUMNS BY CONTENT (override fixed widths) === */
.srdpc-table-wrap col,
.srdpc-scrollview col {
  width: auto !important;
}
/* Ensure all header/data cells auto-size unless explicitly capped */
.srdpc-scrollview > table.srdpc-front-table th,
.srdpc-scrollview > table.srdpc-front-table td,
.srdpc-scrollview > table.srdpc-table th,
.srdpc-scrollview > table.srdpc-table td {
  width: auto !important;
}

/* === SRDPC: mobile scroll reliability tweaks === */
.srdpc-table-wrap,
.srdpc-scrollview {
  /* Let the browser decide direction; do NOT force pan-x */
  touch-action: auto !important;
}

/* === Base table inside the scrollview === */
.srdpc-scrollview > table.srdpc-front-table,
.srdpc-scrollview > table.srdpc-table,
.srdpc-table-wrap.srdpc-scrollview > table.srdpc-front-table,
.srdpc-table-wrap.srdpc-scrollview > table.srdpc-table {
  width: max-content !important;        /* allow table wider than wrapper */
  min-width: max-content !important;    /* avoid stretching to 100% which made tiny columns (like “Open”) look wide */
  display: inline-table !important;     /* resist theme 100% rules */
  table-layout: auto !important;        /* auto-size columns from visible content */
  max-width: none !important;
  border-collapse: separate;
  border-spacing: 6px 6px;              /* small universal gap */
  background: transparent;
  box-sizing: border-box;
}

/* Column width: auto-adjust 5-24 characters with wrapping */
.srdpc-front-table col.srdpc-col-1,
.srdpc-table col.srdpc-col-1 { width: auto; min-width: 5ch; max-width: 24ch; }
.srdpc-front-table col.srdpc-col-2,
.srdpc-table col.srdpc-col-2 { width: auto; min-width: 5ch; max-width: 24ch; }
.srdpc-front-table col.srdpc-col-extra,
.srdpc-table col.srdpc-col-extra { width: auto; min-width: 5ch; max-width: 24ch; }

/* Fallback widths: 5-24 characters with wrapping */
.srdpc-front-table th:first-child,
.srdpc-front-table td:first-child,
.srdpc-table th:first-child,
.srdpc-table td:first-child { min-width: 5ch; max-width: 24ch; width: auto; }
.srdpc-front-table th:nth-child(2),
.srdpc-front-table td:nth-child(2),
.srdpc-table th:nth-child(2),
.srdpc-table td:nth-child(2) { min-width: 5ch; max-width: 24ch; width: auto; }
.srdpc-front-table th:nth-child(n+3),
.srdpc-front-table td:nth-child(n+3),
.srdpc-table th:nth-child(n+3),
.srdpc-table td:nth-child(n+3) { min-width: 5ch; max-width: 24ch; width: auto; }

/* Cells: compact & readable */
.srdpc-front-table th,
.srdpc-front-table td,
.srdpc-table th,
.srdpc-table td {
  box-sizing: border-box;
  padding: 0.40em 0.50rem;
  vertical-align: top;
  line-height: 1.4;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-overflow: ellipsis;
  overflow: hidden;
}

/* subtle vertical divider so columns look distinct */
.srdpc-front-table th + th,
.srdpc-front-table td + td,
.srdpc-table th + th,
.srdpc-table td + td {
  border-left: 1px solid rgba(0,0,0,0.06);
}

/* Headers */
.srdpc-front-table th,
.srdpc-table th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

/* ===== Title column (1st) — auto-adjust 5-24 characters with wrapping ===== */
.srdpc-front-table th:first-child,
.srdpc-front-table td:first-child,
.srdpc-table th:first-child,
.srdpc-table td:first-child {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 5ch !important;
  max-width: 24ch !important;
}

/* Link column (2nd): keep concise, never wrap */
.srdpc-front-table th:nth-child(2),
.srdpc-front-table td:nth-child(2),
.srdpc-table th:nth-child(2),
.srdpc-table td:nth-child(2) {
  white-space: nowrap;
}

/* Extra columns (3rd+): do not wrap → force horizontal scroll */
.srdpc-front-table th:nth-child(n+3),
.srdpc-front-table td:nth-child(n+3),
.srdpc-table th:nth-child(n+3),
.srdpc-table td:nth-child(n+3) {
  white-space: nowrap;
}

/* Links follow font color, hover underline */
.srdpc-front-table td a,
.srdpc-table td a {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}
.srdpc-table-wrap .srdpc-front-table a,
.srdpc-table-wrap .srdpc-front-table a:visited,
.srdpc-scrollview .srdpc-front-table a,
.srdpc-scrollview .srdpc-front-table a:visited,
.srdpc-table-wrap .srdpc-table a,
.srdpc-table-wrap .srdpc-table a:visited,
.srdpc-scrollview .srdpc-table a,
.srdpc-scrollview .srdpc-table a:visited { color: inherit; }
.srdpc-table-wrap .srdpc-front-table a:hover,
.srdpc-table-wrap .srdpc-table a:hover,
.srdpc-scrollview .srdpc-front-table a:hover,
.srdpc-scrollview .srdpc-table a:hover,
.srdpc-table-wrap .srdpc-front-table a:focus,
.srdpc-table-wrap .srdpc-table a:focus,
.srdpc-scrollview .srdpc-front-table a:focus,
.srdpc-scrollview .srdpc-table a:focus { color: inherit; text-decoration: underline; }

/* Pagination */
.srdpc-pagination { margin-top: 10px; }
.srdpc-pagination a {
  display: inline-block;
  padding: 4px 8px;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  text-decoration: none;
}
.srdpc-pagination a.active {
  background: rgba(0,0,0,0.06);
}

/* ===== SAFE FREEZE (Split Title column, transparent, content-sized) ========= */
/* Active only when wrapper has .srdpc-split-active — added by JS on frontend */
.srdpc-table-wrap.srdpc-split-active { position: relative; --srdpc-left-max: 15ch; }

.srdpc-table-wrap.srdpc-split-active .srdpc-freeze { display:flex; gap:0; width:100%; }

/* Left: first (title) column only */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left {
  flex: 0 0 min(var(--srdpc-left-w), var(--srdpc-left-max));
  max-width: min(var(--srdpc-left-w), var(--srdpc-left-max));
  align-self: stretch;
}
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left-inner {
  overflow-x: hidden;  /* never scroll left pane horizontally */
}
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left table {
  width: max-content !important;
  min-width: 0 !important;
  display: inline-table !important;
  table-layout: auto !important;  /* auto-fit */
}
/* Make the left column look identical to the original */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left td:first-child {
  white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important;
  position: static !important; left: auto !important; z-index: auto !important; box-shadow: none !important;
  background: inherit !important;
}

/* Right: original table wrapped; scroll starts at column 2 */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right { flex:1 1 auto; min-width:0; align-self:stretch; }
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll.srdpc-scrollview {
  display:block; width:100%; max-width:100%;
  overflow-x:auto !important; overflow-y:visible !important;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x;
  min-height:1px;
}
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table {
  width:max-content !important; min-width:max-content !important; display:inline-table;
  table-layout:auto !important; border-collapse:separate !important; border-spacing:6px 6px !important; /* match the left side */
}
/* Hide first column only inside the right/original table */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table td:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table td:first-child {
  display:none !important;
}

/* Auto-size columns to content inside both panes */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze table { table-layout:auto !important; }
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze th,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze td { width:auto !important; }

/* Links/URLs follow text color */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze a,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze a:visited { color: inherit; }
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze a:hover,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze a:focus { text-decoration: underline; }

/* ====== Helpful utilities ====== */
.srdpc-hidden { display:none !important; }
.srdpc-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; }

/* ==== SRDPC MOBILE 15ch CAP (append-only; desktop unchanged) ================= */
/* Cap title column to ~15 characters, but let it auto-fit content up to that */
.srdpc-table-wrap.srdpc-split-active { --srdpc-left-max: 15ch; }

@media (max-width: 768px) {
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll { touch-action: pan-x; }
}

/* ==== END SRDPC MOBILE 15ch CAP ============================================== */

/* Title column: 5-24 characters with wrapping */
.srdpc-scrollview > table.srdpc-front-table th:first-child,
.srdpc-scrollview > table.srdpc-front-table td:first-child,
.srdpc-scrollview > table.srdpc-table th:first-child,
.srdpc-scrollview > table.srdpc-table td:first-child {
  min-width: 5ch !important;
  max-width: 24ch !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
/* === SRDPC: Width auto-adjust & Title cap (append-only override) ============ */
/* Make the browser size columns from visible text, not URLs/colgroup presets */
.srdpc-scrollview > table.srdpc-front-table,
.srdpc-scrollview > table.srdpc-table {
  table-layout: auto !important;
  width: max-content !important;   /* table can be wider than wrapper */
  max-width: none !important;
  display: inline-table !important;
}

/* Neutralize any hard column widths so auto-sizing can work */
.srdpc-scrollview col,
.srdpc-table-wrap col {
  width: auto !important;
}
.srdpc-scrollview > table.srdpc-front-table th,
.srdpc-scrollview > table.srdpc-front-table td,
.srdpc-scrollview > table.srdpc-table th,
.srdpc-scrollview > table.srdpc-table td {
  width: auto !important;
}

/* Title (1st col): auto-adjust 5-24 characters with wrapping */
.srdpc-scrollview > table.srdpc-front-table th:first-child,
.srdpc-scrollview > table.srdpc-front-table td:first-child,
.srdpc-scrollview > table.srdpc-table th:first-child,
.srdpc-scrollview > table.srdpc-table td:first-child {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 5ch !important;
  max-width: 24ch !important;
}

/* Link column (2nd): never wrap, so width follows visible text like “Open” */
.srdpc-scrollview > table.srdpc-front-table th:nth-child(2),
.srdpc-scrollview > table.srdpc-front-table td:nth-child(2),
.srdpc-scrollview > table.srdpc-table th:nth-child(2),
.srdpc-scrollview > table.srdpc-table td:nth-child(2) {
  white-space: nowrap !important;
}

/* Extra columns (3rd+): do not wrap — user scrolls horizontally */
.srdpc-scrollview > table.srdpc-front-table th:nth-child(n+3),
.srdpc-scrollview > table.srdpc-front-table td:nth-child(n+3),
.srdpc-scrollview > table.srdpc-table th:nth-child(n+3),
.srdpc-scrollview > table.srdpc-table td:nth-child(n+3) {
  white-space: nowrap !important;
}
/* === SRDPC: ALIGN LEFT (TITLE) WITH SCROLL VIEW + RESTORE SCROLLER ========== */

/* Make sure the plugin scrollers are enabled (incl. laptop/desktop) */
.srdpc-table-wrap,
.srdpc-scrollview,
.srdpc-freeze-right-scroll {
  overflow-x: auto !important;
  width: 100%;
  max-width: 100%;
}

/* When split/frozen is active, force both halves to use the SAME table model */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table {
  /* identical border model keeps row heights identical */
  border-collapse: separate !important;
  border-spacing: 6px 6px !important; /* match both sides */
  display: inline-table !important;   /* match both sides */
  table-layout: auto !important;      /* size from content */
}

/* Hide the duplicate first column in the right/original table (safety) */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table td:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table td:first-child {
  display: none !important;
}

/* Title column: auto-fit but never exceed ~15 characters (hard cap) */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left td:first-child,
.srdpc-scrollview > table.srdpc-front-table th:first-child,
.srdpc-scrollview > table.srdpc-front-table td:first-child,
.srdpc-scrollview > table.srdpc-table th:first-child,
.srdpc-scrollview > table.srdpc-table td:first-child {
  max-width: 15ch !important;              /* ≈ 15 letters */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
/* === SRDPC FINAL GUARDS: Title auto-fit with hard cap ≈ 15 characters ======= */

/* Always define the cap token on the wrapper */
.srdpc-table-wrap.srdpc-split-active { --srdpc-left-max: 15ch; }

/* First column cells — split or not — auto-fit content but never exceed ~15ch */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left td:first-child,
.srdpc-scrollview > table.srdpc-front-table th:first-child,
.srdpc-scrollview > table.srdpc-front-table td:first-child,
.srdpc-scrollview > table.srdpc-table th:first-child,
.srdpc-scrollview > table.srdpc-table td:first-child {
  max-width: 15ch !important;
  width: auto !important;               /* allow shrink-to-fit when shorter */
  white-space: normal !important;       /* wrap if longer than the cap */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
/* === SRDPC: Use stable pixel cap from JS (append-only) ====================== */
.srdpc-table-wrap.srdpc-split-active {
  /* default fallback if JS hasn’t run yet */
  --srdpc-title-cap: 15ch;
  --srdpc-left-max: var(--srdpc-title-cap);
}

/* First column cells — split or not — never exceed the cap */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left th:first-child,
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left td:first-child,
.srdpc-scrollview > table.srdpc-front-table th:first-child,
.srdpc-scrollview > table.srdpc-front-table td:first-child,
.srdpc-scrollview > table.srdpc-table th:first-child,
.srdpc-scrollview > table.srdpc-table td:first-child {
  max-width: var(--srdpc-title-cap) !important;
}

/* Left pane width = min(measured content, cap) — cannot exceed cap */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left {
  flex: 0 0 min(var(--srdpc-left-w), var(--srdpc-left-max)) !important;
  max-width: min(var(--srdpc-left-w), var(--srdpc-left-max)) !important;
  width: auto !important;
}

@media (min-width: 1024px) {
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll,
  .srdpc-scrollview {
    /* Center the table horizontally on desktop, keep horizontal scroll behavior */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-gutter: stable;

    /* cancel the left-anchoring that was blocking centering */
    text-align: initial !important;
  }

  /* Ensure the inner table stays content-sized and doesn't stretch */
  .srdpc-scrollview > table.srdpc-front-table,
  .srdpc-scrollview > table.srdpc-table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll > table.srdpc-front-table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll > table.srdpc-table {
    flex: 0 0 auto;
  }
}

/* === SRDPC: right-edge breathing room so characters don't get cut === */
.srdpc-scrollview {
  /* Logical + physical for broad browser support */
  padding-inline-end: 3ch;
  padding-right: 3ch;
}

/* When split/frozen layout is active, the right half is the scroller. */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll {
  padding-inline-end: 3ch;
  padding-right: 3ch;
}

/* === SRDPC: laptop floors so columns 2+ don’t collapse ==================== */
@media (min-width: 992px) {
  :root { --srdpc-col-min: 8ch; } /* tweak between 8ch and 16ch if you want */

  /* Non-split view */
  .srdpc-scrollview > table.srdpc-front-table th:nth-child(n+2),
  .srdpc-scrollview > table.srdpc-front-table td:nth-child(n+2),
  .srdpc-scrollview > table.srdpc-table th:nth-child(n+2),
  .srdpc-scrollview > table.srdpc-table td:nth-child(n+2),
  /* Split right side */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table th:nth-child(n+2),
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-front-table td:nth-child(n+2),
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table th:nth-child(n+2),
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table.srdpc-table td:nth-child(n+2) {
    min-width: var(--srdpc-col-min) !important;
    white-space: nowrap !important;
  }
}

.srdpc-scrollview > table.srdpc-front-table th:nth-child(n+2),
.srdpc-scrollview > table.srdpc-front-table td:nth-child(n+2),
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table th:nth-child(n+2),
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table td:nth-child(n+2) {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Clip spans (inserted by JS) hard-cap to 70 characters */
.srdpc-clip {
  display: inline-block;
  max-width: 70ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop-only: let the right pane actually use the available width */
@media (min-width: 1024px) {
  .srdpc-table-wrap { display: flex; align-items: stretch; }
  .srdpc-freeze-left  { flex: 0 0 auto; }
  .srdpc-freeze-right { flex: 1 1 auto; min-width: 0 !important; max-width: none !important; }
  .srdpc-scrollview   { width: 100% !important; min-width: 0 !important; }
}

/* Mobile/tablet: a table that fits without needing horizontal scroll
   (no .srdpc-has-scroll) previously sat flush left with empty space on
   the right. Center it, matching the desktop-only centering above. */
@media (max-width: 1023px) {
  .srdpc-scrollview:not(.srdpc-has-scroll) {
    display: flex !important;
    justify-content: center !important;
  }
}

/* === SRDPC: Photo + Description blocks =================================== */
.srdpc-media { margin-bottom: 12px; }
.srdpc-photo { width: 100%; }
.srdpc-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;       /* stays square */
  object-fit: cover;         /* crops oversized images elegantly */
  border-radius: 8px;
}
.srdpc-desc { margin-top: 8px; line-height: 1.5; }

/* Desktop-only target ~450px without constraining mobile */
@media (min-width: 1024px) {
  .srdpc-photo { max-width: 450px; }
}

/* Ensure right/scrolling area uses full available width on desktop (mobile unchanged) */
/* These complement your existing freeze/scroll CSS without touching right/title widths */
@media (min-width: 1024px) {
  .srdpc-group-wrap,
  .srdpc-sheet-wrap { width: 100%; }

  .srdpc-table-wrap { display: flex; align-items: stretch; }
  .srdpc-freeze-left  { flex: 0 0 auto; }
  .srdpc-freeze-right { flex: 1 1 auto; min-width: 0 !important; max-width: none !important; }
  .srdpc-scrollview   { width: 100% !important; min-width: 0 !important; }
}

/* === Alignments for Group Ref controls (desktop only visual) ============== */
@media (min-width: 1024px) {
  /* Center the SELECT so it lines up with centered pagination */
  .srdpc-group-wrap .srdpc-group-select { display: block; margin: 8px auto; }
  /* Center the pagination row */
  .srdpc-pagination { text-align: center; }
  .srdpc-pagination a { margin-left: 4px; margin-right: 4px; }
}

/* === SRDPC: Desktop side-by-side photo + description ===================== */
@media (min-width: 1024px) {
  .srdpc-media, .srdpc-group-media {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: nowrap;
  }
  .srdpc-media .srdpc-photo,
  .srdpc-group-media .srdpc-photo {
    flex: 0 0 auto;
    max-width: 450px;
  }
  .srdpc-media .srdpc-desc,
  .srdpc-group-media .srdpc-desc,
  .srdpc-media .srdpc-desc-wrap,
  .srdpc-group-media .srdpc-desc-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* The description + "Show more/less" button stack vertically as one
   unit (button directly below the text) regardless of viewport — this
   wrapper is what keeps the button out of the desktop side-by-side
   photo/description flex row above, where it would otherwise become
   its own separate flex item and land beside the photo instead of
   under the truncated text. */
.srdpc-desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.srdpc-desc-wrap .srdpc-desc-toggle {
  align-self: flex-start;
}

/* === SRDPC: Center dropdown & columns containers ======================== */
.srdpc-select, .srdpc-group-select, .srdpc-dropdown, .srdpc-controls {
  text-align: center !important;
}
.srdpc-select select, .srdpc-group-select select, .srdpc-dropdown select {
  display: inline-block !important;
}
.srdpc-columns, .srdpc-table-wrap, .srdpc-grid, .srdpc-rows, .srdpc-table {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === SRDPC: Center title column + scrollview together on desktop =========
   Align the frozen left "title" column with the scrollable right block by
   centering the *whole group* (.srdpc-table-wrap) when split mode is active.
   Keeps mobile untouched and preserves horizontal scrolling. */
@media (min-width: 1024px) {
  /* 1) Treat the split wrap as a centered flex row (group = left + right) */
  .srdpc-table-wrap.srdpc-split-active {
    display: flex !important;
    justify-content: center !important;   /* center the entire group */
    align-items: flex-start !important;
    gap: 0 !important;
  }

  /* 2) Left frozen column and right scroller should size to content */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left-scroll,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll,
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview {
    flex: 0 0 auto !important;
  }

  /* 3) The right scroller shrinks to its content but won't exceed the viewport.
        This keeps the table scroll working while allowing true centering. */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll,
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview {
    display: block !important;            /* cancel any 'flex center' on inner table */
    width: fit-content !important;        /* shrink to content size */
    max-width: calc(100% - var(--srdpc-freeze-left-w, 0px)) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* 4) Ensure the inner table stays content-sized, not 100% stretched */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll > table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview > table,
  .srdpc-table-wrap.srdpc-split-active table.srdpc-front-table {
    width: max-content !important;
    margin: 0 !important;
  }
}

/* === SRDPC: DESKTOP — center title column + scroll view as one unit ========
   Rationale: existing desktop rules set the right half to flex:1 and width:100%,
   which forces the group to stretch full width and sit on the left. This block
   makes the split wrapper content-sized and centers it; the right half no longer
   grows, so the left+right group can truly center.
*/
@media (min-width: 1024px) {
  /* Make the split wrapper shrink-to-content and center it */
  .srdpc-embed .srdpc-table-wrap.srdpc-split-active {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: flex-start !important; /* children are content-sized anyway */
    align-items: flex-start !important;
    gap: 0 !important;
  }

  /* Disable "grow" on the right so it doesn't stretch to full width */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* The right scroller should also be content-sized (but scroll if wider) */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll {
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - 48px - min(var(--srdpc-left-w, 0px), var(--srdpc-left-max, 15ch))) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure both inner tables remain content-sized and visually identical */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table {
    width: max-content !important;
    min-width: max-content !important;
    display: inline-table !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 6px 6px !important;
  }

  /* Safety: if some theme rule sets the scroller to 100% width, undo it */
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview {
    width: fit-content !important;
    max-width: 100% !important;
  }
}

/* === SRDPC: FINAL DESKTOP CENTERING (title + scroll as one unit) =========
   This block centers the whole split group even if a parent uses flex/grid
   and forces children to the left. It makes the split wrapper content-sized
   and centers it via 50%/translate(-50%) so parent justify-content/width:100%
   rules can’t anchor it left.
*/
@media (min-width: 1024px) {
  /* Ensure the top embed container doesn't fight our centering */
  .srdpc-embed {
    --srdpc-center-pad: 0px;
  }

  /* Center the entire split group as a single unit */
  .srdpc-embed .srdpc-table-wrap.srdpc-split-active {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 0 !important;
  }

  /* Scroll view (sticky header) on desktop: center using margin auto
     instead of the transform above. A `transform` on any element sits
     between its sticky descendants and the true scrolling viewport in a
     way some browsers handle inconsistently — removing it here for the
     one case that actually uses sticky headers avoids that risk entirely. */
  .srdpc-embed .srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped {
    display: flex !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent the right side from stretching the group to full width */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right-scroll,
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Left frozen column stays content-sized */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left-scroll {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  /* Keep tables content-sized; don't let 'width:100%' creep back in */
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-freeze-right table,
  .srdpc-table-wrap.srdpc-split-active .srdpc-scrollview > table {
    width: max-content !important;
    min-width: max-content !important;
    display: inline-table !important;
  }
}

/* Friendly, on-brand error message (replaces raw debug dumps previously shown to visitors) */
.srdpc-error-msg {
  background: #fdf2f2;
  border: 1px solid #f3caca;
  color: #7a2020;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin: 10px 0;
}

/* ============================================================
   SEARCH BAR + LIVE SUGGESTIONS (Group Ref)
   ============================================================ */
.srdpc-group-search-wrap {
  position: relative;
  max-width: 480px;
  margin: 0 auto 10px;
}
.srdpc-group-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  font-size: 14px;
}
.srdpc-group-search:focus {
  outline: none;
  border-color: rgba(0,0,0,0.4);
}
.srdpc-search-suggestions {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  text-align: left;
}
.srdpc-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.srdpc-suggestion-item:last-child { border-bottom: none; }
.srdpc-suggestion-item:hover,
.srdpc-suggestion-item.srdpc-suggestion-active {
  background: rgba(0,0,0,0.06);
}
.srdpc-suggestion-item mark {
  background: rgba(255, 214, 0, 0.55);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.srdpc-suggestion-empty {
  padding: 10px 12px;
  font-size: 13px;
  opacity: .65;
  text-align: left;
}

/* ============================================================
   SCROLLABLE TABLE VIEW (opt-in: Settings > Table Scroll Height)
   Off by default on existing installs unless a height is set.
   ============================================================ */
.srdpc-table-wrap.srdpc-scroll-capped {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
}
/* Header background: Settings > Header Background controls this
   (transparent by default, to follow the theme — set --srdpc-header-bg
   inline via PHP). Applied whether or not scroll view is on, so the
   header always matches; only scroll-capped mode also pins it in place. */
.srdpc-front-table thead th,
.srdpc-table-wrap .srdpc-freeze-left table thead th,
.srdpc-table-wrap .srdpc-freeze-right table thead th {
  background: var(--srdpc-header-bg, transparent) !important;
}
/* Override an older rule that hard-set `position:static !important;
   background:inherit !important;` specifically on the frozen title
   column's header cell — that rule was blocking both sticky positioning
   AND the header color for exactly that column. Matched/exceeded its
   specificity so this wins regardless of source order. */
.srdpc-table-wrap.srdpc-split-active .srdpc-freeze-left thead th:first-child {
  background: var(--srdpc-header-bg, transparent) !important;
}
/* Sticky pinning applies for ANY scroll-capped header — a transparent
   choice gets a plain solid white fallback (srdpc-header-fallback, set
   server-side) specifically while pinned, since a see-through pinned
   header would let scrolled rows visibly pass behind it. Not a blur —
   just a flat, un-blurred fill. */
.srdpc-table-wrap.srdpc-scroll-capped table.srdpc-front-table thead th,
.srdpc-table-wrap.srdpc-scroll-capped .srdpc-freeze-left table thead th,
.srdpc-table-wrap.srdpc-scroll-capped .srdpc-freeze-right table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
}
.srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-left thead th:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
}
.srdpc-table-wrap.srdpc-header-fallback thead th,
.srdpc-table-wrap.srdpc-header-fallback .srdpc-freeze-left thead th:first-child {
  background: var(--srdpc-header-fallback-bg, #ffffff) !important;
}
/* Genuinely seamless color/gradient coloring: in border-spacing:separate
   mode (used throughout this stylesheet for the "card" look), NEITHER a
   cell's NOR the tbody's background ever paints into the gaps BETWEEN
   cells — that space always shows whatever is behind the table itself,
   no matter which element carries the color. The only real fix is to
   remove the spacing entirely when a color is actually in use. Scoped to
   only fire when Header/Entries Background has a real value, so the
   default "cards with small gaps" look stays completely unchanged for
   anyone not using this. High specificity + !important to reliably win
   over the several older border-spacing:6px rules elsewhere in this file. */
.srdpc-table-wrap.srdpc-header-colored.srdpc-scrollview .srdpc-front-table,
.srdpc-table-wrap.srdpc-header-fallback.srdpc-scrollview .srdpc-front-table,
.srdpc-table-wrap.srdpc-body-colored.srdpc-scrollview .srdpc-front-table,
.srdpc-table-wrap.srdpc-header-colored.srdpc-scrollview .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-header-fallback.srdpc-scrollview .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-body-colored.srdpc-scrollview .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-header-colored.srdpc-scrollview .srdpc-freeze-right table,
.srdpc-table-wrap.srdpc-header-fallback.srdpc-scrollview .srdpc-freeze-right table,
.srdpc-table-wrap.srdpc-body-colored.srdpc-scrollview .srdpc-freeze-right table {
  border-spacing: 0 !important;
}
/* Entries (body rows) background: Appearance > Entries Background.
   Applied to the WHOLE tbody area (one continuous background, including
   the gaps between cells) rather than per-cell — this is what makes a
   gradient preset actually look like one gradient instead of being
   sliced into a grid of separately-colored blocks. The header stays
   unaffected because thead is a separate element from tbody, so this
   can't bleed under a transparent header the way a wrap-level background
   would. */
.srdpc-front-table tbody,
.srdpc-table-wrap .srdpc-freeze-left table tbody,
.srdpc-table-wrap .srdpc-freeze-right table tbody {
  background: var(--srdpc-body-bg, transparent) !important;
}
.srdpc-front-table td,
.srdpc-table-wrap .srdpc-freeze-left table td,
.srdpc-table-wrap .srdpc-freeze-right table td {
  background: transparent !important;
}
.srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-left,
.srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-right {
  align-self: flex-start !important;
}

/* Remove the "← scroll →" hint that used to appear between/under columns. */
.srdpc-scroll-hint { display: none !important; }

/* Center and evenly justify the search bar, dropdown, and table together
   so a short title (small dropdown) or a table with few columns (narrow)
   doesn't look off-balance against the others. All three now share the
   same max-width and center as a group. */
.srdpc-group-wrap {
  --srdpc-content-max: 720px;
}
.srdpc-group-picker {
  max-width: var(--srdpc-content-max);
  margin: 0 auto;
  position: relative;
  /* Stack above whatever comes after it so a zoomed catalogue card
     (which can visually grow beyond the carousel's own box) never gets
     covered by, or covers, the next section — see z-index note below. */
  z-index: 2;
}
.srdpc-group-picker .srdpc-group-search-wrap,
.srdpc-group-picker > select.srdpc-group-select {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
  text-align: left;
  position: relative;
  /* The dropdown sits above the carousel in stacking order so a zoomed
     catalogue card can never visually cover it. */
  z-index: 6;
}
.srdpc-group-wrap .srdpc-table-wrap:not(.srdpc-split-active) {
  max-width: var(--srdpc-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   GROUP REF "COVER" (optional intro screen)
   ============================================================ */
.srdpc-group-wrap.srdpc-cover-active .srdpc-group-media {
  margin-bottom: 14px;
}
.srdpc-cover-hint {
  padding: 14px 4px;
  text-align: center;
  opacity: .7;
  font-size: 14px;
}

/* ============================================================
   CATALOGUE STYLE — photo carousel (Group Ref, per-group setting)
   ============================================================ */
.srdpc-catalogue {
  position: relative;
  /* A definite z-index (not "auto") is required here — without it, this
     element doesn't fully isolate its children's stacking, so a card's
     own z-index (up to 20 when zoomed/revealed) leaks out and competes
     directly against SIBLINGS of .srdpc-catalogue itself, like the
     search suggestions box — which is exactly what let a revealed card
     paint above the search suggestions instead of staying contained
     within the carousel's own layer. */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 4px;
  padding: 10px 46px;
  overflow: hidden;
}
/* Revealed state needs room for the zoomed center card to breach the
   carousel's own bounds without being clipped — scaled to the configured
   photo size via calc() so it stays proportional at any size. */
.srdpc-group-wrap.srdpc-cat-revealed .srdpc-catalogue {
  overflow: visible;
  padding-top: calc(var(--srdpc-cat-h, 190px) * 0.4);
  padding-bottom: calc(var(--srdpc-cat-h, 190px) * 0.42);
}
.srdpc-cat-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--srdpc-cat-h, 190px);
  width: 100%;
}
.srdpc-cat-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--srdpc-cat-w, 150px);
  cursor: pointer;
  text-align: center;
  transition: transform .28s ease, opacity .28s ease, filter .28s ease;
  will-change: transform, opacity, filter;
}
.srdpc-cat-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}
.srdpc-cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.srdpc-cat-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.srdpc-cat-title {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.srdpc-cat-card.srdpc-cat-center {
  cursor: pointer;
}
.srdpc-cat-card.srdpc-cat-center .srdpc-cat-photo {
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.srdpc-cat-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: var(--srdpc-arrow-bg, transparent);
  color: var(--srdpc-arrow-color, #fff);
  z-index: 5;
  transition: background .15s ease, transform .15s ease;
}
.srdpc-cat-arrow:hover { transform: translateY(-50%) scale(1.08); }
.srdpc-cat-arrow:disabled { opacity: .3; cursor: default; }
.srdpc-cat-arrow:disabled:hover { transform: translateY(-50%); }
.srdpc-cat-prev { left: 4px; }
.srdpc-cat-next { right: 4px; }

.srdpc-cat-hint {
  text-align: center;
  font-size: 12px;
  opacity: .65;
  margin: 0 0 8px;
}

/* Reveal state: center card zooms slightly when clicked */
.srdpc-cat-card.srdpc-cat-center {
  transition: transform .28s ease, opacity .28s ease, filter .28s ease, box-shadow .2s ease;
}
.srdpc-group-wrap.srdpc-cat-revealed .srdpc-cat-card.srdpc-cat-center {
  transform: translate(-50%,-50%) scale(1.75) !important;
  z-index: 20 !important;
}
.srdpc-group-wrap.srdpc-cat-revealed .srdpc-cat-card.srdpc-cat-center .srdpc-cat-photo {
  box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}

.srdpc-cat-desc-preview {
  max-width: 640px;
  margin: 14px auto 10px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  position: relative;
  z-index: 1;
}

.srdpc-cat-back-wrap {
  text-align: center;
  margin: 0 0 10px;
}

/* Hide arrows (Appearance > Show navigation arrows) without removing the
   feature from the page — clicking cards still works either way. */
.srdpc-catalogue.srdpc-cat-arrows-hidden .srdpc-cat-arrow {
  display: none;
}
.srdpc-catalogue.srdpc-cat-arrows-hidden {
  padding-left: 4px;
  padding-right: 4px;
}

/* Mobile: smaller cards, tighter arrows */
@media (max-width: 640px) {
  .srdpc-catalogue { padding: 8px 36px; }
  .srdpc-cat-track { height: var(--srdpc-cat-h-mobile, 130px); }
  .srdpc-cat-card { width: var(--srdpc-cat-w-mobile, 104px); }
  .srdpc-cat-title { font-size: 11px; }
  .srdpc-cat-arrow { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================================================
   FINAL GUARD: right-pane (columns 2+) sticky header on desktop.
   Works correctly on mobile (no freeze/split there); on desktop with
   the frozen title column active, this stylesheet's iterative history
   left several older, higher-specificity rules that can still interfere
   with position:sticky on the freeze-right pane specifically. This is a
   deliberately over-specific, last-in-file override to guarantee it wins
   regardless of anything above it.
   ============================================================ */
html body .srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-right table.srdpc-front-table thead tr th,
html body .srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-right table.srdpc-table thead tr th {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  transform: none !important;
  will-change: auto !important;
}
/* Whatever container directly wraps the right-pane table must not itself
   introduce a transform, or a second (nested) vertical scroll context —
   either would break sticky for cells inside it. */
html body .srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-right {
  transform: none !important;
  overflow-y: visible !important;
  contain: none !important;
  perspective: none !important;
  filter: none !important;
  will-change: auto !important;
}
html body .srdpc-table-wrap.srdpc-split-active.srdpc-scroll-capped .srdpc-freeze-right table {
  transform: none !important;
  contain: none !important;
  will-change: auto !important;
}

/* ============================================================
   DESCRIPTION TRUNCATION — "Show more / Show less"
   (Appearance > Description Truncation)
   ============================================================ */
.srdpc-desc.srdpc-desc-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--srdpc-desc-lines, 3);
  overflow: hidden;
}
.srdpc-desc.srdpc-desc-clamped.srdpc-desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.srdpc-desc-toggle {
  display: none; /* shown via JS only when the description actually overflows */
  margin: 6px 0 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}
.srdpc-desc-toggle:hover { text-decoration: underline; }
.srdpc-desc-arrow {
  display: inline-block;
  transition: transform .15s ease;
}
.srdpc-desc-toggle.srdpc-desc-open .srdpc-desc-arrow {
  transform: rotate(180deg);
}

/* ============================================================
   FIX: gap at the column 1 / column 2 boundary (frozen title column
   vs. the scrollable pane) when Header/Entries Background is colored.
   Root cause: .srdpc-freeze-left's table uses width:max-content (shrinks
   to its own content), while the containing div has a FIXED width — if
   the title text is narrower than that fixed width, the leftover space
   inside the div was never covered by the table's own background at
   all. Stretching the table to fill its container closes that gap.
   ============================================================ */
.srdpc-table-wrap.srdpc-split-active.srdpc-header-colored .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-split-active.srdpc-header-fallback .srdpc-freeze-left table,
.srdpc-table-wrap.srdpc-split-active.srdpc-body-colored .srdpc-freeze-left table {
  width: 100% !important;
}
/* NOTE: deliberately no div-level background fallback here — a flat color
   on the whole .srdpc-freeze-left div would color BOTH the header and
   body portions of that column the same single color, which is wrong
   whenever Header and Entries Background differ (it was overwriting the
   header portion with the Entries color specifically). With the table
   itself stretched to width:100% above, its own <thead> cells and
   <tbody> already correctly fill the entire column with their own
   respective colors — no extra fallback needed. */

/* ============================================================
   FIX: "Show more" button was completely invisible. Root cause: this
   plugin makes .srdpc-desc a flex item (desktop side-by-side photo +
   description), and flex items default to min-height:auto, which lets
   the box grow to fit ALL content — silently overriding the height
   -webkit-line-clamp needs in order to actually clip anything. Adding
   min-height:0 (the standard fix for this well-known flex + line-clamp
   interaction) lets the clamp take effect at all, which is also why the
   overflow-detection JS could never find anything to reveal a button for.
   ============================================================ */
.srdpc-desc.srdpc-desc-clamped {
  min-height: 0;
  min-width: 0;
}
@media (min-width: 1024px) {
  .srdpc-media .srdpc-desc-wrap,
  .srdpc-group-media .srdpc-desc-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
  }
}

/* Catalogue's description preview gets the same clamp/toggle treatment. */
.srdpc-cat-desc-preview.srdpc-desc-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--srdpc-desc-lines, 3);
  overflow: hidden;
  min-height: 0;
}
.srdpc-cat-desc-preview.srdpc-desc-clamped.srdpc-desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* ============================================================
   STICKY FIRST COLUMN (desktop, replaces the old clone/split system)
   ============================================================
   The previous approach cloned the table and split it into two
   separate divs/tables side by side (one frozen, one horizontally
   scrolling). That's what caused the persistent desktop-only sticky
   header bug: giving the scrolling pane its own overflow-x (needed for
   horizontal scroll) forces browsers to also treat it as a vertical
   scroll boundary per the CSS spec — which breaks position:sticky for
   anything inside it, since sticky needs to resolve against the OUTER
   wrap, not a nested one.

   This replaces that entirely: there's only ever ONE table and ONE
   scroll container (the same one already used for the sticky header),
   exactly like the already-working mobile view. The first column
   freezes via position:sticky (left:0) — the same technique, just on
   the horizontal axis instead of vertical. No cloning, no nested
   scroll context, no conflict.
   ============================================================ */
@media (min-width: 1024px) {
  .srdpc-table-wrap.srdpc-sticky-col .srdpc-front-table th:first-child,
  .srdpc-table-wrap.srdpc-sticky-col .srdpc-front-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--srdpc-sticky-col-bg, var(--srdpc-body-bg, #fff));
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
  }
  .srdpc-table-wrap.srdpc-sticky-col .srdpc-front-table thead th:first-child {
    /* Top-left corner: needs to sit above both the sticky-top header
       row and the sticky-left column, and use the Header (not Entries)
       color/fallback since it IS the header. */
    z-index: 6;
    background: var(--srdpc-sticky-col-header-bg, var(--srdpc-header-bg, #fff));
  }
  /* When the header itself is also pinned (Table Scroll Height on, with
     a real color/gradient), the corner cell needs to be highest of all. */
  .srdpc-table-wrap.srdpc-scroll-capped.srdpc-sticky-col .srdpc-front-table thead th:first-child {
    z-index: 7;
  }
}

/* ============================================================
   TAGS (Sheet Ref alternate titles/keywords) — Settings > Show Tags
   ============================================================ */
.srdpc-media-tags {
  font-size: 12px;
  opacity: .7;
  margin: 4px 0 0;
}
.srdpc-cat-tags {
  font-size: 10px;
  opacity: .65;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.srdpc-suggestion-tag {
  font-size: 12px;
  opacity: .65;
}

/* ============================================================
   VISIBLE SCROLLBAR for the scroll-view entries area (Table Scroll
   Height). Without this, some OS/browser combos auto-hide scrollbars
   until an actual mouse wheel or two-finger gesture is used — awkward
   on a laptop trackpad with no visible handle to just click-drag.
   Narrow and unobtrusive, but always present when content overflows.
   !important on every property: many themes ship a global scrollbar
   -hiding CSS reset (common in "modern minimal" designs) that would
   otherwise silently win over this. */
.srdpc-table-wrap.srdpc-scroll-capped {
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.35) rgba(0,0,0,0.08) !important; /* thumb track — Firefox */
}
.srdpc-table-wrap.srdpc-scroll-capped::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
}
.srdpc-table-wrap.srdpc-scroll-capped::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.08) !important;
  border-radius: 4px !important;
}
.srdpc-table-wrap.srdpc-scroll-capped::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.35) !important;
  border-radius: 4px !important;
  min-height: 24px !important;
}
.srdpc-table-wrap.srdpc-scroll-capped::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5) !important;
}