/* ══════════════════════════════════════════════════════════════════════════
   znoghaideli — wireframe.css   (GENERATED — do not edit by hand)

   Generated from mockup/index.html (wireframe v17) by tools/build-css.py.
   Kept verbatim (comments in Georgian, as written by the designer) except:
   .nav button → .nav a, the logo URL is a variable, the prototype bar and the
   single-file page switcher are removed. WordPress additions: site.css.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   მიქადელი - ვაერფრეიმი v17
   v2-ის დიზაინი: ფოლადისფერი, ველუმი, ამბერი. სრულად ქართულად.

   ტიპოგრაფია: მთელი ინტერფეისი ქართულია, ამიტომ Oswald ამოღებულია, მას
   ქართული გლიფები არ აქვს. Noto Sans Georgian ატარებს სათაურებს, ტექსტს და
   იარლიყებს, JetBrains Mono კი ციფრებს, კოდებს და ზომებს.
   ქართული მხედრული უნიკასეა, ამიტომ text-transform:uppercase არსად არ
   გამოიყენება. იარლიყები გამოიყოფა წონით, ზომით და მცირე trackingით.

   ფერი: ამბერი #E0801B ერთადერთი აქცენტია. შევსებაზე ყოველთვის მუქი
   ტექსტი დგას, 5.95:1. ტექსტად ამბერი ორ ვარიანტში, თითო თემაზე.
   რადიუსი: კონტეინერები, ღილაკები, ველები და ბარათები --r, 4px. მხოლოდ
   წვრილი შიდა დეტალები 2px. სხვას რადიუსი არ აქვს.
   ჩრდილები შეფერილია ინკის ტონით, არასოდეს სუფთა შავით.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- ღია თემა: ველუმის ფონი ---- */
:root{
  --bg:#F4F6F8;
  --bg-2:#E9EDF1;
  --surf:#FCFDFE;
  --surf-2:#F7F9FA;
  --ink:#161C22;
  --ink-2:#3B4754;
  --ink-3:#5F6C7B;
  --ink-4:#68747F;
  --line:#D8DEE5;
  --line-2:#C2CBD4;
  --accent:#E0801B;
  --accent-tx:#9A5309;
  --on-accent:#161C22;
  --accent-soft:#FBF1E3;
  --sheet:#FFFFFF;
  --sheet-grid:#E4E8EC;
  --sheet-grid-2:#CFD6DD;
  --sheet-ink:#2A333C;
  --sheet-soft:#7C8894;
  --glass:#E1E9EE;
  --glass-2:#D0DEE5;
  --shadow:0 1px 2px rgba(22,28,34,.05), 0 6px 18px rgba(22,28,34,.05);
  --img-filter:saturate(.9) contrast(1.03);
  --grain:.026;

  --r:4px;
  --wrap:1240px;
  --pad:clamp(16px,3.4vw,36px);
  --gap:clamp(14px,1.8vw,22px);
  --sect:clamp(48px,6.4vw,96px);

  --f-geo:"Noto Sans Georgian","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Noto Sans Georgian",ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.32,.72,0,1);
  --z-grain:70; --z-nav:60; --z-bar:65; --z-panel:75; --z-toast:78;
  --z-consent:80;
}
/* ---- მუქი თემა: ფოლადის ფონი ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#161C22; --bg-2:#1E262E; --surf:#212A34; --surf-2:#28323D;
    --ink:#F1F5F8; --ink-2:#C4CFDB; --ink-3:#93A3B4; --ink-4:#8B98A4;
    --line:#2E3945; --line-2:#3D4B59;
    --accent:#E0801B; --accent-tx:#F2A340; --on-accent:#161C22; --accent-soft:#2A2519;
    --sheet:#1A222B; --sheet-grid:#242E38; --sheet-grid-2:#313D49;
    --sheet-ink:#DCE6EE; --sheet-soft:#8494A3;
    --glass:rgba(220,230,238,.07); --glass-2:rgba(220,230,238,.13);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.26);
    --img-filter:saturate(.78) contrast(1.06) brightness(.86);
    --grain:.04;
  }
}
:root[data-theme="dark"]{
  --bg:#161C22; --bg-2:#1E262E; --surf:#212A34; --surf-2:#28323D;
  --ink:#F1F5F8; --ink-2:#C4CFDB; --ink-3:#93A3B4; --ink-4:#8B98A4;
  --line:#2E3945; --line-2:#3D4B59;
  --accent:#E0801B; --accent-tx:#F2A340; --on-accent:#161C22; --accent-soft:#2A2519;
  --sheet:#1A222B; --sheet-grid:#242E38; --sheet-grid-2:#313D49;
  --sheet-ink:#DCE6EE; --sheet-soft:#8494A3;
  --glass:rgba(220,230,238,.07); --glass-2:rgba(220,230,238,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.26);
  --img-filter:saturate(.78) contrast(1.06) brightness(.86);
  --grain:.04;
}

/* ---- მუქი ბლოკი: ჰედერი და ჰერო ერთად ----
   ერთადერთი განზრახი ინვერსია გვერდზე. ჰედერი და ჰერო ერთ უწყვეტ მუქ
   ბლოკს ქმნის, ქვემოთ კი ღია სუბსტრატი იწყება ამბერის ნაკერით. ეს არ არის
   შემთხვევითი მონაცვლეობა, ერთი გადართვაა და მხოლოდ გვერდის თავში.
   ტოკენები ლოკალურად გადაიწერება, ამიტომ შიგნით ყველა ელემენტი
   ავტომატურად ერგება, ცალკე წესების გარეშე. */
.dark-band{
  --bg:#161C22; --bg-2:#1E262E; --surf:#212A34; --surf-2:#28323D;
  --ink:#F1F5F8; --ink-2:#C4CFDB; --ink-3:#93A3B4; --ink-4:#8B98A4;
  --line:#2E3945; --line-2:#3D4B59;
  --accent-tx:#F2A340; --accent-soft:#2A2519;
  --sheet:#1A222B; --sheet-grid:#242E38; --sheet-grid-2:#313D49;
  --sheet-ink:#DCE6EE; --sheet-soft:#8494A3;
  --glass:rgba(220,230,238,.07); --glass-2:rgba(220,230,238,.13);
  --shadow:0 1px 2px rgba(0,0,0,.32), 0 6px 20px rgba(0,0,0,.28);
  color:var(--ink-2);
}

