/* Phase 5.24: harden the red-box production modules against clipping and mid-width layout collapse. */

:root {
  --phase524-sticky-offset: 118px;
}

body[data-page] .brand-mark strong {
  line-height: 1.08 !important;
  overflow: visible !important;
}

body[data-page] .app-shell > [data-route-group]:not(dialog):not(.route-panel),
body[data-page] .app-shell > .route-panel {
  scroll-margin-top: var(--phase524-sticky-offset) !important;
}

body[data-page] .topbar {
  z-index: 120 !important;
}

@media (min-width: 1180px) {
  body[data-page="build"] .catalog {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  body[data-page="build"] .catalog-popular-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body[data-page="build"] .catalog-popular-grid .stone-card {
    width: auto !important;
    min-width: 0 !important;
    min-height: 118px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-content: start !important;
    padding: 10px 7px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  body[data-page="build"] .catalog-popular-grid .stone-card .bead-swatch {
    width: 50px !important;
    height: 50px !important;
  }

  body[data-page="build"] .catalog-more-section {
    display: grid !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  body[data-page="build"] .catalog-more-section h3 {
    width: auto !important;
    margin: 2px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  body[data-page="build"] .catalog-more-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body[data-page="build"] .catalog-more-list .stone-card {
    width: 100% !important;
    min-height: 76px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: stretch !important;
    padding: 8px 10px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  body[data-page="build"] .catalog-more-list .stone-card .bead-swatch {
    width: 40px !important;
    height: 40px !important;
  }

  body[data-page="build"] .stone-card > span:last-child {
    min-width: 0 !important;
  }

  body[data-page="build"] .stone-card strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  body[data-page="build"] .stone-card small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
  }

  body[data-page="build"] .library-grid {
    max-height: none !important;
    overflow: visible !important;
    gap: 8px !important;
    padding-right: 0 !important;
  }

  body[data-page="build"] .library-card {
    min-height: 62px !important;
    padding: 10px 12px !important;
    align-content: center !important;
    gap: 4px !important;
  }

  body[data-page="build"] .library-card small {
    -webkit-line-clamp: 2 !important;
    line-height: 1.22 !important;
  }
}

@media (min-width: 1120px) {
  body[data-page="trending"] .leaderboard-main .design-card-trending {
    grid-template-rows: minmax(110px, auto) minmax(74px, auto) !important;
    min-height: 208px !important;
    overflow: visible !important;
    align-items: center !important;
  }

  body[data-page="trending"] .leaderboard-main .design-body-trending {
    align-self: start !important;
    align-content: start !important;
    min-height: 104px !important;
    overflow: visible !important;
    padding-top: 8px !important;
  }

  body[data-page="trending"] .trend-title-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-height: 36px !important;
    overflow: visible !important;
  }

  body[data-page="trending"] .leaderboard-main .design-card-trending .design-body h3 {
    overflow: visible !important;
    line-height: 1.08 !important;
    padding-top: 2px !important;
  }

  body[data-page="trending"] .leaderboard-main .design-preview-trending {
    overflow: hidden !important;
    align-self: center !important;
  }
}

@media (min-width: 761px) and (max-width: 1279px) {
  body[data-page="home"] .home-guided-builder[data-route-group~="home"] {
    width: min(calc(100vw - 56px), 1060px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    min-height: 0 !important;
    padding: 24px !important;
    overflow: visible !important;
  }

  body[data-page="home"] .home-builder-steps {
    max-width: none !important;
  }

  body[data-page="home"] .home-builder-steps ol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="home"] .home-builder-steps li {
    min-width: 0 !important;
    line-height: 1.18 !important;
  }

  body[data-page="home"] .home-builder-preview {
    width: 100% !important;
    max-width: 680px !important;
    min-height: 360px !important;
    justify-self: center !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), transparent 34%),
      radial-gradient(ellipse at 50% 72%, rgba(80, 50, 18, 0.14), transparent 48%),
      linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 242, 223, 0.9)) !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%, 500px) !important;
    height: 280px !important;
    min-height: 280px !important;
    margin: 4px auto 0 !important;
    transform: translateY(24px) scale(0.94) !important;
  }

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

  body[data-page="home"] .home-builder-ring .product-bracelet-preview-home-guided .product-bracelet-live {
    left: 50% !important;
    top: 50% !important;
    width: 300px !important;
    height: 300px !important;
    transform: translate(-50%, -47%) scale(0.92) !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.42) rotate(-5deg) !important;
  }

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

@media (min-width: 761px) and (max-width: 1119px) {
  body[data-page="gift"] header.topbar {
    display: block !important;
    width: min(calc(100vw - 28px), 980px) !important;
    margin: 0 auto 14px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: rgba(255, 253, 248, 0.96) !important;
  }

  body[data-page="gift"] header.topbar .shipping-strip {
    position: relative !important;
    display: grid !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 32px !important;
    transform: none !important;
    color: #fff !important;
    background: linear-gradient(90deg, #ef5f46, #f26e4d, #ef5f46) !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(0, 1fr) auto !important;
    min-height: 64px !important;
    padding: 10px 18px !important;
    gap: 12px !important;
  }

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

  body[data-page="gift"] #giftDialog.gift-route-panel {
    width: min(calc(100vw - 32px), 980px) !important;
    margin: 12px auto 36px !important;
    overflow: visible !important;
  }

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

  body[data-page="gift"] #giftDialog .gift-checkout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
  }

  body[data-page="gift"] #giftDialog .gift-checkout-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  body[data-page="gift"] #giftDialog form#giftForm.gift-form {
    width: 100% !important;
    grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr) !important;
    grid-template-areas:
      "occasion calendar"
      "address address" !important;
    gap: 16px !important;
  }

  body[data-page="gift"] #giftDialog .gift-current-design {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="gift"] #giftDialog .gift-summary-card {
    position: static !important;
  }

  body[data-page="gift"] #giftDialog .gift-back-button {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body[data-page="gift"] #giftDialog .gift-back-button {
    display: none !important;
  }
}