/* Phase 5.22: Home guided Builder product-quality bracelet preview. */

@media (min-width: 1120px) {
  body[data-page="home"] .home-guided-builder[data-route-group~="home"] {
    min-height: 430px !important;
    grid-template-columns: minmax(280px, 0.7fr) minmax(470px, 1.05fr) minmax(360px, 0.82fr) !important;
    align-items: center !important;
  }

  body[data-page="home"] .home-builder-preview {
    position: relative !important;
    min-height: 382px !important;
    padding: 18px 0 20px !important;
    gap: 7px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    overflow: visible !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98) 0 26%, rgba(255, 247, 235, 0.72) 47%, transparent 66%),
      radial-gradient(ellipse at 50% 66%, rgba(77, 45, 17, 0.14), transparent 42%) !important;
  }

  body[data-page="home"] .home-builder-preview::before {
    inset: 76px 62px 96px !important;
    opacity: 0.035 !important;
    filter: blur(2px) saturate(0.7) brightness(1.28) !important;
  }

  body[data-page="home"] .home-builder-preview::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 105px !important;
    width: 252px !important;
    height: 34px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse, rgba(66, 42, 18, 0.2), rgba(66, 42, 18, 0.03) 64%, transparent 72%) !important;
    opacity: 0.8 !important;
    filter: blur(7px) !important;
    z-index: 1 !important;
  }

  body[data-page="home"] .home-builder-ring,
  body[data-page="home"] .home-builder-ring:has(.product-bracelet-preview),
  body[data-page="home"] .home-builder-preview .home-builder-ring {
    width: 382px !important;
    height: 272px !important;
    min-height: 272px !important;
    margin: 0 auto -2px !important;
    transform: translateY(-2px) !important;
    overflow: visible !important;
    filter: drop-shadow(0 28px 24px rgba(55, 34, 12, 0.22)) !important;
    z-index: 4 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided {
    width: 382px !important;
    height: 272px !important;
    min-height: 272px !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided > img {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 55% !important;
    width: 210px !important;
    height: 210px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 46% 42%, rgba(255, 255, 255, 0.9), rgba(255, 249, 238, 0.42) 36%, transparent 58%),
      radial-gradient(circle, transparent 51%, rgba(126, 82, 31, 0.12) 52%, transparent 60%) !important;
    filter: blur(0.2px) !important;
    z-index: 1 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    left: 50% !important;
    top: 55% !important;
    width: 294px !important;
    height: 294px !important;
    transform: translate(-50%, -50%) !important;
    filter:
      drop-shadow(0 26px 22px rgba(55, 34, 12, 0.28))
      saturate(1.24)
      contrast(1.13)
      brightness(1.02) !important;
    z-index: 10 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet {
    width: 156px !important;
    height: 156px !important;
    transform: scale(1.66) !important;
    transform-origin: center !important;
    z-index: 12 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead {
    width: 21px !important;
    height: 21px !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.46) !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.98) 0 10%, rgba(255, 255, 255, 0.38) 11% 22%, transparent 23%),
      radial-gradient(circle at 70% 78%, rgba(47, 28, 10, 0.2) 0 15%, transparent 16%),
      linear-gradient(135deg, var(--a), var(--b)) !important;
    box-shadow:
      inset -9px -10px 14px rgba(42, 24, 9, 0.22),
      inset 6px 7px 11px rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      0 10px 16px rgba(52, 32, 12, 0.2) !important;
    filter: saturate(1.18) contrast(1.08) brightness(1.03) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead:nth-child(4n + 1) {
    --a: #fff4e4 !important;
    --b: #d9c1a1 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead:nth-child(4n + 2) {
    --a: #f8ded1 !important;
    --b: #c98f76 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead:nth-child(4n + 3) {
    --a: #eff9ef !important;
    --b: #83a889 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead:nth-child(4n + 4) {
    --a: #f9eed4 !important;
    --b: #c99a43 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-charm {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background:
      radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96), transparent 18%),
      linear-gradient(135deg, #f9c15d, #db8c13 58%, #a76609) !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    box-shadow:
      inset -8px -8px 12px rgba(77, 45, 8, 0.28),
      0 12px 18px rgba(112, 70, 12, 0.24) !important;
    transform: translate(-2px, 2px) !important;
    z-index: 30 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-shine {
    inset: 18px 42px auto !important;
    height: 196px !important;
    opacity: 0.32 !important;
    mix-blend-mode: screen !important;
    background:
      radial-gradient(circle at 44% 28%, rgba(255, 255, 255, 0.36), transparent 20%),
      linear-gradient(116deg, transparent 0 42%, rgba(255, 255, 255, 0.28) 48%, transparent 58%) !important;
    z-index: 28 !important;
    pointer-events: none !important;
  }

  body[data-page="home"] .home-builder-preview > strong {
    position: relative !important;
    z-index: 20 !important;
    margin-top: -52px !important;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    color: #07584d !important;
    background: linear-gradient(180deg, rgba(210, 255, 238, 0.96), rgba(188, 244, 225, 0.88)) !important;
    box-shadow: 0 10px 20px rgba(7, 88, 77, 0.1) !important;
  }

  body[data-page="home"] .home-builder-preview > p {
    position: relative !important;
    z-index: 20 !important;
    margin-top: -1px !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 8px 18px rgba(62, 40, 18, 0.06) !important;
  }

  body[data-page="home"] .home-builder-controls {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 760px) and (max-width: 1119px) {
  body[data-page="home"] .home-builder-ring,
  body[data-page="home"] .home-builder-ring:has(.product-bracelet-preview) {
    height: 252px !important;
    transform: translateY(-4px) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    transform: translate(-50%, -50%) scale(1.08) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet {
    transform: scale(1.45) !important;
  }
}