/*
 * 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 - 6 columns
   --------------------------------------------------------------------- */
.gemstone-selector-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

/* Responsive: 4 columns on smaller screens */
@media (max-width: 480px) {
  .gemstone-selector-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .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;
}

/* 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;
  width: 36px;
  height: 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%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   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;
}


/* ==========================================================================
   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);
}
/* Hallmark — UC design system, ported from the approved
   UC_Stocktake_Demo_v2 mockup. Self-contained (loaded only by layouts/stock).
   Tuned for iPad Safari: 16px+ inputs (no auto-zoom), large tap targets. */

:root {
  --teal: #003333;
  --teal-2: #0a4444;
  --gold: #c9a96e;
  --gold-2: #d8bb82;
  --cream: #faf7f2;
  --tan: #e8dfd0;
  --ink: #1c2b2b;
  --muted: #6b7a78;
  --green: #3f7d5e;
  --green-bg: #e7f0ea;
  --blue-bg: #e3edf5;
  --red: #a23b3b;
  --red-bg: #f3e3e1;
  --amber: #9a6b2f;
  --amber-bg: #fdf3e3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.stk-body {
  font-family: "Jost", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  padding: 24px 18px 110px;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 1080px; margin: 0 auto; }

.stk-flash { max-width: 1080px; margin: 0 auto 14px; padding: 10px 16px; border-radius: 5px; font-size: 14px; }
.stk-flash--notice { background: var(--green-bg); color: var(--green); border: 1px solid #bcd9c9; }
.stk-flash--alert { background: var(--red-bg); color: var(--red); border: 1px solid #e3c2b8; }

/* persistent top nav (every page) */
.stk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto 18px; padding-bottom: 12px; border-bottom: 1px solid var(--tan); }
.stk-nav-brand { display: inline-flex; align-items: center; }
.stk-nav-logo { height: 40px; width: auto; display: block; }
.stk-nav-help { font-size: 13px; color: var(--teal); text-decoration: none; border: 1px solid var(--tan); border-radius: 5px; padding: 8px 14px; letter-spacing: .03em; white-space: nowrap; }
.stk-nav-help:hover { border-color: var(--gold); background: #fff; }

/* home / landing screen */
.home-hero { text-align: center; margin: 24px 0 30px; }
.home-crest { max-width: 300px; width: 62%; height: auto; margin: 0 auto 8px; display: block; }
.home-tagline { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--gold); letter-spacing: .03em; }
.home-welcome { font-size: 15px; color: var(--muted); margin-top: 8px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
a.home-card { display: block; background: #fff; border: 1px solid var(--tan); border-radius: 8px; padding: 22px 20px; text-decoration: none; transition: .14s; }
a.home-card:hover { border-color: var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
a.home-card.primary { background: var(--teal); border-color: var(--teal); }
.home-card.primary .home-card-title, .home-card.primary .home-card-sub, .home-card.primary .home-card-status { color: var(--cream); }
.home-card-title { font-family: "Cormorant Garamond", serif; font-size: 22px; color: var(--teal); font-weight: 600; }
.home-card-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.home-card-status { font-size: 13px; color: var(--gold); margin-top: 12px; font-weight: 500; }
a.home-card.sandbox { border: 1px solid var(--gold-2); background: #fffdf8; }
a.home-card.sandbox:hover { border-color: var(--gold); }

/* practice sandbox banner + help callout */
.practice-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto 16px; padding: 12px 16px; background: var(--amber-bg); border: 1px solid #f0dcb8; border-left: 4px solid var(--gold); border-radius: 6px; }
.practice-badge { font-family: "Jost", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--cream); background: var(--gold); padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.practice-text { font-size: 13px; color: var(--amber); flex: 1; min-width: 200px; }
.practice-reset { display: inline; margin: 0; }
.help-practice-callout { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 820px; margin: 0 auto 16px; padding: 16px 20px; background: var(--cream); border: 1px solid var(--gold-2); border-radius: 8px; }
.help-practice-title { font-family: "Cormorant Garamond", serif; font-size: 20px; color: var(--teal); font-weight: 600; }
.help-practice-sub { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 480px; }

/* how-to guide (/help) */
.help-doc { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--tan); border-radius: 8px; padding: 30px 38px; }
.help-doc h1 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 33px; color: var(--teal); margin: 0 0 14px; }
.help-doc h2 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 23px; color: var(--teal); margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--tan); }
.help-doc h3 { font-size: 15px; color: var(--teal); margin: 18px 0 6px; font-weight: 600; }
.help-doc p, .help-doc li { font-size: 15px; line-height: 1.62; color: var(--ink); }
.help-doc ul, .help-doc ol { margin: 8px 0 10px 22px; }
.help-doc li { margin: 4px 0; }
.help-doc strong { color: var(--teal); font-weight: 600; }
.help-doc a { color: var(--gold); }
.help-doc blockquote { margin: 14px 0; padding: 12px 16px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 4px; }
.help-doc blockquote p { margin: 0; }
.help-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; border: 1px solid var(--tan); border-radius: 6px; overflow: hidden; }
.help-doc th, .help-doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #f0ebe2; font-size: 14px; }
.help-doc th { background: #fbf9f5; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
.help-doc tr:last-child td { border-bottom: none; }
.help-doc hr { border: none; border-top: 1px solid var(--tan); margin: 22px 0; }
.help-doc em { color: var(--muted); }

.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
h1 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 34px; color: var(--teal); margin: 4px 0 2px; }
.sub { color: var(--muted); font-size: 14px; font-weight: 300; max-width: 680px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }

