/*
 * 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%);
}
/* Cloudflare Turnstile — keep the widget inside its container on narrow phones.
   The widget is rendered explicitly by turnstile_controller.js, which injects a
   wrapper div and an iframe into the host element; both carry inline widths from
   Cloudflare, so they need an explicit cap to stay within a narrow form card. */

[data-controller~="turnstile"] {
  max-width: 100%;
}

[data-controller~="turnstile"] > div,
[data-controller~="turnstile"] iframe {
  max-width: 100%;
}

/* The flexible widget still has a hard 300px minimum width, so on narrow phones
   it outgrows its container no matter how the container is sized. The sign-in
   card gives the widget (viewport - 112px): 48px of px-6 on the panel plus 64px
   of p-8 on the card. That drops under 300px below a ~412px viewport, so scale
   the widget down from there.

   scale() cannot be computed from viewport units (it needs a unitless number),
   hence the fixed tiers. Each factor is chosen so the scaled 300px widget fits
   the narrowest container in its own range. The negative margin reclaims the
   vertical slack transforms leave behind, since the widget is 65px tall and
   transform does not affect layout. */

@media (max-width: 411px) {
  [data-controller~="turnstile"] {
    transform: scale(0.86);
    transform-origin: left top;
    margin-bottom: -9px;
  }
}

@media (max-width: 375px) {
  [data-controller~="turnstile"] {
    transform: scale(0.75);
    margin-bottom: -16px;
  }
}

@media (max-width: 340px) {
  [data-controller~="turnstile"] {
    transform: scale(0.69);
    margin-bottom: -20px;
  }
}
/* =============================================================================
   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);
}