:root {
  --ink: var(--fds-text-primary);
  --ink2: var(--fds-text-secondary);
  --muted: var(--fds-text-muted);
  --border: var(--fds-border);
  --strong: var(--fds-border-strong);
  --page: var(--fds-bg-page);
  --surface: var(--fds-bg-panel);
  --subtle: var(--fds-bg-muted);
  --positive: var(--fds-green-700);
  --focus: var(--fds-focus);
  --r4: var(--fds-radius-xs);
  --r6: var(--fds-radius-sm);
  --r8: var(--fds-radius-md);
  --r12: var(--fds-radius-lg);
  --r16: var(--fds-radius-xl);
  --header: var(--fds-topbar);
  --shadow: var(--fds-shadow-3);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--page);
}
body {
  overflow: hidden;
}
button {
  font: inherit;
  color: inherit;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #2563eb52;
  outline-offset: 2px;
}
.fds-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: transform 0.18s;
}
.header-start,
.header-end {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-end {
  justify-content: flex-end;
}
.brand {
  display: flex;
  width: 132px;
}
.brand img {
  width: 100%;
  height: 29px;
}
.header-title {
  font-size: 15px;
}
.button {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--strong);
  border-radius: var(--r6);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.button.primary {
  background: #111;
  border-color: #111;
  color: #fff;
}
.button:disabled {
  background: var(--subtle);
  border-color: var(--border);
  color: #9ca3af;
  cursor: not-allowed;
}
.header-link {
  min-height: 40px;
  border: 0;
  background: transparent;
  font-weight: 600;
}
.header-link b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
}
.save-state {
  font-size: 13px;
  color: var(--muted);
}
.boxset-wrap {
  position: relative;
}
.popover {
  position: absolute;
  right: 0;
  top: 48px;
  width: 310px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  box-shadow: var(--shadow);
}
.popover > span {
  float: right;
  font-size: 12px;
}
.popover h3 {
  margin: 28px 0 4px;
}
.popover p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.workbench {
  position: fixed;
  inset: var(--header) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(420px, 44%);
  overflow: hidden;
}
.stage {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 24px;
  background: #eef0f1;
  border-right: 1px solid var(--border);
}
.stage-head {
  display: flex;
  justify-content: space-between;
}
.stage-head > div {
  display: grid;
  gap: 4px;
}
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge {
  padding: 5px 9px;
  border: 1px solid var(--strong);
  border-radius: var(--r4);
  background: #fff;
  font-size: 12px;
}
.badge.ready {
  color: var(--positive);
}
.stage-tools {
  position: absolute;
  z-index: 5;
  top: 76px;
  right: 24px;
  display: flex;
  gap: 6px;
}
.stage-tools button {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--strong);
  border-radius: var(--r4);
  background: #fffffff0;
  font-size: 12px;
  font-weight: 600;
}
.viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.viewport canvas,
.image-stage,
.logo-stage,
.viewport noscript,
.viewport noscript img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.image-stage {
  display: grid;
  place-items: center;
}
.image-stage img,
.logo-stage img,
.viewport noscript img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-stage > button {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--strong);
  border-radius: 50%;
  background: #fffffff0;
  font-size: 22px;
}
#galleryPrevious {
  left: 16px;
}
#galleryNext {
  right: 16px;
}
.gallery-label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: var(--r4);
  background: #111827d6;
  color: #fff;
  font-size: 12px;
}
.gallery-label i {
  font-style: normal;
  color: #d1d5db;
}
.unavailable {
  z-index: 6;
  max-width: 380px;
  padding: 20px;
  text-align: center;
  background: #fffffff2;
  border: 1px solid var(--border);
  border-radius: var(--r8);
}
.unavailable p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.logo-stage {
  z-index: 7;
  background: #eef0f1;
}
.logo-stage > button,
.layer header > button,
.lightbox > button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: #fff;
  font-size: 24px;
}
.logo-stage > button {
  position: absolute;
  right: 12px;
  top: 12px;
}
.logo-stage > span {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12px;
}
.stage-material {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #ffffffa8;
  font-size: 12px;
}
.stage-material > span,
.stage-material small {
  color: var(--muted);
}
.stage-material small {
  margin-left: auto;
}
.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(480px, 100%);
  margin: 12px auto 0;
  border: 1px solid var(--strong);
  border-radius: var(--r6);
  overflow: hidden;
}
.segments button {
  min-height: 44px;
  border: 0;
  border-right: 1px solid var(--strong);
  background: #fff;
  font-weight: 600;
}
.segments button:last-child {
  border: 0;
}
.segments button.active {
  background: #111;
  color: #fff;
}
.rail {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
.rail-body {
  padding: 34px 36px 160px;
}
.product-head h1 {
  margin: 10px 0 2px;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.025em;
}
.product-head > p {
  margin: 0;
  color: var(--muted);
}
.facts {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  font-size: 13px;
}
.series {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 12px 0;
  border-block: 1px solid var(--border);
  font-size: 13px;
}
.series span {
  color: var(--muted);
}
.section {
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}
.section > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.section > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.section > header b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--strong);
  border-radius: var(--r4);
  font-size: 11px;
}
.section h2 {
  margin: 0;
  font-size: 18px;
}
.section > header > span,
.note {
  font-size: 12px;
  color: var(--muted);
}
.same-series {
  display: flex;
  gap: 10px;
  overflow: auto;
}
.product-mini {
  flex: 0 0 176px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  color: inherit;
  text-decoration: none;
}
.product-mini.current,
.selection-card.selected,
.quantity-card.selected,
.material-card.selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.product-mini img {
  width: 100%;
  height: 92px;
  object-fit: contain;
  background: var(--subtle);
}
.product-mini strong,
.product-mini span {
  display: block;
}
.product-mini strong {
  margin-top: 7px;
  font-size: 13px;
}
.product-mini span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.selection-card {
  position: relative;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: #fff;
  text-align: left;
}
.selection-card img {
  float: left;
  width: 76px;
  height: 76px;
  margin-right: 12px;
  object-fit: contain;
  background: var(--subtle);
}
.selection-card strong,
.selection-card span {
  display: block;
}
.selection-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.mark {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--strong);
  border-radius: 50%;
}
.selected .mark {
  border: 5px solid #111;
}
.empty {
  padding: 20px;
  border: 1px dashed var(--strong);
  border-radius: var(--r8);
  color: var(--muted);
  text-align: center;
}
.slots {
  display: grid;
  gap: 8px;
}
.slot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: #fff;
  text-align: left;
}
.slot span {
  display: grid;
  gap: 4px;
}
.slot small {
  color: var(--muted);
}
.slot > i {
  font-size: 20px;
}
.upload-disabled {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--strong);
  border-radius: var(--r8);
  background: var(--page);
}
.upload-disabled > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  font-style: normal;
  font-size: 22px;
}
.upload-disabled p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.section h3 {
  margin: 20px 0 10px;
  font-size: 13px;
}
.process .selection-card {
  min-height: 78px;
}
.colors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.color {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: #fff;
}
.color.selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}
.color i {
  width: 20px;
  height: 20px;
  border: 1px solid var(--strong);
  border-radius: 50%;
}
.preview-state,
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--page);
  font-size: 12px;
}
.quantities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quantity-card {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: #fff;
  text-align: left;
}
.quantity-card strong,
.quantity-card span {
  display: block;
}
.quantity-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.quantity-card:disabled {
  color: #9ca3af;
  background: var(--subtle);
}
.deferred {
  color: var(--muted);
}
.deferred h2 {
  margin: 5px 0;
  font-size: 18px;
}
.deferred p {
  font-size: 13px;
  line-height: 1.5;
}
.summary {
  position: sticky;
  z-index: 10;
  bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 24px;
  background: #fffffff8;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px #1118270f;
}
.summary > div {
  display: grid;
}
.summary span,
.summary small {
  font-size: 11px;
  color: var(--muted);
}
.summary strong {
  font-size: 14px;
}
.summary small {
  grid-column: 4;
  text-align: center;
  margin-top: -12px;
}
.layer {
  position: fixed;
  z-index: 100;
  inset: 0;
}
.backdrop {
  position: absolute;
  inset: 0;
  background: #11182775;
}
.drawer {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: min(680px, 92vw);
  padding: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: auto;
  animation: drawer 0.18s;
}
.layer header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.layer h2 {
  margin: 5px 0 0;
  font-size: 22px;
}
.tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0;
  overflow: auto;
}
.tabs button {
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.tabs button.active {
  border-color: #111;
  color: #111;
}
.drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.drawer-card {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  color: inherit;
  text-decoration: none;
}
.drawer-card.current {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}
.drawer-card img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  background: var(--subtle);
}
.drawer-card strong,
.drawer-card span {
  display: block;
}
.drawer-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}
.material-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1080px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 24px;
  background: #fff;
  border-radius: var(--r12);
  box-shadow: var(--shadow);
}
.material-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.material-tabs label {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
}
.material-tabs .tabs {
  margin: 4px 0 8px;
}
.material-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 20px;
  padding: 20px 0;
  overflow: hidden;
}
.material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  overflow: auto;
}
.material-card {
  position: relative;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: #fff;
  text-align: left;
}
.material-card > img,
.material-card > .swatch {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--subtle);
}
.material-card strong,
.material-card span {
  display: block;
}
.material-card strong {
  margin-top: 8px;
  font-size: 13px;
}
.material-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.zoom {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: #fffffff0;
}
.material-preview {
  padding: 12px;
  border-left: 1px solid var(--border);
}
.preview-art {
  height: 220px;
  margin-bottom: 14px;
  background: var(--subtle);
  overflow: hidden;
}
.preview-art img,
.preview-art i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-preview h3 {
  margin: 6px 0;
}
.material-preview p {
  color: var(--muted);
  font-size: 12px;
}
.material-dialog > footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.material-dialog > footer > span {
  font-size: 12px;
  color: var(--muted);
}
.material-dialog > footer > div {
  display: flex;
  gap: 8px;
}
.lightbox {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px;
  background: #111827d1;
}
.lightbox > button {
  position: absolute;
  right: 24px;
  top: 24px;
}
.lightbox img,
.lightbox > i {
  width: min(900px, 90vw);
  height: 76vh;
  object-fit: contain;
  background: #fff;
}
.lightbox > strong {
  color: #fff;
}
.layer-open {
  overflow: hidden;
}
[hidden] {
  display: none !important;
}
@keyframes drawer {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}
@media (max-width: 900px) {
  body {
    overflow: auto;
  }
  .fds-header {
    height: 60px;
    grid-template-columns: 1fr auto;
    padding: 0 12px;
  }
  .header-title,
  .save-state,
  .header-end > .button {
    display: none;
  }
  .brand {
    width: 100px;
  }
  .workbench {
    position: relative;
    inset: auto;
    display: block;
    padding-top: 60px;
    overflow: visible;
  }
  .stage {
    height: 46vh;
    min-height: 340px;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .stage-tools {
    top: 54px;
    right: 14px;
  }
  .stage-tools button {
    width: 38px;
    font-size: 0;
  }
  .stage-tools button:before {
    font-size: 15px;
  }
  .stage-tools #resetView:before {
    content: '↺';
  }
  .stage-tools #fullscreenView:before {
    content: '⛶';
  }
  .stage-tools #rotationToggle:before {
    content: '◉';
  }
  .stage-material {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 62px;
    white-space: nowrap;
    overflow: hidden;
  }
  .stage-material small {
    display: none;
  }
  .segments {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    width: auto;
    margin: 0;
  }
  .rail {
    height: auto;
    overflow: visible;
  }
  .rail-body {
    padding: 26px 18px 150px;
  }
  .summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    grid-template-columns: repeat(3, 1fr) auto;
    padding: 10px 12px;
    gap: 8px;
  }
  .summary .button {
    width: 52px;
    padding: 8px;
    font-size: 0;
  }
  .summary .button:after {
    content: 'Save';
    font-size: 12px;
  }
  .summary small {
    display: none;
  }
  .drawer {
    width: 100%;
    padding: 18px;
  }
  .material-dialog {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-height: 88vh;
    padding: 18px;
    border-radius: var(--r16) var(--r16) 0 0;
  }
  .material-tabs {
    grid-template-columns: 1fr;
  }
  .material-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .material-preview {
    border: 0;
    border-top: 1px solid var(--border);
  }
  .material-dialog > footer {
    position: sticky;
    bottom: -18px;
    padding-bottom: 18px;
    background: #fff;
  }
  .fds-header.nav-hidden {
    transform: translateY(-100%);
  }
}
@media (max-width: 560px) {
  .brand {
    width: 88px;
  }
  .header-start {
    gap: 7px;
  }
  .header-start .button {
    padding: 8px;
  }
  .stage {
    height: 44vh;
    min-height: 320px;
  }
  .product-head h1 {
    font-size: 27px;
  }
  .facts {
    display: grid;
    gap: 4px;
  }
  .cards,
  .quantities {
    grid-template-columns: 1fr;
  }
  .drawer-grid {
    grid-template-columns: 1fr;
  }
  .drawer-card {
    grid-template-columns: 92px 1fr;
  }
  .drawer-card img {
    width: 92px;
    height: 92px;
  }
  .summary > div:nth-child(2) {
    display: none;
  }
  .summary {
    grid-template-columns: 1fr 1fr auto;
  }
  .upload-disabled {
    grid-template-columns: auto 1fr;
  }
  .upload-disabled button {
    grid-column: 1/-1;
  }
  .lightbox {
    padding: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* FDS V1 Site V8 parity overrides. Business-specific layout only. */
.fds-header {
  height: 64px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}
.brand {
  height: 46px;
  width: auto;
  align-items: center;
}
.brand img {
  width: auto;
  height: 32px;
  max-width: 116px;
  object-fit: contain;
}
.header-start > .button {
  height: 36px;
  min-height: 36px;
  border-radius: var(--fds-radius-md);
  font-size: 12px;
}
.workbench {
  inset: 64px 0 0;
  grid-template-columns: minmax(0, 1fr) 460px;
}
.stage {
  padding: 24px;
  background-color: #eceeed;
  background-image: radial-gradient(120% 95% at 50% 36%, #fcfbf9 0%, #f1efeb 52%, #e3e0da 100%);
}
.stage-tools {
  left: 24px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
}
.stage-tools button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 9px;
  font-size: 0;
  box-shadow: var(--fds-shadow-1);
}
.stage-tools #resetView:before {
  content: '↺';
  font-size: 17px;
}
.stage-tools #fullscreenView:before {
  content: '⛶';
  font-size: 16px;
}
.stage-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 12px;
}
.rotation-control {
  justify-self: start;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.82);
  color: #454b53;
  font-size: 11px;
}
.segments {
  position: static;
  grid-column: 2;
  width: auto;
  min-width: 250px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px);
}
.segments button {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #707780;
  font-size: 12px;
}
.segments button.active {
  background: #fff;
  color: #111;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.rail-body {
  padding: 38px 36px 150px;
}
.product-head h1 {
  font-size: 28px;
  line-height: 1.14;
}
.section {
  padding: 32px 0;
}
.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.process {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.selection-card {
  min-height: 72px;
  padding: 12px;
  border-color: #d6d9de;
  border-radius: 9px;
}
.selection-card img {
  float: none;
  width: 100%;
  height: 72px;
  margin: 0 0 8px;
}
.drawer {
  width: min(520px, 92vw);
  padding: 28px;
  box-shadow: 20px 0 60px rgba(17, 24, 39, 0.16);
}
.material-dialog {
  border-radius: 14px;
  box-shadow: 0 26px 70px rgba(17, 24, 39, 0.22);
}
.summary {
  grid-template-columns: auto 1fr 1fr auto;
  width: 460px;
  margin-left: auto;
  padding: 15px 36px 20px;
  backdrop-filter: blur(14px);
}
.selection-section dl {
  margin: 0;
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  overflow: hidden;
}
.selection-section dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fds-border);
  font-size: 12px;
}
.selection-section dl > div:last-child {
  border: 0;
}
.selection-section dt {
  color: var(--fds-text-muted);
}
.selection-section dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.quantity-input {
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: center;
  gap: 4px 16px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  font-size: 13px;
}
.quantity-input input {
  grid-row: 1/3;
  grid-column: 2;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--fds-border-strong);
  border-radius: var(--fds-radius-sm);
  font: inherit;
}
.quantity-input small {
  color: var(--fds-text-muted);
}
.inline-error {
  margin: 8px 0 0;
  color: #9b2c2c;
  font-size: 12px;
}
.pricing-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--fds-border);
  border-radius: var(--fds-radius-md);
  background: var(--fds-bg-muted);
}
.pricing-state {
  font-size: 13px;
  font-weight: 600;
}
.pricing-panel[data-state='loading'] {
  opacity: 0.72;
}
.pricing-panel[data-state='ready'] {
  background: #fff;
}
.pricing-panel dl {
  margin: 12px 0 0;
}
.pricing-panel dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--fds-border);
  font-size: 12px;
}
.pricing-panel dl > div:last-child {
  border: 0;
  font-weight: 700;
}
.pricing-panel dd {
  margin: 0;
}
.pricing-notice {
  margin: 10px 0 0;
  color: var(--fds-text-muted);
  font-size: 11px;
}
@media (max-width: 1000px) and (min-width: 901px) {
  .workbench {
    grid-template-columns: minmax(0, 1fr) 410px;
  }
  .summary {
    width: 410px;
  }
  .rail-body {
    padding-left: 26px;
    padding-right: 26px;
  }
}
@media (max-width: 900px) {
  .fds-header {
    height: 56px;
  }
  .brand {
    height: 40px;
  }
  .brand img {
    height: 26px;
    max-width: 74px;
  }
  .workbench {
    padding-top: 56px;
  }
  .stage {
    height: 31vh;
    min-height: 210px;
    padding: 14px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 12px 24px -16px rgba(17, 24, 39, 0.58);
  }
  .stage-tools {
    left: 12px;
    right: auto;
    top: 42%;
  }
  .stage-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: auto 1fr;
    margin: 0;
  }
  .rotation-control {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }
  .rotation-control b {
    display: none;
  }
  .segments {
    justify-self: end;
    grid-column: 2;
    min-width: 0;
  }
  .summary {
    width: 100%;
    margin: 0;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  }
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .material-dialog {
    max-height: 88vh;
  }
}
@media (max-width: 390px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.save-dialog {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  padding: 24px;
  background: #fff;
  border-radius: var(--fds-radius-xl);
  box-shadow: var(--fds-shadow-3);
}
.save-dialog header {
  padding-bottom: 16px;
}
.save-name {
  display: grid;
  gap: 8px;
  margin: 20px 0;
  font-size: 13px;
  font-weight: 600;
}
.save-name input {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--fds-border-strong);
  border-radius: var(--fds-radius-md);
}
.save-name small {
  color: var(--fds-text-muted);
  font-weight: 400;
}
.save-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--fds-border);
}
.save-feedback {
  min-height: 42px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: var(--fds-radius-md);
  background: var(--fds-bg-muted);
  font-size: 12px;
}
.save-feedback:empty {
  display: none;
}
.save-feedback.success {
  background: var(--fds-green-50);
  color: var(--fds-green-700);
}
.save-feedback.error {
  background: var(--fds-red-50);
  color: var(--fds-red-700);
}
.save-feedback strong,
.save-feedback a {
  display: block;
}
.save-feedback a {
  margin-top: 4px;
  text-decoration: underline;
}
@media (max-width: 700px) {
  .save-dialog {
    inset: auto 0 0;
    transform: none;
    width: 100%;
    border-radius: var(--fds-radius-xl) var(--fds-radius-xl) 0 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}
/* Rail compactness pass */
.rail-body {
  padding: 26px 28px 140px;
}
.product-head h1 {
  margin: 8px 0 2px;
  font-size: 21px;
  line-height: 1.25;
}
.product-head > p {
  margin: 0;
  font-size: 13px;
}
.facts {
  margin-top: 10px;
  gap: 14px;
  font-size: 12px;
}
.series {
  margin-top: 12px;
  padding: 9px 0;
  font-size: 12px;
}
.section {
  padding: 18px 0;
}
.section > header {
  margin-bottom: 10px;
}
.section h2 {
  font-size: 14px;
}
.section > header b {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.section > header > span,
.note {
  font-size: 11px;
}
.same-series {
  gap: 8px;
}
.product-mini {
  flex: 0 0 130px;
  padding: 6px;
}
.product-mini img {
  height: 68px;
}
.product-mini strong {
  margin-top: 5px;
  font-size: 12px;
}
.product-mini span {
  margin-top: 2px;
  font-size: 10.5px;
}
.cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.process {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.selection-card {
  min-height: 0;
  padding: 9px 10px;
  overflow: hidden;
}
.selection-card img {
  float: left;
  width: 44px;
  height: 44px;
  margin: 0 9px 4px 0;
  border-radius: 6px;
}
.selection-card strong,
.selection-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selection-card strong {
  font-size: 12.5px;
}
.selection-card span {
  margin-top: 2px;
  font-size: 11px;
}
.slots {
  gap: 6px;
}
.slot {
  padding: 10px 12px;
}
.slot strong {
  font-size: 12.5px;
}
.slot small {
  font-size: 11px;
}
.section h3 {
  margin: 14px 0 8px;
  font-size: 12px;
}
.upload-disabled {
  padding: 12px;
}
.upload-disabled strong {
  font-size: 13px;
}
.colors {
  gap: 6px;
}
.color {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 12px;
}
.preview-state,
.info-row {
  margin-top: 8px;
  padding: 9px 10px;
  font-size: 11.5px;
}
.quantities {
  gap: 8px;
}
.quantity-card {
  padding: 10px;
}
.quantity-card strong {
  font-size: 13px;
}
.quantity-card span {
  font-size: 10.5px;
}
.quantity-card em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.quantity-input {
  padding: 10px;
}
.selection-section dl > div {
  padding: 8px 10px;
  font-size: 11.5px;
}
/* 2D view: smart letterboxing for mismatched aspect ratios. Stage padding/rows stay constant across modes so stage-bottom never shifts. */
#galleryBackdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(32px) saturate(1.1) brightness(0.92);
  transform: scale(1.15);
  opacity: 0.7;
  pointer-events: none;
}
.image-stage img#galleryImage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 901px) {
  .stage-bottom {
    grid-template-columns: 1fr auto 1fr;
  }
  .stage-tools {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    display: flex;
    gap: 8px;
    justify-self: end;
  }
}
.logo-upload #logoDropzone {
  cursor: pointer;
}
.logo-upload #logoDropzone:hover,
.logo-upload #logoDropzone:focus-visible {
  border-color: var(--ink);
}
.logo-uploaded {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--page);
}
.logo-uploaded.uploading {
  opacity: 0.6;
  pointer-events: none;
}
.logo-editor-stage {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: repeating-conic-gradient(#f1f2f3 0% 25%, #fff 0% 50%) 50%/16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  touch-action: none;
}
#logoEditorImage {
  position: absolute;
  max-width: 55%;
  max-height: 55%;
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(17, 24, 39, 0.25));
}
#logoEditorImage:active {
  cursor: grabbing;
}
.logo-editor-controls {
  display: grid;
  gap: 8px;
}
.logo-editor-controls label {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.logo-editor-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.logo-status {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.logo-status.error {
  color: #b3261e;
}
/* Stage dock: one centred pill holding every 3D view control */
.stage-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.stage-dock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  max-width: 100%;
}
.stage-dock .dock-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 18px;
  background: rgba(17, 24, 39, 0.12);
  margin: 0 2px;
}
.stage-dock .dock-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3a3f45;
  box-shadow: none;
  cursor: pointer;
  font-size: 0;
}
.stage-dock .dock-icon:hover {
  background: #f1f2f3;
  color: #111;
}
.stage-dock .dock-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-dock .rotation-control .ico-play {
  fill: currentColor;
  stroke: none;
  width: 15px;
  height: 15px;
}
.stage-dock .rotation-control[aria-pressed='true'] .ico-play,
.stage-dock .rotation-control[aria-pressed='false'] .ico-pause {
  display: none;
}
.stage-dock .rotation-control b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.stage-dock #resetView:before,
.stage-dock #fullscreenView:before {
  content: none;
}
.stage-dock .segments {
  position: static;
  display: inline-flex;
  grid-column: auto;
  justify-self: auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 2px;
  gap: 2px;
  border: 0;
  border-radius: 999px;
  background: #f1f2f3;
  overflow: visible;
  backdrop-filter: none;
}
.stage-dock .segments button {
  min-height: 30px;
  height: 30px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
}
.stage-dock .segments button:hover {
  color: #111;
}
.stage-dock .segments button.active {
  background: #fff;
  color: #111;
  border-color: rgba(17, 24, 39, 0.1);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}
