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

[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);
      overflow: hidden;
    }

:is(:is([block="product"] > a,[block="product"] > div) .media) img {
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

: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-xs);
      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;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      font: var(--font-label-lg);
    }

: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);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

: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-0);
      inset-inline-start: var(--spacing-0);
      width: 100%;
      padding: var(--spacing-16) var(--spacing-12);
      display: grid;
      align-items: center;
      grid-template-columns: auto auto;
      gap: var(--spacing-8);
      justify-content: space-between;
      background: linear-gradient(to top, var(--color-background) 70%, transparent);
      transform: translateY(0%);
      transition: opacity var(--transition-standard-default-effects);
    }

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

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

:is([block="product"] > a,[block="product"] > div):hover img {
        transform: scale(1.08);
      }

:is([block="product"] > a,[block="product"] > div):hover .info .action {
        opacity: 1;
      }

/* 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: 280px;
        overflow: hidden;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      }

      :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(280px - 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;
        }
}