/* Products only: Figma 565:164; navigation and other pages keep their rules. */
#app > :is([data-section=products] > .media-header, .media-header.shared-inner-hero){height:clamp(300px,27.604167vw,530px);min-height:0;padding-top:64px}
#app[data-section=products]>.media-header h1{font-size:36px;line-height:54px;font-weight:700}
#app .catalogue{background:var(--yc-light-subtle);margin-top:-17px;padding:0 0 95px;border-radius:20px 20px 0 0}
#app .catalogue>.wrap{width:85%;max-width:var(--yc-content-max)}
#app .catalogue-layout{display:grid;grid-template-columns:minmax(155px,clamp(155px,14vw,235px)) minmax(0,1fr);gap:clamp(24px,3vw,52px);padding-top:36px}
#app .catalogue-standards{position:static;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:auto;height:auto;margin:0;padding:0;background:none;border:0}
#app .catalogue-standards a{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 0;border:0;color:var(--yc-light-muted);font-size:18px;font-weight:500;line-height:1.4}
#app .catalogue-standards a:not([aria-current]){font-size:16px;font-weight:400}
#app .catalogue-standards a:is([aria-current],:hover,:focus-visible){color:var(--yc-light-text)}
.catalogue-standard-arrow{width:0;opacity:0;flex:none;margin-inline-end:-8px;font-size:24px;line-height:1;transition:opacity .2s}
.catalogue-standards a:is([aria-current],:hover,:focus-visible) .catalogue-standard-arrow{width:24px;opacity:1;margin-inline-end:0}
.catalogue-keyword{margin:0 0 18px}
#app .catalogue .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
#app .catalogue .catalogue-card{background:#fff;border:0;border-radius:4px;min-width:0;overflow:hidden}
#app .catalogue .catalogue-cover{width:100%;aspect-ratio:4 / 3;overflow:hidden;background:#eee}
#app .catalogue .catalogue-cover>img{display:block;width:100%;height:100%;aspect-ratio:4 / 3;object-fit:cover;object-position:center;transition:transform 400ms}
#app .catalogue .catalogue-card:hover .catalogue-cover>img{transform:scale(1.02)}
#app .catalogue .catalogue-card .body{padding:24px}
#app .catalogue .catalogue-card h3{font-size:16px;line-height:24px;font-weight:400;margin:0}
#app .catalogue .catalogue-pagination,#app .news-pagination{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
#app .catalogue .catalogue-pagination .chip,#app .news-pagination a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;min-height:40px;padding:0;border:0;border-radius:999px;background:white;color:var(--yc-light-secondary);font-size:16px;line-height:24px}
#app .catalogue .catalogue-pagination .chip.active,#app .news-pagination a[aria-current]{background:var(--yc-light-primary);color:#fff}
@media(max-width:1024px){#app .catalogue .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:767px){
 #app .catalogue-layout{grid-template-columns:1fr;gap:20px;padding-top:22px}
 #app .catalogue-standards{gap:4px}
 #app .catalogue-standards a{font-size:16px}
}
@media(max-width:600px){
 #app .catalogue>.wrap{width:calc(100% - 40px)}
 #app .catalogue .grid{grid-template-columns:1fr;gap:24px}
 #app .catalogue .catalogue-card .body{padding:24px}
}
@media(prefers-reduced-motion:reduce){#app .catalogue .catalogue-cover>img{transition:none;transform:none!important}}

/* Original full-bleed scene and centered title; the header observer owns playback. */
#app[data-section=products]>.media-header{background:#202936;text-align:center;display:grid;place-items:center;isolation:isolate}
#app[data-section=products]>.media-header>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:none;mask-image:none;animation-name:catalogue-camera;animation-duration:12s;animation-timing-function:cubic-bezier(.3,.15,.4,1);transform-origin:50% 48%}
#app[data-section=products]>.media-header h1{position:relative;inset:auto;z-index:2;width:85%;max-width:var(--yc-content-max);margin:0;padding:0;color:#fff;text-align:center}
@keyframes catalogue-camera{from{transform:scale(1)}to{transform:scale(1.065)}}
@media(min-width:1700px){#app .catalogue .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
 #app > :is([data-section=products] > .media-header, .media-header.shared-inner-hero){height:300px}
 #app[data-section=products]>.media-header>img{object-position:52% center;animation-duration:10s}
 #app[data-section=products]>.media-header h1{font-size:28px;line-height:42px}
}
@media(prefers-reduced-motion:reduce){#app[data-section=products]>.media-header>img{animation:none;transform:none;will-change:auto}}

/* Bright catalogue header: keep the heading in the image's central safe area. */
#app[data-section=products]>.media-header{background:#202936 url(assets/catalogue-header/figma-base.png) center / cover no-repeat}
#app[data-section=products]>.media-header>img{object-position:50% 100%;transform-origin:50% 50%}
#app > .media-header.shared-inner-hero { isolation: isolate; }
#app > :is([data-section=products] > .media-header, .media-header.shared-inner-hero)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  background: linear-gradient(180deg, rgb(0 0 0 / 48%), rgb(0 0 0 / 62%) 50%, rgb(0 0 0 / 48%));
  pointer-events: none;
}
#app > .media-header.shared-inner-hero > img { filter: none; object-position: center; }
#app > .media-header.shared-inner-hero h1 { z-index: 2; color: #fff; }
#app[data-section=products]>.media-header h1{color:#fff;text-shadow:none}
@media(max-width:767px){#app[data-section=products]>.media-header>img{object-position:35% center}}

#app .catalogue .catalogue-clear-filters {
  animation: none;
  transition: none;
  transform: none;
}
#app .catalogue .catalogue-clear-filters::before,
#app .catalogue .catalogue-clear-filters::after {
  content: none;
}