/* ============================================================
   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:1415px; }

/* ---------- Footer — one card row per category (max 3 products today), so
   the footer sits just below that single row. Each of the footer pieces
   overrides only the `top` from page-common.css here so product.html (which
   shares page-common.css) is unaffected. If a category ever grows past 3
   products the grid wraps to a 2nd row (531px each) — bump these + --page-h
   by 531px per extra row then. ---------- */
.pg-footer-bar{ top:1242px; }
.pg-footer-legal{ top:1346px; }
.pg-footer-name{ top:1377px; }
.pg-footer-rights{ top:1349px; }
.pg-footer-policy{ top:1375px; }

/* ---------- Title ---------- */
.cat-h{
  position:absolute; left:147px; top:190px; 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:300px; width:626px;
  font-family:'Montserrat'; font-weight:400;
  font-size:14px; line-height:1.5; color:var(--white); opacity:.85;
  z-index:2;
}

/* ---------- Category filter pills ----------
   Flex-wrap container instead of one absolute pill per item: the category
   list is long (15) and comes from JS, so it flows into 2+ rows on its own.
   The container is absolutely placed to stay on the 1920px design grid; the
   pills inside are normal flex children (auto width to their label). */
.cat-filters{
  position:absolute; left:150px; top:415px; width:1645px;
  display:flex; flex-wrap:wrap; gap:6px;
  /* Stretch each row edge-to-edge so both rows are the same width (the
     container width) with aligned left/right edges. Both rows carry 8 items,
     so the distributed gaps read evenly. gap is the MINIMUM column gap; the
     bigger the pills, the less leftover space space-between spreads between
     them, so larger pills read as tighter spacing. */
  justify-content:space-between;
  z-index:2;
}
.filter-pill{
  height:46px; padding:0 14px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Montserrat'; font-weight:500; font-size:14px; color:var(--white);
  background:none; border:1px solid var(--white); cursor:pointer;
  white-space:nowrap;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.filter-pill:hover{ border-color:var(--gold); color:var(--gold); }
.filter-pill.is-active{ background:var(--gold); border-color:var(--gold); color:var(--white); }

/* Search-by-article field — same 44px pill height/radius/outline as the
   category pills so it reads as part of the same row. Width kept ~235px so
   it tucks onto the end of the 2nd category row (15 pills stay 2 rows). */
.cat-search{
  width:210px; height:46px; box-sizing:border-box;
  display:flex; align-items:center;
  border:1px solid var(--white); border-radius:9px; overflow:hidden;
  background:none;
  transition:border-color .25s ease;
}
.cat-search:focus-within{ border-color:var(--gold); }
.cat-search-input{
  flex:1 1 auto; min-width:0; height:100%;
  border:none; background:none; outline:none;
  padding:0 2px 0 12px; color:var(--white);
  font-family:'Montserrat'; font-weight:500; font-size:13px;
}
.cat-search-input::placeholder{ color:var(--white); opacity:.6; }
/* Replace the browser's default (blue) search-clear "×" with one in the site
   palette: a masked × shape tinted white, gold on hover. WebKit/Blink only
   (Chrome/Edge/Safari) — Firefox shows no clear button for type=search. */
.cat-search-input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-left:6px; cursor:pointer;
  background-color:var(--white); opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .2s ease, background-color .2s ease;
}
.cat-search-input::-webkit-search-cancel-button:hover{ background-color:var(--gold); opacity:1; }
.cat-search-btn{
  flex:0 0 auto; width:42px; height:100%;
  border:none; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); opacity:.7;
  transition:color .25s ease, opacity .25s ease;
}
.cat-search-btn:hover{ opacity:1; color:var(--gold); }

/* Mobile category dropdown — hidden on desktop (pills are used there). Shown
   only inside the <=768px @media block below. */
.cat-dd{ display:none; }

/* ---------- Active category heading ---------- */
.cat-section{
  position:absolute; left:150px; top:585px; margin:0;
  font-family:'Montserrat'; font-weight:700; font-size:40px; line-height:normal; color:var(--white);
  z-index:2;
}

/* ---------- Product cards ----------
   left/top are set inline by js/catalog.js per the card's slot in the active
   category; the top:471px here is only a pre-JS fallback. */
.prod-card{
  position:absolute; top:471px; width:500px; height:471px;
  background:#8d8d8c; border-radius:9px;
  text-decoration:none; display:block; overflow:hidden;
  transition: transform .25s ease;
}
.prod-card:hover{ transform:translateY(-4px); }

.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-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:671px; width:1620px;
  font-family:'Montserrat'; font-weight:400; font-size:16px; color:var(--white); opacity:.6;
  display:none;
}

/* ============================================================
   MOBILE (<=768px) — base design width 360px. Everything above
   (desktop, >768px) is untouched. The shared css/mobile.css drops
   the 1920 scale (.page-wrap/.page become flex-column flow with a
   60px header pad) and styles the header; this block reflows the
   catalog-only elements — which are all position:absolute at
   desktop coords — into that single-column flow.
   Section order in flow (DOM order): breadcrumb, title, subtitle,
   filters (search on its own row + wrapping pills), active-category
   heading, product grid (single-column cards), empty state, footer.
   ============================================================ */
