/* JewDIY mobile builder and late storefront layout hotfixes.
   Extracted from index.html on 2026-06-13 to keep the shell inside performance budget.
   This file is intentionally loaded after the main inline style so these repair rules stay last in cascade. */
:root {
  --z-editor-canvas: 100;
  --z-side-panel: 500;
  --z-header: 1000;
  --z-dropdown: 2000;
  --z-modal: 3000;
  --z-tooltip: 4000;
}
/* Hotfix: normal editor keeps controls compact; fullscreen becomes preview-only. */
	    @keyframes jewdiyNoticeAutoFade {
	      0%, 76% { opacity: 1; }
	      100% { opacity: 0; }
	    }

	    .toast[hidden],
	    .design-companion[hidden] {
	      display: none !important;
	    }

	    .toast,
	    .toast.show {
	      position: fixed !important;
	      left: 50% !important;
	      right: auto !important;
	      top: max(72px, calc(env(safe-area-inset-top) + 54px)) !important;
	      bottom: auto !important;
	      z-index: var(--z-tooltip) !important;
	      width: min(360px, calc(100vw - 28px)) !important;
	      max-width: min(360px, calc(100vw - 28px)) !important;
	      min-height: 0 !important;
	      max-height: none !important;
	      padding: 10px 14px !important;
	      border-radius: 14px !important;
	      transform: translate(-50%, -10px) scale(0.98) !important;
	      pointer-events: none !important;
	      text-align: center !important;
	      white-space: normal !important;
	    }

	    .toast.show {
	      transform: translate(-50%, 0) scale(1) !important;
	      animation: jewdiyNoticeAutoFade var(--notice-duration, 2600ms) ease forwards !important;
	    }

	    @media (min-width: 861px) {
	      .left-panel {
	        display: grid;
	        grid-template-columns: 126px minmax(0, 1fr);
	        align-items: stretch;
	      }

	      .left-panel .panel-header,
	      .left-panel .tabs {
	        grid-column: 1 / -1;
	      }

	      .left-panel .material-taxonomy {
	        grid-column: 1;
	        grid-row: 3 / span 4;
	        grid-template-columns: 1fr;
	        align-self: stretch;
	        min-height: min(540px, calc(100vh - 300px));
	        max-height: min(690px, calc(100vh - 230px));
	        overflow-y: auto;
	        padding: 10px 8px;
	        border-right: 1px solid rgba(221, 226, 216, 0.8);
	        border-bottom: 0;
	        scrollbar-width: thin;
	      }

	      .left-panel .taxonomy-row {
	        grid-template-columns: 1fr;
	      }

	      .left-panel .taxonomy-row[data-taxonomy-row="children"] {
	        margin-left: 0;
	        padding-left: 9px;
	      }

	      .left-panel .taxonomy-pills {
	        max-height: none;
	      }

	      .left-panel .taxonomy-pills .filter {
	        min-height: 30px;
	        padding: 6px 7px;
	        font-size: 11px;
	        text-align: left;
	      }

	      .left-panel .size-selector,
	      .left-panel .search-bar,
	      .left-panel .catalog {
	        grid-column: 2;
	        min-width: 0;
	      }

		      .left-panel .catalog {
		        max-height: min(520px, calc(100vh - 338px));
		        overflow-y: auto;
		        align-content: start;
		      }
		    }

		    /* Hotfix: floating creation notices must never sit inside or block the editor. */
		    .design-companion {
		      position: fixed !important;
		      left: 50% !important;
		      right: auto !important;
		      top: max(72px, calc(env(safe-area-inset-top) + 54px)) !important;
		      bottom: auto !important;
		      z-index: var(--z-tooltip) !important;
		      width: min(360px, calc(100vw - 28px)) !important;
		      max-width: min(360px, calc(100vw - 28px)) !important;
		      min-height: 0 !important;
		      max-height: none !important;
		      padding: 9px 12px !important;
		      grid-template-columns: 22px minmax(0, 1fr) !important;
		      gap: 8px !important;
		      border-radius: 14px !important;
		      transform: translate(-50%, -10px) scale(0.98) !important;
		      pointer-events: none !important;
		      text-align: left !important;
		    }

		    .design-companion.show {
		      transform: translate(-50%, 0) scale(1) !important;
		      animation: jewdiyNoticeAutoFade var(--notice-duration, 2800ms) ease forwards !important;
		    }

		    .design-companion-text {
		      display: block !important;
		      overflow: hidden !important;
		      -webkit-line-clamp: unset !important;
		      -webkit-box-orient: initial !important;
		      font-size: 12px !important;
		      line-height: 1.38 !important;
		      text-align: left !important;
		    }

		    .design-companion-actions {
		      display: none !important;
		      pointer-events: none !important;
		    }

		    .signature-field,
		    .signature-field label,
		    .designer-sign-panel {
		      text-align: left;
		    }

		    .signature-field label {
		      justify-self: start;
		    }

		    .signature-preview {
		      justify-self: stretch;
		      text-align: center;
		    }

		    .canvas-length-control {
		      grid-template-columns: 1fr !important;
		      gap: 6px !important;
		      align-items: stretch !important;
		      overflow: hidden;
		    }

		    .canvas-net-wrist,
		    .canvas-inner-label,
		    .canvas-length-row {
		      grid-column: 1 !important;
		    }

		    .canvas-inner-label {
		      display: flex !important;
		      align-items: center;
		      justify-content: space-between;
		      gap: 8px;
		      min-width: 0;
		    }

		    .canvas-length-row {
		      width: 100%;
		      grid-template-columns: 28px minmax(0, 1fr) 68px 28px !important;
		      justify-content: stretch !important;
		      min-width: 0;
		    }

		    .canvas-length-row input[type="range"] {
		      width: 100%;
		      min-width: 0;
		      max-width: none !important;
		    }

		    .canvas-length-row input[type="number"],
		    .canvas-net-wrist input {
		      width: 68px;
		      min-width: 0;
		    }

	    .wrist-comfort-tip {
	      display: -webkit-box !important;
	      -webkit-line-clamp: 2;
	      -webkit-box-orient: vertical;
	      max-height: 2.6em;
	      margin-top: 0;
	    }

	    body.canvas-fullscreen-open .builder.builder-fullscreen {
	      display: block !important;
	      padding: 0 !important;
	      background: #10140f !important;
	    }

	    body.canvas-fullscreen-open .builder.builder-fullscreen .left-panel,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .right-panel,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-toolbar,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .designer-sign-panel,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-control,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .bottom-tray,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .quick-row,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .mobile-builder-inline-cta {
	      display: none !important;
	    }

	    body.canvas-fullscreen-open .builder.builder-fullscreen .center-stage,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-card,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .preview-layout {
	      display: block !important;
	      width: 100% !important;
	      height: 100% !important;
	      max-height: none !important;
	      min-height: 0 !important;
	      padding: 0 !important;
	      margin: 0 !important;
	      overflow: hidden !important;
	      border: 0 !important;
	      border-radius: 0 !important;
	      box-shadow: none !important;
	      background: transparent !important;
	    }

	    body.canvas-fullscreen-open .builder.builder-fullscreen .design-canvas,
	    body.canvas-fullscreen-open .design-canvas.canvas-fullscreen {
	      position: fixed !important;
	      inset: 0 !important;
	      z-index: var(--z-modal) !important;
	      width: 100vw !important;
	      height: 100dvh !important;
	      max-width: none !important;
	      min-height: 0 !important;
	      border: 0 !important;
	      border-radius: 0 !important;
	      box-shadow: none !important;
	      cursor: grab;
	      touch-action: none !important;
	    }

	    body.canvas-fullscreen-open .design-canvas.canvas-fullscreen.is-panning {
	      cursor: grabbing;
	    }

	    body.canvas-fullscreen-open .canvas-status,
	    body.canvas-fullscreen-open .canvas-note,
	    body.canvas-fullscreen-open .canvas-fit-badge,
	    body.canvas-fullscreen-open .drop-hint,
	    body.canvas-fullscreen-open .fullscreen-exit-hint,
	    body.canvas-fullscreen-open .design-companion,
	    body.canvas-fullscreen-open .toast {
	      display: none !important;
	    }

	    body.canvas-fullscreen-open .preview-item.selected {
	      filter: none !important;
	    }

	    body.canvas-fullscreen-open .preview-item.selected::after,
	    body.canvas-fullscreen-open .design-canvas.drag-over::after,
	    body.canvas-fullscreen-open .design-canvas.drag-remove::after {
	      opacity: 0 !important;
	      box-shadow: none !important;
	    }

	    body.canvas-fullscreen-open .canvas-zoom-pad {
	      position: fixed !important;
	      left: 50% !important;
	      bottom: max(18px, env(safe-area-inset-bottom)) !important;
	      z-index: var(--z-tooltip) !important;
	      transform: translateX(-50%) !important;
	    }

	    body.canvas-fullscreen-open .design-canvas.canvas-fullscreen .canvas-fullscreen-toggle,
	    body.canvas-fullscreen-open .canvas-fullscreen-toggle {
	      display: none !important;
	    }

	    body.canvas-fullscreen-open .fullscreen-exit-button {
	      z-index: var(--z-tooltip) !important;
	      display: inline-flex !important;
	    }

	    @media (max-width: 860px) {
	      .canvas-length-control {
	        grid-template-columns: 1fr !important;
	        padding: 9px 10px !important;
	        gap: 8px !important;
	        overflow: hidden !important;
	      }

	      .canvas-net-wrist,
	      .canvas-inner-label,
	      .canvas-length-row {
	        grid-column: 1;
	      }

	      .canvas-length-row {
	        grid-template-columns: 34px minmax(0, 1fr) 72px 34px !important;
	        justify-content: stretch !important;
	        align-items: center !important;
	        gap: 8px !important;
	      }

	      .canvas-length-row input[type="range"] {
	        width: 100%;
	        min-width: 0;
	        max-width: none;
	      }
	    }

		    @media (max-width: 540px) {
		      .toast,
		      .toast.show {
		        top: max(70px, calc(env(safe-area-inset-top) + 52px)) !important;
		        width: min(292px, calc(100vw - 72px)) !important;
		        max-width: min(292px, calc(100vw - 72px)) !important;
		        padding: 7px 10px !important;
		        font-size: 10.5px !important;
		        line-height: 1.26 !important;
		        -webkit-line-clamp: 2 !important;
		      }

		      .design-companion {
		        top: max(66px, calc(env(safe-area-inset-top) + 48px)) !important;
		        width: min(328px, calc(100vw - 24px)) !important;
		        max-width: min(328px, calc(100vw - 24px)) !important;
		        padding: 8px 10px !important;
		        grid-template-columns: 20px minmax(0, 1fr) !important;
		      }

		      .design-companion-text {
		        font-size: 11px !important;
		        line-height: 1.34 !important;
		      }

		      .signature-field {
		        grid-template-columns: 1fr !important;
		        gap: 5px !important;
		      }

		      .signature-field label {
		        display: block !important;
		        font-size: 11px !important;
		        line-height: 1.2;
		      }

		      .signature-field input,
		      .signature-preview {
		        width: 100%;
		      }

		      .signature-preview {
		        text-align: center;
		      }

		      .canvas-length-control {
		        padding: 10px 12px !important;
		        gap: 8px !important;
		        border-radius: 14px !important;
	      }

	      .canvas-net-wrist,
	      .canvas-length-control label {
	        grid-template-columns: minmax(0, 1fr) 76px !important;
	        gap: 10px !important;
	        align-items: start !important;
	      }

	      .canvas-length-row {
	        grid-template-columns: 38px minmax(0, 1fr) 76px 38px !important;
	        gap: 8px !important;
	        align-items: center !important;
	      }

	      .canvas-inner-label {
	        align-items: flex-end !important;
	        gap: 10px !important;
	      }

	      .canvas-inner-label span {
	        font-size: 16px !important;
	        line-height: 1.1 !important;
	      }

	      .canvas-inner-label strong {
	        flex: 0 0 auto !important;
	        white-space: nowrap !important;
	        font-size: 15px !important;
	        line-height: 1.2 !important;
	      }

	      .length-step {
	        width: 38px !important;
	        min-width: 38px !important;
	        height: 38px !important;
	        border-radius: 12px !important;
	      }

	      .canvas-length-row input[type="number"],
	      .canvas-net-wrist input {
	        width: 76px !important;
	        height: 38px !important;
	        text-align: center !important;
	      }

	      .canvas-length-row input[type="range"] {
	        width: 100% !important;
	        min-width: 0 !important;
	        max-width: none !important;
	        margin: 0 !important;
	      }

	      .wrist-field-copy em {
	        display: block !important;
	      }

	      .wrist-comfort-tip {
	        display: -webkit-box !important;
	        -webkit-line-clamp: 2;
	        font-size: 11px !important;
	        line-height: 1.34 !important;
	        max-height: none !important;
		      }
		    }

		    @media (max-width: 380px) {
		      .canvas-length-control {
		        padding: 9px 10px !important;
		      }

		      .canvas-net-wrist,
		      .canvas-length-control label {
		        grid-template-columns: minmax(0, 1fr) 68px !important;
		        gap: 7px !important;
		      }

		      .canvas-length-row {
		        grid-template-columns: 34px minmax(0, 1fr) 68px 34px !important;
		        gap: 6px !important;
		      }

		      .length-step {
		        width: 34px !important;
		        min-width: 34px !important;
		        height: 34px !important;
		      }

		      .canvas-length-row input[type="number"],
		      .canvas-net-wrist input {
		        width: 68px !important;
		        height: 36px !important;
		      }
		    }

				    @media (min-width: 1181px) {
				      .builder {
				        grid-template-columns: minmax(530px, 610px) minmax(460px, 1fr) minmax(236px, 300px) !important;
				        gap: 10px !important;
				        align-items: start !important;
				        height: auto !important;
				        max-height: none !important;
				        min-height: 0 !important;
				        overflow: visible !important;
				      }

				      .left-panel {
				        grid-template-columns: 126px minmax(0, 1fr) !important;
				        position: sticky !important;
				        top: 76px !important;
				        align-self: start !important;
				        max-height: calc(100svh - 92px) !important;
				        overflow: auto !important;
				      }

				      .center-stage,
				      .right-panel {
				        align-self: start !important;
				        max-height: none !important;
				        overflow: visible !important;
				      }

			      .left-panel .catalog {
			        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			        gap: 6px !important;
			        padding: 8px !important;
			        max-height: calc(100svh - 300px) !important;
			        overflow-y: auto !important;
			        align-content: start !important;
			        overscroll-behavior: auto !important;
			      }

		      .left-panel .product-card {
		        min-height: 112px !important;
		        grid-template-columns: 1fr !important;
		        grid-template-rows: 40px minmax(42px, auto) 12px !important;
		        align-items: center !important;
		        justify-items: center !important;
		        gap: 4px !important;
		        padding: 6px !important;
		        text-align: center !important;
		        border-radius: 8px !important;
		      }

		      .left-panel .product-art {
		        width: 38px !important;
		        height: 38px !important;
		      }

		      .left-panel .product-card h3 {
		        width: 100% !important;
		        font-size: 10.6px !important;
		        line-height: 1.14 !important;
		        -webkit-line-clamp: 2 !important;
		        overflow-wrap: anywhere !important;
		      }

		      .left-panel .product-card-price {
		        display: block !important;
		        margin-top: 3px !important;
		        color: var(--moss) !important;
		        font-size: 10.4px !important;
		        line-height: 1.08 !important;
		        font-weight: 950 !important;
		      }

		      .left-panel .product-meta,
		      .left-panel .product-top > div:last-child,
		      .left-panel .price-line span {
		        display: none !important;
		      }

		      .left-panel .price-line {
		        width: 100% !important;
		        justify-content: center !important;
		        margin-top: 0 !important;
		        font-size: 8.8px !important;
		        line-height: 1.05 !important;
		      }
		    }

			    @media (min-width: 861px) and (max-width: 1180px) {
			      .builder {
			        grid-template-columns: minmax(460px, 52vw) minmax(0, 1fr) !important;
			      }

			      .left-panel .catalog {
			        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
			      }

		      .left-panel .product-card-price {
		        display: block !important;
		      }
		    }

	    /* Final editor hotfix: notices float above the page and wrist controls stay compact. */
	    .design-companion,
	    .toast {
	      position: fixed !important;
	      left: 50% !important;
	      right: auto !important;
	      top: max(72px, calc(env(safe-area-inset-top) + 54px)) !important;
	      bottom: auto !important;
	      transform: translate(-50%, -10px) scale(0.98) !important;
	      width: min(360px, calc(100vw - 28px)) !important;
	      max-width: min(360px, calc(100vw - 28px)) !important;
	      max-height: min(86px, calc(100dvh - 120px)) !important;
	      overflow: hidden !important;
	      pointer-events: none !important;
	      z-index: var(--z-tooltip) !important;
	    }

	    .design-companion.show,
	    .toast.show {
	      transform: translate(-50%, 0) scale(1) !important;
	      animation: jewdiyNoticeAutoFade var(--notice-duration, 2600ms) ease forwards !important;
	    }

	    .design-companion:not(.show),
	    .toast:not(.show) {
	      opacity: 0 !important;
	      pointer-events: none !important;
	    }

	    .design-companion-text {
	      display: -webkit-box !important;
	      -webkit-line-clamp: 2 !important;
	      -webkit-box-orient: vertical !important;
	      overflow: hidden !important;
	      text-align: left !important;
	    }

	    .canvas-length-control,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-control {
	      grid-template-columns: minmax(0, 1fr) !important;
	      align-items: stretch !important;
	      gap: 7px !important;
	      padding: 9px 10px !important;
	      overflow: hidden !important;
	    }

	    .canvas-net-wrist,
	    .canvas-inner-label,
	    .canvas-length-row,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-inner-label,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row {
	      grid-column: 1 !important;
	      min-width: 0 !important;
	    }

	    .canvas-net-wrist,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist {
	      display: grid !important;
	      grid-template-columns: minmax(0, 1fr) 76px !important;
	      align-items: center !important;
	      gap: 8px !important;
	    }

	    .canvas-inner-label,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-inner-label {
	      display: flex !important;
	      align-items: flex-end !important;
	      justify-content: space-between !important;
	      gap: 8px !important;
	      min-width: 0 !important;
	    }

	    .canvas-inner-label span,
	    .wrist-field-copy,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-inner-label span,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .wrist-field-copy {
	      min-width: 0 !important;
	      overflow: hidden !important;
	      text-overflow: ellipsis !important;
	    }

	    .canvas-inner-label strong,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-inner-label strong {
	      flex: 0 0 auto !important;
	      white-space: nowrap !important;
	    }

	    .canvas-length-row,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row {
	      display: grid !important;
	      width: 100% !important;
	      grid-template-columns: 34px minmax(0, 1fr) 76px 34px !important;
	      align-items: center !important;
	      justify-content: stretch !important;
	      gap: 8px !important;
	    }

	    .canvas-length-row input[type="range"],
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row input[type="range"] {
	      width: 100% !important;
	      min-width: 0 !important;
	      max-width: none !important;
	      margin: 0 !important;
	    }

	    .canvas-length-row input[type="number"],
	    .canvas-net-wrist input,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row input[type="number"],
	    body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist input {
	      width: 76px !important;
	      min-width: 0 !important;
	      height: 36px !important;
	      text-align: center !important;
	    }

	    .length-step,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .length-step {
	      width: 34px !important;
	      min-width: 34px !important;
	      height: 36px !important;
	      border-radius: 10px !important;
	    }

	    .wrist-comfort-tip,
	    body.canvas-fullscreen-open .builder.builder-fullscreen .wrist-comfort-tip {
	      display: -webkit-box !important;
	      -webkit-line-clamp: 2 !important;
	      -webkit-box-orient: vertical !important;
	      max-height: 2.7em !important;
	      overflow: hidden !important;
	      margin: 0 !important;
	    }

	    @media (max-width: 540px) {
	      .design-companion,
	      .toast {
	        top: max(66px, calc(env(safe-area-inset-top) + 48px)) !important;
	        width: min(330px, calc(100vw - 24px)) !important;
	        max-width: min(330px, calc(100vw - 24px)) !important;
	        max-height: 74px !important;
	      }

	      .canvas-length-control,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-control {
	        padding: 9px 10px !important;
	        gap: 7px !important;
	      }

	      .canvas-net-wrist,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist {
	        grid-template-columns: minmax(0, 1fr) 68px !important;
	        gap: 7px !important;
	      }

	      .canvas-length-row,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row {
	        grid-template-columns: 32px minmax(0, 1fr) 68px 32px !important;
	        gap: 6px !important;
	      }

	      .canvas-length-row input[type="number"],
	      .canvas-net-wrist input,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row input[type="number"],
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist input {
	        width: 68px !important;
	        height: 34px !important;
	      }

	      .length-step,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .length-step {
	        width: 32px !important;
	        min-width: 32px !important;
	        height: 34px !important;
	      }

	      .canvas-inner-label span {
	        font-size: 15px !important;
	      }

	      .canvas-inner-label strong {
	        font-size: 14px !important;
	      }

	      .wrist-field-copy strong {
	        font-size: 15px !important;
	        line-height: 1.18 !important;
	      }

	      .wrist-field-copy em {
	        display: block !important;
	        font-size: 11px !important;
	        line-height: 1.18 !important;
	      }

	      .wrist-comfort-tip {
	        font-size: 11px !important;
	        line-height: 1.26 !important;
	      }
	    }

	    @media (max-width: 380px) {
	      .canvas-net-wrist,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist {
	        grid-template-columns: minmax(0, 1fr) 62px !important;
	      }

	      .canvas-length-row,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row {
	        grid-template-columns: 30px minmax(0, 1fr) 62px 30px !important;
	        gap: 5px !important;
	      }

	      .canvas-length-row input[type="number"],
	      .canvas-net-wrist input,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row input[type="number"],
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist input {
	        width: 62px !important;
	      }

	      .length-step,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .length-step {
	        width: 30px !important;
	        min-width: 30px !important;
	      }
	    }

    /* Performance guard: do not fetch the heavy editor tray backdrop on the
       homepage until the builder is close to view or explicitly opened. */
    body:not(.builder-assets-ready) .design-canvas {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(246,240,228,0.26)),
        radial-gradient(ellipse at 42% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0.28) 30%, transparent 64%),
        radial-gradient(ellipse at 70% 72%, rgba(217, 202, 170, 0.22), transparent 58%),
        repeating-linear-gradient(92deg, rgba(126,112,88,0.018) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(2deg, rgba(126,112,88,0.014) 0 1px, transparent 1px 7px),
        linear-gradient(135deg, #fffdf8 0%, #fbf7ed 46%, #f4ead7 100%) !important;
    }

	    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
	      }
	    }

	    /* 2026-06-19 mobile commercial builder tray: the bead library must feel
	       like a usable jewelry workbench, not a hidden drawer below the fold. */
	    @media (max-width: 540px) {
	      .builder {
	        gap: 5px !important;
	        padding: 4px 6px 12px !important;
	      }

	      .canvas-card {
	        gap: 5px !important;
	        padding: 5px !important;
	        border-radius: 10px !important;
	      }

	      .canvas-toolbar {
	        gap: 4px !important;
	      }

	      .tool-actions {
	        display: flex !important;
	        grid-template-columns: none !important;
	        flex-wrap: nowrap !important;
	        gap: 5px !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        max-width: 100% !important;
	        padding: 0 1px 2px !important;
	        scrollbar-width: none !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      .tool-actions::-webkit-scrollbar {
	        display: none !important;
	      }

	      .tool-actions .pill-button {
	        flex: 0 0 auto !important;
	        min-width: 82px !important;
	        width: auto !important;
	        height: 30px !important;
	        padding-inline: 9px !important;
	        border-radius: 999px !important;
	        font-size: 10.5px !important;
	        white-space: nowrap !important;
	      }

	      .design-canvas {
	        min-height: clamp(232px, 29dvh, 278px) !important;
	        border-radius: 10px !important;
	      }

	      .canvas-status {
	        gap: 5px !important;
	      }

	      .canvas-status .status-pill {
	        min-height: 25px !important;
	        padding: 4px 7px !important;
	        font-size: 10px !important;
	      }

	      .canvas-length-control,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-control {
	        padding: 6px 8px !important;
	        gap: 5px !important;
	        border-radius: 10px !important;
	      }

	      .canvas-net-wrist,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist {
	        grid-template-columns: minmax(0, 1fr) 62px !important;
	        gap: 6px !important;
	      }

	      .wrist-field-copy strong {
	        font-size: 13px !important;
	        line-height: 1.12 !important;
	      }

	      .wrist-field-copy em,
	      .wrist-comfort-tip {
	        display: none !important;
	      }

	      .canvas-inner-label span {
	        font-size: 13px !important;
	        line-height: 1.12 !important;
	      }

	      .canvas-inner-label strong {
	        font-size: 13px !important;
	      }

	      .canvas-length-row,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row {
	        grid-template-columns: 28px minmax(0, 1fr) 62px 28px !important;
	        gap: 5px !important;
	      }

	      .length-step,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .length-step {
	        width: 28px !important;
	        min-width: 28px !important;
	        height: 30px !important;
	        border-radius: 10px !important;
	      }

	      .canvas-length-row input[type="number"],
	      .canvas-net-wrist input,
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-length-row input[type="number"],
	      body.canvas-fullscreen-open .builder.builder-fullscreen .canvas-net-wrist input {
	        width: 62px !important;
	        height: 30px !important;
	      }

	      .builder .bottom-tray {
	        gap: 5px !important;
	        padding: 6px !important;
	        max-height: min(56dvh, calc(100dvh - 216px)) !important;
	        border-radius: 10px !important;
	      }

	      .builder .bottom-tray .bottom-tray-head {
	        min-height: 26px !important;
	        gap: 6px !important;
	      }

	      .builder .bottom-tray .bottom-tray-head strong {
	        font-size: 11px !important;
	        line-height: 1.1 !important;
	        white-space: nowrap !important;
	      }

	      .builder .bottom-tray .tray-smart-complete {
	        min-width: 70px !important;
	        min-height: 28px !important;
	        height: 28px !important;
	        padding-inline: 9px !important;
	        font-size: 10px !important;
	      }

	      .builder .bottom-tray .tray-toggle {
	        min-width: 48px !important;
	        min-height: 28px !important;
	        height: 28px !important;
	        padding-inline: 9px !important;
	        font-size: 10px !important;
	      }

	      .builder .bottom-tray .tray-tools {
	        display: block !important;
	        min-height: 0 !important;
	        padding: 3px 4px !important;
	        border-radius: 9px !important;
	      }

	      .builder .bottom-tray .tray-tools span {
	        display: none !important;
	      }

	      .builder .bottom-tray .tray-size-options {
	        display: flex !important;
	        grid-template-columns: none !important;
	        gap: 4px !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        width: 100% !important;
	        padding-bottom: 1px !important;
	        scrollbar-width: none !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      .builder .bottom-tray .tray-size-options::-webkit-scrollbar {
	        display: none !important;
	      }

	      .builder .bottom-tray .tray-size-options button {
	        flex: 0 0 auto !important;
	        min-width: 42px !important;
	        width: auto !important;
	        height: 24px !important;
	        padding-inline: 8px !important;
	        font-size: 9.5px !important;
	      }

	      .builder .bottom-tray .tray-shell {
	        grid-template-columns: 74px minmax(0, 1fr) !important;
	        gap: 5px !important;
	        max-height: calc(min(56dvh, calc(100dvh - 216px)) - 66px) !important;
	      }

	      .builder .bottom-tray .tray-rail,
	      .builder .bottom-tray .tray-scroll {
	        max-height: calc(min(56dvh, calc(100dvh - 216px)) - 72px) !important;
	      }

	      .builder .bottom-tray .tray-rail {
	        gap: 4px !important;
	        padding-right: 2px !important;
	      }

	      .builder .bottom-tray .tray-rail button {
	        min-height: 28px !important;
	        border-radius: 8px !important;
	        padding: 4px 3px !important;
	        font-size: 9.5px !important;
	        line-height: 1.08 !important;
	      }

	      .builder .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(86px, auto) !important;
	        gap: 4px !important;
	      }

	      .builder .bottom-tray .tray-item {
	        min-height: 86px !important;
	        grid-template-rows: 38px minmax(26px, auto) 14px !important;
	        padding: 4px 3px 6px !important;
	      }

	      .builder .bottom-tray .tray-item .mini-bead {
	        width: 38px !important;
	        height: 38px !important;
	      }

	      .builder .bottom-tray .tray-item strong {
	        font-size: 9.8px !important;
	        line-height: 1.08 !important;
	      }
	    }

	    @media (max-width: 380px) {
	      .tool-actions .pill-button {
	        min-width: 76px !important;
	        height: 29px !important;
	        padding-inline: 8px !important;
	        font-size: 10px !important;
	      }

	      .design-canvas {
	        min-height: clamp(218px, 28dvh, 254px) !important;
	      }

	      .builder .bottom-tray .tray-shell {
	        grid-template-columns: 68px minmax(0, 1fr) !important;
	      }
	    }

	    /* Bead library price/layout guard: every card keeps a readable price row on desktop and mobile. */
	    .left-panel .product-card .product-info {
	      display: grid !important;
	      width: 100% !important;
	      min-width: 0 !important;
	      align-content: center !important;
	      justify-items: center !important;
	      gap: 3px !important;
	    }

	    .left-panel .product-card h3 {
	      margin: 0 !important;
	      min-width: 0 !important;
	    }

	    .left-panel .product-card-price {
	      display: inline-flex !important;
	      align-items: center !important;
	      justify-content: center !important;
	      min-height: 17px !important;
	      max-width: calc(100% - 4px) !important;
	      padding: 1px 6px !important;
	      border-radius: 999px !important;
	      background: rgba(239, 246, 239, 0.92) !important;
	      color: var(--moss) !important;
	      font-size: 10.8px !important;
	      line-height: 1.05 !important;
	      font-weight: 950 !important;
	      white-space: nowrap !important;
	      overflow: hidden !important;
	      text-overflow: ellipsis !important;
	    }

	    .left-panel .price-line {
	      display: flex !important;
	      min-height: 13px !important;
	      align-items: center !important;
	    }

	    @media (min-width: 1181px) {
	      .left-panel .product-card {
	        min-height: 126px !important;
	        grid-template-rows: 42px minmax(54px, auto) 14px !important;
	      }

	      .left-panel .product-card-price {
	        font-size: 10.4px !important;
	      }
	    }

	    @media (min-width: 861px) and (max-width: 1180px) {
	      .left-panel .product-card {
	        min-height: 118px !important;
	        grid-template-rows: 42px minmax(50px, auto) 14px !important;
	      }
	    }

	    @media (max-width: 860px) {
	      .left-panel .product-card {
	        min-height: 108px !important;
	        grid-template-rows: 38px minmax(46px, auto) 14px !important;
	      }

	      .left-panel .product-card-price {
	        min-height: 16px !important;
	        padding-inline: 5px !important;
	        font-size: 9.6px !important;
	      }
	    }

	    @media (max-width: 540px) {
	      body.mobile-builder-active .mobile-builder-cta,
	      body.mobile-builder-active.mobile-editor-controls-active .mobile-builder-cta,
	      body.mobile-builder-active.mobile-tray-active .mobile-builder-cta {
	        display: none !important;
	      }

	      .builder .bottom-tray {
	        display: grid !important;
	        position: static !important;
	        order: 3 !important;
	        z-index: 1 !important;
	        gap: 5px !important;
	        margin: 0 !important;
	        padding: 6px !important;
	        min-height: 44px !important;
	        max-height: min(336px, calc(100dvh - 260px)) !important;
	        border: 1px solid var(--line) !important;
	        border-radius: 10px !important;
	        opacity: 1 !important;
	        pointer-events: auto !important;
	        transform: none !important;
	        overflow: hidden !important;
	        touch-action: pan-y !important;
	        box-shadow: 0 12px 28px rgba(31, 40, 28, 0.10), inset 0 1px 0 rgba(255,255,255,0.86) !important;
	        transition: max-height 0.22s var(--ease), opacity 0.18s ease, transform 0.18s ease !important;
	      }

	      .builder .bottom-tray.is-collapsed {
	        max-height: 44px !important;
	        padding: 6px 8px !important;
	      }

	      .builder .bottom-tray.is-collapsed .tray-tools,
	      .builder .bottom-tray.is-collapsed .tray-shell {
	        display: none !important;
	      }

	      .builder .bottom-tray .bottom-tray-head {
	        display: flex !important;
	        align-items: center !important;
	        justify-content: space-between !important;
	        min-height: 30px !important;
	        padding: 0 2px !important;
	        gap: 8px !important;
	      }

	      .builder .bottom-tray .bottom-tray-head strong {
	        min-width: 0 !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	        white-space: nowrap !important;
	        font-size: 12px !important;
	        line-height: 1.2 !important;
	      }

	      .builder .bottom-tray .tray-toggle {
	        display: inline-flex !important;
	        align-items: center !important;
	        justify-content: center !important;
	        flex: 0 0 auto !important;
	        min-width: 54px !important;
	        min-height: 32px !important;
	        padding: 0 10px !important;
	      }

	      .builder .bottom-tray .tray-tools {
	        min-height: 30px !important;
	        padding: 4px 5px !important;
	        border-radius: 9px !important;
	      }

	      .builder .bottom-tray .tray-shell {
	        display: grid !important;
	        grid-template-columns: minmax(88px, 30%) minmax(0, 1fr) !important;
	        gap: 6px !important;
	        min-height: 0 !important;
	      }

	      .builder .bottom-tray .tray-rail,
	      .builder .bottom-tray .tray-scroll {
	        max-height: 232px !important;
	        min-height: 0 !important;
	      }

	      .builder .bottom-tray .tray-scroll {
	        display: grid !important;
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(104px, auto) !important;
	        align-content: start !important;
	        gap: 5px !important;
	        padding: 1px 4px 2px 0 !important;
	        overflow-y: auto !important;
	      }

	      .builder .bottom-tray .tray-item {
	        min-height: 104px !important;
	        width: 100% !important;
	        padding: 6px 5px 8px !important;
	        display: grid !important;
	        grid-template-columns: 1fr !important;
	        grid-template-rows: 44px minmax(30px, auto) 15px !important;
	        align-items: center !important;
	        justify-items: center !important;
	        gap: 2px !important;
	        text-align: center !important;
	        border-radius: 9px !important;
	        touch-action: manipulation !important;
	        align-self: start !important;
	      }

	      .builder .mobile-builder-inline-cta {
	        order: 4 !important;
	        grid-template-columns: 1fr !important;
	        align-items: stretch !important;
	        gap: 8px !important;
	      }

	      .builder .mobile-builder-inline-cta > div:first-child {
	        display: flex !important;
	        align-items: baseline !important;
	        justify-content: space-between !important;
	        gap: 10px !important;
	        width: 100% !important;
	        min-width: 0 !important;
	      }

	      .builder .mobile-builder-inline-cta small {
	        white-space: normal !important;
	        writing-mode: horizontal-tb !important;
	        overflow-wrap: anywhere !important;
	        font-size: 11px !important;
	        line-height: 1.2 !important;
	      }

	      .builder .mobile-builder-inline-cta strong {
	        flex: 0 0 auto !important;
	        margin-top: 0 !important;
	        white-space: nowrap !important;
	      }

	      .builder .bottom-tray .tray-item .badge {
	        display: none !important;
	      }

	      .builder .bottom-tray .tray-item .detail-chip {
	        display: inline-flex !important;
	        left: 4px !important;
	        right: auto !important;
	        top: 4px !important;
	        min-width: 24px !important;
	        height: 17px !important;
	        padding: 0 5px !important;
	        font-size: 8.5px !important;
	        z-index: 8 !important;
	      }

	      .builder .bottom-tray .tray-item .mini-bead {
	        grid-column: 1 !important;
	        grid-row: 1 !important;
	        width: 44px !important;
	        height: 44px !important;
	        margin: 0 !important;
	        justify-self: center !important;
	      }

	      .builder .bottom-tray .tray-item strong {
	        grid-column: 1 !important;
	        grid-row: 2 !important;
	        width: 100% !important;
	        min-width: 0 !important;
	        min-height: 0 !important;
	        color: var(--ink) !important;
	        font-size: 10.4px !important;
	        line-height: 1.12 !important;
	        white-space: normal !important;
	        display: -webkit-box !important;
	        -webkit-line-clamp: 2 !important;
	        -webkit-box-orient: vertical !important;
	        overflow: hidden !important;
	        overflow-wrap: anywhere !important;
	      }

	      .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        grid-column: 1 !important;
	        grid-row: 3 !important;
	        max-width: 100% !important;
	        color: var(--moss) !important;
	        font-size: 8.6px !important;
	        line-height: 1 !important;
	        font-weight: 900 !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

	      @media (max-width: 374px) {
	        .builder .bottom-tray .tray-shell {
	          grid-template-columns: 86px minmax(0, 1fr) !important;
	        }

	        .builder .bottom-tray .tray-scroll {
	          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	          grid-auto-rows: minmax(104px, auto) !important;
	        }
		      }
		    }
	    /* 2026-06-12 editor layout repair: keep the social share wall prominent while
	       preventing the builder from leaving a dead blank band on desktop. */
	    .canvas-length-control {
	      width: 100% !important;
	      max-width: none !important;
	      justify-self: stretch;
	    }

	    @media (min-width: 861px) {
	      .designer-sign-panel {
	        align-items: stretch;
	        gap: 10px;
	      }

	      .designer-sign-panel .share-buttons {
	        display: grid !important;
	        grid-template-columns: repeat(3, minmax(126px, 1fr)) !important;
	        align-items: stretch !important;
	        gap: 8px !important;
	        max-height: none !important;
	        overflow: visible !important;
	        padding: 0 !important;
	      }

	      .designer-sign-panel .share-buttons .share-heading {
	        grid-column: 1 / -1;
	        margin: 0;
	      }

	      .designer-sign-panel .share-buttons button {
	        width: 100%;
	        min-height: 34px;
	        justify-content: center;
	      }

	      .designer-sign-panel .share-reward-tip {
	        margin-top: 0;
	      }
	    }

	    @media (min-width: 1181px) {
	      .builder {
	        --jewdiy-editor-social-share-min: 248px;
	        --jewdiy-editor-social-share-expanded-min: 320px;
	      }

	      .designer-sign-panel {
	        min-height: max(var(--jewdiy-editor-social-share-min), var(--jewdiy-editor-social-share-expanded-min));
	      }

	      .right-panel {
	        display: flex;
	        flex-direction: column;
	      }

	      .right-panel .summary,
	      .right-panel .checkout {
	        flex: 0 0 auto;
	      }

	      .right-panel .line-items {
	        flex: 1 1 auto;
	        min-height: 86px;
	      }

	      .right-panel .checkout {
	        margin-top: auto;
	      }

	      .right-panel,
	      .right-panel .checkout,
	      .right-panel .checkout .pill-button {
	        min-width: 0 !important;
	        max-width: 100% !important;
	        box-sizing: border-box !important;
	      }

	      .right-panel .checkout .pill-button.primary {
	        white-space: normal !important;
	        text-align: center !important;
	        justify-content: center !important;
	        line-height: 1.12 !important;
	        padding-left: 14px !important;
	        padding-right: 14px !important;
	      }
	    }

	    @media (min-width: 1181px) and (max-width: 1360px) {
	      .designer-sign-panel .share-buttons {
	        grid-template-columns: repeat(2, minmax(126px, 1fr)) !important;
	      }
	    }

	    @media (max-width: 540px) {
	      .builder .bottom-tray {
	        max-height: min(68dvh, calc(100dvh - 178px)) !important;
	      }

	      .builder .bottom-tray .bottom-tray-head strong {
	        white-space: normal !important;
	        line-height: 1.15 !important;
	      }

	      .builder .bottom-tray .tray-tools {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        align-items: stretch !important;
	      }

	      .builder .bottom-tray .tray-tools span {
	        white-space: normal !important;
	        line-height: 1.15 !important;
	      }

	      .builder .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	        overflow: visible !important;
	        width: 100%;
	      }

	      .builder .bottom-tray .tray-size-options button {
	        min-width: 0 !important;
	        width: 100% !important;
	      }

	      .builder .bottom-tray .tray-shell {
	        grid-template-columns: minmax(82px, 30%) minmax(0, 1fr) !important;
	        max-height: calc(min(68dvh, calc(100dvh - 178px)) - 86px) !important;
	        overflow: hidden !important;
	      }

	      .builder .bottom-tray .tray-rail,
	      .builder .bottom-tray .tray-scroll {
	        max-height: min(48dvh, 392px) !important;
	        overflow-y: auto !important;
	      }
	    }
	    /* Homepage luxury refresh: editorial photo hero and restrained brand navigation. */
	    .topbar {
      padding: 12px clamp(18px, 4vw, 56px);
      border-bottom: 1px solid rgba(18, 38, 27, 0.12);
      background: rgba(255, 253, 247, 0.78);
      backdrop-filter: blur(22px) saturate(1.18);
      -webkit-backdrop-filter: blur(22px) saturate(1.18);
      box-shadow: 0 18px 46px rgba(12, 23, 16, 0.07);
    }

    .brand {
      gap: 10px;
      min-width: min(34vw, 236px);
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      background-color: rgba(255, 253, 247, 0.78);
      box-shadow: 0 10px 24px rgba(12, 23, 16, 0.12), inset 0 0 0 1px rgba(35, 79, 55, 0.12);
    }

    .brand-wordmark {
      width: clamp(112px, 11vw, 154px);
    }

    .brand span {
      max-width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgba(15, 32, 22, 0.62);
      font-size: 9.5px;
    }

    .nav {
      gap: clamp(14px, 1.9vw, 26px);
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .nav a {
      padding: 9px 0;
      border-radius: 0;
      color: rgba(15, 32, 22, 0.72);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: background 0.2s var(--ease), color 0.2s ease, transform 0.2s var(--ease);
    }

    .nav a::after {
      display: none;
    }

    .nav a:hover,
    .nav a:focus-visible {
      color: #10291b;
      background: transparent;
      transform: translateY(-1px);
    }

    .nav a.nav-story-link {
      padding: 9px 0;
      border-color: transparent;
      border-radius: 0;
      background: transparent;
      color: rgba(15, 32, 22, 0.72);
      box-shadow: none;
    }

    .nav a.nav-story-link::before {
      content: "";
      margin: 0;
    }

    .top-actions {
      padding: 4px;
      border: 1px solid rgba(35, 79, 55, 0.12);
      border-radius: 999px;
      background: rgba(255, 253, 247, 0.58);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
    }

    .hero {
      isolation: isolate;
      grid-template-columns: minmax(0, 0.76fr) minmax(300px, 0.46fr);
      min-height: clamp(660px, calc(100svh - 66px), 820px);
      padding: clamp(86px, 8vw, 118px) clamp(20px, 5vw, 70px) clamp(34px, 6vw, 78px);
      align-items: end;
      background:
        linear-gradient(90deg, rgba(7, 13, 10, 0.86) 0%, rgba(7, 13, 10, 0.66) 46%, rgba(7, 13, 10, 0.24) 74%, rgba(7, 13, 10, 0.10) 100%),
        url("../guide/gemstone-only-hero-v3.jpg") center / cover no-repeat,
        #132116;
      color: #fffdf7;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.10)),
        radial-gradient(ellipse at 18% 34%, rgba(255,253,247,0.20), transparent 31%),
        linear-gradient(180deg, rgba(255,253,247,0.00) 76%, rgba(249,248,245,0.15) 100%);
    }

    .hero-content {
      max-width: 720px;
      align-self: center;
    }

    .hero-content .eyebrow {
      width: fit-content;
      margin-bottom: 18px;
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,0.26);
      border-radius: 999px;
      color: rgba(255, 253, 247, 0.82);
      background: rgba(10, 18, 13, 0.28);
      backdrop-filter: blur(12px);
      letter-spacing: 0.08em;
    }

    .hero h1 {
      max-width: 760px;
      color: #fffdf7;
      font-size: clamp(42px, 6.1vw, 82px);
      line-height: 0.96;
      text-wrap: balance;
      text-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
    }

    .hero h1 em,
    .hero h1 .gold-text {
      color: #f1d391;
      font-style: italic;
    }

    .hero p {
      max-width: 560px;
      color: rgba(255, 253, 247, 0.82);
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.62;
      text-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
    }

    .hero-cta .pill-button {
      height: 46px;
      min-width: 154px;
      border-radius: 999px;
      border-color: rgba(255,255,255,0.34);
      font-weight: 900;
    }

    .hero-cta .pill-button.primary {
      background: #1f5a3d;
      border-color: #1f5a3d;
      color: #fffdf7;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
    }

    .hero-cta .pill-button.primary:hover {
      background: #2f734f;
      border-color: #2f734f;
      color: #fffdf7;
      box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
    }

    .hero-cta .pill-button.ghost {
      background: rgba(255,255,255,0.10);
      border-color: rgba(255,255,255,0.30);
      color: #fffdf7;
      backdrop-filter: blur(12px);
    }

    .hero-cta .pill-button.ghost:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.48);
      color: #fffdf7;
    }

    .hero-stats {
      width: min(100%, 650px);
      margin-top: 34px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.20);
      border-radius: 999px;
      background: rgba(10, 18, 13, 0.28);
      backdrop-filter: blur(16px) saturate(1.08);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .hero-stat {
      display: grid;
      gap: 2px;
      justify-items: center;
      padding: 8px 7px;
      border-right: 0;
      border-radius: 999px;
      color: rgba(255, 253, 247, 0.70);
      text-align: center;
    }

    .hero-stat:hover {
      background: rgba(255,255,255,0.10);
    }

    .hero-stat strong {
      color: #fffdf7;
      font-size: 14px;
    }

    .hero-stat span {
      color: rgba(255, 253, 247, 0.68);
      font-size: 10px;
    }

    .hero-visual {
      align-self: end;
      justify-content: end;
    }

    .hero-gift-scene {
      width: min(100%, 460px);
      min-height: clamp(240px, 31vw, 390px);
      place-items: end;
    }

    .hero-gift-carousel {
      width: min(100%, 420px);
      aspect-ratio: 4 / 5;
      border-radius: 8px;
      background: rgba(255,253,247,0.18);
      box-shadow: 0 26px 72px rgba(0, 0, 0, 0.28);
      outline: 1px solid rgba(255,255,255,0.28);
      outline-offset: -8px;
      backdrop-filter: blur(10px);
    }

    .hero-slide img,
    .hero-slide video {
      transform: scale(1.07);
    }

    @keyframes heroKenBurns {
      0% { transform: scale(1.07) translate3d(0, 0, 0); }
      54% { transform: scale(1.11) translate3d(-10px, -6px, 0); }
      100% { transform: scale(1.085) translate3d(8px, 4px, 0); }
    }

    .hero-slide::after {
      background: linear-gradient(180deg, rgba(0,0,0,0) 44%, rgba(8, 13, 9, 0.42) 100%);
    }

    .hero-slide figcaption,
    .hero-gift-badge {
      border-radius: 999px;
      background: rgba(255, 253, 247, 0.90);
      color: #143a28;
    }

    .hero-dots {
      bottom: 12px;
    }

    @media (max-width: 1280px) {
      .topbar {
        gap: 12px;
      }

      .nav {
        max-width: 48vw;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .nav::-webkit-scrollbar {
        display: none;
      }

      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        text-align: left;
        gap: 24px;
        background-position: 58% center;
      }

      .hero-content {
        margin: 0;
      }

      .hero-cta {
        justify-content: flex-start;
      }

      .hero-visual {
        width: min(100%, 430px);
        max-width: 430px;
        margin: 0;
        justify-content: flex-start;
      }
    }

    @media (max-width: 860px) {
      .topbar {
        position: sticky;
        align-items: center;
      }

      .nav {
        display: none;
      }

      .hero {
        padding: 72px 18px 30px;
        background:
          linear-gradient(180deg, rgba(8, 17, 12, 0.74) 0%, rgba(8, 17, 12, 0.42) 46%, rgba(8, 17, 12, 0.70) 100%),
          url("../guide/gemstone-only-hero-v3.jpg") 76% center / cover no-repeat,
          #132116;
      }

      .hero h1 {
        font-size: clamp(34px, 11vw, 52px);
        line-height: 1;
        margin-bottom: 14px;
      }

      .hero p {
        margin-bottom: 18px;
      }

      .hero-gift-scene {
        min-height: 0;
      }

      .hero-gift-carousel {
        width: min(100%, 360px);
        aspect-ratio: 16 / 10;
      }
    }

    @media (max-width: 540px) {
      .topbar {
        padding: 8px 10px;
        border-bottom-color: rgba(255,255,255,0.28);
      }

      .top-actions {
        padding: 3px;
      }

      .brand {
        flex: 1 1 auto;
      }

      .brand-mark {
        width: 32px;
        height: 32px;
      }

      .brand-wordmark {
        width: clamp(82px, 24vw, 96px);
      }

      .hero {
        padding: 54px 12px 20px;
        gap: 14px;
        text-align: left;
      }

      .hero-content .eyebrow {
        margin-bottom: 10px;
        padding: 7px 9px;
        font-size: 9.5px;
        letter-spacing: 0.04em;
      }

      .hero h1 {
        font-size: clamp(33px, 11vw, 46px);
        margin-bottom: 10px;
      }

      .hero p {
        display: block;
        max-width: 31em;
        margin-bottom: 14px;
        font-size: 13px;
        line-height: 1.5;
      }

      .hero-cta {
        grid-template-columns: 1fr 1fr;
      }

      .hero-cta .pill-button {
        height: 44px;
        padding: 0 10px;
      }

      .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 18px;
        padding: 7px;
        margin-top: 16px;
      }

      .hero-stat {
        min-height: 48px;
        border-radius: 14px;
      }

      .hero-stat strong {
        font-size: 13px;
      }

      .hero-stat span {
        font-size: 10px;
      }

      .hero-visual {
        order: 2;
        width: 100%;
        max-width: none;
      }

      .hero-gift-carousel {
        width: 100%;
        min-height: 190px;
        border-radius: 8px;
      }

      .hero-gift-badge {
        right: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        font-size: 10.5px;
      }
    }

    @media (max-width: 540px) {
      body.mobile-builder-active .design-companion.with-actions,
      body.mobile-builder-active .design-companion.with-actions.show {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: max(104px, calc(env(safe-area-inset-bottom) + 104px)) !important;
        z-index: var(--z-tooltip) !important;
        width: auto !important;
        max-width: none !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        border-radius: 16px !important;
        transform: translateY(8px) scale(0.98) !important;
      }

      body.mobile-builder-active .design-companion.with-actions.show {
        transform: translateY(0) scale(1) !important;
      }

      body.mobile-builder-active .design-companion.with-actions .design-companion-mark {
        width: 22px !important;
        height: 22px !important;
        font-size: 8px !important;
      }

      body.mobile-builder-active .design-companion.with-actions .design-companion-text {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
      }

      body.mobile-builder-active .design-companion.with-actions .design-companion-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px !important;
      }

      body.mobile-builder-active .design-companion.with-actions .design-companion-actions button {
        width: 100%;
        min-width: 0;
        height: 34px !important;
        padding: 0 8px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        white-space: nowrap;
      }
    }
    /* 2026-06-05 mobile conversion/brand hotfix:
       keep the editor usable and make unavailable ready-made pieces a premium style path. */
    .canvas-toolbar #autoFill {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-height: 38px !important;
      height: 38px !important;
      padding: 0 14px;
      border-radius: 999px;
      background: #234f37;
      border-color: #234f37;
      color: #fff;
      font-size: 12px;
      font-weight: 850;
      box-shadow: 0 10px 22px rgba(35, 79, 55, 0.18);
      white-space: nowrap;
    }

    @media (max-width: 860px) {
      .canvas-toolbar .preset-picker {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 6px;
        width: 100%;
      }

      .canvas-toolbar .preset-picker select {
        display: block !important;
        min-width: 0;
        width: 100%;
        height: 34px;
        border-radius: 8px;
        font-size: 11px;
      }

      .canvas-toolbar #autoFill {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 106px;
        height: 34px;
        padding: 0 10px;
        border-radius: 8px;
        background: #234f37;
        border-color: #234f37;
        color: #fff;
        font-size: 11px;
        font-weight: 850;
        box-shadow: 0 10px 22px rgba(35, 79, 55, 0.18);
        white-space: nowrap;
      }
    }

    @media (max-width: 540px) {
      .left-panel .catalog {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
      }

      .left-panel .product-card {
        min-width: 0;
        min-height: 96px;
        padding: 5px;
      }

      .left-panel .product-card h3 {
        font-size: 10px;
        line-height: 1.12;
      }

      .left-panel .product-card-price,
      .left-panel .price-line {
        font-size: 9px;
      }

      body.mobile-builder-active .bottom-tray .tray-scroll,
      .bottom-tray .tray-scroll {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .ready-hold-note {
        padding: 8px 9px;
        border: 1px solid rgba(35, 79, 55, 0.14);
        border-radius: 8px;
        background: rgba(35, 79, 55, 0.06);
        color: #234f37;
        font-size: 11px;
        line-height: 1.35;
        font-weight: 750;
      }

      .ready-actions {
        grid-template-columns: 1fr !important;
      }

      .ready-actions [data-testid="ready-made-add-to-cart-button"][disabled] {
        display: none !important;
      }

      .ready-actions [data-ready-custom] {
        width: 100%;
        min-height: 38px;
        background: #234f37;
        border-color: #234f37;
        color: #fff;
        box-shadow: 0 12px 24px rgba(35, 79, 55, 0.16);
      }
    }

    @media (max-width: 540px) {
      body.mobile-builder-active .left-panel .product-card {
        /* 2026-06-21 mobile bead library card diameter-first lock */
        position: relative !important;
        min-height: 118px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 18px 36px minmax(32px, auto) 16px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 3px !important;
        padding: 5px 4px 6px !important;
      }

      body.mobile-builder-active .left-panel .product-size-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 4px !important;
        top: 4px !important;
        min-height: 18px !important;
        max-width: calc(100% - 42px) !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: rgba(239, 246, 239, 0.96) !important;
        border: 1px solid rgba(35, 79, 55, 0.16) !important;
        color: var(--moss) !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        z-index: 7 !important;
      }

      body.mobile-builder-active .left-panel .detail-chip {
        display: inline-flex !important;
        left: auto !important;
        right: 4px !important;
        top: 4px !important;
        min-width: 31px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 8.5px !important;
        z-index: 7 !important;
      }

      body.mobile-builder-active .left-panel .product-top {
        grid-row: 2 !important;
        align-self: center !important;
      }

      body.mobile-builder-active .left-panel .product-art {
        width: 34px !important;
        height: 34px !important;
      }

      body.mobile-builder-active .left-panel .product-card .product-info {
        grid-row: 3 !important;
        align-content: start !important;
        gap: 2px !important;
      }

      body.mobile-builder-active .left-panel .product-card h3 {
        font-size: 10px !important;
        line-height: 1.08 !important;
      }

      body.mobile-builder-active .left-panel .product-card-price {
        min-height: 14px !important;
        padding: 1px 5px !important;
        font-size: 9px !important;
      }
    }

    @media (max-width: 540px) {
      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
      body.mobile-builder-active .bottom-tray .tray-scroll {
        /* 2026-06-21 mobile bead tray left-menu three-column lock */
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(98px, auto) !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item,
      body.mobile-builder-active .bottom-tray .tray-item {
        /* 2026-06-21 mobile bead tray diameter-first card lock */
        position: relative !important;
        min-height: 98px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 18px 34px minmax(24px, auto) 13px !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 3px !important;
        padding: 5px 4px 6px !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item .tray-size-badge,
      body.mobile-builder-active .bottom-tray .tray-item .tray-size-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 4px !important;
        top: 4px !important;
        min-height: 18px !important;
        max-width: calc(100% - 42px) !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: rgba(239, 246, 239, 0.96) !important;
        border: 1px solid rgba(35, 79, 55, 0.16) !important;
        color: var(--moss) !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        z-index: 8 !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
      body.mobile-builder-active .bottom-tray .tray-item .detail-chip {
        left: auto !important;
        right: 4px !important;
        top: 4px !important;
        min-width: 31px !important;
        height: 18px !important;
        padding: 0 5px !important;
        font-size: 8.5px !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
        grid-row: 2 !important;
        width: 34px !important;
        height: 34px !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
      body.mobile-builder-active .bottom-tray .tray-item strong {
        grid-row: 3 !important;
        min-height: 22px !important;
        font-size: 9.4px !important;
        line-height: 1.08 !important;
      }

      body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
      body.mobile-builder-active .bottom-tray .tray-item .tray-price {
        grid-row: 4 !important;
        max-width: 100% !important;
        color: var(--moss) !important;
        font-size: 8.8px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
    }

    /* 2026-06-21 material-first hero: no rendered gift boxes or direct-sale bracelet promises in the homepage hero. */
    .hero {
      grid-template-columns: minmax(0, 720px) !important;
      align-items: center !important;
      min-height: clamp(660px, 86svh, 820px) !important;
      padding: clamp(86px, 9vw, 124px) clamp(20px, 5vw, 78px) clamp(54px, 7vw, 88px) !important;
      overflow: hidden !important;
      background: #0a130e !important;
      box-shadow: inset 0 -120px 110px rgba(249, 248, 245, 0.08);
    }

    .hero::before {
      content: "" !important;
      position: absolute;
      inset: -2%;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(7, 15, 11, 0.86), rgba(7, 15, 11, 0.58) 46%, rgba(7, 15, 11, 0.18) 72%, rgba(7, 15, 11, 0.06)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.24) 100%),
        radial-gradient(ellipse at 14% 28%, rgba(255, 253, 247, 0.20), transparent 34%),
        url("../guide/gemstone-only-hero-v3.jpg") 64% center / cover no-repeat;
      transform: scale(1.012) translate3d(0, 0, 0);
      transform-origin: 54% 44%;
      animation: jewdiyHeroLens 18s ease-in-out infinite alternate;
      will-change: transform, filter;
    }

    .hero::after {
      content: "" !important;
      position: absolute;
      inset: auto 0 0;
      z-index: 0;
      height: 22%;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(249, 248, 245, 0), rgba(249, 248, 245, 0.92));
    }

    .hero-content {
      max-width: 720px;
      position: relative;
      z-index: 1;
      color: #fff;
    }

    .hero-content::after {
      content: "";
      position: absolute;
      inset: -18% -28% -24% -18%;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(118deg, transparent 0%, rgba(255, 253, 247, 0.12) 42%, rgba(255, 255, 255, 0.02) 51%, transparent 68%);
      transform: translate3d(-16%, 0, 0) rotate(-3deg);
      animation: jewdiyHeroSheen 12s ease-in-out infinite;
      opacity: 0.66;
    }

    .hero-content .eyebrow {
      border-color: rgba(255, 255, 255, 0.30) !important;
      background: rgba(9, 21, 15, 0.30) !important;
      color: rgba(255, 253, 247, 0.86) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .hero-visual {
      display: none !important;
    }

    @keyframes jewdiyHeroLens {
      0% { transform: scale(1.012) translate3d(0, 0, 0); filter: saturate(1.02) contrast(1.02); }
      45% { transform: scale(1.038) translate3d(-10px, -5px, 0); filter: saturate(1.06) contrast(1.04); }
      100% { transform: scale(1.026) translate3d(9px, 4px, 0); filter: saturate(1.04) contrast(1.03); }
    }

    @keyframes jewdiyHeroSheen {
      0%, 24% { transform: translate3d(-24%, 0, 0) rotate(-3deg); opacity: 0; }
      42% { opacity: 0.46; }
      68%, 100% { transform: translate3d(18%, 0, 0) rotate(-3deg); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero::before,
      .hero-content::after {
        animation: none !important;
      }
    }

    .hero h1 {
      max-width: 720px;
      font-size: clamp(42px, 5.4vw, 76px) !important;
      line-height: 1.01 !important;
      letter-spacing: 0 !important;
      overflow-wrap: anywhere;
      color: #fff;
      text-shadow: 0 22px 52px rgba(0, 0, 0, 0.30);
    }

    .hero h1 em {
      color: #f2d78c;
      font-style: normal;
    }

    .hero p {
      max-width: 600px;
      color: rgba(255, 255, 255, 0.88) !important;
      text-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    }

    .hero-cta .pill-button.primary {
      background: #1f5a3d !important;
      border-color: rgba(242, 215, 140, 0.42) !important;
      color: #fffdf7 !important;
      box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .hero-cta .pill-button.ghost {
      background: rgba(255, 253, 247, 0.12) !important;
      border-color: rgba(255, 253, 247, 0.34) !important;
      color: #fffdf7 !important;
      backdrop-filter: blur(12px);
    }

    .hero-stats {
      max-width: 660px;
      background: rgba(255, 253, 247, 0.14) !important;
      border-color: rgba(255, 253, 247, 0.22) !important;
      border-radius: 24px !important;
      backdrop-filter: blur(16px) saturate(1.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 18px 44px rgba(0,0,0,0.12);
    }

    .hero-stat strong,
    .hero-stat span {
      color: #fff !important;
    }

    .story-sections {
      background:
        linear-gradient(180deg, rgba(249, 248, 245, 0.96), rgba(255, 253, 247, 0.98) 44%, rgba(249, 248, 245, 0.96));
    }

    .brand-intro-section {
      position: relative;
      padding: clamp(6px, 1vw, 16px) 0 clamp(10px, 2vw, 24px);
    }

    .brand-intro-section::before {
      content: "";
      position: absolute;
      inset: -18px max(-56px, -5vw) -24px;
      z-index: -1;
      border-top: 1px solid rgba(35, 79, 55, 0.08);
      border-bottom: 1px solid rgba(35, 79, 55, 0.08);
      background:
        radial-gradient(circle at 10% 10%, rgba(212, 168, 83, 0.10), transparent 34%),
        linear-gradient(90deg, rgba(255, 253, 247, 0.70), rgba(245, 248, 239, 0.48));
    }

    .brand-intro-copy h2 {
      max-width: 760px;
      color: #17251d;
    }

    .brand-intro-media {
      position: relative;
    }

    .section-title {
      grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.58fr);
      gap: clamp(16px, 3vw, 34px);
      align-items: end;
    }

    .ready-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
      max-width: 1180px;
      gap: 12px;
    }

    .designer-sign-panel,
    .share-buttons {
      min-width: 0;
      max-width: 100%;
    }

    .share-buttons {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
      width: 100%;
    }

    .share-buttons button {
      min-width: 0;
      justify-content: center;
      white-space: normal;
      line-height: 1.2;
    }

    .review-card {
      display: grid;
      gap: 10px;
      padding: 20px 0;
    }

    .review-person {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
    }

    .review-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #f2ede3;
      background-image: var(--review-avatar, none);
      background-size: cover;
      background-position: center;
      color: var(--moss);
      font-size: 13px;
      font-weight: 900;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(35, 79, 55, 0.10);
    }

    .review-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .review-avatar.trust-icon {
      position: relative;
      background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.86), transparent 35%),
        linear-gradient(145deg, rgba(35,79,55,0.14), rgba(173,141,74,0.22));
      color: var(--moss);
      font-size: 13px;
      letter-spacing: 0;
    }

    .review-avatar.trust-icon::after {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(35, 79, 55, 0.26);
      box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.35);
    }

    .review-person strong,
    .review-person span {
      display: block;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .review-person strong {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.25;
    }

    .review-person span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

	    @media (max-width: 1180px) {
	      .builder {
	        grid-template-columns: minmax(0, 1fr) !important;
	        gap: 14px !important;
      }

      .left-panel,
      .right-panel,
      .center-stage {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
      }

      .section-title,
      .aftercare-band,
      .gift-section,
      .brand-intro-section {
        grid-template-columns: minmax(0, 1fr) !important;
      }

	      .section-actions {
	        justify-content: flex-start;
	      }
	    }

			    @media (min-width: 1181px) {
			      .builder {
			        height: auto !important;
			        max-height: none !important;
			        min-height: var(--jewdiy-builder-workbench-height, min(1040px, calc(100vh + 260px))) !important;
			        align-items: stretch !important;
			        grid-auto-rows: minmax(var(--jewdiy-builder-workbench-height, min(1040px, calc(100vh + 260px))), auto) !important;
			        overflow: visible !important;
			      }

		      .left-panel,
		      .center-stage,
		      .right-panel {
		        align-self: stretch !important;
		        height: auto !important;
		        max-height: none !important;
		        min-height: 0;
		        overscroll-behavior: auto;
		        scrollbar-width: thin;
		        scrollbar-color: rgba(58, 109, 75, 0.35) transparent;
		      }

		      .left-panel {
		        display: grid;
		        grid-template-columns: 126px minmax(0, 1fr);
			        grid-template-rows: auto auto auto auto minmax(0, 1fr);
			        align-self: stretch !important;
			        height: auto !important;
			        min-height: var(--jewdiy-builder-workbench-height, min(1040px, calc(100vh + 260px))) !important;
			        position: static !important;
			        top: auto !important;
			        max-height: none !important;
			        overflow: hidden;
			      }

	      .left-panel .panel-header,
	      .left-panel .tabs {
	        grid-column: 1 / -1;
	      }

	      .left-panel .material-taxonomy {
	        grid-column: 1;
	        grid-row: 3 / 6;
	        min-height: 0 !important;
	        max-height: none !important;
	        overflow-y: auto;
	      }

	      .left-panel .size-selector {
	        grid-column: 2;
	        grid-row: 3;
	      }

	      .left-panel .search-bar {
	        grid-column: 2;
	        grid-row: 4;
	      }

		      .left-panel .catalog {
		        grid-column: 2;
		        grid-row: 5;
		        min-height: 0;
		        max-height: none !important;
		        overflow-y: auto;
		        overscroll-behavior: auto;
		      }

		      .center-stage,
		      .right-panel {
		        min-height: var(--jewdiy-builder-workbench-height, min(1040px, calc(100vh + 260px))) !important;
		        overflow: visible !important;
		      }

	      .right-panel {
	        position: static !important;
	        top: auto !important;
	      }
	    }

    @media (max-width: 860px) {
      .hero {
        min-height: auto !important;
        padding: 74px 18px 38px !important;
        text-align: left !important;
        background-position: 54% center !important;
      }

      .hero h1 {
        font-size: clamp(36px, 10vw, 48px) !important;
      }

      .hero-cta {
        grid-template-columns: 1fr !important;
        max-width: 320px;
      }

      .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 18px !important;
      }

      .share-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-height: none;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
      }

      .review-grid {
        grid-template-columns: minmax(0, 1fr) !important;
      }

      /* 2026-06-20 homepage ready mobile single-column trust cards */
      .ready-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
      }
    }

    /* 2026-06-21 homepage ready section viewport gutters:
       the style-reference shelf sits outside story-sections, so it needs its own
       page padding and sticky-header scroll offset instead of inheriting none. */
    .ready-section {
      width: 100%;
      padding: clamp(34px, 5vw, 70px) clamp(20px, 5vw, 56px) 0 !important;
      scroll-margin-top: calc(var(--jewdiy-sticky-topbar-height, 86px) + 18px);
    }

    .ready-section .section-title,
    .ready-section .ready-grid,
    .ready-section .ready-more-row {
      width: 100%;
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 860px) {
      .ready-section {
        padding: 36px 20px 0 !important;
        scroll-margin-top: calc(var(--jewdiy-sticky-topbar-height, 96px) + 14px);
      }

      .ready-section .section-title {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        margin-bottom: 22px !important;
      }

      .ready-section .section-title h2,
      .ready-section .section-title p {
        max-width: 100%;
      }

      .ready-section .section-actions .pill-button {
        /* 2026-06-21 mobile homepage ready gallery CTA tap target:
           this is the first recovery path for shoppers who want style
           reference before Builder, so it must read as a real action. */
        min-height: 44px !important;
        height: 44px !important;
        align-items: center !important;
        touch-action: manipulation;
      }
    }

	    @media (max-width: 640px) {
	      .left-panel .size-options {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        align-items: stretch;
	        gap: 5px;
	      }

      .left-panel .size-options button {
        min-width: 0;
        width: 100%;
      }

      .bottom-tray .tray-size-options {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        overflow: visible !important;
        width: 100%;
        min-width: 0;
        direction: inherit;
      }

      .bottom-tray .tray-size-options button {
        min-width: 0 !important;
        width: 100%;
      }

	      .share-buttons button[hidden] {
	        display: none !important;
	      }
	    }

	    /* 2026-06-13 mobile conversion pass:
	       keep the builder usable in WeChat/Safari narrow viewports. */
	    @media (max-width: 540px) {
	      .hero {
	        position: relative !important;
	        min-height: clamp(520px, 82svh, 660px) !important;
	        padding: max(68px, calc(env(safe-area-inset-top) + 58px)) 16px 34px !important;
	        background: #0a130e !important;
	      }

	      .hero::before {
	        content: "" !important;
	        position: absolute !important;
	        inset: 0 !important;
	        z-index: 0 !important;
	        opacity: 1 !important;
	        pointer-events: none !important;
	        background:
	          linear-gradient(180deg, rgba(7, 15, 11, 0.34), rgba(7, 15, 11, 0.66) 72%, rgba(7, 15, 11, 0.86)),
	          linear-gradient(90deg, rgba(7, 15, 11, 0.78), rgba(7, 15, 11, 0.25) 58%, rgba(7, 15, 11, 0.16)),
	          url("../guide/gemstone-only-hero-v3.jpg") 67% center / cover no-repeat !important;
	        transform: none !important;
	        animation: none !important;
	      }

	      .hero::after {
	        content: "" !important;
	        position: absolute !important;
	        inset: auto 0 0 !important;
	        z-index: 0 !important;
	        height: 24% !important;
	        pointer-events: none !important;
	        background: linear-gradient(180deg, rgba(249, 248, 245, 0), rgba(249, 248, 245, 0.92)) !important;
	      }

	      .hero-content {
	        position: relative !important;
	        z-index: 1 !important;
	      }

	      body.mobile-builder-active .mobile-builder-cta,
	      body.mobile-builder-active.mobile-editor-controls-active .mobile-builder-cta,
	      body.mobile-builder-active.mobile-tray-active .mobile-builder-cta,
	      body.cart-open .mobile-builder-cta {
	        display: none !important;
	        visibility: hidden !important;
	        pointer-events: none !important;
	      }

	      body.mobile-builder-active {
	        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
	      }

	      .builder .bottom-tray {
	        max-height: min(72dvh, calc(100dvh - 156px)) !important;
	        overflow: hidden !important;
	      }

	      .builder .bottom-tray .tray-shell {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 6px !important;
	        max-height: calc(min(72dvh, calc(100dvh - 156px)) - 88px) !important;
	        overflow: hidden !important;
	      }

	      .builder .bottom-tray .tray-rail {
	        display: flex !important;
	        align-items: stretch !important;
	        gap: 6px !important;
	        max-height: none !important;
	        width: 100% !important;
	        padding: 1px 2px 4px !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        overscroll-behavior-inline: contain !important;
	        scroll-snap-type: x proximity !important;
	        -webkit-overflow-scrolling: touch !important;
	        scrollbar-width: thin !important;
	      }

	      .builder .bottom-tray .tray-rail-row,
	      .builder .bottom-tray .tray-rail-children {
	        display: flex !important;
	        flex: 0 0 auto !important;
	        align-items: stretch !important;
	        gap: 6px !important;
	        min-width: max-content !important;
	        margin: 0 !important;
	        padding: 0 !important;
	        border: 0 !important;
	      }

	      .builder .bottom-tray .tray-rail-label {
	        display: none !important;
	      }

	      .builder .bottom-tray .tray-rail button {
	        flex: 0 0 auto !important;
	        min-width: 64px !important;
	        max-width: 116px !important;
	        min-height: 34px !important;
	        padding: 0 10px !important;
	        border-radius: 999px !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	        scroll-snap-align: start !important;
	      }

		      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
		      body.mobile-builder-active .bottom-tray .tray-scroll,
		      .builder .bottom-tray .tray-scroll {
		        display: grid !important;
		        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		        grid-template-rows: none !important;
		        grid-auto-flow: row !important;
		        grid-auto-rows: minmax(96px, auto) !important;
		        gap: 5px !important;
	        max-height: min(48dvh, 430px) !important;
	        padding: 2px 3px 3px 0 !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior-y: contain !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      .builder .bottom-tray .tray-item {
	        min-height: 96px !important;
	        padding: 5px 4px 7px !important;
	        grid-template-rows: 40px minmax(28px, auto) 15px !important;
	      }

	      .builder .bottom-tray .tray-item .mini-bead {
	        width: 40px !important;
	        height: 40px !important;
	      }

	      .builder .bottom-tray .tray-item strong {
	        font-size: 9.4px !important;
	        line-height: 1.08 !important;
	        -webkit-line-clamp: 2 !important;
	      }

	      .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        font-size: 8.2px !important;
	      }

	      .builder .mobile-builder-inline-cta {
	        position: static !important;
	        margin: 8px 0 0 !important;
	        z-index: 1 !important;
	      }
	    }

	    /* 2026-06-13 mobile bead-library menu pass:
	       show the category menu as reachable wrapped chips on 390px phones. */
	    @media (max-width: 540px) {
	      .builder .bottom-tray .tray-rail {
	        flex-wrap: wrap !important;
	        align-content: flex-start !important;
	        max-height: 92px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        padding: 1px 2px 5px !important;
	      }

	      .builder .bottom-tray .tray-rail-row,
	      .builder .bottom-tray .tray-rail-children {
	        flex-wrap: wrap !important;
	        min-width: 0 !important;
	        width: 100% !important;
	      }

	      .builder .bottom-tray .tray-rail button {
	        flex: 1 1 calc(33.333% - 6px) !important;
	        min-width: 0 !important;
	        max-width: none !important;
	      }

	      body.mobile-builder-active .design-companion.with-actions,
	      body.mobile-builder-active .design-companion.with-actions.show {
	        display: none !important;
	        visibility: hidden !important;
	        pointer-events: none !important;
	      }
	    }

	    /* 2026-06-15 mobile bead editing contract:
	       the category menu must not steal card width; phones keep three bead cards per row. */
	    @media (max-width: 540px) {
	      body.mobile-builder-active .builder .bottom-tray,
	      body.mobile-builder-active .bottom-tray {
	        width: 100% !important;
	        max-width: 100% !important;
	        max-height: min(74dvh, calc(100dvh - 142px)) !important;
	        overflow: hidden !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-shell,
	      body.mobile-builder-active .bottom-tray .tray-shell {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 6px !important;
	        max-height: calc(min(74dvh, calc(100dvh - 142px)) - 86px) !important;
	        overflow: hidden !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        display: flex !important;
	        flex-wrap: wrap !important;
	        align-content: flex-start !important;
	        align-items: stretch !important;
	        gap: 5px !important;
	        width: 100% !important;
	        max-height: 92px !important;
	        min-height: 0 !important;
	        padding: 1px 2px 5px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
	      body.mobile-builder-active .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .bottom-tray .tray-rail-children {
	        display: contents !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
	      body.mobile-builder-active .bottom-tray .tray-rail-label {
	        display: none !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        flex: 0 0 calc((100% - 10px) / 3) !important;
	        min-width: 0 !important;
	        max-width: none !important;
	        min-height: 30px !important;
	        padding: 0 6px !important;
	        border-radius: 999px !important;
	        font-size: 10px !important;
	        line-height: 1.05 !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        display: grid !important;
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-template-rows: none !important;
	        grid-auto-flow: row !important;
	        grid-auto-rows: minmax(96px, auto) !important;
	        gap: 5px !important;
	        width: 100% !important;
	        min-width: 0 !important;
	        max-width: 100% !important;
	        padding: 2px 3px 4px 0 !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior-y: contain !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-width: 0 !important;
	        min-height: 96px !important;
	        padding: 5px 3px 7px !important;
	        border-radius: 9px !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: 40px minmax(28px, auto) 16px !important;
	        gap: 2px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 40px !important;
	        height: 40px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	      body.mobile-builder-active .bottom-tray .tray-item strong {
	        width: 100% !important;
	        min-width: 0 !important;
	        font-size: 9.3px !important;
	        line-height: 1.08 !important;
	        -webkit-line-clamp: 2 !important;
	        overflow-wrap: anywhere !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
	      body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        max-width: 100% !important;
	        font-size: 8px !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	        gap: 4px !important;
	        overflow: visible !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options button {
	        min-width: 0 !important;
	        width: 100% !important;
	      }
	    }

	    @media (max-width: 374px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(92px, auto) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 92px !important;
	        padding-left: 2px !important;
	        padding-right: 2px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 36px !important;
	        height: 36px !important;
	      }
	    }

	    /* 2026-06-15 mobile bead editing contract v2:
	       categories sit above the bead grid, diameter chips remain visible, and 390px phones keep three bead cards per row. */
	    @media (max-width: 540px) {
	      body.mobile-builder-active .builder .bottom-tray,
	      body.mobile-builder-active .bottom-tray {
	        max-height: min(82dvh, calc(100dvh - 104px)) !important;
	        padding: 7px !important;
	        gap: 6px !important;
	        overflow: hidden !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .bottom-tray-head,
	      body.mobile-builder-active .bottom-tray .bottom-tray-head {
	        min-height: 32px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-tools,
	      body.mobile-builder-active .bottom-tray .tray-tools {
	        order: 1 !important;
	        display: grid !important;
	        grid-template-columns: auto minmax(0, 1fr) !important;
	        gap: 6px !important;
	        min-height: 34px !important;
	        padding: 5px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-tools span,
	      body.mobile-builder-active .bottom-tray .tray-tools span {
	        display: inline-flex !important;
	        align-items: center !important;
	        min-width: 0 !important;
	        font-size: 10px !important;
	        white-space: nowrap !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	      body.mobile-builder-active .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	        gap: 4px !important;
	        overflow: visible !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	      body.mobile-builder-active .bottom-tray .tray-size-options button {
	        min-width: 0 !important;
	        height: 28px !important;
	        padding: 0 4px !important;
	        font-size: 10px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-shell,
	      body.mobile-builder-active .bottom-tray .tray-shell {
	        order: 2 !important;
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 6px !important;
	        min-height: 0 !important;
	        max-height: calc(min(82dvh, calc(100dvh - 104px)) - 86px) !important;
	        overflow: hidden !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        order: 1 !important;
	        display: flex !important;
	        flex-wrap: wrap !important;
	        align-items: stretch !important;
	        gap: 5px !important;
	        width: 100% !important;
	        max-height: 76px !important;
	        min-height: 34px !important;
	        padding: 1px 2px 4px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        scrollbar-width: thin !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
	      body.mobile-builder-active .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .bottom-tray .tray-rail-children {
	        display: contents !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
	      body.mobile-builder-active .bottom-tray .tray-rail-label {
	        display: none !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        flex: 0 0 calc((100% - 15px) / 4) !important;
	        width: auto !important;
	        min-width: 0 !important;
	        max-width: none !important;
	        min-height: 30px !important;
	        padding: 0 5px !important;
	        border-radius: 999px !important;
	        font-size: 9.5px !important;
	        line-height: 1.05 !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

		      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
		      body.mobile-builder-active .bottom-tray .tray-scroll,
		      body.mobile-builder-active .left-panel .catalog {
		        order: 2 !important;
		        display: grid !important;
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-flow: row !important;
	        grid-auto-rows: minmax(104px, auto) !important;
	        gap: 6px !important;
	        width: 100% !important;
	        min-width: 0 !important;
	        max-width: 100% !important;
	        max-height: calc(min(82dvh, calc(100dvh - 104px)) - 170px) !important;
	        padding: 2px 2px 6px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
		        overscroll-behavior-y: contain !important;
		        -webkit-overflow-scrolling: touch !important;
		      }

			      body.mobile-builder-active .builder .bottom-tray,
			      body.mobile-builder-active .bottom-tray {
			        gap: 3px !important;
			        padding: 4px !important;
			        max-height: min(46dvh, 382px) !important;
			      }

				      body.mobile-builder-active .builder .bottom-tray .bottom-tray-head,
				      body.mobile-builder-active .bottom-tray .bottom-tray-head {
				        min-height: 22px !important;
				        height: 22px !important;
				        gap: 4px !important;
				      }

				      body.mobile-builder-active .builder .bottom-tray .bottom-tray-head strong,
				      body.mobile-builder-active .bottom-tray .bottom-tray-head strong {
				        font-size: 10px !important;
				        line-height: 1.1 !important;
				      }

			      body.mobile-builder-active .builder .tray-smart-complete,
			      body.mobile-builder-active .tray-smart-complete {
			        height: 24px !important;
			        min-width: 72px !important;
			        padding: 0 8px !important;
			        font-size: 10px !important;
			      }

			      body.mobile-builder-active .builder .bottom-tray .tray-tools,
			      body.mobile-builder-active .bottom-tray .tray-tools {
			        grid-template-columns: 28px minmax(0, 1fr) !important;
			        gap: 3px !important;
				        min-height: 34px !important;
				        padding: 1px 3px !important;
			      }

			      body.mobile-builder-active .builder .bottom-tray .tray-tools span,
			      body.mobile-builder-active .bottom-tray .tray-tools span {
			        font-size: 9px !important;
			        line-height: 1.1 !important;
			      }

			      body.mobile-builder-active .builder .bottom-tray .tray-size-options,
			      body.mobile-builder-active .bottom-tray .tray-size-options {
			        display: grid !important;
			        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
				        gap: 1px !important;
				        max-height: 34px !important;
			        overflow: hidden !important;
			      }

			      body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
			      body.mobile-builder-active .bottom-tray .tray-size-options button {
			        min-width: 0 !important;
				        height: 16px !important;
				        padding: 0 2px !important;
				        font-size: 8.8px !important;
			      }

		      body.mobile-builder-active .builder .bottom-tray .tray-shell,
		      body.mobile-builder-active .bottom-tray .tray-shell {
		        gap: 4px !important;
		        max-height: calc(min(46dvh, 382px) - 84px) !important;
		      }

			      body.mobile-builder-active .builder .bottom-tray .tray-rail,
			      body.mobile-builder-active .bottom-tray .tray-rail {
			        display: flex !important;
			        flex-wrap: wrap !important;
			        align-content: start !important;
			        gap: 3px !important;
				        max-height: 56px !important;
				        min-height: 48px !important;
			        overflow-x: hidden !important;
			        overflow-y: auto !important;
			        padding: 0 2px 2px !important;
			        scrollbar-width: thin !important;
			      }

			      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
			      body.mobile-builder-active .bottom-tray .tray-rail button {
			        flex: 0 0 calc((100% - 9px) / 4) !important;
			        min-width: 0 !important;
			        width: auto !important;
			        max-width: none !important;
				        min-height: 24px !important;
				        padding-left: 3px !important;
				        padding-right: 3px !important;
			      }

		      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
		      body.mobile-builder-active .bottom-tray .tray-scroll {
		        max-height: calc(min(46dvh, 382px) - 154px) !important;
		      }

		      body.mobile-builder-active .builder .bottom-tray .tray-item,
		      body.mobile-builder-active .bottom-tray .tray-item {
	        min-width: 0 !important;
	        min-height: 104px !important;
	        padding: 6px 3px 7px !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: 43px minmax(31px, auto) 16px !important;
	        gap: 2px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 43px !important;
	        height: 43px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	      body.mobile-builder-active .bottom-tray .tray-item strong {
	        font-size: 9.1px !important;
	        line-height: 1.08 !important;
	        -webkit-line-clamp: 2 !important;
	        overflow-wrap: anywhere !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
	      body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        font-size: 7.9px !important;
	      }

	      body.mobile-builder-active .builder .mobile-builder-inline-cta,
	      body.mobile-builder-active .mobile-builder-inline-cta {
	        position: static !important;
	        margin: 7px 0 0 !important;
	        transform: none !important;
	        z-index: 1 !important;
	      }
	    }

	    @media (max-width: 340px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	      }
	    }

		    /* 2026-06-16 tablet builder workbench contract:
		       Mid-size screens must behave like an editor, not a 4000px product list.
		       The bead library, canvas, and quote rail scroll independently so price/checkout
		       remains reachable while the customer browses 108 beads. */
		    @media (min-width: 861px) and (max-width: 1180px) {
	      #builder.builder {
	        min-height: 0 !important;
	        height: calc(100dvh - 48px) !important;
	        max-height: calc(100dvh - 48px) !important;
	        align-items: start !important;
	        grid-template-columns: minmax(300px, 35vw) minmax(420px, 1fr) minmax(280px, 332px) !important;
	        grid-template-rows: minmax(0, 1fr) !important;
	        grid-auto-rows: minmax(0, 1fr) !important;
	        gap: 12px !important;
	        overflow: hidden !important;
	      }

	      #builder .left-panel,
	      #builder .center-stage,
	      #builder .right-panel {
	        min-height: 0 !important;
	        height: calc(100dvh - 112px) !important;
	        max-height: calc(100dvh - 112px) !important;
	      }

	      #builder .left-panel {
	        display: grid !important;
	        grid-template-rows: auto auto minmax(0, auto) auto auto minmax(0, 1fr) auto !important;
	        overflow: hidden !important;
	        position: relative !important;
	        top: auto !important;
	        align-self: start !important;
	      }

	      #builder .left-panel .material-taxonomy {
	        max-height: min(196px, 24dvh) !important;
	        overflow-y: auto !important;
	      }

	      #builder .left-panel .catalog {
	        min-height: 0 !important;
	        height: auto !important;
	        max-height: none !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      #builder .bead-library-status-bar {
	        position: relative !important;
	        bottom: auto !important;
	        margin: 0 !important;
	        border-top: 1px solid rgba(221, 226, 216, 0.86) !important;
	        box-shadow: 0 -12px 24px rgba(248, 246, 238, 0.76) !important;
	      }

	      #builder .center-stage {
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	        padding-right: 4px !important;
	      }

	      #builder .right-panel {
	        position: relative !important;
	        top: auto !important;
	        align-self: start !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	      }

	      #builder .right-panel .checkout {
	        position: sticky !important;
	        bottom: 0 !important;
	        z-index: 3 !important;
	        background:
	          linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,246,238,0.98)) !important;
	        box-shadow: 0 -12px 32px rgba(31, 40, 28, 0.08) !important;
	      }
	    }

	    /* Full bead detail must be a real readable sheet, never a clipped card. */
	    .material-popover.detail-expanded {
	      width: min(540px, calc(100vw - 32px)) !important;
	      max-height: min(calc(100dvh - 132px), 720px) !important;
	      z-index: var(--z-modal) !important;
	      overflow-y: auto !important;
	      overscroll-behavior: contain !important;
	    }

	    @media (min-width: 861px) {
	      .material-popover.detail-expanded {
	        top: 86px !important;
	      }
	    }

	    .material-popover.detail-expanded.pinned .popover-grid span,
	    .material-popover.detail-expanded.pinned .popover-long,
	    .material-popover.detail-expanded.pinned .popover-cultural {
	      display: block !important;
	      -webkit-line-clamp: unset !important;
	      overflow: visible !important;
	    }

	    @media (max-width: 860px) {
	      .material-popover.mobile-detail.detail-expanded {
	        left: 8px !important;
	        right: 8px !important;
	        bottom: max(8px, env(safe-area-inset-bottom)) !important;
	        width: auto !important;
	        max-height: min(76dvh, calc(100dvh - 64px)) !important;
	        padding: 12px !important;
	        border-radius: 16px !important;
	        z-index: var(--z-modal) !important;
	      }
	    }

		    /* 2026-06-16 tablet builder final contract:
		       The editor is a workbench, not a full-height catalog page. Keep the three
		       columns inside the current viewport and let each column scroll internally. */
		    @media (min-width: 861px) and (max-width: 1180px) {
	      #builder.builder {
	        --jewdiy-builder-workbench-height: clamp(680px, calc(100dvh - 152px), 820px);
	        height: var(--jewdiy-builder-workbench-height) !important;
	        max-height: var(--jewdiy-builder-workbench-height) !important;
	        min-height: 0 !important;
	        align-items: start !important;
	        grid-template-rows: minmax(0, 1fr) !important;
	        grid-auto-rows: minmax(0, 1fr) !important;
	        overflow: hidden !important;
	      }

	      #builder .left-panel,
	      #builder .center-stage,
	      #builder .right-panel {
	        height: 100% !important;
	        max-height: 100% !important;
	        min-height: 0 !important;
	        align-self: start !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	      }

	      #builder .left-panel {
	        overflow: hidden !important;
	        grid-template-columns: 126px minmax(0, 1fr) !important;
	        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
	      }

	      #builder .left-panel .panel-header {
	        grid-column: 1 / -1 !important;
	        grid-row: 1 !important;
	      }

	      #builder .left-panel .tabs {
	        grid-column: 1 / -1 !important;
	        grid-row: 2 !important;
	      }

	      #builder .left-panel .material-taxonomy {
	        grid-column: 1 !important;
	        grid-row: 3 / 6 !important;
	        align-self: stretch !important;
	        height: auto !important;
	        min-height: 0 !important;
	        max-height: none !important;
	        overflow-y: auto !important;
	        background:
	          linear-gradient(180deg, rgba(22, 76, 51, 0.98), rgba(18, 64, 46, 0.98)) !important;
	        border-right: 1px solid rgba(11, 42, 30, 0.22) !important;
	      }

	      #builder .left-panel .size-selector {
	        grid-column: 2 !important;
	        grid-row: 3 !important;
	        min-width: 0 !important;
	      }

	      #builder .left-panel .search-bar {
	        grid-column: 2 !important;
	        grid-row: 4 !important;
	        min-width: 0 !important;
	      }

	      #builder .left-panel .catalog {
	        grid-column: 2 !important;
	        grid-row: 5 / 6 !important;
	        min-height: 0 !important;
	        height: auto !important;
	        max-height: 100% !important;
	        overflow-y: auto !important;
	        overscroll-behavior: contain !important;
	      }

	      #builder .left-panel .bead-library-status-bar {
	        grid-column: 1 / -1 !important;
	        grid-row: 6 !important;
	      }

	      #builder .center-stage,
	      #builder .right-panel {
	        padding-bottom: 10px !important;
	      }

	      #builder .right-panel .checkout {
	        position: sticky !important;
	        bottom: 12px !important;
	      }
	    }

	    @media (max-width: 860px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        display: grid !important;
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-flow: row !important;
	        gap: 5px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	      body.mobile-builder-active .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	        gap: 6px !important;
	        overflow: visible !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	      body.mobile-builder-active .bottom-tray .tray-size-options button {
	        min-width: 0 !important;
	        width: 100% !important;
	      }
	    }

	    @media (max-width: 340px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	      }
	    }

	    /* 2026-06-17 desktop-bounded-workbench root fix:
	       This late hotfix file loads after index.html, so the desktop contract must
	       live here too. Desktop inherits the JS-computed root height instead of
	       redefining it locally, keeping bead browsing and checkout compact. */
	    @media (min-width: 1181px) {
	      #builder.builder {
	        --jewdiy-builder-workbench-height: inherit !important;
	        height: var(--jewdiy-builder-workbench-height, clamp(620px, calc(100dvh - 96px), 760px)) !important;
	        max-height: var(--jewdiy-builder-workbench-height, clamp(620px, calc(100dvh - 96px), 760px)) !important;
	        min-height: var(--jewdiy-builder-workbench-height, clamp(620px, calc(100dvh - 96px), 760px)) !important;
	        align-items: stretch !important;
	        grid-template-columns: minmax(530px, 610px) minmax(460px, 1fr) minmax(236px, 300px) !important;
	        grid-template-rows: minmax(0, 1fr) !important;
	        grid-auto-rows: minmax(0, 1fr) !important;
	        gap: 10px !important;
	        overflow: visible !important;
	      }

	      #builder .left-panel,
	      #builder .center-stage,
	      #builder .right-panel {
	        align-self: stretch !important;
	        height: var(--jewdiy-builder-workbench-height, clamp(620px, calc(100dvh - 96px), 760px)) !important;
	        max-height: var(--jewdiy-builder-workbench-height, clamp(620px, calc(100dvh - 96px), 760px)) !important;
	        min-height: 0 !important;
	        overflow-x: hidden !important;
	        overscroll-behavior: auto !important;
	      }

	      #builder .left-panel {
	        display: grid !important;
	        grid-template-columns: 126px minmax(0, 1fr) !important;
	        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
	        position: static !important;
	        top: auto !important;
	        overflow: hidden !important;
	      }

	      #builder .left-panel .panel-header {
	        grid-column: 1 / -1 !important;
	        grid-row: 1 !important;
	      }

	      #builder .left-panel .tabs {
	        grid-column: 1 / -1 !important;
	        grid-row: 2 !important;
	      }

	      #builder .left-panel .material-taxonomy {
	        grid-column: 1 !important;
	        grid-row: 3 / 6 !important;
	        align-self: stretch !important;
	        min-height: 0 !important;
	        max-height: none !important;
	        overflow-y: auto !important;
	        overscroll-behavior: auto !important;
	      }

	      #builder .left-panel .size-selector {
	        grid-column: 2 !important;
	        grid-row: 3 !important;
	        min-width: 0 !important;
	      }

	      #builder .left-panel .search-bar {
	        grid-column: 2 !important;
	        grid-row: 4 !important;
	        min-width: 0 !important;
	      }

	      #builder .left-panel .catalog {
	        grid-column: 2 !important;
	        grid-row: 5 / 6 !important;
	        min-height: 0 !important;
	        height: auto !important;
	        max-height: 100% !important;
	        overflow-y: auto !important;
	        overscroll-behavior: auto !important;
	      }

	      #builder .left-panel .bead-library-status-bar {
	        grid-column: 1 / -1 !important;
	        grid-row: 6 !important;
	      }

	      #builder .center-stage {
	        overflow-y: auto !important;
	        overscroll-behavior: auto !important;
	        padding-right: 4px !important;
	      }

	      #builder .right-panel {
	        display: flex !important;
	        flex-direction: column !important;
	        position: sticky !important;
	        top: 70px !important;
	        overflow: hidden !important;
	      }

	      #builder .right-panel .summary,
	      #builder .right-panel .checkout {
	        flex: 0 0 auto !important;
	      }

	      #builder .right-panel .line-items {
	        flex: 1 1 auto !important;
	        min-height: 112px !important;
	        overflow-y: auto !important;
	        overscroll-behavior: auto !important;
	      }

	      #builder .right-panel .checkout {
	        position: static !important;
	        bottom: auto !important;
	        z-index: auto !important;
	      }
	    }
	
	    /* 2026-06-18 builder workbench continuity contract:
	       desktop must not collapse into a 760px viewport slice. The builder keeps
	       enough vertical space for bead browsing, preview, checkout, and unlock
	       controls while each operational column still owns its own scroll. */
	    @media (min-width: 1181px) {
	      #builder.builder {
	        height: var(--jewdiy-builder-workbench-height, clamp(980px, calc(100dvh + 260px), 1280px)) !important;
	        min-height: var(--jewdiy-builder-workbench-height, clamp(980px, calc(100dvh + 260px), 1280px)) !important;
	        max-height: none !important;
	        grid-template-rows: minmax(0, 1fr) !important;
	        grid-auto-rows: minmax(0, 1fr) !important;
	        align-items: stretch !important;
	        overflow: visible !important;
	      }

	      #builder .left-panel,
	      #builder .center-stage,
	      #builder .right-panel {
	        height: var(--jewdiy-builder-workbench-height, clamp(980px, calc(100dvh + 260px), 1280px)) !important;
	        min-height: 0 !important;
	        max-height: none !important;
	        align-self: stretch !important;
	      }

	      #builder .left-panel {
	        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
	        overflow: hidden !important;
	      }

	      #builder .left-panel .catalog,
	      #builder .left-panel .material-taxonomy,
	      #builder .center-stage,
	      #builder .right-panel .line-items {
	        min-height: 0 !important;
	        overflow-y: auto !important;
	        overscroll-behavior: auto !important;
	      }

	      #builder .center-stage {
	        overflow-x: hidden !important;
	        padding-bottom: 18px !important;
	      }

	      #builder .right-panel {
	        display: flex !important;
	        flex-direction: column !important;
	        overflow: hidden !important;
	        position: sticky !important;
	        top: 70px !important;
	      }

	      #builder .right-panel .summary,
	      #builder .right-panel .checkout {
	        flex: 0 0 auto !important;
	      }

	      #builder .right-panel .line-items {
	        flex: 1 1 auto !important;
	        min-height: 220px !important;
	      }

	      #builder .right-panel .checkout {
	        position: static !important;
	        bottom: auto !important;
	      }
	    }

	    .material-popover.detail-expanded,
	    .material-popover.pinned {
	      max-height: min(78dvh, 760px) !important;
	      overflow-y: auto !important;
	      overscroll-behavior: contain !important;
	    }

	    .material-popover.detail-expanded .popover-grid span,
	    .material-popover.pinned .popover-grid span,
	    .material-popover.detail-expanded .popover-long,
	    .material-popover.pinned .popover-long,
	    .material-popover.detail-expanded .popover-cultural,
	    .material-popover.pinned .popover-cultural {
	      display: block !important;
	      -webkit-line-clamp: unset !important;
	      overflow: visible !important;
	    }

	    /* 2026-06-18 mobile bead library refinement:
	       Phone users need a clean shopping tool, not a compressed desktop rail.
	       Material filters become a horizontal segmented menu, sizes stay in a
	       separate row, and bead cards become two-column real-photo tiles. */
	    @media (max-width: 860px) {
	      body.mobile-builder-active .builder .bottom-tray,
	      body.mobile-builder-active .bottom-tray {
	        padding: 9px !important;
	        gap: 8px !important;
	        border-radius: 16px !important;
	        background:
	          linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,246,238,0.94)),
	          radial-gradient(circle at 16% 0%, rgba(217,167,58,0.12), transparent 42%) !important;
	        box-shadow: 0 16px 34px rgba(31,40,28,0.10), inset 0 1px 0 rgba(255,255,255,0.88) !important;
	        max-height: min(520px, calc(100dvh - 292px)) !important;
	      }

	      body.mobile-builder-active .bottom-tray-head {
	        grid-template-columns: minmax(0, 1fr) auto auto !important;
	        gap: 6px !important;
	        padding: 0 2px !important;
	      }

	      body.mobile-builder-active .bottom-tray-head strong {
	        font-size: 12px !important;
	        letter-spacing: 0 !important;
	      }

	      body.mobile-builder-active .tray-smart-complete,
	      body.mobile-builder-active .tray-toggle {
	        min-width: 64px !important;
	        height: 30px !important;
	        border-radius: 999px !important;
	        font-size: 10px !important;
	      }

	      body.mobile-builder-active .tray-tools {
	        grid-template-columns: minmax(0, 1fr) !important;
	        gap: 6px !important;
	        padding: 7px !important;
	        border-radius: 13px !important;
	        background: rgba(255,255,255,0.82) !important;
	      }

	      body.mobile-builder-active .tray-tools span {
	        font-size: 10.5px !important;
	        color: #315743 !important;
	      }

	      body.mobile-builder-active .tray-size-options {
	        display: grid !important;
	        grid-auto-flow: column !important;
	        grid-auto-columns: minmax(52px, max-content) !important;
	        gap: 6px !important;
	        overflow-x: auto !important;
	        padding-bottom: 1px !important;
	      }

	      body.mobile-builder-active .tray-size-options button {
	        width: auto !important;
	        min-width: 52px !important;
	        height: 30px !important;
	        padding: 0 9px !important;
	        border-radius: 999px !important;
	        font-size: 10.5px !important;
	      }

	      body.mobile-builder-active .tray-shell {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 8px !important;
	      }

	      body.mobile-builder-active .tray-rail {
	        display: grid !important;
	        grid-auto-flow: column !important;
	        grid-auto-columns: max-content !important;
	        align-items: start !important;
	        max-height: none !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        padding: 1px 2px 4px !important;
	        gap: 8px !important;
	        scrollbar-width: none !important;
	      }

	      body.mobile-builder-active .tray-rail::-webkit-scrollbar {
	        display: none !important;
	      }

	      body.mobile-builder-active .tray-rail-row,
	      body.mobile-builder-active .tray-rail-children {
	        display: flex !important;
	        align-items: center !important;
	        gap: 6px !important;
	        min-width: max-content !important;
	        padding: 0 !important;
	        margin: 0 !important;
	        border: 0 !important;
	      }

	      body.mobile-builder-active .tray-rail-label {
	        display: none !important;
	      }

	      body.mobile-builder-active .tray-rail button {
	        flex: 0 0 auto !important;
	        min-width: 58px !important;
	        min-height: 32px !important;
	        padding: 0 10px !important;
	        border-radius: 999px !important;
	        font-size: 11px !important;
	        line-height: 1 !important;
	        white-space: nowrap !important;
	        background: rgba(255,255,255,0.88) !important;
	      }

	      body.mobile-builder-active .tray-rail .tray-rail-child {
	        min-height: 30px !important;
	        padding: 0 9px !important;
	        font-size: 10.5px !important;
	        background: rgba(249,251,247,0.88) !important;
	      }

	      body.mobile-builder-active .tray-rail button.active {
	        background: var(--moss) !important;
	        color: #fff !important;
	        border-color: var(--moss) !important;
	        box-shadow: 0 8px 18px rgba(35,79,55,0.16) !important;
	      }

	      body.mobile-builder-active .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(128px, auto) !important;
	        gap: 8px !important;
	        max-height: min(326px, calc(100dvh - 452px)) !important;
	        padding: 1px 2px 4px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	      }

	      body.mobile-builder-active .tray-item {
	        min-height: 128px !important;
	        padding: 9px 7px 8px !important;
	        grid-template-rows: 58px minmax(34px, auto) 18px !important;
	        gap: 5px !important;
	        border-radius: 13px !important;
	        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,247,241,0.96)) !important;
	        box-shadow: 0 8px 18px rgba(31,40,28,0.06) !important;
	      }

	      body.mobile-builder-active .tray-item .mini-bead {
	        width: 56px !important;
	        height: 56px !important;
	        filter: drop-shadow(0 10px 15px rgba(31,40,28,0.16)) !important;
	      }

	      body.mobile-builder-active .tray-item strong {
	        min-height: 30px !important;
	        font-size: 11.2px !important;
	        line-height: 1.18 !important;
	        -webkit-line-clamp: 2 !important;
	      }

	      body.mobile-builder-active .tray-item > span:not(.detail-chip):not(.badge) {
	        font-size: 9.5px !important;
	        color: #5f6c60 !important;
	      }

	      body.mobile-builder-active .tray-item .detail-chip {
	        left: auto !important;
	        right: 6px !important;
	        top: 6px !important;
	        min-width: 28px !important;
	        height: 19px !important;
	        font-size: 9px !important;
	        background: rgba(255,255,255,0.9) !important;
	      }
	    }

	    @media (max-width: 380px) {
	      body.mobile-builder-active .builder .bottom-tray,
	      body.mobile-builder-active .bottom-tray {
	        max-height: min(494px, calc(100dvh - 278px)) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll,
	      body.mobile-builder-active .left-panel .catalog {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	      }

	      body.mobile-builder-active .tray-scroll {
	        grid-auto-rows: minmax(116px, auto) !important;
	      }

	      body.mobile-builder-active .tray-item {
	        min-height: 116px !important;
	        padding-inline: 6px !important;
	      }

	      body.mobile-builder-active .tray-item .mini-bead {
	        width: 50px !important;
	        height: 50px !important;
	      }
	    }

	    /* 2026-06-18 mobile bead library refinement specificity lock:
	       Earlier phone rules target `.builder .bottom-tray ...`; keep this
	       final block equally specific so the refined two-column tray wins. */
	    @media (max-width: 860px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	      body.mobile-builder-active .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-auto-flow: column !important;
	        grid-auto-columns: minmax(52px, max-content) !important;
	        gap: 6px !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        padding-bottom: 1px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	      body.mobile-builder-active .bottom-tray .tray-size-options button {
	        width: auto !important;
	        min-width: 52px !important;
	        height: 30px !important;
	        padding: 0 9px !important;
	        border-radius: 999px !important;
	        font-size: 10.5px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-shell,
	      body.mobile-builder-active .bottom-tray .tray-shell {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 8px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        display: grid !important;
	        grid-auto-flow: column !important;
	        grid-auto-columns: max-content !important;
	        max-height: none !important;
	        overflow-x: auto !important;
	        overflow-y: hidden !important;
	        padding: 1px 2px 4px !important;
	        gap: 8px !important;
	        scrollbar-width: none !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
	      body.mobile-builder-active .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .bottom-tray .tray-rail-children {
	        display: flex !important;
	        align-items: center !important;
	        gap: 6px !important;
	        min-width: max-content !important;
	        padding: 0 !important;
	        margin: 0 !important;
	        border: 0 !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
	      body.mobile-builder-active .bottom-tray .tray-rail-label {
	        display: none !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        flex: 0 0 auto !important;
	        min-width: 58px !important;
	        min-height: 32px !important;
	        padding: 0 10px !important;
	        border-radius: 999px !important;
	        font-size: 11px !important;
	        line-height: 1 !important;
	        white-space: nowrap !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(128px, auto) !important;
	        gap: 8px !important;
	        max-height: min(326px, calc(100dvh - 452px)) !important;
	        padding: 1px 2px 4px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 128px !important;
	        padding: 9px 7px 8px !important;
	        grid-template-rows: 58px minmax(34px, auto) 18px !important;
	        gap: 5px !important;
	        border-radius: 13px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 56px !important;
	        height: 56px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	      body.mobile-builder-active .bottom-tray .tray-item strong {
	        min-height: 30px !important;
	        font-size: 11.2px !important;
	        line-height: 1.18 !important;
	        -webkit-line-clamp: 2 !important;
	      }
	    }

	    @media (max-width: 380px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(116px, auto) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 116px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 50px !important;
	        height: 50px !important;
	      }
	    }

	    /* 2026-06-19 mobile bead library menu refinement v3:
	       keep category chips visible as a wrapped, two-row control and return the bead
	       tray to a dense three-column picker on phones. */
	    @media (max-width: 860px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-shell,
	      body.mobile-builder-active .bottom-tray .tray-shell {
	        gap: 7px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        display: flex !important;
	        flex-wrap: wrap !important;
	        align-content: flex-start !important;
	        align-items: stretch !important;
	        gap: 6px !important;
	        max-height: 76px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        padding: 1px 2px 4px !important;
	        scrollbar-width: thin !important;
	        -webkit-overflow-scrolling: touch !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
	      body.mobile-builder-active .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .bottom-tray .tray-rail-children {
	        display: contents !important;
	        min-width: 0 !important;
	        width: auto !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        flex: 0 0 calc((100% - 18px) / 4) !important;
	        width: auto !important;
	        min-width: 0 !important;
	        max-width: none !important;
	        min-height: 31px !important;
	        padding: 0 6px !important;
	        border-radius: 999px !important;
	        font-size: 10.2px !important;
	        line-height: 1.05 !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(106px, auto) !important;
	        gap: 6px !important;
	        max-height: min(318px, calc(100dvh - 462px)) !important;
	        padding: 2px 2px 6px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 106px !important;
	        padding: 6px 4px 7px !important;
	        grid-template-rows: 44px minmax(31px, auto) 16px !important;
	        gap: 3px !important;
	        border-radius: 10px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 44px !important;
	        height: 44px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	      body.mobile-builder-active .bottom-tray .tray-item strong {
	        min-height: 30px !important;
	        font-size: 9.4px !important;
	        line-height: 1.12 !important;
	        -webkit-line-clamp: 2 !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
	      body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        font-size: 8px !important;
	        line-height: 1.05 !important;
	      }
	    }

	    @media (max-width: 380px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        gap: 5px !important;
	        max-height: 74px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        flex-basis: calc((100% - 15px) / 4) !important;
	        min-height: 30px !important;
	        padding-inline: 4px !important;
	        font-size: 9.6px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(102px, auto) !important;
	        gap: 5px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 102px !important;
	        padding-inline: 3px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 42px !important;
	        height: 42px !important;
	      }
	    }

	    @media (max-width: 340px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	      }
	    }

	    /* 2026-06-19 mobile bead library menu refinement v4:
	       restore a consumer-grade picker. The size label owns its own row, the
	       material menu wraps cleanly, and bead tiles return to two columns so
	       photos and names read as products instead of compressed controls. */
	    @media (max-width: 860px) {
	      body.mobile-builder-active .builder .bottom-tray,
	      body.mobile-builder-active .bottom-tray {
	        gap: 10px !important;
	        padding: 10px !important;
	        max-height: min(560px, calc(100dvh - 266px)) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-tools,
	      body.mobile-builder-active .bottom-tray .tray-tools {
	        display: grid !important;
	        grid-template-columns: minmax(0, 1fr) !important;
	        gap: 7px !important;
	        padding: 8px !important;
	        border-radius: 14px !important;
	        background: rgba(255, 253, 248, 0.92) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-tools span,
	      body.mobile-builder-active .bottom-tray .tray-tools span {
	        display: block !important;
	        min-width: 0 !important;
	        color: #315743 !important;
	        font-size: 11px !important;
	        font-weight: 900 !important;
	        line-height: 1.2 !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	      body.mobile-builder-active .bottom-tray .tray-size-options {
	        display: grid !important;
	        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	        grid-auto-flow: row !important;
	        grid-auto-columns: auto !important;
	        gap: 7px !important;
	        width: 100% !important;
	        min-width: 0 !important;
	        height: auto !important;
	        min-height: 71px !important;
	        max-height: none !important;
	        overflow: visible !important;
	        padding: 1px !important;
	        scroll-padding-inline: 2px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options::-webkit-scrollbar,
	      body.mobile-builder-active .bottom-tray .tray-size-options::-webkit-scrollbar {
	        display: none !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	      body.mobile-builder-active .bottom-tray .tray-size-options button {
	        width: 100% !important;
	        min-width: 0 !important;
	        height: 32px !important;
	        padding: 0 8px !important;
	        font-size: 10.8px !important;
	        line-height: 1 !important;
	        white-space: nowrap !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-shell,
	      body.mobile-builder-active .bottom-tray .tray-shell {
	        grid-template-columns: minmax(0, 1fr) !important;
	        grid-template-rows: auto minmax(0, 1fr) !important;
	        gap: 9px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        display: grid !important;
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	        grid-auto-flow: row !important;
	        grid-auto-columns: auto !important;
	        gap: 7px !important;
	        max-height: 116px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	        padding: 1px 2px 3px !important;
	        scrollbar-width: thin !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
	      body.mobile-builder-active .bottom-tray .tray-rail-row,
	      body.mobile-builder-active .bottom-tray .tray-rail-children {
	        display: contents !important;
	        min-width: 0 !important;
	        width: auto !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	      body.mobile-builder-active .bottom-tray .tray-rail button {
	        width: 100% !important;
	        min-width: 0 !important;
	        min-height: 34px !important;
	        padding: 0 8px !important;
	        border-radius: 999px !important;
	        font-size: 11px !important;
	        line-height: 1.08 !important;
	        white-space: nowrap !important;
	        overflow: hidden !important;
	        text-overflow: ellipsis !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        grid-auto-rows: minmax(138px, auto) !important;
	        gap: 9px !important;
	        max-height: min(352px, calc(100dvh - 438px)) !important;
	        padding: 2px 2px 8px !important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 138px !important;
	        padding: 10px 8px 9px !important;
	        grid-template-rows: 62px minmax(36px, auto) 18px !important;
	        gap: 6px !important;
	        border-radius: 14px !important;
	        background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(249,247,241,0.96)) !important;
	        box-shadow: 0 10px 22px rgba(31,40,28,0.07) !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	      body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	        width: 60px !important;
	        height: 60px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	      body.mobile-builder-active .bottom-tray .tray-item strong {
	        min-height: 34px !important;
	        font-size: 11px !important;
	        line-height: 1.2 !important;
	        -webkit-line-clamp: 2 !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
	      body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	        font-size: 9.4px !important;
	        line-height: 1.08 !important;
	      }
	    }

	    @media (max-width: 380px) {
	      body.mobile-builder-active .builder .bottom-tray .tray-rail,
	      body.mobile-builder-active .bottom-tray .tray-rail {
	        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	        max-height: 118px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	      body.mobile-builder-active .bottom-tray .tray-scroll {
	        grid-auto-rows: minmax(126px, auto) !important;
	        gap: 7px !important;
	      }

	      body.mobile-builder-active .builder .bottom-tray .tray-item,
	      body.mobile-builder-active .bottom-tray .tray-item {
	        min-height: 126px !important;
	        padding-inline: 7px !important;
	      }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
      width: 54px !important;
      height: 54px !important;
    }
  }

/* 2026-07-03 final mobile editor tray no-collapse lock:
   This must stay at EOF so later rollback-rescue blocks cannot compress
   the bead library back to a 44px slice. */
@media (max-width: 540px) {
  body.mobile-builder-active .builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
    grid-template-rows: 92px 140px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail,
  body.mobile-builder-active .builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}

/* 2026-07-03 EOF product-first bead shelf final recovery lock:
   this must stay at EOF because earlier rollback layers still contain 136px
   card locks. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    grid-auto-rows: 128px !important;
    gap: 3px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 5px 4px !important;
    gap: 3px !important;
    grid-template-rows: 58px 30px 18px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item strong,
  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active #builder .left-panel .product-card strong,
  body.mobile-builder-active .left-panel .product-card strong {
    min-height: 0 !important;
    max-height: 30px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active #builder .left-panel .product-card > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active .left-panel .product-card > span:not(.detail-chip):not(.badge) {
    min-height: 0 !important;
    max-height: 18px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] {
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour-card button,
  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] button,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions * {
    pointer-events: auto !important;
  }
}

/* 2026-07-03 mobile Builder product-first bead card height recovery EOF lock:
   keep real bead photos readable while preventing tall shelf cards from pushing
   the editor away from the first mobile viewport. */
@media (max-width: 540px) {
  body.mobile-builder-active .builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active .left-panel .catalog {
    grid-auto-rows: 128px !important;
    gap: 5px !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active .left-panel .product-card {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 5px 4px !important;
    gap: 3px !important;
    grid-template-rows: 58px 30px 18px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
  }

  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active .left-panel .product-card strong {
    min-height: 0 !important;
    max-height: 30px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-builder-active .bottom-tray .tray-price,
  body.mobile-builder-active .left-panel .tray-price,
  body.mobile-builder-active .left-panel .product-price {
    min-height: 0 !important;
    max-height: 18px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] {
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] button,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions * {
    pointer-events: auto !important;
  }
}

  /* 2026-07-03 emergency editor tray no-collapse lock:
     the mobile tray shell must reserve real card height, not only the 44px
     top slice of a bead card. This keeps the first viewport commercial:
     diameter controls, material rail, and visible purchasable bead cards. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      height: 238px !important;
      min-height: 238px !important;
      max-height: 238px !important;
      grid-template-rows: 92px 140px !important;
      gap: 6px !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      height: 140px !important;
      min-height: 140px !important;
      max-height: 140px !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail,
    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      height: 140px !important;
      min-height: 140px !important;
      max-height: 140px !important;
    }
  }

  /* 2026-07-03 operating repair final guard:
     keep the compact quote/add-to-cart bar and bead shelf as separate app
     workbench rows after the older rollback rescue rules above. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .mobile-builder-inline-cta,
    body.mobile-builder-active .mobile-builder-inline-cta {
      order: 3 !important;
      min-height: 56px !important;
      height: 56px !important;
      max-height: 56px !important;
      padding: 6px 8px !important;
      gap: 7px !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta strong,
    body.mobile-builder-active #mobileBuilderInlineCtaPrice {
      font-size: 18px !important;
      line-height: 1.05 !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      order: 4 !important;
      position: relative !important;
      margin-top: 28px !important;
      grid-template-rows: 48px minmax(0, auto) !important;
      gap: 6px !important;
      max-height: min(34dvh, 286px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 44px minmax(0, 1fr) !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      gap: 4px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      grid-auto-flow: column !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .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: 5px !important;
      font-size: 10px !important;
    }
  }

  /* 2026-06-24 mobile Builder app polish v13:
     first-time mobile shoppers should see one focused editor, not a stack of
     web panels. Keep the required left material rail, top diameter rail and
     three bead columns, while making the tutorial and cards quieter. */
  @media (max-width: 540px) {
    body.mobile-builder-active .topbar {
      min-height: 52px !important;
      padding: 5px 9px !important;
      background: rgba(255, 253, 248, 0.96) !important;
      box-shadow: 0 8px 18px rgba(18, 32, 23, 0.07) !important;
    }

    body.mobile-builder-active .brand {
      flex-basis: 128px !important;
      max-width: 128px !important;
      min-height: 42px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .brand-mark {
      width: 30px !important;
      height: 30px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(74px, 22vw, 86px) !important;
      max-width: 86px !important;
    }

    body.mobile-builder-active .brand-wordmark-text {
      font-size: 18px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .language-select,
    body.mobile-builder-active .top-actions #topCart {
      height: 44px !important;
      min-height: 44px !important;
    }

    body.mobile-builder-active .language-select {
      width: 74px !important;
      min-width: 74px !important;
      padding-left: 8px !important;
      padding-right: 20px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      max-width: 74px !important;
      padding-inline: 9px !important;
      font-size: 10.5px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .designer-sign-panel {
      display: none !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .canvas-card {
      padding-top: 4px !important;
      border-radius: 15px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .preview-layout {
      grid-template-rows: minmax(164px, 22dvh) auto !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .design-canvas {
      height: clamp(164px, 22dvh, 184px) !important;
      min-height: 164px !important;
      max-height: 184px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .bottom-tray,
    body.mobile-builder-active.mobile-builder-empty .bottom-tray {
      margin-top: -20px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 8px !important;
      row-gap: 4px !important;
      min-height: 78px !important;
      padding: 8px 10px !important;
      border-radius: 18px !important;
      border-color: rgba(198, 164, 94, 0.32) !important;
      background: rgba(255, 254, 250, 0.975) !important;
      box-shadow:
        0 12px 24px rgba(24, 35, 27, 0.13),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
      grid-column: 1 !important;
      grid-row: 1 !important;
      min-height: 18px !important;
      padding-inline: 8px !important;
      font-size: 9px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
      font-size: 14px !important;
      line-height: 1.14 !important;
      font-weight: 920 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: grid !important;
      grid-template-columns: 76px 86px !important;
      gap: 6px !important;
      align-items: center !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 8px !important;
      border-radius: 16px !important;
      font-size: 11px !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      border-radius: 18px !important;
      background:
        linear-gradient(180deg, rgba(255,255,253,0.99), rgba(248,249,245,0.99)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 12px 24px rgba(18, 32, 23, 0.065) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      background: rgba(244, 248, 242, 0.96) !important;
      border-color: rgba(42, 80, 52, 0.07) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 50px minmax(0, 1fr) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      width: 50px !important;
      max-width: 50px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
      border-radius: 15px !important;
      font-size: 10px !important;
      font-weight: 820 !important;
      box-shadow: 0 4px 9px rgba(22, 34, 25, 0.04) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      gap: 5px !important;
      grid-auto-rows: 124px !important;
      padding-bottom: 7px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 124px !important;
      min-height: 124px !important;
      max-height: 124px !important;
      border-radius: 15px !important;
      border-color: rgba(45, 74, 52, 0.10) !important;
      background:
        radial-gradient(circle at 50% 34%, rgba(243, 247, 241, 0.96) 0 30px, rgba(255,255,255,0) 31px),
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(251,251,247,0.985)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 6px 13px rgba(18, 32, 23, 0.05) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      grid-template-rows: 18px 44px 28px 14px !important;
      padding: 5px 3px 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-art {
      --bead-scale: 1 !important;
      width: 44px !important;
      height: 44px !important;
      max-width: 44px !important;
      max-height: 44px !important;
      transform: none !important;
      filter: saturate(1.06) contrast(1.03) !important;
      box-shadow:
        inset -9px -10px 14px rgba(0,0,0,0.18),
        inset 6px 7px 12px rgba(255,255,255,0.38),
        0 8px 12px rgba(31, 40, 28, 0.10) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card h3 {
      color: #273029 !important;
      font-size: 9.4px !important;
      line-height: 1.15 !important;
      font-weight: 760 !important;
      -webkit-line-clamp: 2 !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .left-panel .product-card-price {
      color: #2b6742 !important;
      font-size: 8.8px !important;
      font-weight: 860 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .left-panel .product-detail-chip::before {
      width: 22px !important;
      height: 22px !important;
      right: 3px !important;
      top: 3px !important;
      border-color: rgba(47, 111, 70, 0.14) !important;
      background: rgba(255,255,255,0.86) !important;
      box-shadow: 0 4px 8px rgba(20, 35, 25, 0.055) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item.builder-tour-target,
    body.mobile-builder-active .bottom-tray .tray-item.builder-tour-target {
      outline: 0 !important;
      border-color: rgba(196, 156, 82, 0.46) !important;
      box-shadow:
        inset 0 0 0 1px rgba(196, 156, 82, 0.30),
        0 0 0 3px rgba(196, 156, 82, 0.12),
        0 8px 16px rgba(18, 32, 23, 0.06) !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .brand {
      flex-basis: 110px !important;
      max-width: 110px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(68px, 23vw, 80px) !important;
    }

    body.mobile-builder-active .language-select {
      width: 68px !important;
      min-width: 68px !important;
      padding-left: 7px !important;
      padding-right: 18px !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      max-width: 68px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
      column-gap: 6px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
      font-size: 13px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
      grid-template-columns: 66px 78px !important;
      gap: 5px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
      padding-inline: 6px !important;
      font-size: 10.5px !important;
    }
  }

  /* 2026-06-25 mobile share preview artwork focus v26:
     after a design is generated, sharing should feel like a compact phone
     action sheet with a clear square artwork preview, not a squeezed image. */
  @media (max-width: 760px) {
    .share-preview-modal.show {
      align-items: end !important;
      padding: 10px !important;
    }

    .share-preview-card {
      --share-preview-art-size: min(82vw, 38dvh, 340px);
      width: 100% !important;
      max-height: min(86dvh, 680px) !important;
      grid-template-columns: 1fr !important;
      gap: 8px !important;
      padding: 10px !important;
      border-radius: 18px 18px 0 0 !important;
      overflow: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .share-preview-frame {
      min-height: calc(var(--share-preview-art-size) + 42px) !important;
      max-height: calc(var(--share-preview-art-size) + 42px) !important;
      overflow: visible !important;
      border-radius: 14px !important;
    }

    .share-preview-image {
      width: var(--share-preview-art-size) !important;
      height: var(--share-preview-art-size) !important;
      max-width: 100% !important;
      max-height: none !important;
      aspect-ratio: 1 / 1 !important;
      object-fit: contain !important;
    }

    .share-preview-tip {
      width: calc(100% - 16px) !important;
      min-height: 30px !important;
      margin: 6px 8px 8px !important;
      padding: 6px 10px !important;
      border-radius: 11px !important;
      font-size: 10.8px !important;
      line-height: 1.25 !important;
    }

    .share-preview-copy {
      gap: 7px !important;
    }

    .share-preview-copy .eyebrow {
      font-size: 11px !important;
      line-height: 1.1 !important;
    }

    .share-preview-copy h3 {
      font-size: 21px !important;
      line-height: 1.12 !important;
      letter-spacing: 0 !important;
    }

    .share-preview-copy p {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      font-size: 12.5px !important;
      line-height: 1.45 !important;
    }

    .share-preview-actions {
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      margin-top: 2px !important;
      padding-top: 4px !important;
      position: sticky !important;
      bottom: 0 !important;
      background: linear-gradient(180deg, rgba(255,253,247,0), #fffdf7 22%) !important;
    }

    #sharePreviewDownload,
    .share-preview-actions .pill-button.primary {
      grid-column: 1 / -1 !important;
      min-height: 46px !important;
    }

    .share-preview-actions #sharePreviewCopy,
    .share-preview-actions #sharePreviewClose {
      min-height: 44px !important;
    }
  }

  /* 2026-06-24 mobile conversion root polish:
     make the phone editor behave like a purchase app: preview first, then a
     compact share/save strip, a calm quote/action bar, and a bead shelf that is
     not covered by stacked guidance overlays. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .preview-layout {
      order: 2 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      order: 3 !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel {
      order: 4 !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      order: 5 !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel {
      display: block !important;
      margin: 0 !important;
      padding: 4px 6px !important;
      border-radius: 16px !important;
      border-color: rgba(43, 88, 58, 0.12) !important;
      background: rgba(255, 254, 249, 0.96) !important;
      box-shadow: 0 8px 18px rgba(18, 32, 23, 0.055) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .signature-field,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-card-options,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-buttons,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-reward-tip {
      display: none !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 5px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick button {
      min-width: 0 !important;
      width: 100% !important;
      height: 38px !important;
      min-height: 38px !important;
      max-height: 38px !important;
      padding: 0 6px !important;
      border-radius: 13px !important;
      border: 1px solid rgba(43, 88, 58, 0.14) !important;
      background: rgba(247, 250, 245, 0.96) !important;
      color: #25573a !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.88) !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick button:first-child {
      background: linear-gradient(180deg, #34784e, #245c3d) !important;
      color: #fff !important;
      border-color: transparent !important;
      box-shadow: 0 7px 14px rgba(36, 86, 55, 0.17) !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-auto-rows: auto !important;
      align-items: stretch !important;
      gap: 6px !important;
      padding: 7px 8px !important;
      border-radius: 18px !important;
      border-color: rgba(43, 88, 58, 0.13) !important;
      background:
        linear-gradient(180deg, rgba(255,255,253,0.99), rgba(249,248,242,0.985)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 9px 18px rgba(18, 32, 23, 0.06) !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta > div:first-child {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta small {
      color: rgba(51, 60, 54, 0.68) !important;
      font-size: 10.5px !important;
      line-height: 1.14 !important;
      font-weight: 850 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta strong {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      min-height: 28px !important;
      padding: 0 9px !important;
      border-radius: 999px !important;
      background: rgba(246, 239, 222, 0.92) !important;
      color: #1f2a22 !important;
      font-size: 17px !important;
      line-height: 1 !important;
      font-weight: 950 !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-actions {
      display: grid !important;
      grid-template-columns: minmax(54px, 0.66fr) minmax(82px, 0.98fr) minmax(118px, 1.26fr) !important;
      gap: 5px !important;
      min-width: 0 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      padding: 0 6px !important;
      border-radius: 14px !important;
      font-size: 10.5px !important;
      line-height: 1.08 !important;
      font-weight: 900 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .mobile-clear-design {
      background: rgba(255,255,255,0.96) !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .mobile-smart-complete {
      background: rgba(48, 112, 72, 0.08) !important;
      border-color: rgba(48, 112, 72, 0.18) !important;
      color: #286441 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button.primary {
      background: linear-gradient(180deg, #2f7049, #20593a) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 9px 16px rgba(32, 89, 58, 0.18) !important;
    }

    body.mobile-builder-active .design-companion:not(.with-actions) {
      width: min(292px, calc(100vw - 98px)) !important;
      max-width: min(292px, calc(100vw - 98px)) !important;
      min-height: 36px !important;
      max-height: 42px !important;
      top: max(60px, calc(env(safe-area-inset-top) + 50px)) !important;
      padding: 6px 8px !important;
      grid-template-columns: 18px minmax(0, 1fr) !important;
      gap: 6px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1.18 !important;
      box-shadow: 0 8px 18px rgba(18, 32, 23, 0.11) !important;
    }

    body.mobile-builder-active .design-companion:not(.with-actions) .design-companion-text {
      display: block !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 10.5px !important;
      line-height: 1.18 !important;
    }

    body.mobile-builder-active.builder-tour-open .design-companion:not(.with-actions),
    body.mobile-builder-active.builder-tour-open .toast:not(.with-actions) {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-card {
      top: max(62px, calc(env(safe-area-inset-top) + 54px)) !important;
      bottom: auto !important;
      left: 10px !important;
      right: 10px !important;
      width: auto !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      gap: 3px 8px !important;
      min-height: 66px !important;
      padding: 8px 10px !important;
      border-radius: 18px !important;
      border-color: rgba(198, 164, 94, 0.34) !important;
      background: rgba(255, 254, 250, 0.982) !important;
      box-shadow: 0 12px 24px rgba(24, 35, 27, 0.13), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    }

    body.mobile-builder-active .builder-tour-card .builder-tour-progress {
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: fit-content !important;
      min-height: 18px !important;
      padding: 0 8px !important;
      border-radius: 999px !important;
      background: rgba(246, 238, 220, 0.98) !important;
      color: #8a6420 !important;
      font-size: 9px !important;
      line-height: 18px !important;
      letter-spacing: 0 !important;
    }

    body.mobile-builder-active .builder-tour-card strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
      color: #143b2a !important;
      font-size: 13px !important;
      line-height: 1.12 !important;
      font-weight: 920 !important;
      letter-spacing: 0 !important;
    }

    body.mobile-builder-active .builder-tour-card p {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: grid !important;
      grid-template-columns: 68px 84px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      height: 42px !important;
      min-height: 42px !important;
      padding: 0 7px !important;
      border-radius: 15px !important;
      font-size: 10.5px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .mobile-builder-inline-actions {
      grid-template-columns: minmax(48px, 0.62fr) minmax(74px, 0.92fr) minmax(104px, 1.18fr) !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-template-columns: 62px 76px !important;
      gap: 4px !important;
    }
  }

  /* 2026-06-19 mobile transaction priority, updated 2026-06-24:
     the social share controls must support conversion without pushing the live
     bracelet preview, bead tray, quote, or add-to-cart controls below a full
     social wall on phones. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .canvas-toolbar {
      order: 1 !important;
    }

    body.mobile-builder-active .builder .preview-layout {
      order: 2 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      order: 3 !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel {
      order: 4 !important;
      max-height: none !important;
      padding: 4px 6px !important;
      gap: 0 !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray {
      order: 5 !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-field {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-field input,
    body.mobile-builder-active .builder .designer-sign-panel .signature-preview {
      min-height: 30px !important;
      height: 30px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-preview {
      font-size: 16px !important;
      line-height: 1.05 !important;
      padding: 4px 7px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-card-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 5px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding-bottom: 1px !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-card-options::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-style-field,
    body.mobile-builder-active .builder .designer-sign-panel .share-time-toggle,
    body.mobile-builder-active .builder .designer-sign-panel .ai-preview-button {
      flex: 0 0 auto !important;
      min-height: 30px !important;
      height: 30px !important;
      padding: 0 8px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .ai-preview-button {
      max-width: 148px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-time-toggle[for="shareShowPrice"],
    body.mobile-builder-active .builder .designer-sign-panel .share-card-options .ai-preview-button {
      display: none !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .mobile-share-quick {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .mobile-share-quick button {
      min-width: 0 !important;
      height: 34px !important;
      border-radius: 999px !important;
      padding: 0 7px !important;
      font-size: 10.5px !important;
      line-height: 1.1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 5px !important;
      max-height: 36px !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 1px 2px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-inline: contain !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons::-webkit-scrollbar {
      display: none !important;
    }

	    body.mobile-builder-active .builder .designer-sign-panel .share-heading {
	      display: none !important;
	      flex: 0 0 auto !important;
	      min-height: 30px !important;
	      margin: 0 !important;
      padding: 0 9px !important;
      border: 1px solid rgba(221, 226, 216, 0.9) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.88) !important;
      color: var(--ink-soft) !important;
      font-size: 10.5px !important;
      line-height: 30px !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons button {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 76px !important;
      max-width: 116px !important;
      min-height: 30px !important;
      height: 30px !important;
      padding: 0 8px !important;
      border-radius: 999px !important;
      font-size: 9.8px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons .share-save-inline {
      display: none !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons button::before {
      width: 17px !important;
      height: 17px !important;
      font-size: 9px !important;
      flex: 0 0 auto !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-reward-tip {
      margin: 0 !important;
      font-size: 10px !important;
      line-height: 1.18 !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 1 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .designer-sign-panel {
      max-height: 228px !important;
      padding: 6px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .mobile-share-quick {
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .mobile-share-quick button {
      height: 32px !important;
      padding: 0 5px !important;
      font-size: 9.8px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-buttons button {
      min-width: 70px !important;
      max-width: 104px !important;
    }
  }

  /* 2026-06-19 final mobile commercial tray override:
     keep real product choice visible in the first viewport on phones. The
     previous layered mobile rules still apply for behavior; this final block
     only resolves priority, spacing, and consumer-facing scanability. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder {
      gap: 7px !important;
      padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    body.mobile-builder-active .builder .canvas-toolbar {
      gap: 6px !important;
      margin-bottom: 0 !important;
    }

    /* 2026-06-21 mobile canvas zoom tap target lock:
       keep +/- controls finger-safe after the dense Builder tray overrides. */
    body.mobile-builder-active .builder .canvas-zoom-pad button,
    body.mobile-builder-active .canvas-zoom-pad button {
      height: 32px !important;
      min-height: 32px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button:not([data-canvas-fit]),
    body.mobile-builder-active .canvas-zoom-pad button:not([data-canvas-fit]) {
      width: 32px !important;
      min-width: 32px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button[data-canvas-fit],
    body.mobile-builder-active .canvas-zoom-pad button[data-canvas-fit] {
      min-width: 42px !important;
    }

    .builder .tool-actions,
    body.mobile-builder-active .builder .tool-actions {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: center !important;
      gap: 5px !important;
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 1px 1px !important;
      overflow-x: visible !important;
      overflow-y: hidden !important;
    }

    .builder .tool-actions .pill-button,
    body.mobile-builder-active .builder .tool-actions .pill-button {
      min-width: 0 !important;
      width: 100% !important;
      max-width: none !important;
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 7px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .builder .tool-actions .tool-icon-button,
    body.mobile-builder-active .builder .tool-actions .tool-icon-button {
      gap: 0 !important;
      padding-inline: 0 !important;
    }

    .builder .tool-actions .tool-icon-button span,
    body.mobile-builder-active .builder .tool-actions .tool-icon-button span {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .builder .tool-actions .tool-icon-button svg,
    body.mobile-builder-active .builder .tool-actions .tool-icon-button svg {
      width: 16px !important;
      height: 16px !important;
      flex: 0 0 16px !important;
    }

    .builder .tool-actions .preset-picker,
    body.mobile-builder-active .builder .tool-actions .preset-picker {
      grid-column: span 2 !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      overflow: hidden !important;
    }

    .builder .tool-actions .preset-picker select,
    body.mobile-builder-active .builder .tool-actions .preset-picker select {
      width: 100% !important;
      min-width: 0 !important;
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 24px 0 10px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: var(--ink, #212123) !important;
      font-size: 10.5px !important;
      font-weight: 700 !important;
      line-height: 30px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .preview-layout {
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .canvas-card {
      gap: 6px !important;
      padding: 7px !important;
      border-radius: 12px !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: clamp(232px, 29dvh, 278px) !important;
      border-radius: 10px !important;
    }

    body.mobile-builder-active .builder .canvas-status {
      top: 7px !important;
      left: 7px !important;
      right: 7px !important;
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .canvas-status .status-pill {
      min-height: 25px !important;
      padding: 4px 7px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      border-radius: 999px !important;
    }

    body.mobile-builder-active .builder .canvas-length-control {
      padding: 6px 8px !important;
      gap: 5px !important;
      border-radius: 10px !important;
    }

    body.mobile-builder-active .builder .canvas-net-wrist {
      grid-template-columns: minmax(0, 1fr) 62px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .wrist-field-copy em,
    body.mobile-builder-active .builder .wrist-comfort-tip {
      display: none !important;
    }

    body.mobile-builder-active .builder .canvas-length-row {
      grid-template-columns: 28px minmax(0, 1fr) 62px 28px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .length-step {
      width: 28px !important;
      min-width: 28px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 !important;
      border-radius: 9px !important;
    }

    body.mobile-builder-active .builder .canvas-length-row input[type="number"],
    body.mobile-builder-active .builder .canvas-net-wrist input {
      width: 62px !important;
      height: 30px !important;
      min-height: 30px !important;
      padding-inline: 5px !important;
      font-size: 11px !important;
    }

    .builder .mobile-builder-inline-cta,
    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      margin-block: 0 !important;
      padding: 7px 8px !important;
      gap: 6px !important;
      border-radius: 12px !important;
    }

    .builder .mobile-builder-inline-actions,
    body.mobile-builder-active .builder .mobile-builder-inline-actions {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      gap: 5px !important;
    }

    .builder .mobile-builder-inline-cta .pill-button,
    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
      min-width: 0 !important;
      width: 100% !important;
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 6px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary {
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary .total {
      font-size: 18px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder .bottom-tray {
      gap: 5px !important;
      padding: 6px !important;
      border-radius: 12px !important;
      max-height: min(56dvh, calc(100dvh - 216px)) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-smart-complete,
    body.mobile-builder-active .builder .bottom-tray .tray-toggle {
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools {
      display: block !important;
      min-height: 0 !important;
      padding: 3px 4px !important;
      border-radius: 10px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options {
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 4px !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 24px !important;
      min-height: 24px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 42px !important;
      max-width: 74px !important;
      height: 24px !important;
      min-height: 24px !important;
      padding: 0 7px !important;
      border-radius: 999px !important;
      font-size: 9.5px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell {
      grid-template-columns: 74px minmax(0, 1fr) !important;
      gap: 5px !important;
      max-height: calc(min(56dvh, calc(100dvh - 216px)) - 66px) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail {
      grid-template-columns: 1fr !important;
      gap: 4px !important;
      max-height: calc(min(56dvh, calc(100dvh - 216px)) - 72px) !important;
      overflow-y: auto !important;
      padding-right: 1px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button {
      min-height: 28px !important;
      padding: 4px 5px !important;
      border-radius: 9px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      text-align: left !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(86px, auto) !important;
      gap: 5px !important;
      max-height: calc(min(56dvh, calc(100dvh - 216px)) - 72px) !important;
      padding-right: 1px !important;
      overflow-y: auto !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item {
      min-height: 86px !important;
      padding: 5px !important;
      border-radius: 9px !important;
      grid-template-rows: 38px minmax(26px, auto) 14px !important;
      gap: 3px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead {
      width: 38px !important;
      height: 38px !important;
      max-width: 38px !important;
      max-height: 38px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .builder .bottom-tray .tray-item span {
      font-size: 9.5px !important;
      line-height: 1.08 !important;
      overflow-wrap: anywhere !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .design-canvas {
      min-height: clamp(216px, 28dvh, 252px) !important;
    }

    body.mobile-builder-active .builder .tool-actions .pill-button {
      min-width: 76px !important;
      max-width: 112px !important;
      min-height: 32px !important;
      height: 32px !important;
      padding-inline: 7px !important;
      font-size: 9.8px !important;
    }

    body.mobile-builder-active .builder .bottom-tray {
      max-height: min(58dvh, calc(100dvh - 204px)) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell {
      grid-template-columns: 66px minmax(0, 1fr) !important;
      max-height: calc(min(58dvh, calc(100dvh - 204px)) - 62px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .builder .bottom-tray .tray-scroll {
      max-height: calc(min(58dvh, calc(100dvh - 204px)) - 68px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll {
      grid-auto-rows: minmax(82px, auto) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item {
      min-height: 82px !important;
    }
  }

  /* 2026-06-19 first-visit builder tutorial:
     guide a new customer through tapping a bead, reading the canvas, and
     completing the string without blocking the editor itself. */
  .builder-tour-button {
    min-width: 104px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-color: rgba(184, 133, 54, 0.42) !important;
    background: linear-gradient(180deg, #fffdf8, #f8efe0) !important;
    color: #62420e !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }

  .builder-tour-button[aria-expanded="true"] {
    border-color: rgba(184, 133, 54, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(211, 166, 82, 0.18) !important;
  }

  .builder-tour {
    position: fixed;
    inset: 0;
    z-index: var(--z-tooltip);
    pointer-events: none;
  }

  .builder-tour[hidden] {
    display: none !important;
  }

  .builder-tour-card {
    position: absolute;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 18px));
    width: min(360px, calc(100vw - 28px));
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(207, 178, 118, 0.72);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 18px 48px rgba(31, 40, 28, 0.20), inset 0 1px 0 rgba(255,255,255,0.92);
    color: #24332a;
    pointer-events: auto;
  }

  .builder-tour-progress {
    color: #9b7324;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.02em;
  }

  .builder-tour-card strong {
    color: #173d2b;
    font-size: 17px;
    line-height: 1.18;
  }

  .builder-tour-card p {
    margin: 0;
    color: #5f655f;
    font-size: 13px;
    line-height: 1.45;
  }

  .builder-tour-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px;
  }

  .builder-tour-actions button {
    min-width: 0;
    height: 44px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(35, 79, 55, 0.20);
    padding: 0 12px;
    font-weight: 850;
    font-size: 12px;
    cursor: pointer;
  }

  .builder-tour-secondary {
    background: #fff;
    color: #516258;
  }

  .builder-tour-primary {
    background: #23623f;
    color: #fff;
    border-color: #23623f !important;
  }

  .builder-tour-target {
    position: relative !important;
    z-index: var(--z-side-panel) !important;
    outline: 3px solid rgba(214, 167, 75, 0.88) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 7px rgba(214, 167, 75, 0.16), 0 16px 34px rgba(31, 40, 28, 0.16);
  }

  .builder-tour-pulse {
    animation: jewdiyBuilderTourPulse 0.95s ease-out 1;
  }

  @keyframes jewdiyBuilderTourPulse {
    0% { box-shadow: 0 0 0 5px rgba(214, 167, 75, 0.12), 0 12px 26px rgba(31, 40, 28, 0.14); }
    42% { box-shadow: 0 0 0 12px rgba(214, 167, 75, 0.22), 0 18px 38px rgba(31, 40, 28, 0.20); }
    100% { box-shadow: 0 0 0 7px rgba(214, 167, 75, 0.16), 0 16px 34px rgba(31, 40, 28, 0.16); }
  }

  @media (max-width: 540px) {
    .builder-tour-button {
      grid-column: 1 / -1 !important;
      width: 100% !important;
      height: 31px !important;
      min-height: 31px !important;
      font-size: 11px !important;
    }

    .builder-tour-card {
      left: 10px;
      right: 10px;
      bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px));
      width: auto;
      padding: 12px;
      gap: 7px;
    }

    /* 2026-06-20 mobile builder tutorial compact bead prompt:
       the auto-open first step should teach without hiding the live bracelet
       preview, price, or first product row. */
	    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
	      top: max(158px, calc(env(safe-area-inset-top) + 152px));
	      bottom: auto;
	      left: 12px;
	      right: 12px;
	      display: grid;
	      grid-template-columns: minmax(0, 1fr) minmax(148px, auto);
	      grid-template-rows: auto auto;
	      align-items: center;
	      gap: 3px 8px;
	      padding: 9px 10px;
	      min-height: 72px;
	      box-shadow: 0 10px 26px rgba(31, 40, 28, 0.14), inset 0 1px 0 rgba(255,255,255,0.92);
	    }

	    .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
	      grid-column: 1;
	      grid-row: 1;
	      font-size: 9.5px;
	      line-height: 1;
	    }

	    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
	      grid-column: 1;
	      grid-row: 2;
	      font-size: 13.5px;
	      line-height: 1.18;
	    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card p {
      display: none;
    }

	    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
	      grid-column: 2;
	      grid-row: 1 / span 2;
	      grid-template-columns: minmax(64px, 0.9fr) minmax(82px, 1fr);
	      gap: 6px;
	    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

		    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
		      /* 2026-06-21 mobile builder tutorial action tap target:
		         first-visit guidance buttons are primary teaching controls, not tiny labels. */
		      height: 44px;
		      min-height: 44px;
		      padding: 0 9px;
		      font-size: 11px;
		      white-space: nowrap;
		    }

    .builder-tour-card strong {
      font-size: 15px;
    }

    .builder-tour-card p {
      font-size: 12px;
      line-height: 1.38;
    }

	    .builder-tour-actions button {
	      height: 44px;
	      min-height: 44px;
	      padding: 0 8px;
	      font-size: 11px;
	    }
  }

  /* 2026-06-20 user-perspective mobile bead library final lock:
     the category menu must feel like a shopping control, not a left sidebar
     that squeezes product photos. Keep material chips above the beads and give
     the product grid the full tray width on every phone review viewport. */
  @media (max-width: 860px) {
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      gap: 8px !important;
      padding: 8px !important;
      max-height: min(568px, calc(100dvh - 248px)) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: 8px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-height: calc(min(568px, calc(100dvh - 248px)) - 88px) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      display: grid !important;
      grid-auto-flow: column !important;
      grid-template-rows: repeat(2, minmax(30px, auto)) !important;
      grid-auto-columns: minmax(92px, max-content) !important;
      grid-template-columns: none !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-height: 72px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 1px 2px 4px !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail::-webkit-scrollbar,
    body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
    body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
    body.mobile-builder-active .bottom-tray .tray-rail-row,
    body.mobile-builder-active .bottom-tray .tray-rail-children {
      display: contents !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
    body.mobile-builder-active .bottom-tray .tray-rail-label {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      line-height: 1.05 !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(128px, auto) !important;
      gap: 8px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-height: min(326px, calc(100dvh - 444px)) !important;
      padding: 1px 2px 7px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      min-height: 128px !important;
      padding: 8px 7px !important;
      grid-template-rows: 56px minmax(32px, auto) 18px !important;
      gap: 5px !important;
      border-radius: 13px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
      width: 54px !important;
      height: 54px !important;
      max-width: 54px !important;
      max-height: 54px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong {
      min-height: 30px !important;
      font-size: 10.8px !important;
      line-height: 1.16 !important;
      -webkit-line-clamp: 2 !important;
    }
  }

  /* 2026-06-20 mobile bead library single-row menu polish:
     keep material filters as one premium horizontal control so shoppers see
     real bead photos sooner and do not read the menu as clipped layout debris. */
  @media (max-width: 860px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 3px !important;
      overflow: hidden !important;
      padding-right: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      padding-inline: 4px !important;
      font-size: 9.6px !important;
      text-overflow: clip !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      gap: 6px !important;
      max-height: calc(min(568px, calc(100dvh - 248px)) - 56px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      display: grid !important;
      grid-auto-flow: column !important;
      grid-template-rows: minmax(32px, auto) !important;
      grid-auto-columns: minmax(74px, max-content) !important;
      grid-template-columns: none !important;
      align-items: center !important;
      gap: 6px !important;
      min-height: 36px !important;
      max-height: 40px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 1px 18px 3px 1px !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), rgba(0, 0, 0, 0));
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), rgba(0, 0, 0, 0));
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      min-height: 32px !important;
      max-height: 32px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;
      font-size: 10.8px !important;
      line-height: 1 !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      max-height: min(356px, calc(100dvh - 410px)) !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      grid-template-rows: minmax(31px, auto) !important;
      grid-auto-columns: minmax(68px, max-content) !important;
      min-height: 35px !important;
      max-height: 39px !important;
      padding-right: 16px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      min-height: 31px !important;
      max-height: 31px !important;
      padding-inline: 10px !important;
      font-size: 10.2px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      max-height: min(336px, calc(100dvh - 394px)) !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      max-height: min(548px, calc(100dvh - 232px)) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: minmax(0, 1fr) !important;
      max-height: calc(min(548px, calc(100dvh - 232px)) - 84px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      grid-template-rows: repeat(2, minmax(29px, auto)) !important;
      grid-auto-columns: minmax(84px, max-content) !important;
      max-height: 70px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(120px, auto) !important;
      max-height: min(306px, calc(100dvh - 424px)) !important;
      gap: 7px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      min-height: 120px !important;
      padding-inline: 6px !important;
    }
  }

  /* 2026-06-20 narrow phone single-row menu lock:
     this must stay after the older 380px fallback so 360px review phones do not
     return to a bulky two-row material menu. */
	  @media (max-width: 380px) {
	    body.mobile-builder-active .builder .bottom-tray,
	    body.mobile-builder-active .bottom-tray {
	      max-height: 446px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      gap: 2px !important;
      padding-right: 1px !important;
      overflow-x: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      min-width: 0 !important;
      max-width: none !important;
      padding-inline: 5px !important;
      font-size: 9.1px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      gap: 6px !important;
      max-height: 390px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      display: grid !important;
      grid-auto-flow: column !important;
      grid-template-rows: minmax(31px, auto) !important;
      grid-auto-columns: minmax(68px, max-content) !important;
      grid-template-columns: none !important;
      min-height: 35px !important;
      max-height: 39px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 1px 16px 3px 1px !important;
      scrollbar-width: none !important;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), rgba(0, 0, 0, 0));
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), rgba(0, 0, 0, 0));
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      min-height: 31px !important;
      max-height: 31px !important;
      padding-inline: 10px !important;
      text-align: center !important;
      font-size: 10.2px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
	      max-height: 306px !important;
	    }
	  }

	  /* 2026-06-20 mobile bead library shopper density pass:
	     the first phone viewport must feel like a usable product shelf: clear
	     price, tap-safe size chips, one refined material rail, and enough real
	     bead cards visible for an immediate decision. */
	  @media (max-width: 860px) {
	    body.mobile-builder-active .builder .mobile-builder-inline-cta {
	      grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr) !important;
	      align-items: center !important;
	      padding: 6px 7px !important;
	      gap: 6px !important;
	      border-radius: 12px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary {
	      min-width: 0 !important;
	      align-content: center !important;
	      gap: 2px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary span {
	      font-size: 10.5px !important;
	      line-height: 1.1 !important;
	      white-space: nowrap !important;
	      overflow: hidden !important;
	      text-overflow: ellipsis !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary .total {
	      font-size: 16px !important;
	      line-height: 1 !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-actions {
	      grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.9fr) minmax(0, 1.35fr) !important;
	      align-items: center !important;
	      gap: 4px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
	      height: 34px !important;
	      min-height: 34px !important;
	      padding-inline: 4px !important;
	      font-size: 10px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray,
	    body.mobile-builder-active .bottom-tray {
	      gap: 6px !important;
	      padding: 7px !important;
	      margin-top: -6px !important;
	      max-height: min(520px, calc(100dvh - 224px)) !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .bottom-tray-head,
	    body.mobile-builder-active .bottom-tray .bottom-tray-head {
	      display: none !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-smart-complete,
	    body.mobile-builder-active .builder .bottom-tray .tray-toggle,
	    body.mobile-builder-active .bottom-tray .tray-smart-complete,
	    body.mobile-builder-active .bottom-tray .tray-toggle {
	      height: 34px !important;
	      min-height: 34px !important;
	      padding-inline: 13px !important;
	      font-size: 11px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-tools,
	    body.mobile-builder-active .bottom-tray .tray-tools {
	      padding: 2px 3px !important;
	      border-radius: 10px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	    body.mobile-builder-active .bottom-tray .tray-size-options {
	      height: 32px !important;
	      min-height: 32px !important;
	      gap: 4px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	    body.mobile-builder-active .bottom-tray .tray-size-options button {
	      height: 32px !important;
	      min-height: 32px !important;
	      padding-inline: 4px !important;
	      font-size: 10px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-shell,
	    body.mobile-builder-active .bottom-tray .tray-shell {
	      gap: 3px !important;
	      max-height: calc(min(520px, calc(100dvh - 224px)) - 78px) !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-rail,
	    body.mobile-builder-active .bottom-tray .tray-rail {
	      grid-template-rows: minmax(34px, auto) !important;
	      grid-auto-columns: minmax(64px, max-content) !important;
	      gap: 5px !important;
	      min-height: 36px !important;
	      max-height: 38px !important;
	      padding: 0 18px 2px 0 !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	    body.mobile-builder-active .bottom-tray .tray-rail button {
	      min-height: 34px !important;
	      max-height: 34px !important;
	      padding-inline: 11px !important;
	      font-size: 11px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	    body.mobile-builder-active .bottom-tray .tray-scroll {
	      grid-auto-rows: minmax(94px, auto) !important;
	      max-height: min(348px, calc(100dvh - 346px)) !important;
	      gap: 6px !important;
	      padding: 1px 2px 8px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-item,
	    body.mobile-builder-active .bottom-tray .tray-item {
	      min-height: 94px !important;
	      grid-template-rows: 42px minmax(23px, auto) 15px !important;
	      gap: 4px !important;
	      padding: 6px !important;
	      border-radius: 11px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
	    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
	      width: 42px !important;
	      height: 42px !important;
	      max-width: 42px !important;
	      max-height: 42px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
	    body.mobile-builder-active .bottom-tray .tray-item strong {
	      min-height: 22px !important;
	      font-size: 10.4px !important;
	      line-height: 1.12 !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
	    body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
	      font-size: 9.2px !important;
	      line-height: 1.1 !important;
	    }
	  }

	  @media (max-width: 380px) {
	    body.mobile-builder-active .builder .mobile-builder-inline-cta {
	      grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr) !important;
	      padding: 6px !important;
	      gap: 4px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .order-summary .total {
	      font-size: 15px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-actions {
	      gap: 3px !important;
	    }

	    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
	      height: 33px !important;
	      min-height: 33px !important;
	      padding-inline: 3px !important;
	      font-size: 9.5px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray,
	    body.mobile-builder-active .bottom-tray {
	      max-height: min(500px, calc(100dvh - 214px)) !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	    body.mobile-builder-active .bottom-tray .tray-size-options button {
	      font-size: 9.4px !important;
	      padding-inline: 2px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-shell,
	    body.mobile-builder-active .bottom-tray .tray-shell {
	      max-height: calc(min(500px, calc(100dvh - 214px)) - 76px) !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-rail,
	    body.mobile-builder-active .bottom-tray .tray-rail {
	      grid-auto-columns: minmax(58px, max-content) !important;
	      min-height: 35px !important;
	      max-height: 37px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	    body.mobile-builder-active .bottom-tray .tray-rail button {
	      padding-inline: 9px !important;
	      font-size: 10.2px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
	    body.mobile-builder-active .bottom-tray .tray-scroll {
	      grid-auto-rows: minmax(90px, auto) !important;
	      max-height: min(340px, calc(100dvh - 332px)) !important;
	      gap: 5px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-item,
	    body.mobile-builder-active .bottom-tray .tray-item {
	      min-height: 90px !important;
	      grid-template-rows: 40px minmax(22px, auto) 14px !important;
	      padding: 5px !important;
	    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
		    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
		      width: 40px !important;
		      height: 40px !important;
		      max-width: 40px !important;
		      max-height: 40px !important;
		    }
		  }

		  /* 2026-06-21 mobile add-to-cart quote bar:
		     the shopper must be able to read selected count, quote, and cart action
		     before browsing more beads; never squeeze the status into vertical text. */
		  @media (max-width: 860px) {
		    body.mobile-builder-active .builder .mobile-builder-inline-cta {
		      grid-template-columns: minmax(0, 1fr) !important;
		      grid-auto-rows: auto !important;
		      align-items: stretch !important;
		      gap: 7px !important;
		      padding: 8px !important;
		    }

		    body.mobile-builder-active .builder .mobile-builder-inline-cta > div:first-child {
		      display: grid !important;
		      grid-template-columns: minmax(0, 1fr) auto !important;
		      align-items: baseline !important;
		      gap: 10px !important;
		      min-width: 0 !important;
		      width: 100% !important;
		    }

		    body.mobile-builder-active .builder .mobile-builder-inline-cta small {
		      min-width: 0 !important;
		      white-space: nowrap !important;
		      overflow: hidden !important;
		      text-overflow: ellipsis !important;
		      overflow-wrap: normal !important;
		      word-break: keep-all !important;
		      writing-mode: horizontal-tb !important;
		      font-size: 11.5px !important;
		      line-height: 1.2 !important;
		    }

		    body.mobile-builder-active .builder .mobile-builder-inline-cta strong {
		      white-space: nowrap !important;
		      font-size: 22px !important;
		      line-height: 1 !important;
		    }

		    body.mobile-builder-active .builder .mobile-builder-inline-actions {
		      grid-template-columns: minmax(58px, 0.74fr) minmax(78px, 0.98fr) minmax(126px, 1.42fr) !important;
		      gap: 6px !important;
		    }

		    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
		      height: 36px !important;
		      min-height: 36px !important;
		      font-size: 10.5px !important;
		      line-height: 1.08 !important;
		    }
		  }

		  /* 2026-06-21 mobile bead library left-menu three-column lock:
		     phones should browse like a tool shelf: diameter chips stay on top,
		     material shortcuts stay on the left, and bead photos scan in three
		     columns without squeezing the quote/add-cart controls. */
		  @media (max-width: 860px) {
		    body.mobile-builder-active .builder .bottom-tray,
		    body.mobile-builder-active .bottom-tray {
		      gap: 6px !important;
		      padding: 7px !important;
		      margin-top: -5px !important;
		      max-height: min(540px, calc(100dvh - 214px)) !important;
		      overflow: hidden !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-tools,
		    body.mobile-builder-active .bottom-tray .tray-tools {
		      display: grid !important;
		      grid-template-columns: auto minmax(0, 1fr) !important;
		      align-items: center !important;
		      gap: 6px !important;
		      min-height: 34px !important;
		      padding: 2px 3px !important;
		      border-radius: 10px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
		    body.mobile-builder-active .bottom-tray .tray-tools span {
		      display: inline-flex !important;
		      align-items: center !important;
		      min-width: max-content !important;
		      color: #37523e !important;
		      font-size: 10.5px !important;
		      font-weight: 900 !important;
		      line-height: 1 !important;
		      white-space: nowrap !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
		    body.mobile-builder-active .bottom-tray .tray-size-options {
		      display: flex !important;
		      flex-wrap: nowrap !important;
		      align-items: center !important;
		      gap: 3px !important;
		      width: 100% !important;
		      min-width: 0 !important;
		      height: 30px !important;
		      min-height: 30px !important;
		      padding: 0 !important;
		      overflow: hidden !important;
		      -webkit-mask-image: none !important;
		      mask-image: none !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
		    body.mobile-builder-active .bottom-tray .tray-size-options button {
		      flex: 1 1 0 !important;
		      min-width: 0 !important;
		      max-width: none !important;
		      height: 30px !important;
		      min-height: 30px !important;
		      padding: 0 3px !important;
		      border-radius: 999px !important;
		      font-size: 9.6px !important;
		      line-height: 1 !important;
		      white-space: nowrap !important;
		      overflow: hidden !important;
		      text-overflow: clip !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-shell,
		    body.mobile-builder-active .bottom-tray .tray-shell {
		      display: grid !important;
		      grid-template-columns: 58px minmax(0, 1fr) !important;
		      grid-template-rows: minmax(0, 1fr) !important;
		      gap: 6px !important;
		      width: 100% !important;
		      min-width: 0 !important;
		      max-height: calc(min(540px, calc(100dvh - 214px)) - 46px) !important;
		      overflow: hidden !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail,
		    body.mobile-builder-active .bottom-tray .tray-rail {
		      display: grid !important;
		      grid-auto-flow: row !important;
		      grid-template-columns: 1fr !important;
		      grid-template-rows: none !important;
		      grid-auto-columns: auto !important;
		      grid-auto-rows: minmax(32px, max-content) !important;
		      align-content: start !important;
		      gap: 5px !important;
		      width: 58px !important;
		      min-width: 0 !important;
		      max-width: 58px !important;
		      max-height: calc(min(540px, calc(100dvh - 214px)) - 50px) !important;
		      padding: 0 2px 2px 0 !important;
		      overflow-x: hidden !important;
		      overflow-y: auto !important;
		      scrollbar-width: none !important;
		      -webkit-overflow-scrolling: touch !important;
		      -webkit-mask-image: none !important;
		      mask-image: none !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail::-webkit-scrollbar,
		    body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
		      display: none !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
		    body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
		    body.mobile-builder-active .bottom-tray .tray-rail-row,
		    body.mobile-builder-active .bottom-tray .tray-rail-children {
		      display: contents !important;
		      width: auto !important;
		      min-width: 0 !important;
		      padding: 0 !important;
		      margin: 0 !important;
		      border: 0 !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
		    body.mobile-builder-active .bottom-tray .tray-rail button {
		      display: inline-flex !important;
		      align-items: center !important;
		      justify-content: center !important;
		      width: 100% !important;
		      min-width: 0 !important;
		      min-height: 32px !important;
		      max-height: none !important;
		      padding: 3px 4px !important;
		      border-radius: 10px !important;
		      font-size: 10px !important;
		      line-height: 1.05 !important;
		      text-align: center !important;
		      white-space: normal !important;
		      overflow-wrap: anywhere !important;
		      word-break: keep-all !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
		    body.mobile-builder-active .bottom-tray .tray-scroll {
		      display: grid !important;
		      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		      grid-auto-rows: minmax(86px, auto) !important;
		      gap: 4px !important;
		      width: 100% !important;
		      min-width: 0 !important;
		      max-height: min(384px, calc(100dvh - 344px)) !important;
		      padding: 0 1px 7px 0 !important;
		      overflow-x: hidden !important;
		      overflow-y: auto !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item,
		    body.mobile-builder-active .bottom-tray .tray-item {
		      min-height: 86px !important;
		      padding: 5px 3px !important;
		      grid-template-rows: 34px minmax(22px, auto) 13px !important;
		      gap: 3px !important;
		      border-radius: 9px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
		    body.mobile-builder-active .bottom-tray .tray-item .detail-chip {
		      left: 3px !important;
		      top: 3px !important;
		      min-width: 21px !important;
		      height: 15px !important;
		      padding: 0 4px !important;
		      font-size: 7.8px !important;
		      line-height: 15px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
		    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
		      width: 34px !important;
		      height: 34px !important;
		      max-width: 34px !important;
		      max-height: 34px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
		    body.mobile-builder-active .bottom-tray .tray-item strong {
		      min-height: 21px !important;
		      font-size: 9.2px !important;
		      line-height: 1.05 !important;
		      -webkit-line-clamp: 2 !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
		    body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge) {
		      font-size: 8px !important;
		      line-height: 1 !important;
		    }
		  }

		  @media (max-width: 380px) {
		    body.mobile-builder-active .builder .bottom-tray,
		    body.mobile-builder-active .bottom-tray {
		      max-height: min(510px, calc(100dvh - 206px)) !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-tools,
		    body.mobile-builder-active .bottom-tray .tray-tools {
		      gap: 4px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
		    body.mobile-builder-active .bottom-tray .tray-tools span {
		      font-size: 9.6px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-shell,
		    body.mobile-builder-active .bottom-tray .tray-shell {
		      grid-template-columns: 52px minmax(0, 1fr) !important;
		      gap: 5px !important;
		      max-height: calc(min(510px, calc(100dvh - 206px)) - 44px) !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail,
		    body.mobile-builder-active .bottom-tray .tray-rail {
		      width: 52px !important;
		      max-width: 52px !important;
		      gap: 4px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
		    body.mobile-builder-active .bottom-tray .tray-rail button {
		      min-height: 31px !important;
		      padding-inline: 3px !important;
		      font-size: 9.3px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
		    body.mobile-builder-active .bottom-tray .tray-scroll {
		      grid-auto-rows: minmax(82px, auto) !important;
		      gap: 3px !important;
		      max-height: min(360px, calc(100dvh - 326px)) !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item,
		    body.mobile-builder-active .bottom-tray .tray-item {
		      min-height: 82px !important;
		      padding-inline: 2px !important;
		    }

		    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
		    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
		      width: 32px !important;
		      height: 32px !important;
		      max-width: 32px !important;
		      max-height: 32px !important;
		    }
		  }

		  /* 2026-06-20 mobile floating action clearance:
		     mobile shoppers already have the sticky top cart and in-page support links.
     Keep the lower viewport readable instead of letting duplicate fixed bubbles
     cover trust copy, ready-made CTAs, shipping notes, or footer support text. */
  @media (max-width: 540px) {
    body:not(.cart-open):not(.mobile-builder-active):not(.canvas-fullscreen-open) .cart-float,
    body:not(.cart-open):not(.mobile-builder-active):not(.canvas-fullscreen-open) .contact-float,
    body:not(.cart-open):not(.mobile-builder-active):not(.canvas-fullscreen-open) .contact-popover {
      display: none !important;
    }

    /* 2026-06-21 mobile builder hidden support popover:
       The support bubble is intentionally suppressed inside the editor, cart
       and fullscreen preview, so its popover must not remain visually present
       behind the bead tray as an untappable layer. */
    body.mobile-builder-active .contact-popover,
    body.cart-open .contact-popover,
    body.canvas-fullscreen-open .contact-popover {
      display: none !important;
    }
  }

  /* 2026-06-21 mobile tray three-column final override:
     Material categories sit in the left rail, diameter stays on top, and the
     shopper sees three bead cards per row even on narrow review phones. */
  @media (max-width: 860px) {
    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      display: grid !important;
      grid-template-columns: 58px minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 1fr) !important;
      gap: 6px !important;
      width: 100% !important;
      min-width: 0 !important;
      max-height: calc(min(540px, calc(100dvh - 214px)) - 46px) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      order: 0 !important;
      display: grid !important;
      grid-auto-flow: row !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: none !important;
      grid-auto-columns: auto !important;
      grid-auto-rows: minmax(32px, max-content) !important;
      align-content: start !important;
      gap: 5px !important;
      width: 58px !important;
      min-width: 0 !important;
      max-width: 58px !important;
      min-height: 0 !important;
      height: auto !important;
      max-height: calc(min(540px, calc(100dvh - 214px)) - 50px) !important;
      padding: 0 2px 2px 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail::-webkit-scrollbar,
    body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
    body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
    body.mobile-builder-active .bottom-tray .tray-rail-row,
    body.mobile-builder-active .bottom-tray .tray-rail-children {
      display: contents !important;
      width: auto !important;
      min-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
    body.mobile-builder-active .bottom-tray .tray-rail-label {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: auto !important;
      min-height: 32px !important;
      padding: 3px 4px !important;
      border-radius: 10px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      text-align: center !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: keep-all !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      order: 0 !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(86px, auto) !important;
      gap: 4px !important;
      padding: 0 1px 7px 0 !important;
      max-height: min(384px, calc(100dvh - 344px)) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 52px minmax(0, 1fr) !important;
      gap: 5px !important;
      max-height: calc(min(510px, calc(100dvh - 206px)) - 44px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      width: 52px !important;
      max-width: 52px !important;
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      min-height: 32px !important;
      padding-inline: 3px !important;
      font-size: 9.3px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(82px, auto) !important;
      gap: 3px !important;
      max-height: min(360px, calc(100dvh - 326px)) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      min-height: 82px !important;
	    }
	  }

	  /* 2026-06-21 mobile bead diameter tap target lock:
	     keep the top diameter menu finger-safe while preserving the left
	     material rail plus three-bead row layout. */
	  @media (max-width: 540px) {
	    body.mobile-builder-active .builder .bottom-tray,
	    body.mobile-builder-active .bottom-tray {
	      padding-left: 8px !important;
	      padding-right: 8px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .bottom-tray-head,
	    body.mobile-builder-active .bottom-tray .bottom-tray-head {
	      grid-template-columns: minmax(52px, 58px) minmax(0, 1fr) !important;
	      column-gap: 4px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-tools,
	    body.mobile-builder-active .bottom-tray .tray-tools {
	      align-items: stretch !important;
	      min-height: 34px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
	    body.mobile-builder-active .bottom-tray .tray-tools span {
	      min-height: 34px !important;
	      display: inline-flex !important;
	      align-items: center !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	    body.mobile-builder-active .bottom-tray .tray-size-options {
	      min-height: 34px !important;
	      height: auto !important;
	      align-items: stretch !important;
	      gap: 4px !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	    body.mobile-builder-active .bottom-tray .tray-size-options button {
	      min-height: 34px !important;
	      height: 34px !important;
	      padding-block: 4px !important;
	      line-height: 1 !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-shell,
	    body.mobile-builder-active .bottom-tray .tray-shell {
	      margin-left: 0 !important;
	      margin-right: 0 !important;
	    }
	  }

	  /* 2026-06-21 mobile first-visit tutorial product-first density:
     while the quick guide is open, keep the bead shelf immediately tappable.
     Detailed wrist controls and editor tools return as soon as the guide closes. */
  @media (max-width: 540px) {
    /* 2026-06-21 mobile builder anchor trust entry:
       keep ad/guide hash jumps from clipping the editor under the sticky nav. */
    #builder.builder {
      scroll-margin-top: calc(env(safe-area-inset-top) + 72px) !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .canvas-length-control,
    body.mobile-builder-active.builder-tour-open .builder .canvas-note,
    body.mobile-builder-active.builder-tour-open .builder .drop-hint,
    body.mobile-builder-active.builder-tour-open .builder .canvas-fit-badge {
      display: none !important;
    }

	    body.mobile-builder-active.builder-tour-open .builder .canvas-toolbar {
	      /* 2026-06-21 mobile builder first-visit teaching focus:
	         keep editing tools out of the first tutorial step so the shopper
	         sees one clear action: tap a bead in the library. */
	      display: none !important;
	      visibility: hidden !important;
	      pointer-events: none !important;
	      margin: 0 !important;
	    }

	    body.mobile-builder-active.builder-tour-open .builder .tool-actions,
	    body.mobile-builder-active.builder-tour-open .builder #autoFill,
	    body.mobile-builder-active.builder-tour-open .builder .canvas-zoom-pad,
	    body.mobile-builder-active.builder-tour-open .builder .canvas-fullscreen-toggle {
	      /* 2026-06-24 mobile builder tutorial hidden preview controls:
	         do not leave visible-but-covered canvas controls under the first bead lesson. */
	      display: none !important;
	      visibility: hidden !important;
	      pointer-events: none !important;
	    }

    body.mobile-builder-active.builder-tour-open .builder .canvas-card {
      gap: 5px !important;
      padding-top: 6px !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .preview-layout {
      gap: 5px !important;
      grid-template-rows: minmax(150px, 28dvh) auto !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .design-canvas {
      min-height: 150px !important;
      max-height: 210px !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .mobile-builder-inline-cta {
      padding: 6px 7px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .mobile-builder-inline-cta small {
      font-size: 10.5px !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .mobile-builder-inline-cta strong {
      font-size: 18px !important;
    }
  }

  /* 2026-06-21 mobile builder critical tap targets:
     new shoppers must be able to tap Smart complete, bead diameter, and the
     left material menu without hitting 32px micro-controls. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder #autoFill,
    body.mobile-builder-active.builder-tour-open .builder #autoFill {
      height: 36px !important;
      min-height: 36px !important;
    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
	    body.mobile-builder-active .bottom-tray .tray-size-options {
	      /* 2026-06-21 mobile bead diameter readable scroll lock:
	         diameter is the top decision menu; keep each chip readable instead
	         of squeezing 8 common sizes into 29px slots on narrow phones. */
	      min-height: 36px !important;
	      overflow-x: auto !important;
	      overflow-y: hidden !important;
	      overscroll-behavior-x: contain !important;
	      scroll-snap-type: x proximity !important;
	      scrollbar-width: none !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options::-webkit-scrollbar,
	    body.mobile-builder-active .bottom-tray .tray-size-options::-webkit-scrollbar {
	      display: none !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
	    body.mobile-builder-active .bottom-tray .tray-size-options button {
		      flex: 0 0 auto !important;
		      min-width: 42px !important;
		      height: 36px !important;
		      min-height: 36px !important;
		      max-height: none !important;
		      padding-inline: 8px !important;
	      scroll-snap-align: start !important;
	      white-space: nowrap !important;
	    }

	    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
	    body.mobile-builder-active .bottom-tray .tray-rail button {
	      height: 36px !important;
	      min-height: 36px !important;
	    }
  }

  /* 2026-06-21 mobile companion passive notice:
     passive creation notices must not show fake share/cart buttons while
     pointer events are disabled. */
  @media (max-width: 540px) {
    body.mobile-builder-active .design-companion:not(.with-actions) .design-companion-actions,
    body.mobile-builder-active .design-companion:not(.with-actions) .design-companion-actions button {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }

  /* 2026-06-21 mobile bead tray final diameter-first override:
     keep the left menu plus three-card shelf, with bead diameter above the bead. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: minmax(98px, auto) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      min-height: 98px !important;
      grid-template-rows: 18px 34px minmax(24px, auto) 13px !important;
      padding: 5px 4px 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-size-badge,
    body.mobile-builder-active .bottom-tray .tray-item .tray-size-badge {
      display: inline-flex !important;
      grid-row: auto !important;
      position: absolute !important;
      left: 4px !important;
      top: 4px !important;
      min-height: 18px !important;
      max-width: calc(100% - 42px) !important;
      padding: 0 6px !important;
      border-radius: 999px !important;
      background: rgba(239, 246, 239, 0.96) !important;
      border: 1px solid rgba(35, 79, 55, 0.16) !important;
      color: var(--moss) !important;
      font-size: 9px !important;
      font-weight: 950 !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      z-index: 9 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip {
      left: auto !important;
      right: 4px !important;
      top: 4px !important;
      min-width: 31px !important;
      height: 18px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
      grid-row: 2 !important;
      width: 34px !important;
      height: 34px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong {
      grid-row: 3 !important;
      min-height: 22px !important;
      font-size: 9.4px !important;
      line-height: 1.08 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .bottom-tray .tray-item .tray-price {
      grid-row: 4 !important;
      font-size: 8.8px !important;
      font-weight: 950 !important;
    }
  }

  /* 2026-06-21 mobile empty-builder product-first entry:
     before the shopper has selected a bead, the editor should teach selection
     by keeping the bead library tappable instead of spending the first screen on
     wrist controls and a no-quote checkout block. */
  @media (max-width: 540px) {
    body.mobile-builder-active.mobile-builder-empty .builder .canvas-length-control,
    body.mobile-builder-active.mobile-builder-empty .builder .mobile-builder-inline-cta {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .bottom-tray,
    body.mobile-builder-active.mobile-builder-empty .bottom-tray {
      margin-top: 8px !important;
    }
  }

  /* 2026-06-21 mobile builder toolbar touch target lock:
     first-time shoppers must be able to switch layout, open the guide, pick a
     preset, edit beads, and zoom the preview without aiming at cramped controls. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .layout-toggle button,
    body.mobile-builder-active .builder .mode-toggle button,
    body.mobile-builder-active .builder #builderTourOpen,
    body.mobile-builder-active .builder .tool-actions .preset-picker select,
    body.mobile-builder-active .builder .tool-actions .pill-button,
    body.mobile-builder-active .builder .tool-actions button,
    body.mobile-builder-active .builder .canvas-zoom-pad button {
      height: 44px !important;
      min-height: 44px !important;
    }

    body.mobile-builder-active .builder .layout-toggle button,
    body.mobile-builder-active .builder .mode-toggle button,
    body.mobile-builder-active .builder #builderTourOpen {
      border-radius: 999px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button:not([data-canvas-fit]) {
      width: 44px !important;
      min-width: 44px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button[data-canvas-fit] {
      min-width: 48px !important;
    }

    body.mobile-builder-active .builder .tool-actions .tool-icon-button {
      height: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
    }

    body.mobile-builder-active .builder .tool-actions .preset-picker {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
    }

    body.mobile-builder-active .builder .tool-actions .preset-picker select {
      line-height: 44px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .tool-actions button#autoFill,
	    body.mobile-builder-active:not(.builder-tour-open) .builder #autoFill {
	      height: 44px !important;
	      min-height: 44px !important;
	      max-height: 44px !important;
	    }
	  }

	  /* 2026-06-22 mobile builder layout-mode pre-active tap target:
	     shoppers can reach the Builder by scrolling before body.mobile-builder-active
	     is set, so the layout mode controls must not shrink to 30/31px there. */
	  @media (max-width: 540px) {
	    .builder .layout-toggle button[data-layout-mode] {
	      height: 44px !important;
	      min-height: 44px !important;
	      touch-action: manipulation !important;
	    }
	  }

	  /* 2026-06-21 mobile builder 44px touch target final override:
     the first editor viewport teaches shoppers through zoom, bead diameter,
     and the left material menu, so these controls must be full phone targets. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .canvas-zoom-pad,
    body.mobile-builder-active .canvas-zoom-pad {
      gap: 4px !important;
      padding: 4px !important;
      max-width: calc(100vw - 28px) !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button,
    body.mobile-builder-active .canvas-zoom-pad button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button:not([data-canvas-fit]),
    body.mobile-builder-active .canvas-zoom-pad button:not([data-canvas-fit]) {
      width: 44px !important;
      min-width: 44px !important;
    }

    body.mobile-builder-active .builder .canvas-zoom-pad button[data-canvas-fit],
    body.mobile-builder-active .canvas-zoom-pad button[data-canvas-fit] {
      min-width: 64px !important;
      padding-inline: 12px !important;
    }

    body.mobile-builder-active .builder .canvas-fullscreen-toggle,
    body.mobile-builder-active .canvas-fullscreen-toggle {
      /* 2026-06-21 mobile canvas fullscreen tap target lock:
         previewing the bracelet is part of the first editing loop, so the
         fullscreen entry cannot remain a 36px chip beside 44px zoom controls. */
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      min-width: 44px !important;
      padding-inline: 12px !important;
    }

    body.canvas-fullscreen-open .fullscreen-exit-button {
      height: 44px !important;
      min-height: 44px !important;
      min-width: 108px !important;
      padding-inline: 12px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      min-height: 44px !important;
      padding: 4px !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: stretch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      min-height: 44px !important;
      gap: 5px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding-right: 24px !important;
      scroll-padding-right: 24px !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 48px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 10px !important;
      scroll-snap-align: start !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      min-height: 44px !important;
      height: 44px !important;
    }
  }

  /* 2026-06-21 mobile inline add-cart CTA touch target lock:
     after Smart complete, the primary cart action must remain a full phone
     target even when the quote bar is compact for the bead shelf. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button,
    body.mobile-builder-active.builder-tour-open .builder .mobile-builder-inline-cta .pill-button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding-inline: 8px !important;
      line-height: 1.1 !important;
    }
  }

  /* 2026-06-21 mobile builder first-viewport commercial shelf:
     when a shopper lands from a style preset, the first phone screen must still
     show the diameter row, the left material rail, and tappable bead cards.
     Keep the preview useful, but compress secondary sizing/quote chrome enough
     for the shelf to begin inside the 390px review viewport. */
  @media (max-width: 540px) {
    body.mobile-builder-active:not(.builder-tour-open) .builder .preview-layout {
      grid-template-rows: minmax(198px, 24dvh) auto !important;
      gap: 5px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .design-canvas {
      min-height: 198px !important;
      max-height: 206px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-length-control {
      max-height: 78px !important;
      padding: 8px !important;
      gap: 4px !important;
      grid-template-rows: 24px 14px 30px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta {
      padding: 6px 8px !important;
      gap: 4px !important;
      grid-template-rows: 18px 44px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta small {
      font-size: 10px !important;
      line-height: 1.05 !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta strong {
      font-size: 24px !important;
      line-height: 1 !important;
    }
  }

  @media (max-width: 374px) {
    body.mobile-builder-active:not(.builder-tour-open) .builder .preview-layout {
      /* 2026-06-21 mobile builder 360px first-viewport shelf:
         keep wrist sizing visible, but tighten the preview enough that the first
         row of beads is actually tappable on 360px review phones. */
      grid-template-rows: minmax(172px, 22dvh) auto !important;
      gap: 4px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .design-canvas {
      min-height: 172px !important;
      max-height: 178px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-length-control {
      max-height: 62px !important;
      padding: 6px 8px !important;
      gap: 3px !important;
      grid-template-rows: 24px 30px !important;
      align-items: center !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-inner-label,
    body.mobile-builder-active:not(.builder-tour-open) .builder .wrist-comfort-tip {
      display: none !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-net-wrist {
      grid-row: 1 !important;
      min-height: 24px !important;
      align-items: center !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-length-row {
      grid-row: 2 !important;
      grid-template-columns: 28px minmax(0, 1fr) 58px 28px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .canvas-net-wrist input {
      height: 30px !important;
      max-height: 30px !important;
      width: 68px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta {
      padding: 4px 8px !important;
      gap: 3px !important;
      grid-template-rows: 14px 44px !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta small {
      font-size: 9.5px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active:not(.builder-tour-open) .builder .mobile-builder-inline-cta strong {
      font-size: 22px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      min-height: 48px !important;
      padding: 2px 3px !important;
    }
  }

  /* 2026-06-21 mobile builder whole-chip diameter scroll:
     keep the top diameter menu on full chip boundaries so shoppers do not see
     a clipped 10mm/12mm control while the left rail and three-bead row remain. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 260px) !important;
      max-width: 260px !important;
      flex: 0 0 auto !important;
    }
  }

  @media (min-width: 410px) and (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 317px) !important;
      max-width: 317px !important;
    }
  }

  @media (min-width: 480px) and (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 454px) !important;
      max-width: 454px !important;
    }
  }

  /* 2026-06-21 mobile builder share settings touch target lock:
     after the shopper finishes a design, the save/share card controls are part
     of the purchase-confidence path and must not remain 26-30px desktop inputs. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .designer-sign-panel {
      max-height: none !important;
      overflow: visible !important;
      padding: 10px !important;
      gap: 8px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-field {
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
      gap: 8px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-field input,
    body.mobile-builder-active .builder .designer-sign-panel .share-style-field,
    body.mobile-builder-active .builder .designer-sign-panel .share-style-field select,
    body.mobile-builder-active .builder .designer-sign-panel .share-time-toggle,
    body.mobile-builder-active .builder .designer-sign-panel .mobile-share-quick button,
    body.mobile-builder-active .builder .designer-sign-panel .share-buttons button {
      min-height: 44px !important;
      height: 44px !important;
      max-height: 44px !important;
      align-items: center !important;
      touch-action: manipulation;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-style-field,
    body.mobile-builder-active .builder .designer-sign-panel .share-time-toggle {
      padding: 0 12px !important;
      font-size: 12px !important;
      line-height: 1.1 !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-style-field select {
      min-width: 112px !important;
      padding: 0 8px !important;
      font-size: 12px !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .share-time-toggle input[type="checkbox"] {
      width: 24px !important;
      height: 24px !important;
      min-width: 24px !important;
      min-height: 24px !important;
      margin: 0 !important;
      accent-color: var(--moss) !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel .signature-preview {
      min-height: 44px !important;
      height: auto !important;
      max-height: none !important;
      align-content: center !important;
    }
  }

  /* 2026-06-22 mobile builder material detail action tap target:
     bead detail sheets are purchase-path decisions, so Add to design and Close
     cannot stay at the 36px desktop popover height on phones. */
  @media (max-width: 860px) {
    .material-popover.mobile-detail .popover-actions button,
    .material-popover.pinned .popover-actions button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      touch-action: manipulation;
    }
  }

  /* 2026-06-23 mobile bead detail reference layout:
     the material proof sheet is a buying decision surface; keep reference
     imagery and explanatory copy readable instead of squeezing copy into the
     desktop 58px side column. */
  @media (max-width: 860px) {
    .material-popover.mobile-detail.detail-expanded .popover-head {
      align-items: flex-start !important;
      gap: 10px !important;
      margin-bottom: 10px !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-head h3 {
      font-size: 17px !important;
      line-height: 1.18 !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-grid {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-grid div {
      padding: 10px 12px !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-reference {
      grid-template-columns: 72px minmax(0, 1fr) !important;
      gap: 12px !important;
      align-items: center !important;
      margin: 10px 0 12px !important;
      padding: 10px !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-reference-cutout {
      width: 64px !important;
      height: 64px !important;
      justify-self: center !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-reference p,
    .material-popover.mobile-detail.detail-expanded .popover-reference figcaption {
      grid-column: auto !important;
      margin: 0 !important;
      min-width: 0 !important;
      color: var(--muted) !important;
      font-size: 12px !important;
      line-height: 1.48 !important;
      overflow-wrap: anywhere !important;
    }
  }

  @media (max-width: 380px) {
    .material-popover.mobile-detail.detail-expanded .popover-reference {
      grid-template-columns: 1fr !important;
      text-align: left !important;
    }

    .material-popover.mobile-detail.detail-expanded .popover-reference-cutout {
      justify-self: start !important;
    }
  }

  /* 2026-06-22 mobile builder bead detail-chip tap target:
     keep the visual label compact, but make the material-proof entry itself a
     real 44px touch target before the shopper opens the detail sheet. */
  @media (max-width: 860px) {
    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .detail-chip {
      position: absolute !important;
      z-index: var(--z-side-panel) !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 !important;
      border-color: transparent !important;
      border-radius: 0 !important;
      background: rgba(255,255,255,0.01) !important;
      box-shadow: none !important;
      overflow: visible !important;
      isolation: isolate !important;
      pointer-events: auto !important;
      display: inline-flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      line-height: 18px !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .left-panel .detail-chip::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 31px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid rgba(35,79,55,0.16);
      background: rgba(255,255,255,0.9);
      box-shadow: 0 8px 16px rgba(31,40,28,0.08);
      z-index: -1;
    }
  }

  /* 2026-06-22 mobile bead library diameter grid:
     keep the diameter menu above the left category rail and three-bead grid,
     but never leave focusable size chips outside the phone viewport. */
  @media (max-width: 540px) {
    body.mobile-builder-active:not(.builder-tour-open) .builder .bottom-tray,
    body.mobile-builder-active:not(.builder-tour-open) .bottom-tray {
      /* 2026-06-22 mobile builder commercial shelf lift:
         keep 44px diameter chips while still exposing the first bead row. */
      margin-top: -28px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: start !important;
      min-width: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      min-height: 44px !important;
      gap: 3px !important;
      overflow: visible !important;
      padding: 0 !important;
      scroll-padding-right: 0 !important;
      flex: 1 1 auto !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      /* 2026-06-22 mobile builder diameter grid 44px tap target lock:
         the final diameter-grid override must not undo the phone hitbox. */
      width: 100% !important;
      min-width: 0 !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 3px !important;
      font-size: 10.5px !important;
      line-height: 1 !important;
      scroll-snap-align: none !important;
    }
  }

  /* 2026-06-23 mobile Builder app toolbar layout:
     phone editing should behave like a compact app surface. Keep the primary
     design controls in one toolbar, collapse low-frequency edit actions into a
     horizontal tool strip, and leave the first screen for preview plus beads. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .canvas-card {
      padding: 8px !important;
      gap: 6px !important;
      border-radius: 16px !important;
    }

    body.mobile-builder-active .builder .canvas-toolbar {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 92px !important;
      gap: 6px !important;
      align-items: center !important;
      margin: 0 0 6px !important;
      padding: 0 !important;
      min-width: 0 !important;
    }

    body.mobile-builder-active .builder .mode-toggle {
      display: none !important;
    }

    body.mobile-builder-active .builder .layout-toggle {
      grid-column: 1 !important;
      margin: 0 !important;
      min-width: 0 !important;
      height: 44px !important;
    }

    body.mobile-builder-active .builder .layout-toggle button {
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 8px !important;
      font-size: 12px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder #builderTourOpen {
      grid-column: 2 !important;
      width: 100% !important;
      min-width: 0 !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 6px !important;
      border-radius: 14px !important;
      font-size: 12px !important;
      line-height: 1.1 !important;
      white-space: normal !important;
    }

    body.mobile-builder-active .builder .tool-actions {
      grid-column: 1 / -1 !important;
      display: flex !important;
      gap: 6px !important;
      min-width: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 1px 2px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-x: contain !important;
      scroll-snap-type: x proximity !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .tool-actions::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .tool-actions .preset-picker {
      flex: 0 0 152px !important;
      width: 152px !important;
      min-width: 152px !important;
      max-width: 152px !important;
      height: 44px !important;
      min-height: 44px !important;
    }

    body.mobile-builder-active .builder .tool-actions .preset-picker select {
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 26px 0 12px !important;
      font-size: 12px !important;
      line-height: 44px !important;
    }

    body.mobile-builder-active .builder .tool-actions .tool-icon-button {
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      padding: 0 !important;
      border-radius: 14px !important;
    }

    body.mobile-builder-active .builder .tool-actions .tool-icon-button span {
      display: none !important;
    }

    body.mobile-builder-active .builder .tool-actions .tool-icon-button svg {
      width: 21px !important;
      height: 21px !important;
      margin: 0 !important;
    }

    body.mobile-builder-active .builder .tool-actions #autoFill {
      flex: 0 0 104px !important;
      width: 104px !important;
      min-width: 104px !important;
      max-width: 104px !important;
      border-radius: 14px !important;
      padding: 0 10px !important;
      font-size: 12px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 112px !important;
      overflow: visible !important;
      padding-bottom: 0 !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions .tool-icon-button {
      display: none !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions .preset-picker,
    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions #autoFill {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      flex-basis: auto !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions .preset-picker {
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .tool-actions #autoFill {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }

    body.mobile-builder-active .builder .preview-layout {
      gap: 6px !important;
      grid-template-rows: minmax(188px, 24dvh) auto !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 188px !important;
      max-height: 252px !important;
    }
  }

  /* 2026-06-24 mobile Builder app bead tray:
     The phone bead library should read like an app sheet: diameter is a single
     top segmented rail, material stays on the left, and beads stay three across. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      gap: 5px !important;
      padding: 7px !important;
      max-height: min(60dvh, calc(100dvh - 138px)) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 8px !important;
      min-height: 48px !important;
      height: 48px !important;
      padding: 2px 4px !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      min-width: 0 !important;
      height: 44px !important;
      color: #315743 !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      grid-template-columns: none !important;
      grid-auto-flow: column !important;
      grid-auto-columns: max-content !important;
      align-items: center !important;
      gap: 6px !important;
      width: min(100%, 250px) !important;
      min-width: 0 !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 24px 0 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-x: contain !important;
      scroll-padding-inline: 0 24px !important;
      scroll-snap-type: x proximity !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options::-webkit-scrollbar,
    body.mobile-builder-active .bottom-tray .tray-size-options::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 58px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 10px !important;
      border-radius: 999px !important;
      font-size: 10.8px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      scroll-snap-align: start !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      display: grid !important;
      grid-template-columns: 58px minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 1fr) !important;
      gap: 6px !important;
      min-height: 0 !important;
      max-height: calc(min(60dvh, calc(100dvh - 138px)) - 58px) !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: 44px !important;
      align-content: start !important;
      gap: 5px !important;
      width: 58px !important;
      max-height: 100% !important;
      min-height: 0 !important;
      padding: 0 2px 0 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior-y: contain !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail::-webkit-scrollbar,
    body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
    body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
    body.mobile-builder-active .bottom-tray .tray-rail-row,
    body.mobile-builder-active .bottom-tray .tray-rail-children {
      display: contents !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
    body.mobile-builder-active .bottom-tray .tray-rail-label {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 5px !important;
      border-radius: 14px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: minmax(100px, auto) !important;
      gap: 5px !important;
      width: 100% !important;
      max-height: 100% !important;
      padding: 0 2px 5px 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior-y: contain !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      min-height: 100px !important;
      grid-template-rows: 18px 38px minmax(27px, auto) 14px !important;
      gap: 2px !important;
      padding: 5px 3px 7px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
      width: 38px !important;
      height: 38px !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 186px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      width: 52px !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
      padding-inline: 3px !important;
      font-size: 9.5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  /* 2026-06-25 mobile Builder diameter 44px whole-chip hitbox lock:
     visible diameter chips must land on fixed app cells, so no half-visible
     bead-size button looks tappable while its center is outside the scroller.
     The first phone view should expose common 8mm/10mm sizes before horizontal scroll. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      box-sizing: border-box !important;
      gap: 0 !important;
      width: min(100%, 264px) !important;
      max-width: 264px !important;
      padding: 0 !important;
      scroll-padding-inline: 0 !important;
      scroll-snap-type: x mandatory !important;
      clip-path: inset(0 round 999px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      box-sizing: border-box !important;
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      padding: 0 2px !important;
      font-size: 9.6px !important;
      overflow: hidden !important;
      text-overflow: clip !important;
    }
  }

  @media (min-width: 430px) and (max-width: 479px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 308px) !important;
      max-width: 308px !important;
    }
  }

  @media (min-width: 480px) and (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 352px) !important;
      max-width: 352px !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 220px !important;
      max-width: 220px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex-basis: 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      padding-inline: 2px !important;
      font-size: 9.4px !important;
    }
  }

  /* 2026-06-24 mobile Builder compact app header:
     once the shopper is editing, the sticky brand/navigation bar should behave
     like a compact app bar and leave vertical space for the preview and bead tray. */
  @media (max-width: 540px) {
    body.mobile-builder-active .topbar {
      min-height: 56px !important;
      padding: 6px 10px !important;
      gap: 8px !important;
      border-bottom: 1px solid rgba(18, 38, 27, 0.10) !important;
      box-shadow: 0 10px 24px rgba(12, 23, 16, 0.08) !important;
    }

    body.mobile-builder-active .brand {
      flex: 1 1 142px !important;
      max-width: 142px !important;
      min-height: 44px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .brand-mark {
      width: 32px !important;
      height: 32px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(78px, 23vw, 92px) !important;
      max-width: 92px !important;
    }

    body.mobile-builder-active .brand-wordmark-text {
      font-size: 20px !important;
    }

    body.mobile-builder-active .top-actions {
      gap: 5px !important;
      padding: 0 !important;
    }

    body.mobile-builder-active .language-select {
      width: 82px !important;
      min-width: 82px !important;
      height: 44px !important;
      padding: 0 22px 0 8px !important;
      font-size: 10.5px !important;
      background-position: right 8px center !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 44px !important;
      width: auto !important;
      max-width: 82px !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 10px !important;
      font-size: 11px !important;
      line-height: 1 !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .topbar {
      padding-inline: 8px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .brand {
      flex-basis: 122px !important;
      max-width: 122px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .brand-mark {
      width: 30px !important;
      height: 30px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(76px, 25vw, 86px) !important;
      max-width: 86px !important;
    }

    body.mobile-builder-active .language-select {
      width: 76px !important;
      min-width: 76px !important;
      padding-left: 7px !important;
      padding-right: 20px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      max-width: 70px !important;
      padding-inline: 8px !important;
      font-size: 10.5px !important;
    }
  }

  /* 2026-06-24 mobile Builder bead grid no-overlap lock:
     App-style three-column bead cards must not visually overlap or steal taps from the next row. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-auto-rows: 117px !important;
      align-items: stretch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      box-sizing: border-box !important;
      height: 117px !important;
      min-height: 117px !important;
      max-height: 117px !important;
      overflow: hidden !important;
    }
  }

  /* 2026-06-24 mobile Builder empty-state app density lock:
     Before the shopper has chosen a bead, the phone editor should prioritize
     preview plus bead picking. Low-frequency arrangement, preset, and complete
     controls return after the first bead instead of pushing the shelf down. */
  @media (max-width: 540px) {
    body.mobile-builder-active.mobile-builder-empty .builder .canvas-card {
      padding: 6px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder .canvas-toolbar {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      min-height: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder .mode-toggle,
    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder .layout-toggle,
    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder .tool-actions,
    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder #view3dToggle,
    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder #realScaleToggle {
      display: none !important;
    }

    body.mobile-builder-active.mobile-builder-empty:not(.builder-tour-open) .builder #builderTourOpen {
      display: inline-flex !important;
      grid-column: 1 !important;
      justify-self: end !important;
      width: 108px !important;
      min-width: 108px !important;
      height: 44px !important;
      min-height: 44px !important;
    }

    body.mobile-builder-active.mobile-builder-empty.builder-tour-open .builder .canvas-toolbar {
      display: none !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .preview-layout {
      grid-template-rows: minmax(154px, 21dvh) auto !important;
      gap: 4px !important;
      min-height: 0 !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .design-canvas {
      height: clamp(154px, 21dvh, 178px) !important;
      min-height: 154px !important;
      max-height: 178px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .bottom-tray,
    body.mobile-builder-active.mobile-builder-empty .bottom-tray {
      margin-top: -24px !important;
    }
  }

  /* 2026-06-24 mobile Builder App visual polish:
     make the phone editor feel like a compact product app, not a squeezed web
     grid. Keep the left menu, diameter rail, and three-bead rows, but give the
     bead cells more scan room and quieter chrome. */
  @media (max-width: 540px) {
    #builder.builder {
      padding-left: 2px !important;
      padding-right: 2px !important;
    }

    body.mobile-builder-active .builder .canvas-card {
      padding: 3px !important;
      border-radius: 13px !important;
      border-color: rgba(35, 79, 55, 0.14) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,244,0.96)) !important;
      box-shadow: 0 12px 28px rgba(20, 35, 25, 0.09) !important;
    }

    body.mobile-builder-active .builder .preview-layout,
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      width: 100% !important;
      max-width: 100% !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      padding: 4px !important;
      border-radius: 14px !important;
      border-color: rgba(35, 79, 55, 0.13) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,247,242,0.98)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 26px rgba(20, 35, 25, 0.08) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      gap: 6px !important;
      padding: 1px 2px !important;
      height: 46px !important;
      min-height: 46px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      width: 48px !important;
      min-width: 48px !important;
      height: 44px !important;
      justify-content: center !important;
      border-radius: 13px !important;
      background: rgba(244, 248, 244, 0.92) !important;
      color: #285139 !important;
      font-size: 9.8px !important;
      box-shadow: inset 0 0 0 1px rgba(35,79,55,0.10) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      align-self: center !important;
      border-radius: 999px !important;
      background: rgba(244, 246, 240, 0.92) !important;
      box-shadow: inset 0 0 0 1px rgba(35,79,55,0.08) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      border: 0 !important;
      background: transparent !important;
      color: rgba(38, 58, 45, 0.64) !important;
      box-shadow: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button.active,
    body.mobile-builder-active .bottom-tray .tray-size-options button.active {
      color: #fff !important;
      background: #2f6f46 !important;
      box-shadow: 0 7px 14px rgba(36, 86, 55, 0.22) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 48px minmax(0, 1fr) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      width: 48px !important;
      max-width: 48px !important;
      padding-right: 0 !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 48px !important;
      min-width: 48px !important;
      max-width: 48px !important;
      border-radius: 13px !important;
      border-color: rgba(35, 79, 55, 0.12) !important;
      background: rgba(255,255,255,0.86) !important;
      color: rgba(40, 56, 45, 0.62) !important;
      box-shadow: 0 5px 12px rgba(20, 35, 25, 0.05) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button.active,
    body.mobile-builder-active .bottom-tray .tray-rail button.active {
      border-color: rgba(47, 111, 70, 0.82) !important;
      background: #2f6f46 !important;
      color: #fff !important;
      box-shadow: 0 9px 18px rgba(36, 86, 55, 0.23) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      gap: 5px !important;
      padding: 0 1px 5px 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      border-radius: 11px !important;
      border-color: rgba(35, 79, 55, 0.10) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(250,250,247,0.98)) !important;
      box-shadow: 0 7px 16px rgba(18, 32, 23, 0.055) !important;
      padding: 5px 3px 6px !important;
      grid-template-rows: 18px 40px minmax(27px, auto) 14px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item:hover,
    body.mobile-builder-active .bottom-tray .tray-item:hover {
      transform: none !important;
      border-color: rgba(35, 79, 55, 0.18) !important;
      box-shadow: 0 8px 18px rgba(18, 32, 23, 0.075) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item:active,
    body.mobile-builder-active .bottom-tray .tray-item:active {
      transform: scale(0.985) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-size-badge,
    body.mobile-builder-active .bottom-tray .tray-item .tray-size-badge {
      left: 4px !important;
      top: 4px !important;
      max-width: calc(100% - 26px) !important;
      border-color: transparent !important;
      background: rgba(233, 243, 235, 0.98) !important;
      color: #2f6f46 !important;
      font-size: 8.6px !important;
      letter-spacing: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip {
      font-size: 0 !important;
      color: transparent !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip::before {
      content: "i" !important;
      right: 2px !important;
      top: 2px !important;
      width: 18px !important;
      height: 18px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 999px !important;
      border-color: rgba(47, 111, 70, 0.18) !important;
      background: rgba(255,255,255,0.96) !important;
      color: #2f6f46 !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      box-shadow: 0 5px 10px rgba(20, 35, 25, 0.08) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead {
      align-self: center !important;
      margin-top: 1px !important;
      box-shadow:
        inset -9px -10px 15px rgba(0,0,0,0.22),
        inset 6px 7px 13px rgba(255,255,255,0.34),
        0 9px 13px rgba(31, 40, 28, 0.12) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong {
      color: #20261f !important;
      font-size: 9.2px !important;
      line-height: 1.12 !important;
      font-weight: 850 !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .bottom-tray .tray-item .tray-price {
      color: #2f6f46 !important;
      font-size: 9px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item.builder-tour-target,
    body.mobile-builder-active .bottom-tray .tray-item.builder-tour-target {
      outline: 2px solid rgba(47, 111, 70, 0.42) !important;
      outline-offset: 2px !important;
      border-color: rgba(47, 111, 70, 0.22) !important;
      box-shadow: 0 0 0 4px rgba(47, 111, 70, 0.08), 0 8px 18px rgba(18, 32, 23, 0.08) !important;
    }
  }

  /* 2026-06-24 mobile Builder jewelry app finish lock:
     the phone bead shelf must look like a polished shopping app surface, not a
     compressed web table. This final layer keeps the required left material
     rail, top diameter rail and three-bead rows while refining visual weight. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      padding: 5px !important;
      border-radius: 16px !important;
      border-color: rgba(64, 91, 70, 0.14) !important;
      background:
        linear-gradient(180deg, rgba(255,255,253,0.98), rgba(248,247,242,0.98)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 14px 28px rgba(22, 34, 25, 0.075) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      height: 46px !important;
      min-height: 46px !important;
      grid-template-columns: 52px minmax(0, 1fr) !important;
      gap: 5px !important;
      padding: 3px !important;
      border-radius: 15px !important;
      background: rgba(242, 246, 239, 0.92) !important;
      border: 1px solid rgba(42, 80, 52, 0.09) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.76) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      width: 52px !important;
      min-width: 52px !important;
      height: 40px !important;
      min-height: 40px !important;
      justify-content: center !important;
      border-radius: 13px !important;
      background: rgba(255,255,252,0.92) !important;
      color: #244b35 !important;
      font-size: 10px !important;
      font-weight: 850 !important;
      letter-spacing: 0 !important;
      box-shadow: inset 0 0 0 1px rgba(42, 80, 52, 0.08) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      align-self: center !important;
      display: flex !important;
      gap: 0 !important;
      min-height: 40px !important;
      max-height: 40px !important;
      width: 100% !important;
      padding: 3px !important;
      border-radius: 999px !important;
      background: rgba(255,255,253,0.88) !important;
      border: 1px solid rgba(42, 80, 52, 0.08) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82) !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 3px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: rgba(44, 56, 47, 0.62) !important;
      font-size: 10px !important;
      font-weight: 850 !important;
      box-shadow: none !important;
      letter-spacing: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button.active,
    body.mobile-builder-active .bottom-tray .tray-size-options button.active {
      color: #fff !important;
      background: linear-gradient(180deg, #31734a, #245c3d) !important;
      box-shadow: 0 7px 13px rgba(36, 86, 55, 0.20) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 52px minmax(0, 1fr) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      width: 52px !important;
      max-width: 52px !important;
      gap: 5px !important;
      padding: 0 !important;
      scrollbar-width: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 44px !important;
      padding: 3px 4px !important;
      border-radius: 14px !important;
      border-color: rgba(42, 80, 52, 0.10) !important;
      background: rgba(255,255,252,0.92) !important;
      color: rgba(42, 53, 45, 0.62) !important;
      font-size: 10px !important;
      line-height: 1.08 !important;
      font-weight: 850 !important;
      letter-spacing: 0 !important;
      box-shadow: 0 5px 10px rgba(22, 34, 25, 0.045) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button.active,
    body.mobile-builder-active .bottom-tray .tray-rail button.active {
      border-color: rgba(36, 92, 61, 0.70) !important;
      background: linear-gradient(180deg, #32734d, #235b3b) !important;
      color: #fff !important;
      box-shadow: 0 9px 16px rgba(36, 86, 55, 0.20) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      gap: 5px !important;
      padding: 0 0 6px !important;
      grid-auto-rows: minmax(108px, auto) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      min-height: 108px !important;
      border-radius: 13px !important;
      border-color: rgba(53, 80, 60, 0.12) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(252,251,247,0.98)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 7px 16px rgba(24, 35, 27, 0.055) !important;
      transform: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      grid-template-rows: 18px 42px minmax(28px, auto) 14px !important;
      padding: 6px 3px 7px !important;
    }

    body.mobile-builder-active .left-panel .product-card {
      grid-template-rows: 18px 42px minmax(28px, auto) 14px !important;
      padding: 6px 3px 7px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item:hover,
    body.mobile-builder-active .bottom-tray .tray-item:hover,
    body.mobile-builder-active .left-panel .product-card:hover {
      border-color: rgba(36, 92, 61, 0.22) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 9px 18px rgba(24, 35, 27, 0.075) !important;
      transform: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item:active,
    body.mobile-builder-active .bottom-tray .tray-item:active,
    body.mobile-builder-active .left-panel .product-card:active {
      transform: scale(0.985) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-art {
      width: 42px !important;
      height: 42px !important;
      margin-top: 1px !important;
      filter: saturate(1.03) contrast(1.02) !important;
      box-shadow:
        inset -10px -11px 16px rgba(0,0,0,0.20),
        inset 6px 7px 13px rgba(255,255,255,0.36),
        0 8px 12px rgba(31, 40, 28, 0.11) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card h3 {
      color: #242c25 !important;
      font-size: 9.6px !important;
      line-height: 1.12 !important;
      font-weight: 780 !important;
      letter-spacing: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .left-panel .product-card-price {
      color: #286441 !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0.01em !important;
      background: transparent !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-size-badge,
    body.mobile-builder-active .bottom-tray .tray-item .tray-size-badge,
    body.mobile-builder-active .left-panel .product-size-badge {
      left: 4px !important;
      right: auto !important;
      top: 4px !important;
      min-height: 18px !important;
      padding: 0 6px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: rgba(232, 242, 234, 0.98) !important;
      color: #286441 !important;
      font-size: 8.8px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .product-detail-chip {
      right: 0 !important;
      top: 0 !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: transparent !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .left-panel .product-detail-chip::before {
      content: "i" !important;
      position: absolute !important;
      right: 4px !important;
      top: 4px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 24px !important;
      height: 24px !important;
      border: 1px solid rgba(40, 100, 65, 0.14) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.96) !important;
      color: #286441 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      box-shadow: 0 5px 10px rgba(22, 34, 25, 0.07) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item.is-synced,
    body.mobile-builder-active .bottom-tray .tray-item.is-synced,
    body.mobile-builder-active .left-panel .product-card.is-synced {
      border-color: rgba(36, 92, 61, 0.46) !important;
      box-shadow:
        inset 0 0 0 1px rgba(36, 92, 61, 0.26),
        0 0 0 3px rgba(36, 92, 61, 0.08),
        0 9px 18px rgba(24, 35, 27, 0.08) !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
      top: max(164px, calc(env(safe-area-inset-top) + 158px)) !important;
      left: 14px !important;
      right: 14px !important;
      min-height: 68px !important;
      padding: 9px 10px !important;
      border-radius: 16px !important;
      border-color: rgba(196, 156, 82, 0.38) !important;
      background: rgba(255, 254, 250, 0.985) !important;
      box-shadow:
        0 14px 34px rgba(22, 34, 25, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.94) !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
      display: inline-flex !important;
      align-items: center !important;
      width: fit-content !important;
      min-height: 19px !important;
      padding: 0 7px !important;
      border-radius: 999px !important;
      background: rgba(246, 238, 220, 0.98) !important;
      color: #8a6420 !important;
      font-size: 9px !important;
      letter-spacing: 0 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
      color: #143b2a !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      line-height: 1.16 !important;
      letter-spacing: 0 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
      gap: 6px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
      height: 44px !important;
      min-height: 44px !important;
      border-radius: 15px !important;
      font-size: 11px !important;
      font-weight: 850 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-secondary {
      background: rgba(255,255,255,0.90) !important;
      color: #45554b !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-primary {
      background: linear-gradient(180deg, #2f7049, #20593a) !important;
      border-color: transparent !important;
      color: #fff !important;
      box-shadow: 0 8px 14px rgba(32, 89, 58, 0.20) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item.builder-tour-target,
    body.mobile-builder-active .bottom-tray .tray-item.builder-tour-target {
      outline: 0 !important;
      border-color: rgba(196, 156, 82, 0.62) !important;
      box-shadow:
        inset 0 0 0 1px rgba(196, 156, 82, 0.34),
        0 0 0 4px rgba(196, 156, 82, 0.11),
        0 10px 18px rgba(24, 35, 27, 0.08) !important;
    }
  }

  /* 2026-06-24 mobile Builder app polish v13 final cascade:
     This final layer is intentionally last so the first-visit editor reads as
     one compact app surface: focused tutorial, hidden empty-state social setup,
     quieter bead cards, and the required left menu plus three bead columns. */
  @media (max-width: 540px) {
    body.mobile-builder-active .topbar {
      min-height: 52px !important;
      padding: 5px 9px !important;
      background: rgba(255, 253, 248, 0.96) !important;
      box-shadow: 0 8px 18px rgba(18, 32, 23, 0.07) !important;
    }

    body.mobile-builder-active .brand {
      flex-basis: 128px !important;
      max-width: 128px !important;
      min-height: 42px !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .brand-mark {
      width: 30px !important;
      height: 30px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(74px, 22vw, 86px) !important;
      max-width: 86px !important;
    }

    body.mobile-builder-active .brand-wordmark-text {
      font-size: 18px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .language-select,
    body.mobile-builder-active .top-actions #topCart {
      height: 44px !important;
      min-height: 44px !important;
    }

    body.mobile-builder-active .language-select {
      width: 74px !important;
      min-width: 74px !important;
      padding-left: 8px !important;
      padding-right: 20px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      max-width: 74px !important;
      padding-inline: 9px !important;
      font-size: 10.5px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .designer-sign-panel {
      display: none !important;
    }

    body.mobile-builder-active .builder .preview-layout {
      order: 2 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      order: 3 !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel {
      order: 4 !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      order: 5 !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel {
      display: block !important;
      margin: 0 !important;
      padding: 4px 6px !important;
      max-height: none !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .signature-field,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-card-options,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-buttons,
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .share-reward-tip {
      display: none !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 5px !important;
      margin: 0 !important;
    }

    /* 2026-06-24 mobile Builder share quick action tap target v17:
       share/save/realshot must remain real thumb actions after Smart Complete,
       not miniature chips that look visible but miss the 44px phone baseline. */
    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      border-radius: 14px !important;
      font-size: 10.8px !important;
      line-height: 1.05 !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) .builder .designer-sign-panel .mobile-share-quick .ai-preview-action {
      grid-column: auto !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .preview-layout {
      grid-template-rows: minmax(164px, 22dvh) auto !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .design-canvas {
      height: clamp(164px, 22dvh, 184px) !important;
      min-height: 164px !important;
      max-height: 184px !important;
    }

    body.mobile-builder-active.mobile-builder-empty .builder .bottom-tray,
    body.mobile-builder-active.mobile-builder-empty .bottom-tray {
      margin-top: -20px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 8px !important;
      row-gap: 4px !important;
      min-height: 78px !important;
      padding: 8px 10px !important;
      border-radius: 18px !important;
      border-color: rgba(198, 164, 94, 0.32) !important;
      background: rgba(255, 254, 250, 0.975) !important;
      box-shadow: 0 12px 24px rgba(24, 35, 27, 0.13), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
      grid-column: 1 !important;
      grid-row: 1 !important;
      min-height: 18px !important;
      padding-inline: 8px !important;
      font-size: 9px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
      font-size: 14px !important;
      line-height: 1.14 !important;
      font-weight: 920 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: grid !important;
      grid-template-columns: 76px 86px !important;
      gap: 6px !important;
      align-items: center !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 8px !important;
      border-radius: 16px !important;
      font-size: 11px !important;
      white-space: nowrap !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 50px minmax(0, 1fr) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail,
    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-rows: 124px !important;
      gap: 5px !important;
      padding-bottom: 7px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 124px !important;
      min-height: 124px !important;
      max-height: 124px !important;
      border-radius: 15px !important;
      border-color: rgba(45, 74, 52, 0.10) !important;
      background:
        radial-gradient(circle at 50% 34%, rgba(243, 247, 241, 0.96) 0 30px, rgba(255,255,255,0) 31px),
        linear-gradient(180deg, rgba(255,255,255,0.995), rgba(251,251,247,0.985)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 6px 13px rgba(18, 32, 23, 0.05) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item {
      grid-template-rows: 18px 44px 28px 14px !important;
      padding: 5px 3px 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-art {
      --bead-scale: 1 !important;
      width: 44px !important;
      height: 44px !important;
      max-width: 44px !important;
      max-height: 44px !important;
      transform: none !important;
      filter: saturate(1.06) contrast(1.03) !important;
      box-shadow:
        inset -9px -10px 14px rgba(0,0,0,0.18),
        inset 6px 7px 12px rgba(255,255,255,0.38),
        0 8px 12px rgba(31, 40, 28, 0.10) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item strong,
    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card h3 {
      color: #273029 !important;
      font-size: 9.4px !important;
      line-height: 1.15 !important;
      font-weight: 760 !important;
      -webkit-line-clamp: 2 !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .bottom-tray .tray-item .tray-price,
    body.mobile-builder-active .left-panel .product-card-price {
      color: #2b6742 !important;
      font-size: 8.8px !important;
      font-weight: 860 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .bottom-tray .tray-item .detail-chip::before,
    body.mobile-builder-active .left-panel .product-detail-chip::before {
      width: 22px !important;
      height: 22px !important;
      right: 3px !important;
      top: 3px !important;
      border-color: rgba(47, 111, 70, 0.14) !important;
      background: rgba(255,255,255,0.86) !important;
      box-shadow: 0 4px 8px rgba(20, 35, 25, 0.055) !important;
    }
  }

  @media (max-width: 380px) {
    body.mobile-builder-active .brand {
      flex-basis: 110px !important;
      max-width: 110px !important;
    }

    body.mobile-builder-active .brand-wordmark {
      width: clamp(68px, 23vw, 80px) !important;
    }

    body.mobile-builder-active .language-select {
      width: 68px !important;
      min-width: 68px !important;
      padding-left: 7px !important;
      padding-right: 18px !important;
    }

    body.mobile-builder-active .top-actions #topCart {
      max-width: 68px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
      column-gap: 6px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong {
      font-size: 13px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
      grid-template-columns: 66px 78px !important;
      gap: 5px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button {
      padding-inline: 6px !important;
      font-size: 10.5px !important;
    }
  }

  /* 2026-06-25 mobile Builder diameter 44px final hitbox lock:
     restore the top diameter menu to real App-size touch cells after compact
     tray cascades tried to shrink the chip width below the phone tap target. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      align-items: stretch !important;
      padding: 2px 3px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      align-items: center !important;
      padding: 0 10px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      gap: 0 !important;
      width: min(100%, 264px) !important;
      max-width: 264px !important;
      height: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
      padding: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x mandatory !important;
      clip-path: inset(0 round 999px) !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      margin: 0 !important;
      padding: 0 2px !important;
      font-size: 10.2px !important;
      line-height: 1 !important;
      scroll-snap-align: start !important;
      touch-action: manipulation !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: min(100%, 220px) !important;
      max-width: 220px !important;
    }
  }

  /* 2026-06-25 mobile Builder brand/menu 44px recovery target:
     the compact app header still needs a full-size recovery tap area because
     the brand doubles as the page menu and home return trigger. */
  @media (max-width: 540px) {
    body.mobile-builder-active .brand {
      min-height: 44px !important;
      height: 44px !important;
      max-height: 44px !important;
      align-items: center !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active.quick-directory-open:not(.canvas-fullscreen-open):not(.cart-open) .quick-directory {
      display: grid !important;
    }
  }

  /* 2026-06-25 mobile Builder diameter rail 44px no-cut affordance:
     keep the label compact so phone shoppers see whole diameter chips instead of a clipped half-button. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 264px) !important;
      column-gap: 0 !important;
      justify-content: start !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      width: 72px !important;
      min-width: 72px !important;
      max-width: 72px !important;
      padding: 0 3px !important;
      justify-content: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 264px !important;
      max-width: 264px !important;
      min-width: 0 !important;
      margin-right: 0 !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 220px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      width: 72px !important;
      min-width: 72px !important;
      max-width: 72px !important;
      padding: 0 3px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 220px !important;
      max-width: 220px !important;
    }
  }

  /* 2026-06-25 mobile Builder tutorial preview clearance:
     after the first bead is added, the guide should confirm the live bracelet
     without covering the canvas status chips, quote bar, or add-to-cart action. */
  @media (max-width: 540px) {
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card {
      top: clamp(166px, 21dvh, 184px) !important;
      bottom: auto !important;
      left: 12px !important;
      right: 12px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      column-gap: 8px !important;
      row-gap: 3px !important;
      width: auto !important;
      min-height: 62px !important;
      max-height: 72px !important;
      padding: 7px 9px !important;
      overflow: hidden !important;
      border-radius: 16px !important;
      border-color: rgba(198, 164, 94, 0.30) !important;
      background: rgba(255, 254, 250, 0.955) !important;
      box-shadow:
        0 10px 20px rgba(24, 35, 27, 0.11),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
      backdrop-filter: blur(10px) !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-progress,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-progress {
      grid-column: 1 !important;
      grid-row: 1 !important;
      min-height: 18px !important;
      padding-inline: 7px !important;
      font-size: 9px !important;
      letter-spacing: 0 !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card strong,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-width: 0 !important;
      color: #143b2a !important;
      font-size: 13px !important;
      line-height: 1.14 !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card p,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card p {
      display: none !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: grid !important;
      grid-template-columns: 70px 82px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 7px !important;
      border-radius: 15px !important;
      font-size: 10.8px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      touch-action: manipulation !important;
    }
  }

  @media (max-width: 380px) {
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card {
      left: 10px !important;
      right: 10px !important;
      column-gap: 6px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions {
      grid-template-columns: 64px 74px !important;
      gap: 4px !important;
    }

    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions button {
      padding-inline: 6px !important;
      font-size: 10.3px !important;
    }
  }

  /* 2026-06-25 mobile Builder preview-visible coach rail:
     the first-visit guide should teach tapping beads without covering the
     bracelet center. Keep the guide as an app coach rail above the bracelet
     middle, preserve 44px actions, and let the live bead remain visible after
     the first tap. */
  @media (max-width: 540px) {
    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card {
      top: max(138px, calc(env(safe-area-inset-top) + 132px)) !important;
      bottom: auto !important;
      left: 12px !important;
      right: 12px !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-rows: 18px 26px !important;
      align-items: center !important;
      column-gap: 8px !important;
      row-gap: 2px !important;
      width: auto !important;
      min-height: 60px !important;
      max-height: 64px !important;
      padding: 7px 9px !important;
      overflow: hidden !important;
      border-radius: 16px !important;
      border-color: rgba(198, 164, 94, 0.30) !important;
      background: rgba(255, 254, 250, 0.958) !important;
      box-shadow:
        0 10px 20px rgba(24, 35, 27, 0.105),
        inset 0 1px 0 rgba(255,255,255,0.92) !important;
      backdrop-filter: blur(10px) !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-progress,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-progress {
      grid-column: 1 !important;
      grid-row: 1 !important;
      min-height: 18px !important;
      padding-inline: 7px !important;
      font-size: 9px !important;
      line-height: 18px !important;
      letter-spacing: 0 !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card strong,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card strong {
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-width: 0 !important;
      color: #143b2a !important;
      font-size: 13px !important;
      line-height: 1.12 !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card p,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card p,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card p {
      display: none !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: grid !important;
      grid-template-columns: 72px 86px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions button {
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      padding: 0 7px !important;
      border-radius: 15px !important;
      font-size: 10.8px !important;
      line-height: 1.05 !important;
      white-space: nowrap !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .design-canvas {
      min-height: 184px !important;
      max-height: 218px !important;
    }

    body.mobile-builder-active.mobile-builder-empty.builder-tour-open .builder .bottom-tray,
    body.mobile-builder-active.mobile-builder-empty.builder-tour-open .bottom-tray {
      margin-top: 2px !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .canvas-status .design-timer {
      display: none !important;
    }

    body.mobile-builder-active.builder-tour-open .builder .canvas-status {
      max-height: 28px !important;
      overflow: visible !important;
    }
  }

  @media (max-width: 380px) {
    .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-card,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-card {
      top: max(136px, calc(env(safe-area-inset-top) + 130px)) !important;
      left: 10px !important;
      right: 10px !important;
      column-gap: 6px !important;
      padding-inline: 8px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions {
      grid-template-columns: 64px 76px !important;
      gap: 4px !important;
    }

    .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions button,
    .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions button {
      padding-inline: 6px !important;
      font-size: 10.3px !important;
    }
  }

  /* 2026-06-25 mobile Builder diameter rail responsive app width:
     430px+ phones should use the extra tray width instead of leaving a blank
     right gutter, while 360/390px phones keep whole 44px diameter chips. */
  @media (min-width: 430px) and (max-width: 479px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 308px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 308px !important;
      max-width: 308px !important;
    }
  }

  @media (min-width: 480px) and (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 352px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 352px !important;
      max-width: 352px !important;
    }
  }

  /* 2026-07-03 rollback rescue true EOF override. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(224px, 30dvh) auto !important;
      gap: 8px !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 224px !important;
      height: clamp(224px, 30dvh, 260px) !important;
      max-height: 260px !important;
    }

    body.mobile-builder-active .builder-tour-card {
      box-sizing: border-box !important;
      left: 12px !important;
      right: 12px !important;
      top: 58px !important;
      bottom: auto !important;
      width: auto !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 7px !important;
      align-items: center !important;
      padding: 6px 8px !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder-tour-card p {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-card h3 {
      margin: 0 !important;
      min-width: 0 !important;
      font-size: 13px !important;
      line-height: 1.12 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder-tour-eyebrow {
      margin: 0 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-template-columns: repeat(2, minmax(58px, auto)) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      min-width: 58px !important;
      min-height: 38px !important;
      padding: 0 6px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      grid-template-rows: 92px minmax(0, auto) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 54px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 92px !important;
      min-height: 92px !important;
      max-height: 92px !important;
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "Size";
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    :root[lang^="zh"] body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    :root[lang^="zh"] body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "直径";
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      gap: 4px !important;
      overflow: hidden !important;
      clip-path: none !important;
      scroll-snap-type: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-auto-rows: 136px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 136px !important;
      min-height: 136px !important;
      max-height: 136px !important;
      padding-inline: 5px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 54px !important;
      height: 54px !important;
      margin-top: 8px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .product-card .detail-chip,
    body.mobile-builder-active .left-panel .product-detail-chip {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      right: 5px !important;
      top: 6px !important;
      background: rgba(255, 255, 255, 0.86) !important;
      box-shadow: 0 2px 8px rgba(28, 54, 39, 0.10) !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card strong {
      min-height: 24px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
    }
  }

/* 2026-07-03 EOF mobile editor tray no-collapse lock:
   final override so the bead library cannot collapse to a 44px slice. */
@media (max-width: 540px) {
  body.mobile-builder-active .builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
    grid-template-rows: 92px 140px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail,
  body.mobile-builder-active .builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}

  /* 2026-07-03 operating repair final EOF guard:
     keep the compact quote/add-to-cart bar and bead shelf as separate app
     workbench rows after all older rollback rescue rules. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .mobile-builder-inline-cta,
    body.mobile-builder-active .mobile-builder-inline-cta {
      order: 3 !important;
      min-height: 56px !important;
      height: 56px !important;
      max-height: 56px !important;
      padding: 6px 8px !important;
      gap: 7px !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta strong,
    body.mobile-builder-active #mobileBuilderInlineCtaPrice {
      font-size: 18px !important;
      line-height: 1.05 !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      order: 4 !important;
      position: relative !important;
      margin-top: 28px !important;
      grid-template-rows: 48px minmax(0, auto) !important;
      gap: 6px !important;
      max-height: min(34dvh, 286px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 44px minmax(0, 1fr) !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      gap: 4px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      grid-auto-flow: column !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .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: 5px !important;
      font-size: 10px !important;
    }
  }

  /* 2026-07-03 operating repair: phone Builder app-workbench order and density.
     Keep the purchase path as preview -> quote/cart -> bead shelf -> share tools,
     and stop the diameter menu from pushing the first product shelf below view. */
  @media (max-width: 540px) {
    body.mobile-builder-active #builder.builder,
    body.mobile-builder-active .builder {
      grid-auto-rows: auto !important;
    }

    body.mobile-builder-active .builder .preview-layout {
      order: 2 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta {
      order: 3 !important;
      min-height: 56px !important;
      height: 56px !important;
      max-height: 56px !important;
      padding: 6px 8px !important;
      gap: 7px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta small {
      font-size: 9px !important;
      line-height: 1.08 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta strong,
    body.mobile-builder-active #mobileBuilderInlineCtaPrice {
      font-size: 18px !important;
      line-height: 1.05 !important;
    }

    body.mobile-builder-active .builder .mobile-builder-inline-cta .pill-button {
      min-height: 44px !important;
      height: 44px !important;
      padding-inline: 10px !important;
      font-size: 11px !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      order: 4 !important;
      grid-template-rows: 48px minmax(0, auto) !important;
      gap: 6px !important;
      max-height: min(34dvh, 286px) !important;
    }

    body.mobile-builder-active .builder .designer-sign-panel,
    body.mobile-builder-active .designer-sign-panel {
      order: 5 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 44px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      gap: 5px !important;
      align-items: center !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      gap: 4px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x proximity !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      grid-auto-flow: column !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .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: 5px !important;
      font-size: 10px !important;
      scroll-snap-align: start !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      max-height: calc(min(34dvh, 286px) - 62px) !important;
    }
  }

  /* 2026-07-03 rollback rescue final override:
     this must stay at EOF so the restored editor cannot be re-compressed by
     older shelf locks above. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(224px, 30dvh) auto !important;
      gap: 8px !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 224px !important;
      height: clamp(224px, 30dvh, 260px) !important;
      max-height: 260px !important;
    }

    body.mobile-builder-active .builder-tour-card {
      box-sizing: border-box !important;
      left: 12px !important;
      right: 12px !important;
      top: 58px !important;
      bottom: auto !important;
      width: auto !important;
      max-width: none !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 7px !important;
      align-items: center !important;
      padding: 6px 8px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
    }

    body.mobile-builder-active .builder-tour-card p {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-card h3 {
      margin: 0 !important;
      min-width: 0 !important;
      font-size: 13px !important;
      line-height: 1.12 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder-tour-eyebrow {
      margin: 0 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-template-columns: repeat(2, minmax(58px, auto)) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      min-width: 58px !important;
      min-height: 38px !important;
      padding: 0 6px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      grid-template-rows: 92px minmax(0, auto) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 54px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 92px !important;
      min-height: 92px !important;
      max-height: 92px !important;
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "Size";
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    :root[lang^="zh"] body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    :root[lang^="zh"] body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "直径";
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      gap: 4px !important;
      overflow: hidden !important;
      clip-path: none !important;
      scroll-snap-type: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 52px minmax(0, 1fr) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-auto-rows: 136px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 136px !important;
      min-height: 136px !important;
      max-height: 136px !important;
      padding-inline: 5px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 54px !important;
      height: 54px !important;
      margin-top: 8px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .product-card .detail-chip,
    body.mobile-builder-active .left-panel .product-detail-chip {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      right: 5px !important;
      top: 6px !important;
      background: rgba(255, 255, 255, 0.86) !important;
      box-shadow: 0 2px 8px rgba(28, 54, 39, 0.10) !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card strong {
      min-height: 24px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(214px, 28dvh) auto !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 214px !important;
      height: clamp(214px, 28dvh, 238px) !important;
      max-height: 238px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 50px !important;
      height: 50px !important;
    }
  }

  /* 2026-07-03 rollback rescue lock:
     keep the restored 6/24-6/26 editor shape, but stop the phone UI from
     looking like a cramped tool demo on 320-430px screens. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(224px, 30dvh) auto !important;
      gap: 8px !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 224px !important;
      height: clamp(224px, 30dvh, 260px) !important;
      max-height: 260px !important;
    }

    body.mobile-builder-active .builder-tour-card {
      left: 12px !important;
      right: 12px !important;
      top: 58px !important;
      bottom: auto !important;
      width: auto !important;
      max-width: none !important;
      min-height: 50px !important;
      max-height: 58px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 8px !important;
      align-items: center !important;
      padding: 7px 8px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
    }

    body.mobile-builder-active .builder-tour-card p {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-card h3 {
      margin: 0 !important;
      min-width: 0 !important;
      font-size: 13px !important;
      line-height: 1.14 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder-tour-eyebrow {
      margin: 0 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-template-columns: repeat(2, minmax(62px, auto)) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      min-width: 62px !important;
      min-height: 40px !important;
      padding: 0 8px !important;
      font-size: 10.5px !important;
      line-height: 1.05 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 54px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "Size";
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    :root[lang^="zh"] body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    :root[lang^="zh"] body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "直径";
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 100% !important;
      max-width: 100% !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 52px minmax(0, 1fr) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-auto-rows: 136px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 136px !important;
      min-height: 136px !important;
      max-height: 136px !important;
      padding-inline: 5px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 54px !important;
      height: 54px !important;
      margin-top: 9px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .product-card .detail-chip,
    body.mobile-builder-active .left-panel .product-detail-chip {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      right: 5px !important;
      top: 6px !important;
      background: rgba(255, 255, 255, 0.86) !important;
      box-shadow: 0 2px 8px rgba(28, 54, 39, 0.10) !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card strong {
      min-height: 24px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(214px, 28dvh) auto !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 214px !important;
      height: clamp(214px, 28dvh, 238px) !important;
      max-height: 238px !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      min-width: 58px !important;
      padding-inline: 6px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 50px !important;
      height: 50px !important;
    }
  }

  /* 2026-06-26 mobile Builder shelf source-of-truth lock:
     the phone bead menu must resolve to one final App layout after all legacy
     hotfixes: diameter chips on top, material filters in the left rail, and
     exactly three bead cards per row. No two-column tray rules belong after this. */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      display: grid !important;
      grid-template-columns: 72px minmax(0, 264px) !important;
      align-items: stretch !important;
      justify-content: start !important;
      column-gap: 0 !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      padding: 2px 3px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools span,
    body.mobile-builder-active .bottom-tray .tray-tools span {
      width: 72px !important;
      min-width: 72px !important;
      max-width: 72px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      justify-content: center !important;
      padding: 0 3px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: 264px !important;
      max-width: 264px !important;
      height: 46px !important;
      min-height: 46px !important;
      max-height: 46px !important;
      gap: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scroll-snap-type: x mandatory !important;
      clip-path: inset(0 round 999px) !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      flex: 0 0 44px !important;
      width: 44px !important;
      min-width: 44px !important;
      max-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      max-height: 44px !important;
      margin: 0 !important;
      padding: 0 2px !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      display: grid !important;
      grid-template-columns: 52px minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 1fr) !important;
      gap: 5px !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: minmax(44px, max-content) !important;
      align-content: start !important;
      gap: 5px !important;
      width: 52px !important;
      min-width: 0 !important;
      max-width: 52px !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail::-webkit-scrollbar,
    body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-row,
    body.mobile-builder-active .builder .bottom-tray .tray-rail-children,
    body.mobile-builder-active .bottom-tray .tray-rail-row,
    body.mobile-builder-active .bottom-tray .tray-rail-children {
      display: contents !important;
      min-width: 0 !important;
      width: auto !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail-label,
    body.mobile-builder-active .bottom-tray .tray-rail-label {
      display: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 52px !important;
      min-width: 52px !important;
      max-width: 52px !important;
      min-height: 44px !important;
      padding: 3px 4px !important;
      line-height: 1.08 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      touch-action: manipulation !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
      grid-auto-rows: 124px !important;
      gap: 5px !important;
      min-width: 0 !important;
      width: 100% !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 124px !important;
      min-height: 124px !important;
      max-height: 124px !important;
      overflow: hidden !important;
    }
  }

  @media (max-width: 340px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 220px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 220px !important;
      max-width: 220px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-shell,
    body.mobile-builder-active .bottom-tray .tray-shell {
      grid-template-columns: 50px minmax(0, 1fr) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-rail,
    body.mobile-builder-active .bottom-tray .tray-rail,
    body.mobile-builder-active .builder .bottom-tray .tray-rail button,
    body.mobile-builder-active .bottom-tray .tray-rail button {
      width: 50px !important;
      min-width: 50px !important;
      max-width: 50px !important;
    }
  }

  @media (min-width: 430px) and (max-width: 479px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 308px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 308px !important;
      max-width: 308px !important;
    }
  }

  @media (min-width: 480px) and (max-width: 540px) {
    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 72px minmax(0, 352px) !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      width: 352px !important;
      max-width: 352px !important;
    }
  }

  /* 2026-07-03 rollback rescue EOF anchor */
  @media (max-width: 540px) {
    body.mobile-builder-active .builder .preview-layout {
      grid-template-rows: minmax(224px, 30dvh) auto !important;
      gap: 8px !important;
    }

    body.mobile-builder-active .builder .design-canvas {
      min-height: 224px !important;
      height: clamp(224px, 30dvh, 260px) !important;
      max-height: 260px !important;
    }

    body.mobile-builder-active .builder-tour-card {
      box-sizing: border-box !important;
      left: 12px !important;
      right: 12px !important;
      top: 58px !important;
      bottom: auto !important;
      width: auto !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 7px !important;
      align-items: center !important;
      padding: 6px 8px !important;
      overflow: hidden !important;
    }

    body.mobile-builder-active .builder-tour-card p {
      display: none !important;
    }

    body.mobile-builder-active .builder-tour-card h3 {
      margin: 0 !important;
      min-width: 0 !important;
      font-size: 13px !important;
      line-height: 1.12 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.mobile-builder-active .builder-tour-eyebrow {
      margin: 0 0 2px !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }

    body.mobile-builder-active .builder-tour-actions {
      grid-template-columns: repeat(2, minmax(58px, auto)) !important;
      gap: 5px !important;
    }

    body.mobile-builder-active .builder-tour-actions button {
      min-width: 58px !important;
      min-height: 38px !important;
      padding: 0 6px !important;
      font-size: 10px !important;
      line-height: 1.05 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
    }

    body.mobile-builder-active .builder .bottom-tray,
    body.mobile-builder-active .bottom-tray {
      grid-template-rows: 92px minmax(0, auto) !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools,
    body.mobile-builder-active .bottom-tray .tray-tools {
      grid-template-columns: 54px minmax(0, 1fr) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 92px !important;
      min-height: 92px !important;
      max-height: 92px !important;
      gap: 4px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span,
    body.mobile-builder-active .bottom-tray .tray-tools > span {
      width: 54px !important;
      min-width: 54px !important;
      max-width: 54px !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      font-size: 0 !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "Size";
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    :root[lang^="zh"] body.mobile-builder-active .builder .bottom-tray .tray-tools > span::after,
    :root[lang^="zh"] body.mobile-builder-active .bottom-tray .tray-tools > span::after {
      content: "直径";
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options,
    body.mobile-builder-active .bottom-tray .tray-size-options {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 88px !important;
      min-height: 88px !important;
      max-height: 88px !important;
      gap: 4px !important;
      overflow: hidden !important;
      clip-path: none !important;
      scroll-snap-type: none !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-size-options button,
    body.mobile-builder-active .bottom-tray .tray-size-options button {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      font-size: 10px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-scroll,
    body.mobile-builder-active .bottom-tray .tray-scroll,
    body.mobile-builder-active .left-panel .catalog {
      grid-auto-rows: 136px !important;
      gap: 6px !important;
    }

    body.mobile-builder-active .builder .bottom-tray .tray-item,
    body.mobile-builder-active .bottom-tray .tray-item,
    body.mobile-builder-active .left-panel .product-card {
      height: 136px !important;
      min-height: 136px !important;
      max-height: 136px !important;
      padding-inline: 5px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active .left-panel .product-card .mini-bead {
      width: 54px !important;
      height: 54px !important;
      margin-top: 8px !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item .detail-chip,
    body.mobile-builder-active .left-panel .product-card .detail-chip,
    body.mobile-builder-active .left-panel .product-detail-chip {
      width: 28px !important;
      height: 28px !important;
      min-width: 28px !important;
      min-height: 28px !important;
      right: 5px !important;
      top: 6px !important;
      background: rgba(255, 255, 255, 0.86) !important;
      box-shadow: 0 2px 8px rgba(28, 54, 39, 0.10) !important;
    }

    body.mobile-builder-active .bottom-tray .tray-item strong,
    body.mobile-builder-active .left-panel .product-card strong {
      min-height: 24px !important;
      font-size: 10px !important;
      line-height: 1.15 !important;
    }
  }

/* 2026-07-03 EOF mobile editor tray no-collapse lock:
   final override so the bead library cannot collapse to a 44px slice. */
@media (max-width: 540px) {
  body.mobile-builder-active .builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
    grid-template-rows: 92px 140px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active .builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail,
  body.mobile-builder-active .builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
  }
}

/* 2026-07-03 EOF product-first bead shelf final recovery lock:
   this must stay at EOF because earlier rollback layers still contain 136px
   card locks. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    grid-auto-rows: 128px !important;
    gap: 5px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    padding: 5px 4px !important;
    gap: 3px !important;
    grid-template-rows: 58px 30px 18px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item strong,
  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active #builder .left-panel .product-card strong,
  body.mobile-builder-active .left-panel .product-card strong {
    min-height: 0 !important;
    max-height: 30px !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active .bottom-tray .tray-item > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active #builder .left-panel .product-card > span:not(.detail-chip):not(.badge),
  body.mobile-builder-active .left-panel .product-card > span:not(.detail-chip):not(.badge) {
    min-height: 0 !important;
    max-height: 18px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] {
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour-card button,
  body.mobile-builder-active.builder-tour-open .builder-tour [data-builder-tour-card] button,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions,
  body.mobile-builder-active.builder-tour-open .builder-tour .builder-tour-actions * {
    pointer-events: auto !important;
  }
}

/* 2026-07-03 EOF 430px diameter rail hit target lock:
   wider phone first-visit tutorial must not sit on top of the 10mm/12mm
   diameter chips. */
@media (min-width: 420px) and (max-width: 540px) {
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
    top: 366px !important;
    bottom: auto !important;
  }
}

/* 2026-07-03 EOF tutorial diameter-pass-through action lock:
   the first lesson can sit above the bead shelf, but only its primary action
   may receive pointer events so diameter chips remain tappable underneath. */
@media (max-width: 540px) {
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card {
    pointer-events: none !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    justify-self: end !important;
    grid-template-columns: 84px !important;
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-secondary {
    display: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
  }
}

/* 2026-07-03 EOF Builder editor real-shot tray background and bead grid lock:
   keep the live editor visually tied to the ready-made photo template, and
   prevent mobile bead shelves from collapsing back to a single column. */
body.builder-assets-ready #builder .design-canvas,
body.builder-assets-ready .design-canvas {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(246, 240, 228, 0.24)),
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10) 38%, transparent 69%),
    url("../generated/jewdiy-editor-silk-tray-bg-20260609.jpg"),
    linear-gradient(135deg, #fffdf8 0%, #fbf7ed 46%, #f4ead7 100%) !important;
  background-color: #f6eddc !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body:not(.builder-assets-ready) #builder .design-canvas,
body:not(.builder-assets-ready) .design-canvas {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(246, 240, 228, 0.26)),
    radial-gradient(ellipse at 42% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.28) 30%, transparent 64%),
    radial-gradient(ellipse at 70% 72%, rgba(217, 202, 170, 0.22), transparent 58%),
    linear-gradient(135deg, #fffdf8 0%, #fbf7ed 46%, #f4ead7 100%) !important;
  background-color: #f6eddc !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
  }
}

/* 2026-07-04 EOF mobile Builder bead-library horizontal category rail:
   the phone shelf must not read as a one-column library. Put material/category
   filters in a horizontal rail and reserve the full sheet width for three
   product cards per row. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    height: min(38dvh, 320px) !important;
    min-height: min(38dvh, 320px) !important;
    max-height: min(38dvh, 320px) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px minmax(140px, 1fr) !important;
    gap: 6px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: calc(min(38dvh, 320px) - 62px) !important;
    min-height: 190px !important;
    max-height: calc(min(38dvh, 320px) - 62px) !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 6px !important;
    padding: 0 2px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail::-webkit-scrollbar,
  body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
    display: none !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail-row,
  body.mobile-builder-active #builder .bottom-tray .tray-rail-children,
  body.mobile-builder-active .bottom-tray .tray-rail-row,
  body.mobile-builder-active .bottom-tray .tray-rail-children {
    display: contents !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail-label,
  body.mobile-builder-active .bottom-tray .tray-rail-label {
    display: none !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail button,
  body.mobile-builder-active .bottom-tray .tray-rail button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: 128px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    max-height: calc(min(38dvh, 320px) - 112px) !important;
    padding: 0 0 6px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item {
    min-height: 140px !important;
    grid-template-rows: 18px 50px minmax(34px, auto) 16px !important;
    padding: 5px 4px 7px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .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;
  }
}

/* 2026-07-04 EOF mobile Builder bead-library no-occlusion lock:
   first-visit coaching belongs on the editor canvas, not on top of the
   product shelf. Keep the bead library in three clear columns and leave the
   first row of bead photos visually uncovered. */
@media (max-width: 540px) {
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] {
    display: grid !important;
    top: max(132px, calc(env(safe-area-inset-top) + 124px)) !important;
    bottom: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    grid-template-columns: minmax(0, 1fr) 84px !important;
    grid-template-rows: 18px 26px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    grid-template-columns: 84px !important;
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-secondary {
    display: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    min-height: 44px !important;
    pointer-events: auto !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
  }
}

/* 2026-07-05 EOF mobile Builder commercial viewport balance final lock:
   this must stay after the 2026-07-04 rail/no-occlusion locks. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    height: min(34dvh, 288px) !important;
    min-height: min(34dvh, 288px) !important;
    max-height: min(34dvh, 288px) !important;
    grid-template-rows: 48px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    grid-template-rows: 44px minmax(128px, 1fr) !important;
    height: calc(min(34dvh, 288px) - 62px) !important;
    min-height: 178px !important;
    max-height: calc(min(34dvh, 288px) - 62px) !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll {
    max-height: max(134px, calc(min(34dvh, 288px) - 112px)) !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item {
    min-height: 128px !important;
    height: 128px !important;
    max-height: 128px !important;
    grid-template-rows: 16px 50px minmax(28px, auto) 15px !important;
    padding: 4px 4px 6px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] {
    top: max(116px, calc(env(safe-area-inset-top) + 108px)) !important;
    left: 12px !important;
    right: auto !important;
    width: min(260px, calc(100vw - 24px)) !important;
    max-width: min(260px, calc(100vw - 24px)) !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    grid-template-rows: 14px 24px !important;
    column-gap: 6px !important;
    padding: 5px 7px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    grid-template-columns: 78px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 38px !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
  }

  body.mobile-builder-active.builder-tour-open .builder .canvas-status,
  body.mobile-builder-active.builder-tour-open #builder .canvas-status {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.cart-open #builder .mobile-builder-inline-cta,
  body.cart-open #mobileBuilderInlineCta,
  body.cart-open #mobileBuilderInlineAddCart {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 2026-07-06 homepage cover no-regression:
   desktop first view must show the brand cover and a clear next-section hint,
   so the standalone site reads as a finished brand journey instead of a
   sealed one-screen demo. */
@media (min-width: 861px) {
  body:not(.mobile-builder-active) .hero {
    min-height: min(76svh, 760px) !important;
    padding-top: clamp(64px, 6vw, 84px) !important;
    padding-bottom: clamp(40px, 4vw, 52px) !important;
  }

  body:not(.mobile-builder-active) .hero h1 {
    font-size: clamp(40px, 4.7vw, 64px) !important;
  }

  body:not(.mobile-builder-active) .hero-stats {
    margin-top: clamp(22px, 3vw, 34px) !important;
  }

  body:not(.mobile-builder-active) #how-it-works {
    margin-top: 16px !important;
  }
}

/* 2026-07-06 mobile brand restore v9:
   final phone cascade lock for the recovery package. The phone Builder must
   open as a compact commerce workbench: real-shot editor, horizontal material
   rail, three bead columns, and first-visit coaching that never covers beads. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    --jewdiy-mobile-tray-height: min(39dvh, 320px);
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: var(--jewdiy-mobile-tray-height) !important;
    max-height: var(--jewdiy-mobile-tray-height) !important;
    grid-template-rows: 46px minmax(0, 1fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 42px minmax(0, 1fr) !important;
    height: calc(var(--jewdiy-mobile-tray-height) - 60px) !important;
    min-height: 0 !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 60px) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    gap: 6px !important;
    padding: 0 2px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail::-webkit-scrollbar,
  body.mobile-builder-active .bottom-tray .tray-rail::-webkit-scrollbar {
    display: none !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail-row,
  body.mobile-builder-active #builder .bottom-tray .tray-rail-children,
  body.mobile-builder-active .bottom-tray .tray-rail-row,
  body.mobile-builder-active .bottom-tray .tray-rail-children {
    display: contents !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail-label,
  body.mobile-builder-active .bottom-tray .tray-rail-label {
    display: none !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail button,
  body.mobile-builder-active .bottom-tray .tray-rail button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 68px !important;
    max-width: 120px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: 136px !important;
    gap: 3px !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 112px) !important;
    padding: 1px 1px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    grid-template-rows: 16px 52px 36px 16px !important;
    gap: 2px !important;
    padding: 4px 3px 5px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 auto !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item strong,
  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active #builder .left-panel .product-card h3,
  body.mobile-builder-active .left-panel .product-card h3 {
    min-height: 0 !important;
    max-height: 34px !important;
    font-size: 10.1px !important;
    line-height: 1.14 !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .tray-price,
  body.mobile-builder-active .bottom-tray .tray-item .tray-price,
  body.mobile-builder-active #builder .left-panel .product-card-price,
  body.mobile-builder-active .left-panel .product-card-price {
    max-height: 16px !important;
    font-size: 9.2px !important;
    line-height: 1.04 !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] {
    top: max(104px, calc(env(safe-area-inset-top) + 96px)) !important;
    left: 10px !important;
    right: auto !important;
    width: min(252px, calc(100vw - 20px)) !important;
    max-width: min(252px, calc(100vw - 20px)) !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    grid-template-rows: 13px 23px !important;
    column-gap: 6px !important;
    padding: 5px 7px !important;
    border-radius: 14px !important;
    pointer-events: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
    min-height: 13px !important;
    padding: 0 6px !important;
    font-size: 8.5px !important;
    line-height: 13px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] strong {
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    grid-template-columns: 72px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 36px !important;
    padding-inline: 5px !important;
    font-size: 9px !important;
    line-height: 1.04 !important;
    pointer-events: auto !important;
  }
}

/* 2026-07-06 mobile brand restore v15:
   keep the restored real-shot editor rhythm from v9, but cap the three-column
   bead shelf, remove the empty-state dead gap, and preserve smart-complete
   tap safety plus two readable bead rows after the first bead. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .preview-layout,
  body.mobile-builder-active .builder .preview-layout {
    grid-template-rows: minmax(224px, 30dvh) auto !important;
    gap: 8px !important;
  }

  body.mobile-builder-active #builder .design-canvas,
  body.mobile-builder-active .builder .design-canvas,
  body.mobile-builder-active .design-canvas {
    min-height: 224px !important;
    height: clamp(224px, 30dvh, 260px) !important;
    max-height: 260px !important;
  }

  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    --jewdiy-mobile-tray-height: min(36dvh, 304px);
    margin-top: -36px !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: var(--jewdiy-mobile-tray-height) !important;
    max-height: var(--jewdiy-mobile-tray-height) !important;
  }

  body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray,
  body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray {
    margin-top: 28px !important;
  }

  body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-scroll,
  body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .catalog,
  body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .catalog {
    grid-auto-rows: 124px !important;
  }

  body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-item,
  body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-item,
  body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card,
  body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card {
    height: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    grid-template-rows: 14px 44px 34px 14px !important;
  }

  body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card .mini-bead,
  body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card .product-art,
  body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card .product-art {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  @media (max-width: 380px) {
    body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-scroll,
    body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-scroll,
    body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .catalog,
    body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .catalog {
      grid-auto-rows: 116px !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-item,
    body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-item,
    body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card,
    body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card {
      height: 116px !important;
      min-height: 116px !important;
      max-height: 116px !important;
      grid-template-rows: 13px 40px 32px 13px !important;
    }

    body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray .tray-item .mini-bead,
    body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card .mini-bead,
    body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card .mini-bead,
    body.mobile-builder-active:not(.mobile-builder-empty) #builder .left-panel .product-card .product-art,
    body.mobile-builder-active:not(.mobile-builder-empty) .left-panel .product-card .product-art {
      width: 40px !important;
      min-width: 40px !important;
      max-width: 40px !important;
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
    }
  }

  body.mobile-builder-active #builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    height: calc(var(--jewdiy-mobile-tray-height) - 58px) !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 58px) !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    max-height: calc(var(--jewdiy-mobile-tray-height) - 108px) !important;
  }
}

/* 2026-07-06 mobile brand restore v16:
   restore the phone editor as a real editing surface, not a one-row demo.
   Keep the real-shot tray background, keep the horizontal rail, and make two
   complete bead rows visible before the quote panel starts. */
@media (max-width: 540px) {
  body.mobile-builder-active #builder .preview-layout,
  body.mobile-builder-active .builder .preview-layout {
    grid-template-rows: minmax(212px, 28dvh) auto !important;
    gap: 6px !important;
  }

  body.mobile-builder-active #builder .design-canvas,
  body.mobile-builder-active .builder .design-canvas,
  body.mobile-builder-active .design-canvas {
    min-height: 212px !important;
    height: clamp(212px, 28dvh, 238px) !important;
    max-height: 238px !important;
  }

  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    --jewdiy-mobile-tray-height: min(47dvh, 398px);
    margin-top: -28px !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: var(--jewdiy-mobile-tray-height) !important;
    max-height: var(--jewdiy-mobile-tray-height) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
  }

  body.mobile-builder-active:not(.mobile-builder-empty) #builder .bottom-tray,
  body.mobile-builder-active:not(.mobile-builder-empty) .bottom-tray {
    margin-top: 14px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-shell,
  body.mobile-builder-active .bottom-tray .tray-shell {
    grid-template-rows: 40px minmax(0, 1fr) !important;
    height: calc(var(--jewdiy-mobile-tray-height) - 54px) !important;
    min-height: 0 !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 54px) !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail,
  body.mobile-builder-active .bottom-tray .tray-rail {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-rail button,
  body.mobile-builder-active .bottom-tray .tray-rail button {
    min-width: 68px !important;
    max-width: 118px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding-inline: 10px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 118px !important;
    gap: 4px !important;
    height: calc(var(--jewdiy-mobile-tray-height) - 102px) !important;
    min-height: 236px !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 102px) !important;
    padding-bottom: 10px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    grid-template-rows: 14px 44px minmax(30px, auto) 14px !important;
    gap: 1px !important;
    padding: 4px 3px 5px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item strong,
  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active #builder .left-panel .product-card h3,
  body.mobile-builder-active .left-panel .product-card h3 {
    max-height: 30px !important;
    font-size: 9.7px !important;
    line-height: 1.1 !important;
  }
}

/* 2026-07-06 mobile brand restore v17 polish:
   keep the v16 real editor structure, then reduce first-visit visual noise on
   narrow phones so the canvas background and bead library feel intentional. */
@media (max-width: 540px) {
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] {
    top: max(96px, calc(env(safe-area-inset-top) + 88px)) !important;
    left: 12px !important;
    right: auto !important;
    width: min(236px, calc(100vw - 24px)) !important;
    max-width: min(236px, calc(100vw - 24px)) !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    grid-template-columns: minmax(0, 1fr) 62px !important;
    grid-template-rows: 11px 19px !important;
    column-gap: 6px !important;
    padding: 5px 6px !important;
    border-radius: 13px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-progress {
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card strong,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] strong {
    font-size: 11.6px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card p,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] p,
  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-secondary {
    display: none !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    grid-template-columns: 62px !important;
  }

  body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    min-height: 30px !important;
    height: 30px !important;
    max-height: 30px !important;
    padding-inline: 4px !important;
    font-size: 8.7px !important;
    line-height: 1.02 !important;
  }
}

@media (min-width: 861px) and (max-width: 1440px) {
  .topbar {
    padding-inline: clamp(20px, 2vw, 28px) !important;
    gap: clamp(12px, 1.2vw, 16px) !important;
  }

  .topbar .brand {
    flex: 0 0 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
  }

  .topbar .nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: clamp(10px, 1vw, 14px) !important;
  }

  .topbar .nav a {
    font-size: 10px !important;
  }

  .topbar .top-actions {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 380px) {
  body.mobile-builder-active .brand {
    flex-basis: 116px !important;
    max-width: 116px !important;
  }

  body.mobile-builder-active .brand-wordmark {
    width: clamp(72px, 22vw, 82px) !important;
    max-width: 82px !important;
  }

  body.mobile-builder-active .language-select {
    width: 78px !important;
    min-width: 78px !important;
  }

  body.mobile-builder-active .top-actions #topCart {
    max-width: 58px !important;
    padding-inline: 7px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    grid-auto-rows: 112px !important;
    min-height: 224px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    grid-template-rows: 12px 38px minmax(34px, auto) 13px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item strong,
  body.mobile-builder-active .bottom-tray .tray-item strong,
  body.mobile-builder-active #builder .left-panel .product-card h3,
  body.mobile-builder-active .left-panel .product-card h3 {
    max-height: 34px !important;
    font-size: 8.9px !important;
    line-height: 1.05 !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* 2026-07-09 mobile Editor single-library brand drawer:
   The phone Editor uses the bottom drawer as the one customer-facing bead
   library. The full catalog DOM stays for desktop and data sync, but it is
   hidden on phones so the screen no longer repeats the same beads twice. */
@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder {
    padding-bottom: calc(clamp(272px, 44dvh, 318px) + 20px) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .left-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .center-stage,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .canvas-card {
    transform: none !important;
    will-change: auto !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray {
    --jewdiy-mobile-tray-height: clamp(272px, 44dvh, 318px);
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: var(--z-editor-canvas) !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: 272px !important;
    max-height: 318px !important;
    grid-template-rows: 38px 44px minmax(0, 1fr) !important;
    border-radius: 18px !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-shadow: 0 22px 44px rgba(31, 47, 36, 0.18) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-shell {
    height: calc(var(--jewdiy-mobile-tray-height) - 102px) !important;
    min-height: 180px !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 102px) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-scroll {
    height: calc(var(--jewdiy-mobile-tray-height) - 158px) !important;
    min-height: 132px !important;
    max-height: calc(var(--jewdiy-mobile-tray-height) - 158px) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: var(--z-editor-canvas) !important;
    min-height: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(255, 253, 247, 0.94) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
    margin-top: 6px !important;
    box-shadow: 0 12px 26px rgba(31, 47, 36, 0.10) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta > div:first-child {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta .eyebrow,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta small {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta strong,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder #mobileBuilderInlineCtaPrice {
    font-size: 17px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-actions {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-actions .pill-button:first-child {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta .pill-button,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder #mobileBuilderInlineAddCart {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-item {
    position: relative !important;
    grid-template-rows: 48px 30px 16px !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 5px 4px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead {
    grid-row: 1 !important;
    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 .bottom-tray .tray-item strong {
    grid-row: 2 !important;
    max-height: 30px !important;
    font-size: 9.8px !important;
    line-height: 1.05 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-item .tray-price {
    grid-row: 3 !important;
    min-height: 16px !important;
    height: 16px !important;
    max-height: 16px !important;
    font-size: 9.2px !important;
    line-height: 16px !important;
    align-self: end !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-item .detail-chip {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 2 !important;
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(47, 112, 72, 0.20) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #2b6742 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 16px rgba(31, 47, 36, 0.08) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-item .detail-chip::after {
    content: "i";
    font: 900 14px/1 Georgia, "Times New Roman", serif !important;
  }

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

/* 2026-07-07 standalone mobile Editor visual hierarchy lock:
   The app route must open with the real editing canvas, then a readable bead
   library. Bead photos are the primary target; detail controls are secondary. */
@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] #builder.builder {
    margin-inline: 6px !important;
    padding-top: 4px !important;
    gap: 10px !important;
  }

  html[data-jewdiy-route="editor"] #builder .center-stage {
    order: 1 !important;
    margin-top: 0 !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .right-panel {
    order: 3 !important;
  }

  html[data-jewdiy-route="editor"] #builder .canvas-card {
    padding: 6px !important;
  }

  html[data-jewdiy-route="editor"] #builder .design-canvas {
    min-height: clamp(232px, 64vw, 300px) !important;
  }

  html[data-jewdiy-route="editor"] #builder #productSearch {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 15px !important;
  }

  html[data-jewdiy-route="editor"] #builder #builderTourOpen,
  html[data-jewdiy-route="editor"] #builder #presetSelect,
  html[data-jewdiy-route="editor"] #builder .tool-actions .pill-button,
  html[data-jewdiy-route="editor"] #builder .canvas-zoom-pad button,
  html[data-jewdiy-route="editor"] #builder .canvas-length-row .length-step,
  html[data-jewdiy-route="editor"] #builder #netWristInput,
  html[data-jewdiy-route="editor"] #builder #canvasLengthInput,
  html[data-jewdiy-route="editor"] #builder #designerName,
  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-cta .pill-button {
    min-height: 40px !important;
    height: 40px !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .canvas-zoom-pad button:not([data-canvas-fit]),
  html[data-jewdiy-route="editor"] #builder .canvas-length-row .length-step {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-actions {
    align-items: stretch !important;
  }

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

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

  html[data-jewdiy-route="editor"] #builder .left-panel .taxonomy-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .taxonomy-pills .filter,
  html[data-jewdiy-route="editor"] #builder .left-panel .taxonomy-pills button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 116px !important;
    min-height: 44px !important;
    padding-inline: 16px !important;
    white-space: nowrap !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .catalog {
    grid-auto-rows: 184px !important;
    gap: 8px !important;
    max-height: none !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 34px !important;
    grid-template-rows: 58px 70px 30px !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-items: start !important;
    height: 184px !important;
    min-height: 184px !important;
    max-height: 184px !important;
    padding: 8px 7px !important;
    overflow: hidden !important;
  }

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

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

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

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

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card .product-meta {
    font-size: 9.5px !important;
    line-height: 1.12 !important;
    max-height: 22px !important;
    -webkit-line-clamp: 2 !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .left-panel .price-line {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    min-height: 30px !important;
    margin: 0 !important;
    gap: 5px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .price-line strong {
    max-width: 82px !important;
    line-height: 1.08 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .detail-chip,
  html[data-jewdiy-route="editor"] #builder .left-panel .product-detail-chip {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    right: auto !important;
    top: auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

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

@media (max-width: 340px) {
  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-cta {
    position: relative !important;
    z-index: var(--z-side-panel) !important;
    margin-top: 0 !important;
    min-height: 92px !important;
    height: 92px !important;
    max-height: 92px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-cta > div:first-child {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html[data-jewdiy-route="editor"] #builder #mobileBuilderInlineCtaLabel {
    min-width: 0 !important;
    height: auto !important;
    max-height: 16px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  html[data-jewdiy-route="editor"] #builder #mobileBuilderInlineCtaPrice {
    justify-self: end !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }

  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] #builder #mobileBuilderInlineAddCart {
    grid-column: auto !important;
  }

  html[data-jewdiy-route="editor"] #builder .mobile-builder-inline-cta .pill-button {
    padding-inline: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }
}

@media (min-width: 541px) and (max-width: 860px) {
  html[data-jewdiy-route="editor"] #builder.builder {
    margin-inline: 8px !important;
  }

  html[data-jewdiy-route="editor"] #builder .center-stage {
    order: 1 !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .right-panel {
    order: 3 !important;
  }

  html[data-jewdiy-route="editor"] #builder .canvas-card {
    padding: 6px !important;
  }
}

@media (max-width: 380px) {
  body.mobile-builder-active #builder .bottom-tray,
  body.mobile-builder-active .bottom-tray {
    --jewdiy-mobile-tray-height: min(47dvh, 360px);
  }

  body.mobile-builder-active #builder .bottom-tray .tray-scroll,
  body.mobile-builder-active .bottom-tray .tray-scroll,
  body.mobile-builder-active #builder .left-panel .catalog,
  body.mobile-builder-active .left-panel .catalog {
    grid-auto-rows: 108px !important;
    min-height: 216px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item,
  body.mobile-builder-active .bottom-tray .tray-item,
  body.mobile-builder-active #builder .left-panel .product-card,
  body.mobile-builder-active .left-panel .product-card {
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    grid-template-rows: 13px 40px minmax(28px, auto) 13px !important;
  }

  body.mobile-builder-active #builder .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active .bottom-tray .tray-item .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .mini-bead,
  body.mobile-builder-active .left-panel .product-card .mini-bead,
  body.mobile-builder-active #builder .left-panel .product-card .product-art,
  body.mobile-builder-active .left-panel .product-card .product-art {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

/* 2026-07-08 brand atelier editor reset:
   Treat the bracelet workbench as the primary branded surface and keep the
   bead library as a curated drawer, not a dense raw-material sheet. */
@media (min-width: 1181px) {
  html[data-jewdiy-route="editor"] #builder.builder {
    width: min(100% - 32px, 1500px) !important;
    grid-template-columns: minmax(620px, 1fr) minmax(360px, 430px) minmax(250px, 300px) !important;
    gap: 14px !important;
    align-items: start !important;
    padding-top: 14px !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .left-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: start !important;
    max-height: calc(100svh - 96px) !important;
    overflow: hidden !important;
    border-color: rgba(210, 196, 164, 0.72) !important;
    background:
      linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(248, 245, 238, 0.94)),
      radial-gradient(circle at 18% 0%, rgba(213, 177, 92, 0.10), transparent 38%) !important;
    box-shadow: 0 18px 48px rgba(40, 46, 35, 0.08) !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .left-panel .panel-header {
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid rgba(210, 196, 164, 0.48) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .panel-header .eyebrow {
    color: #8a6b2f !important;
    letter-spacing: 0.08em !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .panel-header h2 {
    font-size: 18px !important;
    line-height: 1.16 !important;
    margin-bottom: 5px !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .panel-header p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    max-height: 36px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .tabs {
    grid-column: 1 !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(210, 196, 164, 0.42) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .tab {
    min-height: 38px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .material-taxonomy {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    max-height: 118px !important;
    padding: 10px 12px !important;
    overflow: hidden auto !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background:
      linear-gradient(180deg, rgba(246, 241, 229, 0.74), rgba(255, 253, 248, 0.74)) !important;
  }

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

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

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

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

  html[data-jewdiy-route="editor"] #builder .left-panel .taxonomy-pills .filter {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    min-height: 36px !important;
    padding-inline: 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #405343 !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .taxonomy-pills .filter.active {
    background: #2f7048 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(35, 79, 55, 0.14) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .size-selector {
    grid-column: 1 !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(210, 196, 164, 0.42) !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .left-panel .size-options button {
    min-height: 36px !important;
    border-radius: 999px !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .search-bar {
    grid-column: 1 !important;
    padding: 0 12px 10px !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .search-bar input {
    min-height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .catalog {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 174px !important;
    gap: 10px !important;
    min-height: 280px !important;
    max-height: calc(100svh - 428px) !important;
    padding: 10px 12px 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-content: start !important;
    background: rgba(255, 255, 255, 0.48) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 76px minmax(0, 1fr) 22px !important;
    justify-items: center !important;
    align-items: start !important;
    height: 174px !important;
    min-height: 174px !important;
    max-height: 174px !important;
    padding: 10px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border-color: rgba(210, 196, 164, 0.58) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 240, 0.94)) !important;
    text-align: center !important;
    box-shadow: 0 10px 24px rgba(40, 46, 35, 0.06) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card:hover {
    border-color: rgba(47, 112, 72, 0.42) !important;
    box-shadow: 0 16px 30px rgba(35, 79, 55, 0.12) !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card .product-top {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-art,
  html[data-jewdiy-route="editor"] #builder .left-panel .product-card .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 .left-panel .product-top > div:last-child,
  html[data-jewdiy-route="editor"] #builder .left-panel .product-meta,
  html[data-jewdiy-route="editor"] #builder .left-panel .price-line span,
  html[data-jewdiy-route="editor"] #builder .left-panel .product-size-badge {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .product-info {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 4px !important;
    justify-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .left-panel .product-card-price {
    margin: 0 !important;
    color: #2f7048 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .price-line {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 22px !important;
    margin: 0 !important;
    color: #2f7048 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  html[data-jewdiy-route="editor"] #builder .left-panel .price-line strong {
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .canvas-card {
    border-color: rgba(210, 196, 164, 0.70) !important;
    background:
      linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(248, 244, 235, 0.94)),
      radial-gradient(circle at 50% 26%, rgba(223, 188, 115, 0.12), transparent 42%) !important;
    box-shadow: 0 24px 58px rgba(40, 46, 35, 0.10) !important;
  }
}

@media (max-width: 540px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder.builder {
    gap: 8px !important;
    padding-bottom: 16px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .canvas-card {
    display: grid !important;
    gap: 7px !important;
    padding: 6px !important;
    border-color: rgba(210, 196, 164, 0.70) !important;
    background:
      linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(248, 244, 235, 0.94)) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .canvas-toolbar {
    order: 1 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .preview-layout {
    order: 2 !important;
    grid-template-rows: minmax(210px, 27dvh) auto !important;
    gap: 6px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .design-canvas {
    min-height: 210px !important;
    height: clamp(210px, 27dvh, 246px) !important;
    max-height: 246px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-tools,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray .tray-shell {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray {
    --jewdiy-mobile-tray-height: min(48dvh, 374px);
    order: 3 !important;
    margin-top: 0 !important;
    height: var(--jewdiy-mobile-tray-height) !important;
    min-height: 318px !important;
    max-height: 374px !important;
    grid-template-rows: 38px 44px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-color: rgba(210, 196, 164, 0.72) !important;
    background:
      linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(246, 241, 230, 0.96)) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray-head {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 2px !important;
    gap: 6px !important;
  }

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

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray-head strong {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #25362a !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-smart-complete,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-toggle {
    min-height: 36px !important;
    height: 36px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-tools {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 44px !important;
    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 .tray-tools > span {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    font-size: 0 !important;
  }

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

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

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

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

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 44px minmax(0, 1fr) !important;
    height: auto !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 .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 .tray-rail::-webkit-scrollbar {
    display: none !important;
  }

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

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

  html[data-jewdiy-route="editor"] body.mobile-builder-active #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;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #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: 112px !important;
    gap: 6px !important;
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
    padding: 0 0 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-item {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    grid-template-rows: 13px 46px minmax(30px, auto) 14px !important;
    gap: 1px !important;
    padding: 4px 4px 5px !important;
    border-radius: 10px !important;
    border-color: rgba(210, 196, 164, 0.62) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 240, 0.94)) !important;
  }

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

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-item .detail-chip,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-item .badge {
    display: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-item strong {
    max-height: 30px !important;
    font-size: 9.8px !important;
    line-height: 1.1 !important;
    -webkit-line-clamp: 2 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-item .tray-price {
    max-height: 14px !important;
    color: #2f7048 !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta {
    order: 4 !important;
    min-height: 96px !important;
    height: 96px !important;
    max-height: 96px !important;
    margin-top: 0 !important;
    border-color: rgba(210, 196, 164, 0.70) !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .mobile-builder-inline-cta .pill-button,
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder #mobileBuilderInlineAddCart {
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.mobile-builder-empty #builder .designer-sign-panel {
    display: none !important;
    visibility: hidden !important;
  }

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

  html[data-jewdiy-route="editor"] #builder .designer-sign-panel .mobile-share-quick button {
    min-height: 44px !important;
    height: 44px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-card,
  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-card] {
    top: max(66px, calc(env(safe-area-inset-top) + 62px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
    grid-template-rows: 14px 28px !important;
    column-gap: 8px !important;
    padding: 6px 8px !important;
    pointer-events: none !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] .builder-tour-actions {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    grid-template-columns: 86px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="bead"] [data-builder-tour-next] {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    font-size: 10px !important;
    pointer-events: auto !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="preview"] .builder-tour-card,
  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="complete"] .builder-tour-card {
    top: max(66px, calc(env(safe-area-inset-top) + 62px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 14px 28px !important;
    column-gap: 6px !important;
    padding: 6px 8px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions,
  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions {
    grid-template-columns: 64px 76px !important;
    gap: 4px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="preview"] .builder-tour-actions button,
  html[data-jewdiy-route="editor"] body.mobile-builder-active.builder-tour-open .builder-tour[data-builder-tour-step="complete"] .builder-tour-actions button {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
  }
}

@media (max-width: 380px) {
  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .bottom-tray {
    min-height: 304px !important;
    max-height: 356px !important;
  }

  html[data-jewdiy-route="editor"] body.mobile-builder-active #builder .tray-scroll {
    grid-auto-rows: 116px !important;
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
  }

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

  html[data-jewdiy-route="editor"] body.mobile-builder-active #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;
  }
}