:root{
  --ac:#FF4C00;
  --dk:#263C58;
  --dkk:#1A2B3F;
  --bg:#EBEBEB;
  --wh:#FFFFFF;
  --tx:#5F5F5F;
  --txd:#3E3E3E;
  --mu:#6B7A8D;
  --di:#A8B4C2;
  --bd:#D0D8E4;
  --ph:#C8C8C8;
  --r-pill:100px;
  --r20:20px;
  --r14:14px;
  --r08:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;color:var(--tx);background:var(--bg)}

/* ─── SITE CONTAINER ─── */
#site{container-type:inline-size;overflow:hidden;background:var(--bg)}

/* ─── LAYOUT ─── */
.wrap{max-width:1200px;margin:0 auto;padding:0 60px}
.section{padding:72px 0;background:var(--bg)}
.section--dk{background:var(--dk)}
.section--wh{background:var(--wh)}

/* ─── TYPOGRAPHY ─── */
.disp{font-family:'Vysota',sans-serif;font-weight:400;line-height:1.04;letter-spacing:.01em;text-transform:uppercase}
.sh2{font-size:clamp(28px,3.6cqw,48px);color:var(--txd)}
.sh2--wh{color:var(--wh)}
.eyebrow{font-size:12px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}

/* ─── BUTTON ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ac);color:var(--wh);
  font-family:'Open Sans',sans-serif;font-weight:700;font-size:14px;
  border:none;border-radius:var(--r-pill);padding:11px 28px;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:opacity .15s,background .15s;
}
.btn:hover{opacity:.88}
.btn--wide{width:100%;padding:14px;font-size:15px}
.btn--outline{background:transparent;color:var(--txd);border:2px solid var(--txd)}
.btn--outline:hover{background:var(--ac);color:var(--wh);border-color:var(--ac);opacity:1}
.btn--outline-ac{background:transparent;color:var(--ac);border:2px solid var(--ac)}
.btn--outline-ac:hover{background:var(--ac);color:var(--wh);opacity:1}

/* ─── FORM CARD ─── */
.form-card{background:var(--wh);border-radius:var(--r20);padding:28px 28px 32px}
.form-card-title{font:700 17px/1.3 'Open Sans',sans-serif;color:var(--txd);margin-bottom:6px}
.form-card-sub{font-size:13px;color:var(--mu);line-height:1.5;margin-bottom:18px}
.f-field{padding:10px 0;border-bottom:1.5px solid rgba(255,76,0,.25)}
.f-input{width:100%;border:none;outline:none;font:14px 'Open Sans',sans-serif;color:var(--txd);background:transparent;padding:4px 0}
.f-input::placeholder{color:var(--ph)}
.f-privacy{font-size:11px;color:var(--mu);text-align:center;margin-top:10px;line-height:1.4}

/* ─── HEADER ─── */
.header{background:var(--wh);border-bottom:1px solid rgba(0,0,0,.07);position:sticky;top:48px;z-index:100}
.header-in{height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{text-decoration:none}
.logo-name{font:700 24px 'Open Sans',sans-serif;color:var(--txd)}
.nav{display:flex;gap:20px;align-items:center}
.nav a{font-size:13px;font-weight:600;color:var(--tx);text-decoration:none;white-space:nowrap;transition:color .15s}
.nav a:hover,.nav a.active{color:var(--ac)}
.header-r{display:flex;align-items:center;gap:16px}
.hphone-wrap{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:2px}
.hphone{font:700 14px 'Open Sans',sans-serif;color:var(--txd);text-decoration:none;line-height:1.2;white-space:nowrap}
.hphone-sub{font-size:11px;color:var(--mu);line-height:1.2;white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{display:block;width:22px;height:2px;background:var(--txd);border-radius:2px}

/* ─── PROJECT CARDS ─── */
.proj-card{position:relative;overflow:hidden;border-radius:var(--r20);background:var(--dk)}
.proj-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.proj-card:hover .proj-card-img{transform:scale(1.04)}
.proj-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(19,35,64,.88) 0%,rgba(19,35,64,.25) 55%,transparent 100%)}
.proj-card-body{position:absolute;bottom:0;left:0;right:0;padding:16px 20px}
.proj-card-name{font:700 16px/1.2 'Open Sans',sans-serif;color:var(--wh);margin-bottom:5px}
.proj-card-meta{display:flex;flex-wrap:wrap;gap:10px}
.proj-card-meta span{font-size:12px;color:rgba(255,255,255,.72)}
.proj-card-link{font:700 12px 'Open Sans',sans-serif;color:var(--ac);text-decoration:none;margin-top:7px;display:inline-block}

