/* ============================================================
   KQT — TRANG CATALOGUE & TÀI LIỆU KỸ THUẬT (/catalogue/)
   Nguồn: kqt_baohanh... tương tự, thư mục website KQT.COM (9)/flatsome/
   {FLATSOME_BUILD_CATALOGUE.md, PROMPT_CLAUDECODE_CATALOGUE.md,
   catalogue.html, kqt-catalogue.css, kqt-catalogue.js}.
   Biến dùng chung (--navy, --gold*, --taupe*, --radius*, --shadow*, --ink*,
   --on-navy*, --cream, --paper, --white, --sans, --ease) ĐÃ khai báo site-wide
   trong kqt-chrome.css :root — KHÔNG khai lại ở đây (giống kqt-bao-hanh.css).
   Toàn bộ selector SCOPE dưới body.kqt-catalogue (thêm ở functions.php qua
   body_class) để không rò rỉ sang trang khác — các class .cat-* tuy khá riêng
   nhưng vẫn theo đúng quy ước an toàn đã dùng cho trang bảo hành (body.kqt-bh).
   ============================================================ */

/* ---------- nền trang + nhịp section: hero(navy) → trắng → navy(S3) → kem(S4)
   → gold-tint(CTA). THIẾU Ở BẢN ĐẦU (gây bug "màu/kích thước không giống
   thiết kế" Quyết báo): .section/.section--navy/.section--cream/.eyebrow là
   class DÙNG CHUNG do template-parts render ra (cat-tech.php, cat-print.php…)
   nhưng file CSS này chưa từng khai — nên S3 (Công cụ chuyên gia) hiện màu xám
   mặc định của Flatsome .section thay vì navy, S4 không cream, mọi eyebrow mất
   dáng chữ hoa/giãn cách. Cùng khuôn đã có sẵn ở kqt-bao-hanh.css. ---------- */
body.kqt-catalogue{ background:var(--white); color-scheme:light; }
html:has(body.kqt-catalogue){ background:var(--white); color-scheme:light; }

body.kqt-catalogue .section{ padding-block:clamp(56px,7.4vw,96px); }
body.kqt-catalogue .section--cream{ background:var(--cream); }
body.kqt-catalogue .section--navy{ background:#0F1B2D; }

body.kqt-catalogue .eyebrow{ font-family:var(--sans); font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--taupe); }
body.kqt-catalogue .section--navy .eyebrow{ color:var(--gold-light); }

/* Buttons: .btn/.btn--gold gốc đã có sẵn ở kqt-chrome.css (nạp mọi trang),
   chỉ thiếu biến thể --ghost (viền, không nền) — trang trước cũng thiếu y
   hệt cho tới khi vá (xem kqt-bao-hanh.css dòng 20-23). */
body.kqt-catalogue .btn--ghost{ background:transparent; border:1px solid var(--navy); color:var(--navy); }
body.kqt-catalogue .btn--ghost:hover{ background:var(--navy); color:var(--on-navy); }
body.kqt-catalogue .section--navy .btn--ghost,
body.kqt-catalogue .cat-hero .btn--ghost{ background:transparent; border:1px solid rgba(244,241,233,.4); color:var(--on-navy); }
body.kqt-catalogue .section--navy .btn--ghost:hover,
body.kqt-catalogue .cat-hero .btn--ghost:hover{ background:rgba(244,241,233,.12); border-color:var(--gold-light); color:var(--on-navy); }

/* breadcrumb (giống .crumb của trang khác — nếu theme đã có global .crumb thì
   khối này vô hại vì cùng thiết kế, chỉ đảm bảo có mặt trên trang catalogue). */
body.kqt-catalogue .crumb{ padding:18px 0 4px; }
body.kqt-catalogue .crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; font-size:13px; color:var(--taupe); }
body.kqt-catalogue .crumb li{ display:flex; align-items:center; gap:8px; }
body.kqt-catalogue .crumb li::after{ content:"›"; color:var(--gold); font-size:14px; }
body.kqt-catalogue .crumb li:last-child::after{ display:none; }
body.kqt-catalogue .crumb li[aria-current]{ color:var(--ink-2); font-weight:600; }
body.kqt-catalogue .crumb a{ color:var(--taupe); transition:color .2s; }
body.kqt-catalogue .crumb a:hover{ color:var(--gold-dark); }

/* section head */
body.kqt-catalogue .cat-head{ max-width:64ch; }
body.kqt-catalogue .cat-head .eyebrow{ margin-bottom:14px; }
body.kqt-catalogue .cat-head h2{ font-size:clamp(25px,3vw,38px); font-weight:700; line-height:1.18;
  color:var(--navy); text-wrap:balance; }
