/* pc-beautypedia.css
 * Merged from the legacy theme assets beautypedia-ingredient-dictionary.css.liquid +
 * beautypedia-ingredients-checker.css.liquid. Every rule is scoped under .pc-beautypedia
 * so the widget is self-contained and cannot leak into (or depend on) the host theme.
 * Hero images are supplied by the block as --pc-bp-hero-desktop / --pc-bp-hero-mobile.
 */

.pc-beautypedia,
.pc-beautypedia *,
.pc-beautypedia *::before,
.pc-beautypedia *::after { box-sizing: border-box; }
.pc-beautypedia img { max-width: 100%; height: auto; }
.pc-beautypedia button { cursor: pointer; font-family: inherit; color: inherit; }
.pc-beautypedia input,
.pc-beautypedia textarea,
.pc-beautypedia select { font-family: inherit; font-size: inherit; }
.pc-beautypedia ul,
.pc-beautypedia ol { list-style: none; margin: 0; padding: 0; }
.pc-beautypedia [hidden] { display: none !important; }

/* Modals are native <dialog>. The dialog itself is an invisible full-viewport shell so the
   ported `.modal__overlay` (position: fixed, flex-centred, its own scrim) and
   `.modal__container` rules below keep working untouched. The UA backdrop is therefore
   transparent — the overlay already supplies the dim. */
.pc-beautypedia dialog.pc-bp-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: inherit;
}
.pc-beautypedia dialog.pc-bp-dialog::backdrop { background: transparent; }
.pc-beautypedia dialog.pc-bp-dialog:not([open]) { display: none; }
/* Never rely on the UA's `dialog[open] { display: block }` — ANY theme author rule beats
   UA rules (Impulse's own `.modal { display: none }` was hiding these dialogs until the
   colliding `modal` class was dropped from the markup). State the open style ourselves. */
.pc-beautypedia dialog.pc-bp-dialog[open] {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Pagination (replaces the paginationjs markup the legacy dictionary shipped). */
.pc-beautypedia .pc-bp-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 24px 0 40px;
  font-size: 14px;
}
.pc-beautypedia .pc-bp-page-numbers { display: flex; align-items: center; gap: 4px; }
.pc-beautypedia .pc-bp-pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d5d8dc;
  background: #fff;
  color: rgb(51, 49, 51);
  font-size: 14px;
  line-height: 30px;
}
.pc-beautypedia .pc-bp-pagination button:hover:not([disabled]) { border-color: rgb(51, 49, 51); }
.pc-beautypedia .pc-bp-pagination button.active {
  background: rgb(51, 49, 51);
  border-color: rgb(51, 49, 51);
  color: #fff;
}
.pc-beautypedia .pc-bp-pagination button[disabled] { opacity: 0.4; cursor: default; }
.pc-beautypedia .pc-bp-page-gap { padding: 0 4px; color: #898a8d; }
.pc-beautypedia .pc-bp-page-range { margin-left: auto; color: #000; }
@media screen and (max-width: 768px) {
  .pc-beautypedia .pc-bp-page-range { margin-left: 0; width: 100%; }
}

/* Ratings pie (replaces the chart.js canvas). The canvas used to size itself; an SVG
   needs a footprint, so give the holder one. The mobile override further down still wins. */
.pc-beautypedia .chart-count-pie { flex: 0 0 auto; width: 240px; max-width: 100%; }
.pc-beautypedia .pc-bp-pie { display: block; width: 100%; height: auto; }

.pc-beautypedia .pc-bp-error { margin: 24px 0; color: rgb(170, 0, 105); }
.pc-beautypedia .pc-bp-retry {
  margin-top: 12px;
  padding: 10px 24px;
  border: 2px solid rgb(51, 49, 51);
  background: rgb(51, 49, 51);
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.pc-beautypedia .pc-bp-retry:hover { background: #fff; color: rgb(51, 49, 51); }

/* Moved out of the legacy snippets/beautypedia-modal-ingredients-indicator.liquid
   <style> block — theme app extensions keep all CSS in assets/. */
.pc-beautypedia #modal-indicator-ingredient {
  padding: 20px 45px 30px;
}
/* Was inline `style=` inside the ratings-explainer copy, which is now static markup in
   snippets/pc-beautypedia-ratings-copy-<lang>.liquid. */
.pc-beautypedia #modal-indicator-ingredient h1:first-of-type {
  margin-top: 40px;
}
.pc-beautypedia #modal-indicator-ingredient h1 + h3 {
  margin-top: 30px;
}
.pc-beautypedia .close-modal-button {
  text-transform: uppercase;
  letter-spacing: 0.025em !important;
  position: relative;
  border: 2px solid rgb(51, 49, 51);
  color: #fff !important;
  background-color: rgb(51, 49, 51);
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  display: block;
  margin: 50px auto 20px;
  min-width: 33.3%;
  width: 33.3%;
  text-align: center;
}
.pc-beautypedia .modal-close-II {
  position: absolute;
  top: 15px;
  right: 10px;
}
.pc-beautypedia .modal-close-II svg {
  width: 15px;
  height: 15px;
}
@media screen and (max-width: 768px) {
  .pc-beautypedia .close-modal-button {
    text-transform: uppercase;
    min-width: 100%;
    width: 100%;
  }
}

/* Visually hidden, still available to screen readers and to .click() from script. */
.pc-beautypedia .pc-bp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/*==========================================================================*\
  PART 1 - from beautypedia-ingredient-dictionary.css.liquid
\*==========================================================================*/

.pc-beautypedia .rating_sec {
  position: relative;
}

.pc-beautypedia span.mobilesearch.mobile svg {
  height: 25px;
}
.pc-beautypedia .rating_sec.relative + .rating-table {
  display: none;
}

.pc-beautypedia .total_records {
  font-size: 16px;
}
.pc-beautypedia .addfilter > div label {
  margin-bottom: 7px;
}
.pc-beautypedia .addfilter > div > p {
  margin: 25px 0 5px;
  text-transform: uppercase;
  font-size: 14px;
}
.pc-beautypedia .rating_sec.relative .autocom-box {
  overflow-x: hidden;
}

.pc-beautypedia.gradient.blur:before {
  content: "";
  position: absolute;
  background-color: #ffff;
  height: 100%;
  width: 100%;
}
.pc-beautypedia .rating_sec.relative .filterBy {
  display: none;
}

.pc-beautypedia .rating_sec.relative .wrap_apply_btn.mobile {
  display: none;
}
.pc-beautypedia .rating_sec.relative {
  position: relative;
  left: 0;
}
.pc-beautypedia .m-only,
.pc-beautypedia .mobile {
  display: none;
}
.pc-beautypedia .d-flex {
  display: flex;
  align-items: center;
}

.pc-beautypedia .paginationjs {
  display: flex;
  align-items: center;
}

.pc-beautypedia .paginationjs-nav.J-paginationjs-nav {
  order: -1;
  text-transform: capitalize;
  font-size: 14px;
  margin-right: 15px;
}
.pc-beautypedia select {
  margin-top: 0;
  margin-bottom: 6.25px;
  border: 0px;
  width: 100%;
  border-radius: 4px;
  appearance: none;
  padding: 9px 85px 8.5px 18px;
  background-color: #fff;
  border: 1px solid #d5d8dc;
  height: 53px;
  font-size: 16px;
}
.pc-beautypedia span.IngredientDictionarySearch__SearchIcon-sc-1ulaogx-5.dkkuGw:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 1px;
  background-color: #00000059;
  left: -15px;
  top: 0px;
}

.pc-beautypedia .gsBlLn {
  position: absolute;
  inset: 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  border-width: 1px;
  box-sizing: border-box;
  border-radius: 4px;
  border-color: rgb(149, 148, 152);
  pointer-events: none;
}
.pc-beautypedia .blIExV h5 {
  margin: 0px;
}

.pc-beautypedia .IngredientRatingInfoModal__RatingDescription-sc-1m171at-2.kbqtkF.normal.normalcase.clip {
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}
.pc-beautypedia .jZQWuH {
  position: absolute;
  right: 3px;
  bottom: 10px;
  width: 30px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  pointer-events: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  top: 0px;
}
.pc-beautypedia .jZQWuH div {
  transform: rotate(90deg);
}
.pc-beautypedia .bHbxIE span {
  display: flex;
}
.pc-beautypedia .jZQWuH svg {
  padding-left: 0px;
}

.pc-beautypedia .bHbxIE svg {
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  margin-bottom: 1px;
}
/* Dropdown end*/
.pc-beautypedia .m-0 {
  margin: 0px;
}
.pc-beautypedia a.read_btn {
  color: #5d7e95;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration:underline;
}
.pc-beautypedia tbody#dynamic_data h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0px;
  margin-bottom: 5px;
}
.pc-beautypedia tbody#dynamic_data {
  vertical-align: top;
}
.pc-beautypedia .rating-table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: unset;
  position: relative;
}
.pc-beautypedia .rating-table:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: rgb(51, 49, 51);
}
.pc-beautypedia tbody#dynamic_data tr td:first-child {
  white-space: nowrap;
  width: 170px;
}
.pc-beautypedia span.IngredientDictionarySearch__SearchIcon-sc-1ulaogx-5.dkkuGw {
  position: absolute;
  top: 10px;
  right: 40px;
}
.pc-beautypedia .search-input input {
  position: relative;
  height: 42px;
  width: 100%;
  border: 2px solid rgb(213, 216, 220);
  border-radius: 2em;
  padding: 8px 60px 8px 20px;
}
.pc-beautypedia span.IngredientDictionarySearch__SearchIcon-sc-1ulaogx-5.dkkuGw svg {
  width: 18px;
  height: auto;
  fill: rgb(51, 49, 51);
  cursor: pointer;
  z-index: 2;
  position: absolute;
}
.pc-beautypedia h5.m-0.filter_title {
  position: relative;
  font-size: 16px;
  font-weight: 700 !important;
  font-family: var(--font-body, inherit) !important; font-weight: var(--font-body-medium, 500) !important;
  padding-bottom: 7px;
}
.pc-beautypedia h5.m-0.filter_title:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #000;
  bottom: -5px;
  left: 0px;
}
.pc-beautypedia .search-input {
  padding-bottom: 30px;
  position: relative;
}
/* .search-input.active input {
border-radius: 5px 5px 0 0;
} */

