/**
 * -------------------------------------------
 * DoseIQ Calculator - Frontend Styles
 * -------------------------------------------
 *
 * Built from the site's own components so the calculator reads as part of
 * LivestockIQ, values resolving from the child theme's tokens in
 * bw-elementor-child/assets/css/base.css:
 *
 *   Options   the product page feature tabs: a mist track holding Roie
 *             uppercase pills, earth green when chosen
 *   Buttons   Roie uppercase, white on brand green, pill
 *   Fields    pill with an earth green hairline and green placeholder
 *   Result    the dose rate panel: earth green with white text and hairlines
 *   Type      League Spartan 400 headings, Made Tommy 300 body, 400 for
 *             emphasis (the site's <strong> is 400)
 *
 * Icons are Font Awesome 6 Pro (fa-regular, as the theme uses), loaded site
 * wide by the child theme rather than by this plugin.
 *
 * Mobile first. Everything is scoped under .diq-calculator.
 */


/**
 * Tokens
 * ------
 */

.diq-calculator {
  /* Colours */
  --diq-navy: var(--color-default, #001b48);
  --diq-green: var(--color-accent, #547f29);
  --diq-brand: var(--color-primary, #7aac35);
  --diq-mist: var(--color-secondary, #ebf3e1);
  --diq-white: var(--color-white, #ffffff);
  --diq-hairline: var(--color-navy-25, #ccd1da);
  --diq-red: var(--color-error, #b3261e);

  /* Type */
  --diq-font-body: var(--font-default, 'Made Tommy');
  --diq-font-display: var(--font-primary, 'League Spartan');
  --diq-font-label: var(--font-secondary, 'Roie');
  --diq-size-body: var(--font-size-default, 18px);
  --diq-size-sm: var(--font-size-sm, 16px);
  --diq-size-label: 14px;

  /* Geometry */
  --diq-radius-pill: var(--border-radius-max, 999px);
  --diq-radius: var(--border-radius-default, 15px);
  --diq-radius-card: var(--border-radius-lg, 30px);
  --diq-track-pad: 5px;
  --diq-gap: 5px;
  --diq-pad: 15px;
  --diq-label-col: 150px;

  /* Space either side of the hairline above the results and between result sections */
  --diq-section-space: 30px;

  /*
   * One width for every option pill from tablet up, so all of them match and
   * line up down the page. Four must fit across beside the label column
   * inside a group card (its padding and border included), so it never grows
   * past that.
   */
  --diq-pill-w: min(210px, calc((100cqi - 2 * var(--diq-pad) - 2px - var(--diq-label-col) - var(--diq-pad) - 2 * var(--diq-track-pad) - 3 * var(--diq-gap)) / 4));

  /* Controls: the site's tab and button height */
  --diq-control-height: 46px;

  /*
   * Option pills are fully round at half their height, and the mist track
   * around them adds its padding so the two curves stay concentric. Not 999px:
   * a track several rows tall would get huge round ends that cut into the
   * corner pills, and a wrapped pill would turn into an oval.
   */
  --diq-radius-option: calc(var(--diq-control-height) / 2);
  --diq-radius-track: calc(var(--diq-radius-option) + var(--diq-track-pad));

  --diq-stat-size: 44px;

  font-family: var(--diq-font-body);
  font-weight: 300;
  color: var(--diq-navy);
  container-type: inline-size;

  /*
   * With inline-size containment the calculator's own content width counts as
   * zero. Where a page builder sizes the shortcode's wrapper to fit its
   * content (Elementor's widget on a phone), the height was then measured as
   * if nearly zero wide, one word per line, leaving a huge gap before the
   * footer. Measure at the full screen width instead; the real width still
   * comes from the page.
   */
  contain-intrinsic-inline-size: 100vw;
}

@media (min-width: 768px) {
  .diq-calculator {
    --diq-size-label: 16px;
    --diq-pad: 25px;
    --diq-section-space: 40px;
  }
}

@media (min-width: 1024px) {
  .diq-calculator {
    --diq-stat-size: 64px;
  }
}

.diq-calculator *,
.diq-calculator *::before,
.diq-calculator *::after {
  box-sizing: border-box;
}

.diq-calculator [hidden] {
  display: none !important;
}

.diq-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/**
 * Steps
 * -----
 */

.diq-calculator__form {
  display: grid;
  gap: var(--space-xl, 50px);
}

.diq-calculator .diq-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* float lets a <legend> sit in the flow like any other heading */
.diq-calculator .diq-step__title {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  float: left;
  width: 100%;
  margin: 0 0 var(--space-md, 20px);
  padding: 0;
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h3, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--diq-navy);
}

/* Everything after the title, not just the next element: when the hint is
   hidden (Trucking date) the date field must still clear the float, or its
   box starts at the title and the calendar icon sits above the field */
.diq-step__title ~ * {
  clear: both;
}

/* Required marker. In a title it shares a span with the words, so it wraps with the last one */
.diq-required {
  margin-left: 2px;
  color: var(--diq-red);
}

/* The step number, set in the title's own type and coloured earth green */
.diq-step__number {
  flex: none;
  color: var(--diq-green);
}

/* Helper text under a title pulls the title's gap in, so they read as one */
.diq-calculator .diq-step__title:has(+ .diq-step__hint:not([hidden])) {
  margin-bottom: 6px;
}

.diq-calculator .diq-step__hint {
  margin: 0 0 var(--space-sm, 10px);
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.35;
}

/* A footnote under the options, e.g. what the organic asterisk means */
.diq-calculator .diq-step__hint--below {
  margin: var(--space-sm, 10px) 0 0;
}


/**
 * Options
 *
 * The product page feature tabs: a mist track, Roie uppercase pills in earth
 * green, filled when chosen. Real radio inputs underneath, visually hidden,
 * so keyboard and screen reader behaviour comes for free.
 */

.diq-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--diq-gap);
  padding: var(--diq-track-pad);
  background-color: var(--diq-mist);
  border-radius: var(--diq-radius-track);
}

/* Four species: one row from tablet up, two by two on a phone like the products */
.diq-options--species {
  --diq-cols: 4;
}

.diq-options--products {
  --diq-cols: 4;
}

.diq-options--mob {
  --diq-cols: 2;
}

/* From tablet up every track is only as wide as its fixed width pills */
@media (min-width: 768px) {
  .diq-calculator .diq-options {
    grid-template-columns: repeat(var(--diq-cols, 4), var(--diq-pill-w));
    width: max-content;
  }

  /* A product name is one word that can't wrap, so a product pill is never
     narrower than the longest name (ORGANICGUARD* on an upright iPad), all
     still the same width. The other rows keep the shared pill width. Never
     wider than the calculator, so a very long name can't scroll the page. */
  .diq-calculator .diq-options--products {
    grid-template-columns: repeat(var(--diq-cols, 4), minmax(var(--diq-pill-w), 1fr));
    max-width: 100%;
  }
}

.diq-option {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.diq-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* The organic asterisk in a product name, small and raised like a note mark */
.diq-asterisk {
  position: relative;
  top: -0.25em;
  margin-left: 0.05em;
  font-size: 0.75em;
  line-height: 0;
}

.diq-option__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--diq-control-height);
  padding: 8px 12px 6px;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--diq-green);
  background-color: transparent;
  border-radius: var(--diq-radius-option);
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out),
              color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-option:hover .diq-option__label {
  background-color: var(--diq-white);
}

.diq-option input:checked + .diq-option__label {
  color: var(--diq-white);
  background-color: var(--diq-green);
}

.diq-option input:focus-visible + .diq-option__label {
  outline: 2px solid var(--diq-navy);
  outline-offset: 1px;
}


/**
 * Groups
 * ------
 */

.diq-groups {
  display: grid;
  gap: var(--space-md, 20px);
  margin-bottom: var(--space-md, 20px);
}

.diq-group {
  display: grid;
  gap: var(--diq-pad);
  padding: var(--diq-pad);
  background-color: var(--diq-white);
  border: 1px solid var(--diq-hairline);
  border-radius: var(--diq-radius-card);
}

.diq-group--folded {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: var(--diq-mist);
  border-color: var(--diq-mist);
}

.diq-group__header {
  display: flex;
  align-items: center;
  gap: var(--diq-pad);
  min-height: 32px;
}

.diq-calculator .diq-group__title {
  margin: 0;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-green);
}

/**
 * Groups - Fold toggle
 *
 * The whole header is the button, so a folded group opens from a tap
 * anywhere on it rather than a small link.
 */

.diq-calculator .diq-group__toggle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--diq-pad);
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font-family: inherit;
  text-align: left;
  text-transform: none;
  color: var(--diq-navy);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.diq-calculator .diq-group__toggle:hover,