/* მუქ თემაზე ფესვიც მუქია, ამიტომ იგივე მნიშვნელობებით ჰერო გვერდში
   იკარგებოდა და შავ ლაქად რჩებოდა. ამიტომ მუქ თემაზე ბლოკი ერთი საფეხურით
   მაღლა დგება, ფოლადის უფრო ღია ტონზე, და ისევ ცალკე ბლოკად იკითხება.
   ღია თემაზე ინვერსია უცვლელია. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dark-band{
    --bg:#242E39; --bg-2:#2C3742; --surf:#313C48; --surf-2:#39454F;
    --line:#3B4854; --line-2:#4C5A67;
    --sheet:#1E2731; --sheet-grid:#2A3540; --sheet-grid-2:#374350;
    --shadow:0 1px 2px rgba(0,0,0,.36), 0 6px 20px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"] .dark-band{
  --bg:#242E39; --bg-2:#2C3742; --surf:#313C48; --surf-2:#39454F;
  --line:#3B4854; --line-2:#4C5A67;
  --sheet:#1E2731; --sheet-grid:#2A3540; --sheet-grid-2:#374350;
  --shadow:0 1px 2px rgba(0,0,0,.36), 0 6px 20px rgba(0,0,0,.32);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font:400 15px/1.64 var(--f-geo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* გრძელი უწყვეტი სტრიქონი, მაგალითად მეილი ან ბმული, არ უნდა გავარდეს
     კონტეინერიდან და დაიმალოს */
  overflow-wrap:break-word;
}
img{max-width:100%;display:block;height:auto}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

body::before{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute;left:8px;top:-60px;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:11px 18px;border-radius:var(--r);
  font-weight:600;font-size:13.5px;text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:8px}

/* ── ტიპოგრაფია ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.024em;
  line-height:1.15;text-wrap:balance}
.t1{font-size:clamp(27px,3.6vw,44px);line-height:1.1;letter-spacing:-.03em}
.t2{font-size:clamp(20px,2.4vw,31px)}
.t3{font-size:clamp(16.5px,1.5vw,19px);line-height:1.26}
.t4{font-size:15.2px;line-height:1.32;letter-spacing:-.014em}

/* იარლიყი. ქართული უნიკასეა, ამიტომ uppercase არ გამოიყენება. */
.lbl{font-weight:600;font-size:11.8px;letter-spacing:.05em;color:var(--ink-3);line-height:1.2}
.lbl-a{color:var(--accent-tx)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

p{margin:0 0 .9em;text-wrap:pretty}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(15.5px,1.35vw,17px);line-height:1.6;color:var(--ink-2);max-width:58ch}
.sm{font-size:13.3px;line-height:1.56}
.xs{font-size:12px;line-height:1.5}
.meta{color:var(--ink-3)}
code{font-family:var(--f-mono);font-size:.87em;background:var(--bg-2);color:var(--ink);
  padding:1px 5px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.hide{display:none !important}


/* ── ჰედერი ───────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:var(--z-nav);background:var(--bg);
  border-bottom:1px solid var(--line)}
.hdr-row{display:flex;align-items:center;gap:clamp(10px,1.4vw,17px);height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none;background:none;border:0;
  padding:0;cursor:pointer;text-align:left;text-decoration:none}
/* ლოგო JPEG-ია თეთრ ფონზე, ამიტომ თეთრ ფილაზე ზის და ორივე თემაზე
   ერთნაირად იკითხება.

   ფილაზე მხოლოდ ნიშანია. სიტყვიერი ნიშანი ამოჭრილია, რადგან ჰედერის
   ზომაზე ის 5px-ზე ჩამოდიოდა და ლაქად იკითხებოდა; სახელს გვერდითა ტექსტი
   ატარებს, ქართულადაც და ლათინურადაც.

   LOGO.jpeg 1080x1080. პიქსელზე გაზომილი:
     ნიშანი            x203 y187, 674x565
     სიტყვიერი ნიშანი  x203 y804, 673x98
   საჭრელი ფანჯარა 44px თანაბარი მარაგით: x159 y143, 762x653. მარაგი
   თანაბარია ოთხივე მხრიდან და ქვედა კიდე 796-ზე ჩერდება, ანუ სიტყვიერ
   ნიშანს, რომელიც 804-ზე იწყება, არ ეხება. ფილის პროპორცია თავად ნიშნის
   პროპორციაა, 762:653.

   ფილა ბარათივით ზის: თეთრი ველი, რბილი ჩრდილი და თმისოდენა რკალი.
   ჩრდილი მელნის ელფერისაა და არა სუფთა შავი, იხილეთ 07 სექცია 1. */
.brand-mk{--h:46px;--k:calc(var(--h)/653);flex:none;
  height:var(--h);width:calc(762*var(--k));
  border-radius:var(--r);background-color:#fff;
  background-image:var(--logo,url("../img/logo.jpeg"));background-repeat:no-repeat;
  background-position:calc(-159*var(--k)) calc(-143*var(--k));
  background-size:calc(1080*var(--k)) calc(1080*var(--k));
  box-shadow:0 1px 2px rgba(22,28,34,.26), 0 5px 14px rgba(22,28,34,.28),
             inset 0 0 0 1px rgba(22,28,34,.10)}
.brand-lg .brand-mk{--h:68px}
.brand-tx{font-weight:800;font-size:20.5px;letter-spacing:-.015em;color:var(--ink);
  line-height:1.08}
/* ქვესათაური მხოლოდ MIQADELI-ა. ქობულეთი აქედან ამოვარდა, რადგან სწორედ
   ის ადგენდა ბლოკს და სახელის გადიდებას ახშობდა. ის ფუტერში და კონტაქტზეა. */
.brand-tx span{display:block;font-family:var(--f-mono);font-weight:500;font-size:10px;
  letter-spacing:.05em;color:var(--ink-3);margin-top:4px}
.brand-lg .brand-tx{font-size:20px}
/* ნავიგაცია არასოდეს არ იჭრება. overflow-x:auto ამოღებულია, რადგან ის
   ბოლო პუნქტებს უჩუმრად მალავდა. თუ ადგილი არ ეყო, გადავა ახალ ხაზზე,
   ანუ ხილული დარჩება. */
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;
  min-width:0}
.nav a{background:none;border:0;border-radius:var(--r);color:var(--ink-2);
  font-family:inherit;font-size:13.2px;padding:8px 6px;cursor:pointer;white-space:nowrap;
  text-decoration:none;display:inline-block;line-height:normal;
  transition:background .18s var(--ease),color .18s var(--ease)}