.stage-dock .stage-tools {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  display: inline-flex;
  gap: 2px;
  justify-self: auto;
}
.stage-dock button:focus-visible {
  outline: 3px solid #2563eb52;
  outline-offset: 2px;
}
@media (max-width: 900px) {
  .stage-bottom {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .stage-dock .rotation-control {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 420px) {
  .stage-dock {
    gap: 2px;
  }
  .stage-dock .dock-icon {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }
  .stage-dock .segments button {
    padding: 0 10px;
    font-size: 11.5px;
  }
  .stage-dock .dock-divider {
    margin: 0 1px;
  }
}
.header-start > .button {
  border-radius: 999px;
  padding: 0 16px;
  border-color: rgba(17, 24, 39, 0.12);
}
.header-start > .button:hover {
  background: #f1f2f3;
}
/* Header actions as pills, all 36px and vertically centred */
.header-end {
  gap: 6px;
}
.header-end .header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #1f2328;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.header-end .header-link:hover {
  background: #f1f2f3;
}
.header-end .header-link b {
  width: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
}
.header-end .save-state {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f1f2f3;
  color: #4b5563;
  font-size: 12px;
  white-space: nowrap;
}
.header-end > .button {
  height: 36px;
  min-height: 36px;
  padding: 0 20px;
  border-radius: 999px;
}
@media (max-width: 900px) {
  .header-end .save-state,
  .header-end > .button {
    display: none;
  }
  .header-end {
    gap: 5px;
  }
  .header-end .header-link {
    height: 32px;
    min-height: 32px;
    padding: 0 11px;
    font-size: 11.5px;
  }
}
@media (min-width: 901px) {
  .fds-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
  }
  .header-title {
    min-width: 0;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* Account and more-actions menus */
.account-menu {
  position: relative;
}
.pill-menu {
  position: absolute;
  z-index: 90;
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(17, 24, 39, 0.14);
}
.pill-menu a,
.pill-menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #1f2328;
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pill-menu a:hover,
.pill-menu button:hover {
  background: #f1f2f3;
}
#accountMenu {
  right: 0;
  top: 44px;
}
/* All editors place support inside the account menu on compact screens. */
.fds-header .pill-menu .editor-support-menu {
  display: none;
}
@media (max-width: 900px) {
  .fds-header .header-end > .cw-header-link {
    display: none;
  }
  .fds-header .pill-menu .editor-support-menu {
    display: flex;
    min-height: 44px;
  }
  .fds-header .editor-support-menu .cw-header-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}
/* Summary bar as one floating pill with a single Box Set action */
.summary {
  bottom: 12px;
  width: auto;
  margin: 0 12px 12px;
  grid-template-columns: auto auto auto 1fr;
  gap: 14px;
  padding: 6px 6px 6px 22px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
}
.summary .summary-actions {
  grid-column: 4;
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.summary .summary-cta {
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.summary .summary-cta.is-in {
  background: #fff;
  border-color: rgba(17, 24, 39, 0.14);
  color: #1f6f4d;
}
.summary #saveHint {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 8px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11.5px;
  text-align: center;
}
.summary #saveHint.is-error {
  background: #b42318;
}
.summary #saveHint:empty {
  display: none;
}
@media (max-width: 900px) {
  .summary {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    margin: 0;
    padding: 5px 5px 5px 16px;
    gap: 10px;
  }
  .summary .summary-cta {
    width: auto;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 12.5px;
  }
  .summary .summary-cta:after {
    content: none;
  }
  .summary #saveHint:not(:empty) {
    display: block;
  }
}
.summary span {
  white-space: nowrap;
}
@media (max-width: 380px) {
  .summary {
    gap: 8px;
    padding-left: 14px;
  }
  .summary .summary-cta {
    padding: 0 12px;
    font-size: 12px;
  }
  .summary .summary-actions {
    gap: 4px;
  }
}
.logo-recent {
  margin-top: 12px;
}
.logo-recent > span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.logo-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.logo-recent-item {
  position: relative;
}
.logo-recent-use {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f6f7f8;
  cursor: pointer;
}
.logo-recent-use:hover {
  border-color: var(--ink);
}
.logo-recent-use img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-recent-hide {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.logo-recent-hide:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.in-set-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f3ee;
  color: #1f6f4d;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.in-set-tag:hover {
  background: #d3eadf;
}
.drawer-card .in-set-tag {
  margin-top: 8px;
}
.summary #saveHint {
  left: auto;
  right: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
}
.pill-menu .menu-note {
  display: grid;
  gap: 2px;
  padding: 8px 12px 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  color: var(--muted);
  font-size: 11px;
}
.pill-menu .menu-note b {
  overflow: hidden;
  max-width: 220px;
  color: #1f2328;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill-menu .menu-strong {
  font-weight: 600;
}
#accountMenu {
  min-width: 210px;
}
/* Choose Box drawer V2: pill search and chips, series groups, image-first cards */
.drawer.drawer-v2 {
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  padding: 0;
  overflow: hidden;
  border-radius: 0 22px 22px 0;
  background: #fff;
  box-shadow: 20px 0 60px rgba(17, 24, 39, 0.16);
}
.drawer-v2 .drawer-head {
  align-items: center;
  padding: 22px 24px 14px;
  border-bottom: 0;
}
.drawer-v2 .drawer-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.drawer-v2 .drawer-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.drawer-v2 .drawer-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.drawer-v2 .drawer-close:hover {
  background: #f1f2f3;
}
.drawer-tools {
  display: grid;
  gap: 10px;
  padding: 0 24px 14px;
  border-bottom: 1px solid var(--border);
}
.drawer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
}
.drawer-search[hidden] {
  display: none;
}
.drawer-search:focus-within {
  border-color: #111;
}
.drawer-search span {
  color: var(--muted);
  font-size: 16px;
}
.drawer-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
}
.drawer-search input:focus {
  outline: none;
}
.drawer-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.drawer-chips::-webkit-scrollbar {
  display: none;
}
.drawer-chips button {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.drawer-chips button:hover {
  background: #f1f2f3;
}
.drawer-chips button.active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 24px 28px;
}
.drawer-group h3 {
  margin: 18px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.drawer-v2 .drawer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.drawer-v2 .drawer-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.drawer-v2 .drawer-card:hover {
  border-color: rgba(17, 24, 39, 0.3);
  transform: translateY(-1px);
}
.drawer-v2 .drawer-card.current {
  border: 2px solid #111;
  box-shadow: none;
}
.drawer-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  background: var(--subtle);
}
.drawer-v2 .drawer-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--subtle);
}
.drawer-flag,
.drawer-card-media .in-set-tag {
  position: absolute;
  top: 8px;
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
}
.drawer-flag {
  left: 8px;
  background: #111;
  color: #fff;
}
.drawer-card-media .in-set-tag {
  right: 8px;
}
.drawer-card-body {
  display: grid;
  gap: 3px;
  padding: 10px 12px 12px;
}
.drawer-v2 .drawer-card-body strong {
  font-size: 14px;
  line-height: 1.3;
}
.drawer-v2 .drawer-card-body span {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.drawer-empty {
  margin-top: 18px;
  padding: 28px 16px;
  border: 1px dashed var(--strong);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
@keyframes drawerSheet {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
@media (max-width: 900px) {
  .drawer.drawer-v2 {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 40px rgba(17, 24, 39, 0.18);
    animation: drawerSheet 0.2s;
  }
  .drawer-v2::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.18);
  }
  .drawer-v2 .drawer-head {
    padding: 10px 16px 10px;
  }
  .drawer-tools {
    padding: 0 16px 12px;
  }
  .drawer-body {
    padding: 4px 16px 24px;
  }
  .drawer-v2 .drawer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (max-width: 340px) {
  .drawer-v2 .drawer-grid {
    gap: 8px;
  }
  .drawer-card-body {
    padding: 8px 10px 10px;
  }
}
.drawer-v2 .drawer-card {
  color: var(--ink);
}
.drawer-v2 .drawer-card-media {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.drawer-v2 .drawer-card-media img {
  position: absolute;
  inset: 0;
}
.drawer-v2 .drawer-card-body strong {
  color: var(--ink);
}
.drawer-browse {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #f6f7f8;
}
.drawer-browse button {
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.drawer-browse button.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.12);
}
.drawer-group h3 span {
  margin-left: 4px;
  color: #9ca3af;
  font-weight: 500;
}
/* Configuration rail V2: round step numbers, pills, image-first cards, grouped rows, collapsible price */
#configurationPanel .rail-head {
  padding-bottom: 18px;
}
#configurationPanel .rail-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
#configurationPanel .rail-head h1 {
  margin: 4px 0 2px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -0.02em;
}
#configurationPanel .rail-sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
#configurationPanel .rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
#configurationPanel .rail-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#configurationPanel button.rail-pill {
  cursor: pointer;
}
#configurationPanel button.rail-pill:hover {
  background: #f1f2f3;
}
#configurationPanel .rail-pill.is-soft {
  height: 24px;
  border-color: transparent;
  background: #f1f2f4;
  color: var(--ink2);
  font-size: 11px;
}
#configurationPanel .rail-pill.is-soft.is-ok {
  background: #e8f3ee;
  color: #1f6f4d;
}
#configurationPanel .design-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
#configurationPanel .design-name-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#configurationPanel .design-name-row strong {
  overflow: hidden;
  min-width: 0;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configurationPanel .design-name-row .rail-pill {
  height: 24px;
  margin-left: auto;
  padding: 0 10px;
  font-size: 11px;
}
#configurationPanel .rail-sec {
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}
#configurationPanel .rail-sec > .rail-sec-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* Optional outer packaging: explanatory artwork and the existing capsule CTA. */
#configurationPanel .rail-pack-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--subtle);
}
#configurationPanel .rail-pack-illustration {
  flex: 0 0 104px;
  width: 104px;
  height: 94px;
  overflow: visible;
  stroke: var(--strong);
  stroke-width: 1;
  stroke-linejoin: round;
}
.rail-pack-illustration .pack-shadow { fill: var(--border); stroke: none; }
.rail-pack-illustration .pack-paper-top { fill: var(--surface); }
.rail-pack-illustration .pack-paper-front { fill: var(--subtle); }
.rail-pack-illustration .pack-paper-side { fill: var(--border); }
.rail-pack-illustration .pack-paper-inset { fill: var(--strong); }
.rail-pack-illustration .pack-jewelry-top { fill: var(--ink2); stroke: var(--ink2); }
.rail-pack-illustration .pack-jewelry-front { fill: var(--ink); stroke: var(--ink); }
.rail-pack-illustration .pack-jewelry-side { fill: var(--muted); stroke: var(--ink2); }
.rail-pack-illustration .pack-seam { fill: none; stroke: var(--muted); }
.rail-pack-illustration .pack-mark { fill: var(--surface); stroke: none; }
#configurationPanel .rail-pack-copy { flex: 1 1 180px; min-width: 0; }
#configurationPanel .rail-pack-description {
  margin: 0 0 12px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.65;
}
#configurationPanel #chooseRigidPack {
  min-height: 40px;
  max-width: 100%;
  padding: 8px 14px;
  text-align: start;
}
#configurationPanel #chooseRigidPack:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
#configurationPanel .rail-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f2f4;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
}
#configurationPanel .rail-sec-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
#configurationPanel .rail-cur {
  margin-left: auto;
  overflow: hidden;
  max-width: 55%;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configurationPanel .rail-label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
