/* remove page-transition preloader (instant on static hosting) */
#loader-wrapper,#loader{display:none!important;visibility:hidden!important}
body{overflow:visible!important}
/* focus ring: hide for pointer users, keep for keyboard navigation */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
input:focus:not(:focus-visible),select:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible){outline:none;box-shadow:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid currentColor;outline-offset:2px}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
img{outline:none}
/* X (formerly Twitter) share icon - FontAwesome 4 has no X glyph */
.social-post-sharing a.ig-share-x{
  font-family:-apple-system,"Helvetica Neue",Arial,sans-serif!important;
  font-weight:700;font-style:normal;line-height:inherit;letter-spacing:0;
}

/* WPBakery grid: lay out statically (the plugin's masonry JS no longer runs) */
.vc_grid-container .vc_pageable-slide-wrapper{display:flex;flex-wrap:wrap;align-items:flex-start}
.vc_grid-container .vc_pageable-slide-wrapper::before,
.vc_grid-container .vc_pageable-slide-wrapper::after{display:none!important;content:none!important}
.vc_grid-container .vc_grid-item{float:none!important}

/* Recipe grid: crop every thumbnail to the same 3:2 box.
   All source photos are 3:2 except one portrait shot, which used to stretch its row. */
.vc_grid-container .vc_gitem-zone-a:not([class*="height-mode-auto-"]){
  position:relative;height:0;padding-bottom:66.9%;overflow:hidden;
  background-size:cover;background-position:center center}
.vc_grid-container .vc_gitem-zone-a:not([class*="height-mode-auto-"]) > img.vc_gitem-zone-img{display:none}
.vc_grid-container .vc_gitem-zone-a:not([class*="height-mode-auto-"]) > a.vc_gitem-link,
.vc_grid-container .vc_gitem-zone-a:not([class*="height-mode-auto-"]) > .vc_gitem-zone-mini{
  position:absolute;top:0;left:0;right:0;bottom:0}

/* WPBakery grid hover: the plugin's JS used to add .vc_is-hover on mouseenter;
   the grids are static now, so the same rules are driven by :hover instead. */
@media (hover: hover) and (pointer: fine){
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_post-title .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_post-title .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_post-title .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_post-title .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_post-title .vc_separator{-webkit-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;width:50%}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_post-title .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_post-title .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_post-title .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_post-title .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_post-title .vc_btn{-webkit-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_post-title .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_post-title .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_post-title .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_post-title .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_post-title .vc_post-title{opacity:1!important;filter:alpha(opacity=100);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b{opacity:1!important;filter:alpha(opacity=100)}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_separator,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_separator{-webkit-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;width:50%}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_btn,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_btn{-webkit-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
.vc_grid-item-mini:hover .vc_gitem-animate-blurOut .vc_gitem-zone-b .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-fadeIn .vc_gitem-zone-b .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-scaleIn .vc_gitem-zone-b .vc_post-title,.vc_grid-item-mini:hover .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b .vc_post-title{opacity:1!important;filter:alpha(opacity=100);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}

/* Below Bootstrap's sm breakpoint the vc_col-sm-* classes carry no width, so as
   flex items the grid cells would collapse to zero. Give them the full row. */
@media (max-width: 767px){
  .vc_grid-container .vc_grid-item{width:100%!important;flex:0 0 100%}
}

/* Click / tap feedback. The browser's own tap highlight is switched off above,
   so every interactive element needs its own pressed state. */
a, button, input[type="submit"], input[type="button"], .vc_btn3, .button{
  transition: opacity .12s ease, transform .12s ease, filter .12s ease}
a:active, input[type="submit"]:active, input[type="button"]:active{opacity:.55}
button:active, .vc_btn3:active, .button:active, a.link-button:active,
.product-item-actions a:active, .woocommerce a.button:active{
  opacity:1; transform:scale(.96); filter:brightness(.9)}
.vc_grid-item-mini:active, .product-item:active, .photo-item:active,
li.product:active, .vc_gitem-zone:active{filter:brightness(.88); transition:filter .12s ease}
@media (prefers-reduced-motion: reduce){
  a, button, input[type="submit"], input[type="button"], .vc_btn3, .button{transition:none}
  button:active, .vc_btn3:active, .button:active, a.link-button:active,
  .product-item-actions a:active, .woocommerce a.button:active{transform:none}
}

/* Related-products carousel: on a phone owl keeps three items in view, so the
   cards end up ~120px wide with the titles and buttons spilling out (the live
   WordPress site has the same problem). Stack them instead. */
@media (max-width: 767px){
  #related-products-carousel .owl-stage-outer{overflow:visible}
  #related-products-carousel .owl-stage{
    width:auto!important;transform:none!important;display:block}
  #related-products-carousel .owl-item{
    width:100%!important;float:none;display:block;margin:0 0 24px;opacity:1!important}
  #related-products-carousel .owl-nav,
  #related-products-carousel .owl-dots{display:none}
  .product-item .product-item-container .product-item-actions a{
    white-space:normal;max-width:100%}
  .product-item .product-item-container .product-item-title{
    overflow-wrap:anywhere}
}