/* Fruity Fresh — Flavors Page Stylesheet */
/* Last updated: 2026-05-13 */
/* Active nav link + .page-hero block live in base.css */

/* ══════════════════════════════════════════════
   FILTER PILLS
══════════════════════════════════════════════ */
.filter-section {
  padding: 50px clamp(20px,5vw,64px) 0;
  background: linear-gradient(160deg,#fff8fb 0%,#f8ffff 100%);
}
.filter-wrap {
  max-width:1280px; margin:0 auto;
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center;
}
.filter-btn {
  padding:10px 24px; border-radius:999px;
  border:2px solid rgba(255,107,157,.25);
  background:#fff; color:#6B4D7A;
  font-family:var(--FB); font-size:14px; font-weight:600;
  cursor:pointer;
  transition:all .22s ease;
}
.filter-btn:hover {
  border-color:var(--accent);
  color:var(--accent);
}
.filter-btn.active {
  background:linear-gradient(135deg,var(--accent),var(--accent-dk));
  border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(255,107,157,.38);
}

/* ══════════════════════════════════════════════
   FLAVORS GRID
══════════════════════════════════════════════ */
.flavors-section {
  padding:50px clamp(20px,5vw,64px) 90px;
  background:linear-gradient(160deg,#fff8fb 0%,#f8ffff 100%);
}
.flavors-grid-wrap { max-width:1280px; margin:0 auto; }
.flavors-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:28px;
}

/* Flavor card */
.flavor-card {
  background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:0 8px 32px rgba(45,27,51,.09);
  border:1.5px solid rgba(255,107,157,.07);
  transition:transform .3s ease, box-shadow .3s ease;
  animation:cardIn .5s ease both;
}
.flavor-card:hover {
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 24px 56px rgba(255,107,157,.18);
}
@keyframes cardIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.flavor-img {
  width:100%; aspect-ratio:4/5; overflow:hidden;
  position:relative;
}
.flavor-img img {
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.flavor-card:hover .flavor-img img {
  transform:scale(1.07);
}
.flavor-ph {
  width:100%;height:100%;
  display:flex; align-items:center; justify-content:center;
}
.ph-emoji { font-size:80px; }

.flavor-body { padding:22px; }
.flavor-emoji {
  font-size:28px; margin-bottom:8px; display:block;
}
.flavor-name {
  font-family:var(--FD); font-size:22px; font-weight:700;
  color:#140820; margin-bottom:10px;
}
.flavor-tags {
  display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px;
}
.flavor-desc {
  font-size:13.5px; color:#6B4D7A; line-height:1.65;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:680px) {
  .flavors-grid {
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  .flavor-body { padding:14px; }
  .flavor-name { font-size:16px; }
  .ph-emoji { font-size:50px; }
}