/* ─── SERVICE CARDS (dark section) ─── */
.svc-card{background:var(--wh);border-radius:var(--r20);padding:26px 24px;position:relative}
.svc-dot{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--ac);flex-shrink:0}
.svc-title{font:700 17px/1.25 'Open Sans',sans-serif;color:var(--txd);margin-bottom:12px;padding-right:44px}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.svc-list li{font-size:13px;color:var(--tx);padding-left:14px;position:relative;line-height:1.4}
.svc-list li::before{content:"—";position:absolute;left:0;color:var(--mu)}

/* ─── WHY-US CARDS ─── */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.why-card{background:var(--wh);border-radius:var(--r20);padding:28px 22px}
.why-ic{width:52px;height:44px;margin-bottom:14px;display:flex;align-items:center}
.why-ic svg{max-width:100%;max-height:100%}
.why-title{font:700 16px/1.3 'Open Sans',sans-serif;color:var(--txd);margin-bottom:8px}
.why-desc{font-size:13px;color:var(--mu);line-height:1.55}

/* ─── CTA BAND ─── */
.cta-band{position:relative;overflow:hidden;background:var(--dk);padding:80px 0}
.cta-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12}
.cta-in{position:relative;z-index:1;display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center}
.cta-heading{font-size:clamp(40px,5cqw,64px);color:var(--wh);margin-bottom:32px}
.cta-worker{display:flex;align-items:flex-end;justify-content:center;min-height:360px}
.cta-worker img{max-height:420px;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(0,0,0,.45))}

/* ─── FOOTER ─── */
.foot{background:#1b2c41;padding:44px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr .75fr .9fr;gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(168,180,194,.12);margin-bottom:0}
.foot-logo{font:700 22px 'Open Sans',sans-serif;color:var(--wh);margin-bottom:8px}
.foot-tagline{font-size:12px;color:var(--ac);line-height:1.6;max-width:200px}
.foot-ttl{font:700 13px 'Open Sans',sans-serif;color:var(--wh);margin-bottom:14px}
.foot-nav a{display:block;font-size:13px;color:rgba(168,180,194,.65);text-decoration:none;margin-bottom:8px;transition:color .15s}
.foot-nav a:hover{color:var(--wh)}
.foot-ci{font-size:13px;color:rgba(168,180,194,.65);margin-bottom:7px;display:flex;align-items:flex-start;gap:7px;line-height:1.4}
.foot-ci a{color:rgba(168,180,194,.65);text-decoration:none;transition:color .15s}
.foot-ci a:hover{color:var(--wh)}
.foot-btm{padding:14px 0;font-size:11px;color:rgba(168,180,194,.3);text-align:center;line-height:1.6}

/* ─── RESPONSIVE ─── */
@container (min-width:1400px){
  .wrap{max-width:1320px;padding:0 80px}
  .section{padding:88px 0}
  .cta-in{gap:80px}
  .why-grid{gap:20px}
  .foot-grid{gap:40px}
}
@container (max-width:900px){
  .wrap{padding:0 32px}
  .nav{display:none}
  .hphone-wrap{display:none}
  .burger{display:flex}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .cta-in{grid-template-columns:1fr}
  .cta-worker{display:none}
}
@container (max-width:540px){
  .wrap{padding:0 16px}
  .section{padding:48px 0}
  .why-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* каталог.css — Catalog page templates for ВЗПМ (наследует взпм.css) */

/* ═══════════ CATALOG HERO (dark band) ═══════════ */
.cat-hero {
  position: relative;
  overflow: hidden;
  background: var(--dk);
}
.cat-hero-bg {
  position: absolute;
  inset: 0;
  background: url("assets/hero-bg.png") center/cover;
  opacity: 0.14;
}
.cat-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(26, 43, 63, 0.96) 45%,
    rgba(38, 60, 88, 0.72) 100%
  );
}
.cat-hero-in {
  position: relative;
  z-index: 1;
  padding: 34px 0 40px;
}

