@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --g50:#F4F6F2;--g100:#E2E8DC;--g200:#C5D4BA;--g400:#7D9B6A;--g600:#4A7035;--g800:#2A4A1A;
  --s50:#F7F8F7;--s100:#EAECEB;--s200:#CDD0CE;--s400:#8A9290;--s600:#545E5A;--s800:#2E3532;
  --leaf:#4A7035;--leaf-lt:#EAF3DE;--charcoal:#2E3532;--stone:#8A9290;--parchment:#F7F8F7;
  --r:10px;--wa:#25D366;
}
body{font-family:'Inter',sans-serif;background:var(--parchment);color:var(--charcoal);position:relative; margin: 5px;}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── HERO / FOOTER ─── */
.hero{background:var(--charcoal);padding:2.5rem 2rem 1.75rem;text-align:center;border-bottom:3px solid var(--leaf);border-radius: var(--r);}
.footer{background:var(--charcoal);padding:1.5rem 2rem;text-align:center;border-top:3px solid var(--leaf);border-radius: var(--r);}
.hero-eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--g200);margin-bottom:.6rem;font-weight:400;}
.hero-title{font-size:clamp(24px,4.5vw,40px);font-weight:400;color:#F7F8F7;line-height:1.15;margin-bottom:6px;}
.hero-title em{font-style:italic;color:#C5D4BA;}
.hero-sub{font-size:12px;color:var(--s400);letter-spacing:.5px;margin-bottom:1.75rem;}

/* ─── FILTERS ─── */
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.fbtn{font-size:11px;font-weight:400;letter-spacing:.8px;text-transform:uppercase;padding:6px 18px;border-radius:100px;cursor:pointer;transition:all .18s;border:1px solid rgba(197,212,186,.35);background:rgba(74,112,53,.1);color:rgba(197,212,186,.8);font-family:'Inter',sans-serif;}
.fbtn:hover{background:rgba(74,112,53,.25);color:#C5D4BA;}
.fbtn.active{background:var(--leaf);color:#F7F8F7;border-color:var(--leaf);font-weight:500;}

/* ─── MAIN / STATS ─── */
.main{padding:1.75rem 1rem 3rem;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--g200);border:1px solid var(--g200);border-radius:var(--r);overflow:hidden;margin-bottom:1.75rem;}
.stt{background:var(--s50);padding:.9rem 1rem;text-align:center;}
.stt-val{font-size:22px;color:var(--leaf);line-height:1;}
.stt-lbl{font-size:10px;color:var(--stone);letter-spacing:.3px;margin-top:3px;}

/* ─── GRID + CARDS ─── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(305px,1fr));gap:10px;}
.grid-break{grid-column:1/-1;height:0;}
.card{background:#fff;border-radius:var(--r);border:1px solid var(--s800);overflow:hidden;transition:transform .2s;display:flex;flex-direction:column; margin-top: 10px;}
.card:hover{transform:translateY(-4px);}
.card.hidden{display:none;}

/* ─── DIAGRAM + GALLERY BTN ─── */
.card-diagram{height:305px;background:var(--g50);border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:center;padding:12px;position:relative;overflow:hidden;}
.card-diagram svg,.card-diagram img{width:auto;height:100%;max-width:100%;object-fit:contain;}
.gallery-btn{
  position:absolute;bottom:8px;right:8px;
  display:flex;align-items:center;gap:5px;
  background:var(--charcoal);color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.3px;
  padding:5px 12px;border-radius:100px;border:none;cursor:pointer;
  transition:all .18s;opacity:.85;font-family:'Inter',sans-serif;
}
.gallery-btn:hover{background:var(--leaf);opacity:1;}
.gallery-btn i{font-size:12px;}
.card-diagram::after,
.detail-thumb-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='70'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='Arial' font-size='12' font-weight='bold' fill='white' opacity='0.18' transform='rotate(-20 100 35)'%3Ewww.napvitorladiszkont.hu%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 70px;
}

.detail-thumb-wrap::after {
  background-size: 80px 28px;
}

/* ─── CARD TOP / SPECS / FOOT ─── */
.card-top{padding:1.1rem 1.25rem .85rem;border-bottom:1px solid var(--g100);}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:3px 10px;border-radius:100px;margin-bottom:6px;flex:0 0 auto;}
.b-fix{background:var(--leaf-lt);color:var(--g800);}
.b-manu{background:#EBF0F8;color:#1E3F7A;}
.b-mot {
  background: #EBF0F8;
  color: #7095d6;
}
.b-perg{background:#F3EEEA;color:#6B4226;}
.b-footer{background:#d0d0d0;color:#000;}
.b-new {
  background: #FF5F1F;
  color: #000000;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.b-standard {
  background: #d3ef04;
  color: #000000;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.b-egyedi {
  background: #90d3e2;
  color: #020202;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.b-basic {
  background: #d2adf0;
  color: #020202;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.b-code {
  background: #d0d0d0;
  color: #000;
  font-size: 8px;
  font-family: ;
}
.card-name{font-size:17px;font-weight:900;color:var(--charcoal);margin-bottom:3px;}
.card-desc{font-size:11px;color:var(--stone);line-height:1.5;}
.specs{padding:1rem 1.25rem;flex:1;display:flex;flex-direction:column;gap:0;}
.spec{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--s600);gap:8px;}
.spec:last-child{border-bottom:none;}
.spec-lbl{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--stone);flex-shrink:0;}
.spec-lbl i{font-size:13px;color:var(--leaf);}
.spec-val{font-size:12px;font-weight:500;color:var(--charcoal);text-align:right;line-height:1.35;}
.card-foot {
  padding: .85rem 1.25rem;
  background: var(--g50);
  border-top: 1px solid var(--g100);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  align-items: center;
}
.card-foot .badge {
  margin: 0;
  justify-self: end;
}

.foot-lbl {
  font-size: 10px;
  color: var(--stone);
  letter-spacing: .3px;
  margin: 0;
  text-align: left;
}
.pikto-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;width:100%;}
.pikto{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--g50);border:1px solid var(--g100);border-radius:8px;padding:6px 10px;flex:1;min-width:56px;}
.pikto i{font-size:18px;color:var(--leaf);}
.pikto span{font-size:9px;color:var(--stone);text-align:center;line-height:1.3;letter-spacing:.2px;}

