:root {
    --lapella-primary: #6D0482;
    --lapella-dark: #4B0B5B;
    --lapella-gold: #D4AF37;
    --lapella-light-gold: #E8D9A8;
    --lapella-bg: #F9F5F7;
    --lapella-bg-2: #F4EDF7;
    --lapella-text: #24072D;
    --lapella-muted: #7E6D83;
  }

  .lapella-bundle-preview {
    position: relative;
    width: 100%;
    min-height: clamp(360px, 58vw, 720px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 18%, rgba(212, 175, 55, 0.16), transparent 34%),
      linear-gradient(145deg, rgba(249, 245, 247, 0.82), rgba(244, 237, 247, 0.58));
    isolation: isolate;
  }

  .lapella-bundle-preview::before {
    content: "";
    position: absolute;
    inset: 5%;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08)),
      radial-gradient(circle at 50% 110%, rgba(109, 4, 130, 0.1), transparent 44%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0.86;
    z-index: -1;
  }

  .lapella-bundle-placeholder {
    width: min(82%, 560px);
    text-align: center;
    padding: clamp(36px, 7vw, 84px) 18px;
    color: var(--lapella-text);
    transition: opacity 360ms ease, transform 360ms ease, visibility 360ms ease;
  }

  .lapella-bundle-placeholder.is-hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    position: absolute;
  }

  .lapella-bundle-kicker {
    display: block;
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lapella-gold);
    font-weight: 600;
  }

  .lapella-bundle-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 5.2vw, 58px);
    line-height: 1.12;
    font-weight: 500;
    color: var(--lapella-text);
  }

  .lapella-bundle-copy {
    max-width: 430px;
    margin: 18px auto 0;
    font-size: clamp(14px, 2.3vw, 18px);
    line-height: 1.8;
    color: var(--lapella-muted);
    font-weight: 400;
  }

  .lapella-bundle-grid {
    width: min(96%, 760px);
    min-height: clamp(320px, 52vw, 640px);
    display: grid;
    grid-template-columns: repeat(var(--lapella-cols, 2), minmax(0, 1fr));
    gap: clamp(8px, 2.2vw, 22px);
    align-items: center;
    justify-items: center;
    padding: clamp(18px, 4vw, 46px);
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 360ms ease, transform 360ms ease;
  }

  .lapella-bundle-grid.has-items {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .lapella-bundle-slot {
    width: 100%;
    aspect-ratio: 1 / 1.22;
    display: grid;
    place-items: center;
    min-width: 0;
  }

  .lapella-bundle-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 360ms ease, transform 360ms ease, filter 360ms ease;
    filter: drop-shadow(0 18px 24px rgba(36, 7, 45, 0.16));
  }

  .lapella-bundle-img.is-visible {
    opacity: 1;
    transform: scale(1);
  }

  .lapella-gallery-hidden {
    display: none !important;
  }

  @media (max-width: 640px) {
    .lapella-bundle-preview {
      min-height: clamp(340px, 92vw, 560px);
    }

    .lapella-bundle-grid {
      width: 100%;
      min-height: clamp(320px, 86vw, 540px);
      gap: 8px;
      padding: 18px 12px;
    }

    .lapella-bundle-copy {
      line-height: 1.65;
    }
  }