/* Button-Selektoren für OBS-Plugins V 1.1:
  - Ersetze den Standard-Selektor "body" durch die benötigten Button-Selektoren.
  - Für verschiedene Buttons kannst du den Variablenblock kopieren und den jeweiligen Selektoren zuweisen.
  - Kopiere den Code in den WordPress Composer oder in die CSS-Datei deines Child-Themes.
*/

/* Primary Button */
.obs-product-buy-button.obs-button-active a,
.obs-product-buy-button.obs-button-disabled a,
#obs-cart button#obs-cart-confirm-order{
    /* button - active */
    --obs-main-button-active-padding: 11px 21px;
    --obs-main-button-active-border-radius: 20px;
    --obs-main-button-active-text-decoration: none;
    --obs-main-button-active-text-align: center;
    --obs-main-button-active-text-transform: none;
    --obs-main-button-active-letter-spacing: normal;
    --obs-main-button-active-line-height: 1;
    --obs-main-button-active-font-weight: 400;
    --obs-main-button-active-font-size: 16px;
    --obs-main-button-active-color: white;
    --obs-main-button-active-border: 1px solid transparent;
    --obs-main-button-active-background-color: #53b732;
    --obs-main-button-active-width: 100%;
    /* button - active - hover */
    --obs-main-button-active-hover-color: black;
    --obs-main-button-active-hover-border: 1px solid #d0d0d0;
    --obs-main-button-active-hover-text-decoration: none;
    --obs-main-button-active-hover-text-transform: none;
    --obs-main-button-active-hover-background-color: #d0d0d0;
    /* button - disable */
    --obs-main-button-disabled-padding: 11px 21px;
    --obs-main-button-disabled-border-radius: 20px;
    --obs-main-button-disabled-text-decoration: none;
    --obs-main-button-disabled-text-align: center;
    --obs-main-button-disabled-text-transform: none;
    --obs-main-button-disabled-letter-spacing: normal;
    --obs-main-button-disabled-line-height: 1;
    --obs-main-button-disabled-font-weight: 400;
    --obs-main-button-disabled-font-size: 16px;
    --obs-main-button-disabled-color: #d0d0d0;
    --obs-main-button-disabled-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-background-color: white;
    --obs-main-button-disabled-width: 100%;
    /* button - disable - hover */
    --obs-main-button-disabled-hover-color: #d0d0d0;
    --obs-main-button-disabled-hover-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-hover-text-decoration: none;
    --obs-main-button-disabled-hover-text-transform: none;
    --obs-main-button-disabled-hover-background-color: white;
}


/* Secondary Button */
#obs-cart button#obs-cart-overview-continue,
#obs-cart button#obs-cart-address-continue,
#obs-cart .obs-cart-container-payment button.btn-dark.obs-cart-btn-dark,
#obs-cart button#obs-cart-contact-continue,
.offcanvas-body button.obs-cart-btn-dark,
.obs-model-selection-show.obs-button-active a,
.obs-model-selection-show.obs-button-disabled a{
    /* button - active */
    --obs-main-button-active-padding: 11px 21px;
    --obs-main-button-active-border-radius: 20px;
    --obs-main-button-active-text-decoration: none;
    --obs-main-button-active-text-align: center;
    --obs-main-button-active-text-transform: none;
    --obs-main-button-active-letter-spacing: normal;
    --obs-main-button-active-line-height: 1;
    --obs-main-button-active-font-weight: 400;
    --obs-main-button-active-font-size: 14px;
    --obs-main-button-active-color: white;
    --obs-main-button-active-border: 1px solid transparent;
    --obs-main-button-active-background-color: #393939;
    --obs-main-button-active-width: 100%;
    /* button - active - hover */
    --obs-main-button-active-hover-color: black;
    --obs-main-button-active-hover-border: 1px solid #d0d0d0;
    --obs-main-button-active-hover-text-decoration: none;
    --obs-main-button-active-hover-text-transform: none;
    --obs-main-button-active-hover-background-color: #d0d0d0;
    /* button - disable */
    --obs-main-button-disabled-padding: 11px 21px;
    --obs-main-button-disabled-border-radius: 20px;
    --obs-main-button-disabled-text-decoration: none;
    --obs-main-button-disabled-text-align: center;
    --obs-main-button-disabled-text-transform: none;
    --obs-main-button-disabled-letter-spacing: normal;
    --obs-main-button-disabled-line-height: 1;
    --obs-main-button-disabled-font-weight: 400;
    --obs-main-button-disabled-font-size: 14px;
    --obs-main-button-disabled-color: #d0d0d0;
    --obs-main-button-disabled-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-background-color: white;
    --obs-main-button-disabled-width: 100%;
    /* button - disable - hover */
    --obs-main-button-disabled-hover-color: #d0d0d0;
    --obs-main-button-disabled-hover-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-hover-text-decoration: none;
    --obs-main-button-disabled-hover-text-transform: none;
    --obs-main-button-disabled-hover-background-color: white;
}


