/*
 * CRS customer UI system — v0.43.0
 * Loaded after the legacy stylesheet so existing markup and behavior remain
 * backwards compatible while the visual layer can evolve independently.
 */

.crs-configurator {
  --crs-ui-ink: #17191f;
  --crs-ui-ink-soft: #323640;
  --crs-ui-muted: #707581;
  --crs-ui-paper: #ffffff;
  --crs-ui-canvas: #f7f5ef;
  --crs-ui-canvas-2: #fbfaf7;
  --crs-ui-line: #e8e3d8;
  --crs-ui-line-strong: #d9d1c1;
  --crs-ui-gold: #a77a28;
  --crs-ui-gold-dark: #7d5818;
  --crs-ui-gold-soft: #f7ecd6;
  --crs-ui-green: #087f5b;
  --crs-ui-green-soft: #e7f7f0;
  --crs-ui-red: #b42318;
  --crs-ui-blue: #2563eb;
  --crs-ui-shadow-sm: 0 5px 18px rgba(28, 25, 20, .055);
  --crs-ui-shadow-md: 0 14px 38px rgba(28, 25, 20, .085);
  --crs-ui-shadow-lg: 0 24px 65px rgba(28, 25, 20, .15);
  --crs-ui-radius-sm: 12px;
  --crs-ui-radius-md: 18px;
  --crs-ui-radius-lg: 26px;
  color: var(--crs-ui-ink);
  margin: clamp(12px, 2vw, 28px) auto;
  max-width: 1440px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

.crs-configurator button,
.crs-configurator input,
.crs-configurator select,
.crs-configurator textarea { font: inherit; }

.crs-configurator button,
.crs-configurator a,
.crs-configurator input,
.crs-configurator select { -webkit-tap-highlight-color: transparent; }

.crs-configurator button,
.crs-configurator [role="button"] {
  touch-action: manipulation;
}

.crs-configurator button:disabled,
.crs-configurator [aria-disabled="true"] {
  cursor: not-allowed;
}

.crs-configurator > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.crs-configurator .crs-initial-loader {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 290px;
  border: 1px solid var(--crs-ui-line);
  border-radius: 28px;
  background: linear-gradient(145deg, #fff, var(--crs-ui-canvas));
  color: var(--crs-ui-muted);
  box-shadow: var(--crs-ui-shadow-sm);
}

.crs-configurator .crs-initial-loader span,
.crs-configurator .crs-ui-loader span {
  width: 34px;
  height: 34px;
  border: 3px solid #e9dfcc;
  border-top-color: var(--crs-ui-gold);
  border-radius: 50%;
  animation: crsUiSpin .8s linear infinite;
}

.crs-configurator .crs-initial-loader b { font-size: 12px; }
.crs-configurator .crs-ui-loader { border-radius: 22px; background: rgba(247, 245, 239, .92); color: var(--crs-ui-ink-soft); backdrop-filter: blur(6px); }

.crs-configurator button:focus-visible,
.crs-configurator a:focus-visible,
.crs-configurator input:focus-visible,
.crs-configurator select:focus-visible,
.crs-configurator textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.crs-configurator .crs-builder-ui {
  --crs-progress: 16.666%;
  position: relative;
  overflow: clip;
  padding: clamp(12px, 1.8vw, 26px);
  border: 1px solid var(--crs-ui-line);
  border-radius: 32px;
  background:
    radial-gradient(circle at 95% 2%, rgba(183, 139, 55, .10), transparent 22rem),
    linear-gradient(180deg, var(--crs-ui-canvas-2), var(--crs-ui-canvas));
  box-shadow: 0 30px 90px rgba(50, 43, 31, .08);
}

.crs-configurator .crs-builder-ui[data-step="variant"] { --crs-progress: 33.333%; }
.crs-configurator .crs-builder-ui[data-step="ring"] { --crs-progress: 50%; }
.crs-configurator .crs-builder-ui[data-step="gem"] { --crs-progress: 66.666%; }
.crs-configurator .crs-builder-ui[data-step="engraving"] { --crs-progress: 83.333%; }
.crs-configurator .crs-builder-ui[data-step="summary"] { --crs-progress: 100%; }

/* Header */
.crs-configurator .crs-builder-head {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
  margin: 0 0 14px;
  padding: clamp(20px, 2.6vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 0, rgba(214, 174, 94, .25), transparent 15rem),
    linear-gradient(135deg, #12141a 0%, #242832 65%, #17191f 100%);
  color: #fff;
  box-shadow: 0 18px 45px rgba(23, 25, 31, .18);
  scroll-margin-top: 14px;
}

.crs-configurator .crs-builder-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -70px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255, 255, 255, .022), 0 0 0 70px rgba(255, 255, 255, .015);
}

.crs-configurator .crs-builder-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.crs-configurator .crs-brand-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border: 1px solid rgba(236, 207, 145, .32);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(210, 165, 79, .22), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.crs-configurator .crs-brand-mark svg { width: 35px; height: 35px; overflow: visible; }
.crs-configurator .crs-brand-mark path { fill: #ddb66a; stroke: #f5dda9; stroke-width: 1.2; }
.crs-configurator .crs-brand-mark circle { fill: none; stroke: #ddb66a; stroke-width: 3.5; }

.crs-configurator .crs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #dfc58d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.crs-configurator .crs-kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

.crs-configurator .crs-builder-head h3 {
  margin: 7px 0 6px;
  color: #fff;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 900;
  line-height: 1.35;
}

.crs-configurator .crs-builder-head p {
  max-width: 680px;
  margin: 0;
  color: #cbd0da;
  font-size: 13px;
  line-height: 1.9;
}

.crs-configurator .crs-head-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 0 0 auto;
}

.crs-configurator .crs-back-to-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .075);
  color: #f5f6f8;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.crs-configurator .crs-back-to-shop i { color: #dfc58d; font-size: 17px; font-style: normal; }
.crs-configurator .crs-back-to-shop:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .32); transform: translateY(-1px); }

.crs-configurator .crs-progress-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 50%;
  background: conic-gradient(#d9ad58 var(--crs-progress), rgba(255, 255, 255, .14) 0);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.crs-configurator .crs-progress-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #20232b;
}

.crs-configurator .crs-progress-ring b,
.crs-configurator .crs-progress-ring span { position: relative; z-index: 1; }
.crs-configurator .crs-progress-ring b { margin-top: -7px; color: #fff; font-size: 24px; line-height: 1; }
.crs-configurator .crs-progress-ring span { margin-top: -26px; color: #bfc4ce; font-size: 10px; }

/* Utility toolbar */
.crs-configurator .crs-design-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--crs-ui-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--crs-ui-shadow-sm);
  backdrop-filter: blur(12px);
}