/* ─── CONTACT FAB ─── */
.contact-fab{
  position:fixed;top:18px;right:18px;z-index:1000;
  width:46px;height:46px;border-radius:50%;
  background:var(--charcoal);color:#fff;border:2px solid var(--leaf);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  transition:background .18s,transform .18s;
}
.contact-fab:hover{background:var(--leaf);transform:scale(1.08);}

.contact-panel{
  position:fixed;top:72px;right:18px;z-index:999;
  width:280px;background:#fff;border-radius:var(--r);
  border:1px solid var(--g200);
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  overflow:hidden;
  animation:slideDown .18s ease;
}
.contact-panel.hidden{display:none;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cp-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--charcoal);border-bottom:2px solid var(--leaf);}
.cp-title{font-size:14px;color:#fff;font-weight:600;}
.cp-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:16px;padding:2px 4px;transition:color .15s;}
.cp-close:hover{color:#fff;}
.cp-body{padding:.75rem 1rem;}
.cp-brand{font-size:11px;font-weight:600;color:var(--leaf);letter-spacing:.5px;text-transform:uppercase;margin-bottom:.6rem;}
.cp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--g50);font-size:12.5px;color:var(--charcoal);text-decoration:none;transition:color .15s;}
.cp-row:last-of-type{border-bottom:none;}
.cp-row i{font-size:15px;color:var(--leaf);width:18px;text-align:center;}
.cp-row:hover{color:var(--leaf);}
.cp-wa i{color:var(--wa)!important;}
.cp-wa:hover{color:var(--wa)!important;}
.cp-divider{height:1px;background:var(--g100);margin:.5rem 0;}
.cp-sub{font-size:10px;color:var(--stone);text-align:center;}

