/* Route-scoped responsive contract for the standalone editor.
   This file is intentionally loaded last so legacy compatibility CSS cannot
   change the workbench geometry after the page has settled. */

html[data-jewdiy-route="editor"] #builder,
html[data-jewdiy-route="editor"] #builder *,
html[data-jewdiy-route="editor"] #builder *::before,
html[data-jewdiy-route="editor"] #builder *::after {
  box-sizing: border-box;
}

@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-bottom: 20px !important;
    overflow-x: clip !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .center-stage {
    grid-column: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .preview-layout {
    grid-template-rows: clamp(220px, 62vw, 264px) auto !important;
    gap: 8px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .design-canvas {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(220px, 62vw, 264px) !important;
    height: clamp(220px, 62vw, 264px) !important;
    max-height: clamp(220px, 62vw, 264px) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #builderTourOpen,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #presetSelect,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #undoDesign,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #redoDesign,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #clearDesign {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-zoom-pad button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-zoom-pad button[data-canvas-fit] {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .bottom-tray {
    --jewdiy-mobile-tray-height: clamp(250px, 36dvh, 304px);
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    inset: auto !important;
    order: 4 !important;
    width: 100% !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: var(--jewdiy-mobile-tray-height) !important;
    max-height: var(--jewdiy-mobile-tray-height) !important;
    margin-top: 0 !important;
    padding: 8px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    gap: 6px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    z-index: var(--z-editor-canvas) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .bottom-tray-head {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-tools {
    display: grid !important;
    visibility: visible !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-tools > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-tools > span::after {
    content: "mm";
    color: #5d6a5d !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-size-options {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-size-options::-webkit-scrollbar,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail::-webkit-scrollbar {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-size-options button {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-inline: 4px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-shell {
    display: grid !important;
    visibility: visible !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail-row,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail-children {
    display: contents !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail-label {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-rail button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(64px, 20vw, 78px) !important;
    max-width: 120px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-scroll {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 118px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 4px !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 52px 34px 18px !important;
    align-content: start !important;
    justify-items: center !important;
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    padding: 5px 4px !important;
    gap: 2px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item .mini-bead {
    grid-row: 1 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item strong {
    grid-row: 2 !important;
    display: -webkit-box !important;
    max-height: 34px !important;
    margin: 0 !important;
    font-size: 10.4px !important;
    line-height: 1.12 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item .tray-price {
    grid-row: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 6px !important;
    font-size: 9.6px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item .detail-chip {
    top: 5px !important;
    right: 5px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .mobile-builder-inline-cta {
    order: 3 !important;
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    margin-top: 0 !important;
    padding: 8px !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder #canvasPrice,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .design-timer {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-status {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: calc(100% - 18px) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .designer-sign-panel {
    order: 5 !important;
  }
}

@media (max-width: 380px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-scroll {
    grid-auto-rows: 112px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item {
    grid-template-rows: 48px 32px 18px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item .mini-bead {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item strong {
    max-height: 32px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 340px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-tools {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-tools > span {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-size-options {
    gap: 2px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-size-options button {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-fit-badge {
    display: none !important;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  html[data-jewdiy-route="editor"] #builder.builder {
    display: grid !important;
    grid-template-columns: minmax(330px, 4fr) minmax(0, 8fr) !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding-inline: 12px !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
    align-self: start !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel > * {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .panel-header {
    grid-row: 1 !important;
    padding-bottom: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .panel-header p {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .tabs {
    grid-row: 2 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .material-taxonomy {
    grid-row: 3 !important;
    max-height: 104px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-label {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-height: none !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills::-webkit-scrollbar {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills .filter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 84px !important;
    max-width: 138px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding-inline: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-selector {
    grid-row: 4 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-options {
    grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-options button {
    width: 100% !important;
    min-width: 44px !important;
    padding-inline: 4px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .search-bar {
    grid-row: 5 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .catalog {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 6 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 164px !important;
    width: 100% !important;
    height: min(520px, calc(100svh - 248px)) !important;
    min-height: 360px !important;
    max-height: 520px !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 70px minmax(48px, 1fr) 22px !important;
    align-items: start !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
    padding: 8px !important;
    gap: 4px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-top {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: center !important;
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-art,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .mini-bead {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-info {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    min-width: 0 !important;
    padding-inline: 2px !important;
    gap: 3px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card h3 {
    width: 100% !important;
    max-height: 30px !important;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-meta {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card-price {
    margin-top: 0 !important;
    font-size: 10.5px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .price-line {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 22px !important;
    margin: 0 !important;
    font-size: 9.5px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .price-line span {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .detail-chip,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-detail-chip {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .detail-chip::before,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-detail-chip::before {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .detail-chip::after,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-detail-chip::after {
    content: "i" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #2b6742 !important;
    font: 900 15px/1 Georgia, "Times New Roman", serif !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-size-badge {
    top: 6px !important;
    right: auto !important;
    left: 6px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .center-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .center-stage .design-canvas {
    width: 100% !important;
    min-height: 430px !important;
    height: clamp(430px, 52vw, 560px) !important;
    max-height: 560px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .center-stage .designer-sign-panel {
    min-height: 0 !important;
    max-height: 112px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .center-stage .share-card-options,
  html[data-jewdiy-route="editor"] #builder.builder .center-stage .share-buttons,
  html[data-jewdiy-route="editor"] #builder.builder .center-stage .share-reward-tip,
  html[data-jewdiy-route="editor"] #builder.builder .center-stage .mobile-share-quick {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .right-panel {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .right-panel .summary {
    grid-column: 1 / 9 !important;
    grid-row: 1 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .right-panel .line-items {
    grid-column: 1 / 9 !important;
    grid-row: 2 !important;
    max-height: 220px !important;
    overflow-y: auto !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .right-panel .checkout {
    grid-column: 9 / 13 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1181px) {
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .detail-chip,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-detail-chip {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}

/* Final workbench geometry: library left, canvas center, quote right. */
html[data-jewdiy-route="editor"] {
  scroll-padding-top: 104px;
}

html[data-jewdiy-route="editor"] #builder {
  scroll-margin-top: 104px;
}

@media (min-width: 1181px) {
  html[data-jewdiy-route="editor"] #builder.builder {
    display: grid !important;
    grid-template-columns: minmax(286px, 3fr) minmax(520px, 6fr) minmax(286px, 3fr) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    width: min(calc(100% - 24px), 1600px) !important;
    min-height: calc(100svh - 104px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 12px 0 24px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    position: sticky !important;
    top: 101px !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
    width: 100% !important;
    height: calc(100svh - 113px) !important;
    min-height: 620px !important;
    max-height: calc(100svh - 113px) !important;
    padding: 12px !important;
    gap: 8px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .panel-header {
    padding: 0 0 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .panel-header h2 {
    margin: 2px 0 0 !important;
    font-size: 19px !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .panel-header p,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-label,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-selector-head {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .material-taxonomy {
    max-height: 92px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-row {
    display: block !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills::-webkit-scrollbar {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .taxonomy-pills .filter {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: 120px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding-inline: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .tabs,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-options {
    min-height: 40px !important;
    height: 40px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .tabs button,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .size-options button {
    min-height: 40px !important;
    height: 40px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .search-bar {
    min-height: 42px !important;
    height: 42px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .search-bar input {
    min-height: 42px !important;
    height: 42px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .catalog {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 142px !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    padding: 4px !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card {
    display: grid !important;
    grid-template-rows: 66px minmax(34px, 1fr) 18px !important;
    align-content: start !important;
    justify-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    padding: 6px !important;
    gap: 3px !important;
    border-radius: 8px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-top,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-art,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .mini-bead {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card h3 {
    max-height: 30px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.16 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-meta,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .price-line > span {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .left-panel .price-line,
  html[data-jewdiy-route="editor"] #builder.builder .left-panel .product-card-price {
    min-height: 18px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .center-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
    position: sticky !important;
    top: 101px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .canvas-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .canvas-toolbar {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-template-rows: 44px 44px !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .mode-toggle {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .layout-toggle {
    grid-column: 3 / span 5 !important;
    grid-row: 1 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder #builderTourOpen {
    grid-column: 10 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .tool-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(130px, 1fr) repeat(5, 44px) minmax(104px, auto) !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .tool-actions .preset-picker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .preset-picker,
  html[data-jewdiy-route="editor"] #builder.builder #presetSelect {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .tool-icon-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .tool-icon-button span {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder #autoFill {
    width: 100% !important;
    min-width: 104px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .zoom-controls,
  html[data-jewdiy-route="editor"] #builder.builder #view3dToggle,
  html[data-jewdiy-route="editor"] #builder.builder #realScaleToggle {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .preview-layout {
    display: grid !important;
    grid-template-rows: clamp(470px, calc(100svh - 340px), 590px) auto !important;
    width: 100% !important;
    gap: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .design-canvas {
    width: 100% !important;
    min-height: 470px !important;
    height: clamp(470px, calc(100svh - 340px), 590px) !important;
    max-height: 590px !important;
    border-radius: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .canvas-length-control {
    min-height: 88px !important;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .designer-sign-panel {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .signature-field {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .signature-field label {
    font-size: 11px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder #designerName {
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .signature-preview,
  html[data-jewdiy-route="editor"] #builder.builder .share-card-options,
  html[data-jewdiy-route="editor"] #builder.builder .share-buttons,
  html[data-jewdiy-route="editor"] #builder.builder .share-reward-tip {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .mobile-share-quick {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(90px, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .mobile-share-quick button {
    min-height: 44px !important;
    height: 44px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
  }

  html[data-jewdiy-route="editor"] #builder.builder .right-panel {
    grid-column: 3 !important;
    grid-row: 1 !important;
    order: 3 !important;
    position: sticky !important;
    top: 101px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: calc(100svh - 113px) !important;
    min-height: 620px !important;
    max-height: calc(100svh - 113px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
}

/* Mobile editor: protect the canvas as the primary task, then quote and beads. */
@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] {
    scroll-padding-top: 70px;
  }

  html[data-jewdiy-route="editor"] #builder {
    scroll-margin-top: 70px;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder {
    width: calc(100% - 12px) !important;
    margin-inline: auto !important;
    padding: 8px 0 20px !important;
    gap: 8px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .center-stage,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-card {
    padding: 7px !important;
    gap: 7px !important;
    border: 1px solid #dde3d9 !important;
    border-radius: 8px !important;
    background: #fbfaf6 !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .canvas-toolbar {
    padding: 0 !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .preview-layout {
    grid-template-rows: clamp(286px, 78vw, 320px) auto !important;
    gap: 7px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .design-canvas {
    width: 100% !important;
    min-height: clamp(286px, 78vw, 320px) !important;
    height: clamp(286px, 78vw, 320px) !important;
    max-height: 320px !important;
    border-radius: 8px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .mobile-builder-inline-cta {
    order: 4 !important;
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    margin-top: 0 !important;
    padding: 7px !important;
    border: 1px solid #d8dfd4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .bottom-tray {
    --jewdiy-mobile-tray-height: clamp(238px, 30.5dvh, 280px);
    order: 3 !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: var(--jewdiy-mobile-tray-height) !important;
    max-height: var(--jewdiy-mobile-tray-height) !important;
    margin-top: 0 !important;
    padding: 8px !important;
    border: 1px solid #d8dfd4 !important;
    border-radius: 8px !important;
    background: #f8f7f2 !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-shell {
    min-height: 0 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-scroll {
    grid-auto-rows: 120px !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item {
    grid-template-rows: 50px 34px 18px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .tray-item .mini-bead {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .designer-sign-panel {
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel {
    margin-top: 8px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .summary > .eyebrow,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .summary > h2,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .summary > p,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .quote-margin-note,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .quote-flow,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .value-stack {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .right-panel .summary {
    padding: 12px !important;
  }
}

@media (max-width: 340px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .preview-layout {
    grid-template-rows: 270px auto !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder .design-canvas {
    min-height: 270px !important;
    height: 270px !important;
    max-height: 270px !important;
  }
}