.nav a:hover{background:var(--bg-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--bg-2)}
.hdr-end{display:flex;align-items:center;gap:8px;flex:none}
.hdr-end .btn-1{padding-inline:12px}
.tel{text-decoration:none;text-align:right;line-height:1.18}
.tel b{display:block;font-family:var(--f-mono);font-weight:500;font-size:13.5px;
  color:var(--ink)}
.tel span{font-size:10.5px;color:var(--ink-3)}
.tsw{background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-3);cursor:pointer;font-family:inherit;font-weight:600;font-size:12px;
  padding:8px 11px;transition:border-color .18s var(--ease),color .18s var(--ease)}
.tsw:hover{border-color:var(--line-2);color:var(--ink)}

/* ── ღილაკები. ამბერზე ყოველთვის მუქი ტექსტი, 5.95:1 ────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 21px;border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  text-decoration:none;font-family:inherit;font-weight:600;font-size:14.5px;
  white-space:nowrap;
  transition:background .2s var(--ease-2),color .2s var(--ease-2),
             border-color .2s var(--ease-2),transform .1s linear}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-1:hover{background:#F09A33;border-color:#F09A33}
/* კალკულატორი ნავიგაციაში ცალკე პუნქტად არ არის, რადგან გვერდით მდგარი
   ამბერის ღილაკი იმავე გვერდზე მიდის. აქტიური მდგომარეობა ღილაკზე ჩანს,
   რომ მომხმარებელმა იცოდეს სად არის. */
.btn-1[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--on-accent)}
.btn-2{background:var(--surf);color:var(--ink);border-color:var(--line-2)}
.btn-2:hover{border-color:var(--ink-3);background:var(--surf-2)}
.btn-3{background:transparent;color:var(--ink);border-color:var(--line);
  padding:9px 15px;font-size:13.4px}
.btn-3:hover{border-color:var(--ink-3)}
/* ნაბიჯ 4-ზე ბეჭდვა და PDF მთავარი ქმედებაა: შეთავაზება ხელში რომ დარჩეს,
   მომხმარებელი ან ბეჭდავს, ან PDF-ად ინახავს. მოჩარჩოებული ღილაკი ამისთვის
   ზედმეტად ჩუმი იყო. სავსე ამბერი არ გამოდგება, ის გაგზავნას და შემდეგს
   ეკუთვნის, ამიტომ იგივე რბილი ამბერის სამეულია, რომელსაც არჩეული ფილა,
   მიმდინარე ნაბიჯი და შეტყობინება იყენებს: --accent-soft ფონი,
   --accent-tx ტექსტი, --accent ჩარჩო. კონტრასტი 5.20:1 ღიაზე,
   7.33:1 მუქზე. */
.btn-4{background:var(--accent-soft);color:var(--accent-tx);
  border-color:var(--accent);font-weight:700}
.btn-4:hover{background:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}

/* ── სექციები ─────────────────────────────────────────────────────────── */
.sect{padding-block:var(--sect)}
.sect-t{border-top:1px solid var(--line)}
.sect-r{padding-block:clamp(32px,4vw,54px)}
.hd{margin-bottom:clamp(22px,2.8vw,38px);max-width:62ch}
.hd .lead{margin-top:12px}

@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(12px);
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}
}

/* ── ჰერო ─────────────────────────────────────────────────────────────── */
.hero{border-bottom:2px solid var(--accent);background:
  radial-gradient(900px 440px at 82% 12%,rgba(224,128,27,.14),transparent 72%),var(--bg)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,50px);align-items:center;
  padding-top:clamp(28px,4vw,66px);padding-bottom:clamp(32px,4.4vw,74px)}
/* ჰეროს სათაური სერვისების სრული სიაა, ათი პუნქტი. ერთ სტრიქონად ის
   არაკითხვადი იქნებოდა, ამიტომ ორსვეტიან ბადედ დგება, ამბერის კვადრატებით.
   მკვრივი, მაგრამ სათაურის წონით, არა სქოლიოს. */
.hero-svc{margin-top:15px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 22px;font-size:clamp(14.6px,1.44vw,18px);line-height:1.28;
  letter-spacing:-.014em;font-weight:700}
.hero-svc>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:start}
.hero-svc>span:before{content:"";width:6px;height:6px;border-radius:1px;
  background:var(--accent);margin-top:.42em}
@media(max-width:620px){.hero-svc{grid-template-columns:1fr}}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.dwg-shell{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);
  overflow:hidden;box-shadow:var(--shadow)}
.dwg-shell svg{width:100%;height:auto;display:block}

/* ── ბენტო: 6 სვეტი, 2 გამორჩეული span 3, 6 ჩვეულებრივი span 2.
      2*3 + 6*2 = 18 = ზუსტად 3 სრული რიგი, ცარიელი უჯრის გარეშე.
      კასკადი: figure-ს ბაზურ წესს aspect-ratio არ აქვს, რომ მოდიფიკატორები
      არ გადაეფაროს. ─────────────────────────────────────────────────── */
.bento{display:grid;gap:var(--gap);grid-template-columns:repeat(6,1fr)}
.cell{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  color:inherit;padding:0;font-family:inherit;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),
             transform .2s var(--ease)}
.cell:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.cell:hover .cell-k{color:var(--accent-tx)}
.cell.feat{grid-column:span 3}
.cell.std{grid-column:span 2}
.cell.wide{grid-column:span 6}
.cell.wide figure{aspect-ratio:21/6}
.cell figure{margin:0;overflow:hidden;background:var(--bg-2)}
.cell.feat figure{aspect-ratio:16/9}
.cell.std figure{aspect-ratio:4/3}
.cell figure img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transition:transform .5s var(--ease)}
.cell:hover figure img{transform:scale(1.03)}
.cell-b{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.cell-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-4);
  transition:color .2s var(--ease)}
.cell-p{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:12.2px;color:var(--ink)}
.cell-p i{font-style:normal;font-family:var(--f-geo);color:var(--ink-3);font-size:12px}

.imgfail{background:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 9px),
  var(--bg-2);display:grid;place-items:center;min-height:120px}
.imgfail:after{content:attr(data-slot);font-weight:600;font-size:11.5px;
  color:var(--ink-4);text-align:center;padding:12px}

/* ── კალკულატორის ზოლი ───────────────────────────────────────────────── */
.band{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  border-left:3px solid var(--accent);padding:clamp(22px,3vw,38px);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(22px,3vw,42px);align-items:center;box-shadow:var(--shadow)}
.band-box{border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;
  background:var(--bg)}