.crs-configurator .crs-design-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--crs-ui-ink-soft);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.crs-configurator .crs-design-toolbar button > i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: #f0eee8;
  color: var(--crs-ui-ink-soft);
  font-size: 16px;
  font-style: normal;
}

.crs-configurator .crs-design-toolbar button:hover { background: #f4f1ea; color: var(--crs-ui-ink); transform: translateY(-1px); }
.crs-configurator .crs-design-toolbar button:disabled { opacity: .38; transform: none; cursor: not-allowed; }
.crs-configurator .crs-design-toolbar .crs-favorite-design { border: 0; background: transparent; color: #9f2848; }
.crs-configurator .crs-design-toolbar .crs-favorite-design > i { background: #fff0f4; color: #b42352; }
.crs-configurator .crs-design-toolbar .crs-share-design { border: 0; background: transparent; color: #2456aa; }
.crs-configurator .crs-design-toolbar .crs-share-design > i { background: #edf4ff; color: #2456aa; }
.crs-configurator .crs-design-toolbar .crs-open-designs {
  margin-inline-start: auto;
  border-color: var(--crs-ui-ink);
  background: var(--crs-ui-ink);
  color: #fff;
}
.crs-configurator .crs-design-toolbar .crs-open-designs > i { background: rgba(255, 255, 255, .12); color: #fff; }
.crs-configurator .crs-design-toolbar .crs-open-designs > b { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #d7a74d; color: #17191f; font-size: 10px; }

/* Stepper */
.crs-configurator .crs-progress-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 18px;
  padding: 12px 10px;
  overflow: visible;
  border: 1px solid var(--crs-ui-line);
  border-radius: 19px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--crs-ui-shadow-sm);
}

.crs-configurator .crs-progress-steps span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8b8f97;
  font-size: 11px;
}

.crs-configurator .crs-progress-steps span::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16px;
  right: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 2px;
  background: #e7e2d8;
}

.crs-configurator .crs-progress-steps span:first-child::after { display: none; }
.crs-configurator .crs-progress-steps i {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 2px solid #e5dfd3;
  border-radius: 50%;
  background: #fff;
  color: #858a94;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(32, 28, 21, .05);
}

.crs-configurator .crs-progress-steps b { overflow: hidden; max-width: 100%; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.crs-configurator .crs-progress-steps .done { border: 0; background: transparent; color: var(--crs-ui-green); }
.crs-configurator .crs-progress-steps .done::after { background: #7bc9ad; }
.crs-configurator .crs-progress-steps .done i { border-color: var(--crs-ui-green); background: var(--crs-ui-green); color: #fff; }
.crs-configurator .crs-progress-steps .active { border: 0; background: transparent; color: var(--crs-ui-gold-dark); }
.crs-configurator .crs-progress-steps .active i { border-color: var(--crs-ui-gold); background: var(--crs-ui-gold-soft); color: var(--crs-ui-gold-dark); box-shadow: 0 0 0 5px rgba(167, 122, 40, .10); }

/* Main layout */
.crs-configurator .crs-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
}

.crs-configurator .crs-builder-main { min-width: 0; }
.crs-configurator .crs-order-summary { position: sticky; top: 18px; display: grid; gap: 12px; }
.crs-configurator .crs-mobile-live-preview { display: none; }

/* Shared surfaces */
.crs-configurator .crs-filter-card,
.crs-configurator .crs-option-panel,
.crs-configurator .crs-selected-mount,
.crs-configurator .crs-size-helper,
.crs-configurator .crs-final-card,
.crs-configurator .crs-ready-block,
.crs-configurator .crs-set-intro,
.crs-configurator .crs-set-pair-panel,
.crs-configurator .crs-set-summary-box,
.crs-configurator .crs-gem-cut-select,
.crs-configurator .crs-gem-cut-image-view {
  border: 1px solid var(--crs-ui-line);
  border-radius: var(--crs-ui-radius-lg);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--crs-ui-shadow-sm);
}

.crs-configurator .crs-filter-card,
.crs-configurator .crs-option-panel,
.crs-configurator .crs-size-helper,
.crs-configurator .crs-final-card,
.crs-configurator .crs-ready-block { padding: clamp(14px, 1.8vw, 22px); margin-bottom: 14px; }

.crs-configurator .crs-filter-card { background: linear-gradient(180deg, #fff, #fbfaf7); }
.crs-configurator .crs-filter-head { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; }
.crs-configurator .crs-filter-head strong { color: var(--crs-ui-ink); font-size: 14px; font-weight: 900; }
.crs-configurator .crs-filter-head > small { margin-inline-start: auto; color: var(--crs-ui-muted); font-size: 11px; }
.crs-configurator .crs-filter-head .crs-link { margin-inline-start: auto; color: var(--crs-ui-gold-dark); font-size: 11px; font-weight: 800; }
.crs-configurator .crs-filter-toggle { display: none; }

.crs-configurator .crs-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.crs-configurator .crs-filters label { display: grid; gap: 6px; }
.crs-configurator .crs-filters label > span { color: #555b66; font-size: 11px; font-weight: 850; }
.crs-configurator .crs-filters select,
.crs-configurator .crs-engraving-text,
.crs-configurator .crs-text-field input {
  width: 100%;
  min-height: 45px;
  padding: 8px 12px;
  border: 1px solid var(--crs-ui-line-strong);
  border-radius: 13px;
  background: #fff;
  color: var(--crs-ui-ink);
  font-size: 12px;
  box-shadow: inset 0 1px 2px rgba(28, 25, 20, .025);
}

.crs-configurator .crs-filters select:hover,
.crs-configurator .crs-engraving-text:hover { border-color: #bfb4a1; }

/* Product cards */
.crs-configurator .crs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 14px;
}

.crs-configurator .crs-card-grid.compact { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

.crs-configurator .crs-product-card {
  position: relative;
  min-width: 0;
  padding: 9px;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--crs-ui-line);
  border-radius: 22px;
  background: #fff;
  color: var(--crs-ui-ink);
  box-shadow: var(--crs-ui-shadow-sm);
  transform: translateZ(0);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.crs-configurator .crs-product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .2s ease;
}

.crs-configurator .crs-product-card:hover { border-color: #cabb9e; box-shadow: var(--crs-ui-shadow-md); transform: translateY(-3px); }
.crs-configurator .crs-product-card.active,
.crs-configurator .crs-product-card:has(.active) { border-color: var(--crs-ui-gold); background: #fffdf8; box-shadow: 0 14px 38px rgba(125, 88, 24, .14); }
.crs-configurator .crs-product-card.active::after { border-color: rgba(167, 122, 40, .45); }
.crs-configurator .crs-product-card img,
.crs-configurator .crs-placeholder { border-radius: 16px; background: #f1eee7; }

.crs-configurator .crs-card-body { gap: 6px; }
.crs-configurator .crs-card-body strong { color: var(--crs-ui-ink); font-size: 14px; font-weight: 900; line-height: 1.7; }
.crs-configurator .crs-card-body small,
.crs-configurator .crs-card-body em { color: var(--crs-ui-muted); font-size: 10px; line-height: 1.75; }

.crs-configurator .crs-mount-card {
  padding: 0;
  border-radius: 23px;
  background: #fff;
  box-shadow: var(--crs-ui-shadow-sm);
}

.crs-configurator .crs-mount-card .crs-mount-slider { aspect-ratio: 1.14 / 1; background: #eeeae2; }
.crs-configurator .crs-mount-card .crs-mount-slider img { transition: transform .35s ease; }
.crs-configurator .crs-mount-card:hover .crs-mount-slider img { transform: scale(1.025); }
.crs-configurator .crs-mount-slider figcaption { right: 8px; bottom: 8px; left: 8px; padding: 7px 9px; border-radius: 10px; background: linear-gradient(90deg, rgba(23, 25, 31, .83), rgba(23, 25, 31, .42)); font-size: 10px; }
.crs-configurator .crs-mount-card .crs-card-body { padding: 11px 13px 14px !important; gap: 7px; }
.crs-configurator .crs-card-action,
.crs-configurator .crs-gem-select-hint {
  min-height: 29px;
  padding: 5px 11px;
  border: 1px solid #282b32;
  border-radius: 999px;
  background: #282b32;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.crs-configurator .crs-material-labels i,
.crs-configurator .crs-stone-size-labels i,
.crs-configurator .crs-gem-quick-meta i {
  padding: 4px 8px;
  border-color: var(--crs-ui-line);
  background: #f6f3ed;
  color: #545963;
  font-size: 9px;
}

.crs-configurator .crs-stone-size-labels i { border-color: #ead8b8; background: #fff8e9; color: var(--crs-ui-gold-dark); }
.crs-configurator .crs-product-card.crs-gem { padding: 8px; border-radius: 23px; background: #fff; box-shadow: var(--crs-ui-shadow-sm); }
.crs-configurator .crs-product-card.crs-gem:hover { border-color: #cabb9e; box-shadow: var(--crs-ui-shadow-md); }
.crs-configurator .crs-gem-card-media { border-radius: 17px; background: #f1eee7; }
.crs-configurator .crs-gem-card-media > img,
.crs-configurator .crs-gem-card-media > .crs-placeholder { height: 176px; border-radius: 17px; }
.crs-configurator .crs-gem-size-badge { border: 0; background: rgba(23, 25, 31, .84); }
.crs-configurator .crs-gem-status { border-color: var(--crs-ui-line); background: #f8f6f1; color: #5c616b !important; }

.crs-configurator .crs-promo-badges { top: 10px; left: 10px; gap: 5px; }
.crs-configurator .crs-promo-badges i { padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .22); font-size: 9px; box-shadow: 0 6px 16px rgba(23, 25, 31, .16); }
.crs-configurator .crs-new-badge { background: #282b32; }
.crs-configurator .crs-sale-badge { background: #b42318; }
.crs-configurator .crs-card-price { gap: 6px; color: var(--crs-ui-ink); }
.crs-configurator .crs-card-price ins { color: #b42318; }
.crs-configurator .crs-sale-countdown { border-color: #f0c9c5; background: #fff5f4; color: #9f2118; }

.crs-configurator .crs-mount-select,
.crs-configurator .crs-set-group {
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: right;
  cursor: pointer;
}

.crs-configurator .crs-product-card.crs-design > img,
.crs-configurator .crs-product-card.crs-set-gem > img,
.crs-configurator .crs-ready-block .crs-product-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.crs-configurator .crs-product-card.active .crs-card-action,
.crs-configurator .crs-product-card.active .crs-gem-select-hint {
  border-color: var(--crs-ui-gold-dark);
  background: var(--crs-ui-gold-dark);
}

.crs-configurator .crs-sale-countdown {
  align-items: center;
  min-height: 25px;
  line-height: 1.55;
}

/* Mode and selections */
.crs-configurator .crs-mode-switch {
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0 0 13px;
  padding: 6px;
  border: 1px solid var(--crs-ui-line);
  border-radius: 17px;
  background: #ebe7de;
}

.crs-configurator .crs-build-mode {
  min-height: 43px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #656a74;
  box-shadow: none;
  font-size: 12px;
  cursor: pointer;
}

.crs-configurator .crs-build-mode.active { background: #fff; color: var(--crs-ui-ink); box-shadow: 0 4px 15px rgba(28, 25, 20, .08); }

.crs-configurator .crs-back {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--crs-ui-line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, .85);
  color: #555a64;
  font-size: 11px;
  font-weight: 800;
}

.crs-configurator .crs-back::before { content: "→"; margin-left: 7px; color: var(--crs-ui-gold); font-size: 15px; }

.crs-configurator .crs-selected-mount-pro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(135deg, #fff, #faf7f0);
}

.crs-configurator .crs-selected-mount-pro > .crs-mount-slider { width: 150px; min-width: 150px; border-radius: 18px; }
.crs-configurator .crs-selected-mount-pro > div > span { color: var(--crs-ui-gold-dark); font-size: 10px; font-weight: 800; }
.crs-configurator .crs-selected-mount-pro > div > strong { color: var(--crs-ui-ink); font-size: 18px; }

.crs-configurator .crs-variant-guide { border-color: #e6dcc8; border-radius: 16px; background: #fffaf0; }
.crs-configurator .crs-option-panel { display: grid; gap: 13px; }
.crs-configurator .crs-option-group { gap: 9px; }
.crs-configurator .crs-option-title { gap: 7px; }
.crs-configurator .crs-option-title > span { color: var(--crs-ui-ink); font-size: 13px; font-weight: 900; }
.crs-configurator .crs-option-title > small { border: 0; background: var(--crs-ui-green-soft) !important; color: var(--crs-ui-green) !important; }
.crs-configurator .crs-option-title .crs-help-icon { border-color: #ded5c5 !important; background: #fff !important; color: #5d626d !important; }
.crs-configurator .crs-option-title .crs-help-icon i { background: var(--crs-ui-gold) !important; }
.crs-configurator .crs-option-title .crs-help-icon b { color: var(--crs-ui-gold-dark) !important; }

.crs-configurator .crs-option-group.visual-options {
  margin-top: 0;
  padding: 12px;
  border-color: var(--crs-ui-line);
  border-radius: 19px;
  background: #faf8f3;
}

.crs-configurator .crs-visual-choice-row { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.crs-configurator .crs-visual-choice {
  min-height: 0;
  padding: 8px !important;
  border-color: var(--crs-ui-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(28, 25, 20, .045);
}

.crs-configurator .crs-visual-choice.active {
  border-color: var(--crs-ui-gold) !important;
  background: #fffdf8 !important;
  box-shadow: 0 0 0 2px rgba(167, 122, 40, .18), 0 10px 24px rgba(125, 88, 24, .10) !important;
}

.crs-configurator .crs-option-visual { border-radius: 13px; background: #f1eee7; }
.crs-configurator .crs-choice-text b { color: var(--crs-ui-ink); }
.crs-configurator .crs-count-chip-row { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.crs-configurator .crs-count-chip {
  min-height: 68px;
  border-color: var(--crs-ui-line);
  border-radius: 15px;
  box-shadow: none;
}

.crs-configurator .crs-option-group .crs-count-chip.active {
  border-color: var(--crs-ui-gold) !important;
  background: var(--crs-ui-gold-soft) !important;
  color: var(--crs-ui-gold-dark) !important;
  box-shadow: 0 0 0 2px rgba(167, 122, 40, .13) !important;
}
.crs-configurator .crs-option-group .crs-count-chip.active b { color: var(--crs-ui-gold-dark) !important; }

.crs-configurator .crs-resolved-variant {
  padding: 14px 16px;
  border-color: #acdcca;
  border-radius: 18px;
  background: var(--crs-ui-green-soft);
  color: #086347;
}

.crs-configurator .crs-variant-showcase.enhanced { grid-template-columns: minmax(180px, 280px) 1fr; border-color: var(--crs-ui-line); border-radius: 22px; background: #fff; }
.crs-configurator .crs-variant-media-view { border-color: var(--crs-ui-line); box-shadow: none; }

/* Ring sizes */
.crs-configurator .crs-sizes { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.crs-configurator .crs-size {
  min-height: 72px;
  padding: 9px 6px;
  border-color: var(--crs-ui-line-strong);
  border-radius: 15px;
  background: #fff;
  color: var(--crs-ui-ink);
  box-shadow: 0 3px 10px rgba(28, 25, 20, .035);
}
.crs-configurator .crs-size b { font-size: 17px; }
.crs-configurator .crs-size.active { border-color: var(--crs-ui-gold); background: var(--crs-ui-gold-soft); color: var(--crs-ui-gold-dark); box-shadow: 0 0 0 2px rgba(167, 122, 40, .14); }
.crs-configurator .crs-size.active span { color: #725321; }
.crs-configurator .crs-size.nonstandard { border-color: #e3a15c !important; background: #fff7ed !important; }
.crs-configurator .crs-size-guide-btn { min-height: 40px; border-color: var(--crs-ui-line-strong); color: var(--crs-ui-gold-dark); }
.crs-configurator .crs-size-guide { border-color: #dbe1ea; background: #f8fafc; }

/* Engraving */
.crs-configurator .crs-engraving-modes,
.crs-configurator .crs-set-engraving-modes { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 9px; }
.crs-configurator .crs-mode {
  min-height: 68px;
  padding: 11px;
  border-color: var(--crs-ui-line-strong);
  border-radius: 17px;
  background: #fff;
  color: var(--crs-ui-ink-soft);
}
.crs-configurator .crs-mode.active { border-color: var(--crs-ui-gold); background: var(--crs-ui-gold-soft); color: var(--crs-ui-gold-dark); box-shadow: 0 0 0 2px rgba(167, 122, 40, .12); }
.crs-configurator .crs-mode.active span { color: #765723; }
.crs-configurator .crs-upload-label { border-color: #cfc5b5; border-radius: 17px; background: #faf8f3; }
.crs-configurator .crs-gem-cut-select > div { gap: 9px; }
.crs-configurator .crs-cut-btn { border-color: var(--crs-ui-line-strong); border-radius: 16px !important; background: #fff; }
.crs-configurator .crs-cut-btn.active { border-color: var(--crs-ui-gold); background: var(--crs-ui-gold-soft); color: var(--crs-ui-gold-dark); }
.crs-configurator .crs-matte-option { border-color: #b7decf; background: var(--crs-ui-green-soft); color: #086347; }

/* Feedback */
.crs-configurator .crs-note,
.crs-configurator .crs-warning,
.crs-configurator .crs-ok { padding: 12px 14px; border-radius: 15px; font-size: 12px; line-height: 1.9; }
.crs-configurator .crs-note { border-color: #cddcf5; background: #f2f6fd; color: #294d84; }
.crs-configurator .crs-warning { border-color: #efd1a7; background: #fff8ed; color: #8a4e16; }
.crs-configurator .crs-ok { border-color: #b7decf; background: var(--crs-ui-green-soft); color: #086347; }

/* Buttons */
.crs-configurator .crs-primary,
.crs-configurator .crs-secondary,
.crs-configurator .crs-add-to-cart-btn {
  min-height: 47px;
  padding: 11px 18px;
  border-radius: 14px;
  font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.crs-configurator .crs-primary,
.crs-configurator .crs-add-to-cart-btn { border-color: var(--crs-ui-ink); background: var(--crs-ui-ink); color: #fff; box-shadow: 0 9px 22px rgba(23, 25, 31, .16); }
.crs-configurator .crs-primary:hover,
.crs-configurator .crs-add-to-cart-btn:hover { background: #2b2f38; transform: translateY(-1px); box-shadow: 0 13px 28px rgba(23, 25, 31, .2); }
.crs-configurator .crs-secondary { border-color: var(--crs-ui-line-strong); background: #fff; color: var(--crs-ui-ink); }
.crs-configurator .crs-step-actions { gap: 9px; margin-top: 15px; }
.crs-configurator .crs-load-more-wrap { padding: 18px 0 2px; }
.crs-configurator .crs-load-more {
  min-width: min(100%, 240px);
  min-height: 48px;
  border-color: var(--crs-ui-line-strong);
  background: #fff;
  box-shadow: 0 7px 18px rgba(28, 25, 20, .055);
}
.crs-configurator .crs-load-more:hover { border-color: var(--crs-ui-gold); background: #fffaf0; color: var(--crs-ui-gold-dark); }
.crs-configurator .crs-load-more:disabled { opacity: .56; box-shadow: none; }

/* Summary and preview */
.crs-configurator .crs-live-preview {
  margin: 0;
  padding: 11px;
  border: 1px solid var(--crs-ui-line);
  border-radius: 23px;
  background: linear-gradient(150deg, #fff, #f5f1e8);
  box-shadow: var(--crs-ui-shadow-sm);
}
.crs-configurator .crs-live-preview > div:first-child { margin-bottom: 9px; }
.crs-configurator .crs-live-preview > div:first-child strong { color: var(--crs-ui-ink); font-size: 13px; }
.crs-configurator .crs-live-preview > div:first-child small { color: var(--crs-ui-muted); }
.crs-configurator .crs-composite-stage { border: 1px solid #eee8dd; border-radius: 17px; background: radial-gradient(circle at 50% 35%, #fff, #e9e3d8); }
.crs-configurator .crs-composite-card figcaption { color: var(--crs-ui-muted); }

.crs-configurator .crs-summary-card {
  padding: 16px;
  border: 1px solid var(--crs-ui-line);
  border-radius: 23px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--crs-ui-shadow-sm);
}
.crs-configurator .crs-summary-title { margin-bottom: 13px; }
.crs-configurator .crs-summary-title strong { color: var(--crs-ui-ink); font-size: 15px; }
.crs-configurator .crs-summary-title span { background: #f1eee7; color: #636873; font-size: 10px; font-weight: 800; }
.crs-configurator .crs-summary-card ul { gap: 8px; }
.crs-configurator .crs-summary-card li { gap: 9px; padding: 0 0 8px; border-color: #ece7de; font-size: 11px; }
.crs-configurator .crs-summary-card li span { color: var(--crs-ui-muted); }
.crs-configurator .crs-summary-card li b { max-width: 58%; color: var(--crs-ui-ink-soft); font-size: 11px; line-height: 1.6; }
.crs-configurator .crs-summary-card li.ok b { color: var(--crs-ui-green); }
.crs-configurator .crs-price-box { margin-top: 12px; padding: 13px; border-radius: 15px; background: var(--crs-ui-ink); }
.crs-configurator .crs-price-box strong { color: #f1d28f; font-size: 16px; }
.crs-configurator .crs-preparation-estimate { border-color: #ead9b8; background: #fff9ec; }
.crs-configurator .crs-preparation-estimate span { color: #8a641d; }
.crs-configurator .crs-preparation-estimate b { color: #6f4f16; }
.crs-configurator .crs-next-box { border-color: #ecd3aa; background: #fff9ef; color: #83501b; }
.crs-configurator .crs-next-box.ok { border-color: #b7decf; background: var(--crs-ui-green-soft); color: #086347; }
.crs-configurator .crs-summary-visuals { gap: 7px; }
.crs-configurator .crs-summary-visuals figure { border-color: var(--crs-ui-line); border-radius: 13px; }

.crs-configurator .crs-final-card { background: linear-gradient(160deg, #fff, #fbf8f1); }
.crs-configurator .crs-final-card > h3 { margin: 0; color: var(--crs-ui-ink); font-size: 21px; }
.crs-configurator .crs-final-card > p { color: var(--crs-ui-muted); }
.crs-configurator .crs-final-card .crs-summary-card { border-color: var(--crs-ui-line); background: #fff; }
.crs-configurator .crs-add-to-cart-form { margin-top: 15px; }
.crs-configurator .crs-add-to-cart-btn { width: 100%; min-height: 54px; font-size: 14px; }

/* Set builder */
.crs-configurator .crs-set-section { border-color: var(--crs-ui-line); border-radius: 18px; background: #faf8f3; }
.crs-configurator .crs-set-stone { border-color: var(--crs-ui-line); border-radius: 17px; }
.crs-configurator .crs-set-stone.active { border-color: var(--crs-ui-gold); background: #fffdf8; box-shadow: 0 0 0 2px rgba(167, 122, 40, .13); color: var(--crs-ui-ink); }
.crs-configurator .crs-set-summary-two > div { border-color: var(--crs-ui-line); border-radius: 15px; background: #fbfaf7; }

/* Secondary controls used across gem filters and the size guide */
.crs-configurator .crs-color-button-filter { gap: 9px; }
.crs-configurator .crs-color-button-filter > span { color: var(--crs-ui-ink); font-size: 12px; font-weight: 900; }
.crs-configurator .crs-color-button-filter > div,
.crs-configurator .crs-color-buttons {
  display: flex;
  gap: 8px;
  padding: 2px 1px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
.crs-configurator .crs-color-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--crs-ui-line-strong);
  border-radius: 999px;
  background: #fff;
  color: #555a64;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
}
.crs-configurator .crs-color-filter-btn i { width: 18px; height: 18px; border-radius: 50%; }
.crs-configurator .crs-color-filter-btn.active { border-color: var(--crs-ui-gold); background: var(--crs-ui-gold-soft); color: var(--crs-ui-gold-dark); box-shadow: 0 0 0 2px rgba(167, 122, 40, .12); }

.crs-configurator .crs-size-converter { border-color: var(--crs-ui-line); }
.crs-configurator .crs-convert-grid { gap: 10px; }
.crs-configurator .crs-convert-grid label { border-color: var(--crs-ui-line); border-radius: 15px; background: #fff; }
.crs-configurator .crs-convert-grid input { min-height: 43px; border-color: var(--crs-ui-line-strong); border-radius: 11px; }
.crs-configurator .crs-convert-btn,
.crs-configurator .crs-use-converted-size { min-height: 42px; border-radius: 12px; background: var(--crs-ui-ink); font-weight: 850; }
.crs-configurator .crs-convert-card { border-color: #b7decf; border-radius: 15px; background: var(--crs-ui-green-soft); }

.crs-configurator .crs-price-breakdown { border-color: var(--crs-ui-line-strong); border-radius: 15px; background: #fbfaf7; }
.crs-configurator .crs-set-intro,
.crs-configurator .crs-set-pair-panel,
.crs-configurator .crs-set-summary-box { padding: clamp(14px, 1.8vw, 20px); }
.crs-configurator .crs-set-ring-grid { gap: 12px; }
.crs-configurator .crs-set-section { padding: 13px; }
.crs-configurator .crs-set-size-visual { background: #f0ede6; }
.crs-configurator .crs-set-size-visual img { transition: transform .25s ease; }
.crs-configurator .crs-set-stone:hover .crs-set-size-visual img { transform: scale(1.025); }
.crs-configurator .crs-set-stone.locked { opacity: .52; }

/* Modals and saved designs */
.crs-configurator .crs-modal { padding: 18px; background: rgba(16, 18, 23, .64); backdrop-filter: blur(6px); }
.crs-configurator .crs-modal > div { border: 1px solid rgba(255, 255, 255, .7); border-radius: 26px; background: #fff; box-shadow: var(--crs-ui-shadow-lg); }
.crs-configurator .crs-modal-close { display: grid; place-items: center; width: 38px; height: 38px; background: #f1eee7; color: #4d525c; }
.crs-configurator .crs-design-dialog-head h3 { color: var(--crs-ui-ink); }
.crs-configurator .crs-run-compare,
.crs-configurator .crs-copy-share { min-height: 43px; border-radius: 13px; background: var(--crs-ui-ink); }
.crs-configurator .crs-saved-design-grid { gap: 11px; }
.crs-configurator .crs-saved-design-card { border-color: var(--crs-ui-line); border-radius: 18px; background: #fff; box-shadow: 0 4px 15px rgba(28, 25, 20, .04); }
.crs-configurator .crs-saved-design-card .crs-load-design { background: var(--crs-ui-ink); }
.crs-configurator .crs-compare-table table { border-color: var(--crs-ui-line); }
.crs-configurator .crs-compare-table th { background: #f7f5ef; }
.crs-configurator .crs-design-toast { border-radius: 14px; background: var(--crs-ui-green); box-shadow: var(--crs-ui-shadow-lg); }

/* The option-help dialog is mounted on body, outside .crs-configurator. */
.crs-help-modal { isolation: isolate; }
.crs-help-modal-backdrop { background: rgba(16, 18, 23, .64); backdrop-filter: blur(6px); }
.crs-help-modal-card { border: 1px solid rgba(255, 255, 255, .72); background: #fff; color: #17191f; box-shadow: 0 24px 70px rgba(16, 18, 23, .3); }
.crs-help-modal-card h3 { color: #17191f; }
.crs-help-modal-card p { color: #4f5560; }
.crs-help-close { display: grid; place-items: center; min-width: 40px; width: 40px; height: 40px; background: #f1eee7; color: #4d525c; }

.crs-shop-loader { background: rgba(247, 245, 239, .9); color: #17191f; }
.crs-shop-loader span { border-color: #e9dfcc; border-top-color: #a77a28; }

/* Account page */
.crs-account-designs { color: #22252c; }
.crs-account-designs > h2 { font-size: 22px; }
.crs-account-design-grid { gap: 13px; }
.crs-account-design-grid article { border-color: #e8e3d8; border-radius: 20px; box-shadow: 0 8px 24px rgba(28, 25, 20, .06); }
.crs-account-design-grid article .button { border-radius: 11px; background: #17191f; color: #fff; }

/* Tablet */
@media (max-width: 1160px) {
  .crs-configurator .crs-builder-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
  .crs-configurator .crs-card-grid { grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 11px; }
  .crs-configurator .crs-builder-head { min-height: 120px; }
  .crs-configurator .crs-progress-ring { width: 70px; height: 70px; flex-basis: 70px; }
  .crs-configurator .crs-design-toolbar button { padding-inline: 10px; }
}

@media (max-width: 920px) {
  .crs-configurator .crs-builder-layout { display: block; }
  .crs-configurator .crs-order-summary { display: none; }
  .crs-configurator .crs-mobile-live-preview { display: block; margin-bottom: 13px; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview { display: grid; grid-template-columns: 125px minmax(0, 1fr); align-items: center; gap: 12px; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview > div:first-child { grid-column: 2; grid-row: 1; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview > .crs-composite-card { grid-column: 1; grid-row: 1 / span 2; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview > .crs-composite-set { grid-column: 1; grid-row: 1 / span 2; }
  .crs-configurator .crs-mobile-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .crs-configurator .crs-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile experience */
@media (max-width: 767px) {
  .crs-configurator {
    margin: 8px 0 16px;
    width: 100%;
  }

  .crs-configurator .crs-builder-ui {
    overflow: visible;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: #f7f5ef;
    box-shadow: none;
  }

  .crs-configurator .crs-builder-head {
    min-height: 0;
    margin-bottom: 8px;
    padding: 15px;
    gap: 12px;
    border-radius: 20px;
  }

  .crs-configurator .crs-builder-brand { gap: 10px; }
  .crs-configurator .crs-brand-mark { width: 43px; height: 43px; flex-basis: 43px; border-radius: 14px; }
  .crs-configurator .crs-brand-mark svg { width: 26px; height: 26px; }
  .crs-configurator .crs-kicker { font-size: 9px; }
  .crs-configurator .crs-builder-head h3 { margin: 4px 0 0; font-size: 17px; }
  .crs-configurator .crs-builder-head p { display: none; }
  .crs-configurator .crs-back-to-shop { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 13px; }
  .crs-configurator .crs-back-to-shop span { display: none; }
  .crs-configurator .crs-back-to-shop i { font-size: 18px; }
  .crs-configurator .crs-progress-ring { width: 48px; height: 48px; flex-basis: 48px; }
  .crs-configurator .crs-progress-ring::before { inset: 4px; }
  .crs-configurator .crs-progress-ring b { margin-top: -5px; font-size: 17px; }
  .crs-configurator .crs-progress-ring span { margin-top: -19px; font-size: 8px; }
  .crs-configurator .crs-head-actions { gap: 6px; }

  .crs-configurator .crs-design-toolbar {
    display: flex;
    gap: 6px;
    margin: 0 -1px 8px;
    padding: 6px;
    overflow-x: auto;
    border-radius: 14px;
    scrollbar-width: none;
  }
  .crs-configurator .crs-design-toolbar::-webkit-scrollbar { display: none; }
  .crs-configurator .crs-design-toolbar button { min-width: max-content; min-height: 38px; flex: 0 0 auto; padding: 6px 9px; border-radius: 10px; font-size: 9px; }
  .crs-configurator .crs-design-toolbar button > i { width: 22px; height: 22px; border-radius: 7px; font-size: 14px; }
  .crs-configurator .crs-design-toolbar .crs-open-designs { margin-inline-start: 0; }

  .crs-configurator .crs-progress-steps {
    position: sticky;
    z-index: 24;
    top: 4px;
    display: flex;
    gap: 5px;
    margin: 0 -1px 10px;
    padding: 7px;
    overflow-x: auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 7px 20px rgba(28, 25, 20, .08);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .crs-configurator .crs-progress-steps::-webkit-scrollbar { display: none; }
  .crs-configurator .crs-progress-steps span { min-width: 72px; flex: 0 0 72px; gap: 3px; padding: 3px 4px; border-radius: 10px; }
  .crs-configurator .crs-progress-steps span::after { display: none; }
  .crs-configurator .crs-progress-steps i { width: 27px; height: 27px; font-size: 9px; }
  .crs-configurator .crs-progress-steps b { font-size: 9px; }
  .crs-configurator .crs-progress-steps .active { background: #fff8ea; }
  .crs-configurator .crs-progress-steps .done { background: #edf8f4; }

  .crs-configurator .crs-mobile-live-preview { margin-bottom: 9px; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; padding: 8px; border-radius: 17px; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview > div:first-child strong { font-size: 11px; }
  .crs-configurator .crs-mobile-live-preview .crs-live-preview > div:first-child small { font-size: 9px; }

  .crs-configurator .crs-mode-switch { margin-bottom: 9px; border-radius: 14px; }
  .crs-configurator .crs-build-mode { min-height: 42px; font-size: 11px; }

  .crs-configurator .crs-filter-card,
  .crs-configurator .crs-option-panel,
  .crs-configurator .crs-size-helper,
  .crs-configurator .crs-final-card,
  .crs-configurator .crs-ready-block { margin-bottom: 9px; padding: 12px; border-radius: 18px; }

  .crs-configurator .crs-filter-head { margin: 0; }
  .crs-configurator .crs-filter-head strong { font-size: 12px; }
  .crs-configurator .crs-filter-head > small { display: none; }
  .crs-configurator .crs-filter-card:not(.crs-filter-has-value) .crs-filter-head .crs-link { display: none; }
  .crs-configurator .crs-filter-card:not(.crs-filter-has-value) .crs-filter-toggle { margin-inline-start: auto; }
  .crs-configurator .crs-filter-head .crs-link { margin-inline-start: auto; font-size: 9px; }
  .crs-configurator .crs-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
    margin-inline-start: 0;
    padding: 6px 9px;
    border: 1px solid var(--crs-ui-line-strong);
    border-radius: 10px;
    background: #fff;
    color: #5f646e;
    font-size: 9px;
    font-weight: 800;
  }
  .crs-configurator .crs-filter-toggle i { font-size: 14px; font-style: normal; transition: transform .18s ease; }
  .crs-configurator .crs-filter-expanded .crs-filter-toggle i { transform: rotate(180deg); }
  .crs-configurator .crs-filter-card.crs-filter-collapsed .crs-filters,
  .crs-configurator .crs-filter-card.crs-filter-collapsed > :not(.crs-filter-head) { display: none; }
  .crs-configurator .crs-filter-card.crs-filter-expanded .crs-filters { display: grid; margin-top: 11px; }
  .crs-configurator .crs-filters { grid-template-columns: 1fr 1fr; gap: 8px; }
  .crs-configurator .crs-filters select { min-height: 43px; font-size: 11px; }

  .crs-configurator .crs-card-grid,
  .crs-configurator .crs-card-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .crs-configurator .crs-product-card { padding: 6px; gap: 6px; border-radius: 17px; box-shadow: 0 4px 14px rgba(28, 25, 20, .045); }
  .crs-configurator .crs-product-card:hover { transform: none; }
  .crs-configurator .crs-product-card img,
  .crs-configurator .crs-placeholder { height: auto; aspect-ratio: 1 / 1; border-radius: 13px; }
  .crs-configurator .crs-card-body { gap: 4px; }
  .crs-configurator .crs-card-body strong { font-size: 12px; line-height: 1.55; }
  .crs-configurator .crs-card-body small,
  .crs-configurator .crs-card-body em { font-size: 8.5px; line-height: 1.6; }
  .crs-configurator .crs-mount-card { border-radius: 18px; }
  .crs-configurator .crs-mount-card .crs-mount-slider { aspect-ratio: 1 / 1; }
  .crs-configurator .crs-mount-slider figcaption { right: 5px; bottom: 5px; left: 5px; padding: 5px 6px; font-size: 8px; }
  .crs-configurator .crs-mount-card .crs-card-body { padding: 8px 9px 10px !important; gap: 5px; }
  .crs-configurator .crs-material-labels,
  .crs-configurator .crs-stone-size-labels { gap: 3px; }
  .crs-configurator .crs-material-labels i,
  .crs-configurator .crs-stone-size-labels i { padding: 2px 5px; font-size: 7.5px; }
  .crs-configurator .crs-card-action,
  .crs-configurator .crs-gem-select-hint { min-height: 25px; padding: 4px 8px; font-size: 8px; }
  .crs-configurator .crs-card-price ins { font-size: 11px; }
  .crs-configurator .crs-card-price del { font-size: 8px; }
  .crs-configurator .crs-card-price small { font-size: 8px; }
  .crs-configurator .crs-sale-countdown { width: 100%; justify-content: center; font-size: 7.5px; }
  .crs-configurator .crs-promo-badges i { padding: 3px 6px; font-size: 7.5px; }
  .crs-configurator .crs-gem-card-media > img,
  .crs-configurator .crs-gem-card-media > .crs-placeholder { height: auto; aspect-ratio: 1 / 1; }
  .crs-configurator .crs-product-card.crs-gem .crs-card-body { padding: 1px 3px 5px; gap: 5px; }
  .crs-configurator .crs-gem-quick-meta i { padding: 3px 5px; font-size: 7.5px !important; }
  .crs-configurator .crs-gem-status { padding: 5px; font-size: 8px !important; }

  .crs-configurator .crs-back { min-height: 38px; margin-bottom: 8px; }
  .crs-configurator .crs-selected-mount-pro { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 10px; padding: 8px; border-radius: 17px; }
  .crs-configurator .crs-selected-mount-pro > .crs-mount-slider { width: 92px; min-width: 92px; border-radius: 13px; }
  .crs-configurator .crs-selected-mount-pro > div > strong { font-size: 14px; }
  .crs-configurator .crs-selected-mount-pro small,
  .crs-configurator .crs-filtered-image-note { font-size: 8.5px; }
  .crs-configurator .crs-variant-guide { display: none; }

  .crs-configurator .crs-option-group.visual-options { padding: 9px; border-radius: 15px; }
  .crs-configurator .crs-visual-choice-row { display: flex; gap: 8px; padding: 2px 1px 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .crs-configurator .crs-visual-choice { min-width: 136px; max-width: 145px; flex: 0 0 136px; padding: 6px !important; border-radius: 14px !important; scroll-snap-align: start; }
  .crs-configurator .crs-choice-text b { font-size: 10px; }
  .crs-configurator .crs-choice-text small { font-size: 8px; }
  .crs-configurator .crs-count-chip-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .crs-configurator .crs-count-chip { min-height: 61px; padding: 8px 9px; border-radius: 13px; }

  .crs-configurator .crs-variant-showcase.enhanced { grid-template-columns: 1fr; border-radius: 18px; }
  .crs-configurator .crs-variant-main-photo img { height: auto; max-height: 270px; aspect-ratio: 1.2 / 1; }
  .crs-configurator .crs-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .crs-configurator .crs-size { min-height: 66px; padding: 7px 3px; border-radius: 12px; }
  .crs-configurator .crs-size b { font-size: 15px; }
  .crs-configurator .crs-size span { font-size: 8px; }

  .crs-configurator .crs-engraving-modes,
  .crs-configurator .crs-set-engraving-modes { grid-template-columns: 1fr 1fr; gap: 7px; }
  .crs-configurator .crs-mode { min-height: 60px; padding: 8px; border-radius: 14px; font-size: 10px; }
  .crs-configurator .crs-mode span { font-size: 8px; }
  .crs-configurator .crs-gem-cut-select > div { display: flex; overflow-x: auto; }
  .crs-configurator .crs-cut-btn { min-width: 112px; }

  .crs-configurator .crs-step-actions {
    position: sticky;
    z-index: 22;
    bottom: 80px;
    margin: 10px -2px 0;
    padding: 7px;
    border: 1px solid rgba(232, 227, 216, .9);
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(28, 25, 20, .12);
    backdrop-filter: blur(12px);
  }
  .crs-configurator .crs-step-actions .crs-primary { width: 100%; min-height: 47px; }

  .crs-configurator .crs-mobile-summary {
    position: sticky;
    z-index: 40;
    bottom: 7px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 11px 0 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 17px;
    background: rgba(23, 25, 31, .96);
    box-shadow: 0 18px 42px rgba(23, 25, 31, .28);
    backdrop-filter: blur(14px);
  }
  .crs-configurator .crs-mobile-price { display: grid; min-width: 92px; }
  .crs-configurator .crs-mobile-summary span { color: #abb0ba; font-size: 8px; }
  .crs-configurator .crs-mobile-summary b { color: #f1d28f; font-size: 11px; }
  .crs-configurator .crs-mobile-summary small { overflow: hidden; color: #d2d5db; font-size: 8.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .crs-configurator .crs-mobile-summary-open { min-height: 39px; padding: 7px 10px; border: 1px solid #d8b46a; border-radius: 11px; background: #d8b46a; color: #17191f; font-size: 9px; font-weight: 900; }

  .crs-mobile-summary-sheet {
    position: fixed;
    z-index: 1000000;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    direction: rtl;
  }
  .crs-mobile-summary-sheet .crs-sheet-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(15, 17, 21, .58); backdrop-filter: blur(4px); }
  .crs-mobile-summary-sheet > section { position: relative; z-index: 1; width: 100%; max-height: 88vh; max-height: 88dvh; padding: 14px 12px 18px; overflow-y: auto; border-radius: 24px 24px 0 0; background: #f7f5ef; box-shadow: 0 -25px 65px rgba(15, 17, 21, .28); animation: crsSheetUp .24s ease-out; }
  .crs-mobile-summary-sheet > section::before { content: ""; display: block; width: 46px; height: 4px; margin: -5px auto 11px; border-radius: 999px; background: #c9c2b5; }
  .crs-mobile-summary-sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .crs-mobile-summary-sheet header span { color: var(--crs-ui-gold-dark); font-size: 9px; font-weight: 800; }
  .crs-mobile-summary-sheet header h3 { margin: 2px 0 0; color: var(--crs-ui-ink); font-size: 18px; }
  .crs-mobile-summary-sheet .crs-sheet-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 13px; background: #eae5db; color: #444952; font-size: 23px; }
  .crs-mobile-summary-sheet .crs-live-preview { margin-bottom: 9px; }
  .crs-mobile-summary-sheet .crs-summary-card { border-radius: 18px; }
  html.crs-sheet-open { overflow: hidden; }

  .crs-configurator .crs-final-card > h3 { font-size: 18px; }
  .crs-configurator .crs-add-to-cart-btn { min-height: 52px; border-radius: 14px; }

  .crs-configurator .crs-modal { align-items: flex-end; padding: 0; }
  .crs-configurator .crs-modal > div { width: 100%; max-height: 91vh; max-height: 91dvh; padding: 19px 12px; border-radius: 24px 24px 0 0; }
  .crs-configurator .crs-design-dialog-head { display: block; padding-left: 42px; }
  .crs-configurator .crs-run-compare { margin-top: 9px; }
  .crs-configurator .crs-saved-design-grid { grid-template-columns: 1fr; }
  .crs-configurator .crs-saved-design-card { grid-template-columns: 74px 1fr; }
  .crs-configurator .crs-saved-design-card > img { width: 74px; }

  .crs-configurator .crs-set-ring-grid { grid-template-columns: 1fr; }
  .crs-configurator .crs-set-size-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .crs-configurator .crs-builder-ui { padding-inline: 5px; }
  .crs-configurator .crs-builder-head { padding: 13px 11px; }
  .crs-configurator .crs-brand-mark { display: none; }
  .crs-configurator .crs-builder-head h3 { font-size: 16px; }
  .crs-configurator .crs-progress-ring { width: 44px; height: 44px; flex-basis: 44px; }
  .crs-configurator .crs-filters { grid-template-columns: 1fr; }
  .crs-configurator .crs-card-grid,
  .crs-configurator .crs-card-grid.compact { gap: 6px; }
  .crs-configurator .crs-card-body strong { font-size: 11px; }
  .crs-configurator .crs-mobile-summary { grid-template-columns: auto minmax(0, 1fr); }
  .crs-configurator .crs-mobile-summary > small { display: none; }
  .crs-configurator .crs-mobile-summary-open { justify-self: end; }
}

@keyframes crsSheetUp { from { transform: translateY(35px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
@keyframes crsUiSpin { to { transform: rotate(360deg); } }

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

@media (prefers-contrast: more) {
  .crs-configurator { --crs-ui-line: #b9b3a8; --crs-ui-line-strong: #8e887d; }
  .crs-configurator .crs-product-card,
  .crs-configurator .crs-filter-card,
  .crs-configurator .crs-summary-card { border-width: 2px; }
}