/*
 * Dark theme overrides for Administrate default views.
 * Scoped to .app-container (Administrate's top-level wrapper)
 * so these styles never bleed into non-admin pages.
 */

/* ── Base / Layout ─────────────────────────────────────────── */
.app-container {
  background-color: var(--color-background, #000);
}

/* ── Navigation sidebar (Administrate's built-in — hidden, we use our own header) */
.app-container .navigation {
  display: none;
}

/* ── Main content card ─────────────────────────────────────── */
.app-container .main-content {
  background-color: var(--color-surface, #0f0f0f);
  border: 1px solid var(--color-border, #2e2e2e);
  box-shadow: none;
  color: var(--color-foreground, #f8f8f8);
  min-width: 0;
  border-radius: 0.5rem;
}

.app-container .main-content__header {
  border-bottom-color: var(--color-border, #2e2e2e);
}

.app-container .main-content__page-title {
  color: var(--color-foreground, #f8f8f8);
  font-family: var(--font-display, 'Playfair Display', serif);
}

/* ── Tables ────────────────────────────────────────────────── */
.app-container table {
  color: var(--color-foreground, #f8f8f8);
}

.app-container table a {
  color: var(--color-foreground, #f8f8f8);
}

.app-container table a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container thead {
  background-color: var(--color-muted, #1c1c1c);
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container tr {
  border-bottom-color: var(--color-border, #2e2e2e);
}

.app-container tbody tr:hover {
  background-color: var(--color-muted, #1c1c1c) !important;
}

.app-container th {
  color: var(--color-muted-foreground, #b3b3b3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-container td {
  color: var(--color-foreground, #f8f8f8);
}

/* ── Attribute detail view (show pages) ────────────────────── */
.app-container .attribute-label {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .attribute-data {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .attribute-data a {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .attribute-data a:hover {
  text-decoration: underline;
}

.app-container .attribute--nested {
  border-color: var(--color-border, #2e2e2e);
  background-color: var(--color-muted, #1c1c1c);
}

.app-container dl {
  color: var(--color-foreground, #f8f8f8);
}

/* ── Fieldsets / legends ───────────────────────────────────── */
.app-container legend {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .field-unit--nested {
  border-color: var(--color-border, #2e2e2e);
}

.app-container .field-unit__label {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Forms ──────────────────────────────────────────────────── */
.app-container label {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container input,
.app-container select,
.app-container textarea {
  color: var(--color-foreground, #f8f8f8);
}

.app-container [type="color"],
.app-container [type="date"],
.app-container [type="datetime-local"],
.app-container [type="email"],
.app-container [type="month"],
.app-container [type="number"],
.app-container [type="password"],
.app-container [type="search"],
.app-container [type="tel"],
.app-container [type="text"],
.app-container [type="time"],
.app-container [type="url"],
.app-container [type="week"],
.app-container input:not([type]),
.app-container textarea {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

.app-container [type="color"]:hover,
.app-container [type="date"]:hover,
.app-container [type="datetime-local"]:hover,
.app-container [type="email"]:hover,
.app-container [type="month"]:hover,
.app-container [type="number"]:hover,
.app-container [type="password"]:hover,
.app-container [type="search"]:hover,
.app-container [type="tel"]:hover,
.app-container [type="text"]:hover,
.app-container [type="time"]:hover,
.app-container [type="url"]:hover,
.app-container [type="week"]:hover,
.app-container input:not([type]):hover,
.app-container textarea:hover {
  border-color: var(--color-muted-foreground, #b3b3b3) !important;
}

.app-container [type="color"]:focus,
.app-container [type="date"]:focus,
.app-container [type="datetime-local"]:focus,
.app-container [type="email"]:focus,
.app-container [type="month"]:focus,
.app-container [type="number"]:focus,
.app-container [type="password"]:focus,
.app-container [type="search"]:focus,
.app-container [type="tel"]:focus,
.app-container [type="text"]:focus,
.app-container [type="time"]:focus,
.app-container [type="url"]:focus,
.app-container [type="week"]:focus,
.app-container input:not([type]):focus,
.app-container textarea:focus {
  border-color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container select {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.app-container .button,
.app-container button[type="submit"],
.app-container input[type="submit"] {
  background-color: var(--color-accent, hsl(45, 95%, 55%));
  color: var(--color-accent-contrast, hsl(30, 20%, 10%));
  border: none;
  font-weight: 600;
}

.app-container .button:not(.link):hover,
.app-container button[type="submit"]:hover,
.app-container input[type="submit"]:hover {
  background-color: var(--color-accent-secondary, hsl(35, 85%, 52%)) !important;
  color: var(--color-accent-contrast, hsl(30, 20%, 10%)) !important;
  filter: brightness(1.07);
}

.app-container .button--danger {
  background-color: #991b1b !important;
  color: #fca5a5 !important;
  border: 1px solid #7f1d1d !important;
}

.app-container .button--danger:not(.link):hover {
  background-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

.app-container .button--alt {
  background-color: transparent;
  border: 1px solid var(--color-accent, hsl(45, 95%, 55%));
  color: var(--color-accent, hsl(45, 95%, 55%));
}

/* ── Search ────────────────────────────────────────────────── */
.app-container .search__input {
  background-color: var(--color-background, #000) !important;
  border-color: var(--color-border, #2e2e2e) !important;
  color: var(--color-foreground, #f8f8f8) !important;
}

.app-container .search__input:focus {
  border-color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container .search__eyeglass-icon,
.app-container .search__clear-icon {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Pagination ────────────────────────────────────────────── */
.app-container .pagination {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .pagination a {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .pagination a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .pagination .current {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

/* ── Flashes ───────────────────────────────────────────────── */
.app-container .flashes {
  padding: 0 2rem;
}

.app-container .flashes__item {
  border-radius: 0.375rem;
}

/* ── Cell / sort labels ────────────────────────────────────── */
.app-container .cell-label a {
  color: var(--color-muted-foreground, #b3b3b3);
}

.app-container .cell-label a:hover {
  color: var(--color-accent, hsl(45, 95%, 55%)) !important;
}

.app-container .cell-label__sort-indicator svg {
  color: var(--color-muted-foreground, #b3b3b3);
}

/* ── Nested HasMany / BelongsTo tables ─────────────────────── */
.app-container .attribute-data table {
  border: 1px solid var(--color-border, #2e2e2e);
  border-radius: 0.375rem;
  overflow: hidden;
}

.app-container .attribute-data thead {
  background-color: var(--color-muted, #1c1c1c);
}

/* ── Links ─────────────────────────────────────────────────── */
.app-container .main-content a {
  color: var(--color-accent, hsl(45, 95%, 55%));
}

.app-container .main-content a:hover {
  text-decoration: underline;
}

/* Table row links — white text, gold on hover */
.app-container .main-content table td a.action-show {
  color: var(--color-foreground, #f8f8f8);
}

.app-container .main-content table td a.action-show:hover {
  color: var(--color-accent, hsl(45, 95%, 55%));
  text-decoration: none;
}

/* Action buttons in table rows */
.app-container .main-content table td .button,
.app-container .main-content table td a.button {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
/* Edit Session Chat UI */

#chat-messages {
  scroll-behavior: smooth;
}

#chat-messages::-webkit-scrollbar {
  width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

#chat-messages::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Message animations */
.edit-message {
  animation: editMessageSlideIn 0.3s ease-out;
}

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

/* Loading placeholder pulse */
#loading-placeholder p {
  animation: editPulse 1.5s ease-in-out infinite;
}

@keyframes editPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* ==========================================================================
   GEMSTONE TYPE SELECTOR
   Visual button grid for selecting gemstone types
   ========================================================================== */

/* ---------------------------------------------------------------------
   CSS Variables - Gemstone Colors
   Each gemstone has a base color and brightened (hover) variant
   --------------------------------------------------------------------- */
:root {
  /* Diamonds */
  --gem-white-diamond: #E8E8E8;
  --gem-white-diamond-bright: #FFFFFF;
  --gem-pink-diamond: #F4B8C5;
  --gem-pink-diamond-bright: #FFCDD8;
  --gem-yellow-diamond: #F9E076;
  --gem-yellow-diamond-bright: #FFEC99;
  --gem-blue-diamond: #6CA0DC;
  --gem-blue-diamond-bright: #8FBFEF;
  --gem-black-diamond: #2C2C2C;
  --gem-black-diamond-bright: #4A4A4A;
  --gem-green-diamond: #7AC74F;
  --gem-green-diamond-bright: #9AE068;
  --gem-orange-diamond: #F5A623;
  --gem-orange-diamond-bright: #FFBE4D;
  --gem-champagne-diamond: #C9A66B;
  --gem-champagne-diamond-bright: #E0C08A;
  --gem-salt-pepper-diamond: #8A8D8F;
  --gem-salt-pepper-diamond-bright: #A8ABAE;

  /* Sapphires */
  --gem-blue-sapphire: #0F52BA;
  --gem-blue-sapphire-bright: #3A7DE8;
  --gem-teal-sapphire: #367588;
  --gem-teal-sapphire-bright: #4A9BB2;
  --gem-green-sapphire: #4A9C5D;
  --gem-green-sapphire-bright: #66BE7A;
  --gem-yellow-sapphire: #E5B73B;
  --gem-yellow-sapphire-bright: #F5D060;
  --gem-pink-sapphire: #E75480;
  --gem-pink-sapphire-bright: #FF7AA3;
  --gem-purple-sapphire: #7851A9;
  --gem-purple-sapphire-bright: #9B70D1;
  --gem-padparadscha-sapphire: #E89078;
  --gem-padparadscha-sapphire-bright: #FFAB95;
  --gem-orange-sapphire: #E86A33;
  --gem-orange-sapphire-bright: #FF8A55;
  --gem-parti-sapphire: #5B8C5A;
  --gem-parti-sapphire-bright: #78B377;

  /* Other Gemstones */
  --gem-ruby: #E0115F;
  --gem-ruby-bright: #FF3A7F;
  --gem-emerald: #50C878;
  --gem-emerald-bright: #70E898;
  --gem-aquamarine: #7FDBDB;
  --gem-aquamarine-bright: #A0F0F0;
  --gem-morganite: #E8B4B8;
  --gem-morganite-bright: #FFCDD0;
  --gem-blue-topaz: #4FC3F7;
  --gem-blue-topaz-bright: #7DD8FF;

  /* Pearl (future) */
  --gem-pearl: #F5F5DC;
  --gem-pearl-bright: #FFFFF0;
}

/* ---------------------------------------------------------------------
   Category Layout
   --------------------------------------------------------------------- */
.gemstone-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gemstone-category {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gemstone-category-heading {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone-btn-text);
  padding-left: 2px;
}

/* ---------------------------------------------------------------------
   Grid Layout - auto-fill so the column count follows the CONTAINER
   width, not the viewport. minmax(88px, 1fr) gives every chip a hard
   88px floor (room for the icon, a two-line label, and a >=44px tap
   target) and simply wraps to fewer columns when the designer panel is
   slim. The old fixed repeat(6, 1fr) pinned six tracks regardless of
   panel width; in a narrow surface those 1fr (= minmax(auto, 1fr))
   tracks collapsed toward their min-content and crushed the chips,
   clamping labels to "SALT & PEPP…". More chips per row on wide
   surfaces, fewer on mobile - with no viewport-coupled counts to fight.
   --------------------------------------------------------------------- */
.gemstone-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

/* Small screens: tighten the gutters; auto-fill handles the column count. */
@media (max-width: 640px) {
  .gemstone-selector-grid {
    gap: 6px;
  }

  .gemstone-category {
    gap: 4px;
  }

  .gemstone-category-heading {
    font-size: 10px;
  }
}

/* Phones: tighter gutters still; the 88px floor keeps chips ~3-across
   on ~320px without dropping below a comfortable tap target. */
@media (max-width: 480px) {
  .gemstone-selector-grid {
    gap: 6px;
  }

  .gemstone-category-heading {
    font-size: 9px;
  }
}

/* ---------------------------------------------------------------------
   Base Button Styles - 3D Tactile Raised Effect (matches stone-btn)
   --------------------------------------------------------------------- */
.gemstone-btn {
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px 10px;
  aspect-ratio: 1;
  min-height: 70px;

  /* Reset */
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  /* 3D Raised Surface */
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  border-radius: 8px;

  /* Layered shadows for raised effect */
  box-shadow:
    /* Outer depth shadows */
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    /* Bottom dark edge */
    inset 0 -2px 3px var(--stone-btn-shadow),
    /* Top light edge */
    inset 0 2px 3px var(--stone-btn-highlight),
    /* Left light edge */
    inset 2px 0 3px var(--stone-btn-highlight),
    /* Right dark edge */
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    /* Inner shadow for depth */
    inset 0 0 12px var(--stone-btn-shadow-inner);

  /* Only animate transform (GPU-composited); box-shadow snaps to avoid repaints */
  transition: transform 0.1s ease;
}

/* Compact cells on phones — the 70px minimum plus generous padding left
   almost no room for icon + two-line label at 4 columns */
@media (max-width: 480px) {
  .gemstone-btn {
    min-height: 58px;
    padding: 8px 2px 6px;
    gap: 4px;
  }
}

/* Subtle top highlight for extra depth */
.gemstone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* Hide the radio input visually */
.gemstone-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------------
   Hover State - Slightly more raised
   --------------------------------------------------------------------- */
.gemstone-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);

  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   Active/Pressed State - Pushed in effect
   --------------------------------------------------------------------- */
.gemstone-btn:active {
  transform: translateY(2px);

  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

/* ---------------------------------------------------------------------
   Icon Wrapper & SVGs (matches stone-btn sizing)
   --------------------------------------------------------------------- */
.gemstone-icon-wrapper {
  position: relative;
  /* Fluid on phones, capped at the original 36px on desktop — a fixed 36px
     icon dominated the ~58-70px cells at small viewports */
  width: clamp(22px, 7vw, 36px);
  height: clamp(22px, 7vw, 36px);
}

.gemstone-svg-glow,
.gemstone-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Glow layer - behind, hidden by default */
.gemstone-svg-glow {
  z-index: 1;
  opacity: 0;
}

/* Main SVG - colored by gemstone */
.gemstone-svg-main {
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Label
   --------------------------------------------------------------------- */
.gemstone-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  max-width: 100%;
  /* Two-line clamp instead of single-line ellipsis so long names
     ("Padparadscha", "Salt & Pepper") read fully; reserved height keeps
     the grid rows uniform */
  white-space: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

@media (max-width: 480px) {
  .gemstone-label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }
}

/* ---------------------------------------------------------------------
   Base Selected State - Pushed in with glow (gemstone colors override)
   --------------------------------------------------------------------- */
.gemstone-btn.selected {
  transform: translateY(2px);

  /* Sunken surface */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
}

.gemstone-btn.selected .gemstone-label {
  color: var(--stone-btn-icon-selected);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}

/* ---------------------------------------------------------------------
   GEMSTONE COLOR CLASSES
   Default state: SVG = gemstone color, label = grey
   Hover state: SVG = brightened color, label = brightened color
   Selected state: SVG = white with colored glow, label = white
   --------------------------------------------------------------------- */

/* === DIAMONDS === */

/* White Diamond */
.gemstone-btn.white-diamond .gemstone-svg-main { color: var(--gem-white-diamond); }
.gemstone-btn.white-diamond .gemstone-svg-glow { color: var(--gem-white-diamond); }
.gemstone-btn.white-diamond:hover .gemstone-svg-main { color: var(--gem-white-diamond-bright); }
.gemstone-btn.white-diamond:hover .gemstone-label { color: var(--gem-white-diamond-bright); }
.gemstone-btn.white-diamond.selected {
  outline: 2px solid var(--gem-white-diamond);
  outline-offset: -2px;
  box-shadow:
    /* Gemstone glow */
    0 0 20px rgba(232, 232, 232, 0.4),
    0 0 40px rgba(232, 232, 232, 0.2),
    /* Pressed-in shadows */
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px rgba(232, 232, 232, 0.15);
}
.gemstone-btn.white-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.white-diamond.selected .gemstone-svg-glow {
  opacity: 1;
  color: var(--gem-white-diamond);
  filter: drop-shadow(0 0 6px var(--gem-white-diamond))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.8))
          drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
}

/* Pink Diamond */
.gemstone-btn.pink-diamond .gemstone-svg-main { color: var(--gem-pink-diamond); }
.gemstone-btn.pink-diamond .gemstone-svg-glow { color: var(--gem-pink-diamond); }
.gemstone-btn.pink-diamond:hover .gemstone-svg-main { color: var(--gem-pink-diamond-bright); }
.gemstone-btn.pink-diamond:hover .gemstone-label { color: var(--gem-pink-diamond-bright); }
.gemstone-btn.pink-diamond.selected {
  border-color: var(--gem-pink-diamond);
  box-shadow: 0 0 15px rgba(244, 184, 197, 0.5), 0 0 30px rgba(244, 184, 197, 0.25), inset 0 0 10px rgba(244, 184, 197, 0.15);
}
.gemstone-btn.pink-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pink-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pink-diamond); }

/* Yellow Diamond */
.gemstone-btn.yellow-diamond .gemstone-svg-main { color: var(--gem-yellow-diamond); }
.gemstone-btn.yellow-diamond .gemstone-svg-glow { color: var(--gem-yellow-diamond); }
.gemstone-btn.yellow-diamond:hover .gemstone-svg-main { color: var(--gem-yellow-diamond-bright); }
.gemstone-btn.yellow-diamond:hover .gemstone-label { color: var(--gem-yellow-diamond-bright); }
.gemstone-btn.yellow-diamond.selected {
  border-color: var(--gem-yellow-diamond);
  box-shadow: 0 0 15px rgba(249, 224, 118, 0.5), 0 0 30px rgba(249, 224, 118, 0.25), inset 0 0 10px rgba(249, 224, 118, 0.15);
}
.gemstone-btn.yellow-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.yellow-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-yellow-diamond); }

/* Blue Diamond */
.gemstone-btn.blue-diamond .gemstone-svg-main { color: var(--gem-blue-diamond); }
.gemstone-btn.blue-diamond .gemstone-svg-glow { color: var(--gem-blue-diamond); }
.gemstone-btn.blue-diamond:hover .gemstone-svg-main { color: var(--gem-blue-diamond-bright); }
.gemstone-btn.blue-diamond:hover .gemstone-label { color: var(--gem-blue-diamond-bright); }
.gemstone-btn.blue-diamond.selected {
  border-color: var(--gem-blue-diamond);
  box-shadow: 0 0 15px rgba(108, 160, 220, 0.5), 0 0 30px rgba(108, 160, 220, 0.25), inset 0 0 10px rgba(108, 160, 220, 0.15);
}
.gemstone-btn.blue-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-diamond); }

/* Black Diamond */
.gemstone-btn.black-diamond .gemstone-svg-main { color: var(--gem-black-diamond); }
.gemstone-btn.black-diamond .gemstone-svg-glow { color: var(--gem-black-diamond); }
.gemstone-btn.black-diamond:hover .gemstone-svg-main { color: var(--gem-black-diamond-bright); }
.gemstone-btn.black-diamond:hover .gemstone-label { color: var(--gem-black-diamond-bright); }
.gemstone-btn.black-diamond.selected {
  border-color: var(--gem-black-diamond-bright);
  box-shadow: 0 0 15px rgba(74, 74, 74, 0.5), 0 0 30px rgba(74, 74, 74, 0.25), inset 0 0 10px rgba(74, 74, 74, 0.15);
}
.gemstone-btn.black-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.black-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-black-diamond-bright); }

/* Green Diamond */
.gemstone-btn.green-diamond .gemstone-svg-main { color: var(--gem-green-diamond); }
.gemstone-btn.green-diamond .gemstone-svg-glow { color: var(--gem-green-diamond); }
.gemstone-btn.green-diamond:hover .gemstone-svg-main { color: var(--gem-green-diamond-bright); }
.gemstone-btn.green-diamond:hover .gemstone-label { color: var(--gem-green-diamond-bright); }
.gemstone-btn.green-diamond.selected {
  border-color: var(--gem-green-diamond);
  box-shadow: 0 0 15px rgba(122, 199, 79, 0.5), 0 0 30px rgba(122, 199, 79, 0.25), inset 0 0 10px rgba(122, 199, 79, 0.15);
}
.gemstone-btn.green-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.green-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-green-diamond); }

/* Orange Diamond */
.gemstone-btn.orange-diamond .gemstone-svg-main { color: var(--gem-orange-diamond); }
.gemstone-btn.orange-diamond .gemstone-svg-glow { color: var(--gem-orange-diamond); }
.gemstone-btn.orange-diamond:hover .gemstone-svg-main { color: var(--gem-orange-diamond-bright); }
.gemstone-btn.orange-diamond:hover .gemstone-label { color: var(--gem-orange-diamond-bright); }
.gemstone-btn.orange-diamond.selected {
  border-color: var(--gem-orange-diamond);
  box-shadow: 0 0 15px rgba(245, 166, 35, 0.5), 0 0 30px rgba(245, 166, 35, 0.25), inset 0 0 10px rgba(245, 166, 35, 0.15);
}
.gemstone-btn.orange-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.orange-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-orange-diamond); }

/* Champagne Diamond */
.gemstone-btn.champagne-diamond .gemstone-svg-main { color: var(--gem-champagne-diamond); }
.gemstone-btn.champagne-diamond .gemstone-svg-glow { color: var(--gem-champagne-diamond); }
.gemstone-btn.champagne-diamond:hover .gemstone-svg-main { color: var(--gem-champagne-diamond-bright); }
.gemstone-btn.champagne-diamond:hover .gemstone-label { color: var(--gem-champagne-diamond-bright); }
.gemstone-btn.champagne-diamond.selected {
  border-color: var(--gem-champagne-diamond);
  box-shadow: 0 0 15px rgba(201, 166, 107, 0.5), 0 0 30px rgba(201, 166, 107, 0.25), inset 0 0 10px rgba(201, 166, 107, 0.15);
}
.gemstone-btn.champagne-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.champagne-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-champagne-diamond); }

/* Salt & Pepper Diamond */
.gemstone-btn.salt-pepper-diamond .gemstone-svg-main { color: var(--gem-salt-pepper-diamond); }
.gemstone-btn.salt-pepper-diamond .gemstone-svg-glow { color: var(--gem-salt-pepper-diamond); }
.gemstone-btn.salt-pepper-diamond:hover .gemstone-svg-main { color: var(--gem-salt-pepper-diamond-bright); }
.gemstone-btn.salt-pepper-diamond:hover .gemstone-label { color: var(--gem-salt-pepper-diamond-bright); }
.gemstone-btn.salt-pepper-diamond.selected {
  border-color: var(--gem-salt-pepper-diamond);
  box-shadow: 0 0 15px rgba(138, 141, 143, 0.5), 0 0 30px rgba(138, 141, 143, 0.25), inset 0 0 10px rgba(138, 141, 143, 0.15);
}
.gemstone-btn.salt-pepper-diamond.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.salt-pepper-diamond.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-salt-pepper-diamond); }


/* === SAPPHIRES === */

/* Blue Sapphire */
.gemstone-btn.blue-sapphire .gemstone-svg-main { color: var(--gem-blue-sapphire); }
.gemstone-btn.blue-sapphire .gemstone-svg-glow { color: var(--gem-blue-sapphire); }
.gemstone-btn.blue-sapphire:hover .gemstone-svg-main { color: var(--gem-blue-sapphire-bright); }
.gemstone-btn.blue-sapphire:hover .gemstone-label { color: var(--gem-blue-sapphire-bright); }
.gemstone-btn.blue-sapphire.selected {
  border-color: var(--gem-blue-sapphire);
  box-shadow: 0 0 15px rgba(15, 82, 186, 0.5), 0 0 30px rgba(15, 82, 186, 0.3), inset 0 0 10px rgba(15, 82, 186, 0.2);
}
.gemstone-btn.blue-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-sapphire); }

/* Teal Sapphire */
.gemstone-btn.teal-sapphire .gemstone-svg-main { color: var(--gem-teal-sapphire); }
.gemstone-btn.teal-sapphire .gemstone-svg-glow { color: var(--gem-teal-sapphire); }
.gemstone-btn.teal-sapphire:hover .gemstone-svg-main { color: var(--gem-teal-sapphire-bright); }
.gemstone-btn.teal-sapphire:hover .gemstone-label { color: var(--gem-teal-sapphire-bright); }
.gemstone-btn.teal-sapphire.selected {
  border-color: var(--gem-teal-sapphire);
  box-shadow: 0 0 15px rgba(54, 117, 136, 0.5), 0 0 30px rgba(54, 117, 136, 0.3), inset 0 0 10px rgba(54, 117, 136, 0.2);
}
.gemstone-btn.teal-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.teal-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-teal-sapphire); }

/* Green Sapphire */
.gemstone-btn.green-sapphire .gemstone-svg-main { color: var(--gem-green-sapphire); }
.gemstone-btn.green-sapphire .gemstone-svg-glow { color: var(--gem-green-sapphire); }
.gemstone-btn.green-sapphire:hover .gemstone-svg-main { color: var(--gem-green-sapphire-bright); }
.gemstone-btn.green-sapphire:hover .gemstone-label { color: var(--gem-green-sapphire-bright); }
.gemstone-btn.green-sapphire.selected {
  border-color: var(--gem-green-sapphire);
  box-shadow: 0 0 15px rgba(74, 156, 93, 0.5), 0 0 30px rgba(74, 156, 93, 0.3), inset 0 0 10px rgba(74, 156, 93, 0.2);
}
.gemstone-btn.green-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.green-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-green-sapphire); }

/* Yellow Sapphire */
.gemstone-btn.yellow-sapphire .gemstone-svg-main { color: var(--gem-yellow-sapphire); }
.gemstone-btn.yellow-sapphire .gemstone-svg-glow { color: var(--gem-yellow-sapphire); }
.gemstone-btn.yellow-sapphire:hover .gemstone-svg-main { color: var(--gem-yellow-sapphire-bright); }
.gemstone-btn.yellow-sapphire:hover .gemstone-label { color: var(--gem-yellow-sapphire-bright); }
.gemstone-btn.yellow-sapphire.selected {
  border-color: var(--gem-yellow-sapphire);
  box-shadow: 0 0 15px rgba(229, 183, 59, 0.5), 0 0 30px rgba(229, 183, 59, 0.3), inset 0 0 10px rgba(229, 183, 59, 0.2);
}
.gemstone-btn.yellow-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.yellow-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-yellow-sapphire); }

/* Pink Sapphire */
.gemstone-btn.pink-sapphire .gemstone-svg-main { color: var(--gem-pink-sapphire); }
.gemstone-btn.pink-sapphire .gemstone-svg-glow { color: var(--gem-pink-sapphire); }
.gemstone-btn.pink-sapphire:hover .gemstone-svg-main { color: var(--gem-pink-sapphire-bright); }
.gemstone-btn.pink-sapphire:hover .gemstone-label { color: var(--gem-pink-sapphire-bright); }
.gemstone-btn.pink-sapphire.selected {
  border-color: var(--gem-pink-sapphire);
  box-shadow: 0 0 15px rgba(231, 84, 128, 0.5), 0 0 30px rgba(231, 84, 128, 0.3), inset 0 0 10px rgba(231, 84, 128, 0.2);
}
.gemstone-btn.pink-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pink-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pink-sapphire); }

/* Purple Sapphire */
.gemstone-btn.purple-sapphire .gemstone-svg-main { color: var(--gem-purple-sapphire); }
.gemstone-btn.purple-sapphire .gemstone-svg-glow { color: var(--gem-purple-sapphire); }
.gemstone-btn.purple-sapphire:hover .gemstone-svg-main { color: var(--gem-purple-sapphire-bright); }
.gemstone-btn.purple-sapphire:hover .gemstone-label { color: var(--gem-purple-sapphire-bright); }
.gemstone-btn.purple-sapphire.selected {
  border-color: var(--gem-purple-sapphire);
  box-shadow: 0 0 15px rgba(120, 81, 169, 0.5), 0 0 30px rgba(120, 81, 169, 0.3), inset 0 0 10px rgba(120, 81, 169, 0.2);
}
.gemstone-btn.purple-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.purple-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-purple-sapphire); }

/* Padparadscha Sapphire */
.gemstone-btn.padparadscha-sapphire .gemstone-svg-main { color: var(--gem-padparadscha-sapphire); }
.gemstone-btn.padparadscha-sapphire .gemstone-svg-glow { color: var(--gem-padparadscha-sapphire); }
.gemstone-btn.padparadscha-sapphire:hover .gemstone-svg-main { color: var(--gem-padparadscha-sapphire-bright); }
.gemstone-btn.padparadscha-sapphire:hover .gemstone-label { color: var(--gem-padparadscha-sapphire-bright); }
.gemstone-btn.padparadscha-sapphire.selected {
  border-color: var(--gem-padparadscha-sapphire);
  box-shadow: 0 0 15px rgba(232, 144, 120, 0.5), 0 0 30px rgba(232, 144, 120, 0.3), inset 0 0 10px rgba(232, 144, 120, 0.2);
}
.gemstone-btn.padparadscha-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.padparadscha-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-padparadscha-sapphire); }

/* Orange Sapphire */
.gemstone-btn.orange-sapphire .gemstone-svg-main { color: var(--gem-orange-sapphire); }
.gemstone-btn.orange-sapphire .gemstone-svg-glow { color: var(--gem-orange-sapphire); }
.gemstone-btn.orange-sapphire:hover .gemstone-svg-main { color: var(--gem-orange-sapphire-bright); }
.gemstone-btn.orange-sapphire:hover .gemstone-label { color: var(--gem-orange-sapphire-bright); }
.gemstone-btn.orange-sapphire.selected {
  border-color: var(--gem-orange-sapphire);
  box-shadow: 0 0 15px rgba(232, 106, 51, 0.5), 0 0 30px rgba(232, 106, 51, 0.3), inset 0 0 10px rgba(232, 106, 51, 0.2);
}
.gemstone-btn.orange-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.orange-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-orange-sapphire); }

/* Parti Sapphire */
.gemstone-btn.parti-sapphire .gemstone-svg-main { color: var(--gem-parti-sapphire); }
.gemstone-btn.parti-sapphire .gemstone-svg-glow { color: var(--gem-parti-sapphire); }
.gemstone-btn.parti-sapphire:hover .gemstone-svg-main { color: var(--gem-parti-sapphire-bright); }
.gemstone-btn.parti-sapphire:hover .gemstone-label { color: var(--gem-parti-sapphire-bright); }
.gemstone-btn.parti-sapphire.selected {
  border-color: var(--gem-parti-sapphire);
  box-shadow: 0 0 15px rgba(91, 140, 90, 0.5), 0 0 30px rgba(91, 140, 90, 0.3), inset 0 0 10px rgba(91, 140, 90, 0.2);
}
.gemstone-btn.parti-sapphire.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.parti-sapphire.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-parti-sapphire); }


/* === OTHER GEMSTONES === */

/* Ruby */
.gemstone-btn.ruby .gemstone-svg-main { color: var(--gem-ruby); }
.gemstone-btn.ruby .gemstone-svg-glow { color: var(--gem-ruby); }
.gemstone-btn.ruby:hover .gemstone-svg-main { color: var(--gem-ruby-bright); }
.gemstone-btn.ruby:hover .gemstone-label { color: var(--gem-ruby-bright); }
.gemstone-btn.ruby.selected {
  border-color: var(--gem-ruby);
  box-shadow: 0 0 15px rgba(224, 17, 95, 0.5), 0 0 30px rgba(224, 17, 95, 0.3), inset 0 0 10px rgba(224, 17, 95, 0.2);
}
.gemstone-btn.ruby.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.ruby.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-ruby); }

/* Emerald */
.gemstone-btn.emerald .gemstone-svg-main { color: var(--gem-emerald); }
.gemstone-btn.emerald .gemstone-svg-glow { color: var(--gem-emerald); }
.gemstone-btn.emerald:hover .gemstone-svg-main { color: var(--gem-emerald-bright); }
.gemstone-btn.emerald:hover .gemstone-label { color: var(--gem-emerald-bright); }
.gemstone-btn.emerald.selected {
  border-color: var(--gem-emerald);
  box-shadow: 0 0 15px rgba(80, 200, 120, 0.5), 0 0 30px rgba(80, 200, 120, 0.3), inset 0 0 10px rgba(80, 200, 120, 0.2);
}
.gemstone-btn.emerald.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.emerald.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-emerald); }

/* Aquamarine */
.gemstone-btn.aquamarine .gemstone-svg-main { color: var(--gem-aquamarine); }
.gemstone-btn.aquamarine .gemstone-svg-glow { color: var(--gem-aquamarine); }
.gemstone-btn.aquamarine:hover .gemstone-svg-main { color: var(--gem-aquamarine-bright); }
.gemstone-btn.aquamarine:hover .gemstone-label { color: var(--gem-aquamarine-bright); }
.gemstone-btn.aquamarine.selected {
  border-color: var(--gem-aquamarine);
  box-shadow: 0 0 15px rgba(127, 219, 219, 0.5), 0 0 30px rgba(127, 219, 219, 0.3), inset 0 0 10px rgba(127, 219, 219, 0.2);
}
.gemstone-btn.aquamarine.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.aquamarine.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-aquamarine); }

