.zc-product-archive {
    color: var(--zc-color-text);
    background: var(--zc-color-surface-subtle);
    font-family: var(--zc-font-family-primary);
}

.zc-product-archive *, .zc-product-archive *::before, .zc-product-archive *::after { box-sizing: border-box; }
.zc-product-archive__container { width: min(100%, calc(1360px + (2 * var(--zc-header-gutter)))); margin-inline: auto; padding-inline: var(--zc-header-gutter); }

.zc-product-archive__hero {
    position: relative;
    display: grid;
    min-height: clamp(420px, 52vw, 620px);
    overflow: hidden;
    color: var(--zc-color-white);
    background-color: var(--zc-color-primary);
    background-image:
        linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px),
        radial-gradient(circle at 84% 44%, rgb(80 168 225 / 21%), transparent 26%),
        linear-gradient(108deg, rgb(17 24 32 / 94%), rgb(38 55 70 / 87%) 48%, rgb(38 55 70 / 58%)),
        var(--zc-product-archive-hero-image, linear-gradient(transparent, transparent));
    background-position: center;
    background-size: 48px 48px, 48px 48px, auto, auto, cover;
}

.zc-product-archive__hero::before, .zc-product-archive__hero::after { position: absolute; content: ""; pointer-events: none; }
.zc-product-archive__hero::before {
    top: 50%; right: clamp(-210px, -7vw, -76px); width: clamp(430px, 44vw, 660px); aspect-ratio: 1;
    border: 1px solid rgb(80 168 225 / 20%); border-radius: 50%;
    box-shadow: inset 0 0 0 68px rgb(99 137 170 / 4%), inset 0 0 0 136px rgb(99 137 170 / 4%);
    transform: translateY(-50%);
}
.zc-product-archive__hero::after { right: 8%; bottom: -34%; width: 36%; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 8%); transform: rotate(45deg); }
.zc-product-archive__hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(88px, 9vw, 136px); }
.zc-product-archive__hero h1 { max-width: 11ch; margin: 0; color: var(--zc-color-white); font-size: clamp(3.5rem, 2.1rem + 5vw, 5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 0.96; text-transform: uppercase; }
.zc-product-archive__hero h1::after { display: block; width: 64px; height: 4px; margin-top: 24px; background: var(--zc-color-accent); content: ""; }
.zc-product-archive__intro { max-width: 60ch; margin: 28px 0 0; color: rgb(255 255 255 / 88%); font-size: clamp(1.125rem, 1.05rem + .25vw, 1.375rem); line-height: 1.55; }

.zc-product-archive__listing { padding-block: clamp(48px, 6vw, 88px); }
.zc-product-filters { display: grid; gap: 20px; margin-bottom: 28px; padding: clamp(20px, 3vw, 32px); border: 1px solid rgb(113 128 140 / 32%); border-radius: 4px; background: var(--zc-color-white); box-shadow: 0 1px 2px rgb(38 55 70 / 8%); }
.zc-product-filters__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.zc-product-filters label:not(.zc-product-filters__check) > span { display: block; margin-bottom: 7px; color: var(--zc-color-primary); font-size: .75rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.zc-product-filters select { width: 100%; min-height: 44px; margin: 0; padding: 8px 36px 8px 12px; border: 1px solid rgb(113 128 140 / 62%); border-radius: 4px; color: var(--zc-color-primary); background: var(--zc-color-white); font: inherit; }
.zc-product-filters__checks { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start; padding-top: 16px; border-top: 1px solid rgb(113 128 140 / 24%); }
.zc-product-filters__group { min-inline-size: 0; max-width: 100%; margin: 0; padding: 0; border: 0; }
.zc-product-filters__group legend { margin-bottom: 4px; padding: 0; color: var(--zc-color-primary); font-size: .75rem; font-weight: 600; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase; }
.zc-product-filters__options { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.zc-product-filters__check { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; color: var(--zc-color-primary); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.zc-product-filters__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--zc-color-primary); }
.zc-product-filters__check input:focus-visible { outline: 3px solid var(--zc-color-focus); outline-offset: 3px; }
.zc-product-filters__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zc-product-filters__actions button, .zc-product-filters__actions a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--zc-color-primary); border-radius: 4px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.zc-product-filters__actions button { color: var(--zc-color-white); background: var(--zc-color-primary); }
.zc-product-filters__actions a { color: var(--zc-color-primary); background: var(--zc-color-white); }
.zc-product-archive__toolbar { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; margin-bottom: clamp(32px, 4vw, 48px); padding-bottom: 20px; border-bottom: 1px solid rgb(113 128 140 / 42%); }
.zc-product-archive__toolbar h2 { margin: 0; color: var(--zc-color-primary); font-size: .875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }
.zc-product-archive__sort { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zc-product-archive__sort label { color: var(--zc-color-primary); font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.zc-product-archive__sort select, .zc-product-archive__sort-submit { min-height: 44px; border: 1px solid rgb(113 128 140 / 62%); border-radius: 4px; font: inherit; }
.zc-product-archive__sort select { min-width: 230px; margin: 0; padding: 8px 42px 8px 16px; color: var(--zc-color-primary); background-color: var(--zc-color-white); box-shadow: none; cursor: pointer; }
.zc-product-archive .zc-product-archive__sort-submit { padding: 8px 18px; border-color: var(--zc-color-primary); color: var(--zc-color-white); background: var(--zc-color-primary); box-shadow: none; cursor: pointer; }
.zc-product-archive__sort.is-enhanced .zc-product-archive__sort-submit { display: none; }

.zc-product-archive__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 2vw, 32px); align-items: stretch; }
.zc-product-card { display: flex; min-width: 0; flex-direction: column; margin: 0; overflow: hidden; border: 1px solid rgb(113 128 140 / 32%); border-radius: 4px; background: var(--zc-color-white); box-shadow: 0 1px 2px rgb(38 55 70 / 8%); transition: border-color var(--zc-duration-fast) var(--zc-ease-standard), box-shadow var(--zc-duration-fast) var(--zc-ease-standard), transform var(--zc-duration-fast) var(--zc-ease-standard); }
.zc-product-card:hover { border-color: rgb(99 137 170 / 68%); box-shadow: 0 8px 24px rgb(38 55 70 / 10%); transform: translateY(-2px); }
.zc-product-card__media { position: relative; min-height: 280px; overflow: hidden; border-bottom: 1px solid rgb(113 128 140 / 22%); background: linear-gradient(135deg, rgb(255 255 255 / 70%), transparent 55%), var(--zc-color-surface-subtle); }
.zc-product-card__media > a { display: grid; width: 100%; height: 100%; min-height: inherit; place-items: center; padding: 18px; }
.zc-product-card__media img { display: block; width: 100%; height: 248px; object-fit: contain; }
.zc-product-card__media-fallback { position: relative; display: block; width: 76px; height: 98px; border: 2px solid rgb(99 137 170 / 48%); border-radius: 8px 8px 16px 16px; }
.zc-product-card__media-fallback::before, .zc-product-card__media-fallback::after { position: absolute; content: ""; }
.zc-product-card__media-fallback::before { top: -14px; left: 19px; width: 34px; height: 16px; border: 2px solid rgb(99 137 170 / 48%); border-bottom: 0; border-radius: 4px 4px 0 0; }
.zc-product-card__media-fallback::after { inset: 37px 15px auto; height: 2px; background: var(--zc-color-accent); box-shadow: 0 11px 0 var(--zc-color-accent); }

.zc-product-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.zc-product-card__labels { position: absolute; top: 16px; right: 16px; left: 16px; z-index: 1; justify-content: flex-end; }
.zc-product-label { display: inline-flex; gap: 7px; align-items: center; max-width: 100%; padding: 7px 10px; border: 1px solid rgb(38 55 70 / 13%); border-radius: 999px; color: var(--zc-color-primary); background: rgb(255 255 255 / 95%); box-shadow: 0 1px 2px rgb(38 55 70 / 8%); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
.zc-product-label > .zc-product-label__icon,
.zc-product-filters__check > .zc-product-label__icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }

.zc-product-card__body { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.zc-product-card h3 { margin: 0; color: var(--zc-color-primary); font-size: clamp(1.375rem, 1.25rem + .3vw, 1.625rem); font-weight: 600; line-height: 1.18; }
.zc-product-card h3 a { color: inherit; text-decoration: none; }
.zc-product-card h3 a:hover { color: var(--zc-color-secondary); }
.zc-product-card__data { display: grid; gap: 0; margin: 22px 0 26px; border-top: 1px solid rgb(113 128 140 / 24%); }
.zc-product-card__datum { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding-block: 10px; border-bottom: 1px solid rgb(113 128 140 / 24%); }
.zc-product-card__datum-icon { position: relative; display: block; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--zc-color-secondary); border-radius: 50%; }
.zc-product-card__datum-icon::before { position: absolute; inset: 4px; border: 1px solid var(--zc-color-secondary); border-radius: 50%; content: ""; }
.zc-product-card__datum--type .zc-product-card__datum-icon, .zc-product-card__datum--market .zc-product-card__datum-icon { border-radius: 3px; }
.zc-product-card__datum--type .zc-product-card__datum-icon::before { inset: 4px 3px; border: 0; border-top: 1.5px solid var(--zc-color-secondary); border-bottom: 1.5px solid var(--zc-color-secondary); border-radius: 0; }
.zc-product-card__datum--application .zc-product-card__datum-icon::before { inset: 3px 6px 5px 5px; border: 1.5px solid var(--zc-color-secondary); border-radius: 7px 0; transform: rotate(32deg); }
.zc-product-card__datum--market .zc-product-card__datum-icon::before { inset: 4px 3px; border: 0; border-radius: 0; background: linear-gradient(90deg, var(--zc-color-secondary) 1px, transparent 1px) 0 0 / 4px 100%; }
.zc-product-card__data dt { color: var(--zc-color-secondary); font-size: .6875rem; font-weight: 600; letter-spacing: .07em; line-height: 1.25; text-transform: uppercase; }
.zc-product-card__data dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--zc-color-text); font-size: .875rem; line-height: 1.4; }

