/* ---------- INGREDIENT COVER (container-width banner, lifted -45px) ---------- */
.aron-note-cover{
  position:relative;
  display:block;
  clear:both;
  isolation:isolate;
  z-index:2;

  width:100%;              /* აღარ არის 100vw → აღარ გადადის sidebar-ის უკან */
  margin:0 auto;
  margin-top:-45px!important;  /* ზედა სივრცე თითქმის ნულამდეა */
  margin-bottom:16px;          /* პროდუქტებს ცოტა ჰაერი აქვს ქვემოთ */

  border-radius:0;
  overflow:hidden;
  aspect-ratio:32/8;
  background:#f3f4f6;
  box-shadow:none;
}

@media(max-width:1200px){
  .aron-note-cover{aspect-ratio:21/8;}
}
@media(max-width:768px){
  .aron-note-cover{
    aspect-ratio:16/9;
    margin-top:-20px!important;
  }
}

.aron-note-cover__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(104%) contrast(102%);
  transform:translateZ(0);
}
.aron-note-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
      rgba(255,255,255,.88)0%,rgba(255,255,255,.55)24%,
      rgba(255,255,255,.20)52%,rgba(255,255,255,0)72%);
}

/* ---------- TITLE BLOCK ---------- */
.aron-note-cover__title{
  position:absolute;
  left:50%;
  top:10%;
  transform:translateX(-50%);
  z-index:3;
  color:#111;
  text-align:center;
  max-width:min(80%,980px);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.aron-note-cover__title h1{
  margin:0 0 6px;
  font:800 clamp(28px,4.5vw,44px)/1.1 system-ui;
  letter-spacing:.2px;
}
.aron-note-cover__latin{
  font:700 italic clamp(14px,2.1vw,20px)/1.35 system-ui;
  opacity:.9;
  margin-bottom:8px;
}
.aron-note-cover__other,
.aron-note-cover__group{
  font:700 clamp(13px,1.8vw,16px)/1.35 system-ui;
  color:#1f2937;
}
.aron-note-cover__other em{
  font-style:normal;
  opacity:.9;
}

/* ---------- FLOATING IMAGES ---------- */
.aron-note-cover__over{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.aron-note-cover__img{
  position:absolute;
  bottom:18px;
  width:clamp(84px,10vw,120px);
  height:clamp(84px,10vw,120px);
  border-radius:18px;
  overflow:hidden;
  background:#fff9;
  box-shadow:0 10px 26px rgba(0,0,0,.18),
             0 1px 0 rgba(255,255,255,.5) inset;
}
.aron-note-cover__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.aron-note-cover__img.--left{left:28px;}
.aron-note-cover__img.--right{right:28px;}

@media(max-width:720px){
  .aron-note-cover__title{
    top:12%;
    max-width:88%;
  }
  .aron-note-cover__img{
    border-radius:14px;
    bottom:12px;
  }
  .aron-note-cover__img.--left{left:14px;}
  .aron-note-cover__img.--right{right:14px;}
}

/* ===== token UI ===== */
.select2-container--default .select2-selection--multiple{
  min-height:38px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  padding:2px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:#fff7ed;
  border:1px solid #f3d19a;
  border-radius:999px;
  color:#111;
  font-size:13px;
  padding:3px 10px;
  margin-top:6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color:#9ca3af;
  margin-right:6px;
}
.select2-results__option{
  font-size:14px;
  padding:6px 8px;
}

/* =========================================================
   NOTES – hover მხოლოდ სურათზე (სუნთქვის გარეშე)
   ========================================================= */

/* Motion accessibility */
@media(prefers-reduced-motion:reduce){
  .aron-note,
  .aron-note img,
  .aron-ing-tile,
  .aron-note-cover__img img,
  .aron-note-cover__bg{
    transition:none!important;
    animation:none!important;
  }
}

/* ბარას საბაზისო სტილი */
.aron-note{
  position:relative;
  background:transparent!important;
  box-shadow:none!important;
}

/* --- Image (No breathing animation anymore) --- */
.aron-note img{
  display:block;
  position:relative;
  will-change:transform;
  margin-top:0;
  transition:transform .55s cubic-bezier(.25,.8,.25,1);
  /* არანაირი animation აქ! */
}

/* Hover – ძალიან დახვეწილი, ხტომის გარეშე */
.aron-note:hover img{
  transform:
    translateY(-8px)     /* ოდნავ მაღლა */
    scale(1.08)          /* მსუბუქი, ელეგანტური გაზრდა */
    rotate(0.9deg);      /* სუპერ მსუბუქი გადახრა */
}

/* Focus cleanup */
.aron-note:focus-visible{
  outline:none!important;
  box-shadow:none!important;
}

/* --- Group tiles (optional mild hover) --- */
.aron-ing-tile{
  transition:transform .25s ease,background-color .25s ease;
  border-radius:14px;
}
.aron-ing-tile:hover{
  transform:translateY(-3px);
  background-color:rgba(0,0,0,.015);
  box-shadow:none!important;
}

/* --- Cover floating imgs & bg interactions --- */
.aron-note-cover__img img{
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.aron-note-cover__img.--left:hover  img{transform:translateY(-6px) rotate(-1deg);}
.aron-note-cover__img.--right:hover img{transform:translateY(-6px) rotate(1deg);}

.aron-note-cover__bg{
  transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.aron-note-cover:hover .aron-note-cover__bg{
  transform:scale(1.03) translateY(-2px);
  filter:saturate(108%) contrast(104%);
}

/* ===== NOTES GRID – 5-მდე ბლოკი ხაზში, ხაზი დამოუკიდებლად ცენტრში ===== */

.aron-notes .aron-grid{
  display:flex !important;          /* grid-ს ვფარავთ */
  flex-wrap:wrap;
  justify-content:center;           /* ყოველი ხაზი დამოუკიდებლად ცენტრში */
  gap:var(--aron-gap);
}

.aron-note-cover img,
.aron-note img,
.aron-ing-img{
    -webkit-user-drag: none;
    user-drag: none;
}

/* საბაზისო: მობილურზე ~2 სვეტი */
.aron-notes .aron-grid .aron-note{
  flex:0 1 calc(50% - var(--aron-gap));
  max-width:calc(50% - var(--aron-gap));
}

/* ტაბლეტი: ~3 სვეტი */
@media (min-width: 640px){
  .aron-notes .aron-grid .aron-note{
    flex:0 1 calc(33.333% - var(--aron-gap));
    max-width:calc(33.333% - var(--aron-gap));
  }
}

/* დესკტოპი: მაქსიმუმ 5 სვეტი ხაზში */
@media (min-width: 1024px){
  .aron-notes .aron-grid .aron-note{
    flex:0 1 calc(20% - var(--aron-gap));
    max-width:calc(20% - var(--aron-gap));
  }
}