body.kqt-catalogue .cat-head p{ margin-top:14px; color:var(--ink-2); line-height:1.72; }
body.kqt-catalogue .section--navy .cat-head h2{ color:var(--white); }
body.kqt-catalogue .section--navy .cat-head p{ color:var(--on-navy-2); }

/* ============ S1 · HERO ============ */
body.kqt-catalogue .cat-hero{ position:relative; background:var(--navy); overflow:hidden; }
body.kqt-catalogue .cat-hero__bg{ position:absolute; inset:0; z-index:0; }
body.kqt-catalogue .cat-hero__bg .ph{ position:absolute; inset:0; }
body.kqt-catalogue .cat-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.26; }
body.kqt-catalogue .cat-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,#0B1626 8%,rgba(11,22,38,.9) 48%,rgba(11,22,38,.48) 100%); }
body.kqt-catalogue .cat-hero .wrap{ position:relative; z-index:2; }
body.kqt-catalogue .cat-hero__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,56px);
  align-items:center; padding-block:clamp(38px,5.2vw,68px); }
body.kqt-catalogue .cat-hero .eyebrow{ color:var(--gold-light); }
body.kqt-catalogue .cat-hero h1{ font-size:clamp(28px,4vw,48px); font-weight:800; line-height:1.14; color:#fff;
  letter-spacing:-.01em; margin:16px 0 16px; text-wrap:balance; }
body.kqt-catalogue .cat-hero p{ font-size:clamp(15px,1.3vw,18px); color:rgba(244,241,233,.84); line-height:1.65; max-width:52ch; }
body.kqt-catalogue .cat-hero__stats{ display:flex; flex-wrap:wrap; gap:34px; margin-top:30px; padding-top:24px;
  border-top:1px solid rgba(212,175,55,.24); }
body.kqt-catalogue .cat-hero__stats div b{ display:block; font-size:30px; font-weight:800; color:var(--gold-light); line-height:1;
  font-variant-numeric:tabular-nums; }
body.kqt-catalogue .cat-hero__stats div span{ display:block; margin-top:7px; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(244,241,233,.62); }
body.kqt-catalogue .cat-hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* cụm bìa xếp lớp */
body.kqt-catalogue .cat-stack{ position:relative; aspect-ratio:4/3.2; }
body.kqt-catalogue .cat-stack__i{ position:absolute; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(212,175,55,.3); box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }
body.kqt-catalogue .cat-stack__i .ph{ width:100%; height:100%; }
body.kqt-catalogue .cat-stack__i img{ width:100%; height:100%; object-fit:cover; }
body.kqt-catalogue .cat-stack__i:nth-child(1){ left:0; top:8%; width:52%; height:78%; transform:rotate(-5deg); z-index:1; }
body.kqt-catalogue .cat-stack__i:nth-child(2){ right:4%; top:0; width:54%; height:84%; transform:rotate(4deg); z-index:2; }
body.kqt-catalogue .cat-stack__i:nth-child(3){ left:22%; bottom:0; width:50%; height:62%; transform:rotate(-1.5deg); z-index:3; }

/* ============ S2 · BỘ LỌC + LƯỚI CATALOGUE ============ */
body.kqt-catalogue .cat-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-top:30px; }
body.kqt-catalogue .cat-search{ display:flex; align-items:center; gap:9px; height:48px; padding:0 16px; background:var(--white);
  border:1px solid var(--taupe-20); border-radius:999px; min-width:260px; flex:1; max-width:400px;
  transition:border-color .22s; }
body.kqt-catalogue .cat-search:focus-within{ border-color:var(--gold); }
body.kqt-catalogue .cat-search svg{ width:17px; height:17px; stroke:var(--taupe); fill:none; stroke-width:1.7; flex:none; }
body.kqt-catalogue .cat-search input{ flex:1; min-width:0; margin:0; border:0; outline:0; background:transparent;
  box-shadow:none; -webkit-appearance:none; appearance:none;
  font-family:var(--sans); font-size:14.5px; color:var(--ink); }
/* ⚠️ 2026-09-11 — "viền vuông trong ô tìm kiếm": input kế thừa box-shadow
 * inset mặc định của theme cho input thường (inset 0 1px 2px rgba(0,0,0,.1))
 * — input không có border-radius riêng nên shadow này vẽ thành viền/bóng
 * GÓC VUÔNG nằm lọt bên trong viền bo tròn (pill) của .cat-search, nhìn như
 * 2 lớp viền chồng nhau. Thêm box-shadow:none để chỉ còn 1 viền bo tròn của
 * .cat-search. Kèm appearance:none phòng browser áp lại chrome mặc định cho
 * input[type=search] (vòng lặp icon "x" xoá / viền field native). */
