/** Shopify CDN: Minification failed

Line 383:0 Unexpected "}"

**/
/* redesign-ingredients.css — the five ingredient-comparison pages.
   Loaded behind rd_ingr (snippets/redesign-active.liquid).

     /pages/european-baby-formula-ingredients   page.ingredients-comparison
     /pages/hipp-ingredients                    page.ingredients-comparison-hipp
     /pages/holle-ingredients                   page.ingredients-comparison-holle
     /pages/kendamil-ingredients                page.ingredients-comparison-kendamil
     /pages/lebenswert-ingredients              page.ingredients-comparison-lebenswert

   A RESKIN, PER THE HANDOFF ("Ingredients Comparison Restyle Preview"): same
   markup, same comparator JS, same data files, new skin. The tool's own
   pastel category colours are written inline by the script and are
   deliberately left alone — the artboard says so in as many words.

   SECTION 0 IS THE TEMPLATES' OWN <style>, PORTED. All five templates carried
   the same 460-line block, byte-identical (diffed before porting), sitting in
   the body between the intro and the tool. Two reasons it moves here rather
   than staying inline: an inline <style> after painted markup lets Chrome
   flush a first paint and reflow when the block arrives (the recall brand
   pages measured 0.79 CLS from exactly that once the legacy sheets stopped
   blocking render), and five copies of one block is five places to fix a
   bug. Copied verbatim, in its original order, so every rule the script's
   generated markup relies on still resolves.

   SECTION 1 IS THE RESTYLE. Every selector is prefixed .rd-ingr, so it is
   (0,2,x) or better against section 0's (0,1,x)/(1,0,x)... except that live's
   rules are keyed on ids (#ic-main-content = (1,0,0)), which a class prefix
   cannot beat. Those are overridden with the id repeated under the prefix.

   CASCADE NOTE. redesign-base.css loads after this file and carries the
   legacy element rules, so every text element here states its own size.
   Bootstrap's spacing utilities (.mt-3/.mt-4/.mt-5) carry !important in the
   base and are matched with the same flag where they have to lose. */

/* ================================================================== *
   0. PORTED FROM THE TEMPLATES' INLINE <style> — verbatim
 * ================================================================== */

        #ingredient-comparator-root {
  display: flex;
  flex-direction: row;
  max-width: 1300px;
  margin: 40px auto 0px auto;
  background: white;
  border-radius: 8px;
  box-sizing: border-box;
}

#ic-sidebar-placeholder {
  flex: 0 0 210px;
  min-width: 210px;
  max-width: 210px;
}

#ic-sidebar-timeline {
  position: sticky;
  top: 146px;
  align-self: flex-start;
  width: 210px;
  padding: 18px 12px;
  min-height: 320px;
}

#ic-main-content {
  flex: 1 1 0%;
  min-width: 0;
  background: transparent;
  padding: 2em;
  box-sizing: border-box;
  border-left: solid 1px white;
}

#ic-sidebar-timeline ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  margin: 0 1em;
}
#ic-sidebar-timeline ul::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #f2eee6;
  z-index: 0;
  border-radius: 2px;
  height: calc(100% - 28px);
}      
.ic-timeline-step {
  position: relative;
  margin-bottom: 36px;
  padding-left: 54px;
  min-height: 38px;
  color: #527073;
  background: transparent;
  font-size: 1.07em;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  font-size:12px;
}
.ic-timeline-step:last-child {
  margin-bottom: 0;
}
.ic-timeline-bullet {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #c49e6b;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: border 0.2s, background 0.2s;
  box-shadow: 0 1px 4px #0001;
}
.ic-timeline-step.ic-timeline-active .ic-timeline-bullet {
  background: #4a694f;
  border-color: #4a694f;
}
.ic-timeline-step.ic-timeline-active {
  color: #4a694f;
  font-weight: 700;
}
.ic-timeline-step:hover:not(.ic-timeline-active) {
  color: #1d7b36;
}
.ic-timeline-step .ic-timeline-bullet:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 11px auto 0 auto;
  border-radius: 50%;
  background: transparent;
}
.ic-formula-select {
  animation: greenPulse 1.8s 5;
  border-radius:4px;
  background:white; 
}
@keyframes greenPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6);
  }
  70% {
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}        
      
