/* ==========================================
   LUCKY.COLORSTONE - Design System & Styles
   ========================================== */

/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Gen Z & Millennial 60-30-10 Color Scheme */
  --color-bg-cream: #F6F2FF;
  /* Soft Pastel Lavender Primary Background */
  --color-card-cream: #FCFBFF;
  /* Brighter Card Background */

  --color-lavender-light: #F6F6FF;
  --color-lavender: #E6E6FA;
  /* Pastel Purple Accent */
  --color-lavender-dark: #B5A9DB;
  --color-lavender-glow: rgba(230, 230, 250, 0.6);
  --color-lavender-shadow: rgba(181, 169, 219, 0.18);

  --color-velvet-red: #8B0000;
  /* Velvet Red CTAs/Price */
  --color-velvet-red-dark: #660000;
  --color-velvet-red-light: #FFEAEA;
  --color-velvet-red-glow: rgba(139, 0, 0, 0.15);

  /* Semantic Mappings to preserve existing selectors */
  --color-navy-dark: #40304D;
  --color-navy: #554466;
  --color-navy-light: #7E6C90;
  --color-navy-muted: #9E8DAE;

  --color-gold: var(--color-lavender-dark);
  --color-gold-light: var(--color-lavender-light);
  --color-gold-dark: var(--color-navy);
  --color-gold-glow: var(--color-lavender-glow);
  --color-bg-light: var(--color-bg-cream);
  --color-white: var(--color-card-cream);

  /* CTAs & States mapping */
  --color-green: var(--color-velvet-red);
  --color-green-dark: var(--color-velvet-red-dark);
  --color-green-light: var(--color-velvet-red-light);
  --color-red: var(--color-velvet-red);
  --color-red-light: var(--color-velvet-red-light);
  --color-gray-border: #E8DFF5;
  /* Soft light lavender-gray border */
  --color-gray-bg: #F4EEFF;
  /* Soft light lavender-gray bg */

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease-out;

  /* Shadow Systems */
  --shadow-sm: 0 2px 8px var(--color-lavender-shadow);
  --shadow-md: 0 8px 24px var(--color-lavender-shadow);
  --shadow-lg: 0 16px 32px var(--color-lavender-shadow);
  --shadow-gold: 0 8px 20px var(--color-lavender-shadow);

  /* Active Slot Highlight Color */
  --color-accent-velvet: var(--color-velvet-red);
  --font-ui-thai: 'Noto Sans Thai';
  --font-brand-latin: 'Playfair Display', 'Noto Sans Thai';
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sticky-footer-height: 96px;
  --sticky-footer-content-gap: 44px;
  --step-content-bottom-clearance: calc(
    var(--sticky-footer-height) + var(--mobile-safe-bottom) + var(--sticky-footer-content-gap)
  );
}

.uat-environment-banner {
  position: fixed;
  z-index: 9999;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border: 1px solid rgba(64, 48, 77, 0.25);
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.96);
  color: #40304d;
  font: 600 11px/1.2 Arial, sans-serif;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* UAT query-gated runtime diagnostic surface; no markup is created outside UAT debug mode. */
.step3-sticky-debug-overlay {
  position: fixed;
  z-index: 10001;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  width: min(90vw, 430px);
  max-height: 45vh;
  overflow: auto;
  padding: 8px;
  border: 1px solid #75f5b7;
  border-radius: 8px;
  background: rgba(5, 13, 29, 0.96);
  color: #eafff4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.step3-sticky-debug-overlay[hidden] {
  display: none;
}

.step3-sticky-debug-heading {
  display: inline-block;
  margin-bottom: 6px;
  color: #75f5b7;
  font-weight: 700;
}

.step3-sticky-debug-copy {
  float: right;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid #75f5b7;
  border-radius: 4px;
  background: #142944;
  color: #eafff4;
  font: inherit;
}

.step3-sticky-debug-output {
  clear: both;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reset & Base Rules */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui-thai);
  background-color: #0A1128;
  /* Dark outer container for desktop mockups */
  color: #1E293B;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

button,
input,
textarea,
select,
option {
  font-family: var(--font-ui-thai);
}

/* Mobile Frame Wrapper (Vibe: Mobile-first & LINE LIFF optimized) */
.app-container {
  display: none;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  min-height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #FBF9FF 0%, #F6F2FF 55%, #F2ECFF 100%);
  flex-direction: column;
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

/* ==========================================
   LANDING PAGE - NEW (LUXURY GEN Z)
   ========================================== */

.landing-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: radial-gradient(circle at top, rgba(246, 242, 255, 0.85), rgba(10, 17, 40, 0.15));
}

.landing-hero-panel {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  isolation: isolate;
  background: transparent;
}

.landing-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: none;
  z-index: 1;
}

.landing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(252, 248, 255, 0.18) 0%, rgba(252, 248, 255, 0.28) 42%, rgba(42, 27, 105, 0.22) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.26), transparent 42%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2;
}

.landing-container {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 34px 24px 28px;
  text-align: center;
  color: #2d1b69;
}

.landing-header {
  margin-bottom: 18px;
  margin-top: 8px;
  animation: slideDown 0.8s ease-out;
}

.landing-logo {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 3px;
  color: #2d1b69;
  margin: 0;
  font-family: var(--font-brand-latin);
  text-transform: uppercase;
}

.landing-tagline {
  font-size: 14px;
  letter-spacing: 2px;
  color: #8b7ba8;
  margin: 8px 0 0 0;
  font-weight: 400;
  text-transform: uppercase;
}

.landing-hero {
  width: min(100%, 620px);
  margin-top: auto;
  padding: 18px 18px 0;
  animation: fadeIn 1s ease-out 0.3s both;
}

.landing-hero-title {
  font-size: clamp(34px, 5vw, 58px);
  font-family: var(--font-brand-latin);
  color: #2d1b69;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px 0;
  letter-spacing: -0.5px;
}

.landing-hero-subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  color: #6b5b95;
  line-height: 1.6;
  margin: 0 0 28px 0;
  font-weight: 400;
}

.btn-start-customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  padding: 16px 48px;
  width: min(100%, 260px);
  background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease, opacity 0.2s ease, background 0.24s ease;
  box-shadow: 0 8px 24px rgba(196, 30, 58, 0.3);
  animation: slideUp 0.8s ease-out 0.5s both;
}

.btn-start-customize::before,
.btn-start-customize::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.btn-start-customize::before {
  inset: -30% auto -30% -55%;
  width: 42%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 20%, rgba(255, 238, 246, 0.78) 50%, rgba(255, 255, 255, 0.18) 80%, transparent 100%);
  opacity: 0;
  filter: blur(0.2px);
}

.btn-start-customize::after {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.82) 0%, rgba(255, 226, 238, 0.55) 38%, rgba(255, 226, 238, 0) 72%);
  opacity: 0;
}

.btn-start-customize:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(196, 30, 58, 0.4);
}

.btn-start-customize:active {
  transform: translateY(-2px);
}

.btn-start-customize:disabled,
.btn-start-customize.is-loading {
  cursor: wait;
  opacity: 1;
  pointer-events: none;
  animation: none;
  transform: none;
  box-shadow: 0 10px 30px rgba(196, 30, 58, 0.38), 0 0 0 4px rgba(255, 228, 238, 0.36);
}

.btn-start-customize.is-loading::before {
  opacity: 1;
  animation: landingButtonShimmer 1.45s ease-in-out infinite;
}

.btn-start-customize.is-rippling::after {
  animation: landingButtonRipple 560ms ease-out;
}

.btn-start-customize .btn-text,
.btn-start-customize .btn-sparkle {
  position: relative;
  z-index: 1;
}

.landing-load-reassurance {
  display: none;
  width: min(100%, 300px);
  margin: 10px auto 0;
  color: rgba(82, 66, 115, 0.94);
  font-family: var(--font-ui-thai), sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(4px);
  text-shadow: 0 0 8px rgba(207, 191, 245, 0.7), 0 0 16px rgba(181, 169, 219, 0.28);
  transition: opacity 300ms ease, transform 300ms ease;
}

.landing-load-reassurance.is-mounted {
  display: block;
}

.landing-load-reassurance.is-visible {
  opacity: 1;
  transform: translateY(0);
  animation: landingReassuranceGlow 2.6s ease-in-out infinite;
}

.btn-start-customize.is-loading .btn-sparkle {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  color: transparent;
  line-height: 1;
  animation: landingButtonSpinner 0.8s linear infinite;
}

.btn-start-customize.is-loading .btn-sparkle:last-child {
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  animation: none;
}

.btn-start-customize.is-pressed,
.btn-start-customize.is-pressed:disabled {
  animation: none;
  transform: scale(0.96);
  box-shadow: 0 4px 14px rgba(139, 21, 56, 0.36), 0 0 0 6px rgba(255, 226, 238, 0.48);
}

.btn-start-customize.is-line-login,
.btn-start-customize.is-line-login:disabled {
  opacity: 1;
  color: #FFFFFF;
  background: linear-gradient(135deg, #8b1538 0%, #c41e3a 100%);
  background-size: 200% 100%;
}

.btn-sparkle {
  font-size: 18px;
  animation: sparkle 2s ease-in-out infinite;
}

.landing-bracelet-container {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  width: min(88%, 780px);
  margin: 0;
  z-index: 8;
  animation: fadeIn 1s ease-out 0.7s both;
  pointer-events: none;
}

.landing-bracelet-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.16));
}

.landing-footer-text {
  margin-top: auto;
  padding-bottom: 4px;
  position: relative;
  z-index: 11;
  color: #6b5b95;
  font-size: 14px;
  line-height: 1.8;
  animation: fadeIn 1s ease-out 0.9s both;
}