/* Morganite */
.gemstone-btn.morganite .gemstone-svg-main { color: var(--gem-morganite); }
.gemstone-btn.morganite .gemstone-svg-glow { color: var(--gem-morganite); }
.gemstone-btn.morganite:hover .gemstone-svg-main { color: var(--gem-morganite-bright); }
.gemstone-btn.morganite:hover .gemstone-label { color: var(--gem-morganite-bright); }
.gemstone-btn.morganite.selected {
  border-color: var(--gem-morganite);
  box-shadow: 0 0 15px rgba(232, 180, 184, 0.5), 0 0 30px rgba(232, 180, 184, 0.3), inset 0 0 10px rgba(232, 180, 184, 0.2);
}
.gemstone-btn.morganite.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.morganite.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-morganite); }

/* Blue Topaz */
.gemstone-btn.blue-topaz .gemstone-svg-main { color: var(--gem-blue-topaz); }
.gemstone-btn.blue-topaz .gemstone-svg-glow { color: var(--gem-blue-topaz); }
.gemstone-btn.blue-topaz:hover .gemstone-svg-main { color: var(--gem-blue-topaz-bright); }
.gemstone-btn.blue-topaz:hover .gemstone-label { color: var(--gem-blue-topaz-bright); }
.gemstone-btn.blue-topaz.selected {
  border-color: var(--gem-blue-topaz);
  box-shadow: 0 0 15px rgba(79, 195, 247, 0.5), 0 0 30px rgba(79, 195, 247, 0.3), inset 0 0 10px rgba(79, 195, 247, 0.2);
}
.gemstone-btn.blue-topaz.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.blue-topaz.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-blue-topaz); }

/* Pearl (future - uses special SVG) */
.gemstone-btn.pearl .gemstone-svg-main { color: var(--gem-pearl); }
.gemstone-btn.pearl .gemstone-svg-glow { color: var(--gem-pearl); }
.gemstone-btn.pearl:hover .gemstone-svg-main { color: var(--gem-pearl-bright); }
.gemstone-btn.pearl:hover .gemstone-label { color: var(--gem-pearl-bright); }
.gemstone-btn.pearl.selected {
  border-color: var(--gem-pearl);
  box-shadow: 0 0 15px rgba(245, 245, 220, 0.5), 0 0 30px rgba(245, 245, 220, 0.3), inset 0 0 10px rgba(245, 245, 220, 0.2);
}
.gemstone-btn.pearl.selected .gemstone-svg-main { color: var(--stone-btn-icon-selected); }
.gemstone-btn.pearl.selected .gemstone-svg-glow { opacity: 1; color: var(--gem-pearl); }


/* ---------------------------------------------------------------------
   Selected state label - adapts to skin (dark on light backgrounds)
   --------------------------------------------------------------------- */
.gemstone-btn.selected .gemstone-label {
  color: var(--stone-btn-icon-selected);
}


/* ==========================================================================
   REAL GEMS SECTION (UC Pre-selected Gemstones)
   ========================================================================== */

/* Real gem button - 2x2 grid cells (size of 4 normal buttons) */
.real-gem-btn {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  background: var(--stone-btn-surface);
  border: 2px solid #d0d0d0;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

/* Inactive gem hover state - hint that it can be clicked */
.real-gem-btn:not(.selected):hover {
  border-color: #b0b0b0;
  opacity: 0.85;
}

/* Active/selected real gem - gold border and glow */
.real-gem-btn.selected {
  border-color: var(--stone-btn-accent);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  opacity: 1;
}

/* Label color changes based on active state */
.real-gem-btn:not(.selected) .real-gem-label {
  color: #888888;
}

.real-gem-btn.selected .real-gem-label {
  color: var(--stone-btn-accent);
}

/* On mobile (4-column grid), span 2x2 */
@media (max-width: 480px) {
  .real-gem-btn {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Cancel button in top-right */
.real-gem-cancel-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 10;
}

.real-gem-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Gemstone thumbnail - fills most of the button */
.real-gem-thumbnail {
  width: 100%;
  height: 70%;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.real-gem-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dimensions in bottom-left corner */
.real-gem-dimensions {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 500;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Gemstone name label - color set via .real-gem-btn.selected/.real-gem-btn:not(.selected) rules above */
.real-gem-label {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 4px 0;
  line-height: 1.2;
}

/* ---------------------------------------------------------------------
   Empty state - no real gem pinned for this scope.
   Prompt card links to the gemstones catalogue; hint keeps the
   pick-your-own path visible.
   --------------------------------------------------------------------- */
.real-gem-add-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1.5px dashed var(--stone-btn-text);
  color: var(--stone-btn-text);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.real-gem-add-card:hover {
  border-color: var(--stone-btn-accent);
  color: var(--stone-btn-text-hover);
}

.real-gem-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.real-gem-add-icon svg {
  width: 12px;
  height: 12px;
}

.real-gem-add-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.real-gem-add-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--stone-btn-text);
}

/* An empty gem grid still carries the 0.5rem top margin forced by
   raised_panels.css - drop it from flow when it has no cards. */
.real-gems-section .gemstone-selector-grid:empty {
  display: none;
}


/* ==========================================================================
   LOCK ICON FOR DISABLED GEMSTONE BUTTONS
   ========================================================================== */

/* Locked state for gemstone buttons when real gem is selected - white/neutral appearance */
.gemstone-btn.locked {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: none;
}

.gemstone-btn.locked .gemstone-svg-main,
.gemstone-btn.locked .gemstone-svg-glow {
  color: #cccccc;
  opacity: 0.5;
}

.gemstone-btn.locked .gemstone-label {
  color: #999999;
}

/* Line-art lock icon in top-right corner */
.gemstone-btn.locked::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Lock indicator for weight field */
.lock-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

.lock-indicator svg {
  width: 14px;
  height: 14px;
  stroke: #666666;
}


/* ==========================================================================
   GEMSTONE DURABILITY WARNING
   Warning displayed for softer gemstones when used for engagement rings
   ========================================================================== */

.gemstone-durability-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
}

.gemstone-durability-warning.hidden {
  display: none;
}

.durability-warning-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.durability-warning-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #b45309;
  margin-top: 1px;
}

.durability-warning-text {
  font-size: 13px;
  line-height: 1.5;
  color: #1a1a1a;
}

.durability-warning-text strong {
  color: #92400e;
  font-weight: 700;
}

.durability-warning-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 152, 0, 0.2);
  cursor: pointer;
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
}

.durability-warning-confirm input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #F59E0B;
  cursor: pointer;
}

.durability-warning-confirm span {
  user-select: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .gemstone-durability-warning {
    background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
    border-color: #f59e0b;
  }

  .durability-warning-icon {
    color: #fbbf24;
  }

  .durability-warning-text {
    color: #fef3c7;
  }

  .durability-warning-text strong {
    color: #fcd34d;
  }

  .durability-warning-confirm {
    border-top-color: rgba(251, 191, 36, 0.3);
    color: #fef3c7;
  }
}