.ic-img {
  display: block;
  margin: 0 auto 1.2em auto;
  max-width: 110px;
  max-height: 110px;
  border-radius: 12px;
}

.ic-ingredients-image-row img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

.ic-ori {
  background: #fcfcfc;
  border-radius: 6px;
  padding: 0.7em 1em 0.9em 1em;
  color: #444;
  font-size: 0.98em;
  margin-top: 0.6em;
  border: 1px solid #eee;
}
.ic-filter-btn {
  display: inline-block;
  border-radius: 20px;
  padding: 2px 14px;
  margin: 2px 7px 8px 0;
  background: #eee;
  color: #222;
  border: 1px solid #e3e3e3;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.23s, color 0.23s;
  position: relative;
  min-height: 32px;
}
.ic-filter-btn input[type="checkbox"] {
  display: none;
}
.ic-filter-btn span {
  vertical-align: middle;
  pointer-events: none;
}
.ic-filter-btn.ic-selected {
  background: #1d7b36 !important;
  color: #fff !important;
}
.ic-toggle-exclude-active .ic-filter-btn.ic-selected {
  background: #cf3030 !important;
}
.ic-filter-cat-title {
  font-weight: 700;
  color: #327278;
  margin: 0.65em 0 0.15em 0;
  font-size: 1.03em;
  letter-spacing: 0.01em;
}
.ic-ori-ingredients-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-start;
  margin-top: 8px;
}
.ic-ori-ing {
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 5px;
  margin-bottom: 4px;
  font-size: 1em;
}
.ic-ori-comma {
  user-select: none;
  color: #bbb;
  white-space: pre;
}
.ic-category-filter-btn {
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 14px;
  background: #f3f3f3;
  color: #1a492c;
  font-weight: 600;
  border: 1px solid #eee;
  transition: background .15s, color .15s;
  font-size: 0.97em;
  user-select: none;
  white-space: nowrap;
  line-height:2.5em;
}
.ic-category-filter-btn.active {
  background: #21843c;
  color: #193a43;
}
.ic-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  vertical-align: middle;
}
.ic-toggle-switch input {
  display: none;
}
.ic-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1d7b36;
  transition: .4s;
  border-radius: 24px;
}
.ic-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%;
}
.ic-toggle-switch input:checked+.ic-slider {
  background-color: #cf3030;
}
.ic-toggle-switch input:checked+.ic-slider:before {
  transform: translateX(20px);
}
@media (max-width: 900px) {
  #ingredient-comparator-root {
    flex-direction: column;
    gap: 0;
    max-width: 100vw;
    margin: 0;
    padding: 1em 0em;
  }
  #ic-sidebar-placeholder,
  #ic-sidebar-timeline {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  #ic-sidebar-timeline {
    position: static;
    min-height: 0 !important;
    box-shadow: none;
    border-radius: 0;
    top: unset !important;
    margin-bottom: 18px;
    padding: 6px 0 0 0;
  }
  #ic-main-content {
    padding: 0em;
    max-width:100vw;
  }
  
  #ic-sidebar-timeline ul::before {
    left: 18px;
    width: 2px;
  }
  .ic-timeline-step {
    padding-left: 38px;
    font-size: 1em;
  }
  .ic-timeline-bullet {
    width: 22px;
    height: 22px;
    left: 0;
    top: 0;
    border-width: 2.5px;
  }  
  #ic-sidebar-placeholder {
    display: none !important;
  }
  #ic-mobile-message {
    display: block !important;
    background: #fbeecf;
    color: #6f5628; /* #a07c13 was 4.1:1 */
    font-size: 1.08em;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    padding: 18px 14px;
    margin: 0 0 22px 0;
    box-shadow: 0 1px 6px #0001;
  }
  .ic-ori-ing {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere; 
  padding: 2px 0px 2px 0;  
}
  .ic-ori-ing {
    white-space:normal;
  }
  .ic-ori-ingredients-row { 
  display:block;
  }
  .ic-formula-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding:15px 10px;
    border:1px solid #dee2e6;
    margin-top:5px;
  }
}
#ic-mobile-message {
  display: none;
}
}
.ic-filter-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ic-filter-header-row > * {
  flex-shrink: 0;
}
.ic-filter-title {
  flex: 1 1 auto;
}