/* 1 Size */
#configurationPanel .same-series {
  gap: 10px;
  padding-bottom: 2px;
}
#configurationPanel .product-mini {
  flex: 0 0 132px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
}
#configurationPanel .product-mini.current {
  border: 2px solid #111;
}
#configurationPanel .product-mini img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
#configurationPanel .product-mini strong {
  margin: 8px 10px 0;
  font-size: 12.5px;
  line-height: 1.3;
}
#configurationPanel .product-mini span {
  margin: 2px 10px 10px;
  font-size: 11px;
}
#configurationPanel .product-mini .in-set-tag {
  margin: 0 10px 10px;
}
/* 2 Insert */
#configurationPanel .rail-inserts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#configurationPanel .rail-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}
#configurationPanel .rail-card.selected {
  border: 2px solid #111;
  padding: 7px;
}
#configurationPanel .rail-card img,
#configurationPanel .rail-card .rail-card-media {
  float: none;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  margin: 0 0 6px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--subtle);
}
#configurationPanel .rail-card strong {
  font-size: 13px;
}
#configurationPanel .rail-card span {
  margin: 0;
  font-size: 11.5px;
}
#configurationPanel .rail-card em {
  margin-top: 2px;
  color: var(--ink2);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}
#configurationPanel .rail-card .mark {
  position: absolute;
  right: 12px;
  top: 12px;
  display: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 20px;
  text-align: center;
}
#configurationPanel .rail-card.selected .mark {
  display: block;
}
/* 3 Materials */
#configurationPanel .rail-group {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
}
#configurationPanel .rail-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
#configurationPanel .rail-row:first-child {
  border-top: 0;
}
#configurationPanel .rail-row:hover {
  background: #f8f9fa;
}
#configurationPanel .rail-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 50%;
  background: #eee center/cover;
}
#configurationPanel .rail-row span {
  display: grid;
  gap: 1px;
  min-width: 0;
}
#configurationPanel .rail-row strong {
  font-size: 13.5px;
}
#configurationPanel .rail-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configurationPanel .rail-chevron {
  color: var(--muted);
  font-size: 18px;
  font-style: normal;
}
/* 4 Logo */
#configurationPanel .rail-drop {
  grid-template-columns: auto 1fr auto;
  padding: 12px 14px;
  border: 1px dashed rgba(17, 24, 39, 0.22);
  border-radius: 16px;
  background: #fff;
}
#configurationPanel .rail-drop > i {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #f1f2f4;
  font-size: 16px;
  font-weight: 700;
}
#configurationPanel .rail-drop strong {
  font-size: 13.5px;
}
#configurationPanel .logo-uploaded {
  border-radius: 16px;
}
#configurationPanel .rail-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
#configurationPanel .rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}
#configurationPanel .rail-chip:hover {
  background: #f6f7f8;
}
#configurationPanel .rail-chip small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}
/* A chip that carries a price shows it small, on its own line under the name. */
#configurationPanel .rail-chip:has(> small:not(.is-inline)) {
  display: inline-block;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1.25;
  text-align: center;
}
#configurationPanel .rail-chip:has(> small:not(.is-inline)) > small {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
}
#configurationPanel .rail-chip.selected {
  background: #111;
  border-color: #111;
  color: #fff;
  box-shadow: none;
}
#configurationPanel .rail-chip.selected small {
  color: #d1d5db;
}
#configurationPanel .rail-chip.color i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: 50%;
}
#configurationPanel .rail-preview {
  margin-top: 12px;
}
/* 5 Quantity */
#configurationPanel .rail-chips.quantities {
  grid-template-columns: none;
}
#configurationPanel .quantity-card.rail-chip strong {
  display: inline;
  font-size: 13px;
}
#configurationPanel .rail-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
#configurationPanel .rail-qty-row label {
  display: grid;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
}
#configurationPanel .rail-qty-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
#configurationPanel .rail-stepper {
  display: inline-flex;
  align-items: center;
  height: 38px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