/* Tertiary Button */
.offcanvas-body button.btn-outline-secondary,
.obs-product-filter-button-toggle.obs-button-active a,
.obs-product-filter-remove-button.obs-product-button.obs-button-active a,
.obs-button-active-load-more.obs-button-active a,
button#obs-reset-password-request-code,
button#obs-create-account-create,
#obs-order-details button#obs-order-details-submit{
    /* button - active */
    --obs-main-button-active-padding: 11px 21px;
    --obs-main-button-active-border-radius: 20px;
    --obs-main-button-active-text-decoration: none;
    --obs-main-button-active-text-align: center;
    --obs-main-button-active-text-transform: none;
    --obs-main-button-active-letter-spacing: normal;
    --obs-main-button-active-line-height: 1;
    --obs-main-button-active-font-weight: 400;
    --obs-main-button-active-font-size: 14px;
    --obs-main-button-active-color: black;
    --obs-main-button-active-border: 1px solid #d0d0d0;
    --obs-main-button-active-background-color: white;
    --obs-main-button-active-width: 100%;
    /* button - active - hover */
    --obs-main-button-active-hover-color: black;
    --obs-main-button-active-hover-border: 1px solid #d0d0d0;
    --obs-main-button-active-hover-text-decoration: none;
    --obs-main-button-active-hover-text-transform: none;
    --obs-main-button-active-hover-background-color: #d0d0d0;
    /* button - disable */
    --obs-main-button-disabled-padding: 11px 21px;
    --obs-main-button-disabled-border-radius: 20px;
    --obs-main-button-disabled-text-decoration: none;
    --obs-main-button-disabled-text-align: center;
    --obs-main-button-disabled-text-transform: none;
    --obs-main-button-disabled-letter-spacing: normal;
    --obs-main-button-disabled-line-height: 1;
    --obs-main-button-disabled-font-weight: 400;
    --obs-main-button-disabled-font-size: 14px;
    --obs-main-button-disabled-color: #d0d0d0;
    --obs-main-button-disabled-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-background-color: white;
    --obs-main-button-disabled-width: 100%;
    /* button - disable - hover */
    --obs-main-button-disabled-hover-color: #d0d0d0;
    --obs-main-button-disabled-hover-border: 1px solid #d0d0d0;
    --obs-main-button-disabled-hover-text-decoration: none;
    --obs-main-button-disabled-hover-text-transform: none;
    --obs-main-button-disabled-hover-background-color: white;
}


