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

Stylesheet: Block Style
Block: Similar Products

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

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: Similar Products

******************************************************************/
.sp-blog-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: var(--wp--preset--spacing--64) var(--wp--preset--spacing--32);
}
@media (min-width: 481px) {
  .sp-blog-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .sp-blog-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

Stylesheet: Block Style
Block: Similar Products

******************************************************************/
.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, .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: 5px;
  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, .sp-card.sp-card-sp_product .sp-card-type, .sp-card.sp-card-page .sp-card-type, .sp-card.sp-card-post .sp-card-type, .sp-card.sp-card-product-category .sp-card-type {
  color: var(--wp--preset--color--accon-blue);
  font-weight: normal;
}
.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);
}

@container spcard (min-width: 300px) {
  .sp-card.sp-card-product .sp-card-content {
    padding: var(--wp--preset--spacing--32);
  }
}
.block-editor-block-list__layout .sp-block-similar-products .sp-card-product a {
  pointer-events: none;
}
.sp-block-similar-products .sp-card-product .sp-card-title:after {
  background-image: url("../../../../library/icons/arrow-top-right.svg");
}
.sp-block-similar-products .sp-block-similar-products__heading {
  display: block;
  margin-top: var(--wp--preset--spacing--64);
  margin-bottom: var(--wp--preset--spacing--64);
  padding: 0 0 var(--wp--preset--spacing--16);
  border-bottom: 1px solid var(--wp--preset--color--gray);
  font-size: var(--sp-font-base-size);
}
.sp-block-similar-products .sp-block-similar-products__heading a {
  color: inherit;
}