.diq-calculator .diq-group__toggle:focus {
  color: var(--diq-navy);
  background: none;
}

.diq-group__summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.diq-group__desc {
  font-size: var(--diq-size-body);
  font-weight: 400;
  line-height: 1.2;
}

.diq-group__meta {
  font-size: var(--diq-size-sm);
  font-weight: 300;
}

/* After the site's outline button */
.diq-group__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 7px;
  font-family: var(--diq-font-label);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--diq-green);
  border: 1px solid var(--diq-green);
  border-radius: var(--diq-radius-pill);
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out),
              color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-group__state i {
  font-size: 11px;
}

.diq-group__toggle:hover .diq-group__state,
.diq-group__toggle:focus-visible .diq-group__state {
  color: var(--diq-white);
  background-color: var(--diq-green);
}

.diq-group__toggle:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 4px;
  border-radius: var(--diq-radius);
}

/**
 * Groups - Note
 *
 * Explains why an earlier choice isn't selected, e.g. a class the new product
 * has no rate for. The choice itself is kept and returns when it applies.
 */

.diq-calculator .diq-group__note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 10px 15px;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.4;
  color: var(--diq-navy);
  background-color: var(--diq-mist);
  border-radius: var(--diq-radius);
}

.diq-group__note i {
  flex: none;
  color: var(--diq-green);
}

/**
 * Groups - Remove
 *
 * A red bin. Every state is set here because the theme paints any <button>
 * with a coloured fill on hover and focus.
 */