.band-box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;
  font-size:12.8px}
.band-box dt{color:var(--ink-3)}
.band-box dd{margin:0;color:var(--ink);text-align:right;font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;font-size:12.2px}
.band-box .o{border-top:1px solid var(--line);margin-top:13px;padding-top:13px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.band-box .o b{font-family:var(--f-mono);font-weight:500;font-size:22px;
  color:var(--accent-tx);font-variant-numeric:tabular-nums}

/* ── პროექტები ───────────────────────────────────────────────────────── */
.refs{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.refs-side{display:grid;gap:var(--gap);align-content:start}
.ref{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.ref:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.ref figure{margin:0;overflow:hidden;aspect-ratio:16/10;background:var(--bg-2)}
.ref.tall figure{aspect-ratio:4/3}
.ref figure img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter);
  transition:transform .5s var(--ease)}
.ref:hover figure img{transform:scale(1.03)}
.ref-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.ref-m{font-family:var(--f-mono);font-size:11.6px;color:var(--ink-3);display:flex;
  gap:12px;flex-wrap:wrap}
.ref-cat{font-weight:600;font-size:11.8px;color:var(--accent-tx)}

/* ── ციფრები ─────────────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(22px,3.2vw,50px);align-items:start}
.figs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.fig{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2vw,24px)}
.fig b{display:block;font-family:var(--f-mono);font-weight:500;color:var(--accent-tx);
  font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.fig .lbl{display:block;margin-top:12px;color:var(--ink)}
.fig p{margin:7px 0 0;font-size:12.8px;color:var(--ink-3);line-height:1.45}

/* ── პროცესი ─────────────────────────────────────────────────────────── */
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.trk{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:8px}
.trk-n{width:26px;height:26px;border-radius:var(--r);background:var(--accent-soft);
  color:var(--accent-tx);display:grid;place-items:center;font-family:var(--f-mono);
  font-size:11.5px;flex:none}

/* ── სიახლეები ───────────────────────────────────────────────────────── */
.jrn{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.jrn-side{display:grid;gap:var(--gap);align-content:start}
.jrn-s{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;gap:6px;transition:border-color .2s var(--ease)}
.jrn-s:hover{border-color:var(--line-2)}

/* ── კონტაქტი ────────────────────────────────────────────────────────── */
.cband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,3.2vw,48px);align-items:start}
dl.spec{margin:0;border-top:1px solid var(--line)}
dl.spec>div{display:grid;grid-template-columns:minmax(126px,40%) 1fr;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line)}
dl.spec dt{font-size:13.2px;color:var(--ink-3)}
dl.spec dd{margin:0;color:var(--ink);font-size:14px}
dl.spec dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2);
  transition:color .18s var(--ease),border-color .18s var(--ease)}
dl.spec dd a:hover{color:var(--accent-tx);border-color:var(--accent)}
/* ფუტერში იგივე სიაა, უფრო მჭიდროდ და ჩარჩოს ხაზების გარეშე */
dl.spec.ftr-c{border-top:0}
dl.spec.ftr-c>div{grid-template-columns:minmax(88px,32%) 1fr;padding:5px 0;
  border-bottom:0}
dl.spec.ftr-c dt{font-size:11.8px}
dl.spec.ftr-c dd{font-size:12.6px}

/* ── ფორმები ─────────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:7px}
.fld>label,.flab{font-weight:600;font-size:12.5px;color:var(--ink-3)}
.fld .hint{font-size:11.8px;color:var(--ink-4)}
.fld .err{font-size:12px;color:var(--accent-tx);font-weight:500}
input[type=text],input[type=number],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surf);color:var(--ink);font-family:var(--f-geo);font-size:14.5px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
input[type=number],input[type=tel]{font-family:var(--f-mono)}
textarea{line-height:1.55;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-4);opacity:1}
input[aria-invalid="true"]{border-color:var(--accent-tx)}
select{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.rows{display:grid;gap:16px}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:repeat(3,1fr)}

.tiles{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.tile{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;cursor:pointer;text-align:left;color:inherit;font-family:inherit;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.tile:hover{border-color:var(--line-2)}
.tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent)}
.tile-k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-4);
  display:block;margin-bottom:7px}
.tile-n{display:block;font-weight:600;font-size:14.2px;color:var(--ink);line-height:1.26;
  margin-bottom:4px}
.tile-d{display:block;font-size:12px;color:var(--ink-3);line-height:1.4}
.tile.q .tile-n:after{content:" \2197";color:var(--accent-tx)}

.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);font-family:inherit;font-size:13.6px;padding:10px 14px;cursor:pointer;
  display:inline-flex;gap:8px;align-items:baseline;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.opt:hover{border-color:var(--line-2);color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);
  color:var(--ink);font-weight:600}
.opt i{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
  font-weight:400}

.sashes{display:grid;gap:8px}
.sash-hd,.sash{display:grid;grid-template-columns:74px minmax(0,1.25fr) minmax(0,1fr);
  gap:11px;align-items:center}
.sash-hd span{font-weight:600;font-size:11.2px;color:var(--ink-4);line-height:1.25}
.sash .lbl{font-size:12.2px}
.sash select{padding:9px 11px;font-size:13.6px}
.sash select:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){
  .sash-hd{display:none}
  .sash{grid-template-columns:1fr;gap:5px;border-top:1px solid var(--line);
    padding-top:9px}
  .sash:first-child{border-top:0;padding-top:0}
}
/* ტიხრების ველები. კალკულატორი ღიობს თანაბრად ყოფს, მაგრამ რეალურ ობიექტზე
   ტიხარი იშვიათად ზის შუაში, ამიტომ თითოეული ფრთის სიგანე ხელით იმართება. */
.seg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:9px}
.seg-foot .hint{margin:0}
.seg-foot .btn{padding:7px 12px;font-size:12.6px}
/* ფერის არჩევანის მაგივრად დაყენებული ტექსტი. ინპუტის გარეგანა
   იგივე სიმაღლისაა, რომ სვეტი არ გადახტეს. */
.notetx{margin:0;font-size:13.4px;line-height:1.5;color:var(--ink-2);
  border:1px dashed var(--line-2);border-radius:var(--r);padding:12px 14px;
  background:var(--bg)}

