/* Aromati Notes — Facets (front styles) */

/* რიგი, სადაც 8 აიქონია */
.aron-facets-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:space-between;
  align-items:flex-end;
  margin:10px 0 4px;
}

.af-item{
  flex:1 1 0;
  min-width:80px;
  max-width:120px;
  text-align:center;
  /* font-family მოვხსენით, რომ თემა აკონტროლებდეს (H4 სტილი) */
  cursor:pointer;
  transition:transform .25s ease, filter .25s ease;
}

/* mood / gender ცოტა ვიწროა */
.af-item--mood,
.af-item--gender{
  max-width:90px;
}

/* ---- ICON ---- */

/* ყველა SVG – ოდნავ უფრო პატარა (36px) */
.af-icon{
  position:relative;
  width:30px;
  height:30px;
  margin:0 auto 8px;
}

.af-item--mood .af-icon,
.af-item--gender .af-icon,
.af-item--season .af-icon,
.af-item--time .af-icon{
  width:32px;
  height:32px;
}

/* SVG */
.af-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  transition:transform .25s ease, filter .25s ease;
}

/* შიდა შრე აღარ გვჭირდება */
.af-icon-fill{
  display:none !important;
}

/* ---- LABELS (H4) ---- */
.af-label{
  font-size:11px;          /* შეგიძლია მოხსნა, თუ სუფთა Porto H4 გინდა */
  line-height:1.2;
  color:#111827;
  text-transform:lowercase;
  margin:2px 0 4px;
}

/* ---- BARS ---- */
.af-bar{
  position:relative;
  width:100%;
  max-width:80px;
  height:4px;
  margin:0 auto;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.af-bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#d4d4d8;
  width:0;
  transition:width .35s ease;
}

/* ==== Mood (pastel fills) ==== */
.af-item--mood-love .af-bar span{ background:#fecaca; }
.af-item--mood-like .af-bar span{ background:#f9a8d4; }
.af-item--mood-ok   .af-bar span{ background:#fdba74; }

/* ==== Gender ==== */
.af-item--gender-woman  .af-bar span{ background:#f9a8d4; }
.af-item--gender-man    .af-bar span{ background:#93c5fd; }
.af-item--gender-unisex .af-bar span{ background:#6ee7b7; }

/* ==== Seasons ==== */
.af-item--winter .af-bar span{ background:#7dd3fc; }
.af-item--spring .af-bar span{ background:#86efac; }
.af-item--summer .af-bar span{ background:#fda4af; }
.af-item--autumn .af-bar span{ background:#fed7aa; }

/* ==== Time ==== */
.af-item--day   .af-bar span{ background:#fde68a; }
.af-item--night .af-bar span{ background:#93c5fd; }

/* ==== HOVER EFFECTS (movement only – no color change) ==== */

.af-item:hover{
  transform:translateY(-3px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.af-item:hover .af-icon img{
  transform:scale(1.06);
  filter:brightness(1.05);
}

/* ბარის ფერი ჰოვერზე იგივე რჩება – არაფერი გვიწერია */

/* ==== Responsive ==== */
@media (max-width:768px){
  .aron-facets-row{
    gap:12px;
    justify-content:center;
  }
  .af-item{
    max-width:90px;
  }

  /* მობილზე კიდევ ოდნავ პატარა (32px) */
  .af-icon,
  .af-item--mood .af-icon,
  .af-item--gender .af-icon,
  .af-item--season .af-icon,
  .af-item--time .af-icon{
    width:32px;
    height:32px;
  }
}