/* Breadcrumb */
.cat-bc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
}
.cat-bc a,
.cat-bc span.cur {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.cat-bc a {
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.15s;
}
.cat-bc a:hover {
  color: var(--ac);
}
.cat-bc .sep {
  color: rgba(255, 255, 255, 0.22);
  font-size: 12px;
}
.cat-bc span.cur {
  color: rgba(255, 255, 255, 0.7);
}

.cat-h1 {
  font-size: clamp(30px, 3.8cqw, 48px);
  color: var(--wh);
  line-height: 1.05;
  max-width: 16ch;
}

/* Back to series link */
.cat-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font:
    700 12px "Open Sans",
    sans-serif;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-bottom: 16px;
  transition: color 0.15s;
}
.cat-back:hover {
  color: var(--ac);
}
.cat-back svg {
  transition: transform 0.18s;
}
.cat-back:hover svg {
  transform: translateX(-3px);
}

/* ═══════════ MAIN TWO-COLUMN ZONE ═══════════ */
.cat-body {
  background: var(--bg);
  padding: 44px 0 0;
}
.cat-two {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: start;
}

/* Gallery */
.cat-gallery {
  position: sticky;
  top: 16px; /* дозаполнить высотой реального sticky-хедера Тильды, если он есть */
}
.cat-gallery-main {
  background: var(--wh);
  border-radius: var(--r20);
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.cat-gallery-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Универсальная заглушка «нет фото» — одинаковая для любого товара/типоразмера/серии,
   пока не залита реальная предметная съёмка */
.cat-photo-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--di);
}
.cat-photo-ph svg {
  opacity: 0.6;
}

.cat-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.cat-gallery-thumbs::-webkit-scrollbar {
  height: 6px;
}
.cat-gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--bd);
  border-radius: 100px;
}
.cat-thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 66px;
  background: var(--wh);
  border-radius: var(--r08);
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: border-color 0.15s;
}
.cat-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cat-thumb.active {
  border-color: var(--ac);
}
.cat-thumb-more {
  flex: 0 0 78px;
  width: 78px;
  height: 66px;
  border-radius: var(--r08);
  border: 2px dashed var(--bd);
  display: flex;
  align-items: center;
  justify-content: center;
  font:
    700 12px "Open Sans",
    sans-serif;
  color: var(--mu);
  background: rgba(255, 255, 255, 0.5);
}

/* Info column */
.cat-info-h {
  font:
    700 22px/1.25 "Open Sans",
    sans-serif;
  color: var(--txd);
  margin-bottom: 16px;
}
.cat-desc {
  font-size: 14px;
  color: var(--tx);
  line-height: 1.7;
}
.cat-desc p {
  margin-bottom: 12px;
}
.cat-desc p:last-child {
  margin-bottom: 0;
}

/* Variant selectors (Type C) */
.cat-variants {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cat-var-block {
}
.cat-var-lbl {
  font:
    700 11px "Open Sans",
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mu);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cat-var-lbl .cat-var-note {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--di);
  font-size: 10px;
}
.cat-var-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-var-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 9px 15px;
  border-radius: var(--r08);
  border: 1.5px solid var(--bd);
  background: var(--wh);
  font:
    700 14px "Open Sans",
    sans-serif;
  color: var(--txd);
  text-decoration: none;
  transition: 0.15s;
  cursor: pointer;
}
.cat-var-chip:hover {
  border-color: var(--ac);
  color: var(--ac);
}
.cat-var-chip.active {
  background: var(--dk);
  border-color: var(--dk);
  color: var(--wh);
}
.cat-var-chip.active:hover {
  color: var(--wh);
}
.cat-var-ispol {
  display: flex;
  gap: 8px;
}
.cat-var-ispol .cat-var-chip {
  flex-direction: column;
  align-items: flex-start;
  min-width: 130px;
  gap: 2px;
  padding: 11px 16px;
}
.cat-var-ispol .cat-var-chip small {
  font:
    600 11px "Open Sans",
    sans-serif;
  opacity: 0.6;
}

