/******************************************************************

Stylesheet: Block Style
Block: Product Grid

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
MEDIA QUERIES
*********************/
/*********************
COLORS
*********************/
/*********************
FONT FAMILY
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
TRANSITIONS
*********************/
/******************************************************************

Stylesheet: Block Style
Block: Product Grid

******************************************************************/
.sp-card {
  container-type: inline-size;
  container-name: spcard;
}
.sp-card.sp-card-product .sp-card-image, .sp-card.sp-card-sp_product .sp-card-image {
  padding: 2em;
}
.sp-card.sp-card-product .sp-card-image img, .sp-card.sp-card-sp_product .sp-card-image img {
  object-fit: contain !important;
}
.sp-card.sp-card-product.sp-image-style-cover .sp-card-image, .sp-card.sp-card-sp_product.sp-image-style-cover .sp-card-image {
  padding: 0;
}
.sp-card.sp-card-product.sp-image-style-cover .sp-card-image img, .sp-card.sp-card-sp_product.sp-image-style-cover .sp-card-image img {
  object-fit: cover !important;
}
.sp-card.sp-card-product-category .sp-card-image {
  padding: 0.5em;
}
.sp-card.sp-card-product-category .sp-card-image img {
  object-fit: contain !important;
}
.sp-card.sp-card-product, .sp-card.sp-card-sp_product, .sp-card.sp-card-page, .sp-card.sp-card-post, .sp-card.sp-card-product-category {
  color: var(--wp--preset--color--black-olive);
}
.sp-card.sp-card-product .sp-card-image, .sp-card.sp-card-sp_product .sp-card-image, .sp-card.sp-card-page .sp-card-image, .sp-card.sp-card-post .sp-card-image, .sp-card.sp-card-product-category .sp-card-image {
  display: block;
  background-color: var(--wp--preset--color--white);
  aspect-ratio: 4/3;
  border-radius: 7px;
  corner-shape: superellipse(1.5);
  border: 1px solid var(--wp--preset--color--gray);
  background-color: var(--wp--preset--color--white);
  transition: all 0.3s ease;
}
.sp-card.sp-card-product .sp-card-image img, .sp-card.sp-card-sp_product .sp-card-image img, .sp-card.sp-card-page .sp-card-image img, .sp-card.sp-card-post .sp-card-image img, .sp-card.sp-card-product-category .sp-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-card.sp-card-product .sp-card-image .sp-card-placeholder, .sp-card.sp-card-sp_product .sp-card-image .sp-card-placeholder, .sp-card.sp-card-page .sp-card-image .sp-card-placeholder, .sp-card.sp-card-post .sp-card-image .sp-card-placeholder, .sp-card.sp-card-product-category .sp-card-image .sp-card-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
.sp-card.sp-card-product .sp-card-content, .sp-card.sp-card-sp_product .sp-card-content, .sp-card.sp-card-page .sp-card-content, .sp-card.sp-card-post .sp-card-content, .sp-card.sp-card-product-category .sp-card-content {
  padding: var(--wp--preset--spacing--32) 0 0 0;
}
.sp-card.sp-card-product .sp-card-category,
.sp-card.sp-card-product .sp-card-type, .sp-card.sp-card-sp_product .sp-card-category,
.sp-card.sp-card-sp_product .sp-card-type, .sp-card.sp-card-page .sp-card-category,
.sp-card.sp-card-page .sp-card-type, .sp-card.sp-card-post .sp-card-category,
.sp-card.sp-card-post .sp-card-type, .sp-card.sp-card-product-category .sp-card-category,
.sp-card.sp-card-product-category .sp-card-type {
  display: block;
  margin-bottom: var(--wp--preset--spacing--8);
  color: inherit;
  font-weight: bold;
  font-size: var(--wp--preset--font-size--sp-smallest);
  transition: all 0.3s ease;
  transition-delay: 0.2s;
}
.sp-card.sp-card-product .sp-card-category:hover, .sp-card.sp-card-product .sp-card-category:focus,
.sp-card.sp-card-product .sp-card-type:hover,
.sp-card.sp-card-product .sp-card-type:focus, .sp-card.sp-card-sp_product .sp-card-category:hover, .sp-card.sp-card-sp_product .sp-card-category:focus,
.sp-card.sp-card-sp_product .sp-card-type:hover,
.sp-card.sp-card-sp_product .sp-card-type:focus, .sp-card.sp-card-page .sp-card-category:hover, .sp-card.sp-card-page .sp-card-category:focus,
.sp-card.sp-card-page .sp-card-type:hover,
.sp-card.sp-card-page .sp-card-type:focus, .sp-card.sp-card-post .sp-card-category:hover, .sp-card.sp-card-post .sp-card-category:focus,
.sp-card.sp-card-post .sp-card-type:hover,
.sp-card.sp-card-post .sp-card-type:focus, .sp-card.sp-card-product-category .sp-card-category:hover, .sp-card.sp-card-product-category .sp-card-category:focus,
.sp-card.sp-card-product-category .sp-card-type:hover,
.sp-card.sp-card-product-category .sp-card-type:focus {
  color: var(--wp--preset--color--accon-blue) !important;
}
.sp-card.sp-card-product .sp-card-type:hover, .sp-card.sp-card-product .sp-card-type:focus, .sp-card.sp-card-sp_product .sp-card-type:hover, .sp-card.sp-card-sp_product .sp-card-type:focus, .sp-card.sp-card-page .sp-card-type:hover, .sp-card.sp-card-page .sp-card-type:focus, .sp-card.sp-card-post .sp-card-type:hover, .sp-card.sp-card-post .sp-card-type:focus, .sp-card.sp-card-product-category .sp-card-type:hover, .sp-card.sp-card-product-category .sp-card-type:focus {
  color: var(--wp--preset--color--black-olive) !important;
}
.sp-card.sp-card-product .sp-card-link, .sp-card.sp-card-sp_product .sp-card-link, .sp-card.sp-card-page .sp-card-link, .sp-card.sp-card-post .sp-card-link, .sp-card.sp-card-product-category .sp-card-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.sp-card.sp-card-product .sp-card-title, .sp-card.sp-card-sp_product .sp-card-title, .sp-card.sp-card-page .sp-card-title, .sp-card.sp-card-post .sp-card-title, .sp-card.sp-card-product-category .sp-card-title {
  position: relative;
  padding-right: 1.5em;
  margin-left: -1px;
  margin-top: 0;
  transition: all 0.3s ease;
  transition-delay: 0.25s;
}
.sp-card.sp-card-product .sp-card-excerpt, .sp-card.sp-card-sp_product .sp-card-excerpt, .sp-card.sp-card-page .sp-card-excerpt, .sp-card.sp-card-post .sp-card-excerpt, .sp-card.sp-card-product-category .sp-card-excerpt {
  transition: all 0.3s ease;
  transition-delay: 0.3s;
}
.sp-card.sp-card-product:hover .sp-card-category,
.sp-card.sp-card-product:hover .sp-card-title,
.sp-card.sp-card-product:hover .sp-card-excerpt,
.sp-card.sp-card-product:hover .sp-card-type, .sp-card.sp-card-product:focus .sp-card-category,
.sp-card.sp-card-product:focus .sp-card-title,
.sp-card.sp-card-product:focus .sp-card-excerpt,
.sp-card.sp-card-product:focus .sp-card-type, .sp-card.sp-card-sp_product:hover .sp-card-category,
.sp-card.sp-card-sp_product:hover .sp-card-title,
.sp-card.sp-card-sp_product:hover .sp-card-excerpt,
.sp-card.sp-card-sp_product:hover .sp-card-type, .sp-card.sp-card-sp_product:focus .sp-card-category,
.sp-card.sp-card-sp_product:focus .sp-card-title,
.sp-card.sp-card-sp_product:focus .sp-card-excerpt,
.sp-card.sp-card-sp_product:focus .sp-card-type, .sp-card.sp-card-page:hover .sp-card-category,
.sp-card.sp-card-page:hover .sp-card-title,
.sp-card.sp-card-page:hover .sp-card-excerpt,
.sp-card.sp-card-page:hover .sp-card-type, .sp-card.sp-card-page:focus .sp-card-category,
.sp-card.sp-card-page:focus .sp-card-title,
.sp-card.sp-card-page:focus .sp-card-excerpt,
.sp-card.sp-card-page:focus .sp-card-type, .sp-card.sp-card-post:hover .sp-card-category,
.sp-card.sp-card-post:hover .sp-card-title,
.sp-card.sp-card-post:hover .sp-card-excerpt,
.sp-card.sp-card-post:hover .sp-card-type, .sp-card.sp-card-post:focus .sp-card-category,
.sp-card.sp-card-post:focus .sp-card-title,
.sp-card.sp-card-post:focus .sp-card-excerpt,
.sp-card.sp-card-post:focus .sp-card-type, .sp-card.sp-card-product-category:hover .sp-card-category,
.sp-card.sp-card-product-category:hover .sp-card-title,
.sp-card.sp-card-product-category:hover .sp-card-excerpt,
.sp-card.sp-card-product-category:hover .sp-card-type, .sp-card.sp-card-product-category:focus .sp-card-category,
.sp-card.sp-card-product-category:focus .sp-card-title,
.sp-card.sp-card-product-category:focus .sp-card-excerpt,
.sp-card.sp-card-product-category:focus .sp-card-type {
  transform: translateY(0.2em);
}
.sp-card.sp-card-product:hover .sp-card-image, .sp-card.sp-card-product:focus .sp-card-image, .sp-card.sp-card-sp_product:hover .sp-card-image, .sp-card.sp-card-sp_product:focus .sp-card-image, .sp-card.sp-card-page:hover .sp-card-image, .sp-card.sp-card-page:focus .sp-card-image, .sp-card.sp-card-post:hover .sp-card-image, .sp-card.sp-card-post:focus .sp-card-image, .sp-card.sp-card-product-category:hover .sp-card-image, .sp-card.sp-card-product-category:focus .sp-card-image {
  filter: brightness(0.9);
}
.sp-card.sp-card-product:hover .sp-card-title, .sp-card.sp-card-product:focus .sp-card-title, .sp-card.sp-card-sp_product:hover .sp-card-title, .sp-card.sp-card-sp_product:focus .sp-card-title, .sp-card.sp-card-page:hover .sp-card-title, .sp-card.sp-card-page:focus .sp-card-title, .sp-card.sp-card-post:hover .sp-card-title, .sp-card.sp-card-post:focus .sp-card-title, .sp-card.sp-card-product-category:hover .sp-card-title, .sp-card.sp-card-product-category:focus .sp-card-title {
  color: var(--wp--preset--color--accon-blue);
}
.sp-card.card-style--flip {
  container-type: normal;
}
.sp-card.card-style--flip .sp-card-wrap {
  position: relative;
}
.sp-card.card-style--flip .sp-card-flipper {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 7px;
  corner-shape: superellipse(1.5);
  background-color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--gray);
  overflow: hidden;
}
.sp-card.card-style--flip .sp-card-front {
  display: flex;
  flex-direction: column;
}
.sp-card.card-style--flip .sp-card-front .sp-card-image {
  border: none;
  border-radius: 12px;
  corner-shape: superellipse(1.5);
  overflow: hidden;
}
.sp-card.card-style--flip .sp-card-front .sp-card-content {
  text-align: center;
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32);
}
.sp-card.card-style--flip .sp-card-front .sp-card-title {
  margin: 0;
  padding: 0;
  font-size: var(--sp-font-base-size);
}
.sp-card.card-style--flip .sp-card-back {
  padding: 0 var(--wp--preset--spacing--32) var(--wp--preset--spacing--32);
  text-align: center;
}
.sp-card.card-style--flip .sp-card-back .sp-card-title {
  display: none;
}
.sp-card.card-style--flip .sp-card-back .sp-card-excerpt {
  margin: 0;
}
.sp-card.card-style--flip .sp-card-category,
.sp-card.card-style--flip .sp-card-title,
.sp-card.card-style--flip .sp-card-excerpt,
.sp-card.card-style--flip .sp-card-type {
  transition: none;
}
.sp-card.card-style--flip:hover .sp-card-category,
.sp-card.card-style--flip:hover .sp-card-title,
.sp-card.card-style--flip:hover .sp-card-excerpt,
.sp-card.card-style--flip:hover .sp-card-type, .sp-card.card-style--flip:focus .sp-card-category,
.sp-card.card-style--flip:focus .sp-card-title,
.sp-card.card-style--flip:focus .sp-card-excerpt,
.sp-card.card-style--flip:focus .sp-card-type {
  transform: none;
}
.sp-card.card-style--flip:hover .sp-card-image, .sp-card.card-style--flip:focus .sp-card-image {
  filter: none;
}
@media (min-width: 1100px) {
  .sp-card.card-style--flip {
    height: 100%;
  }
  .sp-card.card-style--flip .sp-card-wrap {
    perspective: 1000px;
    height: 100%;
  }
  .sp-card.card-style--flip .sp-card-flipper {
    position: relative;
    height: 100%;
    border: none;
    background: none;
    border-radius: 0;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
  }
  .sp-card.card-style--flip .sp-card-front,
  .sp-card.card-style--flip .sp-card-back {
    backface-visibility: hidden;
    border-radius: 7px;
    corner-shape: superellipse(1.5);
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--gray);
    overflow: hidden;
  }
  .sp-card.card-style--flip .sp-card-front {
    height: 100%;
  }
  .sp-card.card-style--flip .sp-card-front .sp-card-content {
    padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--32) var(--wp--preset--spacing--32);
  }
  .sp-card.card-style--flip .sp-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--wp--preset--spacing--32);
  }
  .sp-card.card-style--flip .sp-card-back .sp-card-title {
    display: block;
    margin: 0 0 var(--wp--preset--spacing--16) 0;
    padding: 0;
    color: var(--wp--preset--color--accon-blue);
  }
  .sp-card.card-style--flip:hover .sp-card-flipper, .sp-card.card-style--flip:focus .sp-card-flipper {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    transform: rotateY(180deg);
  }
}

@container spcard (min-width: 300px) {
  .sp-card.sp-card-product .sp-card-content, .sp-card.sp-card-product-category .sp-card-content {
    padding: var(--wp--preset--spacing--32);
  }
}
.sp-block-product-grid .sp-product-grid {
  display: grid;
  grid-gap: var(--wp--preset--spacing--64) var(--wp--preset--spacing--32);
}
.sp-block-product-grid .sp-product-grid.card-style--flip {
  grid-gap: var(--wp--preset--spacing--32);
}
.sp-block-product-grid .sp-block-product-grid__placeholder {
  padding: var(--wp--preset--spacing--32);
  text-align: center;
  color: #7b7b7b;
}