a.btn, button.btn {
  display: inline-block; background: var(--teal); color: var(--cream); border: none; border-radius: 5px;
  padding: 11px 18px; font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; min-height: 44px;
}
a.btn:hover, button.btn:hover { background: var(--teal-2); }
.btn.ghost { background: none; color: var(--teal); border: 1px solid var(--tan); }
.btn.ghost:hover { border-color: var(--gold); background: #fff; }

/* progress stats */
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; }
.stat { background: #fff; border: 1px solid var(--tan); border-radius: 5px; padding: 14px 16px; }
.stat .n { font-family: "Cormorant Garamond", serif; font-size: 30px; color: var(--teal); font-weight: 600; line-height: 1; }
.stat .l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.stat.found .n { color: var(--green); }
.bar { height: 6px; background: var(--tan); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .4s; }

/* find panel */
.findpanel { background: #fff; border: 1px solid var(--tan); border-radius: 8px; padding: 16px; margin-top: 8px; }

/* inkjet sheet alignment / calibration panel */
.calib { background: #fff; border: 1px solid var(--tan); border-radius: 8px; padding: 16px; margin: 18px 0; }
.calib h2 { font-family: "Jost"; font-size: 15px; letter-spacing: .03em; margin-bottom: 6px; }
.calib .addgrid { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-top: 12px; }
.calib label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.calib input[type="number"] { width: 110px; font-family: "Jost"; font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--teal); border-radius: 6px; background: #fff; }
.calib input[type="number"]:focus { outline: none; border-color: var(--gold); }
.findtabs { display: inline-flex; border: 1px solid var(--tan); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.findtabs button { background: #fff; border: none; font-family: "Jost"; font-size: 14px; letter-spacing: .04em; padding: 12px 18px; cursor: pointer; color: var(--muted); border-right: 1px solid var(--tan); min-height: 44px; }
.findtabs button:last-child { border-right: none; }
.findtabs button.on { background: var(--teal); color: var(--cream); }
.findbox { position: relative; }
.findbox input { width: 100%; font-family: "Jost"; font-size: 16px; padding: 14px 14px; border: 1.5px solid var(--teal); border-radius: 6px; background: #fff; }
.findbox input:focus { outline: none; border-color: var(--gold); }
.findhint { font-size: 13px; color: var(--muted); font-weight: 300; margin-top: 8px; }

/* candidate results */
.cands { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cand { display: flex; align-items: center; gap: 14px; border: 1px solid var(--tan); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: .12s; background: #fff; }
.cand:hover { border-color: var(--gold); background: #fdfbf7; }
.cand .csku { font-family: "Cormorant Garamond", serif; font-size: 17px; color: var(--teal); font-weight: 600; white-space: nowrap; min-width: 92px; }
.cand .cdesc { flex: 1; }
.cand .cdesc b { font-weight: 500; }
.cand .cmeta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.cand .cloc { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.cand .ctick { background: var(--gold); color: var(--teal); border: none; border-radius: 4px; padding: 10px 16px; font-family: "Jost"; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; cursor: pointer; min-height: 44px; }
/* soft-delete from a search match — maroon, same token as the row-menu Remove */
.cand .cremove { background: #6b1f2a; color: #fff; border: none; border-radius: 4px; padding: 10px 14px; font-family: "Jost"; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; cursor: pointer; min-height: 44px; }
.cand .cremove:hover { background: #7e2733; }
.cand.lookalike { border-left: 3px solid var(--gold); }
.multi-warn { font-size: 13px; color: var(--amber); background: var(--amber-bg); border: 1px solid #f0dcb8; border-radius: 5px; padding: 10px 12px; margin-top: 10px; }
.noresult { font-size: 13px; color: var(--muted); font-style: italic; padding: 8px 2px; }

/* add item */
.adddesc { font-family: "Jost"; font-size: 16px; padding: 12px; border: 1px solid var(--tan); border-radius: 5px; background: #fff; width: 100%; min-height: 44px; margin-top: 6px; }
.adddesc:focus { outline: none; border-color: var(--gold); }
/* Type fits its content (not full-width); Price sits tidily beside it. */
.field-type select { width: auto; min-width: 0; max-width: 100%; }
.field-price input { width: 130px; }
.addnext { font-size: 13px; color: var(--muted); margin-top: 8px; }
.addnext b { color: var(--gold); font-family: "Cormorant Garamond", serif; font-size: 16px; }
.addtitle { font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600; color: var(--teal); margin-bottom: 8px; }
.editsku { font-size: 13px; color: var(--muted); margin-top: 8px; }
.editsku[hidden] { display: none; }
.editsku b { color: var(--teal); font-family: "Cormorant Garamond", serif; font-size: 16px; letter-spacing: .02em; }
.addextra { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.addextra label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px; }
.addbtn { margin-top: 12px; background: var(--teal); color: var(--cream); border: none; border-radius: 5px; padding: 13px 22px; font-family: "Jost"; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; min-height: 44px; }
.addbtn:hover { background: var(--teal-2); }
.attn-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.attn-toggle input { width: 18px; height: 18px; }

/* tables */
.loc-group { margin-top: 24px; }
.loc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.loc-head h2 { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--teal); font-weight: 600; }
.loc-head .count { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.loc-head .rule { flex: 1; height: 1px; background: var(--tan); }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--tan); border-radius: 6px; overflow: hidden; }
thead th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 10px 12px; background: #fbf9f5; border-bottom: 1px solid var(--tan); }
tbody td { padding: 12px; border-bottom: 1px solid #f0ebe2; font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tr.done { background: var(--green-bg); }
tr.excluded { background: var(--red-bg); opacity: .85; }
tr.attn { box-shadow: inset 3px 0 0 var(--amber); }
tr.justadded { animation: flash 1.4s ease; }
@keyframes flash { 0% { background: #fff7e6; } 100% {} }
.sku { font-family: "Cormorant Garamond", serif; font-size: 16px; color: var(--teal); font-weight: 600; white-space: nowrap; }
.sku.none { color: var(--red); font-size: 12px; font-family: "Jost"; font-style: italic; }
.sku .new { display: inline-block; font-family: "Jost"; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 10px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.desc small { display: block; color: var(--muted); font-size: 11px; font-weight: 300; margin-top: 1px; }
.desc small.metalmeta { color: var(--gold); font-weight: 400; }
.desc small.price { color: var(--teal); font-weight: 400; }
.pill { display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; font-weight: 500; }
.pill.ind { background: #eef2f0; color: var(--teal); }
.pill.grp { background: var(--blue-bg); color: #2b5878; }
.pill.exc { background: var(--red-bg); color: var(--red); }
.pill.attn { background: var(--amber-bg); color: var(--amber); }
.pill.disc { background: #f3e0e0; color: #6b1f2a; border: 1px solid #d8b4b4; }
.pill.new { background: #1f3d63; color: #fff; } /* navy — new / not onboarded */
.col-status { white-space: nowrap; }
/* Status-column quick toggles: stacked, compact; checked = badge look. */
.statustoggles { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.stoggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; color: var(--muted); padding: 2px 6px; border: 1px solid var(--tan); border-radius: 20px; background: #fff; user-select: none; }
.stoggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--gold); flex: none; }
.stoggle:hover { border-color: var(--gold); }
.stoggle.attn:has(input:checked) { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.stoggle.new:has(input:checked) { background: #1f3d63; color: #fff; border-color: #1f3d63; }
.stoggle.new:has(input:checked) input { accent-color: #fff; }
.statusfilter { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.btn.ghost.on { background: var(--teal); color: var(--cream); border-color: var(--teal); }

/* in-context "?" tooltips */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--tan); background: #fff; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1; cursor: help; position: relative; vertical-align: middle; }
.tip:hover, .tip:focus { border-color: var(--gold); color: var(--teal); outline: none; }
.tip::after { content: attr(data-tip); position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; background: var(--teal); color: var(--cream); font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; padding: 8px 12px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; }
.tip:hover::after, .tip:focus::after { opacity: 1; }
/* Header (?) tooltips open DOWNWARD into the rows. The table's overflow:hidden
   (which rounds its corners) was clipping the upward popover off the top edge,
   so it read as hidden behind the tray action bar; opening down keeps it inside
   the table. Scoped to thead so the legend/form tooltips still open upward. */
thead .tip::after { top: calc(100% + 8px); bottom: auto; }
/* The rightmost (actions) header tooltip would clip on the table's right edge if
   centred, so anchor it to the right and grow leftward. */
thead th.col-menu .tip::after { left: auto; right: -2px; transform: none; }

/* teaching empty-states */
.loc-hint { font-size: 13px; color: var(--muted); font-style: italic; font-weight: 300; text-align: center; padding: 14px 12px; }
.shop-yes { color: var(--green); font-weight: 500; font-size: 13px; }
.shop-yes a { color: var(--green); text-decoration: none; border-bottom: 1px dotted var(--green); }
.shop-no { color: var(--muted); font-size: 13px; font-weight: 300; }
.groupcount { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qtycell { display: flex; align-items: center; gap: 6px; }
.qtycell input { width: 64px; font-family: "Jost"; font-size: 16px; padding: 8px 6px; border: 1px solid var(--tan); border-radius: 4px; text-align: center; }
.qtycell input:focus { outline: none; border-color: var(--gold); }
.qtycell .of { font-size: 11px; color: var(--muted); }
.check { width: 32px; height: 32px; border: 1.5px solid var(--tan); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.check:hover { border-color: var(--gold); }
.check.on { background: var(--green); border-color: var(--green); }
.check.on::after { content: ""; width: 8px; height: 14px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.mismatch { color: var(--red); font-size: 11px; font-weight: 500; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 4px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* connection + toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--teal); color: var(--cream); padding: 12px 22px; border-radius: 5px; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; z-index: 9; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.connbar { position: fixed; top: 0; left: 0; right: 0; text-align: center; font-size: 13px; padding: 7px; color: #fff; background: var(--amber); transform: translateY(-100%); transition: .25s; z-index: 10; }
.connbar.show { transform: translateY(0); }
.connbar.syncing { background: var(--teal); }

.note { font-size: 13px; color: var(--muted); font-weight: 300; margin-top: 8px; }

/* metal prices entry + prompt */
.metal-prompt { max-width: 1080px; margin: 14px auto 0; padding: 11px 16px; background: var(--amber-bg); border: 1px solid #f0dcb8; border-left: 4px solid var(--amber); border-radius: 6px; font-size: 13px; color: var(--amber); }
.metal-prompt a { color: var(--amber); font-weight: 600; }
.metalprices { max-width: 620px; }
.metalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
/* Every alloy row uses identical tracks: a flexible name, then a fixed price
   group. The price group is its own 3-track grid ($ · input · /g) so those
   three line up down each column — a clean, evenly-aligned price table. */
.metalrow { display: grid; grid-template-columns: 1fr max-content; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0ebe2; }
.metalname { font-size: 14px; color: var(--ink); }
.metalinput { display: grid; grid-template-columns: auto 96px auto; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.metalinput .cur { text-align: right; }
.metalinput .per { white-space: nowrap; }
.metalinput input { width: 100%; font-family: "Jost"; font-size: 16px; padding: 8px 10px; border: 1px solid var(--tan); border-radius: 5px; text-align: right; }
.metalinput input:focus { outline: none; border-color: var(--gold); }
@media (max-width: 620px) { .metalgrid { grid-template-columns: 1fr; } }

/* stocktakes index */
a.sess-link { text-decoration: none; }
a.sess-link:hover { color: var(--gold); }
.rowactions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rowform { display: inline; margin: 0; }
.btn.ghost.danger { color: var(--red); border-color: #e3c2b8; }
.btn.ghost.danger:hover { border-color: var(--red); background: var(--red-bg); }
/* deep maroon (same token as the soft-delete Remove) — prompts to set prices on a new stocktake */
.btn.ghost.maroon { color: #fff; background: #6b1f2a; border-color: #6b1f2a; }
.btn.ghost.maroon:hover { background: #7e2733; border-color: #7e2733; }
.cmeta { font-size: 11px; color: var(--muted); }

/* start / import form */
.startcard { background: #fff; border: 1px solid var(--tan); border-radius: 8px; padding: 22px; margin-top: 22px; max-width: 560px; }
.startcard label { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }
.startcard input[type=text], .startcard input[type=file] { width: 100%; font-family: "Jost"; font-size: 16px; padding: 12px; border: 1px solid var(--tan); border-radius: 5px; }

/* add-panel tray + quantity row */
.addrow { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.addloclabel { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: inline-flex; flex-direction: column; gap: 4px; }
/* Heading row: keeps the "?" tip inline beside the label, and gives every field
   the same heading height so the controls below line up across the row. */
.addloclabel .fieldhead { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.addloclabel select { font-family: "Jost"; font-size: 16px; padding: 10px 12px; border: 1px solid var(--tan); border-radius: 5px; background: #fff; min-height: 44px; min-width: 220px; }
.addloclabel input { font-family: "Jost"; font-size: 16px; padding: 10px 12px; border: 1px solid var(--tan); border-radius: 5px; background: #fff; min-height: 44px; width: 120px; }
.addqtyhint { font-size: 10px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 300; }
.addcheck { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); cursor: pointer; min-height: 44px; }
.addcheck input { width: 18px; height: 18px; accent-color: var(--teal); }
/* Metal type: grams (not a count) is the measure, so the quantity + price fields
   step aside and the Loose Metal / Grams row is surfaced as the primary input. */
.metalhint { display: none; }
.metal-mode .addqty, .metal-mode .field-price { display: none; }
.metal-mode .metalfields { background: var(--cream); border: 1px solid var(--tan); border-left: 3px solid var(--gold); border-radius: 6px; padding: 12px 14px; }
.metal-mode .metalhint { display: block; flex-basis: 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; color: var(--muted); }
/* Optional structured fields: a universal block (Provenance) carries the header,
   then the per-type blocks (gem / jewellery) flow underneath without a second rule. */
.detailfields { border-top: 1px dashed var(--tan); padding-top: 12px; margin-top: 14px; }
.detailfields-typed { border-top: 0; padding-top: 0; margin-top: 8px; }
.detailhead { display: flex; align-items: center; gap: 6px; flex-basis: 100%; margin-bottom: 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.detailfields .addloclabel input { width: 170px; }
.detailfields .addloclabel input.detail-other { width: 220px; } /* matches the select above it */
/* Edit-mode product image preview (display only). */
.editimage { margin-top: 14px; }
.editimage[hidden] { display: none; }
.editimage-label { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.editimage img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; border: 1px solid var(--tan); border-radius: 8px; }
.editshopify { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.editshopify[hidden] { display: none; }
.editbarcode { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.editbarcode[hidden] { display: none; }
.editbarcode b { color: var(--ink); font-family: ui-monospace, monospace; letter-spacing: .02em; }

/* tray management */
.btn.sm { padding: 7px 12px; min-height: 36px; font-size: 12px; }
.loc-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.foldsel { font-family: "Jost"; font-size: 13px; padding: 7px 10px; border: 1px solid var(--tan); border-radius: 5px; background: #fff; min-height: 36px; color: var(--muted); }
.foldsel:focus { outline: none; border-color: var(--gold); }
.renamebox { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }
.renameinput { font-family: "Jost"; font-size: 15px; padding: 7px 10px; border: 1.5px solid var(--teal); border-radius: 5px; }
.renameinput:focus { outline: none; border-color: var(--gold); }

.trayadd { display: flex; gap: 8px; align-items: center; margin: 18px 0 4px; flex-wrap: wrap; }
.trayadd input { font-family: "Jost"; font-size: 16px; padding: 11px 12px; border: 1px solid var(--tan); border-radius: 5px; background: #fff; min-height: 44px; min-width: 280px; }
.trayadd input:focus { outline: none; border-color: var(--gold); }

/* row select + bulk-move bar */
.col-pick { width: 34px; text-align: center; }
.rowpick, .pickall { width: 20px; height: 20px; }
.legend-label { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-size: 11px; }

/* per-item "Edit" trigger (opens the Edit + maroon Remove menu) */
.col-menu { width: 64px; text-align: center; position: relative; }
.rowmenu-btn { background: #fff; border: 1px solid var(--tan); font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: .04em; line-height: 1; color: var(--teal); cursor: pointer; padding: 9px 14px; border-radius: 6px; min-height: 38px; }
.rowmenu-btn:hover { background: var(--tan); color: var(--teal); }
/* position: fixed (JS sets top/left from the trigger) so the menu escapes the
   table's overflow:hidden, which otherwise clipped it at the table edge. */
.rowmenu { position: fixed; z-index: 1000; background: #fff; border: 1px solid var(--tan); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 4px; min-width: 120px; }
.rowmenu[hidden] { display: none; }
.rowmenu-edit { display: block; width: 100%; text-align: left; background: none; color: var(--teal); border: none; border-radius: 4px; padding: 10px 14px; font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: .04em; cursor: pointer; min-height: 40px; }
.rowmenu-edit:hover { background: var(--tan); }
.rowmenu-remove { display: block; width: 100%; text-align: left; background: #6b1f2a; color: #fff; border: none; border-radius: 4px; padding: 10px 14px; font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: .04em; cursor: pointer; min-height: 40px; margin-top: 4px; }
.rowmenu-remove:hover { background: #7e2733; }
.addactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.editnote { font-size: 12px; color: var(--amber); display: inline-flex; align-items: center; gap: 8px; }
.bulkbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: var(--teal); color: var(--cream); padding: 12px 18px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.22); z-index: 12; }
.bulkbar[hidden] { display: none; }
.bulkbar select { font-family: "Jost"; font-size: 15px; padding: 9px 12px; border: none; border-radius: 5px; min-height: 40px; }
.bulkbar span { font-size: 13px; letter-spacing: .04em; }

/* floating return-to-top — above content but below the row menu (z1000) and bulk bar (z12); the slide-over (z1000) occludes it */
.scrolltop { position: fixed; right: 20px; bottom: 24px; z-index: 11; width: 48px; height: 48px; min-height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--teal); color: var(--cream); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: background .15s; }
.scrolltop:hover { background: var(--teal-2); }
.scrolltop[hidden] { display: none; }

@media (max-width: 760px) {
  .progress { grid-template-columns: repeat(2, 1fr); }
  thead th.col-shop, td.col-shop { display: none; }
}
/* =============================================================================
   JWLDRAW — Procreate-Inspired Drawing Tool
   ============================================================================= */

body.jwldraw-page {
  background-color: #2a2a2a !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;
}

/* ── TOP TOOLBAR ── */
.jwldraw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  gap: 8px;
  flex-shrink: 0;
  z-index: 10;
}

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

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

/* Tool Buttons */
.jwldraw-tool-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: all 0.15s;
}

.jwldraw-tool-btn:hover:not(:disabled) {
  background: #333;
  color: #fff;
}

.jwldraw-tool-btn--active {
  background: #444;
  color: #fff;
}

.jwldraw-tool-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.jwldraw-tool-btn--danger:hover:not(:disabled) {
  background: #4a1a1a;
  color: #f87171;
}

/* Save Button */
.jwldraw-save-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--color-accent, #D4AF37);
  color: #1a1a1a;
  font-weight: 600;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}

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

/* Title Input */
.jwldraw-title-input {
  background: transparent;
  border: 1px solid transparent;
  color: #ccc;
  font-size: 14px;
  text-align: center;
  padding: 4px 12px;
  border-radius: 4px;
  max-width: 250px;
  width: 100%;
}

.jwldraw-title-input:focus {
  border-color: #555;
  outline: none;
  background: #222;
}

.jwldraw-toolbar-divider {
  width: 1px;
  height: 24px;
  background: #444;
  margin: 0 4px;
}

/* ── BRUSH PRESET DROPDOWN ── */
.jwldraw-preset-dropdown {
  position: relative;
}

.jwldraw-preset-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #333;
  color: #ccc;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.jwldraw-preset-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  z-index: 20;
  min-width: 130px;
}

.jwldraw-preset-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 12px;
  cursor: pointer;
}

.jwldraw-preset-option:hover {
  background: #383838;
}

.jwldraw-preset-option--active {
  color: var(--color-accent, #D4AF37);
}

/* ── WORKSPACE ── */
.jwldraw-workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Sliders */
.jwldraw-sliders {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  gap: 16px;
  background: #1a1a1a;
  border-right: 1px solid #333;
  flex-shrink: 0;
}

.jwldraw-slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.jwldraw-slider-label {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.jwldraw-slider-value {
  font-size: 10px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

.jwldraw-vertical-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 28px;
  flex: 1;
  accent-color: var(--color-accent, #D4AF37);
  cursor: pointer;
}

/* ── CANVAS ── */
.jwldraw-canvas-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #3a3a3a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jwldraw-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.jwldraw-canvas--active {
  z-index: 1;
}

/* ── COLOR PICKER PANEL ── */
.jwldraw-color-panel {
  position: absolute;
  top: 54px;
  left: 60px;
  width: 240px;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 12px;
  z-index: 30;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.jwldraw-color-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}

.jwldraw-color-panel__close {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

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

.jwldraw-brightness-row {
  margin-bottom: 10px;
}

.jwldraw-brightness-row label {
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

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

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

.jwldraw-preset-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #444;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 0;
}

.jwldraw-preset-color:hover {
  border-color: #888;
}

.jwldraw-preset-color--white {
  border-color: #666;
}

.jwldraw-preset-colors-label {
  font-size: 11px;
  color: #888;
  display: block;
  margin-bottom: 6px;
}

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

.jwldraw-hex-row label {
  font-size: 11px;
  color: #888;
}

.jwldraw-hex-field {
  flex: 1;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #ccc;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

.jwldraw-hex-field:focus {
  outline: none;
  border-color: #666;
}

/* Color swatch in toolbar */
.jwldraw-color-swatch {
  padding: 4px;
}

.jwldraw-swatch {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #666;
}

/* ── SAVING OVERLAY ── */
.jwldraw-saving-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  z-index: 50;
}

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

.jwldraw-saving-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #555;
  border-top-color: var(--color-accent, #D4AF37);
  border-radius: 50%;
  animation: jwldraw-spin 0.7s linear infinite;
}

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

/* ── LAYER PANEL ── */
.jwldraw-layer-panel {
  width: 100px;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  background: #1a1a1a;
  border-left: 1px solid #333;
  flex-shrink: 0;
  gap: 2px;
}

.jwldraw-layer-panel__title {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 4px;
}

.jwldraw-layer-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.jwldraw-layer-btn:hover {
  background: #2a2a2a;
}

.jwldraw-layer-btn--active {
  background: #333;
  outline: 1px solid #555;
}

.jwldraw-layer-btn__name {
  font-size: 10px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.jwldraw-layer-vis:hover {
  color: #fff;
}

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

/* ── CURSOR ── */
.jwldraw-canvas--active {
  cursor: crosshair;
}

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

.jwldraw-canvas--active.jwldraw-cursor-eyedropper {
  cursor: copy;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .jwldraw-sliders {
    width: 36px;
    padding: 8px 2px;
  }

  .jwldraw-toolbar__center {
    display: none;
  }

  .jwldraw-color-panel {
    left: 4px;
    right: 4px;
    width: auto;
  }

  .jwldraw-preset-dropdown {
    display: none;
  }

  .jwldraw-layer-panel {
    width: 60px;
  }

  .jwldraw-layer-btn__name {
    font-size: 8px;
  }
}
/* =============================================================================
   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;
}

/* 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;
  }
}
/* =============================================================================
   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);
  }
}
/* Internal SKU generator — Utopian Creations design system.
   Self-contained (loaded only by layouts/sku.html.erb), styled to match the
   approved uc-sku-generator.html mockup.
   Palette: teal #003333, gold #c9a96e, cream #faf7f2, tan #e8dfd0.
   Fonts:   Cormorant Garamond (display), Jost (body). */

:root {
  --uc-teal: #003333;
  --uc-gold: #c9a96e;
  --uc-cream: #faf7f2;
  --uc-tan: #e8dfd0;
  --uc-ink: #1c2b2b;
  --uc-muted: #6b7a78;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.sku-body {
  margin: 0;
  font-family: "Jost", system-ui, sans-serif;
  background: var(--uc-cream);
  color: var(--uc-ink);
  line-height: 1.5;
  padding: 28px 20px 60px;
  -webkit-font-smoothing: antialiased;
}

.sku-shell {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- header ---- */

.sku-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--uc-gold);
}

.sku-title {
  margin: 4px 0 2px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 0.01em;
  color: var(--uc-teal);
}

.sku-subtitle {
  margin: 0;
  max-width: 34rem;
  font-size: 13px;
  font-weight: 300;
  color: var(--uc-muted);
}

/* ---- hallmark plate ---- */

.sku-plate {
  position: relative;
  margin: 26px 0 24px;
  padding: 34px 28px 28px;
  text-align: center;
  background: var(--uc-teal);
  border: 1px solid var(--uc-teal);
  border-radius: 4px;
  overflow: hidden;
}

.sku-plate::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 2px;
  pointer-events: none;
}

.sku-plate-label {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--uc-gold);
}

.sku-code {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--uc-cream);
  min-height: 56px;
}

.sku-code.is-placeholder {
  font-size: 30px;
  font-style: italic;
  color: rgba(250, 247, 242, 0.35);
}

.sku-plate-meta {
  margin: 10px 0 0;
  min-height: 16px;
  font-size: 12px;
  color: rgba(250, 247, 242, 0.6);
}

.sku-copy-btn {
  margin-top: 18px;
  padding: 9px 22px;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uc-teal);
  background: var(--uc-gold);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.sku-copy-btn.show {
  opacity: 1;
}

.sku-copy-btn:hover {
  background: #d8bb82;
}

/* ---- error ---- */

.sku-error {
  margin: 0 0 18px;
  padding: 10px 14px;
  font-size: 13px;
  color: #a23b3b;
  background: #f7e6e1;
  border: 1px solid #e3c2b8;
  border-radius: 4px;
}

/* ---- section labels ---- */

.sku-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--uc-muted);
}

.sku-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--uc-tan);
}

/* ---- product-type buttons ---- */

.sku-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 30px;
}

.sku-pbtn {
  padding: 14px 16px;
  text-align: left;
  font-family: "Jost", sans-serif;
  background: #fff;
  border: 1px solid var(--uc-tan);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.05s ease;
}

.sku-pbtn:hover {
  border-color: var(--uc-gold);
}

.sku-pbtn:active {
  transform: translateY(1px);
}

.sku-pbtn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.sku-pbtn-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--uc-teal);
}

.sku-pbtn-next {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 300;
  color: var(--uc-muted);
}

.sku-pbtn-next b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--uc-gold);
}

/* ---- recent history ---- */

.sku-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sku-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--uc-tan);
  font-size: 14px;
}

.sku-log-item:last-child {
  border-bottom: none;
}

.sku-log-code {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--uc-teal);
}

.sku-log-meta {
  flex: 1;
  text-align: right;
  font-size: 11px;
  color: var(--uc-muted);
}

.sku-log-copy {
  padding: 4px 9px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-muted);
  background: none;
  border: 1px solid var(--uc-tan);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sku-log-copy:hover {
  border-color: var(--uc-gold);
  color: var(--uc-teal);
}

.sku-log-empty {
  padding: 8px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--uc-muted);
}

/* ---- toast ---- */

.sku-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--uc-cream);
  background: var(--uc-teal);
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

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

@media (max-width: 520px) {
  .sku-code {
    font-size: 40px;
  }
}

/* ---- SKU audit panel ---- */

.sku-audit {
  margin-top: 34px;
}

.sku-audit-head {
  justify-content: space-between;
}

.sku-audit-head span {
  white-space: nowrap;
}

.sku-audit-head::after {
  content: none;
}

.sku-audit-btn {
  padding: 5px 12px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--uc-teal);
  background: none;
  border: 1px solid var(--uc-tan);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sku-audit-btn:hover:not(:disabled) {
  border-color: var(--uc-gold);
}

.sku-audit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.sku-audit-empty,
.sku-audit-running,
.sku-audit-time {
  font-size: 12px;
  font-weight: 300;
  color: var(--uc-muted);
}

.sku-audit-time {
  margin-top: 12px;
}

.sku-audit-clear {
  font-size: 14px;
  font-weight: 500;
  color: #2f7d4f;
}

.sku-audit-error {
  font-size: 13px;
  color: #a23b3b;
}

.sku-audit-subhead {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--uc-muted);
}

.sku-audit-subhead--alert {
  color: #a23b3b;
  font-weight: 600;
}

.sku-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sku-audit-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--uc-tan);
  font-size: 13px;
}

.sku-audit-item:last-child {
  border-bottom: none;
}

.sku-audit-sku {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--uc-teal);
  min-width: 110px;
}

.sku-audit-product {
  flex: 1;
  min-width: 120px;
  color: var(--uc-ink);
}

.sku-audit-issue {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.sku-audit-issue--duplicate {
  color: #fff;
  background: #a23b3b;
}

.sku-audit-issue--blank,
.sku-audit-issue--malformed {
  color: #7a5a12;
  background: #f0e3c6;
}

.sku-audit-link {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--uc-gold-deep, #b08e4f);
  text-decoration: none;
  white-space: nowrap;
}

.sku-audit-link:hover {
  text-decoration: underline;
}
/* =============================================================================
   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;
}
/* =============================================================================
   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%);

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

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

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


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

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

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

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

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

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

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

  --border-radius: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .variation-tile__image {
    padding: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#unified-lightbox button {
  transition: transform 0.2s ease, background-color 0.15s ease;
}
/* ═══════════════════════════════════════════════════════════════
   JD Virtual Ring Try-On Styles
   Matches the Ear Curator design system — warm beige, card-based,
   skin-token-aware, same typography and spacing scale.
   ═══════════════════════════════════════════════════════════════ */

/* Ensure Tailwind's .hidden overrides display:flex on our components */
.jd-tryon-modal-backdrop.hidden,
.jd-tryon-overlay.hidden,
.jd-tryon-photo-container.hidden,
.jd-tryon-photo-actions.hidden,
.jd-tryon-refinement.hidden,
.jd-tryon-empty-state.hidden,
.jd-tryon-toast.hidden,
.jd-tryon-touch-row.hidden,
.jd-tryon-action-row.hidden {
  display: none !important;
}

/* ── Page root ── */
.jd-tryon-page {
  min-height: 80vh;
  padding-bottom: 40px;
  font-family: var(--font-primary, 'DM Sans', system-ui, sans-serif);
  color: var(--color-foreground);
}

/* ── Sticky header (matches Ear Curator top bar) ── */
.jd-tryon-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-surface);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
}

.jd-tryon-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.jd-tryon-header-title {
  line-height: 1.1;
}

.jd-tryon-title-main {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  letter-spacing: 3px;
  font-size: 16px;
  color: var(--color-foreground);
}

.jd-tryon-title-sub {
  font-size: 10px;
  color: var(--color-accent);
  letter-spacing: 2px;
}

.jd-tryon-header-actions {
  display: flex;
  gap: 6px;
}

/* ── Chip buttons (matches Ear Curator category pills) ── */
.jd-tryon-chip-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.jd-tryon-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted-foreground);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  white-space: nowrap;
  cursor: pointer;
  transition: all 200ms;
  text-decoration: none;
  min-height: 36px;
}

.jd-tryon-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-foreground);
}

.jd-tryon-chip.active {
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
  border-color: var(--color-accent);
  font-weight: 700;
}

/* ── Canvas area ── */
.jd-tryon-canvas-wrap {
  padding: 14px;
}

/* Canvas card (matches EarCanvas card: rounded 18px, border, shadow) */
.jd-tryon-canvas-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jd-tryon-canvas-card canvas {
  touch-action: none;
}

/* ── Viewport scoped colors — dark card stays dark ── */
.jd-tryon-canvas-card {
  --vp-fg: hsl(0, 0%, 92%);
  --vp-muted: hsl(0, 0%, 62%);
  color: var(--vp-fg);
}

/* ── Controls panel below canvas (matches PlacementControls card) ── */
.jd-tryon-controls-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Touch controls row ── */
.jd-tryon-touch-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Action row ── */
.jd-tryon-action-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Accent button (matches Ear Curator accent/active chip style) ── */
.jd-tryon-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 14px;
  border: none;
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 200ms;
  min-height: 44px;
}

.jd-tryon-btn-accent:hover {
  filter: brightness(1.08);
}

.jd-tryon-btn-accent:active {
  transform: scale(0.97);
}

/* ── Secondary button (matches Ear Curator outline/muted style) ── */
.jd-tryon-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-light);
  color: var(--color-foreground);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  min-height: 44px;
  text-decoration: none;
}

.jd-tryon-btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ── Typography helpers ── */
.jd-tryon-empty-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--vp-fg, var(--color-foreground));
}

.jd-tryon-hint {
  font-size: 12px;
  color: var(--vp-muted, var(--color-muted-foreground));
  line-height: 1.5;
}

/* ── Overlay content layout ── */
.jd-tryon-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

/* ── Overlays (inside canvas card) ── */
.jd-tryon-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
}

/* ── Empty state ── */
.jd-tryon-empty-state {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jd-tryon-empty-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

/* ── Photo container ── */
.jd-tryon-photo-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jd-tryon-photo-canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
  object-fit: cover;
}

/* ── Refinement hint ── */
.jd-tryon-refinement {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ── Success toast ── */
.jd-tryon-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: var(--color-accent);
  color: var(--color-accent-contrast, #fff);
  font-family: var(--font-primary, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  animation: jd-tryon-toast-in 0.3s ease-out;
  pointer-events: none;
}

@keyframes jd-tryon-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Spinner ── */
.jd-tryon-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 9999px;
  animation: jd-tryon-spin 0.8s linear infinite;
}

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

/* ── Modal backdrop ── */
.jd-tryon-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  padding: 20px;
}

/* ── Modal card (matches Ear Curator card style) ── */
.jd-tryon-modal-card {
  max-width: 24rem;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  color: var(--color-foreground);
}

/* ── Responsive ── */
@media (min-width: 768px) {
  .jd-tryon-touch-row {
    display: none; /* desktop uses mouse/scroll */
  }

  .jd-tryon-touch-row.hidden {
    display: none !important;
  }
}
/* =============================================================================
   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.
 *


 */

/* 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;
  }
}

/* Help chat widget offset — clears mobile bottom nav */
.help-chat-offset {
  bottom: 5rem; /* 80px above mobile nav */
}

@media (min-width: 768px) {
  .help-chat-offset {
    bottom: 1rem; /* back to normal on desktop */
  }
}

/* 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);
}