#configurationPanel .rail-stepper:focus-within {
  border-color: #111;
}
#configurationPanel .rail-stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 17px;
  cursor: pointer;
}
#configurationPanel .rail-stepper button:hover {
  background: #f1f2f3;
}
#configurationPanel .rail-stepper input {
  width: 84px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  -moz-appearance: textfield;
}
#configurationPanel .rail-stepper input::-webkit-inner-spin-button,
#configurationPanel .rail-stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#configurationPanel .rail-stepper input:focus {
  outline: none;
}
#configurationPanel .rail-pricing {
  margin-top: 14px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
#configurationPanel .rail-breakdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
}
#configurationPanel .rail-breakdown summary::-webkit-details-marker {
  display: none;
}
#configurationPanel .rail-breakdown summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
#configurationPanel .rail-breakdown summary strong {
  font-size: 13.5px;
}
#configurationPanel .rail-breakdown summary small {
  color: var(--muted);
  font-size: 11.5px;
}
#configurationPanel .rail-breakdown summary em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}
#configurationPanel .rail-breakdown summary em::after {
  content: ' ▾';
}
#configurationPanel .rail-breakdown[open] summary em {
  font-size: 0;
}
#configurationPanel .rail-breakdown[open] summary em::after {
  content: attr(data-hide-label) ' ▴';
  font-size: 12px;
}
#configurationPanel .rail-breakdown dl {
  margin: 0;
  padding: 0 14px 6px;
  border-top: 1px solid var(--border);
}
#configurationPanel .rail-pricing .pricing-notice {
  margin: 0;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border);
  background: #f8f9fa;
}
#configurationPanel .pricing-panel[data-state='unavailable'] summary small {
  color: #9b2c2c;
}
#configurationPanel .rail-info {
  margin-top: 10px;
}
.drawer-v2 .drawer-chips[hidden] {
  display: none;
}
.drawer-v2 .drawer-series-card {
  width: 100%;
  font: inherit;
  text-align: left;
  background: #fff;
  cursor: pointer;
}
.drawer-v2 .drawer-body > .drawer-grid {
  margin-top: 14px;
}
/* Series browse: expand a series' boxes in place below its row instead of drilling into a separate view */
.drawer-v2 .drawer-series-card.is-open {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}
.expand-panel {
  grid-column: 1/-1;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity 0.22s ease,
    transform 0.28s ease;
}
.expand-panel.open {
  opacity: 1;
  transform: translateY(0);
}
.expand-panel .expand-inner {
  margin-top: 2px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f6f7f8;
}
.expand-panel .expand-inner-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.expand-panel .expand-inner-head strong {
  font-size: 13px;
}
.expand-panel .expand-inner-head span {
  font-size: 11.5px;
  color: var(--muted);
}
@media (min-width: 901px) {
  .drawer.drawer-v2 {
    width: min(860px, 90vw);
  }
  .drawer-v2 .drawer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1180px) {
  .drawer-v2 .drawer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Horizontal swipe rows (Box, Insert) without scrollbars */
#configurationPanel .rail-scroll {
  position: relative;
}
#configurationPanel .rail-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 5px 4px;
  margin: -3px -4px;
  scroll-padding-inline: 4px;
} /* room for the selected card's 3px halo, which the scroller would otherwise clip; the negative margin keeps the layout where it was */
#configurationPanel .rail-track::-webkit-scrollbar {
  display: none;
}
#configurationPanel .rail-track > * {
  scroll-snap-align: start;
}
#configurationPanel .rail-inserts.rail-track {
  display: flex;
  grid-template-columns: none;
}
#configurationPanel .rail-inserts.rail-track > .rail-card {
  flex: 0 0 min(46%, 190px);
}
#configurationPanel .same-series.rail-track > .product-mini {
  flex: 0 0 132px;
}
#configurationPanel .rail-scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#configurationPanel .rail-scroll-btn[hidden] {
  display: none;
}
#configurationPanel .rail-scroll-btn.is-prev {
  left: -10px;
}
#configurationPanel .rail-scroll-btn.is-next {
  right: -10px;
}
@media (hover: none) {
  #configurationPanel .rail-scroll-btn {
    display: none;
  }
}
#configurationPanel .logo-uploaded {
  padding: 12px;
  border-radius: 16px;
  background: #fff;
}
#configurationPanel .logo-editor-stage {
  border-radius: 12px;
}
#configurationPanel .logo-editor-controls label {
  grid-template-columns: 52px 1fr;
  color: var(--ink2);
  font-weight: 600;
}
#configurationPanel .logo-editor-controls input[type='range'] {
  accent-color: #111;
}
#configurationPanel .rail-pill.is-danger {
  color: #b42318;
}
#configurationPanel .logo-status {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--muted);
}
#configurationPanel .logo-status.error {
  color: #b42318;
}
/* Material dialog V2 */
.material-dialog {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.25);
}
.material-dialog > header {
  align-items: center;
  padding: 20px 24px 14px;
  border-bottom: 0;
}
.material-dialog > header .eyebrow {
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
}
.material-dialog > header h2 {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.material-dialog > header > button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
  line-height: 1;
}
.material-dialog .material-tabs {
  gap: 18px;
  padding: 0 24px 14px;
  border-bottom: 1px solid var(--border);
}
.material-dialog .material-tabs label {
  margin-top: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.material-dialog .material-tabs .tabs {
  gap: 6px;
  margin: 6px 0 0;
  scrollbar-width: none;
}
.material-dialog .material-tabs .tabs::-webkit-scrollbar {
  display: none;
}
.material-dialog .material-tabs .tabs button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink2);
  font-size: 12.5px;
}
.material-dialog .material-tabs .tabs button.active {
  background: #111;
  border-color: #111;
  color: #fff;
}
.material-dialog .material-body {
  gap: 22px;
  padding: 18px 24px;
}
.material-dialog .material-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
}
.material-dialog .material-card.selected {
  border: 2px solid #111;
  box-shadow: none;
}
.material-dialog .material-card > img,
.material-dialog .material-card > .swatch {
  height: auto;
  aspect-ratio: 4/3;
}
.material-dialog .material-card strong {
  margin: 8px 10px 0;
  font-size: 13px;
}
.material-dialog .material-card span {
  margin: 2px 10px 0;
  font-size: 11px;
}
.material-dialog .material-card em {
  display: block;
  margin: 4px 10px 10px;
  color: var(--ink2);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}
