/*
 * Eat, the food page. Loads after she.css, she-plans.css, sqv.css and she-meal.css (all
 * read-only) and only adds what the food page needs. Every selector starts with .shh.shj.she.she--food.
 */

/* the calculator card: servings (default when a serving weight is on record) or per 100 g, switched by CSS */
.shh.shj.she.she--food .she-fp-calc .she-switch { margin-top: 12px; }
.shh.shj.she.she--food .she-fp-switch input:disabled + span { opacity: .45; cursor: not-allowed; }
.shh.shj.she.she--food .she-fp-100 { display: none; }
.shh.shj.she.she--food .she-fp-calc:has(input[value="100"]:checked) .she-fp-100 { display: block; }
.shh.shj.she.she--food .she-fp-calc:has(input[value="100"]:checked) .she-fp-serv { display: none; }
.shh.shj.she.she--food .she-fp-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.shh.shj.she.she--food .she-fp-qty input { width: 76px; height: 44px; padding: 0 8px; border: 1.5px solid #cfe3c8; border-radius: 12px; background: #fff; font: 700 18px/1 var(--shh-text); color: var(--she-ink); text-align: center; }
.shh.shj.she.she--food .she-fp-step, .shh.shj.she.she--food .she-fp-step:hover, .shh.shj.she.she--food .she-fp-step:focus { width: 44px; height: 44px; padding: 0; border: 1.5px solid #cfe3c8; border-radius: 50%; background: #fff; color: var(--she-green); font: 700 22px/1 var(--shh-text); white-space: nowrap; cursor: pointer; }
.shh.shj.she.she--food .she-fp-step:hover, .shh.shj.she.she--food .she-fp-step:focus-visible { border-color: var(--she-green); background: var(--she-green-soft); color: var(--she-green); }
.shh.shj.she.she--food .she-fp-qty-t { margin: 0 0 0 4px; font: 650 14.5px/1.3 var(--shh-text); color: var(--she-copy); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--food .she-fp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shh.shj.she.she--food .she-fp-tiles li { padding: 10px 12px; }
/* the tiles share Quick View's shape, but its type tokens live on the dialog: restate them for the page */
.shh.shj.she.she--food .she-fp-tiles li > span { font: 700 12px/1.2 var(--shh-text); letter-spacing: .08em; text-transform: uppercase; color: var(--she-muted); }
.shh.shj.she.she--food .she-fp-tiles b { font: 800 24px/1 var(--shh-display); letter-spacing: -.02em; color: var(--she-ink); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--food .she-fp-tiles b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.shh.shj.she.she--food .she-fp-tiles b small { margin-left: 4px; font: 600 13px/1 var(--shh-text); letter-spacing: 0; color: var(--she-muted); }

/* the label: compact rows, amount and % Daily Value */
.shh.shj.she.she--food .she-fp-energy { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-bottom: 10px; border-bottom: 3px solid var(--she-ink); }
.shh.shj.she.she--food .she-fp-energy span { font: 800 15px/1 var(--shh-text); color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-energy b { font: 800 30px/1 var(--shh-display); color: var(--she-ink); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--food .she-fp-energy small { font: 600 14px/1 var(--shh-text); color: var(--she-muted); }
.shh.shj.she.she--food .she-fp-dvh { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; margin: 8px 0 0; font: 700 11.5px/1.3 var(--shh-text); letter-spacing: .06em; text-transform: uppercase; color: var(--she-muted); }
.shh.shj.she.she--food .she-fp-dvh span:last-child { text-align: right; }
.shh.shj.she.she--food .she-fp-rows { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.shh.shj.she.she--food .she-fp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #edf3ea; font-size: 15px; color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-rows li.is-sub span:first-child { padding-left: 14px; color: var(--she-copy); }
.shh.shj.she.she--food .she-fp-rows b { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shh.shj.she.she--food .she-fp-rows em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* every other stored nutrient: one group at a time */
.shh.shj.she.she--food .she-fp-groups { display: grid; gap: 8px; margin-top: 10px; }
.shh.shj.she.she--food .she-fp-more { border-radius: 16px; border: 1px solid #e3eedf; background: #fff; }
.shh.shj.she.she--food .she-fp-more summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 12px 16px; cursor: pointer; font: 700 15px/1.3 var(--shh-text); color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-more summary small { font: 600 13px/1 var(--shh-text); color: var(--she-muted); }
.shh.shj.she.she--food .she-fp-more .sqv-nlist { padding: 0 16px 12px; }
.shh.shj.she.she--food .she-fp-more .sqv-nlist li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid #edf3ea; font-size: 14.5px; color: var(--she-copy); }
.shh.shj.she.she--food .she-fp-more .sqv-nlist b { color: var(--she-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shh.shj.she.she--food .she-fp-note { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--she-muted); }

/* the article, closed by default */
.shh.shj.she.she--food .she-fp-about .she-fp-read { margin: 28px auto 0; max-width: 860px; padding: 0; }
.shh.shj.she.she--food .she-fp-read > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 16px 22px; cursor: pointer; font: 750 17px/1.3 var(--shh-display); color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-read > summary small { font: 600 13px/1 var(--shh-text); color: var(--she-muted); }
.shh.shj.she.she--food .she-fp-article { padding: 0 22px 22px; font-size: 16px; line-height: 1.65; color: var(--she-copy); }
.shh.shj.she.she--food .she-fp-article h2, .shh.shj.she.she--food .she-fp-article h3 { margin: 22px 0 8px; font: 750 19px/1.3 var(--shh-display); color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-article p { margin: 0 0 12px; }
.shh.shj.she.she--food .she-fp-article ul { margin: 0 0 12px 18px; }
.shh.shj.she.she--food .she-fp-article table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 14.5px; display: block; overflow-x: auto; }
.shh.shj.she.she--food .she-fp-article th, .shh.shj.she.she--food .she-fp-article td { padding: 7px 10px; border-bottom: 1px solid #edf3ea; text-align: left; }
.shh.shj.she.she--food .she-fp-article .fa-basis-note, .shh.shj.she.she--food .she-fp-article .fa-disclaimer { padding: 12px 14px; border-radius: 14px; background: #fdf8ee; font-size: 14px; color: var(--she-ink); }
@media (min-width: 1024px) { .shh.shj.she.she--food .she-fp-about .she-fp-read { margin-top: 40px; } }

/* meals with it */
.shh.shj.she.she--food .she-fp-meal .she-pl-card-k { display: inline-flex; align-items: center; gap: 8px; }
.shh.shj.she.she--food .she-fp-meal-use { padding: 8px 10px; border-radius: 12px; background: var(--she-green-soft); font: 650 13.5px/1.35 var(--shh-text); color: var(--she-green); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--food .she-fp-days { max-width: 860px; margin: 26px auto 0; }
.shh.shj.she.she--food .she-fp-daylist { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.shh.shj.she.she--food .she-fp-daylist a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--she-line); color: var(--she-ink); text-decoration: none; }
.shh.shj.she.she--food .she-fp-daylist a:hover, .shh.shj.she.she--food .she-fp-daylist a:focus-visible { border-color: #7dbd62; color: var(--she-ink); }
.shh.shj.she.she--food .she-fp-daylist b { font: 700 15px/1.3 var(--shh-text); }
.shh.shj.she.she--food .she-fp-daylist span { font-size: 14px; color: var(--she-muted); }
@media (min-width: 1024px) { .shh.shj.she.she--food .she-fp-days .she-sub { text-align: center; } }

/* more foods */
.shh.shj.she.she--food .she-sec--similar { background: linear-gradient(180deg, #ffffff 0%, #f3f9f0 100%); border-top: 1px solid var(--shh-line-soft); }
.shh.shj.she.she--food .she-fp-search { max-width: 640px; margin: 0 auto; }
.shh.shj.she.she--food .she-fp-similar-list { margin-top: 28px; }