/* ============================================================ kCalori — hledání v potravinové databázi (.fsearch) ------------------------------------------------------------ Navazuje na site.css: bere jeho tokeny, tvary a chování formuláře z bloku .calc-*. Panel s výsledky je součástí stránky, ne plovoucí overlay — roste dolů pod polem. ============================================================ */ /* ─────────── 1. RÁMEC SEKCE ─────────── */ /* Hlavička sekce má globálně až 92px pod sebou. Tady je pole pokračováním věty z lede, tak ho pouštíme blíž. */ .sec-search .sec-head { margin-bottom: clamp(30px, 4.2vw, 54px); } .fsearch { max-width: 980px; } /* Vlastní display: … na prvcích níž by přebilo UA styl pro [hidden], proto to jednou pro celý strom sekce. */ .fsearch [hidden] { display: none !important; } /* ─────────── 2. VSTUPNÍ POLE ─────────── */ .fsearch-field { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 18px; border-radius: var(--r-md); /* Silnější čára než --line-2 schválně: rámeček je jediné, co pole vymezuje, dokud není zaostřené, a --line-2 má proti tomuhle podkladu jen 1,45:1 — hluboko pod prahem 3:1, který WCAG 1.4.11 žádá po ovládacích prvcích. 0,40 vychází na 3,2:1 (0,36 dalo 2,97 — počítáno, ne odhadnuto). */ border: 1px solid rgba(244,241,232,0.40); background: rgba(6,7,6,0.55); transition: border-color .3s, background .3s, box-shadow .3s; } .fsearch-field:focus-within { border-color: var(--green); background: rgba(6,7,6,0.85); box-shadow: 0 0 0 3px rgba(74,222,128,0.12); } .fsearch-icon { flex: none; color: var(--ink-3); transition: color .3s; } .fsearch-field:focus-within .fsearch-icon { color: var(--green); } .fsearch-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--disp); font-weight: 500; letter-spacing: -0.01em; /* 16px je spodní hranice, pod kterou iOS Safari při zaostření stránku přiblíží. Na desktopu se pole zvětší níž. */ font-size: 16px; line-height: 1.4; } .fsearch-input::placeholder { color: var(--ink-3); font-weight: 400; } /* Zaostření kreslí celý rámeček pole (focus-within). Globální obrys ze site.css by uvnitř udělal druhý, menší — proto ho tady mažeme. */ .fsearch-input:focus, .fsearch-input:focus-visible { outline: none; } .fsearch-clear { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: rgba(244,241,232,0.05); color: var(--ink-2); cursor: pointer; transition: border-color .3s, background .3s, color .3s; } /* Křížek je vizuálně 36px, ale prst potřebuje 44 — dorovnáno neviditelnou plochou. */ .fsearch-clear::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; } .fsearch-clear:hover { border-color: var(--line-2); background: rgba(244,241,232,0.1); color: var(--ink); } .fsearch-clear:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 999px; } /* ─────────── 3. PANEL ─────────── */ /* min-height drží výšku při přeskoku idle → loading → results, aby patička pod polem neposkakovala. */ .fsearch-panel { margin-top: 14px; min-height: 96px; } .fsearch-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fsearch-hint-label { margin-right: 4px; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .fsearch-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 17px; border-radius: 999px; /* Táž úvaha jako u pole (1.4.11): hranice je jediné, co z chipu dělá tlačítko. */ border: 1px solid rgba(244,241,232,0.40); background: rgba(244,241,232,0.03); color: var(--ink-2); font-size: 0.85rem; cursor: pointer; transition: border-color .3s, background .3s, color .3s; } .fsearch-chip:hover { border-color: var(--gold-2); background: rgba(244,241,232,0.07); color: var(--ink); } .fsearch-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 999px; } /* Když se hledá nebo už jsou výsledky, nápověda by jen odváděla oko. */ .fsearch[data-state="loading"] .fsearch-hint, .fsearch[data-state="results"] .fsearch-hint { display: none; } /* ─────────── 4. VÝSLEDKY ─────────── */ .fsearch-results { display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(244,241,232,0.04), rgba(244,241,232,0.012)); overflow: hidden; animation: fsearch-in .35s var(--ease) both; } .fsearch-row + .fsearch-row { border-top: 1px solid var(--line); } .fsearch-link { display: grid; align-items: center; gap: 6px 12px; padding: 14px 16px; grid-template-columns: auto minmax(0, 1fr) auto; /* Emoji drží levý sloupec přes celou kartu, takže název, kcal, makra i porce začínají na jedné svislici. */ grid-template-areas: "emoji id go" "emoji energy go" "emoji macros go" "emoji serving go"; transition: background .25s; } .fsearch-link:hover { background: rgba(244,241,232,0.05); } /* Obrys dovnitř: řádky sedí těsně u zaobleného okraje seznamu, který má overflow:hidden — vnější obrys by se uřízl. Poloměr nulujeme, protože globální pravidlo v site.css sráží zaostřené odkazy a tlačítka na 4px a pilulkám tím ukousne rohy. */ .fsearch-link:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 0; } /* Řádek vybraný klávesnicí. Nestačí barva pozadí — ta se plete s hoverem myši, proto navíc zelený pruh na hraně. */ .fsearch-row.is-active .fsearch-link { background: rgba(74,222,128,0.07); box-shadow: inset 3px 0 0 var(--green); } .fsearch-emoji { grid-area: emoji; width: 2rem; font-size: 1.35rem; line-height: 1; display: flex; justify-content: center; color: var(--ink-2, rgba(255,255,255,.62)); } /* Ikony jídel (Lucide, ISC) místo emoji — stejná sada jako v appce, generuje Scripts/ikony-lucide.mjs --jen-jidla. Emoji v datech je jen klíč. */ .ik { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--ik) center/contain no-repeat; mask: var(--ik) center/contain no-repeat; } .ik-utensils{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E")} .ik-croissant{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 18H4.774a1.5 1.5 0 0 1-1.352-.97 11 11 0 0 1 .132-6.487'/%3E%3Cpath d='M18 10.2V4.774a1.5 1.5 0 0 0-.97-1.352 11 11 0 0 0-6.486.132'/%3E%3Cpath d='M18 5a4 3 0 0 1 4 3 2 2 0 0 1-2 2 10 10 0 0 0-5.139 1.42'/%3E%3Cpath d='M5 18a3 4 0 0 0 3 4 2 2 0 0 0 2-2 10 10 0 0 1 1.42-5.14'/%3E%3Cpath d='M8.709 2.554a10 10 0 0 0-6.155 6.155 1.5 1.5 0 0 0 .676 1.626l9.807 5.42a2 2 0 0 0 2.718-2.718l-5.42-9.807a1.5 1.5 0 0 0-1.626-.676'/%3E%3C/svg%3E")} .ik-wheat{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22 16 8'/%3E%3Cpath d='M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z'/%3E%3Cpath d='M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3C/svg%3E")} .ik-soup{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.248 3c.273.1.808.53.747 1.36-.05.83-.938 1.2-.989 2.02-.06.78.333 1.24.727 1.62'/%3E%3Cpath d='M16.252 3c.268.1.794.53.745 1.36-.06.83-.923 1.2-.993 2.02-.05.78.338 1.24.725 1.62'/%3E%3Cpath d='M19.5 12 22 6'/%3E%3Cpath d='M4 12a1 1 0 00-.99 1.133A9 9 0 0012 21a9 9 0 008.99-7.867A1 1 0 0020 12z'/%3E%3Cpath d='M6.252 3c.268.1.794.53.745 1.36-.06.83-.923 1.2-.993 2.02-.05.78.338 1.24.735 1.62'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E")} .ik-cooking-pot{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='m4 8 16-4'/%3E%3Cpath d='m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8'/%3E%3C/svg%3E")} .ik-beef{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.4 13.7A6.5 6.5 0 1 0 6.28 6.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3'/%3E%3Cpath d='m18.5 6 1.754 3.5a6.48 6.48 0 0 1-1.854 8.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5'/%3E%3Ccircle cx='12.5' cy='8.5' r='2.5'/%3E%3C/svg%3E")} .ik-drumstick{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4 15.63a7.875 6 135 1 1 6.23-6.23 4.5 3.43 135 0 0-6.23 6.23'/%3E%3Cpath d='m8.29 12.71-2.6 2.6a2.5 2.5 0 1 0-1.65 4.65A2.5 2.5 0 1 0 8.7 18.3l2.59-2.59'/%3E%3C/svg%3E")} .ik-ham{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.144 21.144A7.274 10.445 45 1 0 2.856 10.856'/%3E%3Cpath d='M13.144 21.144A7.274 4.365 45 0 0 2.856 10.856a7.274 4.365 45 0 0 10.288 10.288'/%3E%3Cpath d='M16.565 10.435 18.6 8.4a2.501 2.501 0 1 0 1.65-4.65 2.5 2.5 0 1 0-4.66 1.66l-2.024 2.025'/%3E%3Cpath d='m8.5 16.5-1-1'/%3E%3C/svg%3E")} .ik-fish{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z'/%3E%3Cpath d='M18 12v.5'/%3E%3Cpath d='M16 17.93a9.77 9.77 0 0 1 0-11.86'/%3E%3Cpath d='M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33'/%3E%3Cpath d='M10.46 7.26C10.2 5.88 9.17 4.24 8 3h5.8a2 2 0 0 1 1.98 1.67l.23 1.4'/%3E%3Cpath d='m16.01 17.93-.23 1.4A2 2 0 0 1 13.8 21H9.5a5.96 5.96 0 0 0 1.49-3.98'/%3E%3C/svg%3E")} .ik-shrimp{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2a3.28 3.28 0 003.227 1.798l6.17-.561A1 1 0 1119.614 8H8.5a6.44 6.44 0 00-5.63 9.75A6.5 6.5 0 008.5 21c1.38 0 2-.5 2.5-1'/%3E%3Cpath d='M10 8a8.5 8.5 0 000 8'/%3E%3Cpath d='M11 22c-.5-.5-1.12-1-2.5-1a1 1 0 010-5H12a7 7 0 007-7V8'/%3E%3Cpath d='M13 12h.01'/%3E%3Cpath d='M8 16c-2 0-4.5-4-4-6'/%3E%3C/svg%3E")} .ik-egg{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12'/%3E%3C/svg%3E")} .ik-egg-fried{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11.5' cy='12.5' r='3.5'/%3E%3Cpath d='M3 8c0-3.5 2.5-6 6.5-6 5 0 4.83 3 7.5 5s5 2 5 6c0 4.5-2.5 6.5-7 6.5-2.5 0-2.5 2.5-6 2.5s-7-2-7-5.5c0-3 1.5-3 1.5-5C3.5 10 3 9 3 8Z'/%3E%3C/svg%3E")} .ik-milk{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8'/%3E%3Cpath d='M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2'/%3E%3Cpath d='M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0'/%3E%3C/svg%3E")} .ik-salad{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.496 12a2.5 2.5 0 00.399-2.214A2 2 0 0020.32 6.5 2 2 0 0019 3a2 2 0 00-1.5.68 2 2 0 00-3.287.424 2.5 2.5 0 00-3.189 2.06A3 3 0 0012 12l4-4'/%3E%3Cpath d='M4 12a1 1 0 00-.99 1.133A9 9 0 0012 21a9 9 0 008.99-7.867A1 1 0 0020 12z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M9.85 6.907A3.5 3.5 0 005.05 12'/%3E%3C/svg%3E")} .ik-leafy-green{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22c1.25-.987 2.27-1.975 3.9-2.2a5.56 5.56 0 0 1 3.8 1.5 4 4 0 0 0 6.187-2.353 3.5 3.5 0 0 0 3.69-5.116A3.5 3.5 0 0 0 20.95 8 3.5 3.5 0 1 0 16 3.05a3.5 3.5 0 0 0-5.831 1.373 3.5 3.5 0 0 0-5.116 3.69 4 4 0 0 0-2.348 6.155C3.499 15.42 4.409 16.712 4.2 18.1 3.926 19.743 3.014 20.732 2 22'/%3E%3Cpath d='M2 22 17 7'/%3E%3C/svg%3E")} .ik-carrot{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 16a1 1 0 0 0-7-7q-4 4-5.987 12.385a.5.5 0 0 0 .602.602Q11 20 15 16l-3-3'/%3E%3Cpath d='M15 9q4 4 7 0-3-4-7 0 4-4 0-7-4 3 0 7'/%3E%3Cpath d='m8 15-2.58-2.58'/%3E%3C/svg%3E")} .ik-apple{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.528V3a1 1 0 0 1 1-1h0'/%3E%3Cpath d='M18.237 21A15 15 0 0 0 22 11a6 6 0 0 0-10-4.472A6 6 0 0 0 2 11a15.1 15.1 0 0 0 3.763 10 3 3 0 0 0 3.648.648 5.5 5.5 0 0 1 5.178 0A3 3 0 0 0 18.237 21'/%3E%3C/svg%3E")} .ik-banana{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5'/%3E%3Cpath d='M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z'/%3E%3C/svg%3E")} .ik-citrus{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.66 17.67a1.08 1.08 0 0 1-.04 1.6A12 12 0 0 1 4.73 2.38a1.1 1.1 0 0 1 1.61-.04z'/%3E%3Cpath d='M19.65 15.66A8 8 0 0 1 8.35 4.34'/%3E%3Cpath d='m14 10-5.5 5.5'/%3E%3Cpath d='M14 17.85V10H6.15'/%3E%3C/svg%3E")} .ik-grape{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 5V2l-5.89 5.89'/%3E%3Ccircle cx='16.6' cy='15.89' r='3'/%3E%3Ccircle cx='8.11' cy='7.4' r='3'/%3E%3Ccircle cx='12.35' cy='11.65' r='3'/%3E%3Ccircle cx='13.91' cy='5.85' r='3'/%3E%3Ccircle cx='18.15' cy='10.09' r='3'/%3E%3Ccircle cx='6.56' cy='13.2' r='3'/%3E%3Ccircle cx='10.8' cy='17.44' r='3'/%3E%3Ccircle cx='5' cy='19' r='3'/%3E%3C/svg%3E")} .ik-cherry{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z'/%3E%3Cpath d='M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z'/%3E%3Cpath d='M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12'/%3E%3Cpath d='M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z'/%3E%3C/svg%3E")} .ik-bean{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z'/%3E%3Cpath d='M5.341 10.62a4 4 0 1 0 5.279-5.28'/%3E%3C/svg%3E")} .ik-nut{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.847 5.847 20 9a7.23 7.23 0 011.551 7.516C21.241 17.352 21 17.932 21 19v1a1 1 0 01-1 1h-1c-1.069 0-1.648.242-2.485.552A7.2 7.2 0 019.002 20l-3.155-3.153'/%3E%3Cpath d='M18.21 5.43c-1.71.69-5.07 1.07-6.71 1.07.46 1.38.91 2.74.61 4.88a.88.88 0 01-.73.74c-1.78.28-3.54-.17-4.88-.62 0 1.64-.38 5-1.07 6.71-.21.52-.82.55-1.17.12A10 10 0 0118.33 4.26c.43.35.4.97-.12 1.17'/%3E%3Cpath d='M4.93 4.93 3 3a.7.7 0 010-1'/%3E%3C/svg%3E")} .ik-candy{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7v10.9'/%3E%3Cpath d='M14 6.1V17'/%3E%3Cpath d='M16 7V3a1 1 0 0 1 1.707-.707 2.5 2.5 0 0 0 2.152.717 1 1 0 0 1 1.131 1.131 2.5 2.5 0 0 0 .717 2.152A1 1 0 0 1 21 8h-4'/%3E%3Cpath d='M16.536 7.465a5 5 0 0 0-7.072 0l-2 2a5 5 0 0 0 0 7.07 5 5 0 0 0 7.072 0l2-2a5 5 0 0 0 0-7.07'/%3E%3Cpath d='M8 17v4a1 1 0 0 1-1.707.707 2.5 2.5 0 0 0-2.152-.717 1 1 0 0 1-1.131-1.131 2.5 2.5 0 0 0-.717-2.152A1 1 0 0 1 3 16h4'/%3E%3C/svg%3E")} .ik-cookie{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17h.01'/%3E%3Cpath d='M11.496 2c.324-.016.558.292.529.615a4 4 0 004.235 4.368.713.713 0 01.758.757 4 4 0 004.366 4.237c.323-.03.63.204.614.527a10 10 0 01-2.915 6.566A1 1 0 114.93 4.918 10 10 0 0111.496 2'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 16h.01'/%3E%3Cpath d='M16 3h.01'/%3E%3Cpath d='M21 4h.01'/%3E%3Cpath d='M21 8h.01'/%3E%3Cpath d='M7 14h.01'/%3E%3Cpath d='M9 8h.01'/%3E%3C/svg%3E")} .ik-cake-slice{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 13H3'/%3E%3Cpath d='M16 17H3'/%3E%3Cpath d='m7.2 7.9-3.388 2.5A2 2 0 0 0 3 12.01V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-8.654c0-2-2.44-6.026-6.44-8.026a1 1 0 0 0-1.082.057L10.4 5.6'/%3E%3Ccircle cx='9' cy='7' r='2'/%3E%3C/svg%3E")} .ik-donut{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 10a2.5 2.5 0 0 1-2.4-3H18a2.95 2.95 0 0 1-2.6-4.4 10 10 0 1 0 6.3 7.1c-.3.2-.8.3-1.2.3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")} .ik-ice-cream-cone{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 11 4.08 10.35a1 1 0 0 0 1.84 0L17 11'/%3E%3Cpath d='M17 7A5 5 0 0 0 7 7'/%3E%3Cpath d='M17 7a2 2 0 0 1 0 4H7a2 2 0 0 1 0-4'/%3E%3C/svg%3E")} .ik-dessert{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.162 3.167A10 10 0 0 0 2 13a2 2 0 0 0 4 0v-1a2 2 0 0 1 4 0v4a2 2 0 0 0 4 0v-4a2 2 0 0 1 4 0v1a2 2 0 0 0 4-.006 10 10 0 0 0-8.161-9.826'/%3E%3Cpath d='M20.804 14.869a9 9 0 0 1-17.608 0'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3C/svg%3E")} .ik-popcorn{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a2 2 0 0 0 0-4 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0-4 0 2 2 0 0 0 0 4'/%3E%3Cpath d='M10 22 9 8'/%3E%3Cpath d='m14 22 1-14'/%3E%3Cpath d='M20 8c.5 0 .9.4.8 1l-2.6 12c-.1.5-.7 1-1.2 1H7c-.6 0-1.1-.4-1.2-1L3.2 9c-.1-.6.3-1 .8-1Z'/%3E%3C/svg%3E")} .ik-pizza{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14-1 1'/%3E%3Cpath d='m13.75 18.25-1.25 1.42'/%3E%3Cpath d='M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12'/%3E%3Cpath d='M18.8 9.3a1 1 0 0 0 2.1 7.7'/%3E%3Cpath d='M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z'/%3E%3C/svg%3E")} .ik-hamburger{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16H4a2 2 0 1 1 0-4h16a2 2 0 1 1 0 4h-4.25'/%3E%3Cpath d='M5 12a2 2 0 0 1-2-2 9 7 0 0 1 18 0 2 2 0 0 1-2 2'/%3E%3Cpath d='M5 16a2 2 0 0 0-2 2 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 2 2 0 0 0-2-2q0 0 0 0'/%3E%3Cpath d='m6.67 12 6.13 4.6a2 2 0 0 0 2.8-.4l3.15-4.2'/%3E%3C/svg%3E")} .ik-sandwich{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.37 11.223 8.372-6.777a2 2 0 0 1 2.516 0l8.371 6.777'/%3E%3Cpath d='M21 15a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-5.25'/%3E%3Cpath d='M3 15a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h9'/%3E%3Cpath d='m6.67 15 6.13 4.6a2 2 0 0 0 2.8-.4l3.15-4.2'/%3E%3Crect width='20' height='4' x='2' y='11' rx='1'/%3E%3C/svg%3E")} .ik-coffee{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E")} .ik-cup-soda{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 1.75 12.28a2 2 0 0 0 2 1.72h4.54a2 2 0 0 0 2-1.72L18 8'/%3E%3Cpath d='M5 8h14'/%3E%3Cpath d='M7 15a6.47 6.47 0 0 1 5 0 6.47 6.47 0 0 0 5 0'/%3E%3Cpath d='m12 8 1-6h2'/%3E%3C/svg%3E")} .ik-beer{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 11h1a3 3 0 0 1 0 6h-1'/%3E%3Cpath d='M9 12v6'/%3E%3Cpath d='M13 12v6'/%3E%3Cpath d='M14 7.5c-1 0-1.44.5-3 .5s-2-.5-3-.5-1.72.5-2.5.5a2.5 2.5 0 0 1 0-5c.78 0 1.57.5 2.5.5S9.44 2 11 2s2 1.5 3 1.5 1.72-.5 2.5-.5a2.5 2.5 0 0 1 0 5c-.78 0-1.5-.5-2.5-.5Z'/%3E%3Cpath d='M5 8v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8'/%3E%3C/svg%3E")} .ik-wine{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 22h8'/%3E%3Cpath d='M7 10h10'/%3E%3Cpath d='M12 15v7'/%3E%3Cpath d='M12 15a5 5 0 0 0 5-5c0-2-.5-4-2-8H9c-1.5 4-2 6-2 8a5 5 0 0 0 5 5Z'/%3E%3C/svg%3E")} .ik-martini{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12 4.207 4.207A.707.707 0 0 1 4.707 3h14.586a.707.707 0 0 1 .5 1.207z'/%3E%3Cpath d='M12 12v10'/%3E%3Cpath d='M7 22h10'/%3E%3C/svg%3E")} .ik-glass-water{--ik:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.116 4.104A1 1 0 0 1 6.11 3h11.78a1 1 0 0 1 .994 1.105L17.19 20.21A2 2 0 0 1 15.2 22H8.8a2 2 0 0 1-2-1.79z'/%3E%3Cpath d='M6 12a5 5 0 0 1 6 0 5 5 0 0 0 6 0'/%3E%3C/svg%3E")} .fsearch-id { grid-area: id; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .fsearch-name { font-family: var(--disp); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.012em; line-height: 1.25; color: var(--ink); /* Bez tohohle by dlouhý název bez mezer roztáhl grid a stránka by se na 360px začala posouvat do stran. */ overflow-wrap: anywhere; } .fsearch-brand { font-size: 0.76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fsearch-energy { grid-area: energy; display: flex; align-items: baseline; gap: 6px; } .fsearch-kcal { font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); } .fsearch-unit { font-size: 0.72rem; color: var(--ink-3); white-space: nowrap; } .fsearch-macros { grid-area: macros; display: flex; flex-wrap: wrap; gap: 4px 14px; } .fsearch-macro { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; } .fsearch-macro b { margin-right: 2px; font-family: var(--num); font-variant-numeric: tabular-nums; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em; } .fsearch-macro[data-m="p"] b { color: var(--green); } .fsearch-macro[data-m="c"] b { color: var(--gold); } .fsearch-macro[data-m="f"] b { color: var(--amber); } .fsearch-split { grid-area: split; display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(244,241,232,0.06); } /* Šířku dílu počítá food-search.js a posílá ji inline jako --w (procenta). Je to podíl ENERGIE, ne hmotnosti — jinak by tuk vypadal jako drobnost. */ .fsearch-split i { display: block; width: var(--w, 0); } .fsearch-split i[data-m="p"] { background: var(--green); } .fsearch-split i[data-m="c"] { background: var(--gold); } .fsearch-split i[data-m="f"] { background: var(--amber); } .fsearch-serving { grid-area: serving; font-size: 0.78rem; color: var(--ink-3); } .fsearch-serving b { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gold); } .fsearch-go { grid-area: go; align-self: center; justify-self: end; padding-left: 4px; font-size: 1.05rem; color: var(--ink-3); transition: transform .3s var(--ease), color .3s; } .fsearch-link:hover .fsearch-go, .fsearch-row.is-active .fsearch-go { color: var(--green); transform: translateX(3px); } /* Řádek „zobrazeno 7 z 188". Bez něj by seznam vypadal jako celá odpověď a člověk by si myslel, že databáze zná sedm jogurtů. */ .fsearch-more { margin-top: 12px; font-size: 0.8rem; color: var(--ink-3); } .fsearch-more b { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2); } .fsearch-more a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; } .fsearch-more a:hover { color: var(--gold); } .fsearch-more a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; } /* ─────────── 5. POZNÁMKA: PRÁZDNO, CHYBA, NAČÍTÁNÍ ─────────── */ .fsearch-note { display: flex; flex-direction: column; gap: 9px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-md); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(244,241,232,0.04), rgba(244,241,232,0.012)); animation: fsearch-in .35s var(--ease) both; } .fsearch-note-title { font-family: var(--disp); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); } .fsearch-note-text { max-width: 54ch; font-size: 0.92rem; color: var(--ink-2); } .fsearch-note-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .fsearch-note-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(244,241,232,0.03); color: var(--ink); font-family: inherit; font-weight: 600; font-size: 0.9rem; transition: border-color .3s, background .3s, color .3s; } .fsearch-note-btn:hover { border-color: var(--gold-2); background: rgba(244,241,232,0.08); } /* Stejná pilulka umí být i