.ic-reset-filters-link {
  font-size: 0.97em;
  text-decoration: underline;
  color: #1d7b36;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}     
.ic-toggle-include, .ic-toggle-exclude {
  transition: color .23s, opacity .23s;
}

.ic-toggle-exclude-active .ic-toggle-include {
  color: #aaa;
  opacity: 0.6;
}

.ic-toggle-exclude-active .ic-toggle-exclude {
  color: #cf3030;
  opacity: 1;
}

#ingredient-comparator-root:not(.ic-toggle-exclude-active) .ic-toggle-include {
  color: #1d7b36;
  opacity: 1;
}
#ingredient-comparator-root:not(.ic-toggle-exclude-active) .ic-toggle-exclude {
  color: #aaa;
  opacity: 0.6;
}  

#ic-filter-mode-summary {
  font-weight: 600;
  transition: color .23s, opacity .23s;
}


.ic-toggle-exclude-active #ic-filter-mode-summary {
  color: #cf3030;
  opacity: 1;
}

#ingredient-comparator-root:not(.ic-toggle-exclude-active) #ic-filter-mode-summary {
  color: #1d7b36;
  opacity: 1;
}

.ic-flex-row-img {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 1.2em;
  flex-wrap: wrap;
}

.ic-flex-row-img .ic-img {
  width: 140px;
  max-width: 38vw;
  height: auto;
  max-height: 140px;
  min-width: 80px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 0.4em;
  background: #fff;
}

.ic-flex-row-img .ic-img:active,
.ic-flex-row-img .ic-img:focus {
  outline: 2px solid #327278;
}

.ic-flex-row-img .ic-img {
  aspect-ratio: 1 / 1;
}

.ic-flex-row-img > div {
  flex: 1 1 0%;
  min-width: 120px;
}

.ic-filter-header-row {
  display: flex;
}
      
@media (max-width: 600px) {
  .ic-flex-row-img {
    gap: 30px;
  }
  .ic-flex-row-img .ic-img {
    width: 95px;
    max-width: 32vw;
    max-height: 95px;
    margin-bottom: 0;
  }
  .mob-logo {
    max-width:95px !important;
  }
  .mob-gap {
    gap:30px !important;
  }
}

/* ================================================================== *
   1. THE RESTYLE — artboard tokens over live's structure
 * ================================================================== */

/* page frame */
.rd-ingr { padding-bottom: 80px; }
.rd-ingr .rd-wrap { max-width: 1380px; }
.rd-ingr__head { padding-top: 26px; }
.rd-ingr .rd-ingr__head h1 {
  font-family: var(--rd-display); font-size: 36px; line-height: 1.15; font-weight: 500;
  color: var(--rd-ink); margin: 0 0 8px; letter-spacing: normal;
}
.rd-ingr .rd-ingr__intro p { font-family: var(--rd-ui); font-size: 14px; line-height: 1.7; color: var(--rd-ink-muted); margin: 0 0 12px; max-width: 52em; }
.rd-ingr .rd-ingr__intro .subtop { font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--rd-accent) !important; margin: 0 0 12px !important; }

/* the shell */
.rd-ingr #ingredient-comparator-root {
  background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 18px; overflow: hidden;
  max-width: none; margin: 28px 0 0;
}
.rd-ingr #ic-sidebar-timeline { padding: 26px 20px; border-right: 1px solid var(--rd-line-soft); background: var(--rd-surface); border-radius: 0; box-shadow: none; }
.rd-ingr #ic-main-content { padding: 32px 36px; border-left: 0; }