.landing-footer-text p {
  margin: 8px 0;
  font-weight: 500;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineLoginShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

@keyframes lineLoginDots {
  0%, 100% {
    opacity: 0.45;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-start-customize,
  .btn-start-customize::before,
  .btn-start-customize::after,
  .btn-start-customize.is-loading .btn-sparkle,
  .btn-start-customize.is-line-login,
  .btn-start-customize.is-line-login::after,
  .landing-load-reassurance,
  .landing-load-reassurance.is-visible {
    animation: none;
  }

  .landing-load-reassurance,
  .landing-load-reassurance.is-visible {
    transition: none;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes landingButtonRipple {
  0% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0);
  }
  72% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

@keyframes landingButtonShimmer {
  0% {
    transform: translateX(0) skewX(-18deg);
  }
  48%, 100% {
    transform: translateX(390%) skewX(-18deg);
  }
}

@keyframes landingButtonSpinner {
  to {
    transform: rotate(360deg);
  }
}

@keyframes landingReassuranceGlow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(207, 191, 245, 0.58), 0 0 16px rgba(181, 169, 219, 0.2);
  }
  50% {
    text-shadow: 0 0 10px rgba(215, 198, 249, 0.8), 0 0 20px rgba(181, 169, 219, 0.34);
  }
}

@media (max-width: 768px) {
  .landing-page { padding: 0; }
  .landing-hero-panel {
    width: 100%;
    height: 100vh;
    min-height: 720px;
    border-radius: 0;
  }
  .landing-container { padding: 28px 18px 22px; }
  .landing-header { margin-bottom: 14px; }
  .landing-logo { font-size: 28px; }
  .landing-hero { width: min(100%, 540px); padding: 12px 10px 0; }
  .landing-hero-title { font-size: 36px; }
  .landing-hero-subtitle { font-size: 15px; }
  .btn-start-customize { padding: 14px 40px; font-size: 15px; width: min(100%, 252px); }
  .landing-bracelet-container {
    width: min(94%, 600px);
    bottom: 34px;
  }
  .landing-footer-text { font-size: 13px; }
}

@media (max-width: 480px) {
  .landing-page { padding: 0; }
  .landing-hero-panel {
    height: 100vh;
    min-height: 680px;
    border-radius: 0;
  }
  .landing-container { padding: 24px 14px 18px; }
  .landing-header { margin-bottom: 10px; }
  .landing-logo { font-size: 24px; letter-spacing: 2px; }
  .landing-tagline { font-size: 12px; letter-spacing: 1.5px; }
  .landing-hero {
    width: 100%;
    padding: 10px 6px 0;
  }
  .landing-hero-title { font-size: 28px; margin-bottom: 18px; }
  .landing-hero-subtitle { font-size: 14px; margin-bottom: 22px; }
  .btn-start-customize { padding: 12px 32px; font-size: 14px; gap: 10px; width: min(100%, 244px); }
  .landing-bracelet-container {
    width: min(100%, 420px);
    bottom: 28px;
  }
  .landing-footer-text {
    font-size: 12px;
    line-height: 1.65;
  }
}

/* Subtle luxury cosmetic packaging style glitter overlay */
.app-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='15' cy='20' r='0.6' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='55' cy='12' r='0.8' fill='%23B5A9DB' opacity='0.5'/%3E%3Ccircle cx='110' cy='35' r='0.5' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='140' cy='18' r='0.7' fill='%23B5A9DB' opacity='0.6'/%3E%3Ccircle cx='8' cy='70' r='1.0' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='75' cy='65' r='0.6' fill='%23B5A9DB' opacity='0.8'/%3E%3Ccircle cx='125' cy='90' r='0.8' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='48' cy='105' r='0.4' fill='%23B5A9DB' opacity='0.5'/%3E%3Ccircle cx='28' cy='135' r='0.8' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='92' cy='130' r='0.4' fill='%23B5A9DB' opacity='0.8'/%3E%3Ccircle cx='132' cy='145' r='0.6' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='68' cy='155' r='1.0' fill='%23B5A9DB' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.04;
  /* Extremely subtle 4% opacity */
  pointer-events: none;
  z-index: 9999;
}

/* Fixed Navigation Header */
.app-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-border);
  z-index: 10;
  padding: 12px 16px 8px 16px;
  box-shadow: var(--shadow-sm);
}

/* Sticky preview stays visually above the header; disable only the covered
   header hit target until the preview returns to its document position. */
.app-container.step3-preview-covered .app-header {
  pointer-events: none;
}

/* At the sticky threshold the preview is the visual replacement for the
   header stack. Keep its full existing dimensions, but paint the whole card
   with the normal opaque cream surface all the way to the viewport edge. */
.app-container.step3-preview-covered #step3PreviewCard {
  background: rgb(252, 251, 255) !important;
  background-clip: border-box;
  opacity: 1 !important;
  mix-blend-mode: normal;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  mask: none;
  -webkit-mask-image: none;
  clip-path: none;
  border-radius: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.brand-logo {
  font-family: var(--font-brand-latin);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 1px;
  color: var(--color-navy-dark);
  text-decoration: none;
  background: linear-gradient(135deg, var(--color-navy-dark) 30%, var(--color-gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  border-radius: 50%;
  transition: var(--transition-fast);
}

.home-btn:hover {
  background-color: var(--color-gray-bg);
}

/* Progress Stepper */
.stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  position: relative;
  padding: 0 10px;
}

.stepper-line {
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  height: 2px;
  background-color: var(--color-gray-border);
  transform: translateY(-50%);
  z-index: 1;
}

.stepper-line-progress {
  position: absolute;
  top: 50%;
  left: 30px;
  width: 0%;
  height: 2px;
  background-color: var(--color-gold);
  transform: translateY(-50%);
  z-index: 2;
  transition: var(--transition-smooth);
}

.step-node {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-navy-muted);
  transition: var(--transition-smooth);
}

.step-node.active {
  border-color: var(--color-gold);
  background-color: var(--color-navy);
  color: var(--color-gold);
  box-shadow: 0 0 10px var(--color-gold-glow);
}

.step-node.completed {
  border-color: var(--color-gold);
  background-color: var(--color-gold);
  color: var(--color-navy-dark);
}

.step-label-text {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-muted);
  margin-top: 4px;
  display: none;
  /* Keep clean, we show label below */
}

.step-indicator-text {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gold-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Main Content Views */
.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px var(--step-content-bottom-clearance) 16px;
  scroll-padding-bottom: var(--step-content-bottom-clearance);
  display: flex;
  flex-direction: column;
}

.step-view {
  display: none;
  box-sizing: border-box;
  padding-top: 110px;
  animation: fadeIn 0.4s ease-out forwards;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.step-view.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typography styles inside steps */
.step-title {
  font-family: var(--font-ui-thai);
  font-size: 24px;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
  font-weight: 700;
}

.step-subtitle {
  font-size: 14px;
  color: var(--color-navy-muted);
  margin-bottom: 20px;
}

#stepView2 > .step-subtitle {
  display: none;
}

#stepView4 > .step-title,
#stepView4 .summary-header,
#stepView1 .wrist-visual-caption,
#stepView1 .name-input-group,
#stepView2 > .step-title,
#stepView2 .bead-size-guide-card {
  display: none !important;
}

/* Step 1: Wrist Measurement elements */
.wrist-visual-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(212, 175, 55, 0.1);
}

.wrist-illustration-svg {
  width: 160px;
  height: 160px;
  margin-bottom: 12px;
}

.wrist-tip {
  font-size: 12px;
  color: var(--color-navy-muted);
  text-align: center;
  background-color: var(--color-bg-light);
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  border-left: 3px solid var(--color-gold);
}

/* Personalization Input */
.name-input-group {
  background-color: var(--color-white);
  padding: 16px;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
  border: 1px solid var(--color-gray-border);
}

.name-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.name-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--color-gray-border);
  border-radius: 10px;
  background-color: var(--color-bg-light);
  color: var(--color-navy);
  transition: var(--transition-fast);
  font-family: inherit;
}

.name-input:focus {
  outline: none;
  border-color: var(--color-gold);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
}

/* Step 2: Bead Size elements */
.bead-size-options {
  --step2-card-gap: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--step2-card-gap);
  padding-block: var(--step2-card-gap);
}

.bead-size-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(181, 169, 219, 0.16);
  border-radius: 20px;
  padding: 13px 13px 13px 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 5px 14px rgba(181, 169, 219, 0.07);
}

.bead-size-card:hover {
  border-color: rgba(181, 169, 219, 0.32);
  transform: translateY(-1px);
}

.bead-size-card.active {
  border-color: rgba(139, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(181, 169, 219, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(251, 248, 255, 0.98));
}

.bead-size-card-recommended {
  border-color: rgba(181, 169, 219, 0.16);
  box-shadow: 0 5px 14px rgba(181, 169, 219, 0.07);
  background: var(--color-white);
}

.bead-size-card-recommended.active {
  border-color: rgba(139, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(181, 169, 219, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(251, 248, 255, 0.98));
}

.bead-size-content {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
}

.bead-size-radio-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bead-size-copy {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.bead-size-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 32px;
  min-width: 24px;
  flex: 0 0 auto;
  padding-top: 4px;
}

.bead-size-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

.bead-preview-circle {
  background: radial-gradient(circle at 35% 35%, var(--color-gold-light) 0%, var(--color-gold) 60%, var(--color-gold-dark) 100%);
  border-radius: 50%;
  box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(64, 48, 77, 0.12);
  flex: 0 0 auto;
}

.bead-preview-circle-sm {
  width: 14px;
  height: 14px;
}

.bead-preview-circle-md {
  width: 18px;
  height: 18px;
}

.bead-preview-circle-lg {
  width: 24px;
  height: 24px;
}

.bead-size-label {
  display: block;
  color: var(--color-navy-dark);
  font-family: inherit;
  font-size: 27px;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
  margin-bottom: 5px;
}

.bead-size-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.bead-size-recommendation {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #5B3EA6;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.bead-size-recommendation::before {
  content: '★';
  color: #D8A93B;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(216, 169, 59, 0.24);
}

.bead-size-details h4 {
  margin-top: 1px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy-dark);
  font-family: "Noto Sans Thai", "IBM Plex Sans Thai", "Prompt", "Inter", sans-serif;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  overflow: visible;
}

.bead-size-details p {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--color-navy-muted);
}

.bead-size-support-banner {
  --step2-support-pill-width: 128px;
  --step2-support-pill-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: var(--step2-support-pill-width);
  height: var(--step2-support-pill-height);
  box-sizing: border-box;
  max-width: none;
  margin-top: 6px;
  margin-left: -18px;
  min-height: 25px;
  padding: 4px 14px 6px 11px;
  border-radius: 999px;
  background: rgba(245, 239, 255, 0.86);
  border: 1px solid rgba(181, 169, 219, 0.28);
  overflow: visible;
}

.bead-size-support-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 4px;
  color: #67537b;
  font-family: var(--font-body), "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  overflow: visible;
}

.bead-size-support-item > span:not(.bead-size-support-thumb) {
  display: inline-block;
  /* Thai diacritics need extra line-height; do not reduce. */
  line-height: 1.6;
  padding-block: 2px;
  overflow: visible;
}

.bead-size-support-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid rgba(181, 169, 219, 0.18);
}

.bead-size-support-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  opacity: 1;
  display: block;
  transition: opacity 320ms ease, transform 320ms ease;
}

.bead-size-support-thumb.is-switching img {
  opacity: 0;
  transform: scale(0.9) translateY(1px);
}

.radio-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(158, 141, 174, 0.46);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex: 0 0 auto;
}

.bead-size-card.active .radio-check {
  border-color: var(--color-velvet-red);
  box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.06);
}

.bead-size-card.active .radio-check::after {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--color-velvet-red);
  border-radius: 50%;
  display: block;
}

.bead-size-hand-panel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #f6f1fa;
  border: 1px solid rgba(181, 169, 219, 0.14);
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bead-size-hand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.bead-size-hand-image {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: none;
}

.bead-size-card.active .bead-size-label,
.bead-size-card.active .bead-size-details h4 {
  color: var(--color-velvet-red);
}

/* Step 2 featured size composition */
.bead-size-options {
  --step2-card-gap: 11px;
}

.bead-size-card {
  border-color: rgba(181, 169, 219, 0.24);
  border-radius: 22px !important;
  padding: 11px 12px;
  box-shadow: 0 6px 16px rgba(111, 85, 148, 0.08);
}

.bead-size-card[data-bead-size="6"] { order: 1; }
.bead-size-card[data-bead-size="10"] { order: 2; }
.bead-size-card[data-bead-size="4"] { order: 3; }
.bead-size-card[data-bead-size="mixed"] { order: 4; }

.bead-size-preview-mixed {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* A filled opacity animation can retain a stacking context even at opacity 1.
   Step 3 must stay animation-free and transform-free so its sticky child can
   participate directly in the app-root stacking order. */
#stepView3.step-view {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  isolation: auto;
}

/* Step 3 must be tall enough to remain the sticky containing block while its
   catalog scrolls; its top spacing is document content, not scrollport space. */
#stepView3.step-view.active {
  height: auto;
  min-height: 100%;
}

.bead-size-preview-mixed .bead-preview-circle {
  position: static;
  flex: 0 0 auto;
}

.bead-size-mixed-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--color-velvet-red);
  font-size: 11px;
  font-weight: 700;
}

.bead-size-mixed-panel span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(181, 169, 219, 0.18);
}