/* Shake animation for unconfirmed durability warning */
@keyframes shake-warning {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.gemstone-durability-warning.shake-warning {
  animation: shake-warning 0.6s ease-in-out;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}
/* ============================================================
   Start with a Gemstone — the private viewing room.
   Adapted from design_handoff/gemstone-experience.css (canvas
   scaffolding + unchosen picker variants dropped; desktop
   `.frame.d` scoping translated to media queries; everything
   namespaced under .gemx). Brand locked by the handoff:
   teal #003333 · gold #c9a96e · cream #faf7f2 · ink #1a1a1a.
   Cormorant Garamond display · Jost body.
   ============================================================ */

.gemx {
  --teal: #003333;
  --teal-deep: #002a2a;
  --teal-ink: #011f1f;
  --gold: #c9a96e;
  --gold-deep: #ac8b50;
  --cream: #faf7f2;
  --cream-deep: #f3ede2;
  --linen: #eae2d3;
  --ink: #1a1a1a;
  --ink-soft: rgba(26, 26, 26, 0.64);
  --hairline: rgba(0, 51, 51, 0.16);
  --hairline-gold: rgba(201, 169, 110, 0.45);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;

  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
}

.gemx a { color: inherit; text-decoration: none; }
.gemx button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
.gemx img { display: block; }

/* ---------- shared type ---------- */
.gemx .kicker {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gemx h1, .gemx h2, .gemx h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
.gemx h1 em, .gemx h2 em, .gemx h3 em { font-style: italic; }

.gemx .rule { border: 0; width: 44px; height: 1px; background: var(--gold); margin: 18px 0; }
.gemx .rule.center { margin-left: auto; margin-right: auto; }

.gemx .sec-head { padding: 0 0 26px; }
.gemx .sec-head h2 { font-size: 33px; line-height: 1.08; margin-top: 10px; color: var(--teal); }
.gemx .sec-head .lede { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; }
@media (min-width: 1024px) {
  .gemx .sec-head h2 { font-size: 46px; max-width: 20ch; }
  .gemx .sec-head .lede { font-size: 16.5px; }
}

/* ---------- closing band / footer ---------- */
.gemx .foot {
  background: var(--teal-ink);
  color: rgba(250, 247, 242, 0.6);
  text-align: center;
  padding: 44px 28px 40px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
}
.gemx .foot .mark { display: block; margin-bottom: 12px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0.02em; color: var(--cream); }
.gemx .foot .mark em { font-style: normal; color: var(--gold); }

/* ---------- photo system: flatter imperfect photography ---------- */
.gemx .ph { display: block; position: relative; overflow: hidden; background: var(--linen); }
.gemx .ph img { width: 100%; height: 100%; object-fit: cover; }
.gemx .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(201, 169, 110, 0.07), rgba(0, 51, 51, 0.05)),
    radial-gradient(120% 110% at 50% 42%, transparent 58%, rgba(0, 42, 42, 0.16) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 51, 51, 0.1);
  mix-blend-mode: multiply;
}
.gemx .ph .plate-note {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: rgba(250, 247, 242, 0.92);
  text-shadow: 0 1px 8px rgba(0, 30, 30, 0.55);
}

/* CSS gem stand-in: linen plinth + faceted stone (placeholder until photography) */
.gemx .gem-ph {
  --g-hi: #9fe3d4; --g1: #1e7f74; --g2: #063f3d;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 46% 12% at 50% 64%, rgba(20, 24, 20, 0.28), transparent 70%),
    radial-gradient(closest-side at 50% 46%, var(--g-hi) 0%, var(--g1) 40%, var(--g2) 68%, transparent 69%),
    linear-gradient(168deg, #f4efe4 0%, #e9e0cd 55%, #ded1b6 100%);
}
.gemx .gem-ph::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.55) 0%, transparent 12%),
    conic-gradient(from 205deg at 50% 46%, transparent 0deg, rgba(255, 255, 255, 0.16) 24deg, transparent 60deg, rgba(0, 0, 0, 0.12) 120deg, transparent 160deg, rgba(255, 255, 255, 0.1) 250deg, transparent 300deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
          mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
}
.gemx .gem-ph::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 110% at 50% 42%, transparent 60%, rgba(0, 42, 42, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 51, 51, 0.1);
}
.gemx .c-teal      { --g-hi: #a5e6d6; --g1: #1e7f74; --g2: #073f3d; }
.gemx .c-blue      { --g-hi: #9dbdf5; --g1: #24519e; --g2: #0b1e4e; }
.gemx .c-green     { --g-hi: #a3dcab; --g1: #1d7a4a; --g2: #07402a; }
.gemx .c-pink      { --g-hi: #ffd3e0; --g1: #d76a92; --g2: #8e2f55; }
.gemx .c-ruby      { --g-hi: #ff9aa0; --g1: #b3243a; --g2: #5c0e1e; }
.gemx .c-yellow    { --g-hi: #ffe9a8; --g1: #dcae3c; --g2: #8a6414; }
.gemx .c-champagne { --g-hi: #f3e2c6; --g1: #c8a670; --g2: #7a5c33; }
.gemx .c-white     { --g-hi: #ffffff; --g1: #e6e7ea; --g2: #b2b6c0; }
.gemx .c-morganite { --g-hi: #ffe0d4; --g1: #e79d92; --g2: #a05a54; }
.gemx .c-aqua      { --g-hi: #dcf3f6; --g1: #85c6d0; --g2: #3a7f8e; }
.gemx .c-cognac    { --g-hi: #ffdcb0; --g1: #c98a4b; --g2: #78491e; }
.gemx .c-antique   { --g-hi: #fdf6e8; --g1: #e0cfa8; --g2: #97875f; }
.gemx .c-parti     { --g-hi: #d9ecc9; --g1: #2b7f6e; --g2: #073f3d; }
.gemx .c-parti::before {
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.5) 0%, transparent 12%),
    linear-gradient(64deg, transparent 42%, rgba(216, 178, 58, 0.85) 62%, rgba(138, 100, 20, 0.9) 100%),
    conic-gradient(from 205deg at 50% 46%, transparent 0deg, rgba(255, 255, 255, 0.16) 24deg, transparent 60deg, rgba(0, 0, 0, 0.12) 120deg, transparent 160deg, rgba(255, 255, 255, 0.1) 250deg, transparent 300deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
          mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
}
.gemx .c-opal { --g-hi: #fdfbf4; --g1: #e8e2d8; --g2: #b9b3a6; }
.gemx .c-opal::before {
  background:
    radial-gradient(circle at 40% 40%, rgba(126, 220, 220, 0.55) 0%, transparent 16%),
    radial-gradient(circle at 58% 52%, rgba(240, 150, 190, 0.5) 0%, transparent 14%),
    radial-gradient(circle at 48% 56%, rgba(150, 200, 120, 0.45) 0%, transparent 12%),
    radial-gradient(circle at 56% 38%, rgba(230, 190, 90, 0.5) 0%, transparent 13%),
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.6) 0%, transparent 14%);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
          mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
}
.gemx .c-saltpepper { --g-hi: #f2f2ef; --g1: #cfcfc9; --g2: #6a6a66; }
.gemx .c-saltpepper::before {
  background:
    radial-gradient(circle at 46% 40%, rgba(30, 30, 30, 0.8) 0%, transparent 3.5%),
    radial-gradient(circle at 54% 50%, rgba(30, 30, 30, 0.7) 0%, transparent 3%),
    radial-gradient(circle at 42% 52%, rgba(30, 30, 30, 0.75) 0%, transparent 2.6%),
    radial-gradient(circle at 58% 42%, rgba(30, 30, 30, 0.6) 0%, transparent 2.4%),
    radial-gradient(circle at 50% 58%, rgba(30, 30, 30, 0.65) 0%, transparent 2.8%),
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.6) 0%, transparent 12%),
    conic-gradient(from 205deg at 50% 46%, transparent 0deg, rgba(255, 255, 255, 0.2) 24deg, transparent 60deg, rgba(0, 0, 0, 0.1) 120deg, transparent 160deg);
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
          mask: radial-gradient(closest-side at 50% 46%, #000 68%, transparent 69%);
}

/* ---------- hero ---------- */
.gemx .hero { position: relative; height: 560px; color: var(--cream); background: var(--teal-ink); }
.gemx .hero .hero-ph { position: absolute; inset: 0; }
.gemx .hero .hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.gemx .hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(0, 38, 38, 0.36) 0%, rgba(0, 38, 38, 0.12) 38%, rgba(0, 42, 42, 0.55) 78%, rgba(1, 31, 31, 0.92) 100%),
    linear-gradient(rgba(0, 51, 51, 0.28), rgba(0, 51, 51, 0.28));
}
.gemx .hero .hero-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 26px 30px; }
.gemx .hero .kicker { color: var(--gold); margin-bottom: 14px; }
.gemx .hero h1 { font-size: 43px; line-height: 1.04; font-weight: 500; margin-bottom: 14px; max-width: 9ch; }
.gemx .hero p.sub { font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(250, 247, 242, 0.85); max-width: 34ch; margin-bottom: 24px; }
.gemx .hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 7px;
}
.gemx .hero-cta .arr { color: var(--gold); font-size: 15px; }
.gemx .hero-cta:hover { color: var(--gold); }
.gemx .hero .hero-plate {
  display: none;
  position: absolute;
  right: 26px;
  bottom: 30px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(250, 247, 242, 0.75);
  text-align: right;
}
@media (min-width: 1024px) {
  .gemx .hero { height: 660px; }
  .gemx .hero .hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 60px 54px; }
  .gemx .hero h1 { font-size: 76px; max-width: 14ch; }
  .gemx .hero p.sub { font-size: 17px; max-width: 44ch; }
  .gemx .hero .hero-plate { display: block; }
}

/* provenance strip under hero */
.gemx .prov {
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: baseline;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hairline);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  flex-wrap: wrap;
}
.gemx .prov b { font-weight: 500; color: var(--teal); }
.gemx .prov .dot { color: var(--gold-deep); }

/* ---------- blocks ---------- */
.gemx .block { padding: 58px 26px; }
@media (min-width: 1024px) {
  .gemx .block { max-width: 1200px; margin: 0 auto; padding: 92px 60px; }
}

/* ---------- the velvet tray ---------- */
.gemx .gem-caption {
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
  min-height: 44px;
}
.gemx .gem-caption strong { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--teal); }
.gemx .gem-caption .go {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gemx .gem-caption .go:hover { color: var(--teal); }

.gemx .tray {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 169, 110, 0.1), transparent 55%),
    linear-gradient(172deg, #164036 0%, #0e3429 46%, #0a2a20 100%);
  border-radius: 4px;
  padding: 26px 18px 20px;
  box-shadow: inset 0 1px 0 rgba(250, 247, 242, 0.12), inset 0 -14px 30px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 42, 42, 0.22);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 6px;
}
@media (min-width: 1024px) {
  .gemx .tray { grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 30px 26px 24px; }
  .gemx .tray .lbl { font-size: 11px; letter-spacing: 0.12em; }
}
.gemx .tray .gem { display: grid; justify-items: center; gap: 6px; padding: 0; min-width: 0; }
.gemx .tray .orb { width: 100%; max-width: 70px; aspect-ratio: 1 / 1; position: relative; transition: transform 200ms ease; }
.gemx .tray .orb::before {
  content: "";
  position: absolute; inset: -16%;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  -webkit-mask: radial-gradient(circle, #000 50%, transparent 71%);
          mask: radial-gradient(circle, #000 50%, transparent 71%);
}
.gemx .tray .lbl { font-size: clamp(9px, 2.6vw, 11px); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; color: rgba(201, 169, 110, 0.85); transition: color 200ms ease; }
.gemx .tray .gem:hover .orb { transform: translateY(-3px); }
.gemx .tray .gem.on .orb { transform: translateY(-3px) scale(1.08); }
.gemx .tray .gem.on .orb::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 18px rgba(201, 169, 110, 0.4), inset 0 0 14px rgba(201, 169, 110, 0.18);
}
.gemx .tray .gem.on .lbl { color: var(--cream); }

/* ---------- collections, weighted by depth ---------- */
.gemx .collections { display: grid; gap: 16px; }
.gemx .feature-card { display: block; position: relative; border-radius: 4px; overflow: hidden; }
.gemx .feature-card .ph { aspect-ratio: 4 / 4.6; }
.gemx .feature-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(1, 31, 31, 0) 42%, rgba(1, 31, 31, 0.55) 72%, rgba(1, 31, 31, 0.92) 100%);
}
.gemx .feature-card .body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; color: var(--cream); }
.gemx .feature-card .count {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--hairline-gold);
  padding: 5px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
  background: rgba(1, 31, 31, 0.35);
}
.gemx .feature-card h3 { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.gemx .feature-card .line { font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(250, 247, 242, 0.85); max-width: 34ch; }
.gemx .feature-card .go-row { margin-top: 14px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.gemx .feature-card:hover .go-row { color: var(--cream); }

.gemx .parcels { margin-top: 34px; border-top: 1px solid var(--hairline); }
.gemx .parcels-kicker { margin: 22px 0 6px; }
.gemx .parcel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--hairline);
}
.gemx .parcel .thumb { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.gemx .parcel .thumb.gem-ph::after { border-radius: 50%; }
.gemx .parcel .thumb.ph { border-radius: 50%; }
.gemx .parcel .thumb.ph::after { border-radius: 50%; }
.gemx .parcel .tx { flex: 1; min-width: 0; }
.gemx .parcel h3 { font-size: 20px; color: var(--teal); }
.gemx .parcel .line { font-size: 13px; font-weight: 300; color: var(--ink-soft); line-height: 1.45; }
.gemx .parcel .n { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.gemx .parcel:hover h3 { color: var(--gold-deep); }

@media (min-width: 1024px) {
  .gemx .collections { grid-template-columns: 1fr 1fr; gap: 22px; }
  .gemx .collections .feature-card .ph { aspect-ratio: 4 / 3.6; }
  .gemx .feature-card h3 { font-size: 42px; }
  .gemx .parcels { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .gemx .parcels .parcels-kicker { grid-column: 1 / -1; }
}

/* ---------- diamond room ---------- */
.gemx .diamond-room {
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(201, 169, 110, 0.07), transparent 50%),
    linear-gradient(178deg, #013030 0%, #011f1f 100%);
  color: var(--cream);
  padding: 62px 26px 66px;
}
.gemx .diamond-room .sec-head h2 { color: var(--cream); }
.gemx .diamond-room .sec-head .lede { color: rgba(250, 247, 242, 0.62); }
.gemx .diamond-room .kicker { color: var(--gold); }
.gemx .d-index { border-top: 1px solid rgba(201, 169, 110, 0.28); }
.gemx .d-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 2px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.14);
  transition: padding-left 200ms ease;
}
.gemx .d-row .num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold); width: 22px; flex: none; }
.gemx .d-row .thumb { width: 54px; height: 54px; border-radius: 50%; flex: none; }
.gemx .d-row .thumb.gem-ph {
  background:
    radial-gradient(ellipse 46% 12% at 50% 66%, rgba(0, 0, 0, 0.35), transparent 70%),
    radial-gradient(closest-side at 50% 46%, var(--g-hi) 0%, var(--g1) 40%, var(--g2) 68%, transparent 69%),
    linear-gradient(168deg, #0b3d3b 0%, #062e2d 100%);
}
.gemx .d-row .thumb.gem-ph::after { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.25); }
.gemx .d-row .thumb.ph { border-radius: 50%; }
.gemx .d-row .thumb.ph::after { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.25); }
.gemx .d-row .tx { flex: 1; min-width: 0; }
.gemx .d-row h3 { font-size: 22px; line-height: 1.1; }
.gemx .d-row .line { font-size: 13px; font-weight: 300; color: rgba(250, 247, 242, 0.6); margin-top: 2px; }
.gemx .d-row .n { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(201, 169, 110, 0.85); white-space: nowrap; }
.gemx .d-row .arrow { color: var(--gold); font-size: 16px; }
.gemx .d-row:hover { padding-left: 8px; }
.gemx .d-row:hover h3 { color: var(--gold); }
@media (min-width: 1024px) {
  .gemx .diamond-room { padding: 96px 0; }
  .gemx .diamond-room .diamond-inner { max-width: 1200px; margin: 0 auto; padding: 0 60px; display: grid; grid-template-columns: 380px 1fr; gap: 70px; }
  .gemx .d-row h3 { font-size: 25px; }
}

/* ---------- ones we love ---------- */
.gemx .loves {
  display: grid;
  gap: 18px;
  grid-auto-flow: column;
  grid-auto-columns: 240px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
  margin-right: -26px;
  padding-right: 26px;
}
.gemx .loves::-webkit-scrollbar { display: none; }
.gemx .love { display: block; scroll-snap-align: start; }
.gemx .love .ph { aspect-ratio: 4 / 4.4; border-radius: 999px 999px 4px 4px; }
.gemx .love .body { padding: 14px 4px 0; }
.gemx .love h3 { font-size: 21px; color: var(--teal); line-height: 1.1; }
.gemx .love .why { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); margin-top: 4px; display: block; }
.gemx .love .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; gap: 10px; }
.gemx .love .spec { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.gemx .love .price { font-size: 14px; font-weight: 500; color: var(--teal); white-space: nowrap; }
.gemx .love:hover h3 { color: var(--gold-deep); }
.gemx .loves-note { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .gemx .loves { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: unset; overflow-x: visible; margin-right: 0; padding-right: 0; gap: 22px; }
}

/* ---------- bridge ---------- */
.gemx .bridge {
  background: linear-gradient(var(--cream-deep), var(--cream));
  border-top: 1px solid var(--hairline);
  padding: 64px 26px 70px;
  text-align: center;
}
.gemx .bridge .pair { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 30px; }
.gemx .bridge .pair .ph { width: min(177px, 30vw); height: min(177px, 30vw); border-radius: 50%; flex: none; box-shadow: 0 14px 28px rgba(0, 42, 42, 0.2); }
.gemx .bridge .pair .ph::after { border-radius: 50%; }
.gemx .bridge .pair .to { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-deep); }
.gemx .bridge h2 { font-size: 32px; line-height: 1.1; color: var(--teal); max-width: 17ch; margin: 0 auto 14px; }
.gemx .bridge p.body-copy { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); max-width: 48ch; margin: 0 auto 30px; }
.gemx .btn-solid {
  display: inline-block;
  background: var(--teal);
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 34px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.5), 0 10px 24px rgba(0, 42, 42, 0.24);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gemx .btn-solid:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gold), 0 14px 28px rgba(0, 42, 42, 0.3); }
.gemx .bridge .fine { margin-top: 22px; font-size: 12px; font-weight: 300; color: var(--ink-soft); max-width: 44ch; margin-left: auto; margin-right: auto; line-height: 1.6; }
@media (min-width: 1024px) {
  .gemx .bridge { padding: 100px 60px; }
  .gemx .bridge .pair { gap: 26px; }
  .gemx .bridge .pair .ph { width: 255px; height: 255px; }
  .gemx .bridge h2 { font-size: 46px; }
}

/* ---------- category pages ---------- */
.gemx .cat-head { padding: 34px 26px 6px; }
.gemx .crumb { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.gemx .crumb:hover { color: var(--teal); }
.gemx .cat-head h1 { font-size: 40px; line-height: 1.05; color: var(--teal); margin-top: 16px; }
.gemx .cat-head .lede { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; }
.gemx .cat-head .n-note { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-deep); margin-top: 10px; display: block; }
@media (min-width: 1024px) {
  .gemx .cat-head { max-width: 1200px; margin: 0 auto; padding: 44px 60px 6px; }
  .gemx .cat-head h1 { font-size: 58px; }
}

.gemx .filters {
  margin: 26px 26px 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 20px 18px 8px;
  box-shadow: 0 8px 22px rgba(0, 42, 42, 0.06);
}
.gemx .filters .f-title { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--teal); margin-bottom: 14px; }
.gemx .f-group { margin-bottom: 14px; }
.gemx .f-label { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.gemx .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gemx .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--cream);
  transition: all 160ms ease;
  min-height: 36px;
}
.gemx .chip img { width: 17px; height: 17px; opacity: 0.75; }
.gemx .chip:hover { border-color: var(--gold); color: var(--teal); }
.gemx .chip.on {
  background: var(--teal);
  color: var(--cream);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.6);
}
.gemx .chip.on img { filter: invert(1) brightness(1.6); opacity: 0.95; }
@media (min-width: 1024px) {
  .gemx .filters { max-width: 1080px; margin: 30px auto 0; padding: 24px 26px 12px; }
  .gemx .f-row { display: flex; gap: 34px; }
  .gemx .f-row .f-group { flex: none; }
}