.diq-calculator .diq-group__remove,
.diq-calculator .diq-group__remove:hover,
.diq-calculator .diq-group__remove:focus {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px auto;
  padding: 0;
  color: var(--diq-red);
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-group__remove i {
  font-size: 18px;
}

.diq-calculator .diq-group__remove:hover,
.diq-calculator .diq-group__remove:focus-visible {
  background-color: color-mix(in srgb, var(--diq-red) 10%, transparent);
}

.diq-calculator .diq-group__remove:focus-visible {
  outline: 2px solid var(--diq-red);
  outline-offset: 0;
  box-shadow: none;
}

/**
 * Groups - Rows
 *
 * Each class of band, and the head count, is one row: label then options.
 * Labels start on the same line as the group title.
 */

.diq-calculator .diq-bands {
  display: grid;
  gap: var(--diq-pad);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.diq-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.diq-calculator .diq-row__label {
  margin: 0;
  padding: 0;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-green);
}

/**
 * On a phone every row stacks, label above. A one option track (Breeders,
 * Adults) and the head count are exactly one column of the two column tracks
 * wide, so they line up with the pills above them.
 */
@media (max-width: 767px) {
  .diq-row--single > .diq-options {
    grid-template-columns: 1fr;
  }

  .diq-row--single > .diq-options,
  .diq-calculator .diq-input.diq-input--head {
    width: calc(50% - var(--diq-gap) / 2 + var(--diq-track-pad));
  }
}

/* From tablet up every row is inline: a label column, then its options */
@media (min-width: 768px) {
  .diq-row,
  .diq-row--head,
  .diq-row--single {
    grid-template-columns: var(--diq-label-col) max-content;
    align-items: center;
    gap: var(--diq-pad);
  }

  /* Bands with no class label (horses) still start in the options column */
  .diq-row--full > .diq-options {
    grid-column: 2;
  }

  .diq-calculator .diq-row--single > .diq-options {
    grid-template-columns: repeat(var(--diq-cols, 1), var(--diq-pill-w));
  }

  /* As wide as a one option track, so it lines up with the pills above */
  .diq-calculator .diq-input.diq-input--head {
    width: calc(var(--diq-pill-w) + 2 * var(--diq-track-pad));
  }
}


/**
 * Inputs and buttons
 * ------------------
 */

.diq-calculator .diq-input {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  min-height: var(--diq-control-height);
  padding: 0 20px;
  margin: 0;
  font-family: var(--diq-font-body);
  font-size: max(16px, var(--diq-size-body)); /* 16px or more stops iOS zooming into the field */
  font-weight: 300;
  line-height: 1.2;
  color: var(--diq-navy);
  background-color: var(--diq-white);
  border: 1px solid var(--diq-green);
  border-radius: var(--diq-radius-pill);
  transition: border-color var(--transition-quick-ease, 150ms ease-in-out),
              box-shadow var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-calculator .diq-input:focus {
  outline: none;
  border-color: var(--diq-green);
  box-shadow: 0 0 0 3px var(--diq-mist);
}

/* No spinner arrows on the head count: they sit badly in a pill */
.diq-calculator .diq-input[type="number"] {
  -moz-appearance: textfield;
}

.diq-calculator .diq-input[type="number"]::-webkit-inner-spin-button,
.diq-calculator .diq-input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.diq-calculator .diq-input::placeholder {
  color: var(--diq-green);
  opacity: 1;
}

/**
 * Date picker
 *
 * With a mouse the field opens our own calendar (.diq-cal, below). On a touch
 * screen it stays a native date field, opening the phone's own picker: the
 * browser's small icon is stretched invisibly over the whole field so a tap
 * anywhere opens it.
 */

.diq-date {
  position: relative;
  display: block;
}

.diq-calculator .diq-input--date {
  position: relative;
  padding-right: 54px;
  text-align: left;
  cursor: pointer;
  color-scheme: light;
  accent-color: var(--diq-green);
}

.diq-date__icon {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 20px;
  color: var(--diq-green);
  transform: translateY(-50%);
  pointer-events: none;
}

.diq-calculator .diq-input--date::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

.diq-calculator .diq-input--date::-webkit-date-and-time-value {
  text-align: left;
}

.diq-calculator .diq-input--date::-webkit-datetime-edit {
  padding: 0;
  color: var(--diq-navy);
}

/* Firefox draws its own icon inside the field, so ours would be a second */
@supports (-moz-appearance: none) {
  .diq-calculator .diq-input--date[type="date"] {
    padding-right: 20px;
  }

  .diq-input--date[type="date"] + .diq-date__icon {
    display: none;
  }
}

/**
 * Calendar
 *
 * The site's palette and type: League Spartan month, Roie weekdays, Made
 * Tommy days, the chosen day filled earth green and today ringed in it.
 * Every button state is set here because the Elementor kit restyles any
 * <button> on hover and focus.
 */

.diq-cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 15px;
  background-color: var(--diq-white);
  border: 1px solid var(--diq-hairline);
  border-radius: var(--diq-radius);
  box-shadow: 0 12px 32px rgba(0, 27, 72, 0.16);
}

.diq-cal.is-above {
  top: auto;
  bottom: calc(100% + 8px);
}

.diq-cal__header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
}

.diq-cal__title {
  flex: 1;
  padding-left: 6px;
  font-family: var(--diq-font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--diq-navy);
}

.diq-cal__weekdays,
.diq-cal__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.diq-cal__weekdays {
  margin-bottom: 4px;
}

.diq-cal__weekdays span {
  font-family: var(--diq-font-label);
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  text-transform: uppercase;
  color: var(--diq-green);
}

/* Shared reset for every calendar button, in every state */
.diq-calculator .diq-cal .diq-cal__arrow,
.diq-calculator .diq-cal .diq-cal__day,
.diq-calculator .diq-cal .diq-cal__link,
.diq-calculator .diq-cal .diq-cal__arrow:focus,
.diq-calculator .diq-cal .diq-cal__day:focus,
.diq-calculator .diq-cal .diq-cal__link:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: var(--diq-font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
  color: var(--diq-navy);
  background-color: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out),
              color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-calculator .diq-cal .diq-cal__arrow,
.diq-calculator .diq-cal .diq-cal__arrow:focus {
  width: 36px;
  height: 36px;
  font-size: 14px;
  color: var(--diq-green);
  border-radius: 50%;
}

.diq-calculator .diq-cal .diq-cal__day,
.diq-calculator .diq-cal .diq-cal__day:focus {
  width: 100%;
  height: 40px;
  border-radius: 50%;
}

.diq-calculator .diq-cal .diq-cal__day.is-outside {
  color: var(--color-grey, #808da3);
}

.diq-calculator .diq-cal .diq-cal__day.is-today {
  font-weight: 400;
  color: var(--diq-green);
  border-color: var(--diq-green);
}

.diq-calculator .diq-cal .diq-cal__arrow:hover,
.diq-calculator .diq-cal .diq-cal__day:hover,
.diq-calculator .diq-cal .diq-cal__link:hover {
  color: var(--diq-green);
  background-color: var(--diq-mist);
  border-style: solid;
}

.diq-calculator .diq-cal .diq-cal__day.is-chosen,
.diq-calculator .diq-cal .diq-cal__day.is-chosen:hover,
.diq-calculator .diq-cal .diq-cal__day.is-chosen:focus {
  font-weight: 400;
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-color: var(--diq-green);
}

.diq-calculator .diq-cal button:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 1px;
}

.diq-cal__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-cal .diq-cal__link,
.diq-calculator .diq-cal .diq-cal__link:focus {
  min-height: 36px;
  padding: 0 14px;
  font-family: var(--diq-font-label);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--diq-green);
  border-radius: var(--diq-radius-pill);
}