.bead-size-content {
  grid-template-columns: 20px minmax(0, 1fr) 92px;
  gap: 10px;
}

.bead-size-card-recommended {
  border-color: rgba(182, 142, 219, 0.58);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.94) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 17%, rgba(255,255,255,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 82%, rgba(238,199,224,.34) 0 3px, transparent 4px),
    linear-gradient(135deg, rgba(250,244,255,.99), rgba(255,246,251,.97));
  box-shadow: 0 12px 26px rgba(155, 105, 183, 0.18), 0 0 0 4px rgba(233, 211, 248, 0.34);
}

.bead-size-card-recommended.active {
  border-color: rgba(137, 83, 173, 0.72);
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.98) 0 3px, transparent 4px),
    radial-gradient(circle at 47% 17%, rgba(255,255,255,.8) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 82%, rgba(238,199,224,.38) 0 3px, transparent 4px),
    linear-gradient(135deg, #fbf5ff, #fff3fa);
  box-shadow: 0 15px 30px rgba(139, 78, 171, 0.24), 0 0 0 5px rgba(235, 211, 248, 0.48);
}

.bead-size-card-recommended .bead-size-content {
  grid-template-columns: 20px minmax(0, 1fr) 112px;
  min-height: 148px;
}

.bead-size-label {
  font-size: 24px;
}

.bead-size-featured-crown {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  color: #D59A32;
  filter: drop-shadow(0 2px 3px rgba(196, 144, 39, .18));
}

.bead-size-featured-crown svg {
  width: 18px;
  height: 18px;
}

.bead-size-card-recommended .bead-size-label {
  font-size: 32px;
  color: #5C3E82;
}

.bead-size-card-recommended .bead-size-details h4 {
  margin-top: 5px;
  color: #5C3E82;
  font-size: 15px;
  font-weight: 700;
}

.bead-size-popular-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-top: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #7E5610;
  background: linear-gradient(135deg, #FCEBB6, #EFC56B);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 3px 8px rgba(190, 139, 44, .16);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
}

.bead-size-card-recommended .bead-size-support-banner {
  margin-top: 7px;
  margin-left: -18px;
  gap: 5px;
  padding: 3px 8px 5px;
  background: rgba(255, 255, 255, 0.56);
}

.bead-size-card-recommended .bead-size-support-item {
  font-size: 9px;
}

.bead-size-hand-panel {
  border-radius: 15px;
  background: linear-gradient(145deg, #f7f0fb, #fff8fc);
  border-color: rgba(181, 169, 219, 0.18);
  height: 88px;
}

.bead-size-card-recommended .bead-size-hand-panel {
  height: 148px;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(159, 116, 180, 0.14);
}

.bead-size-card-recommended.active .bead-size-label,
.bead-size-card-recommended.active .bead-size-details h4 {
  color: #5C3E82;
}

.bead-size-guide-card {
  margin-top: 14px;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 242, 255, 0.95));
  border: 1px solid rgba(181, 169, 219, 0.22);
  box-shadow: 0 10px 24px rgba(181, 169, 219, 0.1);
}

.bead-size-guide-header h3 {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-navy-dark);
}

.bead-size-guide-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-velvet-red);
}

.bead-size-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.bead-size-guide-item {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(181, 169, 219, 0.14);
}

.bead-size-guide-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy-muted);
}

.bead-size-guide-value {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.bead-size-guide-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-navy-muted);
}

@media (max-width: 360px) {
  .bead-size-content {
    grid-template-columns: 18px minmax(0, 1fr) 86px;
    gap: 8px;
  }

  .bead-size-copy {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 8px;
  }

  .bead-size-label {
    font-size: 23px;
  }

  .bead-size-details h4 {
    font-size: 12px;
    line-height: 1.5;
  }

  .bead-size-details p {
    font-size: 9.5px;
  }

  .bead-size-support-banner {
    gap: 8px;
    margin-left: -16px;
    min-height: 24px;
    padding: 4px 12px 6px 10px;
  }

  .bead-size-support-item {
    gap: 3px;
    font-size: 9px;
    line-height: 1.6;
  }

  .bead-size-support-thumb {
    width: 14px;
    height: 14px;
  }

  .bead-size-hand-panel {
    height: 98px;
  }

  .bead-size-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* Step 2: Bracelet Components */
.component-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.component-section {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#charmSectionMount {
  width: 100%;
  min-width: 0;
  padding-bottom: 24px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#charmSectionMount .section-heading {
  margin-bottom: 8px;
}

.section-heading h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 2px;
}

.section-heading p {
  font-size: 12px;
  color: var(--color-navy-muted);
  line-height: 1.4;
}

.section-heading > div {
  min-width: 0;
}

.charm-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.charm-option-card,
.future-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--color-gray-border);
  background: linear-gradient(180deg, var(--color-white), rgba(248, 244, 255, 0.92));
  box-shadow: var(--shadow-sm);
  text-align: left;
  padding: 14px;
  color: var(--color-navy-dark);
}

.charm-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-wrap: nowrap;
}

.charm-option-card:hover {
  border-color: var(--color-gold-light);
  transform: translateY(-1px);
}

.charm-option-card.active {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  background: linear-gradient(180deg, rgba(255, 248, 229, 0.98), rgba(255, 255, 255, 0.98));
}

.charm-option-badge,
.future-card-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background-color: rgba(212, 175, 55, 0.12);
  color: var(--color-gold-dark);
}

.charm-option-media {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  max-width: 72px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(212, 175, 55, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.charm-option-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.charm-option-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.charm-option-copy strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
  line-height: 1.3;
}

.charm-option-sku {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gold-dark);
  letter-spacing: 0.2px;
}

.charm-option-copy span:last-child {
  font-size: 12px;
  color: var(--color-navy-muted);
  line-height: 1.35;
}

.future-components-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.future-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: not-allowed;
  opacity: 0.78;
  color: var(--color-navy-muted);
  border-style: dashed;
  flex-wrap: nowrap;
}

.future-card strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.future-card span:last-child {
  font-size: 12px;
  line-height: 1.4;
}

.future-card:disabled {
  pointer-events: none;
}

/* Step 3: Interactive Canvas & Catalog */
.designer-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Interactive Canvas card */
.canvas-card {
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(212, 175, 55, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.canvas-container {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.inspiration-trigger-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-width: 0;
}

.inspiration-gallery-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cbb7f6;
  border-radius: 999px;
  background: rgba(237, 226, 255, 0.92);
  color: #5e3f91;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
  box-shadow: none;
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.inspiration-gallery-icon {
  width: 14px;
  height: 14px;
  color: #6b4aa0;
  flex: 0 0 auto;
}

.inspiration-gallery-btn:hover {
  transform: translateY(-1px);
  border-color: #bda4ef;
  background: rgba(242, 235, 255, 0.98);
}

.inspiration-gallery-btn:active {
  transform: translateY(0);
}

#braceletSvg {
  overflow: visible;
}

/* SVG loop nodes animation */
.bead-node {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.bead-node:hover {
  transform: scale(1.08);
}



@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.bead-slot-border {
  transition: var(--transition-smooth);
}

.bead-node.active .bead-slot-border {
  stroke: var(--color-gold);
  stroke-dasharray: 4 2;
  animation: rotateDashed 10s linear infinite;
}

@keyframes rotateDashed {
  to {
    stroke-dashoffset: -20;
  }
}

.canvas-center-info {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-gray-border);
  text-align: center;
  pointer-events: none;
}

.center-title {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-navy-muted);
  letter-spacing: 0.5px;
}

.center-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.center-subvalue {
  font-size: 10px;
  font-weight: 600;
}

.center-subvalue.fit {
  color: var(--color-green-dark);
}

.center-subvalue.overflow {
  color: var(--color-red);
}

/* Stats and controls layout inside Step 3 */
.canvas-stats-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 8px;
  margin-top: 4px;
}

#stepView3 .canvas-stats-row {
  justify-content: center;
  gap: 12px;
}

.canvas-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
}

#stepView3 .canvas-stat:nth-child(3) {
  display: none;
}

.canvas-stat-label {
  font-size: 10px;
  color: var(--color-navy-muted);
  text-transform: uppercase;
}

.canvas-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.canvas-inline-price {
  display: none;
}

.canvas-controls-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--color-gray-border);
  padding-top: 8px;
}

.ctrl-btn {
  background-color: var(--color-white);
  border: 1px solid var(--color-lavender-dark) !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-dark) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: var(--transition-fast);
}

.ctrl-btn:hover {
  background-color: var(--color-lavender-light) !important;
}

.ctrl-btn svg {
  stroke: var(--color-lavender-dark) !important;
}

/* Step 3 catalog type segmented control */
.catalog-type-filter {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  min-height: 52px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #D9CEF6;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(98, 80, 145, 0.08);
  overflow: hidden;
}

.canvas-card {
  position: relative;
}

/* Shared Step 3 live preview: one full-size card for every fixed and mixed mode. */
#stepView3 .canvas-card {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: auto;
  pointer-events: auto;
}

/* Owner-approved UAT Step 2 composition. Keep all four cards in one vertical
   column, with the same compact right-side wrist image treatment. Mixed is the
   sole featured card and remains a three physical-bead concept. */
#stepView2 .bead-size-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 7px;
}

#stepView2 .bead-size-card,
#stepView2 .bead-size-card-recommended {
  min-height: 84px;
  padding: 8px 10px;
  border-color: rgba(181, 169, 219, 0.24);
  background: var(--color-white);
  box-shadow: 0 6px 16px rgba(111, 85, 148, 0.08);
}

#stepView2 .bead-size-card[data-bead-size="mixed"] { order: 1; }
#stepView2 .bead-size-card[data-bead-size="10"] { order: 2; }
#stepView2 .bead-size-card[data-bead-size="6"] { order: 3; }
#stepView2 .bead-size-card[data-bead-size="4"] { order: 4; }

#stepView2 .bead-size-card.active,
#stepView2 .bead-size-card-recommended.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(251, 248, 255, 0.98));
  border-color: rgba(139, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(181, 169, 219, 0.1);
}

#stepView2 .bead-size-content,
#stepView2 .bead-size-card-recommended .bead-size-content {
  grid-template-columns: 18px minmax(0, 1fr) 76px;
  min-height: 68px;
  gap: 8px;
}

#stepView2 .bead-size-copy {
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 10px;
}

#stepView2 .bead-size-preview { min-width: 52px; }

#stepView2 .bead-size-preview-mixed {
  justify-content: flex-start;
  gap: 2px;
  padding-top: 1px;
}

#stepView2 .bead-size-preview-mixed .bead-preview-circle-sm { width: 11px; height: 11px; }
#stepView2 .bead-size-preview-mixed .bead-preview-circle-md { width: 15px; height: 15px; }
#stepView2 .bead-size-preview-mixed .bead-preview-circle-lg { width: 19px; height: 19px; }

#stepView2 .bead-size-card-mixed {
  border-color: rgba(216, 169, 59, 0.38);
  background: linear-gradient(135deg, #fffdf8, #fff 68%, #fbf6ea);
  box-shadow: 0 8px 18px rgba(184, 145, 51, 0.11);
}

#stepView2 .bead-size-card-mixed.active {
  border-color: rgba(181, 137, 36, 0.56);
  box-shadow: 0 9px 20px rgba(184, 145, 51, 0.16);
}

#stepView2 .bead-size-mixed-recommendation {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(216, 169, 59, 0.34);
  border-radius: 999px;
  background: rgba(255, 252, 241, 0.92);
  color: #a97817;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(154, 111, 22, 0.12);
}