.gemx .sort-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 26px 4px;
}
.gemx .sort-row .showing { font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--ink-soft); }
.gemx .sort-row .sort { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.gemx .sort-row .sort:hover { color: var(--gold-deep); }
@media (min-width: 1024px) {
  .gemx .sort-row { max-width: 1200px; margin: 0 auto; padding: 28px 60px 4px; }
}

.gemx .stones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; padding: 18px 26px 54px; }
.gemx .stone-card { display: block; }
.gemx .stone-card .ph { aspect-ratio: 1 / 1; border-radius: 3px; }
.gemx .stone-card .body { padding: 10px 2px 0; position: relative; }
.gemx .stone-card h3 { font-size: 18.5px; line-height: 1.15; color: var(--teal); }
.gemx .stone-card .spec { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.gemx .stone-card .price { display: block; font-size: 13.5px; font-weight: 500; color: var(--teal); margin-top: 6px; }
.gemx .stone-card .flag {
  position: absolute;
  top: -34px;
  left: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(250, 247, 242, 0.92);
  color: var(--teal);
  padding: 4px 8px;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0, 42, 42, 0.14);
}
.gemx .stone-card:hover h3 { color: var(--gold-deep); }
@media (min-width: 1024px) {
  .gemx .stones { max-width: 1200px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); gap: 30px 22px; padding: 22px 60px 70px; }
  .gemx .stone-card h3 { font-size: 21px; }
}

.gemx .meet { padding: 26px 26px 54px; display: grid; gap: 34px; }
.gemx .meet-stone { display: block; }
.gemx .meet-stone .ph { aspect-ratio: 4 / 3.4; border-radius: 999px 999px 4px 4px; }
.gemx .meet-stone .body { padding: 16px 4px 0; }
.gemx .meet-stone .no { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold-deep); }
.gemx .meet-stone h3 { font-size: 26px; color: var(--teal); margin: 4px 0 8px; }
.gemx .meet-stone .story { font-size: 14.5px; font-weight: 300; line-height: 1.65; color: var(--ink-soft); max-width: 40ch; }
.gemx .meet-stone .meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.gemx .meet-stone .spec { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.gemx .meet-stone .price { font-size: 15px; font-weight: 500; color: var(--teal); }
.gemx .meet-stone:hover h3 { color: var(--gold-deep); }
@media (min-width: 1024px) {
  .gemx .meet { max-width: 820px; margin: 0 auto; }
}

.gemx .cat-bridge {
  margin: 0 26px 56px;
  border: 1px solid var(--hairline-gold);
  border-radius: 4px;
  background: linear-gradient(var(--cream-deep), var(--cream));
  text-align: center;
  padding: 34px 26px;
}
.gemx .cat-bridge h3 { font-size: 26px; color: var(--teal); margin-bottom: 8px; }
.gemx .cat-bridge p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 18px; }
.gemx .cat-bridge a { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--gold); padding-bottom: 5px; }
.gemx .cat-bridge a:hover { color: var(--teal); }
@media (min-width: 1024px) {
  .gemx .cat-bridge { max-width: 760px; margin: 10px auto 80px; padding: 44px 40px; }
}

/* Colour-results species picker (handoff Frame 1d): sits inside .filters and
   groups the colour-filtered set by gemstone type (category). */
.gemx .species { display: flex; flex-wrap: wrap; gap: 10px; }
.gemx .sp-chip {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 6px 18px 6px 7px; background: var(--cream);
  transition: all 160ms ease;
}
.gemx .sp-chip .sp-thumb { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 51, 51, 0.14); flex: none; }
.gemx .sp-chip .sp-tx { display: grid; text-align: left; font-size: 14px; font-weight: 400; color: var(--teal); line-height: 1.3; }
.gemx .sp-chip .sp-tx b { font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.gemx .sp-chip:hover { border-color: var(--gold); }
.gemx .sp-chip.on { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 1px rgba(201, 169, 110, 0.6); }
.gemx .sp-chip.on .sp-tx { color: var(--cream); }
.gemx .sp-chip.on .sp-tx b { color: var(--gold); }
/*
 * /gemstones catalogue pages (public bundle).
 * Class-scoped selectors (.gem-*) only: bare element selectors in this
 * bundle are un-layered CSS and would override Tailwind @layer utilities
 * on every public page (see the stub note at the top of application.css).
 * Colours come from the skin tokens (var(--color-*)); the only literal
 * colours are photo scrims/shadows, which sit on imagery, not chrome.
 */

.gem-card-scrim {
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15) 45%, transparent 65%);
  pointer-events: none;
}

.gem-text-shadow {
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}

/* Fallback tile when no usable stone photo exists — tinted with the skin
   accent, never an emoji or stock image. */
.gem-tile-bare {
  background:
    radial-gradient(120% 120% at 20% 0%, var(--color-accent-glow, rgb(0 0 0 / 0.08)), transparent 60%),
    var(--color-surface, #f4f4f4);
}

.gem-tile-bare-initial {
  color: var(--color-accent);
  opacity: 0.85;
}

/* Hero photo scrim: text is always white-on-image, whatever the skin. */
.gem-hero-scrim {
  background: linear-gradient(
    to top,
    rgb(10 10 10 / 0.65) 0%,
    rgb(10 10 10 / 0.25) 45%,
    rgb(10 10 10 / 0.05) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Scroll reveal: the starting (hidden) state is applied by JS only, so
   content stays visible with no JS or reduced motion. */
.gem-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-speed-slow, 0.5s) ease,
    transform var(--transition-speed-slow, 0.5s) ease;
}

.gem-reveal-visible {
  opacity: 1;
  transform: none;
}

/* Detail sheet: slides up from the bottom on phones, fades in centered on
   larger screens. */
.gem-sheet-backdrop {
  opacity: 0;
  transition: opacity var(--transition-speed, 0.3s) ease;
}

.gem-sheet-open .gem-sheet-backdrop {
  opacity: 1;
}

.gem-sheet-panel {
  transform: translateY(100%);
  transition: transform var(--transition-speed, 0.3s) ease;
}

.gem-sheet-open .gem-sheet-panel {
  transform: translateY(0);
}

@media (min-width: 640px) {
  .gem-sheet-panel {
    transform: translateY(16px);
    opacity: 0;
    transition:
      transform var(--transition-speed, 0.3s) ease,
      opacity var(--transition-speed, 0.3s) ease;
  }

  .gem-sheet-open .gem-sheet-panel {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gem-sheet-backdrop,
  .gem-sheet-panel,
  .gem-reveal,
  .gem-swatch {
    transition: none;
  }
}

/* Colour discovery swatches. These are literal gem colours on purpose -
   they represent physical stones, not UI chrome; the surrounding labels,
   rings and backgrounds stay on the skin tokens. */
.gem-swatch {
  border: 2px solid transparent;
  box-shadow: inset 0 1px 6px rgb(255 255 255 / 0.35), 0 2px 6px rgb(0 0 0 / 0.2);
}

.gem-swatch--active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow, rgb(0 0 0 / 0.15));
}

.gem-swatch--blue { background: radial-gradient(circle at 30% 30%, #3565b8, #0b2a66); }
.gem-swatch--teal { background: radial-gradient(circle at 30% 30%, #2d9982, #0d4f43); }
.gem-swatch--green { background: radial-gradient(circle at 30% 30%, #3e8e5a, #14522e); }
.gem-swatch--parti { background: linear-gradient(135deg, #14522e 0%, #2d9982 45%, #d9b23a 100%); }
.gem-swatch--pink { background: radial-gradient(circle at 30% 30%, #e58ab0, #b04a77); }
.gem-swatch--yellow { background: radial-gradient(circle at 30% 30%, #e8c84a, #b8912a); }
.gem-swatch--champagne { background: radial-gradient(circle at 30% 30%, #d8b98a, #a9825a); }
.gem-swatch--white { background: radial-gradient(circle at 30% 30%, #ffffff, #cfcdc6); }
/* =============================================================================
   JWLDRAW — "Evening Bench" chrome
   Warm charcoal chrome, cream sheet as the hero, single warm-brown accent.
   Restyle of the tool chrome only — all drawing behaviour lives in JS.
   ============================================================================= */

.jwldraw-container {
  /* Design tokens (Evening Bench handoff) */
  --chrome: #262220;
  --chrome-deep: #211e1b;
  --chrome-raised: #2c2824;
  --chrome-active: #332e29;
  --chrome-active-row: #38322c;
  --sheet: #fdfbf5;
  --ink-hi: #e8e2d8;
  --ink: #d8d2c8;
  --ink-mid: #b0a99e;
  --ink-low: #8f887d;
  --ink-faint: #7a746a;
  --disabled: #5c564e;
  --accent: #a68a67;
  --accent-solid: #8b7355;
  --accent-confirmed: #6d5a43;
  --hairline: rgba(166, 138, 103, 0.25);
  --hairline-panel: rgba(166, 138, 103, 0.2);
  --hairline-sep: rgba(166, 138, 103, 0.3);
  --track: rgba(232, 226, 216, 0.16);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.jwldraw-page {
  background-color: #211e1b !important;
}

body.jwldraw-page .desktop-sidebar,
body.jwldraw-page .mobile-header,
body.jwldraw-page footer,
body.jwldraw-page .mobile-nav-bar {
  display: none !important;
}

body.jwldraw-page .sidebar-layout {
  margin-left: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto;
}

/* Container */
.jwldraw-container {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  touch-action: none;
  background: var(--chrome);
  font-family: "DM Sans", system-ui, sans-serif;
  /* Nothing in the tool chrome is ever text-selectable: a palm resting on
     the panel must not highlight labels or trigger iOS selection UI. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* The two places typing happens keep normal text editing. */
.jwldraw-container input[type="text"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Shared bits ── */

.jwldraw-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Quiet uppercase caption — panel headings, slider labels */
.jwldraw-eyebrow {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Signature motif: solid accent diamond (active marker / toast) */
.jwldraw-diamond {
  width: 7px;
  height: 7px;
  background: var(--accent-solid);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.jwldraw-diamond--outline {
  width: 4px;
  height: 4px;
  background: transparent;
  border: 1px solid #c9b8a2;
}

/* ── TOP TOOLBAR ── */

.jwldraw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  background: var(--chrome);
  border-bottom: 1px solid var(--hairline);
  gap: 8px;
  flex-shrink: 0;
  z-index: 10;
  transition: opacity 0.25s var(--ease), display 0.25s allow-discrete;
}

.jwldraw-toolbar__left,
.jwldraw-toolbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.jwldraw-toolbar__center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.jwldraw-tool-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
  padding: 0;
}

.jwldraw-tool-btn:hover:not(:disabled) {
  color: var(--ink-hi);
  background: rgba(232, 226, 216, 0.05);
}

.jwldraw-tool-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.25);
}

.jwldraw-tool-btn--active {
  color: var(--ink-hi);
  background: var(--chrome-active);
}

.jwldraw-tool-btn:disabled {
  color: var(--disabled);
  cursor: default;
}

.jwldraw-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--hairline-sep);
  margin: 0 8px;
}

/* Brush button */
.jwldraw-brush-dropdown {
  position: relative;
}

.jwldraw-brush-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(166, 138, 103, 0.5);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-hi);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.jwldraw-brush-btn__glyph {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.jwldraw-brush-btn__chevron {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}

.jwldraw-brush-dropdown--open .jwldraw-brush-btn {
  border-color: var(--accent);
  background: var(--chrome-raised);
}

.jwldraw-brush-dropdown--open .jwldraw-brush-btn__chevron {
  transform: rotate(180deg);
}

/* Brush picker popover. Visibility is owned HERE via the dropdown's --open
   class — never via Tailwind's .hidden utility, which this rule's
   display:flex would out-cascade (jwldraw.css loads after tailwind). */
.jwldraw-brush-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  background: var(--chrome-raised);
  border: 1px solid rgba(166, 138, 103, 0.4);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease),
              display 0.25s allow-discrete;
}

.jwldraw-brush-dropdown--open .jwldraw-brush-menu {
  display: flex;
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .jwldraw-brush-dropdown--open .jwldraw-brush-menu {
    opacity: 0;
    translate: 0 10px;
  }
}

.jwldraw-brush-menu__eyebrow {
  margin: 6px 0 8px 10px;
}

.jwldraw-brush-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 14px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-mid);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.jwldraw-brush-row:hover {
  background: rgba(232, 226, 216, 0.05);
}

.jwldraw-brush-row--active {
  background: var(--chrome-active-row);
  color: var(--ink-hi);
}

.jwldraw-brush-row--active::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.jwldraw-brush-row__names {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 86px;
  flex-shrink: 0;
}

.jwldraw-brush-row__name {
  font-size: 13.5px;
  font-weight: 500;
}

.jwldraw-brush-row__caption {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
}

.jwldraw-brush-row:not(.jwldraw-brush-row--active) .jwldraw-brush-row__caption {
  color: #6d675e;
}

.jwldraw-brush-row__sample {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

.jwldraw-brush-menu__footer {
  border-top: 1px solid var(--hairline-panel);
  margin-top: 6px;
  padding: 10px 10px 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d675e;
}

/* Colour control */
.jwldraw-color-btn {
  padding: 0;
}

.jwldraw-swatch {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--chrome), 0 0 0 2px rgba(232, 226, 216, 0.35);
}

/* Title */
.jwldraw-title-input {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-mid);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 21px;
  text-align: center;
  padding: 4px 12px;
  border-radius: 4px;
  max-width: 320px;
  width: 100%;
}

.jwldraw-title-input::placeholder {
  color: var(--ink-faint);
}

.jwldraw-title-input:focus {
  outline: none;
  border-color: var(--hairline-sep);
  color: var(--ink-hi);
}

/* Save */
.jwldraw-save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  background: var(--accent-solid);
  color: #faf8f3;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s var(--ease), opacity 0.25s var(--ease);
}

.jwldraw-save-btn:hover {
  filter: brightness(1.08);
}

.jwldraw-save-btn__icon {
  width: 15px;
  height: 15px;
}

.jwldraw-save-btn--confirmed {
  background: var(--accent-confirmed);
  color: #d9d2c6;
}

/* ── WORKSPACE ── */

.jwldraw-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left slider rail */
.jwldraw-sliders {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 0;
  gap: 26px;
  background: var(--chrome);
  border-right: 1px solid var(--hairline-panel);
  flex-shrink: 0;
  transition: opacity 0.25s var(--ease), display 0.25s allow-discrete;
}

.jwldraw-slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

.jwldraw-slider-value {
  font-size: 11px;
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}

.jwldraw-vertical-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  flex: 1;
  min-height: 0;
  background: transparent;
  cursor: pointer;
}

.jwldraw-vertical-slider::-webkit-slider-runnable-track {
  width: 2px;
  background: var(--track);
  border-radius: 2px;
}

.jwldraw-vertical-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chrome);
  border: 1.5px solid var(--accent);
  margin-left: -7px;
}

.jwldraw-vertical-slider::-moz-range-track {
  width: 2px;
  background: var(--track);
  border-radius: 2px;
}

.jwldraw-vertical-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chrome);
  border: 1.5px solid var(--accent);
}

/* ── CANVAS WELL ── */

.jwldraw-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--chrome-deep);
  overscroll-behavior: none;
}

/* Single display canvas fills the wrapper; the renderer sizes its backing
   store at devicePixelRatio and draws the sheet (with its own shadow) under
   the view transform. */
.jwldraw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.jwldraw-canvas.jwldraw-cursor-eraser {
  cursor: cell;
}

/* First-use empty state — fades away on the first stroke */
.jwldraw-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.jwldraw-container--empty .jwldraw-empty {
  opacity: 1;
}

.jwldraw-empty__glyph {
  fill: none;
  stroke: #c4bdb2;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.jwldraw-empty__headline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 32px;
  color: #9a938a;
}

.jwldraw-empty__hints {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b3aca2;
}

/* Dimmed save while there is nothing to save */
.jwldraw-container--empty .jwldraw-save-btn {
  opacity: 0.45;
}

/* ── LAYER PANEL ── */

.jwldraw-layer-panel {
  width: 216px;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  background: var(--chrome);
  border-left: 1px solid var(--hairline-panel);
  flex-shrink: 0;
  gap: 4px;
  transition: opacity 0.25s var(--ease), display 0.25s allow-discrete;
}

.jwldraw-layer-panel__title {
  margin-bottom: 12px;
}

.jwldraw-layer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 10px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--ink-mid);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.jwldraw-layer-btn:hover {
  background: rgba(232, 226, 216, 0.05);
}

.jwldraw-layer-btn--active {
  background: var(--chrome-active);
  color: var(--ink-hi);
}

.jwldraw-layer-btn--active::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.jwldraw-layer-btn__name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jwldraw-layer-btn--active .jwldraw-layer-btn__name {
  font-weight: 500;
}

.jwldraw-layer-vis {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  flex-shrink: 0;
}

.jwldraw-layer-vis .jwldraw-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.4;
}

.jwldraw-layer-vis--hidden {
  opacity: 0.3;
}

/* ── FOCUS MODE ── */
/* The sheet fills the screen; chrome fades out (~250ms) and leaves layout.
   Drawing, gestures and palm rejection are untouched. */

.jwldraw-container--focus .jwldraw-toolbar,
.jwldraw-container--focus .jwldraw-sliders,
.jwldraw-container--focus .jwldraw-layer-panel {
  opacity: 0;
  display: none;
}

@starting-style {
  .jwldraw-toolbar, .jwldraw-sliders, .jwldraw-layer-panel {
    opacity: 0;
  }
}

.jwldraw-focus-exit {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--chrome);
  color: var(--ink);
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}

.jwldraw-focus-exit:hover {
  color: var(--ink-hi);
}

.jwldraw-container--focus .jwldraw-focus-exit {
  opacity: 0.92;
  visibility: visible;
}

/* Transient gesture hint on entering focus mode */
.jwldraw-focus-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c4bdb2;
  opacity: 0;
  pointer-events: none;
}

.jwldraw-focus-hint--show {
  animation: jwldraw-hint 3.5s var(--ease) forwards;
}

@keyframes jwldraw-hint {
  0% { opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── COLOR PICKER PANEL ── */

.jwldraw-color-panel {
  position: absolute;
  top: 68px;
  left: 88px;
  width: 240px;
  background: var(--chrome-raised);
  border: 1px solid rgba(166, 138, 103, 0.4);
  border-radius: 6px;
  padding: 14px;
  z-index: 30;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.jwldraw-color-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.jwldraw-color-panel__close {
  background: none;
  border: none;
  color: var(--ink-low);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.jwldraw-color-panel__close:hover {
  color: var(--ink-hi);
}

.jwldraw-color-wheel {
  display: block;
  margin: 0 auto 12px;
  border-radius: 50%;
  cursor: crosshair;
}

.jwldraw-brightness-row {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jwldraw-brightness-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.jwldraw-preset-colors-label {
  display: block;
  margin-bottom: 8px;
}

.jwldraw-preset-colors__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.jwldraw-preset-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 0 1px var(--chrome-raised), 0 0 0 2px rgba(232, 226, 216, 0.2);
  cursor: pointer;
  transition: box-shadow 0.15s var(--ease);
  padding: 0;
}

.jwldraw-preset-color:hover {
  box-shadow: 0 0 0 1px var(--chrome-raised), 0 0 0 2px var(--accent);
}

.jwldraw-hex-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jwldraw-hex-field {
  flex: 1;
  background: var(--chrome);
  border: 1px solid var(--hairline-sep);
  color: var(--ink-hi);
  padding: 5px 8px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px;
}

.jwldraw-hex-field:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── TOAST ── */

.jwldraw-toast {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 14px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  background: #faf8f3;
  border-radius: 6px;
  color: #2b2723;
  font-size: 13.5px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 40;
}

.jwldraw-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.jwldraw-toast__link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-solid);
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 115, 85, 0.5);
  padding-bottom: 2px;
}

/* ── SAVING OVERLAY ── */

.jwldraw-saving-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(17, 15, 13, 0.7);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--ink-hi);
  font-size: 14px;
  z-index: 50;
}