/* ── ზედა სექცია, ფრამუღა ─────────────────────────────────────────────── */
.tsec{display:grid;gap:13px;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;background:var(--bg)}
.tsec-r{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tsec-r.off{opacity:.45;pointer-events:none}
@media(max-width:560px){.tsec-r{grid-template-columns:1fr}}

/* ჩადგმული ველი: ელფერი ფერად შუშაზე, ქვეტიპი ჟალუზზე და რაფაზე */
.subfld{display:grid;gap:6px;margin-top:10px;padding-left:12px;
  border-left:2px solid var(--accent)}
.subfld select{max-width:340px}

/* ფერის ნიმუში ღილაკზე */
.opt .sw{width:15px;height:15px;border-radius:2px;flex:none;align-self:center;
  box-shadow:inset 0 0 0 1px rgba(22,28,34,.22)}

.checks{display:grid;gap:8px}
/* ორი ჯგუფი ურთიერთგამომრიცხავია: მწერის ბადე და ჟალუზი. თითოში ერთი
   ვარიანტი ირჩევა, ან არცერთი, ამიტომ ისინი ჩარჩოში დგანან საკუთარი
   იარლიყით და ერთმანეთს თიშავენ. */
.chk-grp{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px 12px;
  display:grid;gap:8px;background:var(--bg)}
.chk-grp>.lbl{color:var(--ink-3)}
.chk-grp .chk{background:var(--surf)}
.chk{display:flex;gap:8px 11px;align-items:center;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;cursor:pointer;
  font-size:14px;flex-wrap:wrap;transition:border-color .18s var(--ease)}
.chk:hover{border-color:var(--line-2)}
.chk input{width:16px;height:16px;flex:none;accent-color:var(--accent);margin:0}
.chk>span:not(.px){flex:1 1 auto;min-width:0}
.chk .px{margin-left:auto;font-family:var(--f-mono);font-size:11.8px;color:var(--ink-3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.chk-bare{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:13.4px;
  line-height:1.5;background:none;border:0;padding:0}
.chk-bare input{margin-top:2px}

/* ── კალკულატორი ─────────────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,410px);
  gap:var(--gap);align-items:start}
.steps{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-bottom:var(--gap)}
.stp{background:none;border:0;border-right:1px solid var(--line);padding:12px 6px;
  cursor:pointer;text-align:center;color:var(--ink-3);font-family:inherit;
  transition:background .18s var(--ease),color .18s var(--ease)}
.stp:last-child{border-right:0}
.stp .n{display:block;font-family:var(--f-mono);font-size:10.5px;margin-bottom:5px}
.stp .t{display:block;font-size:12.6px}
.stp:hover:not(:disabled){background:var(--bg-2);color:var(--ink)}
.stp[data-done="1"]{color:var(--ink-2)}
.stp[data-done="1"] .n:after{content:" \2713";color:var(--accent-tx)}
.stp[aria-current="step"]{background:var(--accent-soft);color:var(--ink);font-weight:600;
  box-shadow:inset 0 -3px 0 var(--accent)}
.stp[aria-current="step"] .n{color:var(--accent-tx)}
.stp:disabled{opacity:.42;cursor:not-allowed}

.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,28px)}
.step{display:none;flex-direction:column;gap:20px}
.step.on{display:flex}
/* ნაბიჯის თავი: არჩეული პროდუქტი, სათაური და, სადაც არის, განმარტება.
   პროდუქტის სახელი ხუთივე ნაბიჯზე დგას, რომ მომხმარებელმა ყოველთვის
   იცოდეს რას ითვლის. ცარიელი მაშინ იმალება, როცა ტიპი არჩეული არ არის. */
.step-hd{display:grid;gap:6px}
.prodtag{font-weight:600;font-size:11.8px;letter-spacing:.05em;
  color:var(--accent-tx);line-height:1.25}
.prodtag:empty{display:none}
.navrow{display:flex;gap:11px;justify-content:space-between;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line)}
/* ნაბიჯ 4-ზე კალათაში დამატება გაგზავნის გვერდით დგას: ორივე ერთი
   გადაწყვეტილებაა, ან შევინახოთ კიდევ ერთი პროდუქტი, ან გავაგზავნოთ. */
.nav-end{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}

.msg{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  font-size:13.4px;line-height:1.52;background:var(--bg-2);color:var(--ink-2)}
.msg-e{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.msg-e b,.msg-k b{color:var(--accent-tx)}
.msg:empty{display:none}
.msg pre{font-family:var(--f-mono);font-size:11.5px;white-space:pre-wrap;margin:9px 0 0;
  color:var(--ink-2);line-height:1.55;overflow-x:auto}

.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:26px 20px;
  text-align:center}
.empty .lbl{display:block;margin-bottom:10px}

/* ── ნახაზი და ფასი ──────────────────────────────────────────────────── */
.out-col{display:grid;gap:var(--gap);position:sticky;top:86px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;
  padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;min-width:0}
.card-h .v{font-family:var(--f-mono);font-size:11.2px;color:var(--ink);min-width:0}
.sheet-box{background:var(--sheet);position:relative}
#dwg{width:100%;height:auto;display:block}
.skel{position:absolute;inset:0;background:var(--sheet);display:grid;place-items:center}
.skel-b{width:58%;height:52%;border:1px solid var(--line);border-radius:2px;
  position:relative;overflow:hidden}
.skel-b:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--bg-2),transparent)}
@media (prefers-reduced-motion:no-preference){
  .skel-b:after{animation:shim 1.15s linear infinite}
  @keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
}
/* ინდივიდუალურად ფასდადებულ ტიპებზე, რკინის ნაკეთობა, გრავირება ქვაზე და
   შუშაზე, ლაზერული ჭრა, ნახაზი და ფასი ვერ დაითვლება. ამიტომ ნახაზის ქვეშ,
   იმავე მარჯვენა სვეტში, დგება საკონტაქტო მოქმედება. */
.dwg-cta{padding:14px 15px;border-top:1px solid var(--line);display:grid;gap:11px}
.dwg-cta p{margin:0;font-size:12.8px;color:var(--ink-3);line-height:1.5}
.dwg-cta .row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dwg-cta .btn{padding:10px 13px;font-size:13.6px}
.dwg-cta .btn-1{grid-column:1 / -1}

.price{padding:16px 15px;border-top:1px solid var(--line)}
.price output{display:block;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(23px,2.8vw,29px);color:var(--ink);letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;margin-top:8px}
.price .rg{font-family:var(--f-mono);font-size:12.2px;color:var(--ink-3);margin-top:6px;
  font-variant-numeric:tabular-nums}