/* A read only text field once our calendar is in use */
.diq-calculator .diq-input--date[readonly] {
  cursor: pointer;
}

/**
 * Buttons: the site's primary button, and its outline variant
 *
 * The Elementor kit gives every <button> a green fill and no border on hover
 * and focus. Each state below restates the border so the button never loses
 * its 1px edge and shifts, and plain :focus (after a click) keeps the resting
 * look.
 */

.diq-calculator .diq-btn,
.diq-calculator .diq-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--diq-control-height);
  padding: 0 35px;
  font-family: var(--diq-font-label);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--diq-white);
  background-color: var(--diq-brand);
  border: 1px solid var(--diq-brand);
  border-radius: var(--diq-radius-pill);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out),
              border-color var(--transition-quick-ease, 150ms ease-in-out),
              color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-calculator .diq-btn--outline,
.diq-calculator .diq-btn--outline:focus {
  color: var(--diq-green);
  background-color: transparent;
  border-color: var(--diq-green);
}

.diq-calculator .diq-btn:hover,
.diq-calculator .diq-btn:focus-visible {
  color: var(--diq-white);
  background-color: var(--diq-green);
  border: 1px solid var(--diq-green);
}

.diq-calculator .diq-btn:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 2px;
}

.diq-calculator .diq-btn i {
  margin-right: 10px;
  font-size: 18px;
}

/* Full width on a phone, where the thumb is */
@media (max-width: 767px) {
  .diq-calculator .diq-btn {
    width: 100%;
  }
}

/**
 * Date and Calculate share a row from tablet up
 */

.diq-finish {
  display: grid;
  gap: var(--space-lg, 30px);
}

@media (min-width: 768px) {
  .diq-finish {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md, 20px);
  }

  /* The date matches a two option track, Calculate a one option track */
  .diq-date {
    width: calc(2 * var(--diq-pill-w) + var(--diq-gap) + 2 * var(--diq-track-pad));
  }

  .diq-finish .diq-btn {
    min-width: calc(var(--diq-pill-w) + 2 * var(--diq-track-pad));
  }
}


/**
 * Message
 * -------
 */

.diq-message {
  margin: var(--space-md, 20px) 0 0;
  padding: 12px 20px;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.4;
  color: var(--diq-white);
  background-color: var(--diq-navy);
  border-radius: var(--diq-radius);
}


/**
 * Results
 * -------
 */

.diq-results:empty {
  display: none;
}

.diq-results {
  margin-top: var(--diq-section-space);
  padding-top: var(--diq-section-space);
  border-top: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-results__title {
  margin: 0 0 var(--space-md, 20px);
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h2, 34px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--diq-green);
}

/* Focused by the script on Calculate, for screen readers, so no ring */
.diq-calculator .diq-results__title:focus {
  outline: none;
}

/* Two columns on a wide screen: the figures, and what to do with them */
.diq-results__grid {
  display: grid;
  gap: var(--space-lg, 30px);
}

.diq-results__grid + .diq-results__grid {
  margin-top: var(--space-xl, 50px);
}

@media (min-width: 1024px) {
  .diq-results__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }

  /* The dose card with Good to know under it, Recommended application beside both */
  .diq-results__grid--top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "card apply"
      "know apply";
  }

  .diq-results__grid--top .diq-card {
    grid-area: card;
  }

  .diq-results__grid--top .diq-apply {
    grid-area: apply;
  }

  .diq-results__grid--top .diq-know {
    grid-area: know;
  }
}

.diq-calculator .diq-results__heading {
  margin: 0 0 var(--space-md, 20px);
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h3, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--diq-navy);
}

.diq-calculator .diq-results__basis {
  margin: var(--space-sm, 10px) 0 0;
  font-size: var(--diq-size-sm);
  font-weight: 300;
}

/*
 * Next steps: a tile per link, as many across as fit, widening to fill the
 * row when there are fewer. The whole tile is the link. Find a stockist is
 * the earth green one. On a narrow phone each is a row instead.
 */
.diq-calculator .diq-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two by two on a tablet, so four never leave one on its own; all in a row from desktop */
@media (min-width: 600px) {
  .diq-calculator .diq-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .diq-calculator .diq-next {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.diq-calculator .diq-next li {
  display: flex;
  margin: 0;
}

.diq-calculator .diq-next__card,
.diq-calculator .diq-next__card:hover,
.diq-calculator .diq-next__card:focus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 20px;
  color: var(--diq-navy);
  text-decoration: none;
  background-color: var(--diq-white);
  border: 1px solid var(--diq-hairline);
  border-radius: var(--diq-radius);
  transition: border-color var(--transition-quick-ease, 150ms ease-in-out),
              box-shadow var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-calculator .diq-next__card:hover {
  border-color: var(--diq-green);
  box-shadow: 0 6px 18px rgba(0, 27, 72, 0.08);
}

.diq-calculator .diq-next__card:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 2px;
}

.diq-next__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--diq-green);
  background-color: var(--diq-mist);
  border-radius: 50%;
}

.diq-next__text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

.diq-calculator .diq-next__title {
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h4, 20px);
  font-weight: 400;
  line-height: 1.2;
}

.diq-calculator .diq-next__line {
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.3;
}

/* Top right of the tile, clear of the icon */
.diq-next__arrow {
  position: absolute;
  top: 22px;
  right: 20px;
  flex: none;
  font-size: 16px;
  color: var(--diq-green);
  transition: transform var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-next__card:hover .diq-next__arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .diq-next__card:hover .diq-next__arrow {
    transform: none;
  }
}

@media (max-width: 599px) {
  .diq-calculator .diq-next__card,
  .diq-calculator .diq-next__card:hover,
  .diq-calculator .diq-next__card:focus {
    flex-direction: row;
    align-items: center;
    padding: 16px 18px;
  }

  .diq-next__arrow {
    position: static;
  }
}