.jwldraw-saving-overlay--active {
  display: flex;
}

.jwldraw-saving-spinner {
  width: 30px;
  height: 30px;
  border: 2px solid var(--chrome-active);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: jwldraw-spin 0.7s linear infinite;
}

@keyframes jwldraw-spin {
  to { transform: rotate(360deg); }
}

/* ── TOUCH SIZING (iPad & other coarse pointers) ── */

@media (pointer: coarse) {
  .jwldraw-toolbar { height: 68px; padding: 0 18px; }
  .jwldraw-tool-btn { width: 46px; height: 46px; }
  .jwldraw-icon { width: 20px; height: 20px; }
  .jwldraw-brush-btn { height: 46px; padding: 0 16px; font-size: 14px; gap: 10px; }
  .jwldraw-brush-btn__glyph { width: 18px; height: 18px; }
  .jwldraw-save-btn { height: 46px; padding: 0 22px; font-size: 14px; }
  .jwldraw-swatch { width: 22px; height: 22px; }
  .jwldraw-title-input { font-size: 22px; }
  .jwldraw-sliders { width: 84px; padding: 24px 0; gap: 22px; }
  .jwldraw-eyebrow { font-size: 10px; }
  .jwldraw-slider-value { font-size: 12px; }
  .jwldraw-vertical-slider { width: 44px; }
  .jwldraw-vertical-slider::-webkit-slider-thumb { width: 22px; height: 22px; margin-left: -10px; }
  .jwldraw-vertical-slider::-moz-range-thumb { width: 22px; height: 22px; }
  .jwldraw-layer-panel { width: 200px; padding: 20px 16px; }
  .jwldraw-layer-btn { height: 48px; }
  .jwldraw-layer-btn__name { font-size: 14px; }
  .jwldraw-layer-vis .jwldraw-icon { width: 17px; height: 17px; }
}

/* ── RESPONSIVE (phone, fallback device — usable, nothing overflows) ── */

@media (max-width: 640px) {
  /* Toolbar condenses and wraps instead of overflowing off-screen. */
  .jwldraw-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 6px 8px;
    gap: 2px;
    row-gap: 4px;
  }
  .jwldraw-toolbar__left, .jwldraw-toolbar__right { gap: 2px; }
  .jwldraw-toolbar__center { display: none; }
  .jwldraw-toolbar-divider { display: none; }
  .jwldraw-tool-btn { width: 40px; height: 40px; }
  .jwldraw-icon { width: 18px; height: 18px; }
  .jwldraw-brush-btn { height: 40px; padding: 0 12px; gap: 8px; }
  .jwldraw-brush-btn__chevron { display: none; }
  .jwldraw-brush-btn__label { font-size: 12px; }
  .jwldraw-save-btn { height: 40px; padding: 0 14px; margin-left: 4px; }
  .jwldraw-save-btn__icon { display: none; }

  /* Picker pins to the viewport instead of hanging off the button. */
  .jwldraw-brush-menu {
    position: fixed;
    top: 104px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 70dvh;
    overflow-y: auto;
  }

  /* Slim side rails. */
  .jwldraw-sliders { width: 48px; padding: 14px 0; gap: 14px; }
  .jwldraw-eyebrow { font-size: 8.5px; letter-spacing: 0.16em; }
  .jwldraw-slider-value { font-size: 10px; }
  .jwldraw-vertical-slider { width: 32px; }
  .jwldraw-vertical-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-left: -8px; }
  .jwldraw-vertical-slider::-moz-range-thumb { width: 18px; height: 18px; }

  .jwldraw-layer-panel { width: 58px; padding: 14px 6px; align-items: center; }
  .jwldraw-layer-btn { padding: 0 6px; height: 44px; }
  .jwldraw-layer-btn__name { display: none; }
  .jwldraw-layer-btn--active::after { display: none; }

  .jwldraw-canvas-wrapper { min-width: 0; }

  .jwldraw-empty__headline { font-size: 24px; }
  .jwldraw-empty__hints { font-size: 9px; letter-spacing: 0.14em; }
  .jwldraw-focus-exit { width: 44px; height: 44px; top: 12px; right: 12px; }
  .jwldraw-toast { padding: 12px 16px; gap: 10px; font-size: 12.5px; max-width: calc(100vw - 24px); }
  .jwldraw-color-panel { position: fixed; top: 104px; left: 8px; right: 8px; width: auto; max-height: 70dvh; overflow-y: auto; }
}

/* ── MOTION PREFERENCES ── */

@media (prefers-reduced-motion: reduce) {
  .jwldraw-toolbar,
  .jwldraw-sliders,
  .jwldraw-layer-panel,
  .jwldraw-toast,
  .jwldraw-empty,
  .jwldraw-focus-exit,
  .jwldraw-brush-btn,
  .jwldraw-brush-btn__chevron,
  .jwldraw-brush-menu {
    transition: none;
  }
  .jwldraw-focus-hint--show {
    animation: none;
    opacity: 0;
  }
}
/* =============================================================================
   JWLRY.DESIGN - METAL SELECTOR BUTTONS
   ============================================================================= */

/* Metal selector grid - 3 columns for 6 items */
.metal-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .metal-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   METAL BUTTON - Same 3D tactile style as stone buttons
   ============================================================================= */

.metal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  min-height: 90px;
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 3px var(--stone-btn-highlight),
    inset 2px 0 3px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

.metal-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.metal-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transform: translateY(-1px);
}

.metal-btn:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

.metal-btn.selected {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px var(--stone-btn-accent-glow);
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}

.metal-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}


/* =============================================================================
   METAL ICON WRAPPER - Dual SVG layers for glow effect
   ============================================================================= */

.metal-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}

.metal-svg-glow,
.metal-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

.metal-svg-glow {
  z-index: 1;
  opacity: 0;
}

.metal-svg-main {
  z-index: 2;
  color: #777777;
}


/* =============================================================================
   METAL-SPECIFIC COLORS
   ============================================================================= */

/* Yellow Gold */
.metal-btn.yellow-gold .metal-svg-main { color: #D4AF37; }
.metal-btn.yellow-gold .metal-svg-glow { color: #D4AF37; }
.metal-btn.yellow-gold:hover .metal-svg-main { color: #E5C048; }
.metal-btn.yellow-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 1))
          drop-shadow(0 0 12px rgba(212, 175, 55, 0.8))
          drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
}
.metal-btn.yellow-gold.selected .metal-svg-main { color: #F5D058; }

/* White Gold */
.metal-btn.white-gold .metal-svg-main { color: #C0C0C0; }
.metal-btn.white-gold .metal-svg-glow { color: #E8E8E8; }
.metal-btn.white-gold:hover .metal-svg-main { color: #E8E8E8; }
.metal-btn.white-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(232, 232, 232, 1))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.8))
          drop-shadow(0 0 20px rgba(232, 232, 232, 0.5));
}
.metal-btn.white-gold.selected .metal-svg-main { color: #FFFFFF; }

/* Rose Gold */
.metal-btn.rose-gold .metal-svg-main { color: #B76E79; }
.metal-btn.rose-gold .metal-svg-glow { color: #B76E79; }
.metal-btn.rose-gold:hover .metal-svg-main { color: #D4909A; }
.metal-btn.rose-gold.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(183, 110, 121, 1))
          drop-shadow(0 0 12px rgba(183, 110, 121, 0.8))
          drop-shadow(0 0 20px rgba(183, 110, 121, 0.5));
}
.metal-btn.rose-gold.selected .metal-svg-main { color: #E4A0AA; }

/* Platinum */
.metal-btn.platinum .metal-svg-main { color: #A8A8A8; }
.metal-btn.platinum .metal-svg-glow { color: #E5E4E2; }
.metal-btn.platinum:hover .metal-svg-main { color: #D0D0D0; }
.metal-btn.platinum.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(229, 228, 226, 1))
          drop-shadow(0 0 12px rgba(229, 228, 226, 0.8))
          drop-shadow(0 0 20px rgba(229, 228, 226, 0.5));
}
.metal-btn.platinum.selected .metal-svg-main { color: #F0F0EE; }

/* Silver */
.metal-btn.silver .metal-svg-main { color: #A0A0A0; }
.metal-btn.silver .metal-svg-glow { color: #C0C0C0; }
.metal-btn.silver:hover .metal-svg-main { color: #C8C8C8; }
.metal-btn.silver.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 1))
          drop-shadow(0 0 12px rgba(192, 192, 192, 0.8))
          drop-shadow(0 0 20px rgba(192, 192, 192, 0.5));
}
.metal-btn.silver.selected .metal-svg-main { color: #E0E0E0; }

/* Two-tone Yellow/White */
.metal-btn.two-tone-yellow-white .metal-svg-main { color: #D4AF37; }
.metal-btn.two-tone-yellow-white .metal-svg-glow { color: #D4AF37; }
.metal-btn.two-tone-yellow-white:hover .metal-svg-main { color: #E5C048; }
.metal-btn.two-tone-yellow-white.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.6))
          drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}
.metal-btn.two-tone-yellow-white.selected .metal-svg-main { color: #F5D058; }

/* Two-tone Rose/White */
.metal-btn.two-tone-rose-white .metal-svg-main { color: #B76E79; }
.metal-btn.two-tone-rose-white .metal-svg-glow { color: #B76E79; }
.metal-btn.two-tone-rose-white:hover .metal-svg-main { color: #D4909A; }
.metal-btn.two-tone-rose-white.selected .metal-svg-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(183, 110, 121, 0.8))
          drop-shadow(0 0 12px rgba(232, 232, 232, 0.6))
          drop-shadow(0 0 20px rgba(183, 110, 121, 0.4));
}
.metal-btn.two-tone-rose-white.selected .metal-svg-main { color: #E4A0AA; }


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.metal-btn .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
}

.metal-btn:hover .label {
  color: var(--stone-btn-text-hover);
}

.metal-btn.selected .label {
  color: var(--stone-btn-text-active);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) {
  .metal-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .metal-btn:hover .metal-svg-main {
    color: inherit;
  }

  .metal-btn:hover .label {
    color: var(--stone-btn-text);
  }
}
/* Mood Board Aesthetic Card */

.mood-board-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mood-board-card--active {
  border-left: 4px solid rgb(147, 51, 234);
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.15);
}

.mood-board-card--ready {
  border-left: 4px solid transparent;
}

/* Questionnaire sections when mood-controlled */

.questionnaire-section {
  transition: opacity 0.3s ease, margin 0.3s ease;
}

/* Hide entire section when mood-controlled so it doesn't occupy grid space */
.questionnaire-section.mood-controlled {
  display: none;
}

.questionnaire-section.mood-controlled > [data-mood-section-target="content"] {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.5);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Questionnaire sections when user-controlled (overridden) */

.questionnaire-section.user-controlled > [data-mood-section-target="content"] {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Mood toggle bar styling */

.mood-toggle-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(147, 51, 234, 0.08);
  border: 1px solid rgba(147, 51, 234, 0.2);
}

.questionnaire-section:not(.mood-controlled):not(.user-controlled) .mood-toggle-bar {
  display: none;
}

/* Mood Control Panel — compact section overrides card */

.mood-control-panel-inner {
  border-left: 4px solid rgb(147, 51, 234);
}

/* Hide individual toggle bars when the control panel is active */
form.mood-panel-active .mood-toggle-bar {
  display: none !important;
}
/* =============================================================================
   JWLRY.DESIGN - TEXT-ONLY OPTION BUTTONS
   Simpler variant of stone buttons - no icons, just labels
   ============================================================================= */

/* Option selector grids - various column counts */
.option-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.option-selector-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.option-selector-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.option-selector-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.option-selector-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 600px) {
  .option-selector-grid { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .option-selector-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .option-selector-grid,
  .option-selector-grid.cols-2,
  .option-selector-grid.cols-3,
  .option-selector-grid.cols-4,
  .option-selector-grid.cols-5,
  .option-selector-grid.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   OPTION BUTTON - Text-only tactile button
   ============================================================================= */

.option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  min-height: 48px;
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 3px var(--stone-btn-highlight),
    inset 2px 0 3px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

.option-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.option-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transform: translateY(-1px);
}

.option-btn:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}

.option-btn.selected {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px var(--stone-btn-accent-glow);
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}

.option-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}

/* Disabled state */
.option-btn.disabled,
.option-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.option-btn .label {
  font-size: 12px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.3;
}

.option-btn:hover .label {
  color: var(--stone-btn-text-hover);
}

.option-btn.selected .label {
  color: var(--stone-btn-text-active);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}

.option-btn.disabled .label {
  color: var(--stone-btn-text);
}


/* =============================================================================
   MULTI-SELECT VARIANT (checkboxes instead of radio)
   ============================================================================= */

.option-btn.multi-select.selected {
  /* Same as selected but can have multiple */
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) {
  .option-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .option-btn:hover .label {
    color: var(--stone-btn-text);
  }
}


/* =============================================================================
   STRUCTURE THUMBNAILS (Ring Structure selector)
   ============================================================================= */

.structure-thumbnail {
  width: 36px;
  height: 24px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.option-btn:hover .structure-thumbnail {
  opacity: 0.7;
}

.option-btn.selected .structure-thumbnail {
  opacity: 1;
}

.structure-thumbnail .structure-svg {
  width: 100%;
  height: 100%;
  color: var(--stone-btn-text);
}

.option-btn.selected .structure-thumbnail .structure-svg {
  color: var(--stone-btn-text-active);
}

/* Adjust option-btn layout when it contains a structure thumbnail */
.option-btn:has(.structure-thumbnail) {
  flex-direction: column;
  padding: 8px 6px;
  gap: 2px;
}
/* =============================================================================
   JWLRY.DESIGN - RAISED PANEL CARDS
   Subtle embossed/raised panel effect for form section containers
   Creates the appearance of physical panels slightly lifted off the background
   ============================================================================= */

/* CSS Variables (inheriting from skin tokens via body) */
body {
  --panel-surface: var(--color-surface, #1a1a1a);
  --panel-surface-light: var(--color-surface-light, #2a2a2a);
  --panel-surface-dark: var(--btn-surface-dark, #0d0d0d);
  --panel-highlight: rgba(255, 255, 255, 0.04);
  --panel-highlight-edge: rgba(255, 255, 255, 0.06);
  --panel-shadow: rgba(0, 0, 0, 0.35);
  --panel-shadow-soft: rgba(0, 0, 0, 0.15);
}


/* =============================================================================
   RAISED PANEL - Subtle embossed container effect
   ============================================================================= */

.raised-panel {
  position: relative;

  /* Semi-transparent white glass effect */
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Clean shadow for lifted appearance */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.06);

  /* Subtle border for definition */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}

/* Solid beige panels on light ombre pages — no blur needed */
body.home-beige .raised-panel {
  background: #efeae5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: #dfd5cb;
}

/* Tighter panel padding on phones — the designer stacks ~30 panels, so the
   default p-4 adds a lot of scroll length at 360-480px widths */
@media (max-width: 480px) {
  .raised-panel.p-4 {
    padding: 0.75rem;
  }
}

/* Quick design mode: hide Tier-3 fields (.advanced-field carriers).
   !important because conditional handlers set inline style.display on these
   wrappers — the class must win in both directions. */
.advanced-hidden {
  display: none !important;
}

/* Top highlight pseudo-element - disabled for clean white look */
.raised-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  border-radius: inherit;
}


/* =============================================================================
   VARIANT: Slightly more pronounced for larger/important sections
   ============================================================================= */

.raised-panel--prominent {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08);
}


/* =============================================================================
   VARIANT: Even more subtle for nested/secondary panels
   ============================================================================= */

.raised-panel--subtle {
  background: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.raised-panel--subtle::before {
  background: none;
}


/* =============================================================================
   ENSURE NESTED FORM ELEMENTS FEEL INSET
   ============================================================================= */

/* Input fields inside raised panels - more opaque for readability */
.raised-panel input[type="text"],
.raised-panel input[type="email"],
.raised-panel input[type="number"],
.raised-panel textarea,
.raised-panel select {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.raised-panel input[type="text"]:focus,
.raised-panel input[type="email"]:focus,
.raised-panel input[type="number"]:focus,
.raised-panel textarea:focus,
.raised-panel select:focus {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--stone-btn-accent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 2px var(--stone-btn-accent-glow);
}

/* Nested card sections (like inside Toi et Moi or Three-Stone) */
.raised-panel .bg-muted\/10 {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
}


/* =============================================================================
   REAL GEM MODE - White/neutral panels when UC gemstone is pre-selected
   ============================================================================= */

.real-gem-mode .raised-panel {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
}

.real-gem-mode .raised-panel::before {
  background: none;
}

/* Keep input fields styled appropriately in glass panels */
.real-gem-mode .raised-panel input[type="text"],
.real-gem-mode .raised-panel input[type="email"],
.real-gem-mode .raised-panel input[type="number"],
.real-gem-mode .raised-panel textarea,
.real-gem-mode .raised-panel select {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.real-gem-mode .raised-panel input[type="text"]:focus,
.real-gem-mode .raised-panel input[type="email"]:focus,
.real-gem-mode .raised-panel input[type="number"]:focus,
.real-gem-mode .raised-panel textarea:focus,
.real-gem-mode .raised-panel select:focus {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--stone-btn-accent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 2px var(--stone-btn-accent-glow);
}


/* =============================================================================
   GLASS BUTTON - Translucent glass effect for buttons
   ============================================================================= */

.glass-btn {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
}


/* =============================================================================
   COLLAPSIBLE CARD - Real Gem Mode Collapse/Expand Animation
   ============================================================================= */

/* Container that wraps the card content for collapse animation */
.card-collapsible-content {
  overflow: hidden;
  max-height: 1000px; /* Large enough for any content */
  opacity: 1;
  transition: max-height 0.3s ease-out,
              opacity 0.2s ease-out;
}

/* Collapsed state - hides the options grid/slider */
.raised-panel.collapsed .card-collapsible-content {
  max-height: 0;
  opacity: 0;
}

/* Normal header hides when collapsed */
.raised-panel .card-normal-header {
  opacity: 1;
  max-height: 50px;
  margin-bottom: 0.75rem;
  transition: opacity 0.2s ease-out,
              max-height 0.3s ease-out,
              margin 0.3s ease-out;
}

.raised-panel.collapsed .card-normal-header {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}

/* Collapsed header - hidden by default, shown when collapsed */
.card-collapsed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-in,
              max-height 0.3s ease-in;
}

.raised-panel.collapsed .card-collapsed-header {
  opacity: 1;
  max-height: 50px;
}

/* Collapsed header title with Premium badge */
.card-collapsed-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-collapsed-title .label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* Locked value display on right side */
.card-collapsed-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.card-collapsed-value .lock-icon {
  width: 14px;
  height: 14px;
  color: #9ca3af;
}

/* Animate the card padding shrinking when collapsed */
.raised-panel.collapsed {
  padding-top: 12px;
  padding-bottom: 12px;
  transition: padding 0.3s ease-out;
}

/* Subtle background change when collapsed to indicate locked state */
.raised-panel.collapsed {
  background: rgba(255, 255, 255, 0.4);
  border-color: rgba(200, 200, 200, 0.5);
}

/* =============================================================================
   GEMSTONE CATEGORIES - Lock & Collapse when Real Gem is active
   ============================================================================= */

/* Lock icon in category headings - hidden by default */
.gemstone-category-heading .category-lock-icon {
  display: none;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  color: #9ca3af;
  vertical-align: middle;
}

/* Show lock icons when categories are locked */
.gemstone-categories-wrapper.locked .category-lock-icon {
  display: inline-block;
}

/* Collapse the gemstone grid when locked (keep heading visible) */
.gemstone-categories-wrapper.locked .gemstone-selector-grid {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
}

/* Normal state - grid is visible */
.gemstone-categories-wrapper .gemstone-selector-grid {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
}

/* Reduce spacing between categories when locked */
.gemstone-categories-wrapper.locked .gemstone-category {
  margin-bottom: 0.25rem;
}

/* Ensure Real Gems section always stays visible */
.real-gems-section {
  display: block !important;
  opacity: 1 !important;
  max-height: none !important;
}

/* Override locked wrapper styles for Real Gems section grid */
/* This ensures the Real Gems grid stays visible even if it ends up inside the wrapper */
.real-gems-section .gemstone-selector-grid {
  max-height: 1000px !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-top: 0.5rem !important;
}

.gemstone-categories-wrapper.locked .real-gems-section .gemstone-selector-grid {
  max-height: 1000px !important;
  opacity: 1 !important;
  overflow: visible !important;
}
/* =============================================================================
   RING LOADER - Design Generation Loading Animation
   Shimmer gradient background with rotating status messages
   ============================================================================= */

.ring-loader {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  container-type: inline-size;
}

.ring-loader__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    #98ccc2,
    #9ed3c7,
    #e9d79b,
    #9ed3c7,
    #98ccc2
  );
  background-size: 300% 300%;
  animation: ringLoaderPulse 8s ease-in-out infinite;
}

.ring-loader__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px;
}

.ring-loader__message {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.75rem, 2.5cqi, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.025em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.ring-loader__dots {
  display: flex;
  gap: 8px;
}

.ring-loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.5s ease;
}

.ring-loader__dot--active {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.25);
}

@keyframes ringLoaderPulse {
  0%, 100% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 100%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 0%;
  }
}

/* Fade-in animation for message text */
.ring-loader .animate-fade-in {
  animation: ringLoaderFadeIn 0.6s ease-out;
}

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

/* Mini variant for dashboard variation grid */
.ring-loader--mini {
  border-radius: 4px;
}

.ring-loader--mini .ring-loader__content {
  gap: 8px;
  padding: 8px;
}

.ring-loader--mini .ring-loader__message {
  font-size: clamp(0.7rem, 4cqi, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  line-height: 1.3;
  max-width: 90%;
}

/* Gentle float animation for moderation upload text */
.moderation-text-animate {
  animation: moderationFloat 2.5s ease-in-out infinite;
}

@keyframes moderationFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.95;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* Respect reduced motion: drop the decorative shimmer and the text fade's
   travel (the rotating status text still updates -- that is information, not
   motion -- so the loader still honestly signals work in progress). */
@media (prefers-reduced-motion: reduce) {
  .ring-loader__shimmer { animation: none; }
  .ring-loader .animate-fade-in { animation: none; }
  .ring-loader__dot { transition: none; }
  .moderation-text-animate { animation: none; }
}
/* Save-your-ring gate (guest-first Discover): dim + floating card + the
   auth frame inside it. Themed entirely from the skin tokens (tokens.css) —
   nothing partner-specific here; the partner appears only as their logo
   image in the partial. Mobile-first: clean at 360px. */

.save-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.save-gate__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity var(--transition-speed-slow, 0.4s) ease;
}

.save-gate--open .save-gate__scrim {
  opacity: 1;
}

.save-gate__card {
  position: relative;
  width: min(92vw, 420px);
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--color-surface-light);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg, 16px);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-family: var(--font-primary, inherit);
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity var(--transition-speed-slow, 0.4s) ease,
    transform var(--transition-speed-slow, 0.4s) ease;
}

.save-gate--open .save-gate__card {
  opacity: 1;
  transform: none;
}

.save-gate__logo {
  display: block;
  max-height: 44px;
  max-width: 60%;
  margin: 0 auto 0.9rem;
}

.save-gate__title {
  font-family: var(--font-display, serif);
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

.save-gate__lede {
  color: var(--color-muted-foreground);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}

/* --- the auth frame (Devise frame templates) --- */

.save-gate__pane {
  text-align: left;
}

.save-gate__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.save-gate__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.save-gate__label {
  font-size: 0.85rem;
  font-weight: 600;
}

.save-gate__hint {
  color: var(--color-muted-foreground);
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 0.25rem;
}

.save-gate__input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: var(--color-muted);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius, 8px);
  font-size: 1rem;
}