.pc-beautypedia .search-input .autocom-box {
  padding: 0;
  opacity: 0;
  pointer-events: none;
  max-height: 280px;
  overflow-y: auto;
}

.pc-beautypedia .search-input.active .autocom-box {
  padding: 10px 8px;
  opacity: 1;
  pointer-events: auto;
}

.pc-beautypedia .autocom-box li {
  list-style: none;
  padding: 8px 12px;
  display: none;
  cursor: default;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
}
.pc-beautypedia h3.searchword {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;
  margin-bottom: 0px;
  margin-top: 0px;
  color: rgb(51, 49, 51);
}

.pc-beautypedia .search-input.active .autocom-box li {
  display: block;
}

.pc-beautypedia .autocom-box li:hover {
  background: #efefef;
}

.pc-beautypedia .search-input .icon {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 55px;
  width: 55px;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  color: #644bff;
  cursor: pointer;
}

.pc-beautypedia div#pagination-container {
  justify-content: end;
  display: flex;
  margin-top: 20px;
}

.pc-beautypedia table th {
  border-bottom: 3px solid;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  padding-bottom: 5px;
  border-bottom: 2px solid rgb(51, 49, 51);
  text-transform: uppercase;
}
.pc-beautypedia tbody#dynamic_data tr td {
  padding: 24px 0px 29px;
}

.pc-beautypedia table td {
  border-bottom: 1px solid;
}
.pc-beautypedia .paginationjs-pages ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pc-beautypedia .paginationjs-pages ul li a {
  font-size: 14px;
  color: #000 !important;
}

.pc-beautypedia .paginationjs-page.J-paginationjs-page,
.pc-beautypedia .paginationjs-next.J-paginationjs-next,
.pc-beautypedia .paginationjs-next.J-paginationjs-previous {
  cursor: pointer;
}

.pc-beautypedia .paginationjs-page.J-paginationjs-page.active {
  font-weight: bold;
}

.pc-beautypedia .mobiletoggle h3 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 25px;
  margin-bottom: 0px;
  cursor: pointer;
  color: rgb(51, 49, 51);
}
.pc-beautypedia .datafilter h5,
.pc-beautypedia h5.benefitlist-more,
.pc-beautypedia h5.cate-more {
  cursor: pointer;
  color: rgb(93, 126, 149);
  text-transform: lowercase;
  font-size: 16px;
  font-weight: 400;
  margin: 0px;
  padding: 4px 0px;
  padding-left: 10px;
}
.pc-beautypedia .alphabatically input {
  padding-right: 10px;
  margin-right: 5px !important;
}

.pc-beautypedia .wrap_apply_btn {
  text-align: center;
  margin: 15px 0px;
}

.pc-beautypedia .wrap_apply_btn button {
  padding: 15px 75px;
  font-size: 14px;
  border: 2px solid rgb(51, 49, 51);
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
  border-radius: 3px;
}

.pc-beautypedia .clearResult {
  margin: 25px 0px;
}

