/**
 * Use this mixin to change the inherited font declaration 
 * of an element or container.
 */
/**
 * Overwrite elements whose properties are declared by a 3rd
 * party by setting all the font properties again.
 *
 * Examples: sales badges inherit font rules from WooCommerce plugin
 */
/**
 * Use this mixin on containers or elements, when you need 
 * to overwrite the universal selector (*) specificity
 *
 * Examples: input fields, image captions
 */
figure > :not(:first-child) {
  margin-top: var(--theme-spacing-smallest);
}

body {
  transition: var(--theme-transition);
  transition-property: opacity;
}

body.is-loading {
  opacity: 0;
}

html:not(.wf-active) {
  pointer-events: none;
}

.nb-supernova-item__media-wrapper {
  transition: var(--theme-transition);
  transition-property: opacity;
  transition-delay: 0.3s;
}
body:not(.has-loaded) .nb-supernova-item__media-wrapper {
  opacity: 0;
}

.wc-block-grid__product-onsale {
  transition: var(--theme-transition);
  transition-property: color;
}
html:not(.wf-active) .wc-block-grid__product-onsale {
  color: transparent;
}

.wc-block-grid__product-title,
.wc-block-grid__product-price {
  transition: var(--theme-transition);
  transition-property: opacity;
}
html:not(.wf-active) .wc-block-grid__product-title,
html:not(.wf-active) .wc-block-grid__product-price {
  opacity: 0;
}

.woocommerce-products-header,
.woocommerce-notices-wrapper,
.woocommerce-result-count,
.woocommerce-ordering {
  transition: var(--theme-transition);
  transition-property: opacity;
}
html:not(.wf-active) .woocommerce-products-header,
html:not(.wf-active) .woocommerce-notices-wrapper,
html:not(.wf-active) .woocommerce-result-count,
html:not(.wf-active) .woocommerce-ordering {
  opacity: 0;
}

.novablocks-media__image {
  background-color: var(--sm-current-bg-color);
  border: 2px solid var(--sm-current-color-3);
}

:where(.wp-block-group, .wp-block-group__inner-container) > :where(:not(:is(.wp-block-group, .wp-block-group__inner-container))) {
  transition: var(--theme-transition);
  transition-property: opacity;
}
html:not(.wf-active) :where(.wp-block-group, .wp-block-group__inner-container) > :where(:not(:is(.wp-block-group, .wp-block-group__inner-container))) {
  opacity: 0;
}

.novablocks-hero__inner-container[class][class] > * {
  transition-property: none;
}

body:not(.wf-active) .novablocks-media .wp-block-group__inner-container > .wp-block {
  opacity: 1;
}

body:not(.has-loaded) .c-comments-toggle__checkbox + .c-comments-toggle__label ~ * {
  display: none;
}

.comments-area {
  transition: var(--theme-transition);
  transition-property: opacity;
}
html:not(.wf-active) .comments-area {
  opacity: 0;
}

/* Pages */
/*------------------------------------*\
  #BLOCK PATTERNS SHOWCASE PAGES
\*------------------------------------*/
body.block-patterns {
  background: #F5F5F5;
  background: var(--sm-bg-color-2);
}

.showcase-block-title {
  position: relative;
}
.showcase-block-title * {
  font-weight: 400 !important;
  font-family: system-font-sans-serif-clear, "SF Pro Display", "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitsream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media only screen and (min-width: 768px) {
  .showcase-block-title .wp-block-group__inner-container > * {
    margin-left: 7.5%;
  }
  .showcase-block-title:before {
    content: " ";
    position: absolute;
    top: 20px;
    left: 0px;
    width: 30px;
    height: 0px;
    border-top: 2px solid var(--sm-current-fg1-color);
    border-left: 2px solid var(--sm-current-fg1-color);
  }
}

@media only screen and (min-width: 768px) {
  .showcase-block-title:not([class*=block-editor]) + div {
    box-shadow: 0 0 0 1px #E5E6E8;
    border-radius: 8px;
    overflow: hidden;
    transform-origin: 50% 0%;
    transform: scale(0.8);
    transition: all 0.4s ease;
    transition-property: all !important;
    --nb-emphasis-top-spacing: 1 !important;
    --nb-emphasis-bottom-spacing: 1 !important;
  }
  .showcase-block-title:not([class*=block-editor]) + div:hover {
    transform: scale(1);
    border-radius: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .showcase-block-title:not([class*=block-editor]) + div.nb-sidecar {
    background: var(--sm-current-bg-color, var(--nb-bg-color));
  }
}

.comment__header a {
  text-decoration-color: transparent;
}
.comment__header a:hover {
  text-decoration-color: var(--sm-current-accent-color);
}