/* 28 Oct: the supplied Codex sidebar reference, in Packaging 100's palette. */
body[data-page="directory"] .directory-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; gap: 28px; }
body[data-page="directory"] .dir-content { min-inline-size: 0; }
body[data-page="directory"] .directory-filter-toolbar { position: sticky; inset-block-start: var(--directory-header-height, 100px); z-index: 12; display: flex; align-items: center; gap: 12px; background: #fff; }
body[data-page="directory"] .directory-filter-toolbar:has(#active-chips:not(:empty)) { padding-block: 8px 12px; }
body[data-page="directory"] #active-chips { display: flex; gap: 6px; min-inline-size: 0; flex-wrap: wrap; }
body[data-page="directory"] #active-chips:empty { display: none; }
body[data-page="directory"] #active-chips .chip { background: #f4f4f5; border: 1px solid #e5e5e7; border-radius: 6px; color: #333; padding: 5px 9px; font-size: 12px; min-block-size: 32px; text-align: start; }
body[data-page="directory"] #active-chips .chip:hover { color: #b50012; border-color: #e60015; }
body[data-page="directory"] .directory-filter-toggle { display: inline-flex; gap: 8px; align-items: center; min-block-size: 44px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #222; font: inherit; font-size: 14px; }
body[data-page="directory"] .directory-filter-toggle[hidden] { display: none; }
body[data-page="directory"] .facets.directory-sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; inset-block-start: calc(var(--directory-header-height, 100px) + var(--directory-toolbar-height, 0px) + 16px); z-index: 3; max-block-size: calc(100dvh - var(--directory-header-height, 100px) - var(--directory-toolbar-height, 0px) - 32px); margin: 0; padding: 12px 10px; border: 1px solid #e9e9eb; border-radius: 10px; background: #f7f7f8; }
body[data-page="directory"] .facets.directory-sidebar[hidden] { display: none; }
.directory-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px 12px; font-size: 13px; font-weight: 600; color: #737377; }
#directory-filter-close { display: none; border: 0; background: transparent; color: #b80012; font: inherit; padding: 6px; cursor: pointer; }
body[data-page="directory"] .directory-sidebar .directory-all { display: flex; align-items: center; gap: 10px; border: 0; min-block-size: 40px; padding: 9px 10px; border-radius: 7px; background: transparent; text-align: start; font-size: 14px; color: #333; cursor: pointer; }
body[data-page="directory"] .directory-sidebar .directory-all[aria-pressed="true"] { background: #e8e8ea; font-weight: 600; }
.directory-sidebar-groups { overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; padding-block-start: 8px; scrollbar-width: thin; scrollbar-gutter: stable; }
body[data-page="directory"] .facets.directory-sidebar .facet { border: 0; border-radius: 0; background: transparent; margin-block: 4px 8px; padding: 0; }
body[data-page="directory"] .facets.directory-sidebar .facet > summary { padding: 8px 10px; min-block-size: 36px; font-size: 12px; line-height: 20px; color: #737377; font-weight: 500; letter-spacing: .02em; }
body[data-page="directory"] .facets.directory-sidebar .facet[open] > summary { color: #737377; }
body[data-page="directory"] .facets.directory-sidebar .facet > :is(.facet-list, #tree-container) { position: static; inset: auto; inline-size: auto; max-inline-size: none; max-block-size: none; overflow: visible; margin: 0; border: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; transform: none; transition: none; animation: none; }
body[data-page="directory"] .facets.directory-sidebar .facet :is(.facet-list, .tree-root) { display: grid; gap: 2px; list-style: none; }
body[data-page="directory"] .facets.directory-sidebar .facet .tree-children { margin: 3px 0 6px 15px; padding: 0 0 0 10px; border-inline-start: 1px solid #dddde1; }
body[data-page="directory"] .facets.directory-sidebar .facet .tree-children[hidden] { display: none; }
body[data-page="directory"] .facets.directory-sidebar .facet .tree-node { gap: 0; }
body[data-page="directory"] .facets.directory-sidebar .facet .tree-toggle { min-inline-size: 24px; min-block-size: 36px; padding: 4px; border-radius: 4px; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt { inline-size: 100%; min-inline-size: 0; min-block-size: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; padding: 8px 10px; color: #3c3c40; background: transparent; box-shadow: none; font-size: 13px; line-height: 18px; text-align: start; font-weight: 400; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt > span:first-child { min-inline-size: 0; overflow-wrap: anywhere; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt .n { flex: none; color: #8a8a8e; font-size: 11px; font-variant-numeric: tabular-nums; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt[aria-pressed="true"] { color: #a60012; background: #f3e8ea; font-weight: 600; box-shadow: none; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt:is(:hover, :focus-visible),
body[data-page="directory"] .directory-sidebar .directory-all:hover { background: #e9e9ec; color: #171719; }
body[data-page="directory"] .facets.directory-sidebar .facet .opt[aria-pressed="true"]:hover { background: #ecdadf; color: #a60012; }
body[data-page="directory"] .directory-sidebar :is(button, summary):focus-visible,
body[data-page="directory"] .directory-filter-toolbar button:focus-visible { outline: 2px solid #e60015; outline-offset: 2px; }

/* One card template: products on white, buildings remain quiet supporting images. */
body[data-page="directory"] .directory-layout .company-card--focused { grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr); padding: 20px; gap: 12px 20px; }
body[data-page="directory"] .directory-layout .company-card--focused .name { font-size: 18px; line-height: 26px; }
body[data-page="directory"] .directory-layout .supplier-gallery { grid-column: 2; grid-row: 2 / 6; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; align-content: flex-start; align-self: start; justify-content: flex-end; }
body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--lead { flex: 0 0 100%; inline-size: 100%; block-size: 176px; aspect-ratio: 16 / 10; padding: 12px; object-fit: contain; border: 1px solid #eeeeef; border-radius: 5px; background: #fff; }
body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--support { flex: 0 0 76px; inline-size: 76px; block-size: 52px; border: 1px solid #ededee; border-radius: 4px; background: #fff; }
body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--support:is(.supplier-media--product, .supplier-media--logo, .supplier-media--document) { object-fit: contain; padding: 3px; }
body[data-page="directory"] .directory-layout .supplier-gallery--context-only { justify-content: flex-end; }
body[data-page="directory"] .directory-layout .supplier-credentials { color: #777; font-size: 12px; }
body[data-page="directory"] .directory-layout .supplier-product-pill { font-size: 12px; padding: 4px 8px; }
body[data-page="directory"] .directory-layout .supplier-market-values { font-size: 13px; }

@media (max-width: 1050px) and (min-width: 801px) {
  body[data-page="directory"] .directory-layout { grid-template-columns: 216px minmax(0, 1fr); gap: 20px; }
  body[data-page="directory"] .directory-layout .company-card--focused { grid-template-columns: minmax(0, 1fr); }
  body[data-page="directory"] .directory-layout .supplier-gallery { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--lead { flex-basis: calc(100% - 92px); inline-size: calc(100% - 92px); block-size: 156px; }
  body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--lead:only-child { flex-basis: 100%; inline-size: 100%; }
}
@media (max-width: 800px) {
  body[data-page="directory"] .directory-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body[data-page="directory"] .directory-filter-toolbar { padding-block: 8px 12px; align-items: flex-start; }
  body[data-page="directory"] #active-chips { flex: 1; max-block-size: 96px; overflow-y: auto; }
  body[data-page="directory"] .facets.directory-sidebar { position: relative; inset-block-start: auto; max-block-size: none; }
  .directory-sidebar-groups { max-block-size: min(55dvh, 480px); }
  #directory-filter-close { display: block; }
  body[data-page="directory"] .directory-layout .company-card--focused { grid-template-columns: minmax(0, 1fr) minmax(180px, .9fr); padding: 16px; gap: 12px 16px; }
  body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--lead { block-size: 152px; }
  body[data-page="directory"] .facets.directory-sidebar .facet :is(.opt, .tree-toggle) { min-block-size: 44px; }
}
@media (max-width: 560px) {
  body[data-page="directory"] .directory-layout .company-card--focused { grid-template-columns: minmax(0, 1fr); }
  body[data-page="directory"] .directory-layout .supplier-gallery { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  body[data-page="directory"] .directory-layout .supplier-gallery .supplier-media--lead { block-size: 172px; }
  body[data-page="directory"] .directory-layout .supplier-market { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="directory"] .directory-sidebar * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

/* Keep the directory a compact working view, as in the chosen sidebar direction. */
body[data-page="directory"] .discovery-hero { display: none; }