/* Links */
.obs-product-model-table-more.obs-button-active a,
.obs-product-filter-button.obs-button-active a{
    /* button - active */
    --obs-main-button-active-padding: 0;
    --obs-main-button-active-border-radius: 0;
    --obs-main-button-active-text-decoration: underline;
    --obs-main-button-active-text-align: center;
    --obs-main-button-active-text-transform: none;
    --obs-main-button-active-letter-spacing: normal;
    --obs-main-button-active-line-height: 1;
    --obs-main-button-active-font-weight: 400;
    --obs-main-button-active-font-size: 14px;
    --obs-main-button-active-color: black;
    --obs-main-button-active-border: 0;
    --obs-main-button-active-background-color: unset;
    --obs-main-button-active-width: 100%;
    /* button - active - hover */
    --obs-main-button-active-hover-color: #d0d0d0;
    --obs-main-button-active-hover-border: 0;
    --obs-main-button-active-hover-text-decoration: none;
    --obs-main-button-active-hover-text-transform: none;
    --obs-main-button-active-hover-background-color: unset;
    /* button - disable */
    --obs-main-button-disabled-padding: 0;
    --obs-main-button-disabled-border-radius: 0;
    --obs-main-button-disabled-text-decoration: underline;
    --obs-main-button-disabled-text-align: center;
    --obs-main-button-disabled-text-transform: none;
    --obs-main-button-disabled-letter-spacing: normal;
    --obs-main-button-disabled-line-height: 1;
    --obs-main-button-disabled-font-weight: 400;
    --obs-main-button-disabled-font-size: 14px;
    --obs-main-button-disabled-color: #d0d0d0;
    --obs-main-button-disabled-border: 0;
    --obs-main-button-disabled-background-color: unset;
    --obs-main-button-disabled-width: 100%;
    /* button - disable - hover */
    --obs-main-button-disabled-hover-color: #d0d0d0;
    --obs-main-button-disabled-hover-border: 0;
    --obs-main-button-disabled-hover-text-decoration: none;
    --obs-main-button-disabled-hover-text-transform: none;
    --obs-main-button-disabled-hover-background-color: unset;
}

/*----------------------------------------------------------*/
/* cart 

  selectors:

  #obs-cart button#obs-cart-overview-continue,
  #obs-cart button#obs-cart-address-continue,
  #obs-cart .obs-cart-container-payment button.btn-dark.obs-cart-btn-dark,
  #obs-cart button#obs-cart-contact-continue,
  #obs-cart button#obs-cart-confirm-order */

/* cart - step 1 - button - to the checkout - active */
#obs-cart button#obs-cart-overview-continue{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align:  var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* cart - step 1 - button - to the checkout - active - hover */
#obs-cart button#obs-cart-overview-continue:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* cart - step 2 - button - for payment - active */
#obs-cart button#obs-cart-address-continue{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* cart - step 2 - button - for payment - active - hover */
#obs-cart button#obs-cart-address-continue:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* cart - step 3 - button - select payment - active */
#obs-cart .obs-cart-container-payment button.btn-dark.obs-cart-btn-dark{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* cart - step 3 - button - select payment - active - hover */
#obs-cart .obs-cart-container-payment button.btn-dark.obs-cart-btn-dark:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* cart - step 4 - button - to the order overview - active */
#obs-cart button#obs-cart-contact-continue{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* cart - step 4 - button - to the order overview - active - hover */
#obs-cart button#obs-cart-contact-continue:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* cart - step 5 - button - buy now - active */
#obs-cart button#obs-cart-confirm-order{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* cart - step 5 - button - buy now - active - hover */
#obs-cart button#obs-cart-confirm-order:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/*----------------------------------------------------------*/
/* offcanvas 

  selectors:

  .offcanvas-body button.obs-cart-btn-dark,
  .offcanvas-body button.btn-outline-secondary */

/* offcanvas - button - global */
.offcanvas-body button.obs-cart-btn-dark,
.offcanvas-body button.btn-outline-secondary{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size)!Important;
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width)!Important;
}

/* offcanvas - button - to cart */
.offcanvas-body button.obs-cart-btn-dark{
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* offcanvas - button - to cart - hover */
.offcanvas-body button.obs-cart-btn-dark:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* offcanvas - button - continue shopping */
.offcanvas-body button.btn-outline-secondary{
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
    width: var(--obs-main-button-active-width)!Important;
}

/* offcanvas - button - continue shopping - hover */
.offcanvas-body button.btn-outline-secondary:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/*----------------------------------------------------------
/* product page 

  selectors:

  .obs-product-buy-button.obs-button-active a,
  .obs-product-buy-button.obs-button-disabled a,
  .obs-product-model-table-more.obs-button-active a */

/* product page - button - add to cart - active */
.obs-product-buy-button.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size)!Important;
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color)!Important;
    width: var(--obs-main-button-active-width)!Important;
}

