:root{
  --ink:#0a0a0a;
  --muted:#4a4a4a;
  --rule:#d9d3c6;        /* მქრქალი გამყოფი */
  --shot:#f2ede3;        /* ფოტოს ფონი */
  --card:#faf7f1;        /* ბარათის ფონი */
  --cardline:#eae4d7;
  --bg:#ffffff;
  --hair:#e8e4da;
  --stack:'Poppins','Noto Sans Georgian',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--stack);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ================= ზედა ზოლი ================= */
.bar{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--hair);
}
.barinner{max-width:1240px;margin:0 auto;position:relative}

/* ერთი რიგი, საჭიროებისას ჰორიზონტალური სქროლი */
.navpanel{
  display:flex;flex-wrap:nowrap;gap:4px;
  padding:9px 14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:auto;
}
.navpanel::-webkit-scrollbar{display:none}
.navpanel a{
  flex:0 0 auto;white-space:nowrap;text-decoration:none;color:var(--muted);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:7px 13px;border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.navpanel a:hover,.navpanel a:focus-visible{background:var(--shot);color:var(--ink)}

/* მინიშნება, რომ გვერდით კიდევ არის — მარჯვენა კიდის მიბინდვა.
   კლასს JS ამატებს მხოლოდ მაშინ, როცა შიგთავსი მართლა არ ეტევა. */
.barinner.scrollable::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:42px;
  pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.96));
}

@media (max-width:640px){
  .navpanel{gap:3px;padding:8px 10px}
  .navpanel a{font-size:9.5px;letter-spacing:.1em;padding:7px 10px}
}

/* ================= hero ================= */
.hero{padding:56px 20px 8px;text-align:center}
.hero img{margin:0 auto;width:min(300px,68vw)}
.wordmark{margin:0;font-size:clamp(30px,9vw,54px);font-weight:300;letter-spacing:.28em}

/* ================= სექციები ================= */
section{max-width:1240px;margin:0 auto;padding:0 16px;scroll-margin-top:66px}
.sechead{text-align:center;padding:64px 0 30px}
.sechead h2{margin:0;font-weight:700;font-size:clamp(24px,6.2vw,40px);letter-spacing:-.01em;line-height:1.1}
.sechead p{
  margin:14px auto 0;max-width:44ch;
  font-size:clamp(11px,2.9vw,14px);letter-spacing:.1em;
  text-transform:uppercase;font-weight:300;line-height:1.65;
}
.badges{text-align:center;padding:0 0 26px}
.badgenote{
  margin:0 auto 20px;max-width:62ch;color:var(--muted);
  font-size:clamp(9.5px,2.4vw,12px);letter-spacing:.09em;
  text-transform:uppercase;font-weight:300;line-height:1.7;
}
.badges img{margin:0 auto;width:min(660px,94%);opacity:.92}
.empty{text-align:center;padding:80px 0;color:var(--muted)}

/* ================= ბადე ================= */
.grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
@media (max-width:640px){ .grid{grid-template-columns:1fr;gap:20px} }

/* ================= ბარათი ================= */
.card{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--cardline);
  border-radius:16px;
  overflow:hidden;
}
.shot{background:var(--shot);aspect-ratio:1268/1570;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:contain;object-position:center}

.head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px var(--pad) 0;
}
.head h3{
  margin:0;font-size:clamp(15px,3.9vw,18px);font-weight:600;
  letter-spacing:-.005em;line-height:1.3;
}
.price{
  flex:0 0 auto;font-size:clamp(17px,4.4vw,20px);font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;line-height:1.2;
}
.price i{font-style:normal;font-weight:600}

.ing{
  margin:0;padding:10px var(--pad) 0;color:var(--muted);
  font-size:clamp(11px,2.9vw,12.5px);font-weight:300;
  letter-spacing:.055em;line-height:1.6;text-transform:uppercase;
}

.rule{height:1px;background:var(--rule);margin:14px var(--pad) 0}

.text{
  padding:13px var(--pad) 0;
  font-size:clamp(11.5px,3vw,13px);line-height:1.62;
}
.sub{margin:0;font-size:1em;font-weight:600;letter-spacing:.045em;text-transform:uppercase;line-height:1.4}
.ka{margin:8px 0 0;color:var(--muted);font-size:1em;line-height:1.62}

.nutbox{padding:14px var(--pad) 18px}
.nutlabel{margin:0 0 2px;font-size:clamp(11px,2.9vw,12.5px)}
.nut{margin:0;font-size:clamp(11px,2.9vw,12.5px);letter-spacing:.045em;color:var(--muted)}

/* --- ფიქსირებული სიმაღლეები ---
   ტექსტი არ იჭრება: ეს მინიმუმებია, რომ მოკლე ბლოკმაც დაიკავოს
   იგივე ადგილი, რაც გრძელმა — ანუ ხაზები ერთ დონეზე დადგეს. */
.head h3{min-height:2lh}
.ing{min-height:calc(2lh + 10px)}
.text{min-height:calc(4lh + 13px)}
@media (min-width:641px){
  .ing{min-height:calc(3lh + 10px)}
  .text{min-height:calc(5lh + 13px)}
}
/* fallback ძველი ბრაუზერებისთვის, სადაც lh ერთეული არ არსებობს */
@supports not (height: 1lh){
  .head h3{min-height:2.6em}
  .ing{min-height:calc(3.2em + 10px)}
  .text{min-height:calc(6.5em + 13px)}
  @media (min-width:641px){
    .ing{min-height:calc(4.8em + 10px)}
    .text{min-height:calc(8.1em + 13px)}
  }
}

/* subgrid — ერთ რიგში მდგარი ბარათების ყველა ხაზი ზუსტად ერთ დონეზე */
@supports (grid-template-rows: subgrid){
  @media (min-width:641px){
    .card{display:grid;grid-row:span 6;grid-template-rows:subgrid}
  }
}

/* ================= ქვედა ================= */
footer{margin-top:84px;padding:36px 20px 54px;text-align:center;border-top:1px solid var(--hair)}
footer p{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:300}

@media (prefers-reduced-motion:no-preference){
  .card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .card.in{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}