/* ============================================================
   Catalog list page — Figma node 405:7 ("Каталог", file WECkkcNvhYBB0JsUAmXqMx).
   Loaded after style.css: reuses its :root vars, reset, header/nav/pill
   and footer/reveal rules; this file only overrides --page-h and adds
   the elements unique to this page.
   ============================================================ */
:root{ --page-h:1851px; }

/* ---------- Footer — page-common.css positions it for a single card row;
   a second row of cards pushes it down by the same amount (row height 471
   + 60px row gap = 531px), overriding just the `top` of each piece here so
   product.html (which shares page-common.css) is unaffected. ---------- */
.pg-footer-bar{ top:1672px; }
.pg-footer-legal{ top:1776px; }
.pg-footer-name{ top:1807px; }
.pg-footer-rights{ top:1779px; }
.pg-footer-policy{ top:1805px; }

/* ---------- Title ---------- */
.cat-h{
  position:absolute; left:147px; top:161px; width:1590px;
  font-family:'Montserrat'; font-weight:700;
  font-size:64px; line-height:normal; color:var(--white);
  z-index:2;
}
.cat-h .c-gold{ font-weight:700; }
.cat-p{
  position:absolute; left:152px; top:245px; width:626px;
  font-family:'Montserrat'; font-weight:400;
  font-size:14px; line-height:1.5; color:var(--white); opacity:.85;
  z-index:2;
}

/* ---------- Viscosity filter pills ---------- */
.filter-pill{
  position:absolute; top:330px; height:59px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat'; font-weight:500; font-size:20px; color:var(--white);
  background:none; border:1px solid var(--white); cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
  z-index:2;
}
.filter-pill.is-active{ background:var(--gold); border-color:var(--gold); }
.fp-all{ left:152px; width:201px; }
.fp-1{ left:392px; width:135px; }
.fp-2{ left:566px; width:135px; }
.fp-3{ left:740px; width:135px; }

/* ---------- Product cards ---------- */
.prod-card{
  position:absolute; top:471px; width:500px; height:471px;
  background:#8d8d8c; border-radius:9px;
  text-decoration:none; display:block; overflow:hidden;
  /* Own transition list here (catalog.css loads after style.css, so this
     would otherwise silently clobber .reveal's fade+rise+blur with a
     plain, blur-less .3s snap — merge the two instead of letting one win. */
  transition:
    opacity 1.3s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),
    transform 1.3s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),
    filter 1.3s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),
    left .4s cubic-bezier(.2,.7,.2,1);
}
/* Softer than the site-wide .reveal default (less travel, lighter blur) —
   a shorter, gentler motion reads as calmer over this longer 1.3s duration
   than the full 36px/6px would. */
.prod-card.reveal:not(.is-visible){ transform:translateY(20px); filter:blur(4px); }
.prod-card:hover{ transform:translateY(-4px); }
.prod-card.is-hidden{ display:none; }
.pc-1{ left:150px; }
.pc-2{ left:710px; }
.pc-3{ left:1270px; }
.pc-4{ left:150px; top:1002px; }
.pc-5{ left:710px; top:1002px; }
.pc-6{ left:1270px; top:1002px; }

.prod-badge{
  position:absolute; top:21px; left:16px; height:45px; min-width:90px; padding:0 14px;
  background:var(--gold); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat'; font-weight:500; font-size:15.407px; color:var(--white);
  white-space:nowrap;
}
.prod-vol{
  position:absolute; top:31px; right:20px;
  font-family:'Montserrat'; font-weight:500; font-size:15.407px; color:var(--white);
}
.prod-img{
  position:absolute; left:50%; top:64px; width:203px; height:325px;
  transform:translateX(-50%);
  object-fit:contain;
}
.prod-title{
  position:absolute; left:16px; top:389px; width:calc(100% - 32px);
  font-family:'Montserrat'; font-weight:500; font-size:15.407px; line-height:1.4; color:var(--white);
}
.prod-title p{ margin:0; }
.prod-desc{
  position:absolute; left:16px; top:427px; width:calc(100% - 32px);
  font-family:'Montserrat'; font-weight:400; font-size:10.597px; line-height:normal; color:var(--white); opacity:.75;
}

.cat-empty{
  position:absolute; left:150px; top:471px; width:1620px;
  font-family:'Montserrat'; font-weight:400; font-size:16px; color:var(--white); opacity:.6;
  display:none;
}