/* product page - button - add to cart - active - hover */
.obs-product-buy-button.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color)!Important;
}

/* product page - button - add to cart - disabled */
.obs-product-buy-button.obs-button-disabled a{
    text-decoration: var(--obs-main-button-disabled-text-decoration);
    letter-spacing: var(--obs-main-button-disabled-letter-spacing);
    line-height: var(--obs-main-button-disabled-line-height);
    text-align: var(--obs-main-button-disabled-text-align);
    text-transform: var(--obs-main-button-disabled-text-transform);
    padding: var(--obs-main-button-disabled-padding)!Important;
    border-radius: var(--obs-main-button-disabled-border-radius);
    font-weight: var(--obs-main-button-disabled-font-weight);
    font-size: var(--obs-main-button-disabled-font-size)!Important;
    border: var(--obs-main-button-disabled-border);
    background-color: var(--obs-main-button-disabled-background-color);
    color: var(--obs-main-button-disabled-color)!Important;
    width: var(--obs-main-button-disabled-width)!Important;
}

/* product page - button - add to cart - disabled - hover */
.obs-product-buy-button.obs-button-disabled a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-disabled-hover-text-decoration);
    text-transform: var(--obs-main-button-disabled-hover-text-transform);
    background-color: var(--obs-main-button-disabled-hover-background-color);
    border: var(--obs-main-button-disabled-hover-border);
    color: var(--obs-main-button-disabled-hover-color)!Important;
}

/* product page - button - model tabele show more - active */
.obs-product-model-table-more.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size)!Important;
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color)!Important;
    width: var(--obs-main-button-active-width)!Important;
}

/* product page - button - model tabele show more - active - hover */
.obs-product-model-table-more.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color)!Important;
}


/*----------------------------------------------------------
/* model shortcode  

  selectors:

  .obs-model-selection-show.obs-button-active a,
  .obs-model-selection-show.obs-button-disabled a */

/* model- shortcode - button - select model - active */
.obs-model-selection-show.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size)!Important;
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color);
    width: var(--obs-main-button-active-width)!Important;
}

/* model- shortcode - button - select model - active - hover */
.obs-model-selection-show.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/* model- shortcode - button - select model - disabled */
.obs-model-selection-show.obs-button-disabled a{
    text-decoration: var(--obs-main-button-disabled-text-decoration);
    letter-spacing: var(--obs-main-button-disabled-letter-spacing);
    line-height: var(--obs-main-button-disabled-line-height);
    text-align: var(--obs-main-button-disabled-text-align);
    text-transform: var(--obs-main-button-disabled-text-transform);
    padding: var(--obs-main-button-disabled-padding);
    border-radius: var(--obs-main-button-disabled-border-radius);
    font-weight: var(--obs-main-button-disabled-font-weight);
    font-size: var(--obs-main-button-disabled-font-size)!Important;
    border: var(--obs-main-button-disabled-border);
    background-color: var(--obs-main-button-disabled-background-color);
    color: var(--obs-main-button-disabled-color);
    width: var(--obs-main-button-disabled-width)!Important;
}
/* model- shortcode - button - select model - disabled - hover */
.obs-model-selection-show.obs-button-disabled a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-disabled-hover-text-decoration);
    text-transform: var(--obs-main-button-disabled-hover-text-transform);
    background-color: var(--obs-main-button-disabled-hover-background-color);
    border: var(--obs-main-button-disabled-hover-border);
    color: var(--obs-main-button-disabled-hover-color);
}

/*----------------------------------------------------------
/* category page   

  selectors:

  .obs-product-filter-button-toggle.obs-button-active a,
  .obs-product-filter-button.obs-button-active a,
  .obs-product-filter-remove-button.obs-product-button.obs-button-active a,
  .obs-button-active-load-more.obs-button-active a */