.material-dialog .material-card .zoom {
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.15);
  color: var(--ink);
}
.material-dialog .material-check {
  position: absolute;
  left: 8px;
  top: 8px;
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  line-height: 22px;
  text-align: center;
}
.material-dialog .material-card.selected .material-check {
  display: block;
}
.material-dialog .material-preview {
  padding: 0 0 0 20px;
}
.material-dialog .preview-art {
  border-radius: 16px;
}
.material-dialog .material-preview h3 {
  font-size: 16px;
}
.material-dialog .material-preview .button,
.material-dialog > footer .button {
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}
.material-dialog > footer {
  padding: 12px 24px 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 900px) {
  .material-dialog {
    border-radius: 22px 22px 0 0;
  }
  /* The grab handle is positioned, not a grid item: as a fifth grid child it shifted the row template
     (tabs collapsed to 0 height) and the 1fr columns grew to the width of the non-wrapping tabs */
  .material-dialog {
    grid-template-columns: minmax(0, 1fr);
  }
  .material-dialog::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.18);
  }
  .material-dialog .material-tabs,
  .material-dialog .material-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .material-dialog .material-tabs > *,
  .material-dialog .material-body > * {
    min-width: 0;
  }
  .material-dialog > header {
    padding: 22px 16px 10px;
  }
  .material-dialog .material-tabs {
    padding: 0 16px 12px;
  }
  .material-dialog .material-body {
    padding: 14px 16px;
  }
  /* Phones: the selected material is already shown by the ticked card, its zoom button and the "Pending" line in the
     footer, so the large preview panel is dropped and the cards get the room; type and collection stay on compact rows */
  .material-dialog .material-preview {
    display: none;
  }
  .material-dialog .material-tabs {
    gap: 8px;
    padding: 0 16px 10px;
  }
  .material-dialog .material-tabs > div {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .material-dialog .material-tabs label {
    flex: 0 0 68px;
    font-size: 11.5px;
    color: var(--muted);
  }
  .material-dialog .material-tabs .tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 1px 0;
  }
  .material-dialog .material-tabs .tabs button {
    height: 32px;
    padding: 0 13px;
  }
  .material-dialog .material-body {
    padding: 12px 16px 4px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .material-dialog .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }
  .material-dialog .material-card > img,
  .material-dialog .material-card > .swatch {
    aspect-ratio: 1/1;
  }
  .material-dialog > footer {
    gap: 10px;
    box-shadow: 0 -6px 16px rgba(17, 24, 39, 0.06);
  }
  .material-dialog > footer > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .material-dialog > footer > div {
    flex: 0 0 auto;
  }
  .material-dialog > footer {
    position: sticky;
    bottom: 0;
    padding: 10px 16px max(14px, env(safe-area-inset-bottom));
    background: #fff;
  }
}
/* Summary dock: flex so figures shrink and actions never overflow */
#configurationPanel .summary {
  display: flex;
  align-items: center;
  gap: 18px;
  grid-template-columns: none;
}
#configurationPanel .summary > div:not(.summary-actions) {
  display: grid;
  flex: 0 1 auto;
  min-width: 0;
}
#configurationPanel .summary > div:not(.summary-actions) span {
  white-space: nowrap;
}
#configurationPanel .summary > div:not(.summary-actions) strong {
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#configurationPanel .summary > div.summary-unit {
  display: none;
}
#configurationPanel .summary .summary-actions {
  flex: 0 0 auto;
  margin-left: auto;
  grid-column: auto;
}
@media (max-width: 900px) {
  #configurationPanel .summary {
    gap: 12px;
  }
}
@media (max-width: 380px) {
  #configurationPanel .summary {
    gap: 10px;
  }
}
@media (max-width: 380px) {
  #configurationPanel .summary > div:not(.summary-actions) strong {
    font-size: 13px;
  }
}
.material-dialog .material-preview .button,
.material-dialog > footer .button {
  font-size: 14px;
}
#configurationPanel .rail-row-end {
  display: flex;
  align-items: center;
  gap: 8px;
}
#configurationPanel .rail-price {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fdf3dc;
  color: #8a5a0b;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
#configurationPanel .rail-price.is-included {
  background: #e8f3ee;
  color: #1f6f4d;
}
.material-dialog .material-card em.has-price {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdf3dc;
  color: #8a5a0b;
}
#configurationPanel .rail-row > .rail-row-end {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
/* Box and Insert cards, option A: soft photo card */
#configurationPanel .product-mini,
#configurationPanel .rail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
#configurationPanel .product-mini:hover,
#configurationPanel .rail-card:hover {
  border-color: rgba(17, 24, 39, 0.28);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}
#configurationPanel .product-mini.current,
#configurationPanel .rail-card.selected {
  padding: 5px;
  border: 2px solid #111;
  box-shadow: none;
}
#configurationPanel .card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  border-radius: 11px;
  background: #f3f4f6;
}
#configurationPanel .card-media img {
  display: block;
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  background: none;
  aspect-ratio: auto;
}
#configurationPanel .product-mini strong,
#configurationPanel .rail-card strong {
  display: block;
  margin: 8px 4px 0;
  font-size: 12.5px;
  line-height: 1.3;
}
#configurationPanel .product-mini > span:not(.card-media) {
  display: block;
  margin: 2px 4px 4px;
  color: var(--muted);
  font-size: 11px;
}
#configurationPanel .product-mini .in-set-tag {
  align-self: flex-start;
  margin: 2px 4px 4px;
}
#configurationPanel .card-check {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.2);
}
#configurationPanel .product-mini.current .card-check,
#configurationPanel .rail-card.selected .card-check {
  display: block;
}
#configurationPanel .card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 4px 4px;
}
#configurationPanel .card-chips small {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f2f4;
  color: var(--ink2);
  font-size: 10.5px;
  font-weight: 600;
}
#configurationPanel .card-chips small.is-price {
  background: #fdf3dc;
  color: #8a5a0b;
}
#configurationPanel .card-chips small.is-free {
  background: #e8f3ee;
  color: #1f6f4d;
}
#configurationPanel .same-series.rail-track > .product-mini {
  flex: 0 0 136px;
}
#configurationPanel .rail-inserts.rail-track > .rail-card {
  flex: 0 0 128px;
}
/* Styled leave-page dialog for in-app navigation */
.leave-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(400px, calc(100vw - 32px));
  padding: 26px 24px 20px;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.28);
  text-align: center;
  animation: leaveIn 0.16s ease-out;
}
.leave-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #fdf3dc;
  color: #8a5a0b;
  font-size: 20px;
  font-weight: 800;
}
.leave-dialog h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.leave-dialog p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.leave-actions {
  display: grid;
  gap: 8px;
}
.leave-btn {
  height: 44px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.leave-btn:hover {
  background: #f1f2f3;
}
.leave-btn.is-primary {
  border-color: #111;
  background: #111;
  color: #fff;
}
.leave-btn.is-primary:hover {
  background: #000;
}
.leave-btn.is-ghost {
  border-color: transparent;
  color: var(--muted);
}
.leave-btn[hidden] {
  display: none;
}
@keyframes leaveIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
}
#configurationPanel .product-mini > .card-media,
#configurationPanel .rail-card > .card-media {
  margin: 0;
  font-size: 0;
}
/* Box and Insert cards: the image sits 7px inside the card (8px from its outer edge with the border) and the text 12px in.
   The selected card keeps the same 1px border, so nothing moves when the choice changes; it is marked by a thin dark line,
   a soft 3px halo and the tick, instead of a heavy 2px frame that fought with the image and the dark call-to-action. */
