:root { --flv-text:#111; --flv-muted:#666; --flv-bg:#fff7fb; --flv-card:#ffffff; --flv-ring:rgba(0,0,0,.08); }
.flavor-icon img { width:28px; height:28px; }
.container-flv { max-width:1100px; margin:0 auto; padding:24px 16px 64px; }
.header-flv .title-flv { font-size:clamp(28px, 3vw, 40px); line-height:1.1; margin:0 0 6px; }
.header-flv .subtitle-flv { color:var(--flv-muted); margin:0 0 18px; }
.toolbar-flv { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin-bottom:18px; }
.controls-flv { display:flex; flex-wrap:wrap; gap:10px; }
.actions-flv { display:flex; align-items:center; gap:10px; }
.search-flv, .select-flv, .button-flv { height:38px; min-height:38px; padding:0 12px; border:1px solid var(--color-pink); border-radius:10px; background:#fff; outline:none; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.search-flv { width:min(56vw, 300px); }
.button-flv { padding:0 14px; background:var(--color-pink); color:#fff; font-weight:600; cursor:pointer; }
.button-flv:disabled { opacity:.5; cursor:default; }
.badge-flv { font-size:14px; color:var(--flv-muted); display:inline-block; min-width:75px; text-align:right; }
.flavor-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem; padding:.51rem; max-width:768px; margin:0 auto; justify-items:center; }
.flavor-card { background:#fff; border-radius:16px; padding:.5rem; box-shadow:0 4px 12px rgba(255,6,181,.12); border:1px solid rgba(255,6,181,.1); transition:transform .2s ease,box-shadow .2s ease; }
.flavor-card:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(255,6,181,.2); }
.flavor-title { font-size:1.1rem; font-weight:700; margin:.75rem 0 .5rem; }
.grid-flv { display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.card-flv { grid-column:span 3; list-style:none; background:var(--flv-card); border:1px solid var(--flv-ring); border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease; display:flex; flex-direction:column; min-height:360px; }
.card-flv:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06); }
.image-box-flv { aspect-ratio:1/1; background:#fff; border-radius:12px; box-shadow:0 4px 10px rgba(255,0,177,.2); overflow:hidden; margin:10px; position:relative; }
.image-flv { width:100%; height:100%; display:block; object-fit:cover; transition:transform .25s ease; }
.card-flv:hover .image-flv { transform:scale(1.035); }
.content-flv { padding:10px 14px 14px; }
.name-flv { font-size:18px; margin:8px 0 6px; }
.desc-flv { color:var(--flv-muted); font-size:14px; margin:0 0 8px; }
.allergens-flv { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-weight:600; justify-content:center; }
.allergens-flv .chip { padding:4px 8px; border-radius:999px; font-size:0.8rem; background:#fff; border:1px solid rgba(0,0,0,.08); }
.page-flv { background:var(--flv-bg); color:var(--flv-text); line-height:1.5; }
@media (max-width:768px){.search-flv{font-size:1rem!important;}}
@media (max-width:768px){.flavor-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:1220px) { .grid-flv { grid-template-columns:repeat(9, 1fr); } }
@media (max-width:900px) { .grid-flv { grid-template-columns:repeat(6, 1fr); } }
@media (max-width:620px) { .grid-flv { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:460px) { .grid-flv { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:900px) { .card-flv { grid-column:span 3; } }
@media (max-width:620px) { .card-flv { grid-column:span 2; } }
.card-flv:hover { box-shadow:0 12px 28px rgba(0,0,0,.08); }
.highlight-flv { color:var(--color-pink); background:linear-gradient(90deg,var(--color-pink),#ff66d5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.title-pink { background:linear-gradient(90deg,var(--color-pink),#ff66d5); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hidden-flv { display:none !important; }
.allergens-flv .chip.is-vegan { color:var(--color-pink); border-color:var(--color-pink); background:#fff7fb; }
.card-flv[hidden], .card-flv[aria-hidden="true"], .card-flv.is-hidden { display:none !important; }
.flavor-badges { margin:1.5rem 0; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.flavor-badges span { background:#fff; border:2px solid var(--color-pink); border-radius:30px; padding:0.5rem 1rem; font-weight:600; font-size:0.9rem; color:var(--color-pink); }