Similar Tasting Products Styling

SASS

    .lttt{
        &__container{}
        &__separator{}
        &__product{
            &--inner{}
            &--details{}
            &--price{}
            .product-detail{
                &--name{
                    &:focus,
                    &:active,
                    &:hover {}
                }

                &--link{
                    &:focus,
                    &:active,
                    &:hover {}
                }
            }
        }
        &__prefeabli{
            &--logomark{
                 g.logomark {
                 fill: #HEX;
                .logomark-p{ fill:#HEX }
                .logomark-colon{ fill:#HEX }
                .logomark-ring{ fill:#HEX }
                .logomark-preferabli-letters{ fill:#HEX }
                }
            }
            &--wordmark{
                g.wordmark {
                .wordmark-preferabli{ fill:#HEX }
                .wordmark-colon{ fill:#HEX }
                }
            }
        }
        &__poweredby{
            &--logomark{
                 g.logomark {
                 fill: #HEX;
                .logomark-p{ fill:#HEX }
                .logomark-colon{ fill:#HEX }
                .logomark-ring{ fill:#HEX }
                .logomark-preferabli-letters{ fill:#HEX }
                }
            }
            &--wordmark{
                g.wordmark {
                 fill: #HEX;
                .wordmark-preferabli{ fill:#HEX }
                .wordmark-colon{ fill:#HEX }
                .wordmark-poweredby{ fill:#HEX }
                }
            }
        }
    }

CSS

    .lttt__container {} // outer wrapper for LTTT
    .lttt__separator {} // top and bottom LTTT separator
    .lttt__product {} // outer wrapper for product
    .lttt__product--inner {}  // inner wrapper for product to change overall look
    .lttt__product--details {}  // wrapper for the name|price|description
    .lttt__product .product-detail {} // name and price text
    .lttt__product .product-detail--name {} // product name (link default state)
    .lttt__product .product-detail--name:focus,
    .lttt__product .product-detail--name:active, 
    .lttt__product .product-detail--name:hover {} // product name
    .lttt__product .product-detail--price {}  // product price

The main stylesheet has the following properties assigned as default:

    .lttt__separator{
        margin: 16px 0;
        border:1px solid #979c9e;
    }

You can override these styles in the display options as the following below.

var stp = $(%DIV_ELEMENT%).preferabliSTP({
  ...configuration_settings,
  display: {
      separator: {
          show: 'top | bottom | both',
          style: {
              border: '1px solid #000', // applies to both separators
              borderTop: '1px solid #000', // applies to top separator, if show: 'both'
              borderBottom: '1px solid #000', // applies to bottom separator, if show: 'both'
              spacing: 20, // Numeric
              spacingTop: 16, //Numeric
              spacingBottom: 16, //Numeric
          }
      },
      layout: 'row | column | list', // default: 'row'
      logo_placement: 'top | bottom', // default: 'top'
      logo_option: 1, // Numeric
  }
});