.download-tabs {
  --download-tab-accent: #174f9c;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-block-end: 20px;
  border: 1px solid #d7e0e5;
  border-radius: 14px;
  background: #fff;
}

.download-tabs :is(a, button) {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 6px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: #253745;
  font-size: clamp(12px, 2.5vw, 15px);
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.download-tabs :is(a, button):focus-visible { outline: 2px solid var(--download-tab-accent); outline-offset: 2px; }
.download-tabs :is([aria-current="page"], [aria-selected="true"]) { background: var(--download-tab-accent); color: #fff; }
.download-tabs--catalog { --download-tab-accent: #173f36; }
.download-tabs--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.download-tabs--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.download-tabs--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.download-tab-label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.download-tab-count {
  padding: 1px 5px;
  border-radius: 5px;
  background: #25374514;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.download-tabs [aria-selected="true"] .download-tab-count { background: #ffffff33; }

@media (prefers-reduced-motion: no-preference) {
  .download-tab-panel:not([hidden]) {
    animation: download-tab-enter 220ms ease-out both;
  }
}

@keyframes download-tab-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.download-tabs > :has(> .download-tab-free) {
  position: relative;
  padding-left: 27px;
  overflow: hidden;
}

.download-tab-free {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 29px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: #15803d;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  display: grid;
  place-items: start;
  padding: 3px 0 0 3px;
  direction: ltr;
}

@media (max-width: 639px) {
  .download-tabs .download-tab-count { display: none; }

  .download-tabs {
    display: flex;
    overflow-x: auto;
  }

  .download-tabs > :is(a, button) {
    flex: 1 0 auto;
    white-space: nowrap;
  }

  .download-tabs :is(a, button):focus-visible { outline-offset: -2px; }
}

@media (hover: hover) {
  .download-tabs :is(a, button):not([aria-current="page"], [aria-selected="true"]):hover {
    background: #eef3f5;
    color: #253745;
  }
}

.download-catalog-frame {
  display: block;
  width: 100%;
  height: 1px;
  border: 1px solid #d7e0e5;
  border-radius: 14px;
  background: #fff;
}

html.catalog-embedded { background: #f8fafc; overflow: hidden; }
.catalog-embedded .download-tabs--catalog { display: none; }
.catalog-embedded main { padding: clamp(10px, 2vw, 24px); }
.catalog-embedded main > header { padding: 0; background: transparent; color: #233342; }
.catalog-embedded main > header h1 { font-size: 20px; }
.catalog-embedded main > header p { color: #354656; }
.catalog-embedded main > header a { color: #174f9c; }

.download-catalog-frame { margin-block-end: 84px; scroll-margin-block-end: 84px; }
.catalog-embedded body { padding-bottom: 0; }
.catalog-embedded #pack-bar { display: none; }
.catalog-embedded dialog:is(#pack-dialog, #symbol-details, #sample-preview) {
  position: fixed;
  inset: var(--catalog-dialog-center, 50%) 0 auto;
  margin: 0 auto;
  max-height: var(--catalog-dialog-height, 85vh);
  transform: translateY(-50%);
}

.catalog-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 12px 24px;
}

header.catalog-heading .free-sample {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  max-width: min(100%, 360px);
  margin: 0;
  text-align: left;
}

.free-sample-copy { min-width: 0; }
header .free-sample small { color: #edf5f0; }
.catalog-embedded header .free-sample small { color: #526575; }

@media (max-width: 680px) {
  .catalog-heading { grid-template-columns: minmax(0, 1fr); }
}

.free-sample .sample-thumbnail {
  flex: none;
  width: clamp(56px, 11vw, 76px);
  aspect-ratio: 1;
  padding: 5px;
  border: 1px solid #c7d9d0;
  border-radius: 10px;
  cursor: zoom-in;
}

.sample-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sample-thumbnail:focus-visible { outline: 2px solid #2375bc; outline-offset: 2px; }

#sample-preview {
  box-sizing: border-box;
  width: min(94%, 660px);
  max-height: calc(100dvh - 24px);
  padding: 12px;
  border: 1px solid #c7d9d0;
  border-radius: 16px;
  background: #fff;
  color: #183630;
}

#sample-preview::backdrop { background: #142822a0; }
.sample-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.sample-preview-actions h2 { margin: 0; font-size: 16px; }
.sample-preview-actions button { width: auto; cursor: pointer; }
.sample-preview-image {
  display: block;
  width: 100%;
  height: min(620px, calc(100dvh - 110px));
  object-fit: contain;
  border-radius: 10px;
}
.free-sample .sample-thumbnail,
.sample-preview-image {
  background: conic-gradient(#e6ebed 25%, #fff 0 50%, #e6ebed 0 75%, #fff 0) 0 0 / 16px 16px;
}
.sample-downloads { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.sample-preview-downloads { margin-block-start: 8px; }
.catalog-embedded #sample-preview { max-height: max(120px, calc(var(--catalog-dialog-height, 85vh) - 132px)); }
.catalog-embedded .sample-preview-image { height: clamp(60px, calc(var(--catalog-dialog-height, 85vh) - 240px), 620px); }

.download-pack-bar {
  position: fixed;
  z-index: 30;
  inset: auto 10px max(10px, env(safe-area-inset-bottom));
  max-width: 680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #173f36;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 5px 24px #173f3650;
}

.download-pack-totals { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 13px; }
.download-pack-totals strong { font-size: 15px; }
.download-pack-totals small { flex-basis: 100%; color: #d9efe5; font-size: 12px; }
.download-pack-bar button { min-height: 40px; padding-inline: 12px; border-radius: 999px; background: #fff; color: #173f36; font-size: 13px; font-weight: bold; cursor: pointer; }
.download-pack-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.download-pack-bar .download-pack-clear { background: transparent; color: #fff; border: 1px solid #ffffff80; }
.download-pack-bar .download-pack-clear:disabled { opacity: .5; cursor: default; }

@media (max-width: 420px) {
  .download-pack-bar { padding-inline: 8px; gap: 6px; }
  .download-pack-actions button { padding-inline: 7px; font-size: 11px; }
}

body:has(.download-pack-bar) [data-contact-fab] { display: none; }

.catalog-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  margin: 14px 0 10px;
}

.catalog-filter-search { grid-area: 1 / 1; min-width: 0; }
.catalog-filter-details { display: contents; }
.catalog-filter-details > summary { grid-area: 1 / 2; }
.catalog-filter-details:not([open]) > .catalog-filter-panel { display: none; }
.catalog-filter-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d7e1db;
  border-radius: 10px;
  background: #fff;
}

.catalog-filter-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 45%), 1fr)); gap: 5px 8px; }
.catalog-filter-fields label { display: grid; gap: 2px; min-width: 0; font-size: 11px; line-height: 1.4; }
.catalog-filters :is(input, select, summary) { box-sizing: border-box; min-height: 38px; padding: 4px 8px; font-size: 12px; }
.catalog-filters :is(input, select) { width: 100%; min-width: 0; }
.catalog-filters select { min-height: 34px; }
.catalog-filter-details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #173f36;
  background: #fff;
  border: 1px solid #aebfb5;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.catalog-filter-details > summary::-webkit-details-marker { display: none; }
.catalog-filter-details > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.catalog-filter-details[open] > summary { background: #e5f0e9; }
.catalog-filter-details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.catalog-filters #filter-reset { justify-self: end; width: auto; min-height: 32px; padding: 3px 8px; font-size: 11px; }

.sample-label-compact { display: none; }

header.catalog-heading .catalog-about-trigger {
  display: inline-block;
  width: auto;
  margin-block-start: 4px;
  padding: 3px 9px;
  border: 1px solid #adc5bb;
  border-radius: 7px;
  background: #fff;
  color: #173f36;
  font-size: 12px;
}

#catalog-about {
  box-sizing: border-box;
  width: min(92%, 460px);
  max-height: 85dvh;
  padding: 14px;
  border: 1px solid #c7d9d0;
  border-radius: 14px;
  background: #fff;
  color: #183630;
}

#catalog-about::backdrop { background: #142822a0; }
#catalog-about p { margin: 6px 0 0; font-size: 13px; line-height: 1.8; }
.pack-invoice { max-height: min(80dvh, 560px); overflow: auto; }
.pack-invoice > form { display: inline-block; margin-inline-start: 8px; }
.pack-invoice > button {
  background: #173f36;
  color: #fff;
  min-height: 40px;
}
.pack-invoice > ul { max-height: 32vh; overflow: auto; }
.catalog-embedded .pack-invoice {
  position: fixed;
  inset: var(--catalog-dialog-center, 50%) 0 auto;
  margin: 0 auto;
  max-height: var(--catalog-dialog-height, 80vh);
  transform: translateY(-50%);
}
.catalog-embedded #catalog-about {
  position: fixed;
  inset: var(--catalog-dialog-center, 50%) 0 auto;
  margin: 0 auto;
  max-height: var(--catalog-dialog-height, 85vh);
  transform: translateY(-50%);
}

@media (max-width: 639px) {
  header.catalog-heading { gap: 8px; }
  header.catalog-heading h1 { margin-block: 0 3px; font-size: 18px; line-height: 1.4; }
  header.catalog-heading p { margin: 0; font-size: 12px; line-height: 1.55; }
  header.catalog-heading .free-sample {
    flex-direction: row-reverse;
    justify-self: start;
    max-width: 100%;
    gap: 8px;
    text-align: start;
  }

  .free-sample .sample-thumbnail { flex: 0 0 44px; width: 44px; padding: 3px; }
  .free-sample .sample-downloads { gap: 4px 6px; }
  .free-sample .sample-downloads a { padding: 4px 7px; font-size: 12px; white-space: nowrap; }
  header.catalog-heading .free-sample small { display: none; }
  .sample-label-full { display: none; }
  .sample-label-compact { display: inline; }
  .catalog-filters { gap: 6px; margin-block: 8px 6px; }
}