/* Phase 5.25: rebuild the Home guided Builder as one coherent product-design module. */

@media (min-width: 1280px) {
  body[data-page="home"] .home-guided-builder[data-route-group~="home"] {
    position: relative !important;
    isolation: isolate !important;
    width: min(calc(100vw - 120px), 1360px) !important;
    min-height: 520px !important;
    margin: 14px auto 34px !important;
    padding: 28px !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 0.76fr) minmax(520px, 1.08fr) minmax(330px, 0.82fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid rgba(88, 58, 25, 0.12) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.92), transparent 38%),
      radial-gradient(circle at 16% 76%, rgba(239, 95, 70, 0.08), transparent 30%),
      radial-gradient(circle at 82% 30%, rgba(7, 88, 77, 0.07), transparent 28%),
      linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(255, 247, 235, 0.94)) !important;
    box-shadow: 0 28px 76px rgba(57, 37, 16, 0.10) !important;
  }

  body[data-page="home"] .home-guided-builder[data-route-group~="home"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px 28px 24px !important;
    border-radius: 24px !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.52)),
      radial-gradient(ellipse at 50% 72%, rgba(89, 58, 25, 0.10), transparent 54%) !important;
    z-index: -1 !important;
  }

  body[data-page="home"] .home-builder-steps,
  body[data-page="home"] .home-builder-preview,
  body[data-page="home"] .home-builder-intentions {
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
  }

  body[data-page="home"] .home-builder-steps {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: start !important;
    padding: 30px 24px 28px !important;
    border: 1px solid rgba(90, 59, 26, 0.10) !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 248, 0.74) !important;
  }

  body[data-page="home"] .home-builder-steps h2 {
    max-width: 9.5ch !important;
    margin: 0 !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
    color: #063f37 !important;
    font-size: clamp(46px, 3.35vw, 60px) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
  }

  body[data-page="home"] .home-builder-steps h2::after {
    content: "" !important;
    display: block !important;
    width: min(100%, 240px) !important;
    height: 3px !important;
    margin-top: 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #c98a27, rgba(201, 138, 39, 0)) !important;
  }

  body[data-page="home"] .home-builder-steps ol {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 12px !important;
    margin: 30px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body[data-page="home"] .home-builder-steps ol::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 40px !important;
    bottom: 40px !important;
    width: 1px !important;
    background: linear-gradient(180deg, rgba(7, 88, 77, 0.34), rgba(201, 138, 39, 0.20)) !important;
  }

  body[data-page="home"] .home-builder-steps li {
    position: relative !important;
    min-height: 52px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    color: #1f2c28 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }

  body[data-page="home"] .home-builder-steps li span {
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(201, 138, 39, 0.22) !important;
    border-radius: 999px !important;
    color: #063f37 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 18px rgba(63, 39, 14, 0.08) !important;
    z-index: 1 !important;
  }

  body[data-page="home"] .home-builder-steps li.active span {
    color: #fff !important;
    border-color: #0f8a73 !important;
    background: linear-gradient(180deg, #139076, #07735f) !important;
  }

  body[data-page="home"] .home-builder-preview {
    position: relative !important;
    min-height: 464px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(88, 58, 25, 0.10) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 48% 23%, rgba(255, 255, 255, 0.98), transparent 28%),
      radial-gradient(ellipse at 50% 61%, rgba(74, 47, 17, 0.18), transparent 46%),
      linear-gradient(180deg, rgba(255, 252, 245, 0.99), rgba(255, 238, 215, 0.88)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  }

  body[data-page="home"] .home-builder-preview::before {
    content: "" !important;
    position: absolute !important;
    inset: 26px 26px 104px !important;
    border-radius: 36px !important;
    opacity: 0.28 !important;
    background:
      radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.92), transparent 21%),
      radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.68), transparent 24%),
      linear-gradient(135deg, rgba(230, 210, 180, 0.62), rgba(255, 250, 241, 0.48)) !important;
    z-index: 0 !important;
  }

  body[data-page="home"] .home-builder-preview::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 118px !important;
    width: min(70%, 410px) !important;
    height: 78px !important;
    transform: translateX(-50%) rotate(-3deg) !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse, rgba(57, 35, 12, 0.30), rgba(57, 35, 12, 0.08) 56%, transparent 74%) !important;
    filter: blur(14px) !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 {
    position: absolute !important;
    left: 50% !important;
    top: 24px !important;
    width: min(100%, 560px) !important;
    height: 330px !important;
    min-height: 330px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    filter: drop-shadow(0 30px 28px rgba(54, 33, 12, 0.25)) !important;
    z-index: 4 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview,
  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 330px !important;
    min-height: 330px !important;
    overflow: visible !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    position: absolute !important;
    left: 50% !important;
    top: 49% !important;
    width: 430px !important;
    height: 320px !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
    filter:
      drop-shadow(0 24px 22px rgba(54, 33, 12, 0.28))
      saturate(1.18)
      contrast(1.08)
      brightness(1.02) !important;
    z-index: 10 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet,
  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet-commercial {
    transform: translate(-50%, -50%) scale(1.64) rotate(-5deg) !important;
    transform-origin: center center !important;
  }

  body[data-page="home"] .home-builder-preview > strong {
    position: absolute !important;
    left: 50% !important;
    bottom: 108px !important;
    min-width: 152px !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 9px 24px !important;
    text-align: center !important;
    color: #07584d !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(203, 255, 237, 0.98), rgba(173, 240, 217, 0.90)) !important;
    box-shadow: 0 12px 24px rgba(7, 88, 77, 0.13) !important;
    z-index: 22 !important;
  }

  body[data-page="home"] .home-builder-preview > p {
    position: absolute !important;
    left: 50% !important;
    bottom: 68px !important;
    width: max-content !important;
    max-width: 82% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    color: rgba(31, 44, 40, 0.72) !important;
    text-align: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 10px 20px rgba(62, 40, 18, 0.08) !important;
    z-index: 22 !important;
  }

  body[data-page="home"] .home-builder-controls {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    display: flex !important;
    gap: 8px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 22 !important;
  }

  body[data-page="home"] .home-builder-controls span {
    min-height: 34px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(88, 58, 25, 0.12) !important;
    border-radius: 999px !important;
    color: rgba(31, 44, 40, 0.72) !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  body[data-page="home"] .home-builder-intentions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) auto !important;
    gap: 12px !important;
    padding: 0 !important;
  }

  body[data-page="home"] .home-builder-intentions article {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px !important;
    border: 1px solid rgba(89, 58, 25, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 10px 24px rgba(57, 37, 16, 0.05) !important;
  }

  body[data-page="home"] .home-builder-intentions article.active {
    border-color: rgba(7, 136, 113, 0.70) !important;
    box-shadow:
      inset 0 0 0 1px rgba(7, 136, 113, 0.38),
      0 16px 30px rgba(7, 88, 77, 0.07) !important;
  }

  body[data-page="home"] .home-builder-intentions article > i {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #07584d !important;
  }

  body[data-page="home"] .home-builder-intentions article strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  body[data-page="home"] .home-builder-intentions article p {
    max-width: 26ch !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

  body[data-page="home"] .home-builder-intentions article > span {
    align-self: center !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    color: #9b6a1d !important;
    background: #fae7c2 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  body[data-page="home"] .home-builder-intentions a {
    min-height: 44px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #063f37 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1279px) {
  body[data-page="home"] .home-guided-builder[data-route-group~="home"] {
    width: min(calc(100vw - 48px), 1080px) !important;
    grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr) !important;
    grid-template-areas:
      "steps preview"
      "intentions intentions" !important;
    gap: 18px !important;
    padding: 24px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-builder-steps {
    grid-area: steps !important;
  }

  body[data-page="home"] .home-builder-preview {
    grid-area: preview !important;
    max-width: none !important;
    min-height: 370px !important;
  }

  body[data-page="home"] .home-builder-intentions {
    grid-area: intentions !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  body[data-page="home"] .home-builder-intentions a {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 1180px) {
  body[data-page="build"] .catalog-more-list .stone-card {
    min-height: 90px !important;
    overflow: visible !important;
  }
}

@media (min-width: 761px) and (max-width: 1119px) {
  body[data-page="gift"] header.topbar {
    height: auto !important;
    min-height: 96px !important;
    overflow: visible !important;
  }

  body[data-page="gift"] header.topbar .topbar-main {
    min-height: 64px !important;
    overflow: hidden !important;
  }

  body[data-page="gift"] header.topbar .topbar-main::before,
  body[data-page="gift"] header.topbar .topbar-main::after,
  body[data-page="gift"] header.topbar .shipping-strip p::before,
  body[data-page="gift"] header.topbar .shipping-strip p::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 760px) {
  body[data-page="trending"] {
    --phase511-mobile-trending-board: min(350px, calc(100vw - 40px)) !important;
    --phase511-mobile-trending-x: max(12px, calc((100vw - min(350px, calc(100vw - 40px))) / 2)) !important;
  }

  body[data-page="trending"] .mobile-trending-podium,
  body[data-page="trending"] .mobile-podium-stage {
    overflow: visible !important;
  }

  body[data-page="trending"] .mobile-podium-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body[data-page="trending"] .mobile-podium-card {
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 5px !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .mobile-podium-preview {
    width: 100% !important;
    height: 74px !important;
    overflow: hidden !important;
  }

  body[data-page="trending"] .podium-rank-1 .mobile-podium-preview {
    height: 78px !important;
  }

  body[data-page="trending"] .mobile-podium-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  body[data-page="trending"] .mobile-podium-preview .design-preview-live {
    left: 50% !important;
    top: 50% !important;
    width: 66px !important;
    height: 66px !important;
    transform: translate(-50%, -50%) scale(0.70) !important;
    transform-origin: center center !important;
  }

  body[data-page="trending"] .mobile-podium-copy,
  body[data-page="trending"] .mobile-podium-actions {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="trending"] .mobile-podium-copy strong {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.05 !important;
  }

  body[data-page="trending"] .mobile-podium-actions .copy-action {
    width: 100% !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending {
    width: 100% !important;
    grid-template-columns: 24px 64px minmax(0, 1fr) 58px !important;
    gap: 7px !important;
    padding-inline: 8px !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending .design-preview-trending {
    width: 64px !important;
    height: 44px !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending .design-preview-trending img {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: cover !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending .design-preview-live {
    width: 42px !important;
    height: 42px !important;
    transform: translate(-50%, -50%) scale(0.72) !important;
  }

  body[data-page="trending"] .leaderboard-main .design-body-trending {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  body[data-page="trending"] .leaderboard-main .trend-title-row {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .rank-row .trend-title-row h3 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.12 !important;
  }
}