/* ⚠️ 2026-09-11 — "icon bị lệch": input kế thừa margin-bottom mặc định của
 * theme (margin:0 0 1em → 14.5px ở font-size này) mà rule ở trên KHÔNG reset,
 * nên hộp margin của input lệch tâm trong .cat-search (flex align-items:center
 * canh theo MARGIN BOX) trong khi icon svg không có margin → icon trông như
 * lệch xuống so với dòng chữ. Thêm margin:0 để input canh giữa đúng với icon. */
body.kqt-catalogue .cat-search input::placeholder{ color:var(--ink-3); }
body.kqt-catalogue .cat-count{ font-size:13.5px; color:var(--ink-3); }
body.kqt-catalogue .cat-count b{ color:var(--navy); font-weight:700; }

body.kqt-catalogue .cat-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
body.kqt-catalogue .cat-tab{ padding:10px 18px; font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink-2); background:var(--white); border:1px solid var(--taupe-15);
  border-radius:999px; transition:.24s var(--ease); cursor:pointer; }
body.kqt-catalogue .cat-tab:hover{ border-color:var(--gold); color:var(--navy); }
body.kqt-catalogue .cat-tab.is-on{ background:var(--navy); border-color:var(--navy); color:var(--on-navy); }

body.kqt-catalogue .cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:28px; }
body.kqt-catalogue .cat-item{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); overflow:hidden; transition:.3s var(--ease); }
/* Bẫy: `[hidden]` mặc định của trình duyệt (specificity 0,1,0) bị đè bởi
   `.cat-item{display:flex}` ở trên (0,2,1) — nên JS gán `it.hidden = true`
   để lọc tab/tìm kiếm không hề ẩn thẻ, chỉ có bộ đếm số lượng đổi đúng còn
   lưới vẫn hiện tất cả. Phải khai riêng, specificity cao hơn (0,3,1). */
body.kqt-catalogue .cat-item[hidden]{ display:none; }
body.kqt-catalogue .cat-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--taupe-20); }
body.kqt-catalogue .cat-item__cover{ position:relative; }
body.kqt-catalogue .cat-item__cover .ph{ aspect-ratio:3/4; background:linear-gradient(150deg,var(--cream),var(--paper)); }
body.kqt-catalogue .cat-item__cover img{ transition:transform .6s var(--ease); }
body.kqt-catalogue .cat-item:hover .cat-item__cover img{ transform:scale(1.04); }
body.kqt-catalogue .cat-item__badge{ position:absolute; left:14px; top:14px; z-index:2; padding:5px 12px; border-radius:999px;
  background:var(--gold-grad); color:#2A2008; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }
body.kqt-catalogue .cat-item__fmt{ position:absolute; right:14px; top:14px; z-index:2; padding:5px 11px; border-radius:999px;
  background:var(--navy); color:var(--on-navy); font-size:11px; font-weight:700; letter-spacing:.06em; }
body.kqt-catalogue .cat-item__b{ display:flex; flex-direction:column; flex:1; padding:20px; }
body.kqt-catalogue .cat-item__brand{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dark); }
body.kqt-catalogue .cat-item__b h3{ margin-top:8px; font-size:16.5px; font-weight:700; color:var(--navy); line-height:1.35; }
body.kqt-catalogue .cat-item__desc{ margin-top:8px; font-size:13.5px; color:var(--ink-2); line-height:1.6; flex:1; }
body.kqt-catalogue .cat-item__meta{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--taupe-10); font-size:12.5px; color:var(--ink-3); }
body.kqt-catalogue .cat-item__meta span{ display:inline-flex; align-items:center; gap:6px; }
body.kqt-catalogue .cat-item__meta svg{ width:14px; height:14px; stroke:var(--taupe); fill:none; stroke-width:1.7; flex:none; }
body.kqt-catalogue .cat-item__act{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:16px; }
body.kqt-catalogue .cat-item__dl{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px;
  padding:0 16px; border-radius:var(--radius); background:var(--gold-grad); color:#2A2008;
  font-size:13.5px; font-weight:700; letter-spacing:.02em; transition:.26s var(--ease); }
body.kqt-catalogue .cat-item__dl:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:var(--shadow-gold); }
body.kqt-catalogue .cat-item__dl svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; }
body.kqt-catalogue .cat-item__view{ display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:var(--radius);
  border:1px solid var(--taupe-20); transition:.24s var(--ease); background:transparent; }