.pc-beautypedia .clearResult a {
  color: rgb(51, 49, 51);
  background-color: transparent;
  /*     border-color: rgb(51, 49, 51);
border: 1px solid;
padding: 15px 50px; */
  font-size: 14px;
  border-radius: 3px;
  position: absolute;
  top: 0px;
  right: 0px;
  text-decoration: none;
  color: rgb(93, 126, 149);
  top: -5px;
  left: 100px;
  font-size: 14px;
  font-weight: 400;
}
.pc-beautypedia h3.page-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.025em;
  margin-bottom: 0px;
  margin-top: 0px;
  color: rgb(51, 49, 51);
}
.pc-beautypedia .filterBy {
  position: relative;
  margin-top: 11px;
}
/*Loader code..  */
.pc-beautypedia .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: pc-bp-spin 2s linear infinite; /* Safari */
  animation: pc-bp-spin 2s linear infinite;
  position: absolute;
  left: 50%;
  top: 30%;
}
.pc-beautypedia h5.Good {
  color: rgb(65, 157, 168);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.pc-beautypedia h5.Best {
  color: rgb(56, 92, 173);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.pc-beautypedia h5.Worst {
  color: rgb(140, 36, 77);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.pc-beautypedia h5.Bad {
  color: rgb(226, 150, 127);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.pc-beautypedia h5.Average {
  color: rgb(174, 155, 145);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.pc-beautypedia button.mobile_filter {
  display: none;
}

.pc-beautypedia .iRkVPT {
  max-width: 800px;
  padding: 10px 20px 20px;
  border: 1px solid;
  margin: 0px auto;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pc-beautypedia .hmauXx {
  text-align: right;
  margin-right: -10px;
}
.pc-beautypedia .addfilter label {
  font-size: 12px;
  display: block;
  color: rgb(51, 49, 51) !important;
  display: flex !important;
  margin: 0px;
  color: rgb(51, 49, 51);
  align-items: center;
  padding-left: 10px;
  letter-spacing: normal;
}
.pc-beautypedia .dOIhZh {
  padding: 0px 45px 30px 45px;
}
.pc-beautypedia .ehPqpy .clip.large3b {
  margin-top: -5px;
  margin-bottom: -7px;
}
.pc-beautypedia .blIExV {
  position: fixed;
  width: 100%;
  height: 100%;
  max-height: 100%;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  padding: 0px 10px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.8);
  display: none;
}

.pc-beautypedia .ehPqpy.ehPqpy .normalcase {
  text-transform: none;
  letter-spacing: normal;
}
.pc-beautypedia.gradient.blur {
  overflow: hidden !important;
}
.pc-beautypedia .ehPqpy .large3b {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.pc-beautypedia .light {
  color: rgb(213, 216, 220);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}
.pc-beautypedia .eKzssu {
  padding-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}
.pc-beautypedia .iGGurj svg {
  width: 18px;
  height: 18px;
}

.pc-beautypedia button.Button__StyledButton-sc-2j8ckc-0.gsJlZg.IngredientRatingInfoModal__CloseButton-sc-1m171at-4.dnslwo.uppercase {
  border: 2px solid rgb(51, 49, 51);
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  display: block;
  margin: 40px auto 0px;
  min-width: 33.3%;
  font-size: 16px;
  font-family: var(--font-body, inherit);
}

/* Safari */
@-webkit-keyframes pc-bp-spin {
  0% {
      -webkit-transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(360deg);
  }
}

@keyframes pc-bp-spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@media screen and (max-width: 768px) {
  .pc-beautypedia .sort_btn form {
      display: block;
      max-width: 100%;
      flex: 0 100%;
      position: relative;
  }
  .pc-beautypedia .showing {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
  }
  .pc-beautypedia .flex-50 {
      flex: 0 70%;
  }
  .pc-beautypedia .mobiletoggle {
      position: relative;
  }
  .pc-beautypedia select#cars {
      margin: 0px;
      height: 53px;
  }
  .pc-beautypedia .rating_sec {
      position: absolute;
      left: -100%;
      /*     transition: 0.5s ease-in; */
  }
  .pc-beautypedia .jZQWuH {
      bottom: -15px;
  }
  .pc-beautypedia .search-input {
      display: block;
  }
  .pc-beautypedia .mobile_filter_wrap {
      flex: 0 50%;
      margin: 0px 15px 0px 0px;
      order: 1;
  }
  .pc-beautypedia button.mobile_filter {
      width: 100%;
      padding: 18px 10px;
      display: block !important;
      margin-left: 10px;
      background-color: #fff;
      border: 1px solid #000;
  }

  .pc-beautypedia .rating_sec.show {
      left: -15px;
      background-color: #fff;
      z-index: 1030;
      top: 0%;
      min-height: 100%;
      width: 90%;
      padding-right: 15px;
  }
  .pc-beautypedia h3.searchword {
      margin-bottom: 15px;
      text-align: left;
  }
  .pc-beautypedia a.m-block {
      margin-bottom: 15px;
  }
  .pc-beautypedia .m-only {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      font-size: 14px;
      padding: 7px 5px;
  }
  .pc-beautypedia .m-only:before {
      content: "";
      position: absolute;
      height: 1px;
      width: 115%;
      background-color: #0000001f;
      left: -15px;
      bottom: -5px;
  }
  .pc-beautypedia span.mobilesearch.mobile svg {
      width: 18px;
      height: auto;
      fill: rgb(51, 49, 51);
      cursor: pointer;
  }

  .pc-beautypedia span.mobilesearch.mobile {
      border: 1px solid #000;
      padding: 11px 11px;
      border-radius: 51px;
      display: flex;
  }
  .pc-beautypedia .FilterSidePanel__Close-sc-14q3trl-5.dgqeSx svg {
      height: 15px;
  }
  .pc-beautypedia .filterBy {
      padding: 0px 15px;
  }
  .pc-beautypedia .mobiletoggle:before {
      content: "";
      position: absolute;
      height: 1px;
      width: 115%;
      background-color: #0000001f;
      left: -15px;
      bottom: -5px;
  }
  .pc-beautypedia .mobiletoggle h3 {
      margin-top: 10px;
      position: relative;
      padding: 8px 5px;
      color: rgb(51, 49, 51) !important;
  }
  .pc-beautypedia .mobiletoggle h3:before {
      content: "+";
      position: absolute;
      right: 0px;
      font-size: 28px;
      top: -7px;
      color: rgb(87, 87, 92);
  }
  .pc-beautypedia .mobile {
      display: block;
  }
  .pc-beautypedia div#pagination-container {
      float: none !important;
  }
  .pc-beautypedia .search-input.active {
      display: block !important;
  }

  .pc-beautypedia .iRkVPT {
      max-width: 800px;
      padding: 10px 20px 20px;
      border: 1px solid;
      margin: 40px auto;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 55%;
      width: 90%;
  }
  .pc-beautypedia.gradient.blur {
      overflow: scroll !important;
  }
  .pc-beautypedia .showing h3 {
      font-size: 14px;
      text-align: left;
  }
  .pc-beautypedia h3.searchword {
      font-size: 29px;
  }
  .pc-beautypedia .sort_btn select,
  .pc-beautypedia button {
      font-size: 16px;
  }
  .pc-beautypedia .dOIhZh {
      padding: 20px 15px 30px;
  }
}
.pc-beautypedia .Modal__CenterVertical-sc-69tg5p-1.blIExV {
  overflow: scroll;
}
.pc-beautypedia .fcolor label {
  display: flex !important;
  margin: 0px;
  color: rgb(51, 49, 51);
  align-items: center;
  padding-left: 10px;
  letter-spacing: normal;
}

.pc-beautypedia .datafilter label input {
  margin-bottom: 0px;
  margin-top: 0px;
}
.pc-beautypedia p.short_Desc {
  margin: 0;
  color: rgb(51, 49, 51);
}

/**
** Common
**/
.pc-beautypedia .best {
  color: #419da8;
}
.pc-beautypedia .good {
  color: #006c73;
}
.pc-beautypedia .average {
  color: #385cad;
}
.pc-beautypedia .bad {
  color: #aa0069;
}
.pc-beautypedia .worst {
  color: #4f0236;
}
.pc-beautypedia .unknown {
  color: #333133;
}
.pc-beautypedia .notrated {
  color: #898a8d;
}
.pc-beautypedia .bg-best {
  background-color: #419da8;
}
.pc-beautypedia .bg-good {
  background-color: #006c73;
}
.pc-beautypedia .bg-average {
  background-color: #385cad;
}
.pc-beautypedia .bg-bad {
  background-color: #aa0069;
}
.pc-beautypedia .bg-worst {
  background-color: #4f0236;
}
.pc-beautypedia .bg-unknown {
  background-color: #333133;
}
.pc-beautypedia .bg-notrated {
  background-color: #898a8d;
}
.pc-beautypedia .bg-benefits {
  background-color: rgb(239, 231, 226);
  color: rgb(51, 49, 51) !important;
}
.pc-beautypedia .bg-function {
  background-color: rgb(245, 235, 223);
  color: rgb(51, 49, 51) !important;
}

/**
** Start of ingredient style
**/
.pc-beautypedia .id-header-container {
  text-align: center;
  background: #ebe3da center center;
  background-image: var(--pc-bp-hero-desktop);
  padding: 25px 0;
  margin-top:-2px;
}
.pc-beautypedia .id-header-topsubtitle {
  color: rgb(51, 49, 51);
  margin-top: 0;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}
.pc-beautypedia .id-header-title {
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0.025em;
  font-weight: 700;
}
.pc-beautypedia .id-header-bottomsubtitle {
  color: rgb(87, 87, 92);
  font-size: 22px;
}
.pc-beautypedia .id-ingredient-modal-container {
  color: #5d7e95;
  width: fit-content;
  display: flex;
  gap: 5px;
  text-decoration: underline;
  margin: 30px auto 0;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.pc-beautypedia .id-ingredient-modal-container svg {
  fill: #5d7e95;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  cursor: pointer;
}
.pc-beautypedia .page-ingredient-width {
  max-width: 1060px;
  margin: 20px auto;
}
.pc-beautypedia .wrap-all {
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 60px;
  margin: 0px auto;
  padding: 20px 20px 20px;
}
.pc-beautypedia .wrap-select {
  display: flex;
  -webkit-box-pack: end;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: start;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 10px;
}
.pc-beautypedia .wrap-select label {
  color: #000;
  font-weight: 600;
  white-space: nowrap;
  margin: 0 10px 0;
}
.pc-beautypedia span.info-popup {
  width: 15px;
  height: 15px;
}
.pc-beautypedia span.info-popup svg {
  fill: rgb(93, 126, 149);
  width: 15px;
  height: 15px;
  margin-left: 5px;
  cursor: pointer;
}
.pc-beautypedia tbody#dynamic_data p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  padding-bottom: 8px;
}
.pc-beautypedia .rating-column{
  width: 170px;
  padding:10px 0;
}
.pc-beautypedia .description-column {
  padding:10px 0;
}
.pc-beautypedia .search_input::placeholder {
  font-size: 12px;
}
.pc-beautypedia .search_input_label {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}
.pc-beautypedia .filterBy .filter_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

.pc-beautypedia .filterBy .filter_title .clear-filter {
  color: rgb(93, 126, 149);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
}

.pc-beautypedia .clear-filter-desktop { display: none; }
/**
** Start of single ingredient Style
**/
.pc-beautypedia .page-ingredient-single-width {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}
.pc-beautypedia .page-ingredient-single-width .breadcrumbs {
  margin-top: 4px;
  margin-bottom: 74px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pc-beautypedia .page-ingredient-single-width .breadcrumbs a {
  color: rgb(213, 216, 220);
}

.pc-beautypedia .si-container .si-title {
  font-size: 38px;
  display: block;
  padding-bottom: 35px;
  font-family: var(--font-body, inherit) !important; font-weight: var(--font-body-bold, 700) !important;
  font-weight: 700;
  margin: 0;
}
.pc-beautypedia .si-short-info {
  line-height: 24px;
  padding-bottom: 35px;
}
.pc-beautypedia .si-rating span {
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
}
.pc-beautypedia .si-benefits span {
  text-transform: capitalize;
  color: rgb(93, 126, 149);
}
.pc-beautypedia .si-categories span {
  text-transform: capitalize;
  color: rgb(93, 126, 149);
}
.pc-beautypedia .si-relatedIngredients span, .pc-beautypedia .si-relatedIngredients a {
  text-transform: capitalize;
  color: rgb(93, 126, 149);
}
.pc-beautypedia .si-relatedIngredients > div {
  padding: 20px 0 0;
}
.pc-beautypedia .si-keypoints {
  padding-bottom: 36px;
}
.pc-beautypedia .si-keypoints h2 {
  font-size: 18px;
  margin-bottom: 15px;
}
.pc-beautypedia .si-keypoints ul {
  margin: 0 0 15px 15px;
}
.pc-beautypedia .si-description {
  line-height: 24px;
}
.pc-beautypedia .si-products {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pc-beautypedia .si-products .si-product-title {
  text-align: center;
  padding-bottom: 10px;
}
.pc-beautypedia .si-product-items {
  display: flex;
  column-gap: 20px;
  justify-content: start;
  overflow-x:scroll;
  overflow-y: hidden;
}
.pc-beautypedia .si-product-items::-webkit-scrollbar {
  width: 1px;
  height: 7px;
}

.pc-beautypedia .si-product-items::-webkit-scrollbar-thumb {
  background-color: #888;
    border-radius: 20px;
}

.pc-beautypedia .product-item {
  width: 300px;
  background: #fafafa;
  flex: 0 0 auto;
}
.pc-beautypedia .si-product-item-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
}
.pc-beautypedia .si-product-price {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 0;
  display: flex;
  justify-content: space-evenly;
  font-weight: bold;
  align-items: center;
  font-size:16px!important;
}
.pc-beautypedia .si-product-price > div, .pc-beautypedia .si-product-price > a {
  font-family: var(--font-body, inherit) !important; font-weight: var(--font-body-bold, 700) !important;
}
.pc-beautypedia .si-product-item-info a {
  display: block;
  font-size: 14px;
}
.pc-beautypedia .si-btn {
  margin-bottom: 10px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  max-width: 320px;
  display: block;
  position: relative;
  border: 2px solid #333133;
  color: #fff;
  text-align: center;
  background-color: #333133;
  font-size: 14px;
}
.pc-beautypedia .si-btn:hover {
  color: #fff;
}
.pc-beautypedia .si-btn.invert {
  background-color: transparent;
  color: rgb(51, 49, 51);
}
.pc-beautypedia .si-btn.invert:hover {
  background-color: transparent;
  color: rgb(51, 49, 51);
}
.pc-beautypedia .si-references {
  margin: 45px 0;
}
.pc-beautypedia .si-reference-item {
  line-height: 24px;
}
.pc-beautypedia .si-footer-info {
  font-size: 14px;
  padding: 0px 0px 30px;
}

/**
** Extras
**/
.pc-beautypedia .mt-space {
  margin-top: 15px;
}

.pc-beautypedia .drawer-filter {
  position: fixed;
  top: 0;
  left: calc(-100% - -65px); /* Initially hide the drawer */
  width: calc(100% - 65px);
  height: 100%;
  background-color: #f0f0f0;
  transition: left 0.3s ease; /* Add smooth transition */
  z-index: 99;
  border: 1px solid rgb(227, 214, 205);
  background-color: rgb(247, 239, 229);
  color: rgb(51, 49, 51);
}

.pc-beautypedia .drawer-filter-container {
  position: relative;
  padding: 0px;
  height: calc(100% - 85px);
  overflow: auto;
}

.pc-beautypedia .drawer-filter.open {
  left: 0; /* Move the drawer into view */
}

.pc-beautypedia .drawer-filter-close {
  position: absolute;
  right:35px;
  top: 30px;
  z-index: 99;
}


.pc-beautypedia .drawer-filter-close svg {
  width: 15px;
  height: 15px;
}

.pc-beautypedia .drawer-filter-title {
  position: relative;
  padding: 55px 0 32px;
  display: flex;
  column-gap: 10px;
  align-items: center;
  font-size: 28px;
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
  border-bottom: 1px solid rgb(227, 214, 205);
  margin: 0 30px;
}

.pc-beautypedia .drawer-filter-title svg {
  width: 20px;
  height: 20px;
}

.pc-beautypedia .accordion {
  overflow: hidden;
  padding: 0 30px;
}

.pc-beautypedia .accordion-btn {
  cursor: pointer;
  padding: 20px 0;
  width: 100%;
  border-bottom: 1px solid rgb(227, 214, 205);
  text-align: left;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
  font-size: 18px;
  border-radius: 0;
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
}

.pc-beautypedia .accordion-btn > div {
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
}

.pc-beautypedia .accordion-btn > div > span {
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
}

.pc-beautypedia .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.pc-beautypedia .accordion-content > div {
  margin: 0;
  padding: 10px 0;
}

.pc-beautypedia .accordion-item.active .accordion-content {
  max-height: 100px;
}

.pc-beautypedia .accordion-item.active .arrow {
  transform: rotate(-180deg);
}

.pc-beautypedia .accordion-item .arrow {
  transition: transform 0.2s ease;
  width: 16px;
  height: 16px;
}

.pc-beautypedia .arrow svg {
  width: 17px;
  height: 17px;
  transform: rotate(-90deg);
}

.pc-beautypedia .accordion-content .alphabatically,
.pc-beautypedia .accordion-content .rating,
.pc-beautypedia .accordion-content .benefits,
.pc-beautypedia .accordion-content .categories,
.pc-beautypedia .accordion-content .sort {
  font-size: 18px;
}

.pc-beautypedia .filter-footer {
  position: sticky;
  z-index: 151;
  left: 0px;
  bottom: 0dvh;
  width: 100%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 15px 30px;
  background-color: rgb(247, 239, 229);
  border-top: 1px solid rgb(227, 214, 205);
}
.pc-beautypedia .clear-filter {
  font-weight: bold;
  text-decoration: underline;
}
.pc-beautypedia .clear_search {
  color: rgb(93, 126, 149);
  text-decoration: underline;
}
.pc-beautypedia .show-filter {
  position: relative;
  border: 2px solid rgb(51, 49, 51);
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
}
.pc-beautypedia .more-btn {
  color: rgb(93, 126, 149);
  font-size: 14px;
  text-transform: lowercase;
}

@media screen and (max-width: 1080px) {
  .pc-beautypedia .wrap-all {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 60px;
    margin: 0 auto;
    padding: 20px;
  }
}

@media screen and (max-width: 768px) {
  .pc-beautypedia .id-header-container {
      background: #ebe3da center center;
      background-image: var(--pc-bp-hero-mobile);
  }
  .pc-beautypedia .id-header-title {
      font-size: 48px;
  }
  .pc-beautypedia .page-ingredient-single-width .breadcrumbs {
      margin-bottom: 54px;
  }

  .pc-beautypedia .wrap-all {
    grid-template-columns: unset !important;
  }

  .pc-beautypedia .wrap-select {
    display: none;
  }

  .pc-beautypedia .rating-column{
    width: 100px;
  }

  .pc-beautypedia div#pagination-container {
    justify-content: center;
    display: flex;
  }

  .pc-beautypedia .si-product-items {
      justify-content: start;
      overflow-x: scroll;
  }
  .pc-beautypedia .product-item {
      flex: 0 0 auto;
  }
  .pc-beautypedia .mobile-filter-view{
    display:block!important;
  }

  .pc-beautypedia .mobile-filter-view .total_records,
  .pc-beautypedia .mobile-filter-view .total_records_container{
    margin-bottom: 30px;
  }
  .pc-beautypedia .mobile-filter-view .filter_sort_button {
    margin-bottom: 20px;
    border-radius: 4px;
    padding: 11px 23px 10px;
    cursor: pointer;
    position: relative;
    border: 2px solid rgb(51, 49, 51);
    color: rgb(51, 49, 51);
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .pc-beautypedia .accordion-content > div > p { display: none; }
  .pc-beautypedia .accordion-content > div > label { font-size: 17px; }

}

@media (max-width: 500px) {
  .pc-beautypedia .wrap-all {
      display: block !important;
  }
  .pc-beautypedia .rating_sec {
      padding-top: 25px;
  }
  .pc-beautypedia .paginationjs {
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 10px;
  }

  .pc-beautypedia .filter-footer {
    padding: 15px 10px;
  }
}

@media screen and (max-width: 450px) {
  .pc-beautypedia .accordion {
      padding: 0 20px;
  }
  .pc-beautypedia .drawer-filter-title {
    margin: 0 20px;
  }
  .pc-beautypedia .drawer-filter {
    width: 100%;
    left: -100%;
  }
  .pc-beautypedia .drawer-filter-close {
    right: 10px;
    top: 20px;
  }
}



/**************************\
  Basic Modal Styles
\**************************/

/* The <dialog> elements deliberately do NOT carry the legacy `modal` class — Impulse
   defines its own `.modal { display: none; color: #fff; ... }` and it leaked in. */
.pc-beautypedia dialog.pc-bp-dialog {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}

.pc-beautypedia .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.pc-beautypedia .modal__container {
  background-color: rgb(251, 249, 248);
  max-width: 840px;
  max-height: 100vh;
  border-radius: 0;
  overflow-x: none;
  box-sizing: border-box;
  border: 1px solid rgb(51, 49, 51);
  overflow-y: scroll;
}

.pc-beautypedia .modal__container::-webkit-scrollbar {
  width: 7px;
}

.pc-beautypedia .modal__container::-webkit-scrollbar-thumb {
  background-color: #888;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid ##eee;  /* creates padding around scroll thumb */
}

.pc-beautypedia .modal__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px 40px;
  border-bottom: 1px solid rgb(213, 216, 220);
}

.pc-beautypedia .modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.pc-beautypedia .modal-close {
  background: transparent;
  border: 0;
}

.pc-beautypedia .modal__content {
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  height: 100%;
}

.pc-beautypedia .modal__btn {
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.pc-beautypedia .modal__btn:focus,
.pc-beautypedia .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.pc-beautypedia .modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}
.pc-beautypedia .reanalize-loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgb(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.8s ease-in-out;
}
.pc-beautypedia .reanalize-loading > div {
  color: #fff;
  margin: 0 3px;
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes pc-bp-mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pc-bp-mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes pc-bp-mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes pc-bp-mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.pc-beautypedia .micromodal-slide {
  display: none;
}

.pc-beautypedia .micromodal-slide.is-open {
  display: block;
}

.pc-beautypedia .micromodal-slide[aria-hidden='false'] .modal__overlay {
  animation: pc-bp-mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pc-beautypedia .micromodal-slide[aria-hidden='false'] .modal__container {
  animation: pc-bp-mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pc-beautypedia .micromodal-slide[aria-hidden='true'] .modal__overlay {
  animation: pc-bp-mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pc-beautypedia .micromodal-slide[aria-hidden='true'] .modal__container {
  animation: pc-bp-mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pc-beautypedia .micromodal-slide .modal__container,
.pc-beautypedia .micromodal-slide .modal__overlay {
  will-change: transform;
}

/***
** Loading indicator
**/
.pc-beautypedia .loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  height: 20px;
  width: 100%;
  animation: pc-bp-loading-shimmer 1.5s infinite;
  margin-bottom: 10px;
}

/* Animation for the shimmer effect */
@keyframes pc-bp-loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Variations for different skeleton sizes */
.pc-beautypedia .loading-skeleton.large {
  height: 40px;
}

.pc-beautypedia .loading-skeleton.medium {
  height: 30px;
}

.pc-beautypedia .loading-skeleton.small {
  height: 15px;
}

.pc-beautypedia .loading-skeleton.text-line {
  height: 16px;
  margin-bottom: 8px;
}

.pc-beautypedia .loading-skeleton.avatar {
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

.pc-beautypedia .loading-skeleton.card {
  height: 120px;
  margin-bottom: 20px;
}

/* Optional: Different animation speeds */
.pc-beautypedia .loading-skeleton.slow {
  animation-duration: 2s;
}

.pc-beautypedia .loading-skeleton.fast {
  animation-duration: 1s;
}

/*==========================================================================*\
  PART 2 - from beautypedia-ingredients-checker.css.liquid
  (rating colour swatches, the basic-modal block, the micromodal animation
  block and the trailing @media (max-width: 840px) block were byte-identical
  to PART 1 and are not repeated; see report)
\*==========================================================================*/

.pc-beautypedia #noty-submit, .pc-beautypedia #noty-analyze {
  font-size: 12px;
  margin-top: 10px;
  display: none;
}
/* Was `#MainContent` (the theme's page wrapper) with an off-white tint, then briefly
   the checker root. Removed entirely (per Alex, 2026-08-02): with the widget now
   contained, painting only the container looked like a floating tinted box. The
   background is the theme's job — the section's color scheme setting supplies any
   page tint the store wants. */
.pc-beautypedia--checker {
  background: transparent;
}
.pc-beautypedia .page-ingredient-width-result-container {
  /* was 680px — too narrow for the five Filter & Sort tabs, "Functions" wrapped (per Alex) */
  max-width: 780px;
  margin: 0 auto;
  padding-bottom: 90px;
}
/* Checker-only width; the dictionary keeps its own 1060px rule above. */
.pc-beautypedia--checker .page-ingredient-width {
  max-width: 1260px;
  margin: 0 auto;
}
.pc-beautypedia .beautypedia-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 60px;
  grid-auto-flow: dense;
  padding: 60px 100px 0;
  position: relative;
}
.pc-beautypedia .column1 .beautypedia-info {
  background: #f3ede9;
}
.pc-beautypedia .column1,
.pc-beautypedia .column2 {
  margin-bottom: 120px;
}
.pc-beautypedia .beautypedia-logo svg {
  width: 200px;
  /* the markup's height="15" + forced 200px width letterboxed the wordmark, centring it
     ~38px to the right of the box (which the legacy -14px margin only half-hid). 24px is
     200px at the viewBox ratio (1280:154.76), so the drawing fills the box flush left,
     aligned with the title. height:auto would NOT work: Chrome takes the aspect ratio
     from the 15x15 attributes, not the viewBox, giving a 200x200 box. */
  height: 24px;
  margin-left: 0;
  fill: #333133;
  margin-bottom: 20px;
}
.pc-beautypedia .beautypedia-title {
  font-size: 48px;
  color: #333133;
}
.pc-beautypedia .beautypedia-subtitle {
  color: #999899;
  font-size: 24px;
}
.pc-beautypedia .or-label {
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}
.pc-beautypedia .or-label span {
  padding: 0px 15px;
}
.pc-beautypedia .or-label {
  color: rgb(51, 49, 51);
  position: relative;
  overflow: hidden;
  text-align: center;
  margin: 44px 0px;
}
.pc-beautypedia .or-label::before {
  margin-left: -50%;
}
.pc-beautypedia .or-label::before, .pc-beautypedia .or-label::after {
  position: absolute;
  top: 50%;
  overflow: hidden;
  width: 50%;
  height: 1px;
  content: "";
  background-color: rgb(51, 49, 51);
}
.pc-beautypedia .beautypedia-label {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom:5px;
}
.pc-beautypedia .photo-tips-info {
  display: flex;
  column-gap: 5px;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  color: rgb(93, 126, 149);
}
.pc-beautypedia .photo-btn {
  position: relative;
  width: fit-content;
  border-radius: 4px;
  margin: 15px 0;
}
.pc-beautypedia .photo-btn button {
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-color: rgb(51, 49, 51);
  width: 100%;
  border-radius: 5px;
  padding: 13px 23px;
  cursor: pointer;
  position: relative;
  border: 2px solid;
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
}
.pc-beautypedia .photo-btn input {
  position: absolute;
  left: 0px;
  padding: 10px;
  opacity: 0;
}
.pc-beautypedia .photo-wrap-content {
  margin-bottom: 50px;
}
.pc-beautypedia .photo-wrap {
  margin-bottom: 50px;
  padding: 30px;
}
.pc-beautypedia .photo-details {
  display:flex;
  column-gap: 10px;
  margin: 10px 0;
}
.pc-beautypedia .photo-details img {
  width: 50%;
}
.pc-beautypedia .imagePreviewbg {
  background-color: rgb(149, 148, 152);
  padding: 20px;
  text-align:center;
  max-width:640px;
}
.pc-beautypedia .photoPreviewContainer {
  width:100%;
  max-width:840px;
}
.pc-beautypedia .photoPreviewContainer img {
  width:100%;
}
.pc-beautypedia .cropper-point {
  background-color: rgba(0, 0, 0, 0.9) !important;
  height: 12px !important;
  width: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
.pc-beautypedia .cropper-view-box {
  outline: 1px solid transparent !important;
  outline-color: transparent !important;
  border: 2px dashed #fff !important;
}
.pc-beautypedia .cropper-line {
  background-color: transparent !important;
}
.pc-beautypedia .photocrop-container {
  background: #999;
  padding: 50px;
  width: 100%;
  margin-bottom:20px;
}
.pc-beautypedia .photocrop-wrapper {
 max-width: 620px;
  margin:0 auto;
}
.pc-beautypedia .photocrop-wrapper img {
  max-width: 100%;
}

@media (max-width: 620px) {
  .pc-beautypedia .photocrop-container {
    background: #999;
    padding: 10px;
    width: 100%;
    margin-bottom:20px;
  }
  .pc-beautypedia .photocrop-wrapper {
    width: 100%;
  }
  .pc-beautypedia .photo-wrap {
    padding:15px;
  }
}
@media (max-width: 420px) {

  .pc-beautypedia .photo-btn {
    width: 100%;
  }
}

.pc-beautypedia .beautypedia-header-title {
  margin-bottom: 60px;
}
.pc-beautypedia .inputIngredient {
  width: 100%;
  margin-bottom: 10px;
  color: #333133;
  border: 3px solid #959498;
  padding: 12px 10px;
  border-radius: 3px;
  background: #fff;
}
.pc-beautypedia .inputIngredient:active, .pc-beautypedia .inputIngredient:focus{
  border: 3px solid #959498;
}
.pc-beautypedia .jar-checkbox-container {
  display: flex;
  column-gap: 8px;
  align-items: center;
}
.pc-beautypedia .jar-checkbox-container input {
  margin:0;
}
.pc-beautypedia .beautypedia-submit {
  position: relative;
  border: 2px solid;
  color: #fff;
  background-color: #333133;
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-color: #333133;
}
.pc-beautypedia .beautypedia-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pc-beautypedia .beautypedia-info {
  padding: 50px 40px;
}
.pc-beautypedia .beautypedia-info h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.pc-beautypedia .beautypedia-info .desc {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0;
  line-height: 26px;
  color: #333133;
}
.pc-beautypedia .beautypedia-info .how a,
.pc-beautypedia .beautypedia-info .desc a {
  color: #5d7e95;
  text-decoration: none;
  font-weight: 600;
}
.pc-beautypedia .bbr-parent {
  padding: 50px 0 0; /* Alex's values (was 24px 50px 50px) */
}
.pc-beautypedia .bbr-container {
  padding: 0 0 50px;
}
.pc-beautypedia .bbreadcrumbs a {
  color: #333133;
}
.pc-beautypedia .bbr-new-analysis-btn {
  border: 2px solid;
  color: #333133;
  background-color: #fff0;
  margin: 40px 0 0;
  border-color: #333133;
  border-radius: 4px;
  padding: 15px 23px 15px;
  cursor: pointer;
  max-width: 180px;
  display: block;
  text-align: center;
}
.pc-beautypedia .bbr-header-title {
  font-size: 52px;
}
.pc-beautypedia .bbr-header-subtitle {
  font-size: 20px;
}
.pc-beautypedia .bold {
  font-weight: 700;
}
.pc-beautypedia .bbr-header-details {
  display: flex;
  column-gap: 10px;
  align-items: center;
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}
.pc-beautypedia .bbr-header-details {
  font-size: 13px;
}
.pc-beautypedia .bbr-header-details svg {
  width: 11px;
  height: 11px;
}
.pc-beautypedia .chart-count-wrapper {
  display: flex;
  align-items: center;
  column-gap: 30px;
}
.pc-beautypedia .chart-count-container {
  margin: 50px 0 30px;
  background-color: #fff;
  padding: 2em 2em 0;
}
.pc-beautypedia .ccc-title {
  font-size: 24px;
  margin-bottom: 5px;
}
.pc-beautypedia .item-count {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.pc-beautypedia .item-count a{
  cursor: auto;
}
.pc-beautypedia .item-count a.has-data-count {
  text-decoration: underline;
  cursor: pointer;
}
.pc-beautypedia .item-count span.count {
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  max-width: 35px;
  width: 100%;
}

.pc-beautypedia .chart-count-content {
  flex: 1;
}
.pc-beautypedia .ccc-footer {
  padding: 20px 0;
  font-size: 13px;
  text-decoration: underline;
  border-top: 1px solid #ccc;
  margin-top: 30px;
  cursor: pointer;
}
.pc-beautypedia .ingredient-container-tab {
  background-color: #fff;
}
.pc-beautypedia .ingredient-tab-header {
  padding: 40px;
}
.pc-beautypedia .ingredient-tab-header > p {
  margin-bottom: 30px;
}
.pc-beautypedia .ict-tab {
  display: inline-block;
}
.pc-beautypedia .ict-tab button {
  border-color: #333133;
  padding: 6px 12px 5px;
  border-radius: 4px;
  border: 2px solid;
  color: #333133;
  background-color: #fff0;
  margin-bottom: 7px;
  margin-right: 7px;
}
.pc-beautypedia .ict-tab button.active {
  border-color: #333133;
  color: #fff;
  background-color: #333133;
}
.pc-beautypedia .ingredient-tab-header h2 {
  font-size: 20px;
}
.pc-beautypedia .ict-list .item-list {
  border-top: 1px solid #d5d8dc;
  clear: both;
  overflow: hidden;
}
.pc-beautypedia .ict-list .item-list .item-list-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 40px 20px;
  cursor: pointer;
}

.pc-beautypedia .ict-list .item-list .item-list-result.unknown {
  cursor: auto;
}

.pc-beautypedia .ict-list .item-list .item-list-suggest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 3px solid #57575c;
  border-radius: 4px;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 15px 27px;
  margin: 0 10px;
  cursor: pointer;
  margin-bottom: 20px;
}
.pc-beautypedia .ict-list .item-list .item-list-suggest::before {
  background-color: #fff;
  border-top: 3px solid #57575c;
  border-left: 3px solid #57575c;
  border-image: initial;
  border-bottom: none;
  border-right: none;
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  top: -9.5px;
  transform: rotate(45deg);
}
.pc-beautypedia .ict-list .item-list .item-list-suggest .il-title {
  font-size: 14px;
}
.pc-beautypedia .ict-list .item-list .item-list-suggest .edit-list {
  font-size: 14px;
}
.pc-beautypedia .not_match_style {
  background-color: #fff;
  border: 3px solid #57575c;
  border-radius: 4px;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding: 15px 27px;
  margin: 0 10px;
  cursor: pointer;
}
.pc-beautypedia .il-title-sub {
  font-size: 14px;
}
.pc-beautypedia .il-status {
  text-transform: uppercase;
  font-size: 13px;
  margin-top: 5px;
}
.pc-beautypedia .group-title {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 70px;
  padding: 0px 40px;
  color: rgb(255, 255, 255);
  text-transform: capitalize;
  font-family: var(--font-heading, inherit) !important; font-weight: var(--font-heading-weight, 700) !important;
    font-size: 18px;
}
.pc-beautypedia .arrow-list svg {
  width: 12px;
  height: 20px;
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .pc-beautypedia .page-ingredient-width {
    margin: 100px auto 0;
  }
  .pc-beautypedia .beautypedia-container {
    grid-template-columns: 1fr;
    grid-template-areas: 'column2' 'column1';
    padding:0;
  }
  .pc-beautypedia .column1 {
    grid-area: column1;
    margin-bottom:0;
  }
  .pc-beautypedia .column2 {
    grid-area: column2;
    margin-bottom: 50px;
    padding: 0 40px;
  }

  .pc-beautypedia .page-ingredient-width-result-container {
    margin: 100px auto 0;
  }
  .pc-beautypedia .bbr-parent {
    padding: 0px 30px 0px;
  }
  .pc-beautypedia .chart-title-mobile {
    display: block!important;
  }
  .pc-beautypedia .chart-title-desktop {
    display: none !important;
  }
  .pc-beautypedia .chart-count-pie {
    width: 50%;
  }
  .pc-beautypedia .item-count {
    margin-top: 10px;
  }
  .pc-beautypedia .chart-count-wrapper {
    column-gap: 10px;
  }
}

@media (max-width: 500px) {
  .pc-beautypedia .page-ingredient-width, .pc-beautypedia .page-ingredient-width-result-container {
    margin: 30px auto 0;
  }
}

/**
* Reanalyze styling
**/
.pc-beautypedia .reanalyze-container,
.pc-beautypedia .ingredient-modal-info-container {
  padding: 84px 120px;
}
.pc-beautypedia .reanalyze-title {
  font-size: 24px;
}
.pc-beautypedia .reanalyze-subtitle {
  font-size: 16px;
  padding-bottom: 35px;
}
.pc-beautypedia .reanalyze-input {
  padding: 16px;
  color: rgb(51, 49, 51);
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(149, 148, 152);
  width: 598px;
  height: 120px;
  margin-bottom: 20px;
  max-width: 598px;
}
.pc-beautypedia .reanalyze-button, .pc-beautypedia .analyze-button {
  position: relative;
  border: 2px solid rgb(51, 49, 51);
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
  width: 100%;
  text-align: center;
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  text-transform: uppercase;
  display: block;
}
.pc-beautypedia .analyze-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pc-beautypedia .reanalyze-cancel {
  text-align: center;
  padding-top: 35px;
  text-decoration: underline;
  display: block;
  cursor: pointer;
}
.pc-beautypedia .modal-close svg {
  width: 25px;
  height: 25px;
}

.pc-beautypedia .close-modal-wide-button {
    text-transform: uppercase;
    letter-spacing: 0.025em !important;
    position: relative;
    border: 2px solid rgb(51, 49, 51);
    color: #fff !important;
    background-color: rgb(51, 49, 51);
    border-radius: 4px;
    padding: 11px 23px 10px;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    min-width: 100%;
    width: 100%;
    text-align: center;
}
/**
** Details
**/
.pc-beautypedia .ingredient-modal-info-container {
  font-size: 16px;
}
.pc-beautypedia .rs-rating > div {
  margin-bottom: 25px;
  font-size:16px;
}
.pc-beautypedia .rs-title h1 {
  font-size: 24px;
  margin-bottom: 25px;
}
.pc-beautypedia .rs-benefits > div,
.pc-beautypedia .rs-categories > div,
.pc-beautypedia .rs-keypoints > div,
.pc-beautypedia .rs-description > div,
.pc-beautypedia .rs-references > div,
.pc-beautypedia .rs-relatedIngredients > div {
  margin-bottom: 25px;
}
.pc-beautypedia .rs-benefits h2,
.pc-beautypedia .rs-categories h2,
.pc-beautypedia .rs-keypoints h2,
.pc-beautypedia .rs-description h2,
.pc-beautypedia .rs-references h2 {
  font-size: 20px;
}

.pc-beautypedia .rs-benefits ul,
.pc-beautypedia .rs-categories ul,
.pc-beautypedia .rs-keypoints ul {
  margin: 0 0 0 15px;
  line-height:normal;
}
.pc-beautypedia .rs-relatedIngredients > div > span > span {
  text-decoration: underline;
}

.pc-beautypedia .rs-product-items {
  display: flex;
  column-gap: 20px;
  justify-content: start;
  overflow-x: scroll;
  overflow-y: hidden;
}
/* Checker-only card width; the dictionary/detail views keep their 300px rule above. */
.pc-beautypedia--checker .product-item {
  width: 280px;
  background: #fafafa;
  flex: 0 0 auto;
}
.pc-beautypedia .rs-product-item-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 140px;
}
.pc-beautypedia .rs-product-price {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 0;
  display: flex;
  justify-content: space-evenly;
  font-weight: bold;
  align-items: center;
  font-size:16px!important;
}
.pc-beautypedia .rs-product-price > div, .pc-beautypedia .rs-product-price > a {
  font-family: var(--font-body, inherit) !important; font-weight: var(--font-body-bold, 700) !important;
}
.pc-beautypedia .rs-product-item-info a {
  display: block;
  font-size: 14px;
}

.pc-beautypedia .rs-product-items::-webkit-scrollbar {
  width: 1px;
  height: 7px;
}

.pc-beautypedia .rs-product-items::-webkit-scrollbar-thumb {
  background-color: #888;
    border-radius: 20px;
}
.pc-beautypedia .rs-product-title h2 {
  font-size: 20px;
  margin-top:25px;
  margin-bottom: 20px;
}

.pc-beautypedia .rs-product-items.has-items {
  margin-bottom: 25px;
}
.pc-beautypedia .rs-footer {
  margin-top: 50px;
}

/**
** Share
**/
.pc-beautypedia .share-container {
  background-color: rgb(255, 255, 255);
  padding: 60px 10px 140px;
}

/* "Share section background" set → the box becomes a full-width band: bleed to the
   viewport edges (the 50%−50vw trick needs the widget's ancestors centered, which the
   container layout guarantees) with the inline background-color from the setting.
   .share-wrapper stays centered at its 780px, so only the band stretches. */
.pc-beautypedia .share-container--bg {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 60px;
  padding: 70px 20px;
}

.pc-beautypedia .share-wrapper {
  max-width: 780px; /* matches .page-ingredient-width-result-container (per Alex) */
  margin: 0px auto;
}

.pc-beautypedia .share-input {
  display: flex;
  column-gap: 10px;
}

.pc-beautypedia .share-input input {
  border: 1px solid  rgb(149, 148, 152);
  width: 100%;
  color: rgb(149, 148, 152);
  padding: 10px;
  margin: 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
}

.pc-beautypedia .share-input button {
  position: relative;
  border: 2px solid rgb(51, 49, 51);
  color: rgb(255, 255, 255);
  background-color: rgb(51, 49, 51);
  border-radius: 4px;
  padding: 11px 23px 10px;
  cursor: pointer;
  text-transform: uppercase;
}

/**************************\
  Basic Modal Styles
\**************************/

/* Checker-only: fixed 840px dialog. The dictionary's modal keeps its auto width. */
.pc-beautypedia--checker .modal__container {
  background-color: rgb(251, 249, 248);
  max-width: 840px;
  width: 840px;
  max-height: 100vh;
  border-radius: 0;
  overflow-x: none;
  box-sizing: border-box;
  border: 1px solid rgb(51, 49, 51);
  overflow-y: scroll;
  overflow-x: hidden;
}

.pc-beautypedia .share-loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgb(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.8s ease-in-out;
}
.pc-beautypedia .share-loading > div {
  color: #fff;
  margin: 0 3px;
}

/**
** Loader
**/

.pc-beautypedia .lds-ripple,
.pc-beautypedia .lds-ripple div {
  box-sizing: border-box;
}
.pc-beautypedia .lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.pc-beautypedia .lds-ripple div {
  position: absolute;
  border: 4px solid currentColor;
  opacity: 1;
  border-radius: 50%;
  animation: pc-bp-lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.pc-beautypedia .lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes pc-bp-lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  4.9% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 0;
  }
  5% {
    top: 36px;
    left: 36px;
    width: 8px;
    height: 8px;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    opacity: 0;
  }
}


/**
* Modal mobile settings
**/
@media (max-width: 840px) {
  .pc-beautypedia .modal__container {
    width: 100%;
    height: auto;
    overflow-y: scroll;
  }
  .pc-beautypedia .modal__header {
    padding: 15px;
  }
  .pc-beautypedia .reanalyze-container, .pc-beautypedia .ingredient-modal-info-container {
    padding: 20px;
  }
  .pc-beautypedia .reanalyze-input {
    width: 100%;
    max-width: 100%;
  }
  .pc-beautypedia .reanalyze-cancel {
    padding-top: 15px;
  }
}

/*==========================================================================*\
  Modern modal skin
  Replaces the ported legacy modal look for every pc-bp dialog: floating card
  with rounded corners + shadow, margin around it (never edge-to-edge), a fixed
  header row (title left, close right), the body scrolling on its own, and a
  soft pop-in animation. Sits at the end of the file on purpose — these rules
  must override the legacy ones above. Selector depth (dialog.pc-bp-dialog)
  also outranks the --checker width variant.
\*==========================================================================*/

.pc-beautypedia dialog.pc-bp-dialog .modal__overlay {
  padding: 32px 24px;
}

.pc-beautypedia dialog.pc-bp-dialog .modal__container {
  display: flex;
  flex-direction: column;
  width: min(840px, 100%);
  max-width: 100%;
  max-height: min(85vh, 100%);
  border: 0;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden; /* clips children to the rounded corners */
}

/* Header: title left, close right, never scrolls away. */
.pc-beautypedia dialog.pc-bp-dialog .modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

.pc-beautypedia .pc-bp-modal-title,
.pc-beautypedia dialog.pc-bp-dialog .modal__header .si-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  text-align: left;
  overflow-wrap: break-word;
}

/* The checker's detail title arrives as an <h1> rendered inside the header slot —
   size it like every other modal title. */
.pc-beautypedia .pc-bp-modal-title h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  text-align: inherit;
}

.pc-beautypedia dialog.pc-bp-dialog .modal-close {
  flex: 0 0 auto;
  margin-left: auto; /* keeps the X on the right even in title-less headers */
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.pc-beautypedia dialog.pc-bp-dialog .modal-close:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
.pc-beautypedia dialog.pc-bp-dialog .modal-close svg {
  width: 16px;
  height: 16px;
}

/* Body: the only scrolling region. */
.pc-beautypedia dialog.pc-bp-dialog .modal__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pc-beautypedia dialog.pc-bp-dialog .modal__content::-webkit-scrollbar {
  width: 8px;
}
.pc-beautypedia dialog.pc-bp-dialog .modal__content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

/* Sensible interior padding under a real header (the legacy 84px/120px is gone).
   Every dialog body container gets the SAME values so spacing matches across
   Beautypedia — the checker's detail modal is the reference. */
.pc-beautypedia dialog.pc-bp-dialog .ingredient-modal-info-container,
.pc-beautypedia dialog.pc-bp-dialog .reanalyze-container {
  padding: 28px 32px 40px;
}

/* Full width like the REANALYZE button below it (legacy fixed it at 598px). */
.pc-beautypedia dialog.pc-bp-dialog .reanalyze-input {
  width: 100%;
  max-width: 100%;
}
.pc-beautypedia dialog.pc-bp-dialog #modal-indicator-ingredient {
  padding: 4px 32px 36px;
}
.pc-beautypedia dialog.pc-bp-dialog .page-ingredient-single-width {
  padding: 8px 32px 40px;
  max-width: 100%;
}

/* Pop-in animation (overlay fades, card lifts). */
@keyframes pc-bp-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pc-bp-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.pc-beautypedia dialog.pc-bp-dialog[open] .modal__overlay {
  animation: pc-bp-overlay-in 0.18s ease-out;
}
.pc-beautypedia dialog.pc-bp-dialog[open] .modal__container {
  animation: pc-bp-card-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pc-beautypedia dialog.pc-bp-dialog[open] .modal__overlay,
  .pc-beautypedia dialog.pc-bp-dialog[open] .modal__container {
    animation: none;
  }
}

@media screen and (max-width: 640px) {
  .pc-beautypedia dialog.pc-bp-dialog .modal__overlay {
    padding: 12px;
  }
  .pc-beautypedia dialog.pc-bp-dialog .modal__container {
    max-height: calc(100dvh - 24px);
    border-radius: 12px;
  }
  .pc-beautypedia dialog.pc-bp-dialog .modal__header {
    padding: 12px 10px 12px 18px;
  }
  .pc-beautypedia .pc-bp-modal-title,
  .pc-beautypedia dialog.pc-bp-dialog .modal__header .si-title {
    font-size: 18px;
  }
  .pc-beautypedia dialog.pc-bp-dialog .ingredient-modal-info-container,
  .pc-beautypedia dialog.pc-bp-dialog .reanalyze-container {
    padding: 20px 18px 32px;
  }
  .pc-beautypedia dialog.pc-bp-dialog #modal-indicator-ingredient {
    padding: 4px 18px 28px;
  }
  .pc-beautypedia dialog.pc-bp-dialog .page-ingredient-single-width {
    padding: 4px 18px 32px;
  }
}

/*==========================================================================*\
  Typography & colour settings layer
  The dictionary section's Typography / Filters / Colors settings arrive as CSS
  custom properties on the widget root (see the block's pc_bp_style capture).
  Every var() fallback equals the previous hardcoded look, so a fresh section
  renders unchanged until a merchant moves a slider.

  Specificity is deliberately cranked (per Alex): the root class is repeated
  (`.pc-beautypedia.pc-beautypedia.pc-beautypedia`) so every rule outranks BOTH
  the host theme's element-level typography (Impulse styles h1/h2/p/label/input
  directly with its font variables — inheritance from the root loses to those)
  AND our own ported legacy rules (e.g. `h5.m-0.filter_title { … !important }`,
  which beat a plain `.pc-beautypedia .filter_title` even with !important).

  The base font is applied to EVERY descendant, not inherited — but only when
  the merchant picked a non-theme font (the block adds
  `pc-beautypedia--custom-font` then), so "Theme default" changes nothing.

  Alex's taxonomy:
    title      = ingredient name in the detail-popup header
    header     = "Filter By" + the Rating/Ingredient table column heads
    sub header = "{name} at a Glance / Description / References" + products title
    content    = paragraphs, keypoints, rating/benefit lines, short descriptions
    filter     = facet group headings + facet checkbox labels
\*==========================================================================*/

/* base font — every descendant, gated on a non-theme font being selected */
.pc-beautypedia--custom-font.pc-beautypedia.pc-beautypedia,
.pc-beautypedia--custom-font.pc-beautypedia.pc-beautypedia *:not(svg):not(path) {
  font-family: var(--pc-bp-font-base) !important;
}

/* content — before the heading rules so element-specific heading rules win inside */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .short_Desc,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-description,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-keypoints ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-keypoints li,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-benefits,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-categories,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-rating,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-reference-item,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-footer-info {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
}

/* header — `th *` matters: RATING's text sits inside a div in its th, INGREDIENT's in
   a span; covering only the th lets theme rules restyle the inner elements unevenly. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .filter_title,
.pc-beautypedia.pc-beautypedia.pc-beautypedia table th,
.pc-beautypedia.pc-beautypedia.pc-beautypedia table th *:not(svg):not(path) {
  font-size: var(--pc-bp-header-size, 16px) !important;
  font-family: var(--pc-bp-header-family, inherit) !important;
}

/* sub header */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-container h2,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-products .si-product-title,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-products .si-product-title div {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
}

/* title (overrides the modal skin's fixed sizes, all breakpoints) */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .pc-bp-modal-title,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .pc-bp-modal-title h1,
.pc-beautypedia.pc-beautypedia.pc-beautypedia dialog.pc-bp-dialog .modal__header .si-title {
  font-size: var(--pc-bp-title-size, 24px) !important;
  font-family: var(--pc-bp-title-family, inherit) !important;
}

/* filters — group headings, then the checkbox labels, pointed at individually */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .addfilter > div > p,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .accordion-content > div > p,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .accordion-btn {
  font-size: var(--pc-bp-filter-header-size, 14px) !important;
  font-family: var(--pc-bp-filter-header-family, inherit) !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .addfilter > div > label,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .addfilter > div > div > label,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .accordion-content label {
  font-size: var(--pc-bp-filter-content-size, 12px) !important;
  font-family: var(--pc-bp-filter-content-family, inherit) !important;
}

/* links */
.pc-beautypedia.pc-beautypedia.pc-beautypedia a.read_btn,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .more-btn,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .clear-filter,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .clear_search,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-relatedIngredients a,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-product-price a {
  color: var(--pc-bp-link-color, #5d7e95) !important;
}

/* Search icon alignment: the legacy rules are qualified `span.…SearchIcon…`, but the
   icon is now a <button> (a11y), so those rules stopped matching and the icon dropped
   below the input. Same geometry, class-only selector, plus button resets. */
.pc-beautypedia .search-input .search_submission {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
}
.pc-beautypedia .search-input .search_submission svg {
  width: 18px;
  height: auto;
  fill: rgb(51, 49, 51);
  cursor: pointer;
}
.pc-beautypedia .search-input .search_submission::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 1px;
  background-color: #00000059;
  left: -15px;
  top: 0;
}

/* Content lists keep their bullets. Two things were stripping them: our own baseline
   reset (`.pc-beautypedia ul { list-style: none }`, needed for UI lists like facets)
   and theme-level list resets. Restore bullets for CONTENT lists only — keypoints and
   description lists in the detail modal, the checker dialogs' instructional lists, and
   the no-results tips — at hammer specificity so neither reset wins. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-container ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-modal-info-container ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results ul {
  list-style: disc !important;
  padding-left: 22px !important;
  margin: 0 0 12px !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-container ul li,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-modal-info-container ul li,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results ul li {
  list-style: disc !important;
  display: list-item !important;
}

/* Top row (search | "Showing N Results" | sort) — center the row vertically and make
   the sort control match the search input (42px pill, same border) per Alex. The
   label, options, and the Showing text all follow the Content font settings. The
   legacy decorative chevron elements are hidden; the select draws its own (data URI,
   self-contained). */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .wrap-select {
  align-items: center !important;
  gap: 16px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .total_records,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .total_records_container {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .sort_btn label {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  margin: 0 10px 0 0;
  white-space: nowrap;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .sort_btn select.sortdata {
  height: 42px;
  min-width: 200px;
  border: 2px solid rgb(213, 216, 220);
  border-radius: 2em;
  padding: 0 44px 0 18px;
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  color: rgb(51, 49, 51);
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='%23333133' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 11px;
  cursor: pointer;
}
/* legacy decorative chevron/box elements next to the select — replaced by the
   select's own chevron above */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .sort_btn .Select__Box-sc-1glsjzq-6,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .sort_btn .Select__ChevronWrapper-sc-1glsjzq-4 {
  display: none !important;
}

/* Collapse empty detail sections. Ingredients often lack keypoints/references/related
   entries; the JS leaves those containers truly empty (innerHTML = ''), but their
   padding/margins still reserved space (e.g. .si-keypoints { padding-bottom: 36px }).
   :empty is reliable here precisely because the JS empties them completely. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-rating:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-benefits:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-categories:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-keypoints:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-description:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-relatedIngredients:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-references:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-product-title:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-product-items:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-rating:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-benefits:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-categories:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-keypoints:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-description:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-relatedIngredients:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-references:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-product-title:empty,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-product-items:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* wrapper divs whose children are all empty (browsers without :has() just keep them) */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-products:has(> .si-product-title:empty):has(> .si-product-items:empty),
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-products:has(> .rs-product-title:empty):has(> .rs-product-items:empty),
.pc-beautypedia.pc-beautypedia.pc-beautypedia .si-short-info:has(> div:empty):not(:has(> div:not(:empty))),
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-short-info:has(> div:empty):not(:has(> div:not(:empty))) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Checker mappings for the shared typography settings (same variables the dictionary
   sets; the checker block now sets them too). The checker's hero headings
   (.bbr-header-title at 52px, .beautypedia-title) are deliberately outside every
   group, like the dictionary banner. Defaults sit within ~2px of the legacy look. */

/* header — the tab strip */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ict-tab-container h3,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ict-tab button {
  font-size: var(--pc-bp-header-size, 16px) !important;
  font-family: var(--pc-bp-header-family, inherit) !important;
}

/* sub header — Quick Look / Ingredient List headings + detail-dialog section headings */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ccc-title,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-tab-header h2,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-modal-info-container h2 {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
}

/* content — result rows, dialog body copy, subtitles, the paste box */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .il-title,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .il-title-sub,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-description,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-description > div,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-keypoints ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-keypoints li,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-benefits ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-categories ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-relatedIngredients,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .rs-footer,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ccc-subtitle,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-tab-header p,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .inputIngredient {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
}

/* links */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbreadcrumbs a,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbreadcrumbs span,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-info .how a {
  color: var(--pc-bp-link-color, #5d7e95) !important;
}

/* "How we rate ingredients" content — professional rhythm (per Alex): section headings
   on the Sub header settings, body copy on the Content settings, rating names as small
   uppercase badges keeping their rating colours. Bottom CLOSE button is gone (header X). */
.pc-beautypedia.pc-beautypedia.pc-beautypedia #modal-indicator-ingredient h1 {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  font-weight: 600;
  margin: 28px 0 10px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia #modal-indicator-ingredient h1:first-child {
  margin-top: 4px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia #modal-indicator-ingredient p {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  line-height: 1.65;
  margin: 0 0 14px;
  color: rgb(51, 49, 51);
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia #modal-indicator-ingredient h3 {
  font-size: 14px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 20px 0 6px;
}

/* No-results state — "No results for …" is a sub header, not a page-scale h1 (per
   Alex); the search term matches it instead of rendering tiny; tips read as content. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results h1 {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  font-weight: 600;
  margin: 4px 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results h1 .search_result_value {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results .clear_search {
  display: inline-block;
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  margin-bottom: 6px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results ul {
  margin: 10px 0 0 18px !important;
  padding: 0 !important;
  list-style: disc !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .table-no-results li {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  line-height: 1.7;
}

/* Checker form polish (per Alex) — spacing/line-height rhythm, with every font wired
   to the Typography settings so it stays adjustable: section headings + panel heading +
   subtitle on Sub header, the OR divider on Header, all supporting copy on Content. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-label {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  line-height: 1.25;
  margin: 0 0 8px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-label + div {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  line-height: 1.65;
  margin: 0 0 4px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-subtitle {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  line-height: 1.4;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-btn {
  margin: 14px 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-tips-info {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .or-label {
  font-size: var(--pc-bp-header-size, 16px) !important;
  font-family: var(--pc-bp-header-family, inherit) !important;
  letter-spacing: 0.08em;
  margin: 34px 0;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .inputIngredient {
  line-height: 1.6;
  padding: 14px 16px;
  min-height: 120px;
  margin: 6px 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .jar-checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .jar-label span {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-submit {
  margin-top: 8px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia #noty-submit {
  font-size: var(--pc-bp-content-size, 14px) !important;
}
/* left panel */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-info h2 {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  line-height: 1.2;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-info .desc {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  line-height: 1.7;
  margin: 16px 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-info img {
  margin: 14px 0 0;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .beautypedia-info .how {
  margin-top: 10px;
}

/* Checker results polish (per Alex) — wider card (680→780 above) plus breathing room
   so the Filter & Sort row sits on one line and the header rhythm is consistent. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbr-header-title {
  line-height: 1.1;
  margin: 0 0 6px;
}
/* the * leg keeps the found/total count <span>s at full size — theme element rules
   (Impulse: span { font-size: … }) otherwise shrink just the numbers */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbr-header-subtitle,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbr-header-subtitle * {
  line-height: 1.5;
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .bbr-header-subtitle {
  margin: 0 0 14px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-tab-header {
  padding: 36px 40px 30px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ingredient-tab-header > p {
  margin: 8px 0 26px;
  line-height: 1.6;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ict-tab-container h3 {
  margin: 0 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .ict-tab button {
  margin: 0 8px 8px 0;
  line-height: 1.3;
  white-space: nowrap;
}

/* New Analysis renders as a <button> when its link setting is blank (no navigation,
   per Alex) — neutralise UA/theme button styling so both variants look identical. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia button.bbr-new-analysis-btn {
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* "Photo Tips & Tricks" dialog — professional rhythm (per Alex), same recipe as the
   ratings modal: the legacy h1s drop to the Sub header settings, bullets/copy to the
   Content settings, image + checklist as a balanced two-column row. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content h1 {
  font-size: var(--pc-bp-sub-size, 22px) !important;
  font-family: var(--pc-bp-sub-family, inherit) !important;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content {
  margin: 0 0 28px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content:last-child {
  margin-bottom: 0;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content + .photo-wrap-content {
  border-top: 1px solid #e8e4e1;
  padding-top: 24px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content ul,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content li,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content p {
  font-size: var(--pc-bp-content-size, 14px) !important;
  font-family: var(--pc-bp-content-family, inherit) !important;
  line-height: 1.7;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content ul {
  margin: 0;
  padding-left: 20px;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-wrap-content p {
  margin: 0;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-details {
  display: flex;
  align-items: flex-start;
  column-gap: 24px;
  margin: 0;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-details img {
  width: 50%;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-details {
    flex-direction: column;
    row-gap: 14px;
  }
  .pc-beautypedia.pc-beautypedia.pc-beautypedia .photo-details img {
    width: 100%;
  }
}

/* ================================================================== *
 * Theme independence (2026-08-02)
 *
 * The widget launched on Impulse-based themes, which quietly supplied three
 * things: a page-width container around app blocks, a global button reset,
 * and no competing styles on generic class names. Horizon-class themes
 * (TW/HK) supply none of them — app sections render full-bleed, bare
 * <button>s keep their UA/theme chrome, and the theme's own
 * `.rating { display: flex }` (product star ratings, blocks/review.liquid)
 * reaches into our facet group of the same name. These rules make the
 * widget carry its own layout so it renders the same on any theme.
 * ================================================================== */

/* 1 — Self-owned page container (was: the theme's page wrapper). On themes
   that already constrain app blocks (Impulse page-width ≈ 1200px) the
   max-width is a no-op; on full-bleed themes it centers the widget. The
   padding is the widget's own gutter for viewports below the max. */
.pc-beautypedia {
  /* width:100% matters on themes whose sections are flex containers with
     centered alignment (TW/HK, Horizon-class): a flex child shrinks to fit
     its content unless told to fill, so max-width alone never engages. */
  width: 100%;
  max-width: var(--pc-bp-max-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}
/* Shopify wraps app blocks in its own div — on flex-layout sections THAT wrapper
   is the flex child that shrinks to fit, so the widget's width:100% only fills an
   already-shrunk box. Widen the wrapper itself (the JS boot() does the same for
   any additional wrappers, for browsers without :has()). */
[id^="shopify-block-"]:has(> .pc-beautypedia),
[id^="shopify-block-"]:has(.pc-beautypedia) {
  width: 100%;
}
/* Horizon (3.x) "Page" sections put every block in a 42rem reading column
   (`.page-width-content` → --page-content-width: var(--normal-content-width)),
   so even a widened wrapper fills only ~670px. Span the section's full grid
   instead; the block's own Content width setting then takes over (Contained =
   max width inside the theme's page gutter, Full width = edge to edge, so the
   hero banner bleeds like on Impulse). Horizon-only class names: inert on
   Impulse (SG/MY/TH/PH). Found on the AU test store, 2026-10-27. */
.section.page-width-content:has(.pc-beautypedia) > .section-content-wrapper {
  grid-column: 1 / -1;
  padding-inline: var(--page-margin, 16px);
}
.section.page-width-content:has(.pc-beautypedia--full) > .section-content-wrapper {
  padding-inline: 0;
}
/* "Content width: Full width" block setting — fills the section */
.pc-beautypedia.pc-beautypedia--full {
  max-width: none;
}
/* No side gutters of our own — the theme's section padding (or the section's
   "Page" width setting on Horizon themes) provides them; adding ours too
   double-padded Impulse stores. If a full-bleed section on a small screen
   ever puts text against the glass, add a mobile-only padding guard here. */

/* 2 — Facet groups are stacked lists. Hammer specificity so a theme rule on
   a generic name (`.rating`, `.benefits`, …) can never re-lay-out a group:
   the group container is a block, each checkbox row is its own line. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .addfilter > div,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .accordion-content > div {
  display: block !important;
  gap: 0 !important;
}
.pc-beautypedia.pc-beautypedia.pc-beautypedia .addfilter label,
.pc-beautypedia.pc-beautypedia.pc-beautypedia .accordion-content label {
  display: flex !important;
  align-items: center;
  width: 100%;
}

/* 3 — Baseline button reset (was: the theme's global reset). Every real CTA
   in the widget (.beautypedia-submit, .analyze-button, .close-modal-button,
   .wrap_apply_btn button, .pc-bp-retry, …) restates its full chrome, so
   only the link-like triggers (.more-btn, .clear-filter, facet "More",
   the ratings-explainer link) change: they lose the UA/theme border and
   render as plain text again. */
.pc-beautypedia button {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* The "How we rate ingredients" hero trigger had no styling of its own and
   inherited whatever the theme gave <button> — pin it down as the text link
   it is on paulaschoice.com. */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .modal-ingredients-indicator {
  padding: 0;
  color: var(--pc-bp-link-color, #5d7e95);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--pc-bp-content-size, 14px);
  font-family: var(--pc-bp-content-family, inherit);
}

/*==========================================================================*\
  Standalone pages: Dictionary Details + Checker Result sections.
  Both reuse the modal/result skins wholesale; only what the page adds around
  them (title in flow, empty/not-found/error states) is styled here.
\*==========================================================================*/

/* The Title settings only targeted the dialog header; the in-flow page title
   needs its own hook (hammer specificity so the 38px legacy rule loses). */
.pc-beautypedia.pc-beautypedia.pc-beautypedia .pc-bp-detail-page .si-title {
  font-size: var(--pc-bp-title-size, 38px) !important;
  font-family: var(--pc-bp-title-family, inherit) !important;
}

.pc-beautypedia .pc-bp-detail-page .pc-bp-detail-breadcrumb {
  margin-bottom: 40px;
}

.pc-beautypedia .pc-bp-detail-notfound,
.pc-beautypedia .pc-bp-result-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 20px 80px;
  text-align: center;
}
.pc-beautypedia .pc-bp-detail-notfound h1,
.pc-beautypedia .pc-bp-result-empty h1 {
  font-size: var(--pc-bp-title-size, 24px);
  margin: 0 0 12px;
}
.pc-beautypedia .pc-bp-detail-notfound p,
.pc-beautypedia .pc-bp-result-empty p {
  margin: 0 0 24px;
}
/* Breadcrumbs render all-caps everywhere. The checker's crumb relied on the theme's
   .uppercase utility (an Impulse-only class — bare-Dawn gap) and on the locale string
   happening to be uppercase; own both here. Also used by the detail page's
   INGREDIENT DICTIONARY / SEARCH RESULTS crumb, whose strings are mixed-case. */
.pc-beautypedia .bbreadcrumbs,
.pc-beautypedia .uppercase {
  text-transform: uppercase;
}

/* Detail page: the shop-all button's breathing room normally comes from the
   products block above it — which the :empty rules collapse when an ingredient
   has no products — so give the button its own top margin. */
.pc-beautypedia .pc-bp-detail-page .si-container > .si-btn {
  margin-top: 32px;
}

/* .si-btn is display:block with a 320px max-width, so inside these centered
   states it needs auto margins to actually sit centered. */
.pc-beautypedia .pc-bp-detail-notfound .si-btn,
.pc-beautypedia .pc-bp-result-empty .si-btn {
  margin-left: auto;
  margin-right: auto;
}
.pc-beautypedia .pc-bp-result-empty .bbr-new-analysis-btn {
  display: inline-block;
}

/* Results page: fetch failed — same palette as .pc-bp-error, plus the retry
   button pc-beautypedia.js injects (chrome comes from .pc-bp-retry). */
.pc-beautypedia .pc-bp-result-error {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  color: rgb(170, 0, 105);
}