/* Find a stockist: white on earth green (4.7:1) */
.diq-calculator .diq-next__card--stockist,
.diq-calculator .diq-next__card--stockist:hover,
.diq-calculator .diq-next__card--stockist:focus {
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-color: var(--diq-green);
}

.diq-next__card--stockist .diq-next__icon {
  color: var(--diq-white);
  background-color: rgba(255, 255, 255, 0.16);
}

.diq-next__card--stockist .diq-next__arrow {
  color: var(--diq-white);
}

/**
 * Results - Headline card
 *
 * The product page dose rate panel: earth green, white type, white hairlines.
 */

.diq-card {
  padding: var(--diq-pad);
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-radius: var(--diq-radius-card);
}

.diq-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--diq-pad);
  padding-bottom: var(--diq-pad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.diq-stat__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-mist);
}

/* A volume never breaks between number and unit */
.diq-stat__value {
  display: block;
  white-space: nowrap;
  font-family: var(--diq-font-display);
  font-size: var(--diq-stat-size);
  font-weight: 400;
  line-height: 1;
  color: var(--diq-white);
}

.diq-stat__note {
  display: block;
  margin-top: 6px;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  color: var(--diq-mist);
}

.diq-calculator .diq-breakdown {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diq-breakdown__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px var(--diq-pad);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.diq-breakdown__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.diq-breakdown__name {
  font-size: var(--diq-size-body);
  font-weight: 400;
  line-height: 1.2;
}

.diq-breakdown__calc {
  grid-row: 2;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  color: var(--diq-mist);
}

.diq-breakdown__total {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h3, 26px);
  font-weight: 400;
}

.diq-breakdown__then {
  display: block;
  margin-top: 2px;
  font-family: var(--diq-font-body);
  font-size: var(--diq-size-sm);
  font-weight: 300;
  text-align: right;
  color: var(--diq-mist);
}

/* How often to dose, from the product wording */
.diq-calculator .diq-card__dosing {
  margin: 0;
  padding: 12px 0;
  font-size: var(--diq-size-body);
  font-weight: 400;
  line-height: 1.3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.diq-calculator .diq-card__note {
  margin: var(--diq-pad) 0 0;
  padding: 10px 15px;
  font-size: var(--diq-size-sm);
  font-weight: 400;
  color: var(--diq-green);
  background-color: var(--diq-mist);
  border-radius: var(--diq-radius);
}

/**
 * Results - Info list
 *
 * Label and value pairs in a <dl> (the dates under When to dose), so each
 * line keeps its label as a real pair.
 */

.diq-calculator .diq-info__term {
  margin: 0 0 6px;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-green);
}

.diq-calculator .diq-info__desc {
  margin: 0;
  font-size: var(--diq-size-body);
  font-weight: 300;
  line-height: 1.35;
}

.diq-calculator .diq-info__desc--date {
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h4, 20px);
  font-weight: 400;
  line-height: 1.2;
}

/**
 * Results - Recommended application
 *
 * The most practical part of the result, so it gets the most weight: a white
 * panel with a brand green border beside the dose card, in three parts
 * (method, when to dose, a link to read more).
 */

.diq-apply {
  padding: 20px;
  background-color: var(--diq-white);
  border: 2px solid var(--diq-brand);
  border-radius: var(--diq-radius-card);
}

@media (min-width: 768px) {
  .diq-apply {
    padding: var(--space-lg, 30px);
  }
}

.diq-calculator .diq-apply__title {
  margin: 0 0 var(--space-md, 20px);
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h3, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--diq-green);
}

.diq-apply__block + .diq-apply__block {
  margin-top: var(--space-md, 20px);
  padding-top: var(--space-md, 20px);
  border-top: 1px solid var(--diq-hairline);
}

/*
 * The panel's parts (Method, When to dose, Other ways to apply) are headings
 * in the site's display type with a round icon, so they read differently
 * from the small uppercase labels used across the results
 */
.diq-calculator .diq-apply__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h4, 20px);
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  color: var(--diq-navy);
}

.diq-apply__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: var(--diq-green);
  background-color: var(--diq-mist);
  border-radius: 50%;
}

/* On the mist panel green falls under 4.5:1, so navy */
.diq-calculator .diq-know__title {
  margin: 0 0 10px;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-navy);
}

.diq-calculator .diq-apply strong,
.diq-calculator .diq-know strong {
  font-weight: 400;
}

/* One method; MagBoost can have two (loading, then regular) */
.diq-method + .diq-method {
  margin-top: var(--space-md, 20px);
  padding-top: var(--space-md, 20px);
  border-top: 1px dashed var(--diq-hairline);
}

.diq-calculator .diq-method__for {
  margin: 0 0 4px;
  font-size: var(--diq-size-sm);
  font-weight: 400;
  color: var(--diq-green);
}

/* The method's own name, a step below the Method heading */
.diq-calculator .diq-method__title {
  margin: 0 0 6px;
  font-family: var(--diq-font-body);
  font-size: var(--diq-size-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--diq-green);
}

.diq-calculator .diq-method__text {
  margin: 0;
  font-size: var(--diq-size-body);
  font-weight: 300;
  line-height: 1.4;
}

.diq-calculator .diq-method__text + .diq-method__text {
  margin-top: 8px;
}

/* Fill, Float, Finish, numbered in green rounds */
.diq-calculator .diq-method__steps {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: diq-step;
}

.diq-method__steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: var(--diq-size-body);
  font-weight: 300;
  line-height: 1.4;
  counter-increment: diq-step;
}

.diq-method__steps li::before {
  content: counter(diq-step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--diq-font-display);
  font-size: 16px;
  line-height: 1;
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-radius: 50%;
}

/* Small doses or hot weather, Tips, and how many DosingDrums */
.diq-calculator .diq-method__note {
  margin: 12px 0 0;
  padding: 10px 15px;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.4;
  background-color: var(--diq-mist);
  border-radius: var(--diq-radius);
}

.diq-calculator .diq-method__note + .diq-method__text,
.diq-calculator .diq-method__steps + .diq-method__text {
  margin-top: 12px;
}