/* ⚠️ 2026-09-11 — "icon con mắt lệch qua 1 bên": THIẾU padding:0 ở trên nên
 * <button> kế thừa padding mặc định của theme (~18.6px trái/phải) đè lên hộp
 * 44×44 cố định → phần diện tích còn lại cho icon 17px bị ép lệch hẳn về một
 * bên thay vì nằm giữa (đo được: cách trái 19.6px vs cách phải 7.4px). Cùng
 * họ lỗi với "icon bị lệch" ở .cat-search input (thiếu reset thuộc tính kế
 * thừa từ theme) — bài học: MỌI phần tử form gốc (button/input) trong khối
 * canh-giữa-bằng-flex/grid đều phải tự reset padding/margin, đừng tin mặc định. */
body.kqt-catalogue .cat-item__view svg{ width:17px; height:17px; stroke:var(--taupe); fill:none; stroke-width:1.7; }
body.kqt-catalogue .cat-item__view:hover{ border-color:var(--gold); background:var(--gold-tint); }
body.kqt-catalogue .cat-item__view:hover svg{ stroke:var(--gold-dark); }
body.kqt-catalogue .cat-empty{ display:none; padding:44px 20px; text-align:center; color:var(--ink-3); font-size:15px;
  background:var(--white); border:1px dashed var(--taupe-20); border-radius:var(--radius-lg); margin-top:28px; }
body.kqt-catalogue .cat-empty.is-on{ display:block; }
body.kqt-catalogue .cat-empty a{ color:var(--gold-dark); font-weight:700; }

/* ============ S3 · THƯ VIỆN KỸ THUẬT (navy) ============ */
body.kqt-catalogue .cat-tech{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
body.kqt-catalogue .tech-card{ display:flex; flex-direction:column; padding:26px 24px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06); border:1px solid rgba(244,241,233,.16); transition:.28s var(--ease); }
body.kqt-catalogue .tech-card:hover{ border-color:var(--gold); background:rgba(255,255,255,.09); transform:translateY(-3px); }
body.kqt-catalogue .tech-card__ic{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.34); margin-bottom:16px; }
body.kqt-catalogue .tech-card__ic svg{ width:23px; height:23px; stroke:var(--gold-light); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
body.kqt-catalogue .tech-card h3{ font-size:17px; font-weight:700; color:#fff; margin-bottom:8px; }
body.kqt-catalogue .tech-card p{ font-size:13.5px; color:var(--on-navy-2); line-height:1.66; flex:1; }
body.kqt-catalogue .tech-card__go{ margin-top:16px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-light); display:inline-flex; align-items:center; gap:7px; }
body.kqt-catalogue .tech-card__go svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .24s; }
body.kqt-catalogue .tech-card:hover .tech-card__go svg{ transform:translateX(4px); }

/* ============ S4 · NHẬN BẢN IN ============ */
body.kqt-catalogue .cat-print{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,52px); align-items:center; }
body.kqt-catalogue .cat-print__b h2{ font-size:clamp(24px,2.8vw,36px); font-weight:700; color:var(--navy); line-height:1.2;
  margin-top:14px; }
body.kqt-catalogue .cat-print__b p{ margin-top:14px; font-size:15px; color:var(--ink-2); line-height:1.72; max-width:54ch; }
body.kqt-catalogue .cat-print__list{ list-style:none; display:grid; gap:11px; margin-top:20px; padding:0; }
body.kqt-catalogue .cat-print__list li{ display:flex; gap:12px; font-size:14.5px; color:var(--ink-2); line-height:1.6; }
body.kqt-catalogue .cat-print__list svg{ width:18px; height:18px; stroke:var(--gold-dark); fill:none; stroke-width:2;
  flex:none; margin-top:2px; }
body.kqt-catalogue .cat-form{ background:var(--white); padding:clamp(24px,2.8vw,34px); border:1px solid var(--taupe-15);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-2); }
body.kqt-catalogue .cat-form h3{ font-size:19px; font-weight:700; color:var(--navy); }
body.kqt-catalogue .cat-form__sub{ margin-top:8px; font-size:13.5px; color:var(--ink-3); line-height:1.6; }
body.kqt-catalogue .cat-fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:20px; }
body.kqt-catalogue .cat-f{ display:flex; flex-direction:column; }
body.kqt-catalogue .cat-f--full{ grid-column:1 / -1; }
body.kqt-catalogue .cat-f label{ font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:8px;
  text-transform:none; }