.save-gate__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: transparent;
}

.save-gate__remember,
.save-gate__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.save-gate__checkbox {
  margin-top: 0.15rem;
  accent-color: var(--color-accent);
}

.save-gate__submit {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: none;
  border-radius: var(--border-radius, 8px);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-speed, 0.2s) ease;
}

.save-gate__submit:hover {
  filter: brightness(1.06);
}

.save-gate__switch {
  color: var(--color-muted-foreground);
  font-size: 0.85rem;
  text-align: center;
  margin: 0.9rem 0 0;
}

.save-gate__switch-link {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: underline;
}

.save-gate__alert {
  background: color-mix(in srgb, var(--color-error, #b3261e) 12%, transparent);
  color: var(--color-error, #b3261e);
  border-radius: var(--border-radius, 8px);
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin: 0 0 0.85rem;
}

.save-gate__pane--pending {
  text-align: center;
}

.save-gate__pending-title {
  font-family: var(--font-display, serif);
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}

.save-gate__pending-body {
  color: var(--color-muted-foreground);
  font-size: 0.9rem;
  margin: 0;
}

.save-gate__dismiss {
  display: block;
  margin: 1.1rem auto 0;
  background: none;
  border: none;
  color: var(--color-muted-foreground);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .save-gate__scrim,
  .save-gate__card {
    transition: none;
  }
}
/* =============================================================================
   JWLRY.DESIGN - SECONDARY FEATURE SUMMARY / EDITOR
   Calm summary rows with expandable refinement editors for
   secondary stone settings (halo accents, side stones, etc.)
   ============================================================================= */

/* Summary Row — compact, informational, non-overwhelming */
.secondary-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  gap: 12px;
}

.secondary-summary-content {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.secondary-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground, #1a1a1a);
  white-space: nowrap;
  flex-shrink: 0;
}

.secondary-summary-text {
  font-size: 13px;
  color: var(--color-muted-foreground, #6b6b6b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Refine / Done button */
.secondary-summary-refine {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gold-1, #b8860b);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.secondary-summary-refine:hover {
  background: rgba(184, 134, 11, 0.08);
}

.secondary-summary-refine:active {
  background: rgba(184, 134, 11, 0.15);
}

/* Editor Panel — expands below summary */
.secondary-editor {
  margin-top: 8px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Editor field groups */
.secondary-editor .editor-field {
  margin-bottom: 12px;
}

.secondary-editor .editor-field:last-child {
  margin-bottom: 0;
}

.secondary-editor .editor-field label {
  display: block;
  font-size: 11px;
  color: var(--color-muted-foreground, #6b6b6b);
  margin-bottom: 4px;
  font-weight: 500;
}

/* Compact select styling within editor */
.secondary-editor select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--color-border, #d4d4d4);
  border-radius: 6px;
  background: var(--color-background, #ffffff);
  color: var(--color-foreground, #1a1a1a);
  outline: none;
  transition: border-color 0.15s ease;
}

.secondary-editor select:focus {
  border-color: var(--color-gold-1, #b8860b);
}

/* Compact slider within editor */
.secondary-editor .editor-slider {
  position: relative;
}

.secondary-editor .editor-slider .slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-muted-foreground, #999);
  margin-bottom: 2px;
}

.secondary-editor .editor-slider input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  background: #e5e5e5;
  cursor: pointer;
  accent-color: var(--color-gold-1, #b8860b);
}

.secondary-editor .editor-slider .slider-value {
  text-align: center;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}


/* =============================================================================
   COMPACT SELECTOR — used inside Toi et Moi paired primary cards
   Smaller stone buttons, tighter grid, fits in half-width columns
   ============================================================================= */

.compact-selector {
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.compact-selector .shape-selector-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.compact-selector .stone-btn {
  padding: 6px 4px;
  min-height: 36px;
}

.compact-selector .stone-icon-wrapper {
  width: 24px;
  height: 24px;
}

.compact-selector .stone-btn .label {
  font-size: 10px;
}

@media (max-width: 600px) {
  .compact-selector .shape-selector-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* =============================================================================
   JWLRY.DESIGN - 3D TACTILE STONE SHAPE BUTTONS
   Inspired by vintage hardware button aesthetics
   ============================================================================= */

/* CSS Custom Properties - mapped to skin tokens
   Defined on body to inherit from skin's inline styles */
body {
  /* Button surface colors - derived from skin tokens */
  --stone-btn-surface: var(--btn-surface, var(--color-surface, #1a1a1a));
  --stone-btn-surface-light: var(--btn-surface-light, var(--color-surface-light, #2a2a2a));
  --stone-btn-surface-dark: var(--btn-surface-dark, #0d0d0d);
  --stone-btn-highlight: var(--btn-highlight, rgba(255, 255, 255, 0.08));
  --stone-btn-shadow: var(--btn-shadow, rgba(0, 0, 0, 0.6));
  --stone-btn-shadow-soft: var(--btn-shadow-soft, rgba(0, 0, 0, 0.3));
  --stone-btn-shadow-inner: var(--btn-shadow-inner, rgba(0, 0, 0, 0.2));

  /* Accent colors - from skin */
  --stone-btn-accent: var(--color-accent, #c9a227);
  --stone-btn-accent-glow: var(--color-accent-glow, rgba(201, 162, 39, 0.25));

  /* Label/text colors */
  --stone-btn-text: var(--btn-text, var(--color-muted-foreground, #888888));
  --stone-btn-text-hover: var(--btn-text-hover, var(--color-foreground, #ffffff));
  --stone-btn-text-active: var(--color-accent, #c9a227);

  /* SVG icon colors */
  --stone-btn-icon: var(--btn-icon, var(--color-muted-foreground, #777777));
  --stone-btn-icon-hover: var(--btn-icon-hover, var(--color-foreground, #ffffff));
  --stone-btn-icon-active: var(--color-accent, #c9a227);
  --stone-btn-icon-selected: var(--btn-icon-selected, #ffffff);
}


/* =============================================================================
   BASE BUTTON STYLES - Raised 3D Effect
   ============================================================================= */

.stone-btn {
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  min-height: 90px;

  /* Reset */
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;

  /* 3D Raised Surface */
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  border-radius: 8px;

  /* The magic: layered shadows create the raised illusion */
  box-shadow:
    /* Outer depth shadows */
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    /* Bottom dark edge (appears to be shadow from button height) */
    inset 0 -2px 3px var(--stone-btn-shadow),
    /* Top light edge (appears to catch light from above) */
    inset 0 2px 3px var(--stone-btn-highlight),
    /* Left light edge */
    inset 2px 0 3px var(--stone-btn-highlight),
    /* Right dark edge */
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    /* Subtle inner shadow for depth */
    inset 0 0 12px var(--stone-btn-shadow-inner);

  /* Smooth transitions */
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

/* Subtle top highlight for extra depth */
.stone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}


/* =============================================================================
   HOVER STATE - Slightly more raised
   ============================================================================= */

.stone-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);

  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);

  transform: translateY(-1px);
}


/* =============================================================================
   ACTIVE/PRESSED STATE - Pushed in effect
   ============================================================================= */

.stone-btn:active,
.stone-btn.active {
  /* Push down */
  transform: translateY(2px);

  /* Inverted gradient - darker on top creates sunken illusion */
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  /* Inverted shadows - top shadow inside, bottom highlight */
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}


/* =============================================================================
   SELECTED STATE - Pushed in + Gold accent
   ============================================================================= */

.stone-btn.selected {
  transform: translateY(2px);

  /* Sunken surface with accent tint */
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);

  box-shadow:
    /* Accent outer glow */
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    /* Pressed-in shadows */
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    /* Accent inner glow */
    inset 0 0 15px var(--stone-btn-accent-glow);

  /* Gold border */
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}


/* =============================================================================
   ICON STYLING - Layered SVG approach (white glow behind, gold on top)
   ============================================================================= */

.stone-icon-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
}

/* Mount selector icons - twice the size */
[data-controller="mount-selector"] .stone-icon-wrapper {
  width: 72px;
  height: 72px;
}

/* Mount selector - brighter icons (override the duller stone shape colors) */
[data-controller="mount-selector"] .stone-svg-main {
  color: #888888;
}

[data-controller="mount-selector"] .stone-btn:hover .stone-svg-main {
  color: var(--stone-btn-icon-hover);
}

[data-controller="mount-selector"] .stone-btn.selected .stone-svg-main {
  color: var(--stone-btn-icon-selected);
}

/* Rotate Kite shape so point faces upward like pear */
[data-shape="Kite"] .stone-icon-wrapper {
  transform: rotate(180deg);
}

.stone-svg-glow,
.stone-svg-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Glow layer - behind, hidden by default */
.stone-svg-glow {
  z-index: 1;
  color: white;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1))
          drop-shadow(0 0 12px rgba(255, 255, 255, 0.8))
          drop-shadow(0 0 20px rgba(255, 255, 255, 0.5))
          drop-shadow(0 0 30px rgba(255, 255, 255, 0.3));
}

/* Main layer - on top */
.stone-svg-main {
  z-index: 2;
  color: var(--stone-btn-icon);
}

/* Hover state */
.stone-btn:hover .stone-svg-main {
  color: var(--stone-btn-icon-hover);
}

/* Selected state - accent glow behind, light color on top */
.stone-btn.selected .stone-svg-glow {
  opacity: 1;
  color: var(--stone-btn-icon-active);
  filter: drop-shadow(0 0 6px var(--stone-btn-accent))
          drop-shadow(0 0 12px var(--stone-btn-accent-glow))
          drop-shadow(0 0 20px var(--stone-btn-accent-glow))
          drop-shadow(0 0 30px var(--stone-btn-accent-glow));
}

.stone-btn.selected .stone-svg-main {
  color: var(--stone-btn-icon-selected);
}

/* Fallback for simple svg/icon usage */
.stone-btn svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn .icon {
  width: 36px;
  height: 36px;
  color: var(--stone-btn-icon);
  stroke-width: 1.5;
  fill: none;
  transition: color 0.2s ease, filter 0.2s ease;
}

.stone-btn:hover svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn:hover .icon {
  color: var(--stone-btn-icon-hover);
}

.stone-btn.selected svg:not(.stone-svg-glow):not(.stone-svg-main),
.stone-btn.selected .icon {
  color: var(--stone-btn-icon-active);
}


/* =============================================================================
   LABEL STYLING
   ============================================================================= */

.stone-btn .label,
.stone-btn span:last-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.01em;
}

.stone-btn:hover .label,
.stone-btn:hover span:last-child {
  color: var(--stone-btn-text-hover);
}

.stone-btn.selected .label,
.stone-btn.selected span:last-child {
  color: var(--stone-btn-text-active);
  /* Subtle shadow for depth */
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}


/* =============================================================================
   ACCESSIBILITY - Focus state
   ============================================================================= */

.stone-btn:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}


/* =============================================================================
   OPTIONAL: Touch device optimizations
   ============================================================================= */

@media (hover: none) {
  .stone-btn:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .stone-btn:hover svg {
    color: var(--stone-btn-icon);
  }

  .stone-btn:hover .label {
    color: var(--stone-btn-text);
  }
}


/* =============================================================================
   LOCKED STATE - For Real Gems pre-selection
   ============================================================================= */

/* Locked state for stone shape buttons when real gem is selected - white/neutral appearance */
.stone-btn.locked {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
  background: #ffffff;
  border-color: #e0e0e0;
  box-shadow: none;
}

.stone-btn.locked svg {
  color: #cccccc;
  opacity: 0.5;
}

.stone-btn.locked .label {
  color: #999999;
}

/* Line-art lock icon in top-right corner */
.stone-btn.locked::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999999' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 10;
}
/* ============================================================
   JD Swipe (/discover + /start) — taste-study flow and the
   path chooser. Adapted from design_handoff/JD Swipe. Entirely
   token-driven (skins re-colour it); jewellery gold comes from
   --color-jewellery-gold in tokens.css — a metal, deliberately
   skin-independent (LOVE stamp, reveal keyline, taste-line
   dots, chooser keyline). Animation durations multiply by
   --animation-level so Classic Heirloom (level 0) renders
   instantly.
   ============================================================ */

.sf {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-primary, 'Montserrat', sans-serif);
}
.sf-column { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; }

/* ---------- path chooser (/start) ---------- */
.sf-chooser {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 62px 20px 10px;
  box-sizing: border-box;
}
.sf-chooser-head { flex: none; text-align: center; }
.sf-chooser-wordmark {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700; font-size: 16px;
  color: var(--color-accent);
}
.sf-chooser-title {
  margin-top: 12px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500; font-size: 27px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-foreground);
}
/* All four cards share one phone viewport: each flexes, none scroll. */
.sf-choices {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px; margin-top: 18px;
}
.sf-choices form { display: contents; }
.sf-choice {
  position: relative; overflow: hidden;
  flex: 1; min-height: 110px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 0; text-align: left;
  background: var(--color-surface);
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  cursor: pointer;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.4);
  transition: transform 100ms ease, box-shadow 200ms ease;
}
.sf-choice:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.45); }
.sf-choice:active { transform: translateY(2px); }
/* Image lives on the right; a left-to-right scrim keeps text on brand colour. */
.sf-choice img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 82% center;
}
.sf-choice-vision img { object-position: 82% 30%; }
.sf-choice-surprise img { object-position: 82% 40%; }
.sf-choice-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-background) 34%, transparent 82%);
}
/* The surprise card's inner gold keyline — the reveal vitrine's language. */
.sf-choice-keyline {
  position: absolute; inset: 6px;
  border: 1px solid color-mix(in srgb, var(--color-jewellery-gold) 50%, transparent);
  border-radius: 11px;
  pointer-events: none;
}
.sf-choice-text { position: relative; display: block; padding: 16px 130px 16px 18px; }
.sf-choice-title {
  display: block;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700; font-size: 19px; line-height: 1.2;
  color: var(--color-foreground);
}
.sf-choice-sub {
  display: block; margin-top: 5px; max-width: 200px;
  font-size: 12px; line-height: 1.5;
  color: var(--color-muted-foreground);
}
.sf-chooser-skip { flex: none; text-align: center; padding: 12px 0 16px; }
.sf-chooser-skip .sf-startover { margin-top: 0; }

/* ---------- surprise gathering (/surprise) — handoff v2 ----------
   Tap-first form. Rows expand via CSS :has() with a Stimulus layer for
   the behaviours CSS can't do (not-much exclusivity, live name helper,
   DS .selected sync, More options). The full-screen gold keyline frame
   is this path's signature. DS metal-btn / gemstone-btn components are
   reused with the dark-green-glass overrides from the changelog. */
.sp-frame {
  position: fixed; inset: 10px;
  border: 1px solid color-mix(in srgb, var(--color-jewellery-gold) 40%, transparent);
  border-radius: 18px;
  pointer-events: none;
  z-index: 40;
}
.sp-gather {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 58px 30px 36px;
  box-sizing: border-box;
}
.sp-head { flex: none; text-align: center; }
.sp-eyebrow {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-jewellery-gold);
}
.sp-title {
  margin-top: 12px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--color-foreground);
}
.sp-lede { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--color-muted-foreground); }
.sp-form { display: flex; flex-direction: column; gap: 22px; flex: 1; margin-top: 24px; }
.sp-block { display: block; }
.sp-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted-foreground);
}
/* The gift, not a form: Playfair italic name input with a gold focus. */
.sp-input {
  width: 100%; margin-top: 10px; padding: 13px 16px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-foreground);
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic; font-size: 19px;
}
.sp-input:focus { outline: none; border-color: color-mix(in srgb, var(--color-jewellery-gold) 60%, transparent); }
.sp-hint { display: block; margin-top: 8px; font-size: 11.5px; font-style: italic; color: var(--color-muted-foreground); }
/* Know rows: tactile emboss (quiz-button tokens) with a circle check. */
.sp-know-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 15px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--btn-surface-light), var(--btn-surface));
  box-shadow: 0 2px 6px var(--btn-shadow-soft), inset 0 1px 0 var(--btn-highlight);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 200ms ease;
}
.sp-know-row:hover { transform: translateY(-1px); }
.sp-know-row:active { transform: translateY(1px); }
.sp-know-row.sp-row-selected,
.sp-know-row:has(.sp-row-input:checked) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-jewellery-gold) 75%, transparent),
              0 2px 6px var(--btn-shadow-soft);
}
.sp-know-row:has(.sp-row-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sp-row-input { position: absolute; opacity: 0; pointer-events: none; }
.sp-row-title { font-size: 13px; font-weight: 600; color: var(--btn-text); }
.sp-row-check {
  flex: none; width: 22px; height: 22px;
  border: 1px solid var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sp-row-check svg {
  width: 12px; height: 12px;
  stroke: var(--color-jewellery-gold); stroke-width: 2.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 200ms ease;
}
.sp-know-row.sp-row-selected .sp-row-check svg,
.sp-know-row:has(.sp-row-input:checked) .sp-row-check svg { opacity: 1; }
.sp-note { display: none; margin-top: 8px; font-size: 11.5px; font-style: italic; line-height: 1.6; color: var(--color-muted-foreground); }
.sp-form:has(input[name="surprise_brief[has_photos]"]:checked) .sp-photos-note { display: block; }
.sp-reassure {
  display: none; margin-top: 10px; text-align: center;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic; font-size: 14px; line-height: 1.6;
  color: var(--color-foreground);
}
.sp-reassure.sp-visible { display: block; }
/* Inline expansions: gentle reveal, never a growing questionnaire. */
.sp-expand {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 300ms ease, opacity 300ms ease;
  /* Dark green glass (changelog §3): accent-derived so it stays
     white-label safe, gold selected accents via the metal token. */
  --stone-btn-surface-light: color-mix(in srgb, var(--color-accent) 42%, rgba(5, 16, 12, 0.9));
  --stone-btn-surface: color-mix(in srgb, var(--color-accent) 26%, rgba(5, 16, 12, 0.9));
  --stone-btn-surface-dark: color-mix(in srgb, var(--color-accent) 16%, rgba(5, 16, 12, 0.92));
  --stone-btn-highlight: rgba(255, 255, 255, 0.22);
  --stone-btn-shadow-inner: rgba(255, 255, 255, 0.05);
  --stone-btn-text: rgba(255, 255, 255, 0.72);
  --stone-btn-icon-selected: #ffffff;
  --stone-btn-accent: var(--color-jewellery-gold);
  --stone-btn-accent-glow: color-mix(in srgb, var(--color-jewellery-gold) 35%, transparent);
}
.sp-form:has(.sp-toggle-metal:checked) .sp-expand-metal,
.sp-form:has(.sp-toggle-stones:checked) .sp-expand-stones {
  max-height: 1200px; opacity: 1; overflow: visible;
}
.sp-expand .sp-hint { margin: 10px 2px 0; }
/* Premium glass finish per chip (changelog §3). */
.sp-expand .metal-btn,
.sp-expand .gemstone-btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
/* No-JS fallback for the DS .selected class. */
.sp-expand .metal-btn:has(:checked),
.sp-expand .gemstone-btn:has(:checked) {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-jewellery-gold) 75%, transparent);
}
/* ---- Selected chips: unmistakable gold edge + corner tick badge ----
   The DS default selected treatment is a faint, per-stone-coloured
   border that barely registers. Here selection must be obvious: a solid
   2px gold edge PLUS a filled-gold badge carrying the same checkmark the
   accordion headers use, so metal and stone chips speak one gold
   language. Scoped with .sp-gather so it overrides the per-gemstone
   .selected outlines/border-colours in gemstone_buttons.css. */