/* Price + CTA */
.cat-buy {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--bd);
}
.cat-price-note {
  font-size: 12px;
  color: var(--mu);
  margin-bottom: 18px;
  line-height: 1.5;
}
/* Кнопка заявки — теперь единственный элемент CTA, текст «Цена по запросу» */
.cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ac);
  color: var(--wh);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 28px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cat-btn:hover {
  opacity: 0.88;
  color: var(--wh);
}
.cat-btn--wide {
  width: 100%;
  padding: 14px;
  font-size: 15px;
}
.cat-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.cat-anchors a {
  font:
    600 12px "Open Sans",
    sans-serif;
  color: var(--dk);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(38, 60, 88, 0.07);
  transition: 0.15s;
}
.cat-anchors a:hover {
  background: var(--ac);
  color: var(--wh);
}

/* ═══════════ STICKY ANCHOR NAV (sections) ═══════════ */
.cat-anchornav {
  position: sticky;
  top: 0; /* дозаполнить высотой реального sticky-хедера Тильды, если он есть */
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  margin-top: 44px;
}
.cat-anchornav-in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-anchornav-in::-webkit-scrollbar {
  display: none;
}
.cat-anchornav a {
  font:
    700 13px "Open Sans",
    sans-serif;
  color: var(--mu);
  text-decoration: none;
  padding: 16px 18px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s;
}
.cat-anchornav a:hover {
  color: var(--txd);
}
.cat-anchornav a.active {
  color: var(--ac);
  border-bottom-color: var(--ac);
}

/* ═══════════ CHARACTERISTIC SECTIONS ═══════════ */
.cat-sections {
  background: var(--bg);
  padding: 16px 0 64px;
  counter-reset: catsec;
}
.cat-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--bd);
  counter-increment: catsec;
}
.cat-section:last-child {
  border-bottom: none;
}
.cat-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.cat-section-num {
  font:
    400 26px/1 "Vysota",
    sans-serif;
  color: var(--ac);
  flex-shrink: 0;
}
.cat-section .cat-section-num::before {
  content: counter(catsec, decimal-leading-zero);
}
.cat-section-title {
  font:
    700 clamp(19px, 2cqw, 24px)/1.2 "Open Sans",
    sans-serif;
  color: var(--txd);
}
.cat-section-sub {
  font-size: 13px;
  color: var(--mu);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 80ch;
}

/* Spec table */
.cat-table-wrap {
  overflow-x: auto;
  border-radius: var(--r14);
  border: 1px solid var(--bd);
  background: var(--wh);
  -webkit-overflow-scrolling: touch;
}
table.cat-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 13px;
}
/* when a field concatenates several raw table chunks (e.g. a size chart split
   across KVU1-6 / KVU7-12 / ...), each renders as its own .cat-table-wrap card —
   space them apart */
.cat-table-wrap + .cat-table-wrap {
  margin-top: 20px;
}
table.cat-table caption {
  caption-side: top;
  text-align: left;
  font:
    700 13px "Open Sans",
    sans-serif;
  color: var(--txd);
  padding: 14px 16px 12px;
}
table.cat-table thead th {
  background: var(--dk);
  color: var(--wh);
  font:
    700 12px "Open Sans",
    sans-serif;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}
table.cat-table thead tr.grp th {
  background: var(--dkk);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}
table.cat-table tbody td {
  padding: 9px 12px;
  text-align: center;
  border: 1px solid var(--bd);
  color: var(--txd);
  white-space: nowrap;
}
table.cat-table tbody tr:nth-child(even) td {
  background: #f5f6f8;
}
table.cat-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
}