#configurationPanel .product-mini,
#configurationPanel .rail-card {
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
}
#configurationPanel .product-mini.current,
#configurationPanel .rail-card.selected {
  padding: 7px;
  border: 1px solid #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}
#configurationPanel .product-mini > .card-media,
#configurationPanel .rail-card > .card-media {
  border-radius: 10px;
  background: var(--subtle);
}
#configurationPanel .product-mini strong {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 4px 0;
  font-size: 11px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
#configurationPanel .product-mini > span:not(.card-media) {
  margin: 2px 4px 4px;
  font-size: 10.5px;
}
#configurationPanel #headDims,
#configurationPanel .card-dimensions {
  letter-spacing: -1px;
}
#configurationPanel .product-mini .in-set-tag {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 15px;
  margin: 0;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
}
#configurationPanel .rail-card strong {
  margin: 8px 4px 0;
  font-size: 11px;
  line-height: 1;
}
#configurationPanel .rail-card .card-chips {
  margin: 6px 4px 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
#configurationPanel .rail-card .card-chips small {
  height: 16px;
  padding: 0 5px;
  font-size: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#configurationPanel .card-check {
  right: 15px;
  top: 15px;
}
#configurationPanel .product-mini.current .card-check,
#configurationPanel .rail-card.selected .card-check {
  right: 15px;
  top: 15px;
}
#configurationPanel .same-series.rail-track > .product-mini {
  flex: 0 0 128px;
}
/* Mouse drag-to-scroll on Box/Insert rows; touch keeps native momentum scrolling */
#configurationPanel .rail-track {
  cursor: grab;
  user-select: none;
}
#configurationPanel .rail-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
/* Mobile: the desktop inset:64px must not shift the relatively positioned workbench (gap under the header),
   and the 3D stage stays pinned below the header, moving to the top edge while the header is hidden. */
@media (max-width: 900px) {
  .workbench {
    inset: auto;
  }
  .stage {
    position: sticky;
    z-index: 20;
    top: 56px;
    transition: top 0.18s;
  }
  html.nav-off .stage {
    top: 0;
  }
  .fds-header.nav-hidden {
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.18s, visibility 0s 0.18s;
  }
  #visualStage :is(.stage-bottom, .stage-theme, .stage-lid, .pk-stage-bar, .cs-bar, .cs-overlay, #galleryPrevious, #galleryNext) {
    transition: opacity 0.18s, visibility 0s;
  }
  #visualStage.stage-tools-hidden:not(:fullscreen):not(.is-pseudo-fullscreen)
    :is(.stage-bottom, .stage-theme, .stage-lid, .pk-stage-bar, .cs-bar, .cs-overlay, #galleryPrevious, #galleryNext) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s, visibility 0s 0.18s;
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .fds-header,
  .fds-header.nav-hidden,
  .stage,
  #visualStage :is(.stage-bottom, .stage-theme, .stage-lid, .pk-stage-bar, .cs-bar, .cs-overlay, #galleryPrevious, #galleryNext) {
    transition: none !important;
  }
}
/* Box cards inside an expanded series are compact: more per row, smaller thumbnail and type */
.drawer-v2 .expand-inner .drawer-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.drawer-v2 .expand-inner .drawer-card {
  border-radius: 12px;
}
.drawer-v2 .expand-inner .drawer-card-media {
  aspect-ratio: 3/2;
}
.drawer-v2 .expand-inner .drawer-flag,
.drawer-v2 .expand-inner .drawer-card-media .in-set-tag {
  top: 6px;
  padding: 2px 7px;
  font-size: 9.5px;
}
.drawer-v2 .expand-inner .drawer-card-media .in-set-tag {
  right: 6px;
}
.drawer-v2 .expand-inner .drawer-card-body {
  gap: 2px;
  padding: 7px 9px 9px;
}
.drawer-v2 .expand-inner .drawer-card-body strong {
  font-size: 12px;
  line-height: 1.25;
}
.drawer-v2 .expand-inner .drawer-card-body span {
  font-size: 10.5px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .drawer-v2 .expand-inner {
    padding: 10px;
  }
  .drawer-v2 .expand-inner .drawer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .drawer-v2 .expand-inner .drawer-card-body {
    padding: 6px 7px 8px;
  }
  .drawer-v2 .expand-inner .drawer-card-body strong {
    font-size: 11px;
  }
  .drawer-v2 .expand-inner .drawer-card-body span {
    font-size: 9.5px;
  }
}

/* Configurator polish V3 (formerly configurator-v3.css): visual only. */
:root {
  --page: #f5f5f7;
}
body {
  background: #f5f5f7;
}

/* 3D view controls: comfortable targets and readable inactive labels */
.stage-dock .segments button {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 13px;
  color: #4b5563;
}
.stage-dock .segments button.active {
  color: #111;
}
.stage-dock button {
  min-width: 36px;
  min-height: 36px;
}
#configurationPanel button.rail-pill {
  min-height: 32px;
}

/* Secondary text: enough contrast on white and on the warm grey */
#configurationPanel :where(small, .rail-cur, .rail-kicker, .rail-sub) {
  color: #5b6472;
}

/* Price tags: one quiet brand tint instead of the yellow chips */
#configurationPanel .card-chips small.is-price,
#configurationPanel .rail-price:not(.is-included) {
  background: #fbeae6;
  color: #9a2f18;
  font-weight: 600;
}

/* Keyboard focus: one consistent ring across the header, stage, rail and price bar */
:where(.fds-header, .stage, #configurationPanel, .summary)
  :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #f0a84a;
  outline-offset: 2px;
}

/* Unpriced product: a quiet phrase instead of $0.00 */
.summary strong.is-request {
  font-size: 14px;
  font-weight: 600;
  color: #5b6472;
  letter-spacing: 0;
}

/* Stage: soft vignette (3D views only) and a loading ring */
#visualStage:not([data-active-mode='2d']) .viewport {
  position: relative;
}
#visualStage:not([data-active-mode='2d']) .viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(125% 105% at 50% 44%, transparent 58%, rgba(40, 32, 24, 0.1) 100%);
}
.stage-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  pointer-events: none;
  color: #5b6472;
  font-size: 12.5px;
  font-weight: 500;
}
.stage-ring {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(29, 29, 31, 0.14);
  border-top-color: #1d1d1f;
  border-radius: 50%;
  animation: stage-spin 0.9s linear infinite;
}
@keyframes stage-spin {
  to {
    transform: rotate(360deg);
  }
}
#visualStage[data-active-mode='2d'] .stage-loading {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .stage-ring {
    animation-duration: 2.4s;
  }
}

/* Logo rotation: live angle readout and key-angle ticks */
#configurationPanel .logo-editor-controls label.logo-rotate-row {
  grid-template-columns: 52px 1fr 54px;
  grid-template-areas: 'name slider value' '. ticks .';
}
.logo-rotate-row > input {
  grid-area: slider;
}
.logo-angle {
  grid-area: value;
  justify-self: end;
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f2f3;
  color: #1d1d1f;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition:
    background 0.12s,
    color 0.12s;
}
.logo-angle.is-snap {
  background: #fbeae6;
  color: #9a2f18;
}
.logo-angle-ticks {
  grid-area: ticks;
  height: 8px;
  margin: -4px 8px 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, #c3c8d0 0 1px, transparent 1px 12.5%) 0 0/100% 100% no-repeat,
    linear-gradient(#c3c8d0, #c3c8d0) 100% 0/1px 100% no-repeat,
    linear-gradient(#1d1d1f, #1d1d1f) 50% 0/2px 100% no-repeat;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .logo-angle {
    transition: none;
  }
}

/* Process: one card holding the process, its colour swatches and its preview, so the colour reads as part of the process */
#configurationPanel .process-card {
  margin-top: 6px;
  padding: 12px 14px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}
#configurationPanel .process-colors {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eceef1;
}
#configurationPanel .process-colors .rail-label {
  margin: 0 0 8px;
}
.process-swatches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.process-swatch {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.process-swatch i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.process-swatch:hover i {
  transform: scale(1.06);
}
.process-swatch i {
  transition: transform 0.12s;
}
.process-swatch.selected {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1d1d1f;
}
.process-swatch:focus-visible {
  outline: 3px solid #f0a84a;
  outline-offset: 3px;
}
.swatch-name {
  margin-left: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1d1d1f;
}
.swatch-name small {
  color: #5b6472;
  font-weight: 500;
}
#configurationPanel .process-card .rail-preview {
  margin-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .process-swatch i {
    transition: none;
  }
}

.process-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5b6472;
}
#configurationPanel .process-card .rail-preview:not([hidden]) + .process-hint {
  margin-top: 8px;
}

/* Optional dark stage (3D views only; the 2D gallery keeps its light backdrop) */
.stage-theme {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #3a3f45;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(8px);
}
.stage-theme:hover {
  color: #111;
}
.stage-theme:focus-visible {
  outline: 3px solid #f0a84a;
  outline-offset: 2px;
}
.stage-theme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-theme .ico-sun {
  display: none;
}
#visualStage[data-theme='dark'] .stage-theme {
  background: rgba(34, 32, 31, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f2f0ed;
}
#visualStage[data-theme='dark'] .stage-theme .ico-moon {
  display: none;
}
#visualStage[data-theme='dark'] .stage-theme .ico-sun {
  display: block;
}
#visualStage[data-theme='dark']:not([data-active-mode='2d']) {
  background-image: radial-gradient(120% 95% at 50% 36%, #48443f 0%, #23211f 52%, #121110 100%);
}
#visualStage[data-theme='dark']:not([data-active-mode='2d']) .viewport::after {
  background: none;
}
#visualStage[data-theme='dark']:not([data-active-mode='2d']) {
  background-image: radial-gradient(115% 100% at 50% 40%, #403c38 0%, #1e1c1b 48%, #0d0c0b 100%);
}
#visualStage[data-theme='dark'] .stage-dock {
  background: rgba(34, 32, 31, 0.84);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}
#visualStage[data-theme='dark'] .stage-dock .dock-divider {
  background: rgba(255, 255, 255, 0.18);
}
#visualStage[data-theme='dark'] .stage-dock .dock-icon {
  color: #e9e6e2;
}
#visualStage[data-theme='dark'] .stage-dock .dock-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
#visualStage[data-theme='dark'] .segments {
  background: rgba(255, 255, 255, 0.08);
}
#visualStage[data-theme='dark'] .stage-dock .segments button {
  color: #c4c0ba;
}
#visualStage[data-theme='dark'] .stage-dock .segments button.active {
  background: #f2f0ed;
  color: #111;
  box-shadow: none;
}
@media print {
  .stage-theme {
    display: none !important;
  }
}