#stepView2 .bead-size-hand-panel,
#stepView2 .bead-size-support-banner,
#stepView2 .bead-size-popular-badge,
#stepView2 .bead-size-featured-crown,
#stepView2 .bead-size-recommendation { display: none; }

#stepView2 .bead-size-hand-panel,
#stepView2 .bead-size-card-recommended .bead-size-hand-panel {
  display: flex;
  height: 68px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7f0fb, #fff8fc);
  border-color: rgba(181, 169, 219, 0.18);
  box-shadow: none;
}

#stepView2 .bead-size-label,
#stepView2 .bead-size-card-recommended .bead-size-label {
  font-size: 21px;
  color: var(--color-navy-dark);
}

#stepView2 .bead-size-card.active .bead-size-label,
#stepView2 .bead-size-card-recommended.active .bead-size-label { color: var(--color-velvet-red); }

#stepView2 .bead-size-details h4,
#stepView2 .bead-size-card-recommended .bead-size-details h4 {
  margin-top: 2px;
  color: var(--color-navy-dark);
  font-size: 11px;
  line-height: 1.25;
}

@media (max-width: 360px) {
  #stepView2 .bead-size-options { gap: 6px; }
  #stepView2 .bead-size-card,
  #stepView2 .bead-size-card-recommended { min-height: 80px; padding: 7px 8px; }
  #stepView2 .bead-size-content,
  #stepView2 .bead-size-card-recommended .bead-size-content { grid-template-columns: 17px minmax(0, 1fr) 70px; min-height: 64px; gap: 7px; }
  #stepView2 .bead-size-copy { grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; }
  #stepView2 .bead-size-preview { min-width: 48px; }
  #stepView2 .bead-size-hand-panel,
  #stepView2 .bead-size-card-recommended .bead-size-hand-panel { height: 64px; }
}

.canvas-reset-control {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-height: 36px;
  padding: 6px 9px;
  font-size: 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(98, 80, 145, 0.12);
  z-index: 3;
}

.app-footer.step3-compact-footer {
  padding: 7px 12px calc(7px + var(--mobile-safe-bottom));
  gap: 8px;
}

.app-footer.step3-compact-footer .footer-btn {
  min-height: 46px;
  padding: 10px 14px;
  font-size: 14px;
}

.app-footer.step3-compact-footer .btn-back {
  flex: 0.55;
}

.app-footer.step3-compact-footer .btn-next {
  flex: 1;
}

.catalog-type-filter::before {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: 13px;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.74) 38%, rgba(255, 255, 255, 0.96) 50%, rgba(255, 255, 255, 0.28) 62%, transparent 100%);
  opacity: 0;
  transform: translateX(-120%);
  pointer-events: none;
}

.catalog-type-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 6px 6px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--color-navy-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

#stepView3 .catalog-type-tab.step3-tab-hint-active::before {
  content: '✦';
  position: absolute;
  top: 4px;
  right: 10px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 10px;
  opacity: 0;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(181, 169, 219, 0.95);
  animation: step3CategorySparkle 1.05s ease-in-out 0s 1;
  pointer-events: none;
}

#stepView3.step3-tab-hinting .catalog-type-filter {
  box-shadow:
    0 8px 20px rgba(98, 80, 145, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 28px rgba(255, 255, 255, 0.58),
    0 0 24px rgba(181, 169, 219, 0.24);
}

#stepView3.step3-tab-hinting .catalog-type-tab.step3-tab-hint-active {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.94) 45%, rgba(255, 255, 255, 0.12) 66%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #EFE8FF 0%, #F7F2FF 100%);
  background-size: 260% 100%, 100% 100%;
  animation:
    step3CategoryTabFocus 1.05s ease-in-out both,
    step3TabWhiteShimmer 1.05s ease-in-out both;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.88),
    0 0 22px rgba(255, 255, 255, 0.68),
    0 7px 18px rgba(181, 169, 219, 0.22);
}

#stepView3.step3-tab-hinting .catalog-type-tab.step3-tab-hint-active::before {
  content: '✦';
  position: absolute;
  top: 4px;
  right: 10px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 10px;
  opacity: 0;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(181, 169, 219, 0.95);
  animation: step3CategorySparkle 1.05s ease-in-out 0s 1;
  pointer-events: none;
}

#stepView3.step3-tab-hinting .catalog-type-tab.step3-tab-hint-active::after {
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.82),
    0 0 10px rgba(181, 169, 219, 0.32);
}

.catalog-type-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(139, 119, 196, 0.42);
}

.catalog-type-tab::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 3px;
  border-radius: 9999px;
  background: transparent;
  transition: var(--transition-fast);
}

.catalog-type-tab.active {
  background: linear-gradient(180deg, #EFE8FF 0%, #F7F2FF 100%);
  color: #5B3EA6;
  box-shadow:
    inset 0 0 0 1px rgba(139, 119, 196, 0.72),
    0 6px 16px rgba(139, 119, 196, 0.18);
}

.catalog-type-tab.active::after {
  background: #7C5CCF;
  box-shadow: 0 0 10px rgba(124, 92, 207, 0.28);
}

.catalog-type-tab[hidden] {
  display: none;
}

.catalog-type-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

@keyframes step3CategoryTabFocus {
  0%,
  100% {
    transform: translateY(0);
  }

  34% {
    transform: translateY(-1px) scale(1.03);
  }

  68% {
    transform: translateY(0);
  }
}

@keyframes step3TabWhiteShimmer {
  0% {
    background-position: 140% 0, 0 0;
  }

  100% {
    background-position: -80% 0, 0 0;
  }
}

@keyframes step3CategorySparkle {
  0%,
  100% {
    opacity: 0;
    transform: translateY(3px) scale(0.72);
  }

  38% {
    opacity: 0.9;
    transform: translateY(-1px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #stepView3.step3-tab-hinting .catalog-type-tab.step3-tab-hint-active,
  #stepView3.step3-tab-hinting .catalog-type-tab.step3-tab-hint-active::before {
    animation: none;
  }

  #stepView3.step3-tab-hinting .catalog-type-filter {
    box-shadow:
      0 8px 20px rgba(98, 80, 145, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.72);
  }
}

#stepView3 .stone-card.step3-info-hint-card {
  z-index: 4;
  border-color: rgba(139, 83, 202, 0.78);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 5px rgba(218, 192, 242, 0.32),
    0 0 26px rgba(143, 84, 203, 0.38),
    0 12px 24px rgba(111, 63, 161, 0.18);
  animation: step3InfoCardGlow 700ms ease-in-out both;
}

#stepView3 .stone-card.step3-info-hint-card::after,
#stepView3 .stone-card.step3-info-hint-card-final::after {
  content: '✦';
  position: absolute;
  top: -10px;
  right: 5px;
  color: #9B63D1;
  font-size: 17px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 18px rgba(154, 88, 210, 0.76);
  pointer-events: none;
  animation: step3InfoSparkle 1000ms ease-in-out both;
}

#stepView3 .info-icon-btn.step3-info-hint-button,
#stepView3 .info-icon-btn.step3-info-hint-final {
  z-index: 22;
  color: #4C2187;
  border-color: rgba(113, 48, 181, 0.96);
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #F5EAFE 52%, #D7B7F2 100%);
  box-shadow:
    0 0 0 4px rgba(236, 219, 252, 0.95),
    0 0 0 7px rgba(184, 125, 231, 0.48),
    0 0 23px rgba(122, 50, 185, 0.82);
}

#stepView3 .info-icon-btn.step3-info-hint-button {
  animation: step3InfoButtonPulse 900ms ease-in-out infinite;
}

#stepView3 .info-icon-btn.step3-info-hint-final {
  animation: step3InfoButtonPulse 1150ms ease-in-out infinite;
}

#stepView3 .stone-card.step3-info-hint-card-final {
  z-index: 4;
}

#stepView3 .step3-info-hint-callout {
  position: absolute;
  top: 33px;
  right: -2px;
  z-index: 21;
  width: max-content;
  max-width: min(160px, calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid rgba(126, 66, 182, 0.56);
  border-radius: 12px;
  color: #41206F;
  background: linear-gradient(145deg, #FFFFFF 0%, #F4E8FF 54%, #E6CEFA 100%);
  box-shadow:
    0 10px 22px rgba(83, 42, 128, 0.3),
    0 0 0 3px rgba(244, 229, 255, 0.82),
    0 0 24px rgba(174, 106, 223, 0.62);
  font-family: var(--font-ui-thai);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  animation: step3InfoCalloutEnter 280ms ease-out both;
}

#stepView3 .step3-info-hint-callout::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 11px;
  width: 13px;
  height: 13px;
  border-top: 1px solid rgba(126, 66, 182, 0.56);
  border-left: 1px solid rgba(126, 66, 182, 0.56);
  background: #FDF9FF;
  transform: rotate(45deg);
}

@keyframes step3InfoCardGlow {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.035); }
}

@keyframes step3InfoSparkle {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(0.72); }
  45% { opacity: 0.95; transform: translateY(-2px) scale(1); }
}

@keyframes step3InfoButtonPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.34); }
}

@keyframes step3InfoCalloutEnter {
  from { opacity: 0; transform: translateY(-5px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #stepView3 .stone-card.step3-info-hint-card,
  #stepView3 .stone-card.step3-info-hint-card::after,
  #stepView3 .stone-card.step3-info-hint-card-final::after,
  #stepView3 .info-icon-btn.step3-info-hint-button,
  #stepView3 .info-icon-btn.step3-info-hint-final,
  #stepView3 .step3-info-hint-callout {
    animation: none;
  }
}

.charm-amulet-icon {
  width: 27px;
  height: 27px;
  color: #C79A3A;
  overflow: visible;
}

.charm-amulet-symbol {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.34;
  filter: blur(0.28px);
  animation: charmAmuletCycle 7.5s ease-in-out infinite;
}

.charm-amulet-lotus {
  animation-delay: 0s;
}

.charm-amulet-ganesha {
  animation-delay: -2.5s;
}

.charm-amulet-pixiu {
  animation-delay: -5s;
}

@keyframes charmAmuletCycle {
  0%,
  22%,
  100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 2px rgba(245, 211, 139, 0.82))
      drop-shadow(0 0 5px rgba(199, 154, 58, 0.28));
    transform: translateX(0) scale(1.12);
  }

  31%,
  55% {
    opacity: 0.36;
    filter: blur(0.3px);
    transform: translateX(6px) scale(0.78);
  }

  64%,
  88% {
    opacity: 0.34;
    filter: blur(0.3px);
    transform: translateX(-6px) scale(0.78);
  }

  27%,
  60%,
  93% {
    opacity: 0.18;
    filter: blur(0.45px);
  }

  96% {
    transform: translateX(-2px) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .charm-amulet-symbol {
    animation: none;
    opacity: 0;
    filter: none;
    transform: none;
  }

  .charm-amulet-lotus {
    opacity: 1;
    filter:
      drop-shadow(0 0 2px rgba(245, 211, 139, 0.72))
      drop-shadow(0 0 5px rgba(199, 154, 58, 0.22));
    transform: scale(1.08);
  }
}

/* Catalog Filter Tabs */
.catalog-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
  /* Hide standard Firefox scrollbar */
}

.catalog-filters::-webkit-scrollbar {
  display: none;
  /* Hide Chrome/Safari scrollbar */
}

.filter-tab {
  white-space: nowrap;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.filter-tab.active {
  background-color: var(--color-lavender-dark) !important;
  color: var(--color-white) !important;
  border-color: var(--color-lavender-dark) !important;
  box-shadow: 0 4px 12px var(--color-lavender-glow);
}

.catalog-container {
  padding-bottom: 0;
}

#stepView3.active .catalog-container,
#stepView3.active #charmSectionMount {
  padding-bottom: var(--step-content-bottom-clearance);
}