/* ─── USEFUL LINKS ─── */
.useful-links{
  margin-top:2.5rem;
  background:#fff;border:1px solid var(--g200);border-radius:var(--r);
  overflow:hidden;
  margin-bottom: 10px;
}
.ul-header{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 1.5rem;
  background:var(--charcoal);border-bottom:2px solid var(--leaf);
}
.ul-icon{font-size:24px;color:var(--g200);}
.ul-title{font-size:18px;color:#fff;margin-bottom:2px;}
.ul-sub{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.3px;}
.ul-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--g100);}
.ul-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:1.25rem 1rem;text-align:center;
  background:#fff;text-decoration:none;
  transition:background .18s;
}
.ul-card:hover{background:var(--leaf-lt);}
.ul-card-wa .ul-card-icon{color:var(--wa)!important;}
.ul-card-wa:hover{background:#e8faf0!important;}
.ul-card-icon{font-size:24px;color:var(--leaf);}
.ul-card-label{font-size:12px;font-weight:600;color:var(--charcoal);}
.ul-card-desc{font-size:10.5px;color:var(--stone);}

/* ─── GALLERY MODAL ─── */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(26,22,18,.7);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#fff;border-radius:var(--r);width:100%;max-width:680px;
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;
}
.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.25rem;background:var(--charcoal);border-bottom:2px solid var(--leaf);
  flex-shrink:0;
}
.modal-header span{font-family:'Playfair Display',serif;font-size:16px;color:#fff;font-weight:600;}
.modal-close{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:18px;transition:color .15s;}
.modal-close:hover{color:#fff;}
.modal-body{overflow-y:auto;flex:1;padding:1.25rem;}
.modal-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;padding:3rem 1rem;color:var(--stone);text-align:center;
}
.modal-placeholder i{font-size:48px;color:var(--g200);}
.modal-placeholder p{font-size:13px;line-height:1.6;}
.modal-hint{font-size:11px;color:var(--g400)!important;font-family:monospace;}
.modal-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.modal-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;cursor:zoom-in;transition:opacity .15s;}
.modal-img:hover{opacity:.88;}
.modal-footer{
  display:flex;gap:8px;padding:.9rem 1.25rem;border-top:1px solid var(--g100);
  background:var(--g50);flex-shrink:0;flex-wrap:wrap;
}
.modal-link{
  display:flex;align-items:center;gap:7px;flex:1;justify-content:center;
  padding:8px 14px;border-radius:100px;font-size:12px;font-weight:500;
  text-decoration:none;transition:all .18s;white-space:nowrap;
  background:var(--charcoal);color:#fff;
}
.modal-link:hover{background:var(--leaf);}
.modal-link-wa{background:var(--wa);}
.modal-link-wa:hover{background:#1da851;}

/* ─── RESPONSIVE ─── */
@media(max-width:520px){
  .hero{padding:2rem 1rem 1.5rem;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .grid{grid-template-columns:1fr;}
  .contact-panel{width:calc(100vw - 36px);}
  .ul-grid{grid-template-columns:repeat(2,1fr);}
  .modal-footer{flex-direction:column;}
}


.cat-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--g400);
  border-radius: var(--r);
  border: 2px solid var(--leaf);
  margin-bottom: 10px;
  margin-top: 10px;
}

.cat-heading-icon {
  font-size: 22px;
  color: var(--charcoal);
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.cat-heading-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.cat-heading-sub {
  font-size: 11px;
  color: var(--s800);
  letter-spacing: 0.3px;
}

.parts-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}

.part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 60px;
}

.part img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--g100);
}

.part span {
  font-size: 9px;
  color: var(--stone);
  text-align: center;
  line-height: 1.3;
}

.detail-thumb {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  padding: 0 !important;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 5;
  cursor: zoom-in;
  transition: transform 0.18s;
}

.detail-thumb:hover {
  transform: scale(2.8);
  transform-origin: top right;
  z-index: 20;
}

.card-diagram img:not(.detail-thumb) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.card.unavailable {
  opacity: 0.65;
  position: relative;
}

.card.unavailable::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: var(--r);
  pointer-events: none;
  background: repeating-linear-gradient(-45deg,
      rgba(0, 0, 0, 0.04) 0px,
      rgba(0, 0, 0, 0.04) 8px,
      transparent 8px,
      transparent 18px);
}

.card.unavailable::after {
  content: 'Nem rendelhető';
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 20;
  background: #f56767;
  color: #000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1,3px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  pointer-events: none;
}

.card-diagram img.img-cover {
  object-fit: cover !important;
  padding: 0 !important;
}

.fbtn2 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .18s;
  border: 1px solid rgba(197, 212, 186, .35);
  background: rgba(74, 112, 53, .1);
  color: rgba(197, 212, 186, .8);
  font-family: 'Inter', sans-serif;
}

.fbtn2:hover {
  background: rgba(74, 112, 53, .25);
  color: #C5D4BA;
}

.fbtn2.active {
  background: var(--leaf);
  color: #F7F8F7;
  border-color: var(--leaf);
  font-weight: 500;
}

/* ── PRICE GAUGE ── */
.price-gauge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pg-bar {
  width: 60px;
  height: 10px;
  background: var(--g100);
  border-radius:6px;
  overflow: hidden;
}

.pg-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--leaf), #F39C12);
  transition: width .3s;
}

[data-level="3"] .pg-fill {
  background: linear-gradient(90deg, #E67E22, #F39C12);
}

[data-level="4"] .pg-fill {
  background: linear-gradient(90deg, #C0392B, #E74C3C);
}

.pg-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 1px;
}

/* ── COMPARE CHECKBOX ── */
.compare-cb-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 15;
  cursor: pointer;
}

.compare-cb-wrap input {
  display: none;
}

.compare-cb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid var(--g200);
  color: var(--stone);
  font-size: 13px;
  transition: all 0.18s;
  backdrop-filter: blur(4px);
}