/* Lid slider: a vertical control on the right edge of the 3D stage (up = open) */
.stage-lid {
  position: absolute;
  top: 64px;
  right: 14px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 42px;
  padding: 10px 0 8px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.86);
  color: #3a3f45;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  backdrop-filter: blur(8px);
}
.stage-lid[hidden] {
  display: none;
}
.stage-lid svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-lid output {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1d1d1f;
}
.stage-lid input[type='range'] {
  --p: 0%;
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: clamp(96px, 22vh, 170px);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
.stage-lid input[type='range']::-webkit-slider-runnable-track {
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(to top, #1d1d1f var(--p), rgba(29, 29, 31, 0.16) var(--p));
}
.stage-lid input[type='range']::-moz-range-track {
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(to top, #1d1d1f var(--p), rgba(29, 29, 31, 0.16) var(--p));
}
.stage-lid input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-left: -9px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.stage-lid input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.stage-lid input[type='range']:focus-visible {
  outline: 3px solid #f0a84a;
  outline-offset: 2px;
  border-radius: 14px;
}
#visualStage[data-theme='dark'] .stage-lid {
  background: rgba(34, 32, 31, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f2f0ed;
}
#visualStage[data-theme='dark'] .stage-lid output {
  color: #f2f0ed;
}
#visualStage[data-theme='dark'] .stage-lid input[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(to top, #f2f0ed var(--p), rgba(255, 255, 255, 0.2) var(--p));
}
#visualStage[data-theme='dark'] .stage-lid input[type='range']::-moz-range-track {
  background: linear-gradient(to top, #f2f0ed var(--p), rgba(255, 255, 255, 0.2) var(--p));
}
/* Phones: the stage is short, so the control fills the space between the theme button and the control bar instead of having a fixed height */
@media (max-width: 900px) {
  .stage-lid {
    top: 56px;
    bottom: 76px;
    right: 10px;
    width: 38px;
    padding: 8px 0 6px;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .stage-lid svg {
    display: none;
  }
  .stage-lid input[type='range'] {
    height: 100%;
    min-height: 48px;
  }
}
@media print {
  .stage-lid {
    display: none !important;
  }
}

/* Phones: the floating control bar must stay above the 2D gallery image (it used to be covered and could not be tapped),
   and in 2D view the image leaves room for the bar instead of running underneath it */
@media (max-width: 900px) {
  .stage-bottom {
    z-index: 5;
  }
  #visualStage[data-active-mode='2d'] .image-stage {
    inset: 0 0 64px 0;
  }
}

/* Viewport fullscreen on touch devices and native-fullscreen fallback on desktop. */
.has-pseudo-fullscreen,
.has-pseudo-fullscreen body {
  overflow: hidden;
  overscroll-behavior: none;
}
#visualStage.is-pseudo-fullscreen {
  overscroll-behavior: none;
  touch-action: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  width: 100vw;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  border: 0;
  box-shadow: none;
}

/* Header on phones in portrait: short labels ("Box", "My", one-character language) and, on narrow screens,
   the Box Set toggle as an icon with its count, so everything stays on one line down to 320px */
.lbl-short,
.boxset-ico {
  display: none;
}
@media (max-width: 560px) {
  .lbl-full {
    display: none;
  }
  .lbl-short {
    display: inline;
  }
  .fds-header .header-start > .button {
    width: auto;
    padding: 0 11px;
    font-size: 12px;
    white-space: nowrap;
  }
  .fds-header .header-end {
    gap: 4px;
  }
  .fds-header .header-end .header-link {
    padding: 0 9px;
  }
  .fds-header .header-end .lang-switch {
    padding: 0 8px;
  }
  .fds-header .brand {
    width: 76px;
  }
}
@media (max-width: 420px) {
  .boxset-lbl {
    display: none;
  }
  .boxset-ico {
    display: block;
  }
  .fds-header .header-end .header-link {
    gap: 5px;
  }
  .fds-header .header-end .header-link b {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
  }
}
@media (max-width: 360px) {
  .fds-header {
    padding: 0 8px;
  }
  .fds-header .brand {
    width: 58px;
  }
  .fds-header .brand img {
    max-width: 58px;
  }
  .fds-header .header-start {
    gap: 5px;
  }
  .fds-header .header-start > .button {
    padding: 0 9px;
  }
  .fds-header .header-end {
    gap: 3px;
  }
  /* Longer languages (French, Portuguese ...) keep the header on one line: a tighter Choose Box and language button. */
  .fds-header .header-start > .button {
    gap: 4px;
    padding: 0 7px;
  }
  .fds-header .header-end .header-link.lang-switch {
    padding: 0 5px;
  }
  .fds-header .header-end .header-link {
    padding: 0 7px;
    gap: 4px;
  }
  #accountButton [aria-hidden='true'] {
    display: none;
  }
}

/* Size standard switch (millimetres / inches) in the product tag row */
.unit-toggle {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #fff;
}
.unit-toggle button {
  min-width: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink2, #374151);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.unit-toggle button.active {
  background: #111;
  color: #fff;
}
.unit-toggle button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* Logo placement switch (lid exterior / lid lining): the rail edits one face at a time, so the two
   editors would otherwise be a long stack of duplicated controls. */
.logo-placement {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 10px;
  background: var(--subtle);
}
.logo-placement.has-hardware {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.logo-placement button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.logo-placement button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.logo-placement button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.logo-placement button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.logo-slot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}
.logo-placement-hint {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .logo-placement button {
    min-height: 38px;
  }
}

/* Choose-product drawer shared by every editor (assets/editor-catalog.js): product-type tabs on top,
 * title and count, search with the series / use switch on one row, and the open series joined to its
 * products by one tinted block with one outline (card, bridge and panel share --cd-tint and --cd-edge). */
.catalog-drawer {
  --cd-tint: #f3f1ec;
  --cd-edge: #c37b79;
  --cd-stroke: 2px;
  --cd-gap: 12px;
}
.catalog-drawer > .drawer-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
}
.catalog-drawer .cd-types {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 18px 72px 0 24px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f2f4;
}
.catalog-drawer .cd-types button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.catalog-drawer .cd-types button:hover {
  color: var(--ink);
}
.catalog-drawer .cd-types .cd-type-short {
  display: none;
}
.catalog-drawer .cd-types button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.catalog-drawer .drawer-head {
  padding: 16px 24px 12px;
}
.catalog-drawer:not(.has-types) .drawer-head {
  padding-top: 22px;
  padding-right: 72px;
}
.catalog-drawer .cd-tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.catalog-drawer .cd-tool-row .drawer-search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 360px;
  margin-left: auto;
}
.catalog-drawer .cd-tool-row .drawer-browse {
  flex: 0 0 auto;
}
.catalog-drawer .drawer-browse[hidden],
.catalog-drawer .drawer-chips[hidden] {
  display: none;
}
.catalog-drawer .drawer-card-body .cd-code {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.catalog-drawer .drawer-card-body .cd-code-line {
  overflow-wrap: anywhere;
}
.catalog-drawer .drawer-card-body .cd-uses {
  font-style: normal;
}
.catalog-drawer .drawer-card-body .cd-series-tag {
  justify-self: start;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cd-tint);
  color: var(--ink2);
  font-size: 11px;
}
.catalog-drawer .cd-retry {
  margin-top: 12px;
  cursor: pointer;
}
.catalog-drawer .cd-series-grid {
  gap: var(--cd-gap);
}
.catalog-drawer .drawer-series-card {
  position: relative;
  overflow: visible;
}
.catalog-drawer .drawer-series-card .drawer-card-media {
  border-radius: 15px 15px 0 0;
}
/* Only the open series carries the bold outline; the current series keeps just its flag */
.catalog-drawer .drawer-series-card.current:not(.is-open) {
  border: 1px solid var(--border);
}
.catalog-drawer .drawer-series-card.is-open {
  z-index: 2;
  border: var(--cd-stroke) solid var(--cd-edge);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--cd-tint);
  box-shadow: none;
  transform: none;
}
.catalog-drawer .drawer-series-card.is-open .drawer-card-media {
  border-radius: 14px 14px 0 0;
}
/* The bridge carries the tint and the outline across the grid gap; its two outer corners are
 * concave arcs (radius = the gap) that flow into the panel's top edge, so card, bridge and panel
 * read as one shape with one outline. A card in the first / last column runs straight down. */