#stepView3 .catalog-container[hidden],
#stepView3 #charmSectionMount[hidden],
#stepView3 .component-section[hidden] {
  display: none !important;
}

/* Stone Catalog Cards Grid */
.stone-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.charm-component-section .stone-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.catalog-empty-state {
  grid-column: 1 / -1;
  padding: 18px 12px;
  border: 1px dashed var(--color-gray-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-navy-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.stone-card {
  background-color: var(--color-white);
  border-radius: 14px;
  padding: 7px 7px 8px;
  border: 1px solid var(--color-gray-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition-smooth);
}

button.stone-card {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.stone-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
  transform: translateY(-2px);
}

.stone-card.selected {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  background: linear-gradient(180deg, rgba(255, 248, 229, 0.98), rgba(255, 255, 255, 0.98));
}

/* Selected state for Step 3 stone catalog cards only. */
.stone-card.stone-card-selected {
  border-color: #7c5ccf;
  box-shadow: 0 0 0 1px rgba(124, 92, 207, 0.28), 0 6px 16px rgba(124, 92, 207, 0.16);
  background: linear-gradient(180deg, rgba(247, 242, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.charm-component-section .stone-card {
  padding: 9px 8px 10px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(181, 169, 219, 0.12);
}

.stone-img-container {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-bg-light);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.charm-component-section .stone-img-container {
  border-radius: 12px;
  margin-bottom: 8px;
}

.stone-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  transition: var(--transition-smooth);
  clip-path: circle(41% at center);
  /* Crop out checkerboard transparency patterns */
}

.beryl-catalog-image {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}

.charm-card-img {
  clip-path: none;
  width: 112%;
  height: 112%;
  padding: 2px;
  object-fit: contain;
  transform: scale(var(--charm-thumb-scale, 1));
  transform-origin: center;
}

.spacer-card-img {
  clip-path: none;
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
  transform: scale(var(--spacer-thumb-scale, 1));
  transform-origin: center;
}

.stone-card-media-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy-muted);
}

.stone-card:hover .stone-img {
  transform: scale(1.1) rotate(5deg);
}

.stone-card:hover .charm-card-img {
  transform: none;
}

.stone-card:hover .spacer-card-img {
  transform: scale(var(--spacer-thumb-scale, 1));
}

.info-icon-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-gray-border);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 10;
}

.info-icon-btn:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.stone-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.stone-name-th {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-navy-dark);
  line-height: 1.2;
}

.stone-name-en {
  font-size: 8px;
  color: var(--color-navy-muted);
  line-height: 1.25;
}

.stone-price-row {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.stone-price-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gold-dark);
}

.stone-add-btn {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.stone-add-btn.selected {
  background-color: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-white);
}

.stone-card-selected .stone-add-btn {
  background-color: #7c5ccf;
  border-color: #7c5ccf;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.stone-card-selected .stone-add-btn:hover {
  background-color: #5b3ea6;
  border-color: #5b3ea6;
}

.stone-add-btn:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

@media (max-width: 360px) {
  .stone-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mixed Bead Size Selector - appears only when Mixed Sizes is active in step 3 */
.mixed-size-selector-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-gold);
  margin-bottom: 8px;
}

.mixed-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.mixed-toggles {
  display: flex;
  gap: 4px;
}

.mixed-toggle-btn {
  background: none;
  border: 1px solid var(--color-gray-border);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.mixed-toggle-btn.active {
  background-color: var(--color-gold);
  color: var(--color-navy-dark);
  border-color: var(--color-gold);
}

/* Step 4: Summary & Commercial elements */
.summary-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.summary-header {
  border-bottom: 2px dashed var(--color-gray-border);
  padding-bottom: 12px;
}

.summary-customer-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.summary-date {
  font-size: 12px;
  color: var(--color-navy-muted);
}

/* Specs Box (4-column layout) */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.spec-box {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.spec-box-label {
  font-size: 9px;
  color: var(--color-navy-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.spec-box-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

/* Itemized Billing */
.billing-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px var(--color-lavender-shadow);
  border: 1px dashed var(--color-lavender-dark);
}

.billing-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
  border-bottom: 1px solid var(--color-gray-bg);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.billing-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.billing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.billing-item-thumbnail {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-border);
}

.billing-thumbnail-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  clip-path: circle(41% at center);
}

.billing-item-name h5 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.billing-item-name p {
  font-size: 11px;
  color: var(--color-navy-muted);
}

.billing-item-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.billing-natural-variation-note {
  margin: 0;
  padding-top: 2px;
  color: var(--color-navy-muted);
  font-family: var(--font-ui-thai);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

/* Pricing Logic styling */
.pricing-breakdown {
  margin-top: 16px;
  border-top: 1px solid var(--color-gray-bg);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.price-row.subtotal {
  color: var(--color-navy-muted);
}

.price-row.subtotal .price-val {
  text-decoration: line-through;
}

.discount-box {
  background: linear-gradient(135deg, #eaf7ef 0%, #d7f0df 100%);
  border: 1px solid #9cc9aa;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  box-shadow: 0 4px 10px rgba(64, 112, 79, 0.16);
}

.discount-badge {
  font-size: 11px;
  font-weight: 700;
  color: #2f6f48;
  text-transform: uppercase;
}

.discount-value {
  font-size: 12px;
  font-weight: 700;
  color: #2f6f48;
}

.price-row.total {
  margin-top: 8px;
  border-top: 2px solid var(--color-gray-border);
  padding-top: 12px;
}

.price-row.total .price-lbl {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.price-row.total .price-val {
  font-size: 20px;
  font-weight: 800;
  color: #2f6f48;
}

.shipping-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-border);
}

.shipping-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--color-gray-bg);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.shipping-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin: 0;
}

.shipping-benefit-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #ccebd7;
  border-radius: 999px;
  background: #effaf3;
  color: #28754a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.shipping-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shipping-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shipping-field-full {
  grid-column: 1 / -1;
}

.shipping-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-dark);
}

.shipping-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-gray-border);
  border-radius: 12px;
  background: var(--color-bg-light);
  color: var(--color-navy-dark);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.4;
  transition: var(--transition-fast);
}

.shipping-input:focus {
  outline: none;
  border-color: var(--color-lavender-dark);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(181, 169, 219, 0.16);
}

.shipping-input.is-invalid {
  border-color: var(--color-velvet-red);
  background: #fff7f7;
}

.shipping-textarea {
  min-height: 92px;
  resize: vertical;
}

.shipping-validation-message {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-velvet-red);
}

@media (max-width: 420px) {
  .shipping-fields {
    grid-template-columns: 1fr;
  }

  .shipping-field-full {
    grid-column: auto;
  }
}

/* Stone Meanings Section */
.meanings-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-border);
}

.meanings-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
  border-bottom: 1px solid var(--color-gray-bg);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.meanings-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.meaning-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px var(--color-lavender-shadow);
  transition: var(--transition-smooth);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.meaning-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(178, 164, 212, 0.28);
  border-color: var(--color-lavender-dark);
}

.meaning-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-lavender) 0%, var(--color-lavender-dark) 100%);
}

.meaning-item-title {
  font-family: var(--font-ui-thai);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy-dark);
  margin-bottom: 4px;
  line-height: 1.35;
}

.meaning-item-desc {
  font-size: 12px;
  color: var(--color-navy-muted);
  line-height: 1.4;
  margin-top: 2px;
}

.meaning-item-thumbnail {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
  border: 1px solid var(--color-gray-border);
  background: linear-gradient(135deg, #F9F6FF 0%, #FFFDF6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 2px;
}

.meaning-item-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.meaning-item-thumbnail.has-image .meaning-item-thumbnail-img {
  display: block;
}

.meaning-item-thumbnail.has-image .meaning-item-thumbnail-placeholder {
  display: none;
}

.meaning-item-thumbnail-placeholder {
  font-family: var(--font-ui-thai);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-lavender-dark);
}

.meaning-item-content {
  min-width: 0;
  flex: 1;
}

/* Trust Section */
.trust-disclaimer-box {
  background: linear-gradient(135deg, #FFFDF6 0%, #FFF9E6 100%);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.trust-icon {
  color: var(--color-gold-dark);
  margin-top: 2px;
}

.trust-text {
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-navy-dark);
}

.trust-text strong {
  display: block;
  margin-bottom: 2px;
}

/* Sticky Footer Navigation */
.app-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-border);
  z-index: 100;
  padding: 16px 16px calc(16px + var(--mobile-safe-bottom)) 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  gap: 12px;
}

.app-footer.step3-validation-active {
  flex-wrap: wrap;
}

.app-footer.step3-next-floating {
  will-change: transform, opacity;
}

.footer-btn {
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  outline: none;
  font-family: inherit;
}

.footer-btn.btn-back {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-gray-border);
  color: var(--color-navy);
  flex: 1;
}

.footer-btn.btn-back:hover {
  background-color: var(--color-gray-bg);
}

.footer-btn.btn-next {
  background-color: var(--color-velvet-red) !important;
  border: 1px solid var(--color-velvet-red) !important;
  color: var(--color-white) !important;
  flex: 2;
  box-shadow: var(--shadow-sm);
}

.footer-btn.btn-next.is-entering {
  position: relative;
  overflow: hidden;
  animation: step3NextButtonEnter 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  box-shadow:
    0 12px 26px rgba(139, 0, 0, 0.28),
    0 0 18px rgba(139, 0, 0, 0.16);
}

.footer-btn.btn-next.is-entering::after {
  content: '';
  position: absolute;
  inset: -35% -45%;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.42) 50%, transparent 65%);
  transform: translateX(-65%);
  animation: step3NextButtonSweep 460ms ease-out 80ms both;
  pointer-events: none;
}

.footer-btn.btn-next:hover {
  background-color: var(--color-velvet-red-dark) !important;
  border-color: var(--color-velvet-red-dark) !important;
  transform: translateY(-1px);
}

.footer-btn.btn-next:disabled {
  background-color: var(--color-gray-bg);
  border-color: var(--color-gray-border);
  color: var(--color-navy-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.step3-next-warning {
  width: 100%;
  margin-top: -4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-velvet-red);
  text-align: center;
}

@keyframes step3NextButtonEnter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes step3NextButtonSweep {
  from {
    transform: translateX(-65%);
  }

  to {
    transform: translateX(65%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-btn.btn-next.is-entering,
  .footer-btn.btn-next.is-entering::after {
    animation: none;
  }
}

/* Checkout Button (high contrast green) */
.footer-btn.btn-order {
  background-color: #06c755;
  border: 1px solid #06c755;
  color: var(--color-white);
  flex: 2;
  box-shadow: 0 8px 18px rgba(6, 199, 85, 0.24);
}

.footer-btn.btn-order:hover {
  background-color: #05af4a;
  border-color: #05af4a;
}

.footer-btn.btn-paid-complete {
  background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
  border: 1px solid #0891b2;
  color: var(--color-white);
  flex: 2;
  box-shadow: 0 8px 18px rgba(8, 145, 178, 0.22);
  cursor: default;
}

.footer-btn.btn-paid-complete:disabled {
  opacity: 1;
  cursor: default;
}

/* Modals & Backdrop */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 17, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-backdrop.show {
  display: flex;
  animation: fadeInBackdrop 0.25s ease-out forwards;
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-content-card {
  background-color: var(--color-bg-cream);
  border-radius: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-lavender-dark);
  overflow: hidden;
  animation: popInModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
  transform-origin: center;
}

@keyframes popInModal {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  background: var(--color-bg-cream);
  border-bottom: 1px solid var(--color-gray-border);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-family: var(--font-ui-thai);
  color: var(--color-navy-dark);
  font-size: 18px;
  font-weight: 700;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--color-navy);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0.8;
  transition: var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--color-velvet-red);
  opacity: 1;
}

.modal-body {
  padding: 20px;
}

.modal-bead-img-row {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.modal-bead-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background-color: var(--color-bg-light);
  border-radius: 50%;
  padding: 4px;
  border: 1px solid var(--color-gold);
  box-shadow: var(--shadow-sm);
  clip-path: circle(41% at center);
}

.modal-stone-details {
  text-align: center;
}

.modal-stone-title-th {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy-dark);
}

