[block="product"] {
  overflow: hidden;
  position: relative;
  height: 450px;
  border-radius: var(--radius-md);
}

[block="product"] > a,[block="product"] > div {
    height: 100%;
    display: block;
    text-decoration: none;
    color: var(--color-on-background);
  }

:is([block="product"] > a,[block="product"] > div) .media {
      height: 100%;
      background-color: var(--color-surface-container);
    }

:is(:is([block="product"] > a,[block="product"] > div) .media) img {
        object-fit: cover;
        transition: var(--transition-standard-default-effects);
      }

:is(:is([block="product"] > a,[block="product"] > div) .media) > [ui-icon] {
        opacity: 0.3;
        position: absolute;
        translate: -50% -50%;
        left: 50%;
        inset-block-start: 50%;
      }

:is([block="product"] > a,[block="product"] > div) .price {
      width: fit-content;
      border-radius: var(--radius-sm);
      background-color: var(--color-background);
      padding: var(--spacing-8) var(--spacing-12);
    }

:is(:is([block="product"] > a,[block="product"] > div) .price) .compare-at-price {
        opacity: 0.8;
        text-decoration: line-through;
      }

:is([block="product"] > a,[block="product"] > div) .title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

:is([block="product"] > a,[block="product"] > div) .head {
      width: 100%;
      position: absolute;
      padding: var(--spacing-12);
      inset-block-start: var(--spacing-0);
      display: flex;
      align-items: center;
      gap: var(--spacing-12) var(--spacing-8);
      justify-content: space-between;
    }

:is(:is([block="product"] > a,[block="product"] > div) .head) .badge {
        width: fit-content;
        font: var(--font-body-sm);
        border-radius: var(--radius-xs);
        color: var(--color-background);
        background-color: var(--color-on-background);
        padding: var(--spacing-6) var(--spacing-8);
      }

:is(:is(:is([block="product"] > a,[block="product"] > div) .head) ui-product-button) > button {
          clip-path: circle();
        }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) .badge {
          order: 3;
        }

:is(:is([block="product"] > a,[block="product"] > div) .head):has(.badge):has(ui-product-button) ui-product-button {
          display: flex;
          justify-content: flex-end;
        }

:is([block="product"] > a,[block="product"] > div) .info {
      position: absolute;
      inset-block-end: var(--spacing-12);
      inset-inline-start: var(--spacing-12);
      background-color: var(--color-background);
      transform: translateY(calc(100% + var(--spacing-12)));
      border-radius: var(--radius-md);
      width: calc(100% - var(--spacing-24));
      padding: calc(var(--spacing-24) - var(--spacing-4));
      display: grid;
      align-items: center;
      grid-template-columns: auto auto;
      gap: var(--spacing-8);
      justify-content: space-between;
      transition: var(--transition-standard-slow-effects);
    }

:is(:is([block="product"] > a,[block="product"] > div) .info) .action {
        text-decoration: underline;
        text-underline-offset: var(--spacing-4);
      }

:is([block="product"] > a,[block="product"] > div) .min-info {
      display: none;
    }

:is([block="product"] > a,[block="product"] > div):hover img {
        filter: blur(5px);
      }

:is([block="product"] > a,[block="product"] > div):hover .info {
        transform: translateY(0%);
      }

/* Responsive */
@media (max-width: 640px) {
  [block="product"] {
    height: auto;
  }

    [block="product"] > a,[block="product"] > div {
      display: grid;
      gap: var(--spacing-8);
    }

      :is([block="product"] > a,[block="product"] > div) .media {
        height: 250px;
        overflow: hidden;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
      }

      :is([block="product"] > a,[block="product"] > div) .head {
        inset-block-start: auto;
        inset-block-end: calc(var(--spacing-48) + var(--spacing-12));
      }

        :is(:is([block="product"] > a,[block="product"] > div) .head) .price {
          display: none;
        }

        :is(:is([block="product"] > a,[block="product"] > div) .head) .badge {
          position: absolute;
          inset-inline-start: var(--spacing-12);
          inset-block-end: calc(250px - 28px - var(--spacing-12));
        }

        :is(:is([block="product"] > a,[block="product"] > div) .head) ui-product-button {
          justify-content: flex-start !important;
        }

      :is([block="product"] > a,[block="product"] > div) .info {
        display: none;
      }

      :is([block="product"] > a,[block="product"] > div) .min-info {
        display: grid;
        gap: var(--spacing-2);
        padding-inline: var(--spacing-4);
      }

        :is(:is([block="product"] > a,[block="product"] > div) .min-info) .price {
          padding: 0;
          opacity: 0.8;
        }
}