.main-list-collection-title {
  margin-bottom: var(--genstore-spacing-gap-1200);
}

.card-list-title.carousel {
    margin-bottom: var(--genstore-spacing-vertical-1800);
  }

.collection-list__item .card-face .genstore-placeholder.no-image, .collection .card-face .genstore-placeholder.no-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

modal-opener.has-padding, quick-add-bulk.has-padding {
    padding-top: var(--genstore-spacing-vertical-300);

  }

.card-content {
  padding: var(--genstore-spacing-vertical-600) var(--genstore-spacing-vertical-200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--genstore-spacing-gap-300, 6px);
}

.card-content[data-text-limit="none"] .genstore-text-block {
      overflow: unset;
      display: block;
    }

.card-content .genstore-text-block,
  .card-content .card-content-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--card-text-limit, 1);
  }

.card-content .card-content-title {
    color: var(--genstore-neutral-texticon-900);
    font-size: var(--genstore-fontSize-500);
    font-weight: var(--genstore-fontWeight-bold);
  }

quick-add-bulk button[disabled] {
      width: 100%;
    }

.card-container {
  position: relative;
  border-radius: calc(var(--genstore-borderRadius-600, 0) + var(--card-border-width, 0px));
  overflow: hidden;
  border: var(--card-border-width, 0px) solid var(--genstore-neutral-border-100);
  box-shadow: var(--card-shadow-horizontal-offset, 0) var(--card-shadow-vertical-offset, 0) var(--card-shadow-blur, 0) rgba(0, 0, 0, calc(var(--card-shadow-opacity, 0) / 100));
  contain: layout;

  /* Disable hover animation for placeholder cards */
}

.card-container.icon .genstore-btn {
      display: inline-flex;
      align-items: center;
      gap: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: all 0.3s ease;
      padding: 6px;
      outline: 1px solid var(--genstore-neutral-border-100);




    }

.card-container.icon .genstore-btn.loading .loading__spinner {
          margin-left: 20px;
        }

.card-container.icon .genstore-btn.loading .loading__spinner .path {
            stroke: var(--genstore-neutral-texticon-900);
          }

.card-container.icon .genstore-btn .btn-label {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
        margin-left: 0;
      }

.card-container.icon .genstore-btn.disabled {
        padding: var(--genstore-spacing-vertical-300) var(--genstore-spacing-horizontal-500);
      }

.card-container.icon .genstore-btn.disabled .icon-wallet {
          display: none;
        }

.card-container.icon .genstore-btn.disabled .btn-label {
          max-width: unset;
          opacity: 1
        }

.card-container.icon .genstore-btn:hover:not(.disabled) {
          gap: var(--genstore-spacing-gap-200);
          padding: var(--genstore-spacing-vertical-300) var(--genstore-spacing-horizontal-500);
        }

.card-container.icon .genstore-btn:hover:not(.disabled) .btn-label {
            max-width: 300px;
            overflow: hidden;
            opacity: 1;
            transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
          }

.card-container.card-heading-xl .card-content-title {
      font-size: var(--genstore-fontSize-1200);
    }

.card-container.card-heading-l .card-content-title {
      font-size: var(--genstore-fontSize-800);
    }

.card-container.card-heading-m .card-content-title {
      font-size: var(--genstore-fontSize-600);
    }

.card-container.card-heading-s .card-content-title {
      font-size: var(--genstore-fontSize-400);
    }

.card-container .genstore-badge {
    margin-right: 0 !important;
    padding: var(--genstore-spacing-vertical-200) var(--genstore-spacing-horizontal-300);
  }

.card-container.center .card-content {
      text-align: center;
    }

.card-container.center .card-content .price__sale {
        justify-content: center
      }

.card-container.right .card-content {
      text-align: right;
    }

.card-container.right .card-content .price__sale {
        justify-content: flex-end;
      }

.card-container.standard {
    padding: 0;
  }

.card-container.standard .card-content {
      padding: var(--genstore-spacing-vertical-600) var(--genstore-spacing-horizontal-200);
    }

.card-container.card .card-wrapper .image-box {
        padding-top: var(--card-image-padding, 0);
        padding-left: var(--card-image-padding, 0);
        padding-right: var(--card-image-padding, 0);
      }

.card-container.card .card-wrapper .card-content {
        padding: var(--genstore-spacing-vertical-600) var(--genstore-spacing-horizontal-600) var(--genstore-spacing-vertical-800) var(--genstore-spacing-horizontal-600);
      }

/* Hover overlay animation - content slides up to cover image */

.card-container.card .card-wrapper .card-content.hover-overlay {
          position: relative;
          z-index: 1;
          transform: translateY(0);
          transition: transform 0.3s ease;
        }