.zc-product-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.zc-product-card__button { display: inline-flex; min-width: 0; min-height: 48px; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--zc-color-secondary); border-radius: 4px; color: var(--zc-color-primary); background: var(--zc-color-white); font-size: .8125rem; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; transition: color var(--zc-duration-fast) var(--zc-ease-standard), background-color var(--zc-duration-fast) var(--zc-ease-standard), border-color var(--zc-duration-fast) var(--zc-ease-standard); }
.zc-product-card__button--primary { border-color: var(--zc-color-primary); color: var(--zc-color-white); background: var(--zc-color-primary); }
.zc-product-card__button:not(.zc-product-card__button--primary):not(.is-disabled):hover { border-color: var(--zc-color-primary); background: var(--zc-color-surface-subtle); }
.zc-product-card__button--primary:hover { border-color: var(--zc-color-secondary); background: var(--zc-color-secondary); }
.zc-product-card__button.is-disabled { border-color: rgb(113 128 140 / 35%); color: rgb(75 90 102 / 72%); background: var(--zc-color-surface-subtle); cursor: not-allowed; }
.zc-product-card__button--sds { grid-column: 1 / -1; width: 100%; }

.zc-product-archive :where(a, button, select):focus-visible { outline: 3px solid var(--zc-color-focus); outline-offset: 3px; }
.zc-product-archive .navigation.pagination { margin-top: clamp(48px, 6vw, 80px); }
.zc-product-archive .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.zc-product-archive .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid rgb(113 128 140 / 44%); border-radius: 4px; color: var(--zc-color-primary); background: var(--zc-color-white); font-weight: 600; text-decoration: none; }
.zc-product-archive .page-numbers.current, .zc-product-archive .page-numbers:hover { border-color: var(--zc-color-primary); color: var(--zc-color-white); background: var(--zc-color-primary); }
.zc-product-archive__empty { padding: clamp(48px, 6vw, 80px); border: 1px solid rgb(113 128 140 / 30%); border-radius: 4px; background: var(--zc-color-white); text-align: center; }
.zc-product-archive__empty h2 { margin: 0; color: var(--zc-color-primary); font-size: clamp(1.5rem, 1.3rem + .75vw, 2.125rem); }