.catalog-drawer .drawer-series-card.is-open::after {
  --r: var(--cd-gap);
  --o: calc(var(--cd-gap) + var(--cd-stroke));
  content: '';
  position: absolute;
  top: 100%;
  left: calc(0px - var(--cd-stroke) - var(--r));
  right: calc(0px - var(--cd-stroke) - var(--r));
  height: calc(var(--cd-gap) + var(--cd-stroke));
  background:
    radial-gradient(circle at 0 0, transparent var(--r), var(--cd-edge) var(--r), var(--cd-edge) var(--o), var(--cd-tint) var(--o)) left top / var(--o) 100% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--r), var(--cd-edge) var(--r), var(--cd-edge) var(--o), var(--cd-tint) var(--o)) right top / var(--o) 100% no-repeat,
    linear-gradient(to right, var(--cd-edge) 0 var(--cd-stroke), var(--cd-tint) var(--cd-stroke) calc(100% - var(--cd-stroke)), var(--cd-edge) calc(100% - var(--cd-stroke))) var(--r) 0 / calc(100% - 2 * var(--r)) 100% no-repeat;
}
.catalog-drawer .drawer-series-card.is-open.joins-first::after {
  left: calc(0px - var(--cd-stroke));
  background:
    radial-gradient(circle at 100% 0, transparent var(--r), var(--cd-edge) var(--r), var(--cd-edge) var(--o), var(--cd-tint) var(--o)) right top / var(--o) 100% no-repeat,
    linear-gradient(to right, var(--cd-edge) 0 var(--cd-stroke), var(--cd-tint) var(--cd-stroke) calc(100% - var(--cd-stroke)), var(--cd-edge) calc(100% - var(--cd-stroke))) 0 0 / calc(100% - var(--r)) 100% no-repeat;
}
.catalog-drawer .drawer-series-card.is-open.joins-last::after {
  right: calc(0px - var(--cd-stroke));
  background:
    radial-gradient(circle at 0 0, transparent var(--r), var(--cd-edge) var(--r), var(--cd-edge) var(--o), var(--cd-tint) var(--o)) left top / var(--o) 100% no-repeat,
    linear-gradient(to right, var(--cd-edge) 0 var(--cd-stroke), var(--cd-tint) var(--cd-stroke) calc(100% - var(--cd-stroke)), var(--cd-edge) calc(100% - var(--cd-stroke))) var(--r) 0 / calc(100% - var(--r)) 100% no-repeat;
}
.catalog-drawer .drawer-series-card.is-open.joins-first.joins-last::after {
  background: linear-gradient(to right, var(--cd-edge) 0 var(--cd-stroke), var(--cd-tint) var(--cd-stroke) calc(100% - var(--cd-stroke)), var(--cd-edge) calc(100% - var(--cd-stroke)));
}
.catalog-drawer .cd-panel {
  transform: none;
}
.catalog-drawer .cd-panel .expand-inner {
  margin-top: 0;
  padding: 14px;
  border: var(--cd-stroke) solid var(--cd-edge);
  border-radius: 16px;
  background: var(--cd-tint);
}
.catalog-drawer .cd-panel.joins-first .expand-inner {
  border-top-left-radius: 0;
}
.catalog-drawer .cd-panel.joins-last .expand-inner {
  border-top-right-radius: 0;
}
.catalog-drawer .cd-panel .drawer-card {
  background: #fff;
}
@media (max-width: 900px) {
  .catalog-drawer {
    --cd-gap: 10px;
  }
  .catalog-drawer > .drawer-close {
    top: 18px;
    right: 16px;
  }
  .catalog-drawer .cd-types {
    margin: 12px 64px 0 16px;
    flex-shrink: 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .catalog-drawer .cd-types button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .catalog-drawer .cd-types .cd-type-full {
    display: inline;
  }
  .catalog-drawer .cd-types .cd-type-short {
    display: none;
  }
  .catalog-drawer .drawer-head {
    padding: 12px 16px 10px;
  }
  .catalog-drawer:not(.has-types) .drawer-head {
    padding-right: 64px;
  }
  .catalog-drawer .cd-tool-row .drawer-search {
    max-width: none;
  }
  .catalog-drawer .cd-panel .expand-inner {
    padding: 10px;
  }
}
@media (max-width: 360px) {
  .catalog-drawer .cd-tool-row {
    gap: 6px;
  }
  .catalog-drawer .cd-tool-row .drawer-search {
    padding: 0 10px;
  }
  .catalog-drawer .drawer-browse button {
    padding: 0 10px;
  }
}
.catalog-drawer .expand-inner .drawer-card-body .cd-code {
  font-size: 10px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .catalog-drawer .expand-inner .drawer-card-body .cd-code {
    font-size: 9px;
  }
}
/* Tighter name lines: multi-line series and product names stay compact */
.catalog-drawer .drawer-card-body {
  gap: 2px;
}
.catalog-drawer .drawer-card-body strong,
.catalog-drawer .expand-inner .drawer-card-body strong {
  line-height: 1.15;
}

/* Same-series section: the toggle after the title opens every product in a grid. */
#configurationPanel .rail-expand {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--ink2);
  cursor: pointer;
  transition: transform 0.15s;
}
#configurationPanel .rail-expand:hover {
  border-color: rgba(17, 24, 39, 0.28);
}
#configurationPanel .rail-sec.is-expanded .rail-expand {
  transform: rotate(180deg);
}
#configurationPanel .rail-sec.is-expanded .rail-scroll-btn {
  display: none;
}
#configurationPanel .rail-sec.is-expanded {
  position: fixed;
  top: var(--ov-top, 0);
  left: var(--ov-left, 0);
  bottom: 0;
  z-index: 40;
  box-sizing: border-box;
  width: var(--ov-width, 100%);
  margin: 0;
  padding: 18px 20px 24px;
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--border);
}
#configurationPanel .rail-sec.is-expanded .same-series.rail-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  overflow: visible;
  scroll-snap-type: none;
  margin: 0;
  padding: 4px;
}
#configurationPanel .rail-sec.is-expanded .same-series.rail-track > .product-mini {
  flex: none;
  min-width: 0;
}
#configurationPanel .rail-chip > small.is-inline {
  margin-left: 2px;
  font-size: 11px;
}

/* Design naming belongs at the end of the configuration, just before the save dock. */
#configurationPanel .design-name-bottom {
  margin-top: 0;
  padding: 20px 0 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}
#configurationPanel .design-name-bottom .design-name-label {
  flex-basis: 100%;
  font-size: 12px;
}
#configurationPanel .design-name-bottom strong {
  flex: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}
#configurationPanel .design-name-bottom .rail-pill {
  min-height: 36px;
}
.catalog-drawer .drawer-tools[hidden] { display: none; }
#configurationPanel .design-name-bottom input {
  min-height: 40px;
  font-size: 14px;
}
@media (max-width: 900px) {
  #configurationPanel .design-name-bottom input { font-size: 16px; }
}

/* Template colors are compact color choices; the adjacent sphere previews the actual texture. */
.material-grid.template-colors{align-content:start;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.template-colors .material-card{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto auto;gap:2px 10px;align-content:center;padding:10px;min-height:80px;text-align:left}
.template-colors .material-card .swatch{width:32px;height:32px;min-height:0;aspect-ratio:1;border-radius:50%;grid-row:1/4;border:1px solid #0002;margin:0}
.template-colors .material-card strong,.template-colors .material-card span,.template-colors .material-card em{padding:0;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.template-colors .material-card img.swatch{object-fit:cover}
.template-colors .material-card .material-check{position:absolute;top:6px;right:6px;width:17px;height:17px;font-size:10px}
#templateMaterialPreview{min-height:180px;width:100%;overflow:hidden}#templateMaterialPreview canvas{display:block;width:100%;height:100%;touch-action:none}
@media(max-width:900px){.material-grid.template-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.template-colors .material-card{padding:10px;grid-template-columns:32px minmax(0,1fr);gap:3px 8px;min-height:88px}.template-colors .material-card .swatch{width:30px;height:30px}}

.template-color-notice,.material-history-note{font-size:12px;color:var(--fds-gray-500,#667085);line-height:1.6}.template-color-notice{margin:0;padding:8px 24px;border-bottom:1px solid var(--fds-gray-200,#ddd)}

/* Jewelry box choices: compact metadata and separate corner states over the photo. */
#configurationPanel .same-series.rail-track > .box-choice {
  flex: 0 0 136px;
  display: flex;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--r12);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
  transform: none;
  transition: border-color 150ms, box-shadow 150ms;
}
#configurationPanel .same-series.rail-track > .box-choice:hover {
  border-color: var(--strong);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.05);
}
#configurationPanel .same-series.rail-track > .box-choice.current {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 0.5px var(--ink);
}
#configurationPanel .box-choice > .box-choice-photo {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  background: var(--surface);
}
#configurationPanel .box-choice .box-choice-photo img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
}
#configurationPanel .box-choice > .box-choice-title {
  margin: 2px 10px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#configurationPanel .box-choice > .card-dimensions {
  margin: 4px 10px 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: normal;
}
#configurationPanel .box-choice > .box-choice-price {
  margin: 4px 10px 0;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
#configurationPanel .box-choice > .box-choice-state {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 3px 6px;
  border-radius: var(--r4);
  background: var(--fds-green-50);
  color: var(--positive);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
#configurationPanel .box-choice.current > .box-choice-state {
  max-width: calc(100% - 41px);
}
#configurationPanel .box-choice > .box-choice-state:not([hidden]) {
  display: block;
}
#configurationPanel .box-choice > .box-choice-state[hidden] {
  display: none;
}
#configurationPanel .box-choice.current .card-check {
  display: grid;
  place-items: center;
  top: 8px;
  right: 8px;
  width: 17px;
  height: 17px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: none;
  font-size: 10px;
  line-height: 1;
}
#configurationPanel .rail-sec.is-expanded .same-series.rail-track > .box-choice {
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  #configurationPanel .same-series.rail-track > .box-choice { transition: none; }
}

/* Material picker heading: title and current surface share one compact line. */
#materialDialog .material-dialog > header > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
#materialDialog #materialTitle {
  order: -1;
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}
#materialDialog #materialSlotLabel {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r6);
  background: var(--subtle);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
}

/* Compact material filter pills; keep wrapping labels readable at narrower widths. */
#materialDialog .material-tabs .tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 28px;
  padding: 4px 11px;
  font-size: 12px;
  line-height: 18px;
}

/* Enlarged template preview uses the same physical material sphere as the picker. */
#materialLightbox {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}
#materialLightboxPreview {
  width: min(720px, calc(100vw - 48px), calc(100dvh - 150px));
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r16);
  background: var(--subtle);
}
#materialLightboxPreview canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
#materialLightboxLabel {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  #materialDialog .material-preview {
    display: block;
    padding: 12px 0 0;
    border: 0;
  }
  #materialDialog .material-preview .preview-art,
  #materialDialog .material-preview h3,
  #materialDialog .material-preview p { display: none; }
}

#templateMaterialPreview,#materialLightboxPreview{position:relative}
#templateMaterialPreview[data-loading]:not([data-loading=""])::after,#materialLightboxPreview[data-loading]:not([data-loading=""])::after{content:attr(data-loading);position:absolute;bottom:8px;left:8px;right:8px;padding:6px;background:var(--surface);color:var(--ink2);font-size:12px;text-align:center;border-radius:var(--r6)}

.logo-editor-stage.is-dragging, .logo-editor-stage.is-dragging #logoEditorImage { cursor: grabbing; }
#logoEditorImage:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Naming, readiness and editor-only measurement overlays. */
#configurationPanel .design-name-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r8);
  background: var(--subtle);
}
#configurationPanel .design-name-bottom .design-name-label { grid-column: 1; font-size: 11px; letter-spacing: 0; }
#configurationPanel .design-name-bottom strong { grid-column: 1; font-size: 13px; font-weight: 500; line-height: 1.55; }
#configurationPanel .design-name-bottom .design-rename { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px; min-height: 36px; height: auto; border-color: transparent; background: transparent; font-size: 12px; white-space: nowrap; }
#configurationPanel #eligibilityStatus { height: auto; min-height: 24px; max-width: 100%; padding: 7px 10px; border-radius: var(--r6); white-space: normal; line-height: 1.6; }
#configurationPanel #eligibilityStatus.is-ok { display: inline-flex; align-items: flex-start; gap: 7px; }
#eligibilityStatus.is-ok::before { content: '✓'; flex: 0 0 auto; }
.catalog-drawer .drawer-head[hidden] { display: none; }
.logo-measurements { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 2; direction: ltr; }
.logo-measurements[hidden] { display: none; }
.logo-ruler line { stroke: var(--ink2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.logo-ruler rect { fill: var(--surface); fill-opacity: .95; stroke: var(--border); stroke-width: .7; }
.logo-ruler text { fill: var(--ink); font-size: 11px; font-family: inherit; text-anchor: middle; dominant-baseline: central; direction: ltr; unicode-bidi: isolate; }
.logo-centre-guide line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }
.logo-centre-guide.is-snapped line { stroke: var(--focus); stroke-width: 1.5; stroke-dasharray: none; opacity: 1; }
.logo-measurement-readout { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 900px) { #configurationPanel .design-name-bottom .design-rename { min-height: 44px; } }