@layer components {
  .product-offers {
    position: relative;

    border-color: var(--color-blue) !important;

    & .offers-heading {
      color: var(--color-light);
      font-size: var(--size-0);
      background-color: var(--color-blue);
      padding: var(--size-2) var(--size-4);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--size-2);
      position: absolute;
      top: -11px;
      left: 13px;

      &::after {
        content: '';
        position: absolute;
        top: 0px;
        left: -14px;
        width: 0; 
        height: 0; 
        border-left: 14px solid transparent;
        border-right: 0px solid transparent;
        
        border-bottom: 10px solid #000f40;
      }
    }

    :is(ul) {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      padding: 0;
      margin: var(--size-6) 0 0 0;
      list-style-type: none;
      gap: var(--size-3);

      :is(li) p {
        margin: 0;
        word-break: break-word;
      }
    }
  }
}