/* Phase 5.23: production red-box fixes for product renderer, Build workbench, Trending list, and Gift rhythm. */

body[data-page="home"] .mini-bracelet-commercial,
body[data-page="build"] .mini-bracelet-commercial,
body[data-page="trending"] .mini-bracelet-commercial,
body[data-page="gift"] .mini-bracelet-commercial,
body[data-page="account"] .mini-bracelet-commercial {
  position: relative !important;
  width: 190px !important;
  height: 190px !important;
  overflow: visible !important;
  transform-origin: center center !important;
  isolation: isolate !important;
}

.mini-bracelet-commercial .mini-bracelet-cord {
  position: absolute !important;
  left: 50% !important;
  top: 51% !important;
  z-index: 1 !important;
  width: 148px !important;
  height: 108px !important;
  transform: translate(-50%, -50%) rotate(-3deg) !important;
  border: 2px solid rgba(150, 121, 88, 0.18) !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 18px rgba(91, 61, 28, 0.1),
    0 14px 24px rgba(73, 45, 18, 0.1) !important;
}

.mini-bracelet-commercial .mini-bead {
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  transform: scale(var(--bead-scale, 1)) !important;
  transform-origin: center center !important;
  opacity: var(--bead-alpha, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  filter: saturate(1.13) contrast(1.06) brightness(1.01) !important;
  box-shadow:
    inset -8px -10px 13px rgba(49, 32, 14, 0.27),
    inset 5px 5px 9px rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 11px 16px rgba(56, 36, 15, 0.23) !important;
}

.mini-bracelet-commercial .mini-bead.product-asset-bead,
.mini-bracelet-commercial .mini-bead.mini-bead-image {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98) 0 9%, rgba(255, 255, 255, 0.38) 10% 22%, transparent 36%),
    radial-gradient(circle at 74% 78%, rgba(35, 24, 12, 0.2), transparent 44%),
    var(--bead-texture),
    linear-gradient(135deg, var(--asset-a, var(--a)), var(--asset-b, var(--b))) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100%, 116% 116%, 100% 100% !important;
  background-blend-mode: screen, multiply, normal, normal !important;
}

.mini-bracelet-commercial .mini-charm {
  position: absolute !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  color: #8b5c16 !important;
  background: radial-gradient(circle at 32% 24%, #fff 0 13%, transparent 15%), linear-gradient(135deg, #fff0b2, #c99031 62%, #74430d) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 14px 18px rgba(67, 39, 13, 0.24), inset -7px -8px 12px rgba(77, 43, 8, 0.28), inset 4px 4px 8px rgba(255, 255, 255, 0.58) !important;
}

@media (min-width: 1120px) {
  body[data-page="home"] .home-builder-preview {
    overflow: hidden !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.98) 0 24%, rgba(255, 250, 241, 0.72) 51%, transparent 72%),
      radial-gradient(ellipse at 50% 69%, rgba(74, 46, 17, 0.18), transparent 48%),
      linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 244, 230, 0.82)) !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: min(100%, 430px) !important;
    height: 286px !important;
    min-height: 286px !important;
    margin: -8px auto -6px !important;
    transform: translateY(0) scale(1) !important;
    filter: drop-shadow(0 24px 24px rgba(64, 39, 14, 0.2)) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided {
    width: 430px !important;
    height: 286px !important;
    min-height: 286px !important;
    overflow: visible !important;
    border-radius: 28px !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided::before {
    top: 50% !important;
    width: 330px !important;
    height: 196px !important;
    opacity: 0.52 !important;
    background:
      radial-gradient(ellipse at 50% 55%, rgba(72, 45, 17, 0.22), transparent 58%),
      radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.5), transparent 61%) !important;
    filter: blur(7px) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    left: 50% !important;
    top: 48% !important;
    width: 342px !important;
    height: 286px !important;
    transform: translate(-50%, -50%) scale(1) !important;
    filter: drop-shadow(0 24px 24px rgba(57, 35, 13, 0.28)) saturate(1.2) contrast(1.08) !important;
  }

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

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead {
    width: 22px !important;
    height: 22px !important;
  }

  body[data-page="home"] .home-builder-preview > strong {
    margin-top: -12px !important;
  }
}