body.kqt-catalogue .cat-f label em{ color:#B23B2E; font-style:normal; }
body.kqt-catalogue .cat-f input, body.kqt-catalogue .cat-f select, body.kqt-catalogue .cat-f textarea{
  height:46px; padding:0 14px; border:1px solid var(--taupe-20);
  background:var(--white); font-family:var(--sans); font-size:14.5px; color:var(--ink);
  border-radius:var(--radius); transition:border-color .2s; width:100%; }
body.kqt-catalogue .cat-f textarea{ height:auto; min-height:80px; padding:12px 14px; resize:vertical; line-height:1.6; }
body.kqt-catalogue .cat-f input:focus, body.kqt-catalogue .cat-f select:focus, body.kqt-catalogue .cat-f textarea:focus{
  outline:0; border-color:var(--gold); }
body.kqt-catalogue .cat-form__foot{ margin-top:20px; }
body.kqt-catalogue .cat-form__foot small{ display:block; margin-top:11px; font-size:12.5px; color:var(--ink-3); line-height:1.55; }
body.kqt-catalogue .cat-form__ok{ display:none; margin-top:15px; padding:13px 16px; background:var(--gold-tint);
  border:1px solid rgba(154,116,42,.24); border-radius:var(--radius); font-size:14px;
  color:var(--navy); font-weight:600; }
body.kqt-catalogue .cat-form__ok.is-on{ display:block; }
body.kqt-catalogue .cat-form__err{ display:none; margin-top:15px; padding:13px 16px; background:#FBF1EF;
  border:1px solid rgba(178,59,46,.28); border-radius:var(--radius); font-size:14px; color:#8A2F24; font-weight:600; }
body.kqt-catalogue .cat-form__err.is-on{ display:block; }

/* ============ S5 · CTA CUỐI ============ */
body.kqt-catalogue .cat-cta{ background:var(--gold-tint); border-top:1px solid rgba(154,116,42,.2);
  position:relative; overflow:hidden; }
body.kqt-catalogue .cat-cta::before{ content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 88% 16%, #FBF3E0, transparent 62%); }
body.kqt-catalogue .cat-cta__in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto;
  gap:clamp(22px,4vw,46px); align-items:center; padding-block:clamp(38px,4.4vw,58px); }
body.kqt-catalogue .cat-cta h2{ font-size:clamp(23px,2.8vw,36px); font-weight:700; color:var(--navy);
  line-height:1.16; text-wrap:balance; }
body.kqt-catalogue .cat-cta p{ margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.6; max-width:58ch; }
body.kqt-catalogue .cat-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; }
body.kqt-catalogue .cat-cta__btns .btn--ghost{ background:var(--white); }

/* ============ LIGHTBOX XEM BÌA (nằm ngoài .wrap, ngay dưới <body>) ============ */
body.kqt-catalogue .cat-lb{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:24px;
  background:rgba(8,16,28,.92); }
body.kqt-catalogue .cat-lb.is-on{ display:grid; }
body.kqt-catalogue .cat-lb img{ max-width:min(720px,90vw); max-height:80vh; object-fit:contain;
  border-radius:var(--radius-lg); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
body.kqt-catalogue .cat-lb__cap{ margin-top:14px; text-align:center; color:var(--on-navy); font-size:14px; }
body.kqt-catalogue .cat-lb__x{ position:absolute; top:18px; right:20px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(244,241,233,.3); background:transparent; }
body.kqt-catalogue .cat-lb__x svg{ width:20px; height:20px; stroke:var(--on-navy); fill:none; stroke-width:1.8; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  body.kqt-catalogue .cat-hero__grid{ grid-template-columns:1fr; }
  body.kqt-catalogue .cat-stack{ order:-1; max-width:460px; margin-inline:auto; width:100%; }
  body.kqt-catalogue .cat-grid{ grid-template-columns:repeat(2,1fr); }
  body.kqt-catalogue .cat-tech{ grid-template-columns:1fr; }
  body.kqt-catalogue .cat-print{ grid-template-columns:1fr; }
  body.kqt-catalogue .cat-cta__in{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  body.kqt-catalogue .cat-grid{ grid-template-columns:1fr; gap:16px; }
  body.kqt-catalogue .cat-bar{ flex-direction:column; align-items:stretch; }
  body.kqt-catalogue .cat-search{ max-width:none; }
  body.kqt-catalogue .cat-count{ display:none; }
  body.kqt-catalogue .cat-fgrid{ grid-template-columns:1fr; }
  body.kqt-catalogue .cat-hero__stats{ gap:22px; }
  body.kqt-catalogue .cat-hero__btns{ flex-direction:column; align-items:stretch; }
  body.kqt-catalogue .cat-hero__btns .btn{ width:100%; }
  body.kqt-catalogue .cat-cta__btns{ width:100%; }
  body.kqt-catalogue .cat-cta__btns .btn{ flex:1; min-width:150px; }
}