@media (min-width: 768px) { .zc-product-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .zc-product-archive__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zc-product-card__media { min-height: 250px; }
    .zc-product-card__media img { height: 218px; }
}
@media (max-width: 767px) {
    .zc-product-archive__hero { min-height: 0; background-size: 32px 32px, 32px 32px, auto, auto, cover; }
    .zc-product-archive__hero::before, .zc-product-archive__hero::after { display: none; }
    .zc-product-archive__hero-inner { padding-block: 72px; }
    .zc-product-archive__hero h1 { font-size: clamp(2.75rem, 15vw, 3.75rem); }
    .zc-product-archive__toolbar, .zc-product-archive__sort { align-items: stretch; }
    .zc-product-archive__toolbar, .zc-product-archive__sort, .zc-product-archive__sort select, .zc-product-archive__sort-submit { width: 100%; }
    .zc-product-filters__fields { grid-template-columns: 1fr; }
    .zc-product-filters__checks { flex-direction: column; gap: 16px; }
    .zc-product-filters__actions, .zc-product-filters__actions :where(button, a) { width: 100%; }
    .zc-product-archive__sort label { align-self: center; }
    .zc-product-card__actions { grid-template-columns: 1fr; }
    .zc-product-card__button--sds { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1100px) { .zc-product-filters__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) {
    .zc-product-card__body { padding: 22px 18px; }
    .zc-product-card__media { min-height: 240px; }
    .zc-product-card__media img { height: 208px; }
}
@media (prefers-reduced-motion: reduce) {
    .zc-product-card, .zc-product-card__button { transition: none; }
    .zc-product-card:hover { transform: none; }
}