.price .ds{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.45;
  border-top:1px solid var(--line);padding-top:11px}

table.t{width:100%;border-collapse:collapse;font-size:13.4px}
table.t caption{text-align:left;font-weight:600;font-size:12.5px;color:var(--ink-3);
  padding:0 0 10px}
table.t th,table.t td{padding:9px 10px;text-align:left;vertical-align:top}
table.t thead th{font-weight:600;font-size:12px;color:var(--ink-3);
  border-bottom:1px solid var(--line)}
table.t tbody tr+tr td{border-top:1px solid var(--line)}
table.t td:last-child,table.t th:last-child{text-align:right;font-family:var(--f-mono);
  white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
table.t tr.tot td{border-top:2px solid var(--accent);font-weight:600;color:var(--ink);
  padding-top:12px}
table.t tr.tot td:last-child{font-size:15px;color:var(--accent-tx)}
table.t .q{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);
  margin-top:3px;white-space:normal}
.scroll{overflow-x:auto}

/* ── პროდუქტის ნიმუში ────────────────────────────────────────────────── */
.spec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3.2vw,46px);align-items:start}
.gal{display:grid;gap:10px}
.gal-m{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:var(--bg-2)}
.gal-m img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}
.gal-r{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal-r div{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  aspect-ratio:1;background:var(--bg-2)}
.gal-r img{width:100%;height:100%;object-fit:cover;filter:var(--img-filter)}

/* ── ფილტრები და ბადეები ─────────────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);font-family:inherit;font-size:13.4px;padding:8px 15px;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);
  color:var(--ink);font-weight:600}
.pf{display:grid;gap:var(--gap);grid-template-columns:repeat(6,1fr)}
.pf>*:nth-child(1),.pf>*:nth-child(4){grid-column:span 4}
.pf>*:nth-child(2),.pf>*:nth-child(3),
.pf>*:nth-child(5),.pf>*:nth-child(6){grid-column:span 2}
.nw{display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}

/* ── დამატების დადასტურება ───────────────────────────── */
/* კალათაში დამატებისთანავე კალკულატორი პირველ ნაბიჯზე ბრუნდება, ამიტომ
   ნაბიჯ 4-ში დახატული შეტყობინება ვერასოდეს დაინახებოდა. ტოსტი გვერდიდან
   ანათებს, კალათის ღილაკის ქვეით, და სადაც დგახარ, იქ რჩება. */
.toast{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));right:16px;
  z-index:var(--z-toast);width:min(340px,calc(100vw - 32px));
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);box-shadow:0 10px 30px rgba(22,28,34,.22);
  padding:13px 15px;display:grid;gap:9px}
.toast[hidden]{display:none}
.toast-t{font-weight:600;font-size:13.4px;line-height:1.35}
.toast-s{font-family:var(--f-mono);font-size:11.4px;color:var(--ink-3);
  line-height:1.4}
.toast-r{display:flex;gap:9px;align-items:center}
.toast-r .btn{padding:7px 12px;font-size:12.6px}
.toast-x{margin-left:auto;background:none;border:0;color:var(--ink-3);
  cursor:pointer;font-family:inherit;font-size:12px;text-decoration:underline;
  padding:0}
.toast-x:hover{color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .toast{animation:toastin .22s var(--ease) both}
  @keyframes toastin{from{opacity:0;transform:translateY(-8px)}
                     to{opacity:1;transform:none}}
}
@media(max-width:720px){
  .toast{top:auto;bottom:calc(68px + env(safe-area-inset-bottom,0px));
    left:16px;right:16px;width:auto}
}

/* ── ტიხრების სასახსრელი ზოლი ────────────────────────────── */
/* ზოლი თავად ღიობია გეგმის მასშტაბით, სახელურები ტიხრებია. რიცხვი
   ორ ტიხარს შორისაა, იქ, სადაც ფრთაა, და არა ცალკე ველში გვერდით. */
.mul{margin:2px 0 13px}
.mul-track{position:relative;height:46px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--bg);touch-action:none;
  margin:9px 10px 0}
.mul-seg{position:absolute;top:0;bottom:0;display:grid;place-items:center;
  pointer-events:none;overflow:hidden}
.mul-seg i{font-family:var(--f-mono);font-style:normal;font-size:12.5px;
  font-weight:500;color:var(--ink);background:var(--bg);padding:0 5px;
  white-space:nowrap}
.mul-h{position:absolute;top:-9px;bottom:-9px;width:22px;margin-left:-11px;
  background:none;border:0;padding:0;cursor:ew-resize;touch-action:none;
  -webkit-tap-highlight-color:transparent}
.mul-h:before{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:3px;
  margin-left:-1.5px;background:var(--accent)}
.mul-h:after{content:"";position:absolute;left:50%;top:50%;width:13px;height:26px;
  margin:-13px 0 0 -6.5px;border-radius:3px;background:var(--accent);
  border:1px solid var(--on-accent);
  box-shadow:0 1px 4px rgba(22,28,34,.35)}
.mul-h:focus-visible{outline:none}
.mul-h:focus-visible:after{box-shadow:0 0 0 3px var(--accent-soft),
  0 1px 4px rgba(22,28,34,.35)}
.mul-ends{display:flex;justify-content:space-between;margin:5px 10px 0;
  font-family:var(--f-mono);font-size:10.5px;color:var(--ink-4)}

/* ── სიის ღილაკი ჰედერში და გვერდითი პანელი ──────────────── */
/* სია ყოველ გვერდზეა ხელმისაწვდომი, არა მხოლოდ კალკულატორზე, ამიტომ
   ჰედერშია. ციფრი იმისთვისაა, რომ დამატება დანახოს პანელის გახსნის გარეშეც. */
.cartbtn{position:relative;display:grid;place-items:center;width:34px;height:34px;
  background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);cursor:pointer;flex:none;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.cartbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.cartbtn svg{width:16px;height:16px;display:block}
.cartbadge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--accent);color:var(--on-accent);
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;line-height:17px;
  text-align:center}
.cartbtn[data-empty="1"] .cartbadge{background:var(--bg-2);color:var(--ink-4)}

.cart-bd{position:fixed;inset:0;z-index:var(--z-panel);background:rgba(10,14,18,.5)}
/* [hidden] უნდა ახშობდეს display:flex-ს, ამიტომ ცალკე წესია */
.cart-bd[hidden],.cartpanel[hidden]{display:none}
.cartpanel{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);
  z-index:var(--z-panel);background:var(--surf);border-left:1px solid var(--line);
  box-shadow:-18px 0 44px rgba(22,28,34,.18);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px)}
