.data-bars {
    background: #ffffff88;
    display: flex;
    flex-direction: column;
    margin-top: .25rem;
    margin-bottom: -.25rem;
  }

  .databar-no-margin .data-bars {
    margin: 1rem -1rem -1rem;
    padding: .5rem 1rem .5rem;
  }

  .unit-ad:not(.pointer) .data-bar:hover {
    background: #f4f4f444;
    cursor: pointer;
  }

  .data-bar:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 0;
    font-size: 0.7rem;

    .id {
      overflow-wrap: anywhere;
    }

    .spec {
      align-self: center;
      justify-self: center;
      background: #e82;
      border-top: 1px solid #ee882244;
      border-right: 1px solid #a05c23;
      border-bottom: 1px solid #a05c23;
      border-left: 1px solid #ee882244;
      color: #fff;
      font: 700 10px sans-serif;
      padding: 0 2px;
      word-break: normal;
    }

    .btu {
      font-weight: bold;
      text-align: right;

      &:after {
        content: " BTU's";
      }
      
      &:empty {
        display: none;
      }
    }

    .pint {
      font-weight: bold;
      text-align: right;

      &:after {
        content: " PINT";
      }
      
      &:empty {
        display: none;
      }
    }

    .v {
      text-align: right;
    }

    .type {
      font-size: 20px;
      text-transform: uppercase;

      &.long-unit-type {
        font-size: 14px;
      }
    }

    .seer {
      display: flex;
      flex-direction: column;
      color: #26951f;
      font-weight: bold;

      &:before {
        content: "SEER";
        font-size: 0.5rem;
      }
    }

    .price {
      font-size: 1rem;
      font-weight: bold;
      color: red;
      justify-self: flex-end;
      text-align: right;
    }
  }

  @media (min-width:800px) {
    .data-bar:not([hidden]) {
      display: grid;
      grid-template-columns: 1.5fr 0 3fr 1fr 4fr 2fr;
      padding: 0.25rem 0;
      font-size: 1rem;
      gap: 1rem;

      .id {
        font-size: 0.7rem;
      }

      .v {
        font-size: 1.25rem;
      }

      .price {
        font-size: 1.5rem;
      }

    }
  }

  .auto-ad .copy .data-bar {
    grid-template-columns: 1fr 1fr 1fr 1fr;

    .id {
      display: none;
    }

    .spec {
      display: none;
    }

    .type {
      font-size: 16px;

      &.long-unit-type {
        font-size: 14px;
      }
    }
  }


  .data-bar.roomac .seer:before {
    content: "CEER";
  }

  .rcc .data-bar .seer {
    align-items: center;

    &:before {
      content: "Rated Cooling Current";
      width: 5rem;
    }
  }

  .eer .data-bar .seer:before {
    content: "EER";
  }

  .eev .data-bar .seer:before {
    content: "EEV";
  }

  .data-bars .data-bar:not([hidden])+.data-bar:not([hidden]) {
    border-top: 1px #eee solid;
  }

  /* Mobile-specific data-bar styles */
  @media (max-width: 800px) {

    /* Data bar mobile styling - force type and id to their own lines */
    .data-bar:not([hidden]) {
      flex-wrap: wrap !important;
      gap: 0.5rem !important;
      padding: 0.5rem !important;
    }

    /* Force type and id spans to take full width on mobile */
    .data-bar:not([hidden])>span.type,
    .data-bar:not([hidden])>span.id {
      flex-basis: 100% !important;
      width: 100% !important;
      text-align: center !important;
    }

    /* Other spans stay inline */
    .data-bar:not([hidden])>span:not(.type):not(.id) {
      flex: 0 0 auto !important;
    }
  }