ui-bundles {
  padding: var(--spacing-48);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-container-low);
  display: grid;
  gap: var(--spacing-32);
}

ui-bundles .head {
    display: flex;
    gap: var(--spacing-12);
    justify-content: space-between;
  }

:is(ui-bundles .head) .bio {
      display: flex;
      gap: var(--spacing-6);
      flex-direction: column;
    }

:is(:is(ui-bundles .head) .bio) .title {
        font: var(--font-title-lg);
        color: var(--color-primary);
      }

:is(:is(ui-bundles .head) .bio) .saving {
        color: var(--color-on-surface-variant);
      }

:is(ui-bundles .head) .price {
      display: flex;
      gap: var(--spacing-6);
      flex-direction: column;
      align-items: flex-end;
    }

:is(:is(ui-bundles .head) .price) .original {
        font: var(--font-title-lg);
        color: var(--color-primary);
      }

:is(:is(ui-bundles .head) .price) .compare-at {
        opacity: 0.5;
        text-decoration: line-through;
      }

ui-bundles .variants {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }

:is(ui-bundles .variants) .variant {
      font: var(--font-body-sm);
      border-radius: var(--radius-xs);
      padding: var(--spacing-4) var(--spacing-6);
      color: var(--color-on-surface-variant);
      background-color: var(--color-surface-container);
    }

ui-bundles form {
    display: grid;
    gap: var(--spacing-32);
  }

:is(ui-bundles .footer) [ui-button] {
      width: 100%;
    }

ui-bundles[type="single"] .core {
      display: flex;
      gap: var(--spacing-24);
    }

:is(ui-bundles[type="single"] .core) .images {
        position: relative;
      }

:is(:is(ui-bundles[type="single"] .core) .images) .media {
          width: 80px;
          height: auto;
          overflow: hidden;
          aspect-ratio: 1 / 1;
          position: relative;
          border-radius: var(--radius-sm);
          background-color: var(--color-surface-container);
          border: 1.5px solid var(--color-surface-container-lowest);
          box-shadow: color-mix(in srgb, currentColor 5%, transparent) 0px 7px 14px 0px;
          z-index: 3;
        }

:is(:is(:is(ui-bundles[type="single"] .core) .images) .media) > img {
            object-fit: cover;
          }

:is(:is(:is(ui-bundles[type="single"] .core) .images) .media) > [ui-icon] {
            opacity: 0.3;
            position: absolute;
            translate: -50% -50%;
            left: 50%;
            inset-block-start: 50%;
          }

:is(:is(:is(ui-bundles[type="single"] .core) .images) .media):not(:first-child) {
            inset: 0;
            position: absolute;
          }

:is(:is(:is(ui-bundles[type="single"] .core) .images) .media):nth-of-type(2) {
            z-index: 2;
            transform: translateX(8%) rotate(8deg) scale(0.95);
          }

:is(:is(:is(ui-bundles[type="single"] .core) .images) .media):nth-of-type(3) {
            z-index: 1;
            transform: translateX(16%) rotate(16deg) scale(0.9);
          }

:is(ui-bundles[type="single"] .core) .info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-12);
      }

:is(:is(ui-bundles[type="single"] .core) .info) .group {
          display: flex;
          align-items: center;
          gap: var(--spacing-8);
        }

:is(:is(:is(ui-bundles[type="single"] .core) .info) .group) .index {
            font: var(--font-body-sm);
            color: var(--color-on-surface-variant);
          }

:is(ui-bundles[type="multiple"] .head) .images {
        position: relative;
        margin-inline-end: var(--spacing-12);
      }

:is(:is(ui-bundles[type="multiple"] .head) .images) .image {
          width: 54px;
          height: auto;
          aspect-ratio: 1 / 1;
          overflow: hidden;
          position: relative;
          border-radius: var(--radius-sm);
          background-color: var(--color-surface-container);
          z-index: 3;
          border: 1px solid var(--color-surface-container-lowest);
          box-shadow: color-mix(in srgb, currentColor 5%, transparent) 0px 7px 14px 0px;
        }

:is(:is(:is(ui-bundles[type="multiple"] .head) .images) .image) > img {
            object-fit: cover;
          }

:is(:is(:is(ui-bundles[type="multiple"] .head) .images) .image) > [ui-icon] {
            opacity: 0.3;
            position: absolute;
            translate: -50% -50%;
            left: 50%;
            inset-block-start: 50%;
          }

:is(:is(:is(ui-bundles[type="multiple"] .head) .images) .image):not(:first-of-type) {
            inset: 0;
            position: absolute;
          }

:is(:is(:is(ui-bundles[type="multiple"] .head) .images) .image):nth-of-type(2) {
            z-index: 2;
            transform: translateX(8%) rotate(8deg) scale(0.95);
          }

:is(:is(:is(ui-bundles[type="multiple"] .head) .images) .image):nth-of-type(3) {
            z-index: 1;
            transform: translateX(16%) rotate(16deg) scale(0.9);
          }

