@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url(/fonts/outfit-latin-700.woff2) format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url(/fonts/outfit-latin-ext-700.woff2) format("woff2");unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }:root {color-scheme: light;--bg: #F6F8FB; --card: #FFFFFF; --ink: #1F2024; --body: #3E3F46; --muted: #62636B; --line: #E6E9EF;--teal: #00A099; --teal-ink: #007A74; --teal-wash: #E7F5F4; --ai: #8E5BD0;--protein: #E58600; --carbs: #2F7FE0; --fat: #E5486A; --fiber: #2A9A4B;--display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--r-lg: 24px; --r-md: 20px; --r-sm: 12px;}*, *::before, *::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; }body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.55; }img { max-width: 100%; }a { color: inherit; }[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .kcal, [dir="rtl"] .mac b, [dir="rtl"] .brand span { font-family: var(--text); letter-spacing: 0; }.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 16px; }.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; }.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-ink); color: #fff; text-decoration: none; font-weight: 600; border-radius: 14px; padding: 12px 18px; font-size: 15px; white-space: nowrap; }.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 12px; }a:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 8px; }.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 20; }.skip:focus { inset-inline-start: 8px; }.top { position: sticky; top: 0; z-index: 10; background: rgb(246 248 251 / .94); border-bottom: 1px solid var(--line); }.top-in { display: flex; align-items: center; gap: 20px; height: 60px; }.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }.brand span { font-family: var(--display); font-weight: 700; font-size: 19px; }.nav { display: none; gap: 22px; font-size: 14.5px; }.nav a { text-decoration: none; color: var(--muted); }.nav a[aria-current] { color: var(--ink); font-weight: 600; }.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }.langs-menu { position: relative; }.langs-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); padding: 6px; }.langs-menu summary::-webkit-details-marker { display: none; }.langs-menu summary span { display: none; }.langs-menu ul { position: absolute; inset-inline-end: 0; top: 40px; z-index: 30; list-style: none; margin: 0; padding: 8px; width: min(320px, 86vw); max-height: 60vh; overflow: auto;background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px -16px rgb(31 32 36 / .3); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }.langs-menu li a { display: block; padding: 7px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; }.langs-menu li a:hover, .langs-menu li a[aria-current] { background: var(--teal-wash); }.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 0 0; margin: 0; font-size: 13.5px; color: var(--muted); }.crumbs li + li::before { content: "›"; margin-inline-end: 4px; color: #A5A8B0; }[dir="rtl"] .crumbs li + li::before { content: "‹"; }.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }.crumbs [aria-current] { color: var(--ink); }.hero { display: grid; gap: 18px; padding-block: 14px 8px; }.hero-fig { margin: 0 -16px; }.ph { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #DDE3EA; }.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }.portrait .ph img.bg { position: absolute; inset: 0; filter: blur(28px) saturate(1.15); transform: scale(1.25); opacity: .85; }.portrait .ph img.fg { position: relative; object-fit: contain; }.hero-fig figcaption { font-size: 12px; color: var(--muted); padding: 8px 16px 0; }.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--teal-ink); letter-spacing: .02em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }.local { margin: 4px 0 0; color: var(--muted); font-style: italic; }.byline { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }.byline b { color: var(--ink); font-weight: 600; }.byline a { color: var(--teal-ink); font-weight: 600; text-decoration: none; } .byline a:hover { text-decoration: underline; }.ck { width: 15px; height: 15px; color: var(--teal-ink); stroke-width: 2.4; }.desc { margin: 12px 0 0; color: var(--body); max-width: 62ch; font-size: 16.5px; }.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }.facts div { padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }.facts div + div { border-inline-start: 1px solid var(--line); }.facts dt { font-size: 12px; color: var(--muted); font-weight: 600; }.facts dd { margin: 0; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }.tags { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }.tags li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }.tags li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #B4B7BE; margin-inline-end: 2px; }.tags .ic { width: 16px; height: 16px; color: var(--teal-ink); }.nut { margin-top: 18px; background: var(--card); border-radius: var(--r-md); padding: 16px; border: 1px solid var(--line); }.nut-top { display: flex; align-items: center; gap: 14px; }.ring-w { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; }.ring { position: absolute; inset: 0; width: 64px; height: 64px; }.ring-t { fill: none; stroke: #E8E8E8; stroke-width: 7; }.ring-v { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; }.ring-w b { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; }.nut-k { display: grid; gap: 2px; }.nut-k > span { font-size: 13px; color: var(--muted); }.nut-k > span:first-child { font-weight: 600; }.kcal { font-family: var(--display); font-size: 34px; line-height: 1; color: var(--teal-ink); font-variant-numeric: tabular-nums; }.kcal small { font-size: 15px; margin-inline-start: 4px; }.macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }.mac { display: grid; gap: 2px; padding-inline-start: 10px; border-inline-start: 3px solid var(--c); min-width: 0; }.mac b { font-family: var(--display); font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; }.mac b small { font-size: 13px; margin-inline-start: 2px; color: var(--muted); }.mac span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }.mac-protein { --c: var(--protein); } .mac-carbs { --c: var(--carbs); } .mac-fat { --c: var(--fat); } .mac-fiber { --c: var(--fiber); }.split { margin-top: 16px; }.bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--line); }.seg { display: block; height: 100%; } .seg-carbs { background: var(--carbs); } .seg-fat { background: var(--fat); } .seg-protein { background: var(--protein); }.split p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }.lg { white-space: nowrap; font-variant-numeric: tabular-nums; }.lg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-inline-end: 5px; background: var(--c); }.lg-carbs { --c: var(--carbs); } .lg-fat { --c: var(--fat); } .lg-protein { --c: var(--protein); }.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }.jump { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1.5px solid var(--ink); border-radius: 12px; padding: 8px 14px; }.jump .ic { width: 16px; height: 16px; stroke-width: 2.2; }.mini-app { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); flex: 1 1 260px; min-width: 0; }.mini-app .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--teal-ink); }.mini-app a { color: var(--teal-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }.body { display: grid; gap: 28px; padding-block: 28px 8px; }.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.sec-h h2 { font-size: 23px; }.sec-h span { font-size: 13.5px; color: var(--muted); }.sec-h a { font-size: 14px; color: var(--teal-ink); font-weight: 600; text-decoration: none; }.ing-l { list-style: none; margin: 0; padding: 4px 16px; background: var(--card); border-radius: var(--r-md); border: 1px solid var(--line); }.ing-l li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }.ing-l li:last-child { border-bottom: 0; }.ing-l .q { font-weight: 600; font-variant-numeric: tabular-nums; display: grid; line-height: 1.3; }.ing-l .q small { font-weight: 400; font-size: 13px; color: var(--muted); }.ing-l em { color: var(--muted); font-style: normal; font-size: 14px; }.main-col { display: grid; gap: 28px; min-width: 0; }.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; scroll-margin-top: 80px; }.sn { width: 30px; height: 30px; border-radius: 50%; background: var(--teal-wash); color: var(--teal-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }.steps p { margin: 3px 0 0; font-size: 16.5px; max-width: 62ch; }.tip { display: flex; gap: 12px; background: var(--teal-wash); border-radius: 16px; padding: 16px; }.tip > .ic { color: var(--teal-ink); width: 22px; height: 22px; margin-top: 2px; }.tip h3 { font-size: 16px; } .tip p { margin: 4px 0 0; font-size: 15.5px; }.extras { display: grid; gap: 16px; }.extras h3 { font-size: 16px; margin-bottom: 6px; }.extras ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }.extras p { margin: 0; }.extras .note { margin-top: 0; }.app { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 16px; }.app h2 { font-size: 22px; }.app-txt p { margin: 6px 0 0; color: var(--body); }.app .tw-l { font-size: 13.5px; color: var(--muted); margin-top: 14px; }.tws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }.tw { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid rgb(142 91 208 / .25); border-radius: 999px; padding: 6px 12px; font-size: 14px; }.tw .ic { width: 15px; height: 15px; color: var(--ai); }.stores { display: flex; flex-wrap: wrap; gap: 10px; }.store { display: inline-flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: 1.5px solid #C9CDD5; text-decoration: none; border-radius: 12px; padding: 7px 14px 7px 12px; min-width: 156px; }.store:hover { border-color: var(--ink); }.store span { display: grid; line-height: 1.15; } .store small { font-size: 11px; opacity: .8; } .store b { font-size: 16px; font-weight: 600; }.sb-ic { width: 24px; height: 24px; flex: none; }.allergy { min-width: 0; }.contains { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.chip-al { background: #FFF1E6; color: #8A4A00; border-radius: 999px; padding: 3px 11px; font-size: 14px; font-weight: 600; }.note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }.note .ic { width: 16px; height: 16px; margin-top: 3px; }.full { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }.full summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; }.full summary::-webkit-details-marker { display: none; }.chev { transition: transform .2s; } .full[open] .chev { transform: rotate(90deg); }[dir="rtl"] .chev { transform: scaleX(-1); } [dir="rtl"] .full[open] .chev { transform: rotate(90deg); }.tbl { overflow-x: auto; padding: 0 16px 12px; }.full table { width: 100%; border-collapse: collapse; font-size: 15px; }.full th, .full td { padding: 9px 0; border-top: 1px solid var(--line); text-align: start; font-weight: 400; }.full td { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; padding-inline-start: 12px; white-space: nowrap; }.full thead th { text-align: end; font-size: 12.5px; color: var(--muted); font-weight: 600; padding-inline-start: 12px; border-top: 0; }.full thead td { border-top: 0; }.full tr.sub th { padding-inline-start: 16px; color: var(--muted); } .full tr.sub td { font-weight: 400; color: var(--muted); }.related { padding-block: 36px 48px; }.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }.rc { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--r-md); overflow: hidden; text-decoration: none; border: 1px solid var(--line); }.rc:hover { box-shadow: 0 10px 24px -14px rgb(31 32 36 / .35); }.rc img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #DDE3EA; }.rc-body { display: grid; gap: 4px; padding: 10px 12px 12px; }.rc-t { font-weight: 600; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.rc-m { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .rc-m b { color: var(--ink); font-weight: 600; }.rc-time { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }.rc-time .ic { width: 14px; height: 14px; }.explore { display: grid; gap: 8px; margin-top: 24px; min-width: 0; }.b-head { padding-block: 10px 22px; }.filters { display: grid; gap: 10px; margin-top: 18px; }.frow { display: grid; gap: 6px; min-width: 0; }.flabel { font-size: 12.5px; font-weight: 600; color: var(--muted); }.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: -16px; padding-inline: 16px; }.chip { flex: none; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; }.chip[aria-current] { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; font-weight: 600; }.promo { margin-block: 18px; border-radius: var(--r-lg); padding: 20px; display: grid; gap: 14px; background: linear-gradient(135deg, #F3EDFB, var(--teal-wash)); }.promo-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--card); display: grid; place-items: center; color: var(--ai); }.promo-ic .ic { width: 28px; height: 28px; }.promo .eyebrow { color: var(--ai); } .promo .eyebrow .ic { width: 15px; height: 15px; }.promo h2 { font-size: 24px; } .promo-txt p:last-child { margin: 6px 0 0; color: var(--body); max-width: 52ch; }.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-block: 28px 48px; }.pg { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding-inline: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; font-size: 14.5px; font-variant-numeric: tabular-nums; }.pg[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }.pg.dis { color: #A5A8B0; }.prose { max-width: 70ch; padding-block: 16px 56px; }.prose p { color: var(--body); font-size: 17px; }.foot { background: var(--ink); color: #C9CBD2; padding-block: 40px 90px; font-size: 14.5px; }.foot-in { display: grid; gap: 28px; }.foot .brand span { color: #fff; }.foot p { margin: 10px 0 16px; max-width: 46ch; }.foot h2 { color: #fff; margin: 0 0 10px; font-size: 14px; font-family: var(--text); }.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }.foot ul a { text-decoration: none; } .foot ul a:hover { color: #fff; }.foot .store { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }.foot-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }.foot-base { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 12.5px; color: #9EA1AA; }.foot-base p { margin: 4px 0; max-width: none; }.sticky { position: sticky; bottom: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 12px;background: rgb(255 255 255 / .97); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }.sticky div { display: grid; min-width: 0; line-height: 1.25; }.sticky b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.sticky span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.sticky .btn { padding: 10px 14px; font-size: 14.5px; }@media (min-width: 600px) {.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.langs-menu summary span { display: inline; }.promo { grid-template-columns: auto minmax(0, 1fr); align-items: center; }.promo .stores { grid-column: 2; }.foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; }}@media (min-width: 900px) {.nav { display: flex; }.top-in { height: 68px; }.hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 18px 12px; }.hero-fig { margin: 0; }.ph { border-radius: var(--r-lg); }.hero-fig figcaption { padding-inline: 4px; }h1 { font-size: 46px; }.body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "ing main" "allergy main"; grid-template-rows: auto 1fr; gap: 36px 48px; align-items: start; padding-top: 40px; }.ing { grid-area: ing; } .main-col { grid-area: main; } .allergy { grid-area: allergy; }.app { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 24px; }.app .stores { flex-direction: column; }.promo { grid-template-columns: auto minmax(0, 1fr) auto; padding: 24px 28px; }.promo .stores { grid-column: auto; flex-direction: column; }.chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }.frow { grid-template-columns: 110px minmax(0, 1fr); align-items: start; }.frow .flabel { padding-top: 9px; }.sticky { display: none; }.foot { padding-bottom: 40px; }.foot-in { grid-template-columns: 2fr 1fr 1fr 1.4fr; } .foot-brand { grid-column: auto; }}@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }@media print { .top, .sticky, .app, .hero-act, .related, .foot, .promo { display: none; } body { background: #fff; } }