@media (max-width:768px){

  /* decorative watermark would overflow the 360px width — drop it */
  .pg-wm{ display:none!important; }

  /* Reset every desktop-absolute catalog element into normal flow.
     (.page height is already forced auto by css/mobile.css.) */
  .pg-crumb,.cat-h,.cat-p,.cat-filters,.cat-section,.cat-empty,
  .pg-footer-legal,.pg-footer-name,.pg-footer-rights,.pg-footer-policy{
    position:static!important;
    left:auto!important; top:auto!important;
    right:auto!important; bottom:auto!important;
    width:auto!important; white-space:normal!important;
  }

  /* ---------- breadcrumb ---------- */
  .pg-crumb{
    font-size:14px; letter-spacing:.4px; line-height:1.4;
    margin:16px 20px 0;
  }

  /* ---------- title + subtitle ---------- */
  .cat-h{
    font-size:26px; line-height:1.2;
    margin:16px 20px 0;
  }
  .cat-p{
    font-size:15px; line-height:1.55; opacity:.85;
    margin:12px 20px 0;
  }

  /* ---------- filters: search full-width row, pills wrap below ---------- */
  .cat-filters{
    display:flex!important; flex-wrap:wrap; gap:8px;
    justify-content:flex-start!important;
    margin:22px 20px 0;
  }
  .cat-search{
    flex:0 0 100%; width:100%!important; height:46px; order:-1;
  }
  /* Pills replaced by the full-width dropdown on mobile. */
  .filter-pill{ display:none!important; }

  /* ---------- category dropdown (mobile only) ---------- */
  .cat-dd{
    display:block; position:relative;
    flex:0 0 100%; width:100%; order:0;
    /* Own high stacking context so the open panel sits ABOVE the category
       heading and product cards below (all of which are z-index <= 20).
       .cat-filters is position:static on mobile, so the panel would otherwise
       fall into the page flow's context and be painted under later content. */
    z-index:100;
  }
  .cat-dd-trigger{
    /* Match the .cat-search field: full-width pill, same height/radius/outline. */
    width:100%; height:46px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; gap:10px;
    border:1px solid var(--white); border-radius:9px; background:none;
    color:var(--white); font-family:'Montserrat'; font-weight:500; font-size:14px;
    cursor:pointer; text-align:left;
    transition:border-color .25s ease, color .25s ease;
  }
  .cat-dd.is-open .cat-dd-trigger{ border-color:var(--gold); }
  .cat-dd-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cat-dd-caret{ flex:0 0 auto; opacity:.75; transition:transform .25s ease; }
  .cat-dd.is-open .cat-dd-caret{ transform:rotate(180deg); }
  .cat-dd-panel{
    /* IN-FLOW accordion (not an absolute overlay): opening it expands the
       filter row and pushes the heading + cards DOWN, so the list can never
       render "under" later content no matter the stacking context. */
    width:100%; margin-top:6px;
    max-height:60vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:#5a5a5a; border:1px solid var(--white); border-radius:9px;
    padding:5px; box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .cat-dd-item{
    display:block; width:100%; box-sizing:border-box;
    padding:11px 12px; border:none; border-radius:6px; background:none;
    color:var(--white); font-family:'Montserrat'; font-weight:500; font-size:14px;
    text-align:left; cursor:pointer; white-space:normal;
    transition:background .2s ease, color .2s ease;
  }
  .cat-dd-item:hover{ color:var(--gold); }
  .cat-dd-item.is-active{ background:var(--gold); color:var(--white); }

  /* ---------- active-category heading ---------- */
  .cat-section{
    font-size:24px; line-height:1.25;
    margin:26px 20px 6px;
  }

  /* ---------- product grid: single-column full-width cards ---------- */
  #catalogGrid{
    display:flex!important; flex-direction:column; gap:16px;
    width:auto; margin:8px 20px 0;
  }
  .prod-card{
    position:static!important;
    left:auto!important; top:auto!important;
    width:100%!important; height:auto!important;
    display:flex!important; flex-direction:column; align-items:center;
    padding:20px 16px 22px; box-sizing:border-box;
  }
  .prod-card:hover{ transform:none; }
  .prod-card .prod-badge{
    position:static!important; align-self:flex-start;
    height:36px; min-width:0; padding:0 14px; font-size:14px;
    margin:0 0 6px;
  }
  .prod-card .prod-img{
    position:static!important; transform:none!important;
    width:auto!important; max-width:150px; height:210px!important;
    margin:4px 0 14px;
  }
  .prod-card .prod-title{
    position:static!important; width:100%!important;
    font-size:15px; line-height:1.4; text-align:center; margin:0 0 8px;
  }
  .prod-card .prod-desc{
    position:static!important; width:100%!important;
    font-size:12px; line-height:1.5; opacity:.75; text-align:center;
  }

  /* ---------- empty state ---------- */
  .cat-empty{
    font-size:15px; margin:12px 20px 0;
  }

  /* ---------- footer: stack legibly (the desktop bg bar is dropped;
     a top divider separates the footer text from the last card) ---------- */
  .pg-footer-bar{ display:none!important; }
  .pg-footer-legal{
    font-size:11px; line-height:1.6; opacity:.7;
    margin:36px 20px 0; padding-top:26px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .pg-footer-name{ font-size:14px; opacity:.85; margin:16px 20px 0; }
  .pg-footer-rights{
    font-size:11px; opacity:.7; white-space:normal!important; margin:6px 20px 0;
  }
  .pg-footer-policy{
    font-size:11px; opacity:.7; text-decoration:underline; margin:6px 20px 26px;
  }
}