:is(ui-bundles[type="multiple"] .head) .bio {
        flex: 1;
      }

ui-bundles[type="multiple"] .core {
      display: flex;
      flex-direction: column;
    }

:is(ui-bundles[type="multiple"] .core) .products {
        display: grid;
        gap: var(--spacing-6);
        grid-template-columns: repeat(2, 1fr);
      }

:is(:is(ui-bundles[type="multiple"] .core) .products):has(.product:nth-child(3)) {
          grid-template-columns: repeat(3, 1fr);
        }

:is(:is(ui-bundles[type="multiple"] .core) .products) .product {
          position: relative;
          padding: var(--spacing-8);
          border-radius: var(--radius-md);
          background-color: var(--color-surface-container-lowest);
          display: flex;
          flex-direction: column;
          gap: var(--spacing-12);
        }

:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .media {
            width: 100%;
            height: auto;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            position: relative;
            border-radius: var(--radius-sm);
            background-color: var(--color-surface-container);
          }

:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .media) > img {
              object-fit: cover;
            }

:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .media) > [ui-icon] {
              opacity: 0.3;
              position: absolute;
              translate: -50% -50%;
              left: 50%;
              inset-block-start: 50%;
            }

:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .content {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-8);
          }

:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .content) .title {
              color: inherit;
              text-decoration: none;
              width: fit-content;
            }

:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .content) .price {
              display: grid;
              gap: var(--spacing-4);
              justify-content: space-between;
            }

:is(:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .content) .price) .original {
                color: var(--color-primary);
              }

:is(:is(:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .content) .price) .compare-at {
                opacity: 0.5;
                text-decoration: line-through;
              }

:is(:is(:is(ui-bundles[type="multiple"] .core) .products) .product) .discount {
            color: var(--color-primary);
            background-color: var(--color-primary-container);
            padding: var(--spacing-4) var(--spacing-6);
            position: absolute;
            font: var(--font-body-sm);
            inset-inline-end: var(--spacing-8);
            inset-block-start: var(--spacing-8);
            border-start-end-radius: var(--radius-sm);
            border-end-start-radius: var(--radius-sm);
          }

ui-bundles[type="buy-x-get-y"] .core {
      display: flex;
      flex-direction: column;
    }

:is(ui-bundles[type="buy-x-get-y"] .core) .products {
        display: grid;
        gap: var(--spacing-6);
      }

:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product {
          position: relative;
          padding: var(--spacing-8);
          border-radius: var(--radius-md);
          background-color: var(--color-surface-container-lowest);
          display: flex;
          gap: var(--spacing-12);
          align-items: center;
        }

:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .media {
            width: 100px;
            height: auto;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            position: relative;
            border-radius: var(--radius-sm);
            background-color: var(--color-surface-container);
          }

:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .media) > img {
              object-fit: cover;
            }

:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .media) > [ui-icon] {
              opacity: 0.3;
              position: absolute;
              translate: -50% -50%;
              left: 50%;
              inset-block-start: 50%;
            }

:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-8);
          }

:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .content) .title {
              color: inherit;
              text-decoration: none;
              width: fit-content;
            }

:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .content) .price {
              display: grid;
              gap: var(--spacing-4);
              justify-content: space-between;
            }

:is(:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .content) .price) .original {
                color: var(--color-primary);
              }

:is(:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .content) .price) .compare-at {
                opacity: 0.5;
                text-decoration: line-through;
              }

:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .product) .free {
            color: var(--color-primary);
            background-color: var(--color-primary-container);
            padding: var(--spacing-4) var(--spacing-6);
            font: var(--font-body-sm);
            border-radius: var(--radius-xs);
            display: flex;
            align-items: center;
            gap: var(--spacing-4);
          }

:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group {
          margin-block-start: var(--spacing-6);
          display: flex;
          flex-direction: column;
          gap: var(--spacing-12);
        }

:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group) .label {
            color: var(--color-primary);
          }

:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group) .items {
            display: grid;
            gap: var(--spacing-8);
          }

:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group) .items) .product {
              padding: var(--spacing-0);
              background-color: transparent;
            }

:is(:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group) .items) .product) .media {
                width: 50px;
                border: 1px solid var(--color-surface-container-lowest);
                box-shadow: color-mix(in srgb, currentColor 5%, transparent) 0px 7px 14px 0px;
              }

:is(:is(:is(:is(:is(:is(ui-bundles[type="buy-x-get-y"] .core) .products) .free-group) .items) .product) .media) > img {
                  width: 50px;
                  height: 50px;
                }

@media (max-width: 769px) {

  ui-bundles {
    padding: calc(var(--spacing-24) + var(--spacing-8));
}

    ui-bundles .head {
      flex-direction: column;
    }

      :is(ui-bundles .head) .price {
        align-items: flex-start;
      }
        :is(ui-bundles[type="multiple"] .core) .products {
          grid-template-columns: 1fr !important;
        }
  }