.modal-stone-title-en {
  font-size: 13px;
  color: var(--color-navy-muted);
  margin-bottom: 12px;
}

.modal-stone-meaning-box {
  background-color: var(--color-bg-light);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-navy);
  border-left: 3px solid var(--color-gold);
  margin-bottom: 16px;
}

#stoneInfoModal .modal-stone-meaning-box {
  margin-bottom: 0;
}

.inspiration-gallery-modal {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: rgba(64, 48, 77, 0.20);
  backdrop-filter: blur(3px);
}

.inspiration-gallery-card {
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-self: flex-end;
  background:
    radial-gradient(circle at 14% 11%, rgba(231, 211, 255, 0.32), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(255, 220, 239, 0.26), transparent 28%),
    #FCF8FF;
  border: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px rgba(91, 66, 125, 0.18);
  animation: inspirationSheetUp 0.28s ease-out forwards;
  transform-origin: bottom center;
  isolation: isolate;
}

.inspiration-gallery-card::before,
.inspiration-gallery-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}

.inspiration-gallery-card::before {
  width: 260px;
  height: 180px;
  top: -72px;
  left: -90px;
  border-radius: 48% 52% 64% 36% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 62% 65%, rgba(255,255,255,.9), rgba(230,211,255,.34) 52%, transparent 72%);
}

.inspiration-gallery-card::after {
  width: 240px;
  height: 170px;
  top: 72px;
  right: -105px;
  border-radius: 61% 39% 48% 52% / 42% 56% 44% 58%;
  background: radial-gradient(circle at 30% 45%, rgba(255,255,255,.75), rgba(255,216,239,.34) 55%, transparent 74%);
}

.inspiration-gallery-modal.is-closing {
  animation: fadeOutBackdrop 0.22s ease-out forwards;
}

.inspiration-gallery-modal.is-closing .inspiration-gallery-card {
  animation: inspirationSheetDown 0.22s ease-out forwards;
}

.inspiration-gallery-header {
  z-index: 3; position: absolute; inset: 8px auto auto 10px;
  display: block;
  width: 36px;
  min-height: 36px; padding: 0; background: transparent;
  border-bottom: 0;
}

.inspiration-gallery-header::before {
  display: none;
}

.inspiration-gallery-header h3 {
  display:none;
  color: #40304D;
  font-family: var(--font-display, var(--font-ui-thai));
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.inspiration-gallery-close-icon {
  width: 36px;
  height: 36px;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6B4AA0;
  font-size: 24px;
  line-height: 1;
  opacity: 1;
}

.inspiration-gallery-close-icon:hover {
  color: #5E3F91;
  background: rgba(237, 226, 255, 0.94);
}

.inspiration-gallery-close-icon:active {
  transform: scale(0.96);
}

.inspiration-gallery-header-spacer {
  display:none;
}

.inspiration-gallery-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 54px 18px calc(16px + var(--mobile-safe-bottom));
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: transparent;
  position: relative;
}

.inspiration-gallery-hero { position:relative; text-align:center; margin:0 auto 18px; color:#63398F; }
.inspiration-gallery-hero h2 { margin:0; font-family:var(--font-display, Georgia, serif); font-size:clamp(34px,10vw,40px); font-weight:500; line-height:1; letter-spacing:-.025em; white-space:nowrap; }
.inspiration-gallery-hero p { margin:6px 0 0; display:flex; align-items:center; justify-content:center; gap:7px; color:#9576B2; font-size:13px; line-height:1.25; }
.inspiration-gallery-hero p span { width:22px; height:1px; background:#D9C8E9; }
.inspiration-hero-heart { margin:6px auto 0; width:92px; height:1px; background:#D9C8E9; color:#CAA9E8; line-height:0; font-size:16px; }
.inspiration-hero-heart::after { content:'♡'; position:absolute; right:9%; top:-6px; font-size:18px; }
.inspiration-gallery-product-name { color:#684198; font-size:15px; font-weight:500; line-height:1.2; }
.inspiration-gallery-tagline { position:relative; z-index:1; margin:18px 0 0; text-align:center; color:#76519A; font-size:13px; line-height:1.3; }

.inspiration-gallery-body::before,
.inspiration-gallery-body::after {
  position: absolute;
  left: -8%;
  width: 116%;
  pointer-events: none;
  content: '';
}

.inspiration-gallery-body::before {
  z-index: 0;
  top: 34%;
  height: 190px;
  background:
    radial-gradient(circle at 15% 45%, rgba(255,255,255,.72) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 18%, rgba(187,151,226,.38) 0 4px, transparent 5px),
    radial-gradient(ellipse at 50% 50%, rgba(230,215,252,.34), transparent 68%);
}

.inspiration-gallery-body::after {
  z-index: 0;
  bottom: -55px;
  height: 150px;
  border-radius: 52% 48% 0 0 / 30% 28% 0 0;
  background:
    radial-gradient(85% 80px at 20% 5%, transparent 67%, rgba(231,218,250,.58) 68% 77%, transparent 78%),
    radial-gradient(85% 95px at 70% 8%, transparent 63%, rgba(247,240,255,.9) 64% 76%, transparent 77%),
    rgba(252,248,255,.72);
}

.inspiration-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.inspiration-gallery-grid::before,
.inspiration-gallery-grid::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: rgba(150,112,196,.38);
  font-family: Georgia, serif;
}

.inspiration-gallery-grid::before {
  content: '✦  ♡';
  top: 4px;
  left: 5px;
  font-size: 18px;
  letter-spacing: 44px;
}

.inspiration-gallery-grid::after {
  content: '✧';
  right: 9%;
  bottom: 4%;
  font-size: 24px;
  color: rgba(255,255,255,.92);
}

.inspiration-gallery-item {
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #40304D;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transition: transform 0.2s ease;
}

.inspiration-gallery-item:hover {
  transform: translateY(-2px);
}

.inspiration-gallery-item img {
  width: min(100%, 148px);
  aspect-ratio: 1;
  justify-self: center;
  display: block;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 8px 10px rgba(75,42,88,.14));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(148, 113, 183, 0.12), inset 0 0 22px rgba(255,255,255,.76);
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.98), transparent 28%),
    radial-gradient(circle at 60% 68%, rgba(220,196,248,.44), transparent 67%),
    linear-gradient(145deg, rgba(246,239,255,.98), rgba(255,248,253,.96));
}

.inspiration-gallery-item--sweet-heart img {
  object-fit: cover;
  object-position: center;
}

.inspiration-gallery-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 1px 1px 0;
  min-height: 0;
  text-align: center;
}

.inspiration-gallery-style-name {
  color: #40304D;
  font-family: var(--font-ui-thai);
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(231, 216, 249, 0.72);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.inspiration-gallery-fallback {
  display: none;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  color: #9E8DAE;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  background: rgba(246, 242, 255, 0.86);
  border-radius: 16px;
}

.inspiration-gallery-item.is-missing .inspiration-gallery-caption {
  display: none;
}

.inspiration-gallery-item.is-missing .inspiration-gallery-fallback {
  display: flex;
  grid-row: 1;
}

.inspiration-gallery-footer {
  display: none;
}

.inspiration-gallery-close-btn {
  display: none;
}

@keyframes inspirationSheetUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes inspirationSheetDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes fadeOutBackdrop {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inspiration-gallery-modal.show,
  .inspiration-gallery-card,
  .inspiration-gallery-modal.is-closing,
  .inspiration-gallery-modal.is-closing .inspiration-gallery-card {
    animation: none;
  }
}

.modal-stone-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-gold-dark);
  margin-bottom: 20px;
}

.modal-action-btn {
  background-color: var(--color-navy);
  border: 1px solid var(--color-navy);
  color: var(--color-white);
  width: 100%;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.modal-action-btn:hover {
  background-color: var(--color-navy-dark);
  border-color: var(--color-navy-dark);
}

/* Custom Tooltip styling */
.tooltip-toast {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: var(--color-navy-dark);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 1000;
  white-space: nowrap;
}

.tooltip-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.crm-sandbox-card {
  background-color: var(--color-white);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  border: 1px dashed var(--color-gold);
  box-shadow: var(--shadow-sm);
}

.crm-sandbox-card h4 {
  font-size: 14px;
  color: var(--color-navy-dark);
  margin-bottom: 6px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-sandbox-card p {
  font-size: 11px;
  color: var(--color-navy-muted);
  margin-bottom: 12px;
}

.crm-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.crm-btn:hover {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: var(--color-navy-dark);
}

.payment-checkout-card {
  margin-top: 12px;
}

.stripe-checkout-btn {
  background: linear-gradient(135deg, #635bff 0%, #4b43d1 100%);
  color: #ffffff;
  border-color: #635bff;
  box-shadow: 0 10px 22px rgba(99, 91, 255, 0.18);
}

.stripe-checkout-btn:hover {
  background: linear-gradient(135deg, #564fe0 0%, #433cbd 100%);
  color: #ffffff;
}

/* Micro-interactions & Spring Transitions */
.stone-card {
  transition: var(--transition-smooth);
}

.stone-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 24px var(--color-lavender-shadow);
  border-color: var(--color-lavender-dark) !important;
}

/* Active Slot highlight glow */
.bead-node.placeholder.active {
  animation: velvetPulse 2s infinite;
}

@keyframes velvetPulse {
  0% {
    filter: drop-shadow(0 0 2px var(--color-velvet-red));
    opacity: 0.7;
  }

  50% {
    filter: drop-shadow(0 0 8px var(--color-velvet-red));
    opacity: 1;
  }

  100% {
    filter: drop-shadow(0 0 2px var(--color-velvet-red));
    opacity: 0.7;
  }
}

/* Soft entry for placed beads */
.bead-node.placed.newly-added {
  animation: beadSoftAppear 220ms ease-out forwards;
  transform-origin: center;
}

@keyframes beadSoftAppear {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Soft progress bar lavender glow */
.stepper-line-progress {
  box-shadow: 0 0 8px var(--color-lavender-dark);
}

/* Rounded items standardisation */
.footer-btn,
.bead-size-card,
.ctrl-btn {
  border-radius: 14px !important;
}

.brand-logo {
  font-family: var(--font-brand-latin) !important;
}

/* Active Bead highlight pulse */
@keyframes activeBeadPulse {
  0% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px var(--color-accent-velvet));
  }

  50% {
    filter: drop-shadow(0 0 7px var(--color-accent-velvet));
  }

  100% {
    stroke-dashoffset: 10;
    filter: drop-shadow(0 0 2px var(--color-accent-velvet));
  }
}

.active-bead-glow {
  animation: activeBeadPulse 2s linear infinite;
}

/* Real-time Dashboard info row & Mixed Space styles */
.canvas-info-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 6px 12px 0 12px;
  font-size: 11px;
  column-gap: 8px;
}

.wrist-context-label {
  font-weight: 600;
  color: var(--color-navy-light);
  background-color: var(--color-lavender-light);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--color-lavender);
}

