.tools-b {
  max-width: 900px;
}

.tools-b__intro {
  max-width: 720px;
  color: #3E4C59;
  margin-bottom: 34px;
}

.tools-b__intro p {
  margin: 0 0 14px;
}

/* ---------- index grid ---------- */

.tools-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tools-grid li {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 320px;
  -ms-flex: 1 1 320px;
  flex: 1 1 320px;
  margin: 0;
}

.tools-grid a {
  display: block;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid #CBD2D9;
  border-radius: 12px;
  color: #171F26;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.tools-grid a:hover,
.tools-grid a:focus-visible {
  border-color: #171F26;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* ---------- calculator ---------- */

.calc {
  border: 1px solid #CBD2D9;
  border-radius: 12px;
  padding: 26px;
  margin-bottom: 40px;
  background-color: #FFFFFF;
}

.calc__fields {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.calc__field {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 200px;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
}

.calc__field[hidden] {
  display: none;
}

.calc__field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #3E4C59;
  margin-bottom: 6px;
}

.calc__field input,
.calc__field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #CBD2D9;
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
  color: #171F26;
  background-color: #FFFFFF;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.calc__field select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2352606D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.calc__field input:focus,
.calc__field select:focus {
  outline: 2px solid #171F26;
  outline-offset: 1px;
  border-color: #171F26;
}

.calc__hint {
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: #7B8794;
  margin-top: 5px;
}

.calc__results {
  background-color: #F6F5F3;
  border-radius: 8px;
  padding: 20px 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px 34px;
}

.calc__result {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 130px;
  -ms-flex: 1 1 130px;
  flex: 1 1 130px;
}

.calc__result-label {
  font-size: 13px;
  line-height: 18px;
  color: #52606D;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.calc__result-value {
  font-size: 26px;
  line-height: 32px;
  font-weight: bold;
  color: #171F26;
  font-variant-numeric: tabular-nums;
}

.calc__result--primary .calc__result-value {
  color: #171F26;
  font-size: 32px;
  line-height: 38px;
}

.calc__actions {
  margin-top: 18px;
}

.calc__reset {
  background: none;
  border: none;
  padding: 0;
  color: #52606D;
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calc__reset:hover,
.calc__reset:focus-visible {
  color: #171F26;
}

/* ---------- supporting copy ---------- */

.tools-b__section {
  max-width: 760px;
  margin-bottom: 36px;
}

.tools-b__section h2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
  margin: 0 0 14px;
  color: #171F26;
}

.tools-b__section h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 20px 0 8px;
  color: #171F26;
}

.tools-b__section p {
  margin: 0 0 14px;
  color: #3E4C59;
}

.tools-b__cta {
  border: 1px solid #CBD2D9;
  border-radius: 12px;
  padding: 24px 26px;
  max-width: 760px;
  margin-bottom: 40px;
}

.tools-b__cta h2 {
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 10px;
  color: #171F26;
}

.tools-b__cta p {
  margin: 0 0 16px;
  color: #3E4C59;
}

.tools-b__other {
  max-width: 760px;
}

.tools-b__other h2 {
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 14px;
}

@media only screen and (max-width: 575px) {
  .calc {
    padding: 20px;
  }

  .calc__result-value {
    font-size: 22px;
    line-height: 28px;
  }

  .calc__result--primary .calc__result-value {
    font-size: 26px;
    line-height: 32px;
  }
}

/* Back link, shared visual with the glossary pages. Duplicated here rather than
   pulling in confectionery-terms-details.css so the tools bundle stays self-contained. */
.page-back-b {
  color: #323F4B;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px;
}

.page-back-b i {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.79985 7.00011L8.69985 2.10011C9.08645 1.71351 9.08645 1.08671 8.69985 0.700106C8.31325 0.313506 7.68645 0.313506 7.29985 0.700106L0.706956 7.293C0.316431 7.68352 0.316431 8.31669 0.706956 8.70721L7.29985 15.3001C7.68645 15.6867 8.31325 15.6867 8.69985 15.3001C9.08645 14.9135 9.08645 14.2867 8.69985 13.9001L3.79985 9.00011H15.9998C16.5521 9.00011 16.9998 8.55239 16.9998 8.00011C16.9998 7.44782 16.5521 7.00011 15.9998 7.00011H3.79985Z' fill='%2352606D'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
}

.page-back-b i a {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

.page-back-b i:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.79985 7.00011L8.69985 2.10011C9.08645 1.71351 9.08645 1.08671 8.69985 0.700106C8.31325 0.313506 7.68645 0.313506 7.29985 0.700106L0.706956 7.293C0.316431 7.68352 0.316431 8.31669 0.706956 8.70721L7.29985 15.3001C7.68645 15.6867 8.31325 15.6867 8.69985 15.3001C9.08645 14.9135 9.08645 14.2867 8.69985 13.9001L3.79985 9.00011H15.9998C16.5521 9.00011 16.9998 8.55239 16.9998 8.00011C16.9998 7.44782 16.5521 7.00011 15.9998 7.00011H3.79985Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
  background-color: #171F26;
}