.compare-cb-wrap input:checked+.compare-cb-icon {
  background: var(--leaf);
  border-color: var(--leaf);
  color: #fff;
  box-shadow: 0 2px 8px rgba(74, 112, 53, 0.4);
}

.compare-cb-wrap:hover .compare-cb-icon {
  border-color: var(--leaf);
  color: var(--leaf);
}

.card.compare-selected {
  border-color: var(--leaf) !important;
  box-shadow: 0 0 0 2px var(--leaf);
}

/* ── COMPARE BAR ── */
.compare-bar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--charcoal);
  border-bottom: 2px solid var(--leaf);
  padding: 10px 1rem;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: var(--r);
  transition: all 0.2s;
}

.compare-bar.hidden {
  display: none;
}

.compare-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.compare-bar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--g200);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.compare-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.compare-chip {
  background: rgba(74, 112, 53, 0.3);
  border: 1px solid var(--leaf);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
}

.compare-go-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--leaf);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.18s;
  white-space: nowrap;
}

.compare-go-btn:hover {
  background: var(--g400);
}

.compare-clear-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.compare-clear-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ── COMPARE TABLE ── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 500px;
}

.compare-table th {
  background: var(--charcoal);
  color: #fff;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--s800);
  min-width: 160px;
}

.compare-table th:first-child {
  background: var(--s800);
  text-align: left;
  width: 140px;
}

.compare-table td {
  padding: 8px 14px;
  border: 1px solid var(--g100);
  text-align: center;
  color: var(--charcoal);
  vertical-align: middle;
}

.compare-table td:first-child {
  background: var(--g50);
  font-size: 11px;
  color: var(--stone);
  text-align: left;
  font-weight: 500;
}

.compare-table tr:nth-child(even) td {
  background: #fff;
}

.compare-table tr:nth-child(odd) td {
  background: var(--s50);
}

.compare-table tr:nth-child(odd) td:first-child {
  background: var(--g50);
}

.compare-table .ct-img {
  width: 100%;
  max-height: 90px;
  object-fit: contain;
  padding: 4px;
}

.footnote-ref {
  display: inline-flex;
    justify-content: center;
    align-items: center;
  
    width: 14px;
    height: 14px;
  
    border: 1px solid #666;
    border-radius: 50%;
  
    font-size: 9px;
    color: inherit;
    text-decoration: none;
    line-height: 1;
}

.spec-lbl sup {
  vertical-align: super;
  font-size: 8px;
  line-height: 0;
}

.spec-lbl sup a {
  color: inherit;
  text-decoration: none;
}

.footnotes {
  margin-top: 18px;
  border-top: 1px solid #d9d9d9;
  grid-column: 1/-1;
}

.footnote {
  display: grid;
  grid-template-columns: 30px 220px minmax(0, 1fr);
  column-gap: 16px;

  align-items: start;

  padding: 16px 0;
  border-bottom: 1px solid #ececec;
}

.footnote:last-child {
  border-bottom: none;
}

.footnote-num {
  width: 18px;
  height: 18px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  background: #5a7f45;
  color: #fff;

  font-size: 10px;
  font-weight: 700;

  margin-top: 2px;
}

.footnote-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--stone);
  line-height: 1.35;
}

.footnote-text {
  min-width: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #353535;
}

.cat-subheading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: white;
  border-radius: var(--r);
  border: 2px solid var(--leaf);
  margin-bottom: 10px;
  margin-top: 10px;
  width: 97%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}


.cat-subheading-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--charcoal);
  margin-bottom: 2px;
}

.cat-subheading-sub {
  font-size: 12px;
  color: var(--s800);
  letter-spacing: 0.3px;
}

.square {
  width: 20px;
  height: 20px;
  background: #2e7d32;
}

.rectangle {
  width: 20px;
  height: 10px;
  background: #2e7d32;
}

.triangle {
  width: 20px;
  height: 15px;
  background: #2e7d32;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.right-triangle {
  width: 20px;
  height: 20px;
  background: #2e7d32;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.trapezoid {
  width: 20px;
  height: 10px;
  background: #2e7d32;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.irregular-sail {
  width: 30px;
  height: 20px;
  background: #2e7d32;

  clip-path: polygon(8% 5%,
      96% 0%,
      88% 100%,
      0% 88%);
}

.formak {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.forma {
  width: 50px;
    height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border: 1px solid #ddd;
  border-radius: 16px;
  background: #fff;

  transition: .2s;
  cursor: pointer;
}

.forma:hover {
  border-color: #2e7d32;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.forma span {
  font-size: 8px;
  margin-top: 8px;
  color: #666;
}

.num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}