.skd-library { --skdl-ink:var(--vvp-ds-ink,#263a61); --skdl-muted:var(--vvp-ds-muted,#6c7890); --skdl-soft:var(--vvp-ui-info-bg,#f3f6fb); --skdl-line:var(--vvp-ui-info-line,#dce4ef); --skdl-radius:var(--vvp-ui-info-radius,14px); margin:0 auto;padding:24px 0 56px;color:var(--skdl-ink); }
.skd-library__hero { margin:12px 0 32px; }.skd-library__hero h1 { margin:0 0 14px;font-size:clamp(28px,3vw,38px);line-height:1.2;font-weight:600;letter-spacing:-.025em; }.skd-library__hero p { margin:0;max-width:800px;color:var(--skdl-muted);font-size:16px;line-height:1.65; }
.skd-library__controls { padding:26px;border:0;border-radius:var(--vvp-ds-radius-panel,20px);background:#fff; }.skd-library__search { display:flex;align-items:center;gap:14px;width:100%;max-width:820px;padding:7px 7px 7px 18px;border:1px solid var(--skdl-line);border-radius:999px;background:var(--skdl-soft); }.skd-library__search>svg { flex:none;color:var(--skdl-muted); }.skd-library__search input { flex:1 1 auto;min-width:0;width:100%;min-height:40px;padding:6px 0;border:0;background:transparent;color:var(--skdl-ink);font:inherit;font-size:15px;box-shadow:none;outline:none; }.skd-library__search:focus-within { outline:2px solid var(--vvp-ds-action,#263a61);outline-offset:2px; }.skd-library__search button { flex:none;min-height:44px;padding:10px 24px;border:0;border-radius:999px;background:var(--vvp-ds-action,#263a61);color:#fff;font:inherit;font-weight:500; }.skd-library__search button:hover { background:var(--vvp-ui-hover-bg,#e7ebf0);color:var(--skdl-ink); }
.skd-library__filter-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:24px 0 12px;color:var(--skdl-muted);font-size:13px; }.skd-library__reset { color:var(--skdl-muted);text-decoration:underline;text-underline-offset:3px; }.skd-library__types { display:flex;flex-wrap:wrap;gap:8px; }.skd-library__types a { display:inline-flex;align-items:center;gap:12px;min-height:44px;max-width:100%;padding:10px 16px;border:1px solid transparent;border-radius:999px;background:var(--skdl-soft);color:var(--skdl-muted);font-size:13px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere; }.skd-library__types a span { flex:none;opacity:.8;font-size:12px; }.skd-library__types a[aria-current=page] { background:var(--vvp-ds-action,#263a61);color:#fff; }.skd-library__types a:hover { border-color:var(--skdl-line); }
.skd-library__count { margin:26px 0 18px;color:var(--skdl-muted);font-size:14px; }.skd-library__grid { display:grid;grid-template-columns:repeat(var(--skdl-columns,3),minmax(0,1fr));gap:18px; }.skd-library__card { display:flex;flex-direction:column;gap:16px;min-width:0;padding:26px;border:1px solid var(--skdl-line);border-radius:var(--vvp-ds-radius-panel,20px);background:#fff; }.skd-library__card-top { display:flex;align-items:center;gap:12px; }.skd-library__icon { display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:12px;background:var(--skdl-soft); }.skd-library__kind { color:var(--skdl-muted);font-size:13px;line-height:1.5; }.skd-library__card h2 { margin:0;color:var(--skdl-ink);font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-.015em;overflow-wrap:anywhere; }.skd-library__metadata,.skd-library__products ul { margin:0;padding:0;list-style:none; }.skd-library__metadata { display:grid;gap:5px;color:var(--skdl-muted);font-size:13px;line-height:1.6;overflow-wrap:anywhere; }.skd-library__metadata span { font-weight:500; }.skd-library__products { margin:2px 0 4px; }.skd-library__products p { margin:0 0 7px;color:var(--skdl-muted);font-size:12px; }.skd-library__products li { margin:5px 0; }.skd-library__products a { color:var(--skdl-ink);font-size:14px;line-height:1.6;text-decoration:underline;text-underline-offset:3px; }.skd-library__products details { margin-top:10px; }.skd-library__products summary { cursor:pointer;color:var(--skdl-muted);font-size:13px; }
.skd-library__download { display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;margin-top:auto;padding:13px 18px;border:1px solid transparent;border-radius:var(--vvp-ui-control-radius,12px);background:var(--skdl-soft);color:var(--skdl-ink);font-size:14px;font-weight:500;text-decoration:none; }.skd-library__download:hover { border-color:var(--skdl-line);background:var(--vvp-ui-hover-bg,#e7ebf0);color:var(--skdl-ink); }.skd-library a:focus-visible,.skd-library button:focus-visible { outline:2px solid currentColor;outline-offset:3px; }
.skd-library__empty,.skd-library__message { grid-column:1/-1;padding:32px;border:1px solid var(--skdl-line);border-radius:var(--skdl-radius);background:#fff; }.skd-library__empty h2 { margin:0 0 12px;font-size:22px;font-weight:600; }.skd-library__empty p { margin:0;color:var(--skdl-muted);line-height:1.7; }.skd-library__empty a { display:inline-flex;align-items:center;min-height:44px;margin-top:16px;color:var(--skdl-ink);text-decoration:underline;text-underline-offset:4px; }.skd-library__pagination { display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:30px 0 0; }.skd-library__pagination a { display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px 14px;border-radius:10px;background:#fff;color:var(--skdl-ink); }.skd-library__pagination a[aria-current=page] { background:var(--vvp-ds-action,#263a61);color:#fff; }.skd-library__sr { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:767px) { .skd-library { padding-top:18px; }.skd-library__hero { margin:6px 0 24px; }.skd-library__hero p { font-size:14px; }.skd-library__controls { padding:18px; }.skd-library__search { display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px 10px;padding:12px;border-radius:15px; }.skd-library__search input { min-height:36px;font-size:14px; }.skd-library__search button { grid-column:1/-1;width:100%;margin-top:4px; }.skd-library__filter-heading { margin-top:20px; }.skd-library__types { gap:7px; }.skd-library__types a { font-size:12px;padding:10px 12px; }.skd-library__grid { grid-template-columns:1fr;gap:14px; }.skd-library__card { padding:21px;gap:14px; }.skd-library__card h2 { font-size:18px; }.skd-library__count { margin:22px 0 16px; } }
/* Keep directory card headings consistent with the brand directory, across theme defaults. */
.skd-library h2 { text-transform:none; }
.skd-library h2::after { content:none;display:none; }

/* Server-rendered column preference; no late script or layout mutation. */
.skd-library--columns-1 { --skdl-columns:1; }
.skd-library--columns-2 { --skdl-columns:2; }
.skd-library--columns-3 { --skdl-columns:3; }
.skd-library--columns-4 { --skdl-columns:4; }
.skd-library__card-top { min-width:0; }
.skd-library__kind,.skd-library__products,.skd-library__download { overflow-wrap:anywhere; }
.skd-library__download svg { flex:none; }
@media(min-width:768px) and (max-width:1199px) { .skd-library { --skdl-columns:2; } .skd-library--columns-1 { --skdl-columns:1; } }


/* The page class also supports themes that override the module template. */
.skd-directory-columns-1 .skd-library { --skdl-columns:1; }
.skd-directory-columns-2 .skd-library { --skdl-columns:2; }
.skd-directory-columns-3 .skd-library { --skdl-columns:3; }
.skd-directory-columns-4 .skd-library { --skdl-columns:4; }
@media(min-width:768px) and (max-width:1199px) { .skd-directory .skd-library { --skdl-columns:2; } .skd-directory-columns-1 .skd-library { --skdl-columns:1; } }