.diq-calculator .diq-apply__dates {
  display: grid;
  gap: 12px;
  margin: 0;
}

.diq-calculator .diq-apply__dates + .diq-apply__lines {
  margin-top: 14px;
}

.diq-calculator .diq-apply__lines,
.diq-calculator .diq-know__lines {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 300;
  line-height: 1.4;
}

.diq-calculator .diq-apply__lines {
  font-size: var(--diq-size-body);
}

/* Other ways to apply: the guide's methods, after the ProDispenser link */
.diq-calculator .diq-apply__block--other {
  margin-top: var(--space-md, 20px);
  padding-top: var(--space-md, 20px);
  border-top: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-apply__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-md, 20px);
  font-weight: 400;
  color: var(--diq-green);
}

/* Plain links get the same focus ring as the buttons, whatever the theme does */
.diq-calculator .diq-apply__link:focus-visible,
.diq-calculator .diq-guide-links__link:focus-visible,
.diq-calculator .diq-guide__text a:focus-visible,
.diq-calculator .diq-footnote a:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/**
 * Results - Good to know
 *
 * Supporting information only, so a quieter mist panel under the dose card.
 */

.diq-know {
  padding: var(--diq-pad) 20px;
  background-color: var(--diq-mist);
  border-radius: var(--diq-radius-card);
}

.diq-calculator .diq-know__lines {
  font-size: var(--diq-size-sm);
}

/**
 * Results - Drum guide
 *
 * A table to compare drum sizes. The per head columns are plain; the two
 * columns for the whole herd or flock are earth green like the dose card.
 * On a phone each drum becomes a card of label and value pairs, its green
 * figures at the foot.
 */

.diq-results__grid + .diq-results__block,
.diq-results__block + .diq-results__block {
  margin-top: var(--diq-section-space);
  padding-top: var(--diq-section-space);
  border-top: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--diq-size-body);
  line-height: 1.3;
}

.diq-calculator .diq-table th,
.diq-calculator .diq-table td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-table thead th {
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-green);
}

/* Inline after the heading, e.g. "12-month cost per head (9 doses)" */
.diq-calculator .diq-table__sub {
  font-family: var(--diq-font-body);
  font-size: 13px;
  font-weight: 300;
  text-transform: none;
}

.diq-calculator .diq-table tbody th {
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h4, 20px);
  font-weight: 400;
  white-space: nowrap;
  color: var(--diq-navy);
}

.diq-calculator .diq-table td {
  font-weight: 300;
}

.diq-table__value {
  display: block;
}

/* A mixed mob: each group's name and figure on a line of its own */
.diq-table__group {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.diq-table__group + .diq-table__group {
  margin-top: 4px;
}

.diq-table__group-name {
  font-size: var(--diq-size-sm);
}

/* The name wraps first; a long value ("2 drums for the loading dose") only
   when it must */
.diq-table__group-value {
  flex: 0 1 auto;
  text-align: right;
}

/* The heading row, with Show cost by group on the right for a mixed mob */
.diq-drums__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 10px) var(--space-md, 20px);
  margin-bottom: var(--space-md, 20px);
}

.diq-calculator .diq-drums__head .diq-results__heading {
  margin: 0;
}

/* After the site's outline button, as the group Edit / Done. Every state is
   set because the Elementor kit restyles any <button> on hover and focus.
   Hidden for now, so the cost column shows the whole mob only: set display
   back to inline-flex to bring Show cost by group back. */
.diq-calculator .diq-drums__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 8px 14px 7px;
  font-family: var(--diq-font-label);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--diq-green);
  background: none;
  border: 1px solid var(--diq-green);
  border-radius: var(--diq-radius-pill);
  cursor: pointer;
  transition: background-color var(--transition-quick-ease, 150ms ease-in-out),
              color var(--transition-quick-ease, 150ms ease-in-out);
}

.diq-calculator .diq-drums__toggle:hover,
.diq-calculator .diq-drums__toggle:focus-visible {
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-color: var(--diq-green);
}

.diq-calculator .diq-drums__toggle:focus {
  outline: none;
}

.diq-calculator .diq-drums__toggle:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 3px;
}

.diq-drums__toggle i {
  font-size: 11px;
}

/* Closed, the cost column shows just the whole mob's figure, as for one mob */
.diq-drums:not(.is-open) .is-mob .diq-table__group:not(.diq-table__group--whole),
.diq-drums:not(.is-open) .is-mob .diq-table__group--whole .diq-table__group-name {
  display: none;
}

.diq-drums:not(.is-open) .is-mob .diq-table__group--whole {
  display: block;
}

/* In the cost column the whole mob's line leads, its groups lighter below */
.diq-calculator .diq-table .is-mob .diq-table__group {
  font-weight: 300;
}

.diq-calculator .diq-table .is-mob .diq-table__group--whole {
  font-weight: 400;
}

.diq-table__group--whole .diq-table__group-name {
  white-space: nowrap;
}