/* category page - mobil filter toggle - button */
.obs-product-filter-button-toggle.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size);
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color)!Important;
    width: var(--obs-main-button-active-width)!Important;
}

/* category page - mobil filter toggle - button - hover */
.obs-product-filter-button-toggle.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color)!Important;
}

/* category page - load / all filter - button */
.obs-product-filter-button.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size);
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color)!Important;
    width: var(--obs-main-button-active-width)!Important;
}

/* category page - load / all filter - button - hover */
.obs-product-filter-button.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color)!Important;
}

/* category page - remove_filter - button */
.obs-product-filter-remove-button.obs-product-button.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius)!Important;
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size);
    border: var(--obs-main-button-active-border);
    background-color: var(--obs-main-button-active-background-color);
    color: var(--obs-main-button-active-color)!Important;
}

/* category page - remove_filter - button - hover */
.obs-product-filter-remove-button.obs-product-button.obs-button-active a:is(:hover, :focus, :active) {
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color)!Important;
}

/* category page - load more products - button */
.obs-button-active-load-more.obs-button-active a{
    text-decoration: var(--obs-main-button-active-text-decoration);
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    text-transform: var(--obs-main-button-active-text-transform);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    font-size: var(--obs-main-button-active-font-size);
    border: var(--obs-main-button-active-border)!Important;
    background-color: var(--obs-main-button-active-background-color)!Important;
    color: var(--obs-main-button-active-color)!Important;
}

/* category page - load more products - button - hover */
.obs-button-active-load-more.obs-button-active a:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color)!Important;
    border: var(--obs-main-button-active-hover-border)!Important;
    color: var(--obs-main-button-active-hover-color)!Important;
}

/*----------------------------------------------------------*/
/* reset password 

  selectors:

  button#obs-reset-password-request-code */

/* reset password - button - global */
button#obs-reset-password-request-code{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size);
    padding: var(--obs-main-button-active-padding)!Important;
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width);
}

/* reset password - button - send reset code */
button#obs-reset-password-request-code{
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* reset password - button - send reset code - hover */
button#obs-reset-password-request-code:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/*----------------------------------------------------------*/
/* create customer account 

  selectors:

  button#obs-create-account-create */

/* create customer account - button - global */
button#obs-create-account-create{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width);
}

/* create customer account - button - create customer account */
button#obs-create-account-create{
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* create customer account - button - create customer account - hover */
button#obs-create-account-create:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}

/*----------------------------------------------------------*/
/* view order 

  selectors:

  #obs-order-details button#obs-order-details-submit */

/* view order - button - global */
#obs-order-details button#obs-order-details-submit{
    text-decoration: var(--obs-main-button-active-text-decoration);
    text-transform: var(--obs-main-button-active-text-transform);
    font-size: var(--obs-main-button-active-font-size);
    padding: var(--obs-main-button-active-padding);
    border-radius: var(--obs-main-button-active-border-radius);
    font-weight: var(--obs-main-button-active-font-weight);
    width: var(--obs-main-button-active-width);
}

/* view order - button - login */
#obs-order-details button#obs-order-details-submit{
    letter-spacing: var(--obs-main-button-active-letter-spacing);
    line-height: var(--obs-main-button-active-line-height);
    text-align: var(--obs-main-button-active-text-align);
    background-color: var(--obs-main-button-active-background-color);
    border: var(--obs-main-button-active-border);
    color: var(--obs-main-button-active-color);
}

/* view order - button - login - hover */
#obs-order-details button#obs-order-details-submit:is(:hover, :focus, :active){
    text-decoration: var(--obs-main-button-active-hover-text-decoration);
    text-transform: var(--obs-main-button-active-hover-text-transform);
    background-color: var(--obs-main-button-active-hover-background-color);
    border: var(--obs-main-button-active-hover-border);
    color: var(--obs-main-button-active-hover-color);
}