/* timeline */
.rd-ingr #ic-sidebar-timeline ul { margin: 0; }
.rd-ingr #ic-sidebar-timeline ul::before { left: 14px; width: 2px; background: var(--rd-line-soft); height: calc(100% - 30px); }
.rd-ingr .ic-timeline-step {
  font-family: var(--rd-ui); font-size: 12.5px; font-weight: 500; color: var(--rd-ink-muted);
  padding-left: 48px; min-height: 34px; margin-bottom: 30px;
}
.rd-ingr .ic-timeline-step.ic-timeline-active { color: var(--rd-forest); font-weight: 700; }
.rd-ingr .ic-timeline-step:hover:not(.ic-timeline-active) { color: var(--rd-ink); }
.rd-ingr .ic-timeline-bullet {
  width: 30px; height: 30px; background: var(--rd-surface); border: 3px solid #c9bfa6;
  box-shadow: 0 1px 4px rgba(20, 50, 60, .12);
}
.rd-ingr .ic-timeline-step.ic-timeline-active .ic-timeline-bullet { background: var(--rd-forest); border-color: var(--rd-forest); }

/* formula picker */
/* label and select share a line, as live does; the select wraps under the label when the column is narrow */
.rd-ingr .ic-formula-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
.rd-ingr .ic-formula-label > b { display: inline; font-family: var(--rd-display); font-size: 19px; line-height: 1.3; font-weight: 500; color: var(--rd-ink); margin: 0; white-space: nowrap; }
.rd-ingr .ic-formula-select {
  width: auto; flex: 1 1 260px; max-width: 420px; display: inline-block; border: 1px solid #e0d7c2; background: var(--rd-bg); border-radius: 12px;
  padding: 12px 16px; font-family: var(--rd-ui); font-size: 14px; color: var(--rd-ink); outline: none;
  animation-name: rdIngrPulse;
}
.rd-ingr .ic-formula-select:focus { border-color: var(--rd-forest); }
@keyframes rdIngrPulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 64, 44, .45); }
  70% { box-shadow: 0 0 0 3px rgba(23, 64, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 64, 44, 0); }
}
.rd-ingr hr, .rd-ingr .ic-divider { border: 0; border-top: 1px solid var(--rd-line); margin: 22px 0; opacity: 1; }

/* filter header */
.rd-ingr .ic-filter-header-row { align-items: baseline; gap: 16px; margin-bottom: 6px; }
.rd-ingr .ic-filter-header-row.mt-4 { margin-top: 0 !important; }
.rd-ingr .ic-filter-title, .rd-ingr h4.ic-filter-title { font-family: var(--rd-display); font-size: 22px; line-height: 1.25; font-weight: 500; color: var(--rd-ink); margin: 0; }
.rd-ingr .ic-filter-title b { font-weight: 500; }
.rd-ingr .ic-reset-filters-link, .rd-ingr a.ic-reset-filters-link { font-family: var(--rd-ui); font-size: 13px; font-weight: 600; color: var(--rd-forest); text-decoration: underline; text-underline-offset: 2px; }
.rd-ingr #ic-filter-section > p { font-family: var(--rd-ui); font-size: 13.5px; line-height: 1.6; color: var(--rd-ink-muted); margin: 0 0 16px; }
.rd-ingr #ic-filter-section > p small { color: var(--rd-accent) !important; font-size: 12.5px; }