.diq-calculator .diq-table .is-mob {
  font-weight: 400;
  color: var(--diq-white);
  background-color: var(--diq-green);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* White, not mist: mist on earth green is under 4.5:1 at this size */
.diq-calculator .diq-table thead .is-mob {
  color: var(--diq-white);
}

/*
 * Desktop: a bordered table with rounded outer corners. The left corners are
 * the Drum column's, the right ones the green block's (always the last two
 * columns), whose outer edges are green so it reads as one block. Desktop
 * only: on a phone each drum is a card, and these rules are more specific
 * than the card styles.
 */
@media (min-width: 768px) {
  .diq-calculator .diq-table th,
  .diq-calculator .diq-table td {
    border-right: 1px solid var(--diq-hairline);
  }

  .diq-calculator .diq-table thead th {
    border-top: 1px solid var(--diq-hairline);
  }

  .diq-calculator .diq-table tr > :first-child {
    border-left: 1px solid var(--diq-hairline);
  }

  .diq-calculator .diq-table .is-mob {
    border-right-color: rgba(255, 255, 255, 0.4);
  }

  .diq-calculator .diq-table thead .is-mob {
    border-top-color: var(--diq-green);
  }

  .diq-calculator .diq-table tr > .is-mob:last-child {
    border-right-color: var(--diq-green);
  }

  .diq-calculator .diq-table tbody tr:last-child .is-mob {
    border-bottom-color: var(--diq-green);
  }

  .diq-calculator .diq-table thead th:first-child {
    border-top-left-radius: var(--diq-radius);
  }

  .diq-calculator .diq-table thead .is-mob:last-child {
    border-top-right-radius: var(--diq-radius);
  }

  .diq-calculator .diq-table tbody tr:last-child > :first-child {
    border-bottom-left-radius: var(--diq-radius);
  }

  .diq-calculator .diq-table tbody tr:last-child .is-mob:last-child {
    border-bottom-right-radius: var(--diq-radius);
  }

  /* A mixed mob: a hairline between the groups' prices */
  .diq-table__group + .diq-table__group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--diq-hairline);
  }

  .diq-calculator .diq-table .is-mob .diq-table__group + .diq-table__group {
    border-top-color: rgba(255, 255, 255, 0.4);
  }

  .diq-calculator .diq-table .is-mob .diq-table__group--whole + .diq-table__group {
    border-top-color: rgba(255, 255, 255, 0.8);
  }

  /* The cost cells have the whole mob's line on top of the groups', so
     the cells with group lines sit at the foot: each group then reads
     straight across the row */
  .diq-calculator .diq-table td:has(.diq-table__group) {
    vertical-align: bottom;
  }

  /* Closed, the green cells hold one figure: centred, as for one mob */
  .diq-calculator .diq-drums:not(.is-open) .diq-table td.is-mob {
    vertical-align: middle;
  }
}

@media (max-width: 767px) {
  .diq-calculator .diq-table,
  .diq-calculator .diq-table tbody,
  .diq-calculator .diq-table tr,
  .diq-calculator .diq-table th,
  .diq-calculator .diq-table td {
    display: block;
  }

  /* The column headings live on as each value's label */
  .diq-calculator .diq-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .diq-calculator .diq-table tbody {
    display: grid;
    gap: 10px;
  }

  .diq-calculator .diq-table tr {
    overflow: hidden;
    border: 1px solid var(--diq-hairline);
    border-radius: var(--diq-radius);
  }

  .diq-calculator .diq-table tbody th {
    padding-bottom: 8px;
    border-bottom: 0;
  }

  .diq-calculator .diq-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 15px;
    border-bottom: 0;
  }

  .diq-calculator .diq-table td::before {
    content: attr(data-label);
    flex: 1;
    font-size: var(--diq-size-sm);
    font-weight: 300;
    text-wrap: balance; /* a long label wraps to even lines, not one word on the last */
  }

  .diq-table__value {
    text-align: right;
  }

  /* A mixed mob's lines go under their label */
  .diq-calculator .diq-table td:has(.diq-table__group) {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .diq-calculator .diq-table td:has(.diq-table__group) .diq-table__value {
    text-align: left;
  }

  /* Closed, a green row is label and figure side by side, as for one mob */
  .diq-calculator .diq-drums:not(.is-open) .diq-table td.is-mob {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .diq-calculator .diq-drums:not(.is-open) .diq-table td.is-mob .diq-table__value {
    text-align: right;
  }

  .diq-calculator .diq-table td.is-mob::before {
    color: var(--diq-white);
  }

  .diq-calculator .diq-table td.is-mob:nth-last-child(2) {
    padding-top: 12px;
  }

  .diq-calculator .diq-table td.is-mob:last-child {
    padding-bottom: 12px;
  }
}

/**
 * Results - You might also need
 *
 * A card per suggestion, two across on a wide screen when a mixed mob gets
 * two. The year-round suggestion lists three products, so it takes the full
 * width, one row per product.
 */

.diq-suggest {
  display: grid;
  gap: var(--space-md, 20px);
}

@media (min-width: 1024px) {
  .diq-suggest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diq-suggest__card--list {
    grid-column: 1 / -1;
  }
}

/* Two cards side by side stretch to the same height; the buttons sit at the
   foot of each, so they line up however long each card's line is */
.diq-suggest__card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--diq-white);
  border: 1px solid var(--diq-hairline);
  border-radius: var(--diq-radius-card);
}

.diq-suggest__card > .diq-suggest__actions {
  margin-top: auto;
}

@media (min-width: 768px) {
  .diq-suggest__card {
    padding: var(--space-lg, 30px);
  }
}

/* With the product page's featured image: on a tablet or desktop the image
   runs down the left of the card, the wording and buttons to its right, the
   buttons at the foot so they line up with the card beside it. On a phone
   the image sits centred between the "For your …" line and the product
   name. Product shots are shown whole, never cropped. */
.diq-suggest__text {
  min-width: 0;
}

.diq-suggest__media {
  display: block;
  margin: 0 0 var(--space-md, 20px);
}

.diq-calculator .diq-suggest__image {
  display: block;
  width: 100%;
  max-width: none;
  height: 180px;
  object-fit: contain;
}

/* On a phone the "For your …" line comes first, above the image: the
   wording's box steps aside so the line can move up on its own */
@media (max-width: 767px) {
  .diq-suggest__card--image .diq-suggest__text {
    display: contents;
  }

  .diq-suggest__card--image .diq-suggest__for {
    order: -1;
  }
}

@media (min-width: 768px) {
  .diq-suggest__card--image {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--space-lg, 30px);
  }

  /* Beside the image the column is too narrow for both buttons in a row,
     so they stack, one width */
  .diq-suggest__card--image > .diq-suggest__actions {
    grid-column: 2;
    display: grid;
    justify-content: start;
  }

  /* As tall as the card: height 0 keeps the image out of the row sizing,
     so the wording and buttons set the height and the image fills it */
  .diq-suggest__media {
    grid-row: 1 / -1;
    width: 160px;
    height: 0;
    min-height: 100%;
    margin: 0;
  }

  .diq-calculator .diq-suggest__image {
    height: 100%;
  }
}