.sp-gather .sp-expand .metal-btn.selected,
.sp-gather .sp-expand .gemstone-btn.selected,
.sp-gather .sp-expand .metal-btn:has(:checked),
.sp-gather .sp-expand .gemstone-btn:has(:checked) {
  border-color: var(--color-jewellery-gold);
  outline: 2px solid var(--color-jewellery-gold);
  outline-offset: -2px;
}
/* The badge overlaps the card corner, so the card (already relative in
   the DS base) must not clip it — drop the base overflow:hidden here and
   keep the grids unclipped too. The base ::before sheen is inset:0 with
   its own radius, so removing the clip is visually safe. */
.sp-expand .metal-btn,
.sp-expand .gemstone-btn { position: relative; overflow: visible; }
.sp-metal-grid,
.sp-gem-grid { overflow: visible; }
/* Filled-gold circle + the accordion's exact checkmark. Gold comes from
   the skin-independent metal token; the tick is a fixed dark ink because
   that gold is a constant (#D4AF37) across skins — a white/contrast
   token would fail against it in light partner skins. Hidden until the
   chip is selected; the real non-visual signal is the checked input. */
.sp-card-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-jewellery-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  z-index: 4;
}
.sp-card-badge svg {
  width: 11px;
  height: 11px;
  stroke: hsl(30, 20%, 10%);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sp-expand .metal-btn.selected .sp-card-badge,
.sp-expand .gemstone-btn.selected .sp-card-badge,
.sp-expand .metal-btn:has(:checked) .sp-card-badge,
.sp-expand .gemstone-btn:has(:checked) .sp-card-badge {
  opacity: 1;
  transform: scale(1);
}
.sp-metal-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 12px;
}
.sp-gem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px;
}
.sp-more { display: none; margin-top: 8px; }
.sp-more.sp-more-open { display: grid; }
.sp-plus { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.sp-more-toggle { font-family: inherit; }
/* CTA: the path's gold shimmer, enabled from zero answers. */
.sp-actions { flex: none; text-align: center; }
.sp-continue {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 54px;
  border: 1px solid var(--color-accent-stroke);
  border-radius: var(--border-radius-lg, 8px);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary), var(--color-accent));
  background-size: 200% 100%;
  color: var(--color-accent-contrast);
  font-family: var(--font-primary, 'Montserrat', sans-serif);
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 10px 30px -6px var(--color-accent-glow);
  cursor: pointer;
  animation: sf-shimmer calc(var(--animation-level, 1) * 3s) linear infinite;
  transition: transform 100ms ease, filter 200ms ease;
}
.sp-continue:hover { transform: translateY(-1px); filter: brightness(1.07); }
.sp-continue:active { transform: translateY(2px); }
.sp-continue-hint { margin-top: 10px; font-size: 11px; }
.sp-skip { display: none; }
.sp-form:has(.sp-fact:checked) .sp-skip,
.sp-form.sp-has-facts .sp-skip { display: inline-block; }

/* ---------- desktop site chrome (handoff changelog §1) ----------
   Phones: untouched full-bleed. Desktop: the existing sidebar offsets
   the flow and the site footer follows it; flow columns stay centred
   in the remaining space. */
.sf-site-footer { display: none; }
@media (min-width: 768px) {
  .sf-shell { margin-left: 14rem; }
  .sf-site-footer { display: block; }
  .sp-frame { left: calc(14rem + 10px); }
}

/* ---------- intro ---------- */
.sf-intro { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; }
.sf-intro-photo { position: absolute; inset: 0 0 auto 0; height: 74dvh; overflow: hidden; }
.sf-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.sf-intro-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.18) 0%, transparent 18%, transparent 34%, var(--color-background) 72%, var(--color-background) 100%);
}
.sf-wordmark {
  position: absolute;
  top: 66px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.sf-intro-block { position: relative; z-index: 2; padding: 0 28px 44px; max-width: 520px; margin: 0 auto; width: 100%; }
.sf-eyebrow {
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}
.sf-intro-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500; font-size: 40px; line-height: 1.12; letter-spacing: -0.01em;
  color: var(--color-foreground);
  margin-top: 12px;
}
.sf-intro-meta { font-size: 13.5px; line-height: 1.75; color: var(--color-muted-foreground); margin-top: 14px; }
.sf-start {
  display: block; width: 100%; height: 56px; margin-top: 26px;
  border-radius: var(--border-radius-lg, 8px);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary));
  border: 1px solid var(--color-accent-stroke);
  color: var(--color-accent-contrast);
  font-family: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 10px 30px -6px var(--color-accent-glow);
  cursor: pointer;
  transition: transform 100ms ease, filter 200ms ease;
}
.sf-start:hover { transform: translateY(-1px); filter: brightness(1.07); }
.sf-start:active { transform: translateY(2px); }

/* ---------- card loop ---------- */
.sf-cards { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
.sf-head { padding: 64px 24px 6px; text-align: center; }
.sf-counter { font-weight: 500; font-size: 11.5px; letter-spacing: 0.22em; color: var(--color-muted-foreground); }
.sf-question {
  margin-top: 8px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic; font-size: 15.5px;
  color: var(--color-foreground);
}
.sf-stage { flex: 1; position: relative; margin: 12px 20px 6px; }
.sf-card {
  position: absolute; inset: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.45);
}
/* The ring shows in full (contain) over a blurred cover copy of itself,
   so the card still reads edge-to-edge with no letterbox and the whole
   ring stays visible — never cropped. */
.sf-card-blur {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(22px); transform: scale(1.12);
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.sf-card-ring {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.sf-card .sf-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.sf-spec {
  position: absolute; left: 0; right: 0; bottom: 18px;
  text-align: center;
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 14px;
}
.sf-under {
  transform: translateY(12px) scale(0.94);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.35);
}
.sf-top { touch-action: none; cursor: grab; z-index: 2; }
.sf-top:active { cursor: grabbing; }

.sf-stamp {
  position: absolute;
  border: 2px solid currentColor; border-radius: 6px;
  padding: 6px 16px;
  font-weight: 700; font-size: 17px; letter-spacing: 0.22em;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
}
.sf-stamp-love { top: 22px; left: 20px; transform: rotate(-9deg); color: var(--color-jewellery-gold); }
.sf-stamp-pass { top: 22px; right: 20px; transform: rotate(9deg); color: rgba(255, 255, 255, 0.9); }
.sf-stamp-unsure {
  top: 22px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px;
  font-size: 15px; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9);
}

.sf-hint {
  text-align: center;
  font-size: 11px; font-style: italic;
  color: var(--color-muted-foreground);
  padding: 8px 20px 0;
}

.sf-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 12px 20px 14px; }
.sf-actions form { display: contents; }
.sf-btn {
  height: 64px;
  border-radius: var(--border-radius-lg, 8px);
  background: linear-gradient(180deg, var(--btn-surface-light), var(--btn-surface));
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px var(--btn-shadow-soft), inset 0 1px 0 var(--btn-highlight);
  color: var(--btn-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-family: inherit; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 100ms ease, color 200ms ease;
}
.sf-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.sf-btn:hover { transform: translateY(-1px); color: var(--btn-text-hover); }
.sf-btn:active { transform: translateY(2px); box-shadow: inset 0 2px 6px var(--btn-shadow-inner, rgba(0, 0, 0, 0.2)); }

/* whisper exit under the buttons — same quiet language as the reveal's
   start-over and the chooser's skip; the session stays in_progress so
   coming back resumes at the same card */
.sf-exit {
  display: block;
  text-align: center;
  padding: 0 20px 26px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-muted-foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-border);
  transition: color 200ms ease;
}
.sf-exit:hover { color: var(--color-foreground); }

/* ---------- reveal ---------- */
.sf-reveal {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 28px 44px;
}
.sf-reveal-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--color-accent);
}
.sf-reveal-eyebrow::before, .sf-reveal-eyebrow::after {
  content: ""; width: 34px; height: 1px; background: var(--color-border);
}
/* Size the wrap to the arch itself (fit-content = the 272px vitrine), not to
   its sibling caption. The wrap + caption share one turbo-frame that is
   centre-sized to its widest line; the long "creating your design…" caption
   would otherwise stretch this wrap, and with it the -10px keyline and the
   centred pedestal, so the gold border only hugged once the shorter "rendered
   from your style" caption swapped in. Pinning to fit-content keeps the border
   hugging the arch in every state. */
.sf-vitrine-wrap { position: relative; width: fit-content; margin: 28px auto 8px; }
.sf-vitrine {
  width: 272px; height: 350px;
  border-radius: 140px 140px 10px 10px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.45);
  position: relative;
}
.sf-vitrine img { width: 100%; height: 100%; object-fit: cover; }
.sf-keyline {
  position: absolute; inset: -10px;
  border: 1px solid color-mix(in srgb, var(--color-jewellery-gold) 55%, transparent);
  border-radius: 150px 150px 16px 16px;
  pointer-events: none;
}
.sf-pedestal {
  position: absolute; left: 50%; bottom: -22px;
  width: 190px; height: 16px; transform: translateX(-50%);
  background: radial-gradient(rgba(0, 0, 0, 0.28), transparent 70%);
  border-radius: 50%;
}
.sf-vitrine-empty {
  position: absolute; inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--color-jewellery-gold) 45%, transparent);
  border-radius: 132px 132px 6px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--color-muted-foreground);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0 18px; text-align: center;
}
.sf-vitrine-empty svg { width: 26px; height: 26px; stroke: var(--color-jewellery-gold); fill: none; stroke-width: 1.2; }

/* Generation spinner in the arch: while a signed-in user's starter
   render is generating we reuse the designer's own ring-loader, shaped
   to fill the vitrine. The arch's overflow:hidden clips it and the gold
   keyline still frames it. Decorative motion multiplies by
   --animation-level (0 = a calm static gradient for Classic Heirloom)
   and is dropped under reduced motion; the honest message rotation keeps
   signalling real work either way. */
.sf-vitrine-loading.ring-loader {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}
.sf-vitrine-loading.ring-loader .ring-loader__shimmer {
  animation-duration: calc(var(--animation-level, 1) * 8s);
}
.sf-vitrine-loading.ring-loader .animate-fade-in {
  animation-duration: calc(var(--animation-level, 1) * 0.6s);
}
/* Failed / timed-out: the designed empty frame, in a warmer voice. */
.sf-vitrine-workshop {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px; line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .sf-vitrine-loading.ring-loader .ring-loader__shimmer,
  .sf-vitrine-loading.ring-loader .animate-fade-in { animation: none; }
  .sf-vitrine-loading.ring-loader .ring-loader__dot { transition: none; }
}

.sf-caption { margin-top: 26px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-muted-foreground); }
.sf-archetype {
  margin-top: 14px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700; font-size: 33px; line-height: 1.12; letter-spacing: -0.01em;
}
.sf-archetype-sub {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic; font-weight: 500; font-size: 19px;
  color: var(--color-foreground); opacity: 0.85;
  margin-top: 4px;
}
.sf-description { max-width: 300px; margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: var(--color-muted-foreground); }
.sf-lines { width: 100%; max-width: 330px; margin-top: 24px; text-align: left; list-style: none; padding: 0; }
.sf-lines li {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--color-border);
  padding: 11px 4px;
  font-size: 13.5px; line-height: 1.55; color: var(--color-foreground);
}
.sf-lines li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-jewellery-gold);
}
.sf-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 330px; height: 54px; margin-top: 30px;
  border-radius: var(--border-radius-lg, 8px);
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary), var(--color-accent));
  background-size: 200% 100%;
  border: 1px solid var(--color-accent-stroke);
  color: var(--color-accent-contrast);
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 10px 30px -6px var(--color-accent-glow);
  animation: sf-shimmer calc(var(--animation-level, 1) * 3s) linear infinite;
}
@keyframes sf-shimmer {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}
.sf-startover {
  margin-top: 14px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px;
  color: var(--color-muted-foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-border);
}
.sf-startover:hover { color: var(--color-foreground); }

/* staged entrance: fade + 16px rise; durations scale with --animation-level */
.sf-enter { opacity: 0; animation: sf-rise calc(var(--animation-level, 1) * 0.6s) ease both; }
.sf-enter-hero { opacity: 0; animation: sf-hero calc(var(--animation-level, 1) * 0.9s) cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--animation-level, 1) * 300ms); }
.sf-d1 { animation-delay: calc(var(--animation-level, 1) * 100ms); }
.sf-d3 { animation-delay: calc(var(--animation-level, 1) * 550ms); }
.sf-d4 { animation-delay: calc(var(--animation-level, 1) * 650ms); }
.sf-d5 { animation-delay: calc(var(--animation-level, 1) * 750ms); }
.sf-d6 { animation-delay: calc(var(--animation-level, 1) * 850ms); }
.sf-d7 { animation-delay: calc(var(--animation-level, 1) * 950ms); }
.sf-d8 { animation-delay: calc(var(--animation-level, 1) * 1070ms); }
.sf-d9 { animation-delay: calc(var(--animation-level, 1) * 1190ms); }
.sf-d10 { animation-delay: calc(var(--animation-level, 1) * 1310ms); }
.sf-d11 { animation-delay: calc(var(--animation-level, 1) * 1450ms); }
@keyframes sf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sf-hero { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sf-enter, .sf-enter-hero { animation: none; opacity: 1; }
  .sf-cta { animation: none; }
}
/* Post-save-gate refresh: the replace-visit under the finished dissolve
   must not replay the entrance (save_gate_controller stamps this class). */
.sf-skip-enter .sf-enter, .sf-skip-enter .sf-enter-hero { animation: none; opacity: 1; }
/* Intro flash (e.g. empty-deck notice from the start guard). */
.sf-flash-alert { text-align: center; color: var(--color-muted-foreground); font-size: 0.9rem; margin: 0.75rem auto 0; max-width: 32ch; }
/* =============================================================================
   JWLRY.DESIGN - DESIGN TOKEN SYSTEM
   Centralized CSS custom properties for multi-skin theming
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-primary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* -------------------------------------------------------------------------
     SPACING & DENSITY
     Multiply spacing values by --density for skin-specific adjustments
     density: 0.8 = compact, 1.0 = normal, 1.2 = generous
     ------------------------------------------------------------------------- */
  --density: 1;
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 0.5 * var(--density));
  --spacing-sm: calc(var(--spacing-unit) * 1 * var(--density));
  --spacing-md: calc(var(--spacing-unit) * 2 * var(--density));
  --spacing-lg: calc(var(--spacing-unit) * 3 * var(--density));
  --spacing-xl: calc(var(--spacing-unit) * 4 * var(--density));

  /* -------------------------------------------------------------------------
     COLORS - Core Palette (current dark/gold luxury theme)
     ------------------------------------------------------------------------- */
  /* Backgrounds */
  --color-background: hsl(0, 0%, 0%);
  --color-foreground: hsl(0, 0%, 98%);
  --color-surface: hsl(0, 0%, 6%);
  --color-surface-light: hsl(0, 0%, 12%);

  /* Muted/Secondary */
  --color-muted: hsl(0, 0%, 14%);
  --color-muted-foreground: hsl(0, 0%, 70%);
  --color-border: hsl(0, 0%, 18%);

  /* Accent (Gold) */
  --color-accent: hsl(45, 95%, 55%);
  --color-accent-secondary: hsl(35, 85%, 52%);
  --color-accent-stroke: hsl(45, 70%, 45%);
  --color-accent-contrast: hsl(30, 20%, 10%);
  --color-accent-glow: hsla(45, 95%, 55%, 0.35);

  /* Semantic colors */
  --color-success: hsl(142, 76%, 36%);
  --color-warning: hsl(38, 92%, 50%);
  --color-error: hsl(0, 84%, 60%);

  /* Jewellery metals — these depict the metals themselves, deliberately
     skin-independent (LOVE stamp, reveal keyline, taste-line dots,
     chooser keyline, surprise-path metal swatches). Never override
     these per skin. */
  --color-jewellery-gold: #D4AF37;
  --color-jewellery-rose: #B76E79;
  --color-jewellery-white: #CDD2D8;

  /* -------------------------------------------------------------------------
     ANIMATION & MOTION
     animation-level: 0 = none, 1 = subtle, 2 = expressive
     ------------------------------------------------------------------------- */
  --animation-level: 1;
  --transition-speed: 200ms;
  --transition-speed-fast: 100ms;
  --transition-speed-slow: 300ms;

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --max-content-width: 1200px;
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --border-radius-lg: 8px;

  /* -------------------------------------------------------------------------
     COMPONENT TOKENS - Buttons (derived from core tokens)
     These map the component-specific variables to the global tokens
     ------------------------------------------------------------------------- */
  --btn-surface: var(--color-surface);
  --btn-surface-light: var(--color-surface-light);
  --btn-surface-dark: hsl(0, 0%, 3%);
  --btn-highlight: hsla(0, 0%, 100%, 0.08);
  --btn-shadow: hsla(0, 0%, 0%, 0.6);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.3);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.2);
  --btn-accent: var(--color-accent);
  --btn-accent-glow: var(--color-accent-glow);
  --btn-text: var(--color-muted-foreground);
  --btn-text-hover: var(--color-foreground);
  --btn-text-active: var(--color-accent);
  --btn-icon: hsl(0, 0%, 47%);
  --btn-icon-hover: var(--color-foreground);
  --btn-icon-active: var(--color-accent);
  /* SVG color when selected - defaults to white for dark backgrounds */
  --btn-icon-selected: #ffffff;
}