.cartpanel-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:16px 16px 13px;border-bottom:1px solid var(--line)}
.cartpanel-h .lbl{margin:0;display:block}
.cartpanel-n{display:block;font-family:var(--f-mono);font-size:12px;
  color:var(--ink-3);margin-top:4px}
.cartpanel-x{background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:17px;line-height:1;
  width:32px;height:32px;flex:none}
.cartpanel-x:hover{border-color:var(--ink-3);color:var(--ink)}
.cartpanel-b{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cartpanel-f{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:11px;
  /* ქუქიების ზოლი პანელზე მაღლა ფენაზეა და განივთავს ცალსახედ.
     რამდენიმე პიქსელით ახარება ზოლის სიმაღლეზე, რომელსაც openCart ზომავს. */
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px) + var(--consent-h,0px))}
.cartpanel-f .row{display:flex;gap:9px;flex-wrap:wrap}
.cartpanel-f .row .btn{flex:1 1 auto}
@media(max-width:720px){ .cartpanel{width:100%} }

/* ── შერჩეული პროდუქტების სია ────────────────────────── */
/* ერთ შეტყობინებაში რამდენიმე პროდუქტი ეტევა. კალკულატორი აგროვებს
   კონფიგურაციებს სიაში და ბოლოს ერთად გზავნის ან ბეჭდავს. */
.act-row{display:flex;gap:11px;flex-wrap:wrap}
.cart-empty{padding:14px 15px;font-size:13px;color:var(--ink-3);line-height:1.5}
.cart-list{display:grid}
.citem{display:grid;grid-template-columns:22px minmax(0,1fr) auto 26px;gap:10px;
  align-items:start;padding:11px 14px;border-top:1px solid var(--line)}
.cart-list .citem:first-child{border-top:0}
.citem-n{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-4);
  padding-top:2px;text-align:right}
.citem-b{display:block;min-width:0}
.citem-t{display:block;font-weight:600;font-size:13px;line-height:1.3}
.citem-s{display:block;font-family:var(--f-mono);font-size:11.2px;
  color:var(--ink-3);margin-top:3px;line-height:1.35}
.citem-p{font-family:var(--f-mono);font-size:13px;font-weight:500;
  white-space:nowrap;padding-top:1px}
.citem-x{background:none;border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-3);cursor:pointer;font-family:inherit;font-size:13px;
  line-height:1;padding:4px 0;width:26px;transition:border-color .18s var(--ease),
  color .18s var(--ease)}
.citem-x:hover{border-color:var(--accent);color:var(--accent-tx)}
.cart-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 14px;border-top:2px solid var(--accent);
  background:var(--accent-soft)}
.cart-foot b{font-family:var(--f-mono);font-size:15px}
.cart-foot .lbl{margin:0}
.cart-clear{background:none;border:0;color:var(--ink-3);cursor:pointer;
  font-family:inherit;font-size:12px;text-decoration:underline;padding:0}
.cart-clear:hover{color:var(--ink)}