#stepView3 .wrist-context-label {
  display: none;
}

.helper-tooltip {
  font-weight: 500;
  color: var(--color-velvet-red);
  background-color: var(--color-velvet-red-light);
  padding: 3px 10px;
  border-radius: 12px;
  animation: tooltipPulse 1.5s ease-in-out infinite;
  justify-self: start;
  white-space: nowrap;
}

.canvas-inline-price {
  justify-self: end;
  white-space: nowrap;
}

@keyframes tooltipPulse {
  0% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.8;
  }
}

.mixed-size-selector-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-white);
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid var(--color-gray-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

.mixed-space-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.mixed-space-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--color-navy-muted);
  font-weight: 600;
}

.mixed-space-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-velvet-red);
}

/* UAT mixed-size polish: restore the familiar vertical cards and refine the utility strip. */
#stepView2 .bead-size-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 7px;
}

#stepView2 .bead-size-card,
#stepView2 .bead-size-card-recommended {
  min-height: 84px;
  padding: 8px 10px;
  border-color: rgba(181, 169, 219, 0.24);
  background: var(--color-white);
  box-shadow: 0 6px 16px rgba(111, 85, 148, 0.08);
}

#stepView2 .bead-size-card[data-bead-size="mixed"] { order: 1; }
#stepView2 .bead-size-card[data-bead-size="10"] { order: 2; }
#stepView2 .bead-size-card[data-bead-size="6"] { order: 3; }
#stepView2 .bead-size-card[data-bead-size="4"] { order: 4; }

#stepView2 .bead-size-card.active,
#stepView2 .bead-size-card-recommended.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(251, 248, 255, 0.98));
  border-color: rgba(139, 0, 0, 0.18);
  box-shadow: 0 8px 18px rgba(181, 169, 219, 0.1);
}

#stepView2 .bead-size-content,
#stepView2 .bead-size-card-recommended .bead-size-content {
  grid-template-columns: 18px minmax(0, 1fr) 76px;
  min-height: 68px;
  gap: 8px;
}

/* Keep every Step 2 label on one shared text column; the mixed beads receive
   enough real width to remain left of the label instead of spilling into it. */
#stepView2 .bead-size-copy {
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 10px;
}

#stepView2 .bead-size-preview {
  min-width: 52px;
}

#stepView2 .bead-size-preview-mixed {
  justify-content: flex-start;
  gap: 2px;
  padding-top: 1px;
}

#stepView2 .bead-size-preview-mixed .bead-preview-circle-sm {
  width: 11px;
  height: 11px;
}

#stepView2 .bead-size-preview-mixed .bead-preview-circle-md {
  width: 15px;
  height: 15px;
}

#stepView2 .bead-size-preview-mixed .bead-preview-circle-lg {
  width: 19px;
  height: 19px;
}

#stepView2 .bead-size-card-mixed {
  border-color: rgba(216, 169, 59, 0.38);
  background: linear-gradient(135deg, #fffdf8, #fff 68%, #fbf6ea);
  box-shadow: 0 8px 18px rgba(184, 145, 51, 0.11);
}

#stepView2 .bead-size-card-mixed.active {
  border-color: rgba(181, 137, 36, 0.56);
  box-shadow: 0 9px 20px rgba(184, 145, 51, 0.16);
}

#stepView2 .bead-size-mixed-recommendation {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(216, 169, 59, 0.34);
  border-radius: 999px;
  background: rgba(255, 252, 241, 0.92);
  color: #a97817;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(154, 111, 22, 0.12);
}

#stepView2 .bead-size-hand-panel,
#stepView2 .bead-size-support-banner,
#stepView2 .bead-size-popular-badge,
#stepView2 .bead-size-featured-crown,
#stepView2 .bead-size-recommendation {
  display: none;
}

#stepView2 .bead-size-hand-panel,
#stepView2 .bead-size-card-recommended .bead-size-hand-panel {
  display: flex;
  height: 68px;
  border-radius: 13px;
  background: linear-gradient(145deg, #f7f0fb, #fff8fc);
  border-color: rgba(181, 169, 219, 0.18);
  box-shadow: none;
}

#stepView2 .bead-size-label,
#stepView2 .bead-size-card-recommended .bead-size-label {
  font-size: 21px;
  color: var(--color-navy-dark);
}

#stepView2 .bead-size-card.active .bead-size-label,
#stepView2 .bead-size-card-recommended.active .bead-size-label {
  color: var(--color-velvet-red);
}

#stepView2 .bead-size-details h4,
#stepView2 .bead-size-card-recommended .bead-size-details h4 {
  margin-top: 2px;
  color: var(--color-navy-dark);
  font-size: 11px;
  line-height: 1.25;
}

#stepView3 .mixed-size-selector-bar {
  display: grid;
  grid-template-columns: minmax(72px, 0.85fr) minmax(0, 2.15fr);
  min-height: 34px;
  margin: 0 0 3px;
  padding: 3px 7px 3px 10px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  background: rgba(239, 233, 248, 0.72);
  gap: 7px;
}

#stepView3 .catalog-type-filter + .mixed-size-selector-bar {
  margin-top: -5px;
}

/* The authored grid display must never override the semantic hidden state in fixed modes. */
#stepView3 .mixed-size-selector-bar[hidden] {
  display: none !important;
}

#stepView3 .mixed-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#stepView3 .mixed-toggles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

#stepView3 .mixed-toggle-btn {
  min-width: 0;
  min-height: 25px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  color: #67537b;
  font-size: 12px;
  line-height: 1;
}

#stepView3 .mixed-toggle-btn.active {
  background: #7962a8;
  border-color: transparent;
  color: var(--color-white);
  box-shadow: 0 2px 5px rgba(91, 62, 166, 0.18);
}

@media (max-width: 360px) {
  #stepView2 .bead-size-options {
    gap: 6px;
  }

  #stepView2 .bead-size-card,
  #stepView2 .bead-size-card-recommended {
    min-height: 80px;
    padding: 7px 8px;
  }

  #stepView2 .bead-size-content,
  #stepView2 .bead-size-card-recommended .bead-size-content {
    grid-template-columns: 17px minmax(0, 1fr) 70px;
    min-height: 64px;
    gap: 7px;
  }

  #stepView2 .bead-size-copy {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 8px;
  }

  #stepView2 .bead-size-preview {
    min-width: 48px;
  }

  #stepView2 .bead-size-hand-panel,
  #stepView2 .bead-size-card-recommended .bead-size-hand-panel {
    height: 64px;
  }

  #stepView3 .mixed-size-selector-bar {
    grid-template-columns: minmax(66px, 0.85fr) minmax(0, 2.15fr);
    padding: 3px 6px;
    gap: 5px;
  }

  #stepView3 .mixed-toggle-btn {
    padding-inline: 4px;
  }
}

#canvasPriceText {
  color: #047a3d !important;
}

/* Modal and Dialog Buttons Theme Sync */
#btnModalAdd,
#btnConfirmOK {
  background-color: var(--color-velvet-red) !important;
  border-color: var(--color-velvet-red) !important;
  color: var(--color-white) !important;
}

#btnModalAdd:hover,
#btnConfirmOK:hover {
  background-color: var(--color-velvet-red-dark) !important;
  border-color: var(--color-velvet-red-dark) !important;
}

#btnModalFillAll {
  background-color: var(--color-lavender-dark) !important;
  border-color: var(--color-lavender-dark) !important;
  color: var(--color-white) !important;
}

#btnModalFillAll:hover {
  background-color: var(--color-navy) !important;
  border-color: var(--color-navy) !important;
}

#btnConfirmCancel {
  background-color: var(--color-bg-cream) !important;
  border: 1px solid var(--color-gray-border) !important;
  color: var(--color-navy-muted) !important;
}

#btnConfirmCancel:hover {
  background-color: var(--color-gray-bg) !important;
  color: var(--color-navy-dark) !important;
}

.info-icon-btn {
  background-color: var(--color-lavender-light) !important;
  border: 1px solid var(--color-lavender-dark) !important;
  color: var(--color-navy-dark) !important;
}

.info-icon-btn:hover {
  background-color: var(--color-lavender-dark) !important;
  color: var(--color-white) !important;
}

/* Step 1 Redesign Style Adjustments */
.wrist-illustration-svg-horizontal {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 10px 0;
}

.wrist-visual-caption {
  font-size: 11px;
  color: #64748B;
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

.selected-size-display-card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #F8F9FA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0 20px 0;
  height: 64px;
}

.display-size-value {
  font-size: 32px;
  font-weight: 800;
  color: #1E293B;
  font-family: var(--font-ui-thai);
  letter-spacing: -0.5px;
}

.display-size-unit {
  position: absolute;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
}

/* Customize personal name input group & field background */
.name-input-group {
  margin-top: 16px;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.name-input-group .name-label {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
}

.name-input-group .name-input {
  background-color: #F8F9FA;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  height: 48px;
  padding: 12px 16px;
  font-size: 14px;
}

/* Landing Page Styles */
.landing-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #FBF9FF 0%, #F6F2FF 55%, #F2ECFF 100%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 24px 20px 24px;
  overflow-y: auto;
}

.landing-logo {
  font-family: var(--font-brand-latin);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--color-navy-dark);
  margin-top: 10px;
}

.orbital-container {
  width: 100%;
  max-width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.orbital-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.landing-text-content {
  text-align: center;
  margin: 15px 0;
}

.landing-title-text {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  color: #1E293B;
  font-family: var(--font-ui-thai);
}

.landing-subtitle-text {
  font-size: 13px;
  color: #64748B;
  margin-top: 8px;
  font-weight: 500;
}

.landing-cta-container {
  width: 100%;
  padding: 0 10px 15px 10px;
}

.landing-login-btn {
  width: 100%;
  background-color: #00C853;
  /* LINE Green */
  border: none;
  color: #FFFFFF;
  padding: 12px;
  border-radius: 9999px;
  /* Pill shape */
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 200, 83, 0.25);
  transition: all 0.3s ease;
  outline: none;
}

.landing-login-btn:hover {
  background-color: #00B24A;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 200, 83, 0.35);
}

.landing-login-btn:active {
  transform: translateY(0);
}

.landing-login-btn .btn-main-text {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.landing-login-btn .btn-sub-text {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 2px;
}

/* LIFF Loading Overlay */
.callback-bootstrap-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FBF9FF 0%, #F6F2FF 55%, #F2ECFF 100%);
}

.callback-bootstrap-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  color: var(--color-navy);
  text-align: center;
}

.callback-bootstrap-content p {
  margin: 0;
  font-family: var(--font-ui-thai);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

html.callback-bootstrap-hold .callback-bootstrap-overlay {
  display: flex;
}

html.callback-bootstrap-hold .landing-page,
html.callback-bootstrap-hold .app-container {
  visibility: hidden !important;
  pointer-events: none !important;
}

.liff-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #FBF9FF 0%, #F6F2FF 55%, #F2ECFF 100%);
  z-index: 1000;
  display: none;
  /* Managed dynamically in JS */
  align-items: center;
  justify-content: center;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pastel-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-lavender);
  border-top: 4px solid var(--color-lavender-dark);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
}

.loading-title {
  font-family: var(--font-ui-thai);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
}