/* =============================================================================
   SKIN CLASSES - Override tokens per skin
   Applied via body class: <body class="skin-{slug}">
   ============================================================================= */

/* Default skin (current design) - no overrides needed, uses :root values */
.skin-modern-romantic {
  /* This is the current dark/gold luxury aesthetic - base values */
}

/* Classic Heirloom skin - higher contrast, larger text, traditional colors */
.skin-classic-heirloom {
  --font-primary: 'Georgia', serif;
  --font-display: 'Georgia', serif;
  --font-size-base: 18px;
  --density: 1.0;

  /* Lighter background, navy accent */
  --color-background: hsl(0, 0%, 100%);
  --color-foreground: hsl(0, 0%, 13%);
  --color-surface: hsl(0, 0%, 98%);
  --color-surface-light: hsl(0, 0%, 100%);
  --color-muted: hsl(0, 0%, 94%);
  --color-muted-foreground: hsl(0, 0%, 40%);
  --color-border: hsl(0, 0%, 85%);

  /* Navy/burgundy accent */
  --color-accent: hsl(213, 50%, 35%);
  --color-accent-secondary: hsl(345, 50%, 35%);
  --color-accent-stroke: hsl(213, 45%, 30%);
  --color-accent-contrast: hsl(0, 0%, 100%);
  --color-accent-glow: hsla(213, 50%, 35%, 0.2);

  /* Button tokens for light skin - softer shadows, subtle depth */
  --btn-surface: hsl(0, 0%, 94%);
  --btn-surface-light: hsl(0, 0%, 100%);
  --btn-surface-dark: hsl(0, 0%, 88%);
  --btn-highlight: hsla(0, 0%, 100%, 0.8);
  --btn-shadow: hsla(0, 0%, 0%, 0.12);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.08);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.06);
  --btn-text: hsl(0, 0%, 40%);
  --btn-text-hover: hsl(0, 0%, 13%);
  --btn-icon: hsl(0, 0%, 50%);
  --btn-icon-hover: hsl(0, 0%, 20%);
  /* Dark icon color on light background when selected */
  --btn-icon-selected: hsl(0, 0%, 13%);

  /* Reduced animation */
  --animation-level: 0;
  --transition-speed: 150ms;

  --border-radius: 2px;
}

/* Utopian Creations skin - bright & modern, teal/bronze accents */
.skin-utopian-creations {
  --density: 1.0;

  /* Warm beige background — matches sign-up page tan */
  --color-background: #efeae5;
  --color-foreground: hsl(200, 5%, 11%);      /* #1c1d1d */
  --color-surface: hsl(210, 7%, 96%);         /* #f0f1f3 */
  --color-surface-light: hsl(0, 0%, 100%);    /* white */
  --color-muted: hsl(210, 7%, 96%);
  --color-muted-foreground: hsl(204, 5%, 26%); /* #3d4246 */
  --color-border: hsl(210, 7%, 94%);

  /* Teal accents */
  --color-accent: hsl(166, 55%, 38%);         /* #2d9982 - teal */
  --color-accent-secondary: hsl(166, 55%, 28%); /* darker teal */
  --color-accent-stroke: hsl(166, 50%, 32%);
  --color-accent-contrast: hsl(0, 0%, 100%);
  --color-accent-glow: hsla(166, 55%, 38%, 0.2);

  /* Button tokens for light skin - softer shadows, subtle depth */
  --btn-surface: hsl(210, 7%, 93%);           /* light grey with slight blue tint */
  --btn-surface-light: hsl(0, 0%, 100%);      /* white */
  --btn-surface-dark: hsl(210, 5%, 86%);      /* darker grey */
  --btn-highlight: hsla(0, 0%, 100%, 0.9);
  --btn-shadow: hsla(210, 10%, 0%, 0.1);
  --btn-shadow-soft: hsla(210, 10%, 0%, 0.06);
  --btn-shadow-inner: hsla(210, 10%, 0%, 0.04);
  --btn-text: hsl(204, 5%, 35%);
  --btn-text-hover: hsl(200, 5%, 11%);
  --btn-icon: hsl(204, 5%, 45%);
  --btn-icon-hover: hsl(200, 5%, 15%);
  /* Dark icon color on light background when selected */
  --btn-icon-selected: hsl(200, 5%, 11%);

  --animation-level: 1;
  --border-radius: 4px;
}

/* Home page beige background - keeps gold accents from default skin */
body.home-beige {
  --color-background: #bfaa98;
  --color-foreground: hsl(200, 5%, 11%);
  --color-surface: hsl(30, 15%, 92%);
  --color-surface-light: hsl(0, 0%, 100%);
  --color-muted: hsl(30, 10%, 88%);
  --color-muted-foreground: hsl(200, 5%, 35%);
  --color-border: hsl(30, 10%, 80%);

  /* Button tokens for light background */
  --btn-surface: hsl(30, 10%, 90%);
  --btn-surface-light: hsl(0, 0%, 100%);
  --btn-surface-dark: hsl(30, 8%, 82%);
  --btn-highlight: hsla(0, 0%, 100%, 0.8);
  --btn-shadow: hsla(0, 0%, 0%, 0.1);
  --btn-shadow-soft: hsla(0, 0%, 0%, 0.06);
  --btn-shadow-inner: hsla(0, 0%, 0%, 0.04);
  --btn-text: hsl(200, 5%, 35%);
  --btn-text-hover: hsl(200, 5%, 11%);
  --btn-icon: hsl(200, 5%, 45%);
  --btn-icon-hover: hsl(200, 5%, 15%);
  --btn-icon-selected: hsl(200, 5%, 11%);
}
/* =============================================================================
   VARIATION GRID & TILES
   Styles for the 4-variation selection interface
   ============================================================================= */

/* Individual Variation Tile */
.variation-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Completed tile - interactive */
.variation-tile--completed {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.2);
}

.variation-tile--completed:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Selected tile - highlighted */
.variation-tile--selected {
  border-color: #14b8a6 !important; /* teal-500 */
  box-shadow: 0 0 0 2px #14b8a6, 0 8px 32px rgba(20, 184, 166, 0.3);
}

.variation-tile--selected:hover {
  transform: scale(1.02);
}

/* Loading tile */
.variation-tile--loading {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Failed tile */
.variation-tile--failed {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Image container */
.variation-tile__image {
  width: 100%;
  height: 100%;
  padding: 0;
}

.variation-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Heart button on variation tile (selection phase) */
.variation-tile__heart {
  cursor: pointer;
}

.variation-tile__heart:hover svg {
  transform: scale(1.15);
}

.variation-tile__heart:active svg {
  transform: scale(0.95);
}

.variation-tile__heart svg {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* When tile is selected, heart gets special styling */
.variation-tile--selected .variation-tile__heart {
  animation: heartAppear 0.3s ease-out;
}

.variation-tile--selected .variation-tile__heart svg {
  animation: heartPulse 0.4s ease-out;
}

/* Selection checkmark (legacy, kept for compatibility) */
.variation-tile__checkmark {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: #14b8a6; /* teal-500 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.5);
}

.variation-tile--selected .variation-tile__checkmark {
  opacity: 1;
  transform: scale(1);
}

/* Error state container */
.variation-tile__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  text-align: center;
}

/* Variant label at bottom */
.variation-tile__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

/* Loading state uses existing ring-loader styles */
.variation-tile--loading .ring-loader {
  border-radius: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .variation-tile {
    border-radius: 12px;
  }

  .variation-tile__image {
    padding: 0;
  }

  .variation-tile__image img {
    border-radius: 10px;
  }

  .variation-tile__checkmark {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }

  .variation-tile__checkmark svg {
    width: 14px;
    height: 14px;
  }

  .variation-tile__heart {
    top: 6px !important;
    right: 6px !important;
    padding: 6px !important;
  }

  .variation-tile__heart svg {
    width: 18px;
    height: 18px;
  }

  .variation-tile__label {
    padding: 6px 10px;
  }

  .variation-tile__error span {
    font-size: 10px;
  }
}

/* Animation for tile appearing */
@keyframes tileAppear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.variation-tile--completed {
  animation: tileAppear 0.3s ease-out;
}

/* =============================================================================
   HEART-BASED VARIATION SWITCHING
   Styles for the heart icons on thumbnails and main image
   ============================================================================= */

/* Heart button on thumbnails */
.variation-heart {
  z-index: 10;
}

.variation-heart:hover svg {
  transform: scale(1.15);
}

.variation-heart:active svg {
  transform: scale(0.95);
}

.variation-heart svg {
  transition: transform 0.15s ease, color 0.15s ease;
}

/* Filled heart animation when activated */
@keyframes heartPulse {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.variation-heart--active svg {
  animation: heartPulse 0.4s ease-out;
}

/* Selected heart badge on main image */
.selected-heart-badge {
  animation: heartAppear 0.3s ease-out;
}

@keyframes heartAppear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Thumbnail variation styles */
.variation-thumbnail {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.variation-thumbnail:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* =============================================================================
   LIGHTBOX
   Full-screen image viewer for expanded variations
   ============================================================================= */

#unified-lightbox {
  animation: lightboxFadeIn 0.2s ease-out;
}

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

#unified-lightbox img {
  animation: lightboxZoomIn 0.2s ease-out;
}

@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#unified-lightbox button {
  transition: transform 0.2s ease, background-color 0.15s ease;
}
/* =============================================================================
   JWLRY.DESIGN - VISUAL OPTION CARDS
   Icon-led option card system for band shape, width, accent stones, finish.
   Extends the existing option-btn pattern with icon + description support.
   ============================================================================= */


/* =============================================================================
   VISUAL OPTION GRID - responsive column variants
   ============================================================================= */

.visual-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.visual-option-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.visual-option-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.visual-option-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 600px) {
  .visual-option-grid { grid-template-columns: repeat(2, 1fr); }
  .visual-option-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .visual-option-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 400px) {
  .visual-option-grid,
  .visual-option-grid.cols-2,
  .visual-option-grid.cols-3,
  .visual-option-grid.cols-4,
  .visual-option-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   VISUAL OPTION CARD - extends .option-btn with icon area
   ============================================================================= */

.visual-option-card {
  /* Inherit all option-btn base styles, override layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 8px 10px;
  min-height: 80px;
  gap: 6px;
  border: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  border-radius: 8px;
  box-shadow:
    0 4px 8px var(--stone-btn-shadow),
    0 2px 4px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 3px var(--stone-btn-highlight),
    inset 2px 0 3px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}

.visual-option-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}


/* =============================================================================
   ICON CONTAINER
   ============================================================================= */

.visual-option-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.visual-option-card__icon svg {
  width: 100%;
  height: 100%;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
}

@media (min-width: 601px) {
  .visual-option-card__icon {
    width: 44px;
    height: 44px;
  }
}


/* =============================================================================
   LABEL + DESCRIPTION
   ============================================================================= */

.visual-option-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--stone-btn-text);
  transition: color 0.2s ease;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.25;
}

.visual-option-card__description {
  font-size: 9px;
  font-weight: 400;
  color: var(--stone-btn-text);
  opacity: 0.6;
  text-align: center;
  line-height: 1.3;
  transition: opacity 0.2s ease;
}


/* =============================================================================
   HOVER STATE
   ============================================================================= */

.visual-option-card:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
  box-shadow:
    0 6px 12px var(--stone-btn-shadow),
    0 3px 6px var(--stone-btn-shadow),
    inset 0 -2px 3px var(--stone-btn-shadow),
    inset 0 2px 4px var(--stone-btn-highlight),
    inset 2px 0 4px var(--stone-btn-highlight),
    inset -2px 0 3px var(--stone-btn-shadow-soft),
    inset 0 0 12px var(--stone-btn-shadow-inner);
  transform: translateY(-1px);
}

.visual-option-card:hover .visual-option-card__icon {
  opacity: 0.75;
}

.visual-option-card:hover .visual-option-card__label {
  color: var(--stone-btn-text-hover);
}

.visual-option-card:hover .visual-option-card__description {
  opacity: 0.8;
}


/* =============================================================================
   ACTIVE (PRESSED) STATE
   ============================================================================= */

.visual-option-card:active {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight);
}


/* =============================================================================
   SELECTED STATE
   ============================================================================= */

.visual-option-card.selected {
  transform: translateY(2px);
  background:
    linear-gradient(180deg, var(--stone-btn-shadow-soft) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-btn-surface-dark) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-light) 100%);
  box-shadow:
    0 0 20px var(--stone-btn-accent-glow),
    0 0 40px var(--stone-btn-accent-glow),
    0 1px 2px var(--stone-btn-shadow),
    inset 0 3px 6px var(--stone-btn-shadow),
    inset 0 1px 3px var(--stone-btn-shadow),
    inset 3px 0 6px var(--stone-btn-shadow-soft),
    inset -1px 0 3px var(--stone-btn-highlight),
    inset 0 -1px 2px var(--stone-btn-highlight),
    inset 0 0 15px var(--stone-btn-accent-glow);
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: -2px;
}

.visual-option-card.selected .visual-option-card__icon {
  opacity: 1;
}

.visual-option-card.selected .visual-option-card__icon svg {
  color: var(--stone-btn-text-active);
}

.visual-option-card.selected .visual-option-card__label {
  color: var(--stone-btn-text-active);
  text-shadow: 0 2px 4px var(--stone-btn-shadow-soft);
}

.visual-option-card.selected .visual-option-card__description {
  opacity: 0.9;
}


/* =============================================================================
   FOCUS STATE
   ============================================================================= */

.visual-option-card:focus-visible {
  outline: 2px solid var(--stone-btn-accent);
  outline-offset: 2px;
}


/* =============================================================================
   DISABLED STATE
   ============================================================================= */

.visual-option-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================================= */

@media (hover: none) {
  .visual-option-card:hover {
    transform: none;
    background:
      linear-gradient(180deg, var(--stone-btn-highlight) 0%, transparent 40%),
      linear-gradient(180deg, var(--stone-btn-surface-light) 0%, var(--stone-btn-surface) 50%, var(--stone-btn-surface-dark) 100%);
    box-shadow:
      0 4px 8px var(--stone-btn-shadow),
      0 2px 4px var(--stone-btn-shadow),
      inset 0 -2px 3px var(--stone-btn-shadow),
      inset 0 2px 3px var(--stone-btn-highlight),
      inset 2px 0 3px var(--stone-btn-highlight),
      inset -2px 0 3px var(--stone-btn-shadow-soft),
      inset 0 0 12px var(--stone-btn-shadow-inner);
  }

  .visual-option-card:hover .visual-option-card__icon {
    opacity: 0.55;
  }

  .visual-option-card:hover .visual-option-card__label {
    color: var(--stone-btn-text);
  }

  .visual-option-card:hover .visual-option-card__description {
    opacity: 0.6;
  }
}


/* =============================================================================
   GROUP DESCRIPTION
   ============================================================================= */

.visual-option-group__description {
  font-size: 11px;
  color: var(--stone-btn-text);
  opacity: 0.6;
  margin-bottom: 8px;
  line-height: 1.4;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * Internal-tool stylesheets (linked individually by their own layouts) must NOT
 * be bundled here: their bare element selectors (h1, ...) are un-layered CSS,
 * which overrides Tailwind's @layer utilities on every public page.
 *








 */

/* Desktop sidebar */
.desktop-sidebar {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 14rem; /* w-56 = 224px */
  height: 100dvh; /* fix iOS/iPadOS Safari dynamic viewport */
  flex-direction: column;
  background-color: #efeae5;
  border-right: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .desktop-sidebar {
    display: flex;
  }
}

/* Sidebar layout — desktop sidebar offset + mobile bottom nav clearance */
.sidebar-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 4rem; /* clear mobile bottom nav (h-16 = 64px) */
}

@media (min-width: 768px) {
  :root {
    --sidebar-width: 14rem; /* w-56 = 224px */
  }

  .sidebar-layout {
    margin-left: var(--sidebar-width);
    padding-bottom: 0;
  }
}

/* Mobile bottom nav bar */
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--color-surface, #0f0f0f);
  border-top: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .mobile-nav-bar {
    display: none;
  }
}

/* Mobile top header */
.mobile-header {
  background-color: var(--color-surface, #0f0f0f);
  border-bottom: 1px solid var(--color-border, #2e2e2e);
}

@media (min-width: 768px) {
  .mobile-header {
    display: none;
  }
}

/* Desktop header — horizontal nav bar for home page */
.desktop-header {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 60px;
  align-items: center;
  background-color: #efeae5;
  border-bottom: 1px solid var(--color-border, #2e2e2e);
}

/* Home page: hide sidebar, show desktop header, remove sidebar offset */
body.home-index .desktop-sidebar {
  display: none !important;
}

@media (min-width: 768px) {
  body.home-index .desktop-header {
    display: flex;
  }

  body.home-index .sidebar-layout {
    margin-left: 0;
  }
}

/* Base typography — fonts provided by skin CSS variables on body */
body {
  font-family: var(--font-primary), system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

h1, h2, h3 {
  font-family: var(--font-display), 'Georgia', serif;
  letter-spacing: -0.01em;
}

/* Gold CTA button */
.btn-gold {
  background-image: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-secondary) 50%, var(--color-accent) 100%);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
  box-shadow: 0 8px 24px var(--color-accent-glow, rgba(0,0,0,0.35));
  background-size: 200% auto;
  transition: all 0.3s ease;
  animation: shimmer 3s linear infinite;
}

.btn-gold:hover {
  filter: brightness(1.07);
}

.bg-secondary {
  background-color: var(--color-surface-light);
}

/* Stone Shape Visual Selector */
.shape-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 400px) {
  .shape-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Pricing page background — skip when home-beige provides its own bg */
body:has(.pricing-section):not(.home-beige) {
  background: transparent !important;
}

body:has(.pricing-section):not(.home-beige) main {
  background-color: transparent !important;
}

body:has(.pricing-section):not(.home-beige) main > .w-full {
  background: transparent !important;
}

.pricing-section {
  background-image: url(/assets/pricing-bg-2374d1e0e0c9e0663990c92866792fef4aacd8c2da6f2dfb709339b16628b47f.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: calc(75vh - 60px); /* Balanced spacing */
}

/* Parallax only on desktop — background-attachment:fixed kills mobile scroll perf */
@media (min-width: 769px) {
  .pricing-section {
    background-attachment: fixed;
  }
}

.pricing-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pricing-section > * {
  position: relative;
  z-index: 1;
}

/* Hide radio but keep accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tooltip styles */
.tooltip-trigger:hover + .tooltip-content,
.tooltip-trigger:focus + .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.tooltip-content {
  transition: opacity 150ms ease-out, visibility 150ms ease-out, transform 150ms ease-out;
}

/* Tooltip arrow */
.tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}

.tooltip-arrow-top {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}

.tooltip-arrow-bottom {
  top: -5px;
  left: 50%;
  margin-left: -5px;
}


/* ===== Swipe Discovery animations ===== */

.swipe-card {
  transition: transform 0.28s cubic-bezier(.4, .2, .2, 1), opacity 0.28s;
  will-change: transform, opacity;
  touch-action: pan-y;
}

.swipe-card.swipe-left {
  transform: translateX(-120%) rotate(-12deg);
  opacity: 0;
}

.swipe-card.swipe-right {
  transform: translateX(120%) rotate(12deg);
  opacity: 0;
}

.swipe-card.swiping {
  pointer-events: none;
}

.swipe-progress-fill {
  transition: width 0.35s cubic-bezier(.4, .2, .2, 1);
}