.card-container.card .card-wrapper .card-content.hover-overlay product-form,
          .card-container.card .card-wrapper .card-content.hover-overlay modal-opener.standard,
          .card-container.card .card-wrapper .card-content.hover-overlay quick-add-bulk,
          .card-container.card .card-wrapper .card-content.hover-overlay .quick-add {
            position: absolute;
            bottom: 0;
            left: 16px;
            right: 16px;
            opacity: 0;
            transform: translateY(100%);
            transition: opacity 0.3s ease, transform 0.3s ease;
          }

/* Hover state - content slides up and button appears */

.card-container.card .card-wrapper:hover .card-content.hover-overlay {
        transform: translateY(-48px);
      }

.card-container.card .card-wrapper:hover .card-content.hover-overlay product-form,
        .card-container.card .card-wrapper:hover .card-content.hover-overlay modal-opener,
        .card-container.card .card-wrapper:hover .card-content.hover-overlay quick-add-bulk,
        .card-container.card .card-wrapper:hover .card-content.hover-overlay .quick-add {
          opacity: 1;
          transform: translateY(calc(100%));
        }

.card-container.placeholder .card-wrapper:hover .card-content.hover-overlay, .card-container.disable-hover .card-wrapper:hover .card-content.hover-overlay {
      transform: translateY(0);
    }

.card-container.placeholder .card-wrapper:hover .card-content.hover-overlay product-form,
      .card-container.placeholder .card-wrapper:hover .card-content.hover-overlay modal-opener,
      .card-container.placeholder .card-wrapper:hover .card-content.hover-overlay quick-add-bulk,
      .card-container.placeholder .card-wrapper:hover .card-content.hover-overlay .quick-add,
      .card-container.disable-hover .card-wrapper:hover .card-content.hover-overlay product-form,
      .card-container.disable-hover .card-wrapper:hover .card-content.hover-overlay modal-opener,
      .card-container.disable-hover .card-wrapper:hover .card-content.hover-overlay quick-add-bulk,
      .card-container.disable-hover .card-wrapper:hover .card-content.hover-overlay .quick-add {
        opacity: 0;
        transform: translateY(100%);
      }

.card-container .card-content {

    height: 100%;
  }

.card-container .card-content a .genstore-text-block:hover {
          text-decoration: underline;
          text-underline-offset: 5px;
          /* 37.5% */
        }

.card-container .card-wrapper .genstore-placeholder {
      border-radius: var(--genstore-borderRadius-400);
    }

.card-container .card-wrapper .genstore-placeholder img {
        border-radius: var(--genstore-borderRadius-400);
      }

.card-wrapper {
  height: 100%;
  position: relative;
  box-shadow: var(--product-card-shadow-horizontal-offset) var(--product-card-shadow-vertical-offset) var(--product-card-shadow-blur-radius) rgba(var(--color-shadow), var(--product-card-shadow-opacity));

}

.card-wrapper a.image-box {
      overflow: hidden;
    }

.card-wrapper a {

    display: block;
}

.card-wrapper .card-face {
    position: relative;
    aspect-ratio: var(--aspect-padding, 1);
    padding-top: var(--aspect-padding);
    font-size: 0;
    position: relative;
    border-radius: var(--genstore-borderRadius-400);
    overflow: hidden;
  }

.card-wrapper .card-face[data-aspect-ratio="auto"] {
      padding-top: 0;
    }

.card-wrapper .card-face[data-aspect-ratio="auto"] img {
        position: relative;
      }

.card-wrapper .card-face img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: cover;
      object-position: center;
    }

.card-wrapper .badges-container {
    position: absolute;
    padding: var(--genstore-spacing-vertical-600) var(--genstore-spacing-horizontal-600);
    display: flex;
    gap: var(--genstore-spacing-gap-300);
    flex-wrap: wrap;
    left: 0;
    right: 0;
  }

.card-wrapper .badges-container.bottom-left {
      bottom: 0;
    }

.card-wrapper .badges-container.bottom-right {
      bottom: 0;
      justify-content: flex-end;

    }

.card-wrapper .badges-container.top-left {
      top: 0;
    }

.card-wrapper .badges-container.top-right {
      top: 0;
      justify-content: flex-end;
    }

.image-box-wrapper {
  position: relative;
  overflow: hidden;
}

card-options-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

card-options-picker.center {
    justify-content: center;
  }

card-options-picker.right {
    justify-content: flex-end;
  }

card-options-picker .genstore-swatch-input input+.swatch-input-color {
        width: 20px;
        height: 20px;
      }

card-options-picker .genstore-swatch-input.color {
      padding: 0
    }