@media (min-width: 1180px) {
  body[data-page="build"] .studio-grid {
    grid-template-columns: minmax(296px, 0.72fr) minmax(640px, 1.56fr) minmax(304px, 0.76fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  body[data-page="build"] .builder-panel,
  body[data-page="build"] .order-panel,
  body[data-page="build"] .stage-panel {
    height: min(740px, calc(100vh - 180px)) !important;
    min-height: 650px !important;
  }

  body[data-page="build"] .builder-panel,
  body[data-page="build"] .order-panel {
    overflow: hidden auto !important;
    scrollbar-width: thin !important;
  }

  body[data-page="build"] .catalog {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 358px !important;
    overflow: hidden auto !important;
    gap: 9px !important;
    padding-right: 4px !important;
  }

  body[data-page="build"] .stone-card {
    min-height: 74px !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  body[data-page="build"] .stage-panel {
    overflow: hidden !important;
    background: rgba(255, 253, 248, 0.98) !important;
  }

  body[data-page="build"] .stage-toolbar {
    padding: 18px 24px 12px !important;
  }

  body[data-page="build"] .bracelet-stage {
    min-height: 464px !important;
    margin: 0 24px !important;
    border: 1px solid rgba(221, 204, 181, 0.58) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.9), transparent 35%),
      radial-gradient(ellipse at 51% 60%, rgba(71, 45, 18, 0.18), transparent 46%),
      linear-gradient(180deg, rgba(255, 253, 247, 0.95), rgba(255, 240, 220, 0.82)) !important;
  }

  body[data-page="build"] .bracelet-stage::before {
    opacity: 0.035 !important;
    filter: blur(1px) saturate(0.52) brightness(1.36) !important;
  }

  body[data-page="build"] .bracelet-stage::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 57% !important;
    z-index: 2 !important;
    width: min(86%, 620px) !important;
    height: 176px !important;
    transform: translate(-50%, -50%) rotate(-2deg) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(ellipse at 50% 62%, rgba(69, 43, 16, 0.2), transparent 61%),
      radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.46), transparent 65%) !important;
    filter: blur(9px) !important;
    pointer-events: none !important;
  }

  body[data-page="build"] .bracelet-shadow {
    top: 62% !important;
    width: min(76%, 560px) !important;
    height: 72px !important;
    opacity: 0.88 !important;
    background: radial-gradient(ellipse, rgba(64, 38, 13, 0.26), transparent 70%) !important;
    filter: blur(13px) !important;
  }

  html body[data-page="build"] main.studio-grid .stage-panel .bracelet-stage #braceletRing.bracelet-ring,
  body[data-page="build"] .bracelet-ring,
  body[data-page="build"] .bracelet-ring.has-transparent-product-assets {
    left: 50% !important;
    top: 51% !important;
    width: min(94%, 620px) !important;
    height: min(78%, 380px) !important;
    transform: translate(-50%, -50%) rotate(-4deg) scale(1) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 28px 26px rgba(52, 31, 11, 0.34)) saturate(1.2) contrast(1.1) brightness(0.98) !important;
    z-index: 8 !important;
  }

  body[data-page="build"] .bracelet-bead {
    width: var(--size) !important;
    height: var(--size) !important;
    transform: scale(var(--bead-scale, 1)) !important;
    transform-origin: center center !important;
    opacity: var(--bead-alpha, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    outline-offset: 5px !important;
    filter: saturate(1.18) contrast(1.09) brightness(1.01) !important;
    box-shadow:
      inset -20px -22px 27px rgba(43, 27, 11, 0.3),
      inset 9px 10px 16px rgba(255, 255, 255, 0.72),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      0 22px 28px rgba(49, 30, 10, 0.32) !important;
  }

  body[data-page="build"] .bracelet-bead.product-asset-bead {
    background:
      radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.99) 0 9%, rgba(255, 255, 255, 0.44) 10% 23%, transparent 37%),
      radial-gradient(circle at 76% 80%, rgba(30, 20, 9, 0.23), transparent 45%),
      var(--bead-texture),
      radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--asset-a, var(--a)), #ffffff 28%), transparent 56%),
      linear-gradient(135deg, var(--asset-a, var(--a)), var(--asset-b, var(--b))) !important;
    background-size: 100% 100%, 100% 100%, 122% 122%, 100% 100%, 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: screen, multiply, normal, soft-light, normal !important;
  }

  body[data-page="build"] .bracelet-bead.selected {
    opacity: 1 !important;
    outline: 3px solid rgba(239, 95, 70, 0.95) !important;
    box-shadow:
      0 0 0 8px rgba(239, 95, 70, 0.13),
      inset -20px -22px 27px rgba(43, 27, 11, 0.3),
      inset 9px 10px 16px rgba(255, 255, 255, 0.72),
      0 30px 34px rgba(49, 30, 10, 0.34) !important;
  }

  body[data-page="build"] .bracelet-spacer {
    position: absolute !important;
    width: var(--spacer-size) !important;
    height: var(--spacer-size) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.94) 0 14%, transparent 16%),
      var(--bead-texture),
      linear-gradient(135deg, #fff0b0, #c98f2d 60%, #71400b) !important;
    background-size: 100% 100%, 118% 118%, 100% 100% !important;
    background-position: center !important;
    box-shadow: 0 16px 18px rgba(67, 39, 12, 0.28), inset -9px -10px 12px rgba(76, 44, 9, 0.3), inset 5px 5px 9px rgba(255, 255, 255, 0.56) !important;
  }

  body[data-page="build"] .bracelet-charm {
    width: var(--charm-size) !important;
    height: var(--charm-size) !important;
    z-index: 152 !important;
    transform: scale(1) !important;
    filter: drop-shadow(0 18px 18px rgba(61, 35, 11, 0.28)) !important;
  }

  body[data-page="build"] .center-logo {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-page="build"] .selected-strip {
    width: min(74%, 560px) !important;
    margin: -10px auto 8px !important;
    border: 1px solid rgba(222, 207, 185, 0.72) !important;
    border-radius: 18px !important;
    background: rgba(255, 253, 248, 0.92) !important;
    box-shadow: 0 14px 28px rgba(70, 44, 17, 0.1) !important;
  }

  body[data-page="build"] .meaning-stack {
    gap: 10px !important;
  }

  body[data-page="build"] .meaning-panel {
    padding: 12px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  body[data-page="build"] .library-grid {
    max-height: 176px !important;
    gap: 7px !important;
    overflow: hidden auto !important;
  }

  body[data-page="build"] .library-card {
    min-height: 48px !important;
    padding: 8px 9px !important;
    gap: 2px !important;
  }

  body[data-page="build"] .library-card small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1120px) {
  body[data-page="trending"] .leaderboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(286px, 318px) !important;
    gap: 14px !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .leaderboard-main {
    min-width: 0 !important;
    gap: 10px !important;
  }

  body[data-page="trending"] .design-card-trending {
    grid-template-columns: 56px minmax(150px, 0.24fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "rank preview body"
      "rank preview actions" !important;
    min-height: 154px !important;
    padding: 10px 12px !important;
    gap: 10px 14px !important;
    overflow: hidden !important;
  }

  body[data-page="trending"] .design-card-trending .design-rank-slot,
  body[data-page="trending"] .design-card-trending .rank-badge-trending,
  body[data-page="trending"] .design-card-trending .rank-badge,
  body[data-page="trending"] .design-card-trending .rank-medal {
    grid-area: rank !important;
  }

  body[data-page="trending"] .design-card-trending .trend-creator-cell {
    display: none !important;
  }

  body[data-page="trending"] .design-preview-trending {
    grid-area: preview !important;
    width: 100% !important;
    height: 124px !important;
    min-height: 124px !important;
    overflow: hidden !important;
  }

  body[data-page="trending"] .design-preview-trending .mini-bracelet-commercial {
    transform: translate(-50%, -50%) scale(0.7) rotate(-4deg) !important;
  }

  body[data-page="trending"] .design-body-trending {
    grid-area: body !important;
    min-width: 0 !important;
    overflow: hidden !important;
    align-self: end !important;
  }

  body[data-page="trending"] .design-card-trending .design-body h3 {
    max-width: 100% !important;
    margin: 0 0 4px !important;
    font-size: clamp(23px, 1.72vw, 30px) !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body[data-page="trending"] .design-card-trending .creator-line,
  body[data-page="trending"] .design-card-trending .tag-row,
  body[data-page="trending"] .design-card-trending .stat-row,
  body[data-page="trending"] .design-card-trending .design-link {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="trending"] .design-actions-trending {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  body[data-page="trending"] .design-actions-trending .small-action {
    min-width: 0 !important;
    min-height: 34px !important;
    padding-inline: 6px !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-page="trending"] .leaderboard-right-rail {
    min-width: 0 !important;
  }

  body[data-page="trending"] .leaderboard-rail-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }
}

@media (min-width: 1120px) {
  body[data-page="gift"] .topbar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  body[data-page="gift"] .shipping-strip {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 34px !important;
    transform: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: linear-gradient(90deg, #ef5f46, #f0684b, #ef5f46) !important;
  }

  body[data-page="gift"] .shipping-strip p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 18px !important;
    text-align: center !important;
    color: #fff !important;
  }

  body[data-page="gift"] .topbar-main {
    display: grid !important;
    grid-template-columns: auto minmax(240px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 68px !important;
    padding: 12px 24px !important;
    transform: none !important;
  }

  body[data-page="gift"] .topbar-search {
    display: block !important;
  }

  body[data-page="gift"] .site-nav {
    display: flex !important;
    grid-column: auto !important;
    order: initial !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  body[data-page="gift"] .top-actions {
    display: grid !important;
    grid-column: auto !important;
    justify-items: end !important;
  }

  body[data-page="gift"] .top-actions-primary,
  body[data-page="gift"] .top-actions-secondary {
    display: flex !important;
  }

  body[data-page="gift"] .route-hero[data-route-group~="gift"] {
    min-height: 318px !important;
    margin-top: 14px !important;
    grid-template-columns: minmax(390px, 0.9fr) minmax(440px, 1.1fr) !important;
  }

  body[data-page="gift"] .route-hero-gift .route-hero-copy {
    padding: 34px 38px 28px !important;
  }

  body[data-page="gift"] .route-hero-gift .route-hero-copy h1 {
    font-size: clamp(48px, 3.6vw, 66px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.035em !important;
  }

  body[data-page="gift"] .route-gift-card {
    padding: 18px !important;
    gap: 12px !important;
  }

  body[data-page="gift"] .route-gift-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-page="gift"] .route-gift-steps span {
    min-height: 34px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }

  body[data-page="gift"] #giftDialog.gift-route-panel {
    margin-top: 14px !important;
  }

  body[data-page="gift"] #giftDialog .modal-head {
    padding: 18px 22px 8px !important;
  }

  body[data-page="gift"] #giftDialog .modal-head h2 {
    font-size: clamp(42px, 3.25vw, 58px) !important;
    line-height: 0.98 !important;
  }

  body[data-page="gift"] .gift-page-stepper {
    gap: 10px !important;
    margin: 8px 22px 12px !important;
  }

  body[data-page="gift"] .gift-page-stepper li {
    gap: 5px !important;
    font-size: 11px !important;
    letter-spacing: 0.055em !important;
  }

  body[data-page="gift"] .gift-page-stepper li span {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet-commercial,
  body[data-page="build"] .mini-bracelet-commercial,
  body[data-page="trending"] .mini-bracelet-commercial {
    transform: scale(0.86) rotate(-4deg) !important;
  }

  body[data-page="build"] .bracelet-ring {
    width: min(92vw, 390px) !important;
    height: min(72vw, 300px) !important;
  }

  body[data-page="build"] .bracelet-bead {
    transform: scale(var(--bead-scale, 1)) !important;
  }
}

/* Phase 5.23c: fatal red-box fix for the Home guided Builder renderer.
   The Home card previously overrode product asset textures with flat gradients,
   so the same live renderer looked much weaker than the /build workbench. */
@media (min-width: 1120px) {
  body[data-page="home"] .home-guided-builder[data-route-group~="home"] {
    min-height: 468px !important;
    grid-template-columns: minmax(286px, 0.68fr) minmax(520px, 1.12fr) minmax(380px, 0.84fr) !important;
    align-items: stretch !important;
  }

  body[data-page="home"] .home-builder-preview {
    position: relative !important;
    display: block !important;
    min-height: 430px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    background:
      radial-gradient(circle at 62% 16%, rgba(255, 255, 255, 0.94), transparent 28%),
      radial-gradient(ellipse at 50% 58%, rgba(92, 60, 24, 0.18), transparent 48%),
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 242, 223, 0.9)) !important;
  }

  body[data-page="home"] .home-builder-preview::before {
    content: "" !important;
    position: absolute !important;
    inset: 26px 34px 114px !important;
    border-radius: 42px !important;
    opacity: 0.26 !important;
    background:
      radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.88), transparent 22%),
      radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.68), transparent 24%),
      radial-gradient(ellipse at 50% 80%, rgba(118, 80, 35, 0.18), transparent 50%),
      linear-gradient(135deg, rgba(235, 215, 185, 0.58), rgba(255, 250, 241, 0.5)) !important;
    filter: blur(0.4px) !important;
    z-index: 0 !important;
  }

  body[data-page="home"] .home-builder-preview::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 100px !important;
    width: min(72%, 390px) !important;
    height: 66px !important;
    transform: translateX(-50%) rotate(-2deg) !important;
    border-radius: 999px !important;
    background: radial-gradient(ellipse, rgba(61, 38, 15, 0.28), rgba(61, 38, 15, 0.08) 54%, transparent 72%) !important;
    opacity: 0.82 !important;
    filter: blur(13px) !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: 20px !important;
    width: min(96%, 540px) !important;
    height: 316px !important;
    min-height: 316px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    filter: drop-shadow(0 30px 28px rgba(54, 33, 12, 0.26)) !important;
    z-index: 4 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided {
    width: 100% !important;
    height: 316px !important;
    min-height: 316px !important;
    border-radius: 34px !important;
    overflow: visible !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided::before {
    left: 50% !important;
    top: 50% !important;
    width: 370px !important;
    height: 224px !important;
    transform: translate(-50%, -50%) rotate(-4deg) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(ellipse at 50% 62%, rgba(76, 49, 20, 0.19), transparent 60%),
      radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, 0.56), transparent 64%) !important;
    filter: blur(7px) !important;
    opacity: 0.82 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    left: 50% !important;
    top: 48% !important;
    width: 420px !important;
    height: 316px !important;
    transform: translate(-50%, -50%) !important;
    filter:
      drop-shadow(0 28px 24px rgba(54, 33, 12, 0.3))
      saturate(1.26)
      contrast(1.12)
      brightness(1.01) !important;
    z-index: 10 !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet-commercial {
    width: 190px !important;
    height: 190px !important;
    transform: scale(1.86) rotate(-5deg) !important;
    transform-origin: center center !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bracelet-commercial .mini-bracelet-cord {
    width: 152px !important;
    height: 108px !important;
    border-color: rgba(139, 102, 62, 0.22) !important;
    box-shadow:
      inset 0 0 18px rgba(83, 52, 19, 0.13),
      0 16px 26px rgba(67, 42, 16, 0.12) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead.product-asset-bead,
  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-bead.mini-bead-image {
    width: 22px !important;
    height: 22px !important;
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, 0.64) !important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.99) 0 9%, rgba(255, 255, 255, 0.42) 10% 23%, transparent 37%),
      radial-gradient(circle at 74% 78%, rgba(33, 22, 10, 0.22), transparent 45%),
      var(--bead-texture),
      radial-gradient(circle at 44% 44%, color-mix(in srgb, var(--asset-a, var(--a)), #ffffff 30%), transparent 58%),
      linear-gradient(135deg, var(--asset-a, var(--a)), var(--asset-b, var(--b))) !important;
    background-size: 100% 100%, 100% 100%, 122% 122%, 100% 100%, 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: screen, multiply, normal, soft-light, normal !important;
    box-shadow:
      inset -10px -12px 15px rgba(43, 27, 11, 0.28),
      inset 6px 7px 10px rgba(255, 255, 255, 0.74),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      0 12px 18px rgba(52, 33, 12, 0.24) !important;
    filter: saturate(1.2) contrast(1.08) brightness(1.02) !important;
  }

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .mini-charm {
    width: 32px !important;
    height: 32px !important;
    color: #7a430a !important;
    background:
      radial-gradient(circle at 33% 24%, rgba(255, 255, 255, 0.98) 0 12%, transparent 14%),
      linear-gradient(135deg, #ffe8a3, #d98a12 58%, #8f5107) !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    box-shadow:
      inset -8px -9px 13px rgba(75, 42, 8, 0.3),
      inset 4px 5px 8px rgba(255, 255, 255, 0.52),
      0 15px 20px rgba(93, 57, 12, 0.26) !important;
  }

  body[data-page="home"] .home-builder-preview > strong {
    position: absolute !important;
    left: 50% !important;
    bottom: 72px !important;
    transform: translateX(-50%) !important;
    z-index: 22 !important;
    margin: 0 !important;
    padding: 8px 24px !important;
    border-radius: 999px !important;
    color: #07584d !important;
    background: linear-gradient(180deg, rgba(205, 255, 237, 0.98), rgba(179, 242, 219, 0.9)) !important;
    box-shadow: 0 12px 22px rgba(7, 88, 77, 0.12) !important;
  }

  body[data-page="home"] .home-builder-preview > p {
    position: absolute !important;
    left: 50% !important;
    bottom: 38px !important;
    transform: translateX(-50%) !important;
    z-index: 22 !important;
    width: max-content !important;
    max-width: 86% !important;
    margin: 0 !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 9px 18px rgba(62, 40, 18, 0.08) !important;
  }

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

@media (min-width: 760px) and (max-width: 1119px) {
  body[data-page="home"] .home-builder-preview {
    min-height: 372px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-builder-ring,
  body[data-page="home"] .home-builder-ring:has(.product-bracelet-preview) {
    width: min(92vw, 500px) !important;
    height: 286px !important;
    min-height: 286px !important;
  }

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

@media (max-width: 760px) {
  body[data-page="home"] .home-builder-preview {
    min-height: 330px !important;
    overflow: hidden !important;
  }

  body[data-page="home"] .home-builder-ring,
  body[data-page="home"] .home-builder-ring:has(.product-bracelet-preview) {
    width: min(92vw, 360px) !important;
    height: 236px !important;
    min-height: 236px !important;
    margin: -4px auto -10px !important;
  }

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

  body[data-page="home"] .home-builder-preview > strong,
  body[data-page="home"] .home-builder-preview > p,
  body[data-page="home"] .home-builder-controls {
    position: relative !important;
    z-index: 22 !important;
  }
}

/* Phase 5.23d: stabilize the visible red-box areas after browser QA. */
@media (min-width: 1120px) {
  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: 424px !important;
    height: 318px !important;
    opacity: 1 !important;
    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
  }

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

  body[data-page="home"] .home-builder-preview > strong {
    bottom: 88px !important;
  }

  body[data-page="home"] .home-builder-preview > p {
    bottom: 52px !important;
  }

  body[data-page="home"] .home-builder-controls {
    bottom: 12px !important;
  }

  body[data-page="trending"] .design-actions-trending {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(72px, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(72px, 1fr) !important;
    align-items: stretch !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .design-actions-trending .small-action,
  body[data-page="trending"] .design-actions-trending .copy-action,
  body[data-page="trending"] .design-actions-trending .remix-action,
  body[data-page="trending"] .design-actions-trending .gift-action {
    display: inline-flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 7px !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  body[data-page="trending"] .design-actions-trending .small-action svg {
    flex: 0 0 14px !important;
  }

  body[data-page="gift"] header.topbar {
    position: relative !important;
    display: block !important;
    height: auto !important;
    min-height: 102px !important;
    max-width: min(1348px, calc(100vw - 92px)) !important;
    margin: 0 auto 16px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
  }

  body[data-page="gift"] header.topbar .shipping-strip {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    transform: none !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #ef5f46, #f26e4d, #ef5f46) !important;
  }

  body[data-page="gift"] header.topbar .shipping-strip p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 18px !important;
    text-align: center !important;
    color: #fff !important;
  }

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

  body[data-page="gift"] header.topbar .topbar-main {
    display: grid !important;
    grid-template-columns: auto minmax(240px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 16px !important;
    height: auto !important;
    min-height: 68px !important;
    padding: 12px 24px !important;
    transform: none !important;
  }

  body[data-page="gift"] header.topbar .topbar-search,
  body[data-page="gift"] header.topbar .site-nav,
  body[data-page="gift"] header.topbar .topbar-main > .site-nav,
  body[data-page="gift"] header.topbar .top-actions,
  body[data-page="gift"] header.topbar .top-actions-primary,
  body[data-page="gift"] header.topbar .top-actions-secondary {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body[data-page="gift"] header.topbar .topbar-search {
    display: block !important;
  }
}

/* Phase 5.23e: final local visual QA tightening. */
@media (min-width: 1120px) {
  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 {
    top: 32px !important;
  }

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

  body[data-page="trending"] .leaderboard-main .design-card-trending {
    grid-template-columns: 56px 150px minmax(0, 1fr) !important;
    grid-template-rows: minmax(92px, auto) 78px !important;
    grid-template-areas:
      "rank preview body"
      "rank preview actions" !important;
    min-height: 194px !important;
    height: auto !important;
    padding: 14px 14px 12px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body[data-page="trending"] .leaderboard-main .design-preview-trending {
    width: 132px !important;
    height: 132px !important;
    min-height: 132px !important;
    align-self: center !important;
  }

  body[data-page="trending"] .leaderboard-main .design-body-trending {
    align-self: end !important;
    padding-top: 2px !important;
  }

  body[data-page="trending"] .leaderboard-main .design-actions-trending {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-auto-rows: 34px !important;
    align-self: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 74px !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .leaderboard-main .design-actions-trending .small-action,
  body[data-page="trending"] .leaderboard-main .design-actions-trending .copy-action,
  body[data-page="trending"] .leaderboard-main .design-actions-trending .remix-action,
  body[data-page="trending"] .leaderboard-main .design-actions-trending .gift-action {
    display: inline-flex !important;
    width: auto !important;
    height: 34px !important;
    min-height: 34px !important;
    transform: none !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending .design-actions-trending .small-action,
  body[data-page="trending"] .leaderboard-main .design-card-trending .design-actions-trending .small-action:not(.copy-action),
  body[data-page="trending"] .leaderboard-main .design-card-trending .design-actions-trending .small-action:nth-child(n + 2),
  body[data-page="trending"] .leaderboard-main .design-card-trending .design-actions-trending .small-action:nth-child(n + 3):not(:last-child),
  body[data-page="trending"] .leaderboard-main .design-card-trending .design-actions-trending .small-action:nth-last-child(-n + 4) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding-inline: 8px !important;
  }
}