.loading-title + .loading-text {
  margin-top: 4px;
  text-align: center;
  line-height: 1.5;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* CSS สำหรับรูปมือวัด (wrist-measuring-tape.jpg) */

.wrist-measuring-tape-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  object-fit: contain;
  background: linear-gradient(135deg, #f5f3fb 0%, #ffffff 100%);
  padding: 20px;
}

/* กรณี Mobile */
@media (max-width: 640px) {
  #stepView3 .designer-workspace {
    gap: 10px;
  }

  #stepView3 .canvas-card {
    padding: 6px 10px 8px;
    border-radius: 16px;
  }

  #stepView3 .canvas-stats-row {
    display: none;
  }

  #stepView3 .canvas-info-row {
    min-height: 34px;
    padding: 4px 2px 4px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 5px;
    font-size: 12px;
  }

  #stepView3 .wrist-context-label {
    display: none;
  }

  #stepView3 .helper-tooltip {
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--color-velvet-red);
    font-weight: 700;
    animation: none;
    white-space: nowrap;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92px;
    font-size: 11px;
  }

  #stepView3 .inspiration-gallery-btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: 10.5px;
    gap: 4px;
  }

  #stepView3 .inspiration-gallery-icon {
    width: 13px;
    height: 13px;
  }

  #stepView3 .canvas-inline-price {
    display: block;
    flex: 0 0 auto;
    color: #047a3d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    justify-self: end;
  }

  #stepView3 .canvas-container {
    width: 240px;
    height: 240px;
    margin: 0 0 2px;
  }

  #stepView3 #braceletSvg {
    width: 240px;
    height: 240px;
  }

  #stepView3 .canvas-controls-bar {
    margin-top: 2px;
    padding-top: 4px;
  }

  #stepView3 .ctrl-btn {
    min-height: 44px;
    padding: 6px 10px;
  }

  #stepView3 .catalog-type-filter {
    min-height: 53px;
    padding: 4px;
    border-radius: 17px;
  }

  #stepView3 .catalog-type-tab {
    gap: 2px;
    min-height: 45px;
    padding: 4px 6px 5px;
    border-radius: 14px;
    font-size: 13px;
  }

  #stepView3 .catalog-type-tab::after {
    bottom: 4px;
    height: 3px;
  }

  #stepView3 .catalog-type-icon {
    width: 18px;
    height: 18px;
  }

  #stepView3 .charm-amulet-icon {
    width: 19px;
    height: 19px;
  }

  #stepView3 .catalog-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #stepView3 .catalog-filters {
    gap: 6px;
    padding-bottom: 0;
  }

  .wrist-measuring-tape-image {
    max-width: 100%;
    padding: 16px;
  }

  #stepView1 .step-title {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 2px;
  }

  #stepView1 .step-subtitle {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  #stepView1 .wrist-visual-card {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 14px;
  }

  #stepView1 .wrist-measuring-tape-image {
    max-height: 150px;
    padding: 8px;
    border-radius: 14px;
  }

  #stepView1 .wrist-visual-caption {
    margin-top: 5px;
    line-height: 1.35;
  }

  #stepView1 .selected-size-display-card {
    height: 48px;
    padding: 8px 12px;
    margin: 8px 0;
  }

  #stepView1 .display-size-value {
    font-size: 26px;
  }

  #stepView1 .display-size-unit {
    right: 16px;
  }

  #stepView1 .name-input-group {
    margin-top: 10px;
  }

  #stepView1 .name-input-group .name-label {
    margin-bottom: 5px;
  }

  #stepView1 .name-input-group .name-input {
    height: 44px;
    padding: 10px 14px;
  }
}

/* Mobile-first landing frame override */
.landing-page {
  padding: 0;
  background: radial-gradient(circle at top, rgba(246, 242, 255, 0.92), rgba(10, 17, 40, 0.18));
}

.landing-page .landing-hero-panel {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.landing-page .landing-background {
  transform: none;
}

.landing-page .landing-overlay {
  background:
    linear-gradient(180deg, rgba(252, 248, 255, 0.18) 0%, rgba(252, 248, 255, 0.30) 45%, rgba(42, 27, 105, 0.18) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.24), transparent 42%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#stepView4 .bracelet-showcase-card {
  padding: 16px;
  border: 1px dashed var(--color-lavender-dark);
  background: linear-gradient(180deg, #fffef9 0%, #faf7ff 100%);
  box-shadow: var(--shadow-md);
}

#stepView4 .bracelet-showcase-frame {
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

#stepView4 .bracelet-showcase-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#stepView4 .bracelet-showcase-loading {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-navy-muted);
  letter-spacing: 0.2px;
}

@media (max-width: 640px) {
  #stepView4 .step-title {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 2px;
  }

  #stepView4 .summary-container {
    gap: 10px;
  }

  #stepView4 .summary-header {
    padding-bottom: 4px;
    border-bottom-width: 1px;
  }

  #stepView4 .summary-date {
    font-size: 11px;
    line-height: 1.25;
  }

  #stepView4 .specs-grid {
    gap: 6px;
  }

  #stepView4 .spec-box {
    padding: 6px 3px;
    border-radius: 10px;
  }

  #stepView4 .spec-box-label {
    font-size: 8px;
    margin-bottom: 2px;
  }

  #stepView4 .spec-box-value {
    font-size: 11px;
    line-height: 1.2;
  }

  #stepView4 .bracelet-showcase-card {
    padding: 8px;
    box-shadow: var(--shadow-sm);
  }

  #stepView4 .bracelet-showcase-frame {
    width: min(100%, 260px);
  }

  #stepView4 .billing-card {
    padding: 12px;
    border-radius: 14px;
  }

  #stepView4 .billing-title {
    padding-bottom: 6px;
    margin-bottom: 8px;
  }
}

.landing-page .landing-container {
  padding: 18px 18px 16px;
  justify-content: flex-start;
}

.landing-page .landing-header {
  margin: 0 0 18px;
  flex: 0 0 auto;
}

.landing-page .landing-logo {
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: 2px;
}

.landing-page .landing-tagline {
  font-size: 12px;
  letter-spacing: 1.6px;
}

.landing-page .landing-hero {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.landing-page .landing-hero-title {
  font-family: var(--font-thai-primary);
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.18;
  margin-bottom: 12px;
  letter-spacing: 0;
}

.landing-page .landing-hero-subtitle {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.landing-page .btn-start-customize {
  padding: 13px 34px;
  min-height: 48px;
}

.landing-page .landing-footer-text {
  margin-top: auto;
  padding-bottom: 0;
  font-size: 12px;
  line-height: 1.55;
}

.landing-page .landing-footer-text p {
  margin: 6px 0;
}

.landing-bracelet-container,
.landing-bracelet-image {
  display: none !important;
}

/* Step 1 modern minimal wrist measurement layout */
#stepView1 {
  color: #40304D;
  margin-top: 4px;
}

#stepView1.active {
  justify-content: flex-start;
}

#stepView1 .step1-measure-card {
  width: 100%;
  min-height: 0;
  padding: 10px 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#stepView1 .step1-heading-block {
  text-align: left;
  margin-bottom: 9px;
}

#stepView1 .step1-kicker {
  display: none;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: #9E8DAE;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#stepView1 .step-title {
  margin: 0;
  color: #40304D;
  font-family: var(--font-ui-thai);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

#stepView1 .step-subtitle {
  margin: 5px 0 0;
  color: #8E7FA1;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

#stepView1 .wrist-visual-card {
  position: relative;
  margin: 0 0 4px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#stepView1 .wrist-visual-card::before,
#stepView1 .wrist-visual-card::after {
  content: none;
}

#stepView1 .wrist-visual-card picture {
  display: block;
}

#stepView1 .wrist-measuring-tape-image {
  width: 100%;
  height: clamp(158px, 42vw, 196px);
  max-width: none;
  max-height: none;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  object-fit: cover;
  object-position: 47% 54%;
}

#stepView1 .wrist-picker-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 5px 0 0;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#stepView1 .wrist-picker-label {
  color: #9E8DAE;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

#stepView1 .wrist-wheel-control {
  width: 34px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8B0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

#stepView1 .wrist-wheel-control:hover {
  background: rgba(246, 242, 255, 0.92);
  color: #660000;
}

#stepView1 .wrist-wheel-control:disabled {
  opacity: 0.25;
  cursor: default;
}

#stepView1 .wrist-wheel-window {
  position: relative;
  width: min(100%, 210px);
  display: grid;
  grid-template-rows: 18px 26px 58px 26px 18px;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}

body.is-wrist-picker-dragging {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

#stepView1 .wrist-wheel-window.is-dragging {
  cursor: grabbing;
}

#stepView1 .wrist-wheel-window::before,
#stepView1 .wrist-wheel-window::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 223, 245, 0.95), transparent);
  pointer-events: none;
}

#stepView1 .wrist-wheel-window::before {
  top: 44px;
}

#stepView1 .wrist-wheel-window::after {
  bottom: 44px;
}

#stepView1 .wrist-wheel-value {
  min-width: 84px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: #9E8DAE;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
  opacity: 0.58;
}

#stepView1 .wrist-wheel-value.is-far {
  font-size: 14px;
  opacity: 0.28;
}

#stepView1 .wrist-wheel-value:disabled {
  cursor: default;
  opacity: 0;
}

#stepView1 .selected-size-display-card {
  display: inline-flex;
  position: relative;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  width: 150px;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card {
  animation: wristPickerNumberNudge 1.15s ease-in-out 0s 2;
  will-change: transform;
}

#stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::before,
#stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(181, 169, 219, 0.82), transparent);
  opacity: 0;
  pointer-events: none;
  animation: wristPickerSwipeHint 1.15s ease-in-out 0s 2;
}

#stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::before {
  left: -18px;
}

#stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::after {
  right: -18px;
  animation-delay: 0.12s;
}

#stepView1 .display-size-value {
  color: #40304D;
  font-family: var(--font-ui-thai);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

#stepView1 .display-size-unit {
  position: static;
  color: #8E7FA1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  #stepView1 {
    margin-top: 4px;
  }

  #stepView1 .step1-measure-card {
    padding: 10px 4px 0;
    border-radius: 0;
  }

  #stepView1 .step-title {
    font-size: 22px;
    margin: 0;
  }

  #stepView1 .step-subtitle {
    font-size: 12px;
    margin: 4px 0 0;
  }

  #stepView1 .step1-heading-block {
    margin-bottom: 7px;
  }

  #stepView1 .wrist-visual-card {
    margin-bottom: 3px;
    border-radius: 0;
  }

  #stepView1 .wrist-measuring-tape-image {
    height: clamp(156px, 41vw, 184px);
    padding: 0;
    border-radius: 16px;
  }

  #stepView1 .wrist-picker-card {
    padding: 4px 0 0;
    margin-bottom: 0;
    border-radius: 0;
  }

  #stepView1 .wrist-wheel-window {
    grid-template-rows: 17px 24px 56px 24px 17px;
  }

  #stepView1 .wrist-wheel-window::before {
    top: 41px;
  }

  #stepView1 .wrist-wheel-window::after {
    bottom: 41px;
  }

  #stepView1 .selected-size-display-card {
    height: 56px;
    padding: 0;
    margin: 0;
  }

  #stepView1 .display-size-value {
    font-size: 40px;
  }

  #stepView1 .display-size-unit {
    right: auto;
  }

}

@keyframes wristPickerNumberNudge {
  0%,
  100% {
    transform: translateY(0);
  }

  28% {
    transform: translateY(-5px);
  }

  58% {
    transform: translateY(6px);
  }

  82% {
    transform: translateY(-2px);
  }
}

@keyframes wristPickerSwipeHint {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateY(10px);
  }

  22% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.9;
    transform: translateY(-50%) translateY(-10px);
  }

  78% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card {
    animation: none;
    transform: none;
  }

  #stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::before,
  #stepView1 .wrist-wheel-window.show-swipe-hint .selected-size-display-card::after {
    opacity: 0.45;
    animation: none;
    transform: translateY(-50%);
  }
}