.diq-calculator .diq-suggest__for {
  margin: 0 0 10px;
  font-family: var(--diq-font-label);
  font-size: var(--diq-size-label);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--diq-green);
}

.diq-calculator .diq-suggest__name {
  margin: 0 0 6px;
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h3, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--diq-navy);
}

.diq-calculator .diq-suggest__line {
  margin: 0 0 var(--space-md, 20px);
  font-size: var(--diq-size-body);
  font-weight: 300;
  line-height: 1.4;
}

.diq-suggest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Narrower buttons so both fit side by side in a half width card */
.diq-calculator .diq-suggest__actions .diq-btn {
  padding: 0 20px;
}

.diq-calculator .diq-suggest__products {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diq-suggest__products li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding: 15px 0;
  border-top: 1px solid var(--diq-hairline);
}

.diq-suggest__products li:last-child {
  padding-bottom: 0;
}

.diq-calculator .diq-suggest__products .diq-suggest__name {
  margin: 0;
  font-size: var(--font-size-h4, 20px);
}

/* A list row's image and name stay together, apart from the buttons */
.diq-suggest__product {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* The product name, and the year-round card's image and name, link to the
   product's page: the name's own colour, underlined on hover */
.diq-calculator .diq-suggest__link,
.diq-calculator .diq-suggest__link:hover,
.diq-calculator .diq-suggest__link:focus {
  color: inherit;
  text-decoration: none;
}

.diq-calculator .diq-suggest__link:hover .diq-suggest__name,
.diq-calculator .diq-suggest__name .diq-suggest__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.diq-calculator .diq-suggest__link:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.diq-calculator .diq-suggest__thumb {
  display: block;
  flex: 0 0 64px;
  width: 64px;
  max-width: none;
  height: 64px;
  object-fit: contain;
}

.diq-calculator .diq-suggest__note {
  margin: var(--space-md, 20px) 0 0;
  font-size: var(--diq-size-sm);
  font-weight: 300;
  line-height: 1.4;
}

/* Above the buttons on a single product card */
.diq-calculator .diq-suggest__line + .diq-suggest__note {
  margin: calc(-1 * var(--space-sm, 10px)) 0 var(--space-md, 20px);
}

/* On a phone the buttons stack full width, so the row does too */
@media (max-width: 767px) {
  .diq-suggest__actions {
    width: 100%;
  }
}

/**
 * Results - Application guide
 *
 * Written by LivestockIQ in WP Admin. Each method is a white panel that folds
 * open on its own, like the old calculator's accordions.
 */

.diq-calculator .diq-guide-links {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diq-calculator .diq-guide-links li {
  margin: 0;
}

.diq-calculator .diq-guide-links__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--diq-green);
  text-decoration: none;
}

.diq-calculator .diq-guide-links__link:hover,
.diq-calculator .diq-guide-links__link:focus {
  color: var(--diq-navy);
  text-decoration: underline;
}

.diq-guide-links__link i {
  font-size: 0.8em;
}

.diq-guide {
  margin-top: var(--space-xl, 50px);
}

.diq-calculator .diq-guide__draft {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-md, 20px);
  padding: 10px 15px;
  font-size: var(--diq-size-sm);
  font-weight: 400;
  color: var(--diq-navy);
  border: 1px dashed var(--diq-navy);
  border-radius: var(--diq-radius);
}

.diq-guide__section + .diq-guide__section {
  margin-top: var(--space-lg, 30px);
}

.diq-calculator .diq-guide__heading {
  margin: 0 0 var(--space-sm, 10px);
  font-family: var(--diq-font-display);
  font-size: var(--font-size-h4, 20px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--diq-green);
}

.diq-guide__methods {
  display: grid;
  gap: 10px;
  margin-top: var(--diq-pad);
}

.diq-guide__method {
  background-color: var(--diq-white);
  border: 1px solid var(--diq-hairline);
  border-radius: var(--diq-radius);
}

.diq-guide__method[open] {
  border-color: var(--diq-green);
}

.diq-guide__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--diq-pad);
  padding: 14px 20px;
  font-size: var(--diq-size-body);
  font-weight: 400;
  line-height: 1.3;
  color: var(--diq-navy);
  list-style: none;
  cursor: pointer;
}

.diq-guide__summary::-webkit-details-marker {
  display: none;
}

.diq-guide__summary:focus-visible {
  outline: 2px solid var(--diq-navy);
  outline-offset: 2px;
  border-radius: var(--diq-radius);
}

.diq-guide__summary i {
  color: var(--diq-green);
  transition: transform 0.2s ease;
}

.diq-guide__method[open] .diq-guide__summary i {
  transform: rotate(180deg);
}

.diq-guide__method .diq-guide__text {
  padding: 0 20px 18px;
}

.diq-guide__text {
  font-size: var(--diq-size-body);
  font-weight: 300;
  line-height: 1.5;
}

.diq-calculator .diq-guide__text p,
.diq-calculator .diq-guide__text ul,
.diq-calculator .diq-guide__text ol {
  margin: 0 0 12px;
}

.diq-calculator .diq-guide__text ul,
.diq-calculator .diq-guide__text ol {
  padding-left: 20px;
}

.diq-calculator .diq-guide__text > :last-child {
  margin-bottom: 0;
}

.diq-guide__text strong {
  font-weight: 600;
}

.diq-guide__text a {
  font-weight: 400;
  color: var(--diq-green);
}

/**
 * Footnote
 */

.diq-footnote {
  margin-top: var(--space-xl, 50px);
  padding-top: var(--space-md, 20px);
  font-size: var(--diq-size-sm);
  font-weight: 300;
  border-top: 1px solid var(--diq-hairline);
}

.diq-calculator .diq-footnote p {
  margin: 0 0 4px;
}

.diq-footnote a {
  font-weight: 400;
  color: var(--diq-green);
}