/* ── საბეჭდი ფურცელი. ეკრანზე არასოდეს ჩანს, მხოლოდ ბეჭდვაზე. ── */
#printsheet{display:none}
.psh-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  border-bottom:2.5px solid #161C22;padding-bottom:13px;margin-bottom:7px}
.psh-brand{display:flex;align-items:center;gap:15px}
/* ნიშანი იჭრება იმავე გეომეტრიით, რომელიც ჰედერს: x203 y187, 674x565 */
.psh-logo{display:block;width:84px;height:70px;overflow:hidden;position:relative;
  flex:none;border:1px solid #CFD6DD;border-radius:3px;background:#fff}
.psh-logo img{position:absolute;width:134px;height:134px;left:-25px;top:-23px;
  max-width:none}
.psh-hd h1{font-size:23px;margin:0 0 4px;line-height:1.15;letter-spacing:-.01em}
.psh-hd .m{font-size:11px;line-height:1.5}
.psh-contact{text-align:right;font-size:10.5px;line-height:1.5;flex:none}
.psh-contact b{display:block;font-family:var(--f-mono);font-size:13.5px;
  letter-spacing:.01em;margin-bottom:2px}
.psh-contact span{display:block;font-family:var(--f-mono)}
.psh-contact .d{margin-top:4px;color:#555}
.psh-ttl{font-size:14px;margin:0 0 15px;font-weight:600}
/* პოზიცია აღარ არის გაუხერადი. ერთი პოზიცია, ნახაზითა და ცხრილით,
   თითქმის მთელ გვერდს იკავებს. როცა გაუხერადი იყო, ბრაუზერი მთლიანად
   მეორე გვერდზე გადაანაცვლებდა და პირველ გვერდზე მხოლოდ ბლანკი რჩებოდა. */
.psh-i{margin-bottom:20px;border:1px solid #999;border-radius:3px;padding:13px 15px}
/* იყოს რაც არ უნდა გაიხედოს: ნახაზი სპეციფიკაციისგან და ცხრილის რიგი. */
/* ნახაზისა და სპეციფიკაციის ბადეც ითქვიფება: მრავალფრთიან ცვლილებადი
   სპეციფიკაცია თავისთავად გვერდზე გრძელია. ტეხნიკური სახე მხოლოდ ნახაზია,
   რომელიც შუალზე გადაჭრა არ უნდა. */
.psh-g > svg{break-inside:avoid;page-break-inside:avoid}
.psh-i table.t tr{break-inside:avoid;page-break-inside:avoid}
.psh-i h2{break-after:avoid;page-break-after:avoid}
.psh-hd,.psh-ttl{break-after:avoid;page-break-after:avoid}
.psh-i h2{font-size:14.5px;margin:0 0 10px}
.psh-g{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;
  align-items:start}
.psh-g svg{width:300px;height:287px;border:1px solid #BBB}
.psh-i dl.spec{border-top:0;font-size:11.5px}
.psh-i table.t{margin-top:11px;font-size:11.5px}
.psh-p{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-top:12px;padding-top:10px;border-top:1px solid #BBB;font-size:12px}
.psh-p b{font-family:var(--f-mono);font-size:15px}
.psh-tot{display:flex;justify-content:space-between;align-items:baseline;
  border-top:2px solid #161C22;padding-top:11px;font-size:15px;font-weight:700}
.psh-note{margin-top:9px;font-size:11px;line-height:1.5}

/* ── შენიშვნა ────────────────────────────────────────────────────────── */
.note{border:1px dashed var(--line-2);border-radius:var(--r);padding:16px 17px 15px;
  font-size:13px;line-height:1.55;color:var(--ink-3);position:relative;margin-top:24px}
.note:before{content:"შენიშვნა";position:absolute;top:-9px;left:14px;background:var(--bg);
  padding:0 7px;font-weight:600;font-size:11.5px;color:var(--accent-tx)}
.note ol{margin:8px 0 0;padding-left:22px}
.note li{margin-bottom:3px}

/* ── ფუტერი ──────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);padding-block:clamp(30px,3.6vw,50px) 22px;
  background:var(--bg)}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,42px)}
.ftr h2{font-weight:700;font-size:13px;color:var(--ink);margin:0 0 13px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr a{color:var(--ink-2);text-decoration:none;font-size:13.6px;padding:3.5px 0;
  display:inline-block;transition:color .18s var(--ease)}
.ftr a:hover{color:var(--accent-tx)}
.ftr-b{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.ftr-b a{font-size:12px;color:var(--ink-3)}

.mbar{display:none}

/* ქუქიების ზოლი, პროტოტიპის ზოლის მსგავსად, თემისგან დამოუკიდებელია.
   var(--ink)/var(--bg) მუქ თემაზე იბრუნებდა და ზოლი ღია ხდებოდა, ხოლო
   ჩაშენებული ღია ტექსტი და უარის ღილაკი უხილავი რჩებოდა. */
.consent{position:fixed;inset:auto 0 0 0;z-index:var(--z-consent);background:#161C22;
  color:#EEF2F6;border-top:3px solid var(--accent);padding:14px 0}
.consent .wrap{display:flex;gap:14px 20px;align-items:center;flex-wrap:wrap;
  justify-content:space-between}
.consent p{margin:0;font-size:13px;color:#B4C0CC;max-width:64ch}
.consent .btn-2{background:transparent;border-color:#4A5663;color:#EEF2F6}
.consent .btn-2:hover{background:#EEF2F6;color:var(--ink);border-color:#EEF2F6}

/* ტელეფონი ჰედერიდან ადრე იმალება, რომ ნავიგაციას ადგილი დარჩეს და
   პუნქტები ერთ ხაზზე დარჩეს. ნომერი ხელმისაწვდომია კონტაქტის სექციაში
   და მობილურის ქვედა ზოლში. */
@media(max-width:1180px){
  .tel{display:none}
}
@media(max-width:1080px){
  .calc,.hero-in,.band,.trust,.cband,.spec-grid{grid-template-columns:1fr}
  .out-col{position:static}
  .refs,.jrn{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell.feat,.cell.std{grid-column:span 1}
  .cell.wide{grid-column:span 2}
  .cell.feat figure{aspect-ratio:4/3}
  .cell.wide figure{aspect-ratio:16/6}
  .track{grid-template-columns:repeat(2,1fr)}
  .pf{grid-template-columns:repeat(2,1fr)}
  .pf>*{grid-column:span 1 !important}
  .nw{grid-template-columns:repeat(2,1fr)}
  .ftr-in{grid-template-columns:1fr 1fr}
}
/* 960px-ზე ქვემოთ ნავიგაცია გადადის საკუთარ სრულ ხაზზე, რომ ჰედერის
   რიგში უხერხულად არ გაიხლიჩოს. ერთ ხაზზე ისევ რჩება, უბრალოდ ქვემოთ. */
/* კონტეინერი 1240px-ზე იზღუდება, ამიტომ 1241px-ზე ზემოთ ჰედერის შიგთავსის
   სიგანე მუდმივად 1168px-ია და ყველაფერი ერთ ხაზზე ჯდება მარაგით.
   1240px-ზე და ქვემოთ სიგანე კლებას იწყებს, ნავიგაციას ადგილი აღარ ჰყოფნის
   და საკუთარ სრულ ხაზზე გადადის. ვიწროვდებისას პუნქტი არასოდეს იმალება:
   ან ერთ ხაზზეა, ან ხილულად გადადის ქვემოთ. */
@media(max-width:1240px){
  .hdr-row{height:auto;padding-block:12px;flex-wrap:wrap}
  .nav{order:9;width:100%;margin:6px 0 0;border-top:1px solid var(--line);
    padding-top:5px;justify-content:flex-start}
  .hdr-end{margin-left:auto}
}
@media(max-width:720px){
  /* ვიწრო ეკრანზე ლოკაპი ერთი საფეხურით პატარავდება, სიტყვიერი ნიშანი
     11px-ზე ისევ იკითხება */
  .brand-mk{--h:32px}
  .brand-lg .brand-mk{--h:60px}
  .bento,.figs,.track,.pf,.nw,.ftr-in{grid-template-columns:1fr}
  .cell.wide{grid-column:span 1}
  .cell.wide figure{aspect-ratio:4/3}
  .r2,.r3{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .stp{border-bottom:1px solid var(--line)}
  .gal-r{grid-template-columns:repeat(2,1fr)}
  dl.spec>div{grid-template-columns:1fr;gap:3px}
  body{padding-bottom:58px}
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;inset:auto 0 0 0;
    z-index:var(--z-bar);background:var(--surf);border-top:1px solid var(--line)}
  .mbar>*{background:none;border:0;border-right:1px solid var(--line);color:var(--ink);
    font-family:inherit;font-weight:600;font-size:13px;padding:15px 4px;text-align:center;
    text-decoration:none;cursor:pointer}
  .mbar>*:last-child{border-right:0;background:var(--accent);color:var(--on-accent)}
  .consent{padding-bottom:70px}
}
@media print{
  /* ბეჭდვაზე გვერდი არ იბეჭდება. იბეჭდება #printsheet, რომელშიც
     კალათაში დამატებული ყველა პროდუქტი ერთად დგას: ნახაზი, სპეციფიკაცია,
     ხარჯების დაშლა და ბოლოს საერთო ჯამი. */
  body > *:not(#printsheet){display:none !important}
  body::before{display:none !important}
  #printsheet{display:block !important;padding:0;margin:0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff;color:#000;padding:0;margin:0}
  .psh-i dl.spec div{border-color:#CCC}
  table.t th,table.t td{border-color:#CCC}
  @page{margin:14mm}
}