/* filter pills — the category tints are inline from the script and stay */
.rd-ingr .ic-filter-cat-title { font-family: var(--rd-display); font-size: 16px; font-weight: 500; color: var(--rd-ink); margin: 14px 0 8px; letter-spacing: normal; }
.rd-ingr .ic-filter-btn {
  border-radius: 999px; padding: 5px 15px; margin: 0 7px 8px 0; min-height: 0;
  font-family: var(--rd-ui); font-size: 13.5px; line-height: 1.5; color: #3f4d47; border: 1px solid #e0d7c2;
}
.rd-ingr .ic-filter-btn.ic-selected { background: var(--rd-forest) !important; border-color: var(--rd-forest); color: var(--rd-cream) !important; }
.rd-ingr .ic-toggle-exclude-active .ic-filter-btn.ic-selected { background: #a4552f !important; border-color: #a4552f; }
.rd-ingr .ic-category-filter-btn {
  font-family: var(--rd-ui); font-size: 12.5px; font-weight: 600; color: var(--rd-ink); background: var(--rd-surface-alt);
  border: 1px solid #e0d7c2; border-radius: 999px; padding: 2px 12px; line-height: 2.2em;
}
.rd-ingr .ic-category-filter-btn.active { background: var(--rd-forest); border-color: var(--rd-forest); color: var(--rd-cream); }

/* include / exclude */
.rd-ingr .ic-toggle-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--rd-line); padding-top: 18px; margin-bottom: 8px; }
.rd-ingr .ic-toggle-include, .rd-ingr .ic-toggle-exclude { font-family: var(--rd-ui); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.rd-ingr #ingredient-comparator-root:not(.ic-toggle-exclude-active) .ic-toggle-include { color: var(--rd-forest); }
.rd-ingr #ingredient-comparator-root:not(.ic-toggle-exclude-active) .ic-toggle-exclude { color: var(--rd-ink-soft); opacity: 1; }
.rd-ingr .ic-toggle-exclude-active .ic-toggle-include { color: var(--rd-ink-soft); opacity: 1; }
.rd-ingr .ic-toggle-exclude-active .ic-toggle-exclude { color: #a4552f; }
.rd-ingr .ic-slider { background-color: var(--rd-forest); }
.rd-ingr .ic-toggle-switch input:checked + .ic-slider { background-color: #a4552f; }
.rd-ingr #ic-filter-mode-summary { font-family: var(--rd-ui); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.rd-ingr #ingredient-comparator-root:not(.ic-toggle-exclude-active) #ic-filter-mode-summary { color: var(--rd-forest); }
.rd-ingr .ic-toggle-exclude-active #ic-filter-mode-summary { color: #a4552f; }

/* original-label box and the generated result blocks */
.rd-ingr .ic-ori { background: var(--rd-bg); border: 1px solid var(--rd-line); border-radius: 12px; padding: 16px 20px; color: #3f4d47; font-family: var(--rd-ui); font-size: 13px; line-height: 1.7; margin-top: 10px; }
.rd-ingr .ic-ori-comma { color: #c9bfa6; }
.rd-ingr .ic-ori-ing { font-size: 13px; }
.rd-ingr #ic-main-content h2, .rd-ingr #ic-main-content h2.h4 { font-family: var(--rd-display); font-size: 24px; line-height: 1.25; font-weight: 500; color: var(--rd-ink); margin: 26px 0 12px; letter-spacing: normal; }
.rd-ingr #ic-main-content h2.mt-5 { margin-top: 26px !important; }
.rd-ingr #ic-main-content h3, .rd-ingr #ic-main-content h3.h5 { font-family: var(--rd-display); font-size: 18px; line-height: 1.3; font-weight: 500; color: var(--rd-ink); margin: 20px 0 8px; letter-spacing: normal; }
.rd-ingr #ic-main-content h3.mt-3 { margin-top: 20px !important; }
.rd-ingr #ic-main-content h5, .rd-ingr #ic-main-content .h4:not(h2) { font-family: var(--rd-display); font-size: 19px; line-height: 1.3; font-weight: 500; color: var(--rd-ink); margin: 18px 0 8px; }
.rd-ingr #ic-main-content p, .rd-ingr #ic-main-content li { font-family: var(--rd-ui); font-size: 14.5px; line-height: 1.7; color: #3f4d47; }
.rd-ingr #ic-main-content p { margin: 0 0 12px; }
.rd-ingr #ic-main-content p.mt-5 { margin-top: 26px !important; }
.rd-ingr #ic-main-content ul, .rd-ingr #ic-main-content ol { padding-left: 1.3em; margin: 0 0 12px; }
.rd-ingr #ic-main-content a { color: var(--rd-forest); text-decoration: underline; text-underline-offset: 2px; }
.rd-ingr #ic-main-content a:hover { color: #1e5238; }
.rd-ingr #ic-main-content strong, .rd-ingr #ic-main-content b { font-weight: 600; color: var(--rd-ink); }
.rd-ingr #ic-main-content .ic-ing-table, .rd-ingr #ic-main-content table { width: 100%; border-collapse: collapse; font-family: var(--rd-ui); font-size: 13.5px; color: #3f4d47; margin: 0 0 16px; }
.rd-ingr #ic-main-content th { font-family: var(--rd-ui); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rd-ink-soft); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rd-line); }
.rd-ingr #ic-main-content td { padding: 8px 10px; border-bottom: 1px solid var(--rd-line-soft); vertical-align: top; }
.rd-ingr .ic-img, .rd-ingr .ic-flex-row-img .ic-img { border-radius: 12px; background: var(--rd-surface); border: 1px solid var(--rd-line-soft); }
.rd-ingr .btn.btn-theme {
  display: inline-block; background: var(--rd-forest) !important; background-image: none !important; color: var(--rd-cream) !important;
  border: 0; border-radius: 999px; padding: 10px 28px; font-family: var(--rd-ui); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-decoration: none;
}
.rd-ingr .btn.btn-theme:hover { background: #1e5238 !important; color: #fff !important; }
/* the Check Price button sits in a flex column that stretched it to the full text width; it keeps its own width now */
.rd-ingr .ic-flex-row-img .btn.btn-theme { align-self: flex-start; min-width: 200px; text-align: center; }
/* "[view ingredients]" is a link in the result lists, as on live — the script writes its colour inline, hence the !important */
.rd-ingr .ic-view-ingredients, .rd-ingr #ic-main-content a.ic-view-ingredients {
  display: inline; background: none !important; padding: 0; border-radius: 0; margin-left: 6px !important;
  font-family: var(--rd-ui); font-size: 13.5px; font-weight: 600; color: var(--rd-forest) !important; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.rd-ingr .ic-view-ingredients:hover, .rd-ingr #ic-main-content a.ic-view-ingredients:hover { color: #1e5238 !important; }

/* the mobile notice, on the site's palette */
.rd-ingr #ic-mobile-message { font-family: var(--rd-ui); }
@media (max-width: 900px) {
  .rd-ingr #ic-mobile-message { background: var(--rd-surface-alt); color: var(--rd-accent); font-size: 13.5px; font-weight: 600; border-radius: 12px; box-shadow: none; border: 1px solid var(--rd-line); }
  .rd-ingr #ingredient-comparator-root { max-width: none; margin: 22px 0 0; padding: 0; }
  .rd-ingr #ic-sidebar-timeline { border-right: 0; border-bottom: 1px solid var(--rd-line-soft); padding: 18px 16px 6px; }
  .rd-ingr #ic-main-content { padding: 18px 16px 22px; }
  .rd-ingr .ic-timeline-step { padding-left: 38px; font-size: 12.5px; margin-bottom: 22px; }
  .rd-ingr .ic-timeline-bullet { width: 22px; height: 22px; border-width: 2.5px; }
  .rd-ingr #ic-sidebar-timeline ul::before { left: 10px; }
  .rd-ingr .ic-formula-select { max-width: 100%; flex-basis: 100%; padding: 14px 16px; border: 1px solid #e0d7c2; }
}
@media (max-width: 767px) {
  .rd-ingr { padding-bottom: 56px; }
  .rd-ingr .rd-ingr__head h1 { font-size: 28px; }
  .rd-ingr #ic-main-content h2, .rd-ingr #ic-main-content h2.h4 { font-size: 21px; }
  .rd-ingr .ic-filter-title, .rd-ingr h4.ic-filter-title { font-size: 19px; }
  .rd-ingr .ic-filter-header-row { flex-wrap: wrap; }
  .rd-ingr .ic-toggle-row { flex-wrap: wrap; }
}