/* Aero grid (images) */
.cat-aero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cat-graph {
  background: var(--wh);
  border-radius: var(--r14);
  border: 1px solid var(--bd);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-graph-img {
  aspect-ratio: 16/11;
  border-radius: var(--r08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
}
.cat-graph-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cat-graph-cap {
  font:
    600 12px "Open Sans",
    sans-serif;
  color: var(--mu);
  text-align: center;
}

/* Gabarit drawings */
.cat-draw-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.cat-draw {
  background: var(--wh);
  border-radius: var(--r14);
  border: 1px solid var(--bd);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-draw-img {
  aspect-ratio: 1/1;
  border-radius: var(--r08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6f8;
}
.cat-draw-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cat-draw-cap {
  font:
    600 12px "Open Sans",
    sans-serif;
  color: var(--mu);
  text-align: center;
}

/* Corpus-position subblock */
.cat-corpus {
  margin-top: 24px;
}
.cat-corpus-ttl {
  font:
    700 15px "Open Sans",
    sans-serif;
  color: var(--txd);
  margin-bottom: 16px;
}
.cat-corpus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.cat-pos {
  background: var(--wh);
  border-radius: var(--r08);
  border: 1px solid var(--bd);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.cat-pos-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: #f5f6f8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cat-pos-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cat-pos-cap {
  font:
    600 11px "Open Sans",
    sans-serif;
  color: var(--mu);
  text-align: center;
}

/* Placeholder image (striped) */
.ph-img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80px;
  background: repeating-linear-gradient(
    45deg,
    #eef1f5,
    #eef1f5 10px,
    #e4e8ee 10px,
    #e4e8ee 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-img span {
  font:
    600 11px ui-monospace,
    Menlo,
    monospace;
  color: var(--mu);
  background: rgba(255, 255, 255, 0.75);
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
  max-width: 90%;
}

/* ═══════════ SERIES HUB (Type B) ═══════════ */
.cat-series-desc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cat-series-desc li {
  font-size: 14px;
  color: var(--tx);
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.cat-series-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--ac);
  border-radius: 50%;
}
.cat-series-desc .grp {
  font:
    700 13px "Open Sans",
    sans-serif;
  color: var(--txd);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 0;
  margin-top: 12px;
}
.cat-series-desc .grp::before {
  display: none;
}

.cat-sizes {
  background: var(--bg);
  padding: 8px 0 72px;
}
.cat-sizes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.cat-size-card {
  background: var(--wh);
  border-radius: var(--r14);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  border: 1px solid var(--bd);
}
.cat-size-card:hover {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.cat-size-img {
  aspect-ratio: 4/3;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.cat-size-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cat-size-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.cat-size-name {
  font:
    700 15px/1.3 "Open Sans",
    sans-serif;
  color: var(--txd);
}
.cat-size-price {
  font:
    600 13px "Open Sans",
    sans-serif;
  color: var(--mu);
  margin-top: auto;
}
.cat-size-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font:
    700 13px "Open Sans",
    sans-serif;
  color: var(--ac);
  margin-top: 10px;
}
.cat-size-link svg {
  transition: transform 0.18s;
}
.cat-size-card:hover .cat-size-link svg {
  transform: translateX(4px);
}

/* ═══════════ RESPONSIVE ═══════════ */
@container (max-width:900px) {
  .cat-two {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cat-gallery {
    position: static;
  }
  .cat-anchornav,
  .cat-gallery {
    top: auto;
  }
  .cat-corpus-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-sizes-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cat-aero-grid {
    grid-template-columns: 1fr;
  }
}
@container (max-width:540px) {
  .cat-hero-in {
    padding: 24px 0 30px;
  }
  .cat-bc {
    gap: 5px;
  }
  .cat-corpus-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cat-sizes-grid {
    grid-template-columns: 1fr;
  }
  .cat-anchornav {
    top: 0;
  }
}