.mdlc-customizer,
.mdlc-customizer * {
  box-sizing: border-box;
}

.mdlc-customizer {
  --mdlc-ink: #342f35;
  --mdlc-muted: #766f76;
  --mdlc-paper: #fffdfb;
  --mdlc-line: #e8dfe2;
  --mdlc-soft: #f7eff1;
  color: var(--mdlc-ink);
  font-family: inherit;
  margin: 1.5rem 0;
  max-width: 760px;
}

.mdlc-heading {
  margin-bottom: 1.1rem;
}

.mdlc-heading .mdlc-eyebrow,
.mdlc-section-heading span {
  color: #9d5f70;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 .28rem;
  text-transform: uppercase;
}

.mdlc-heading h2,
.mdlc-section-heading h3,
.mdlc-position-groups h4 {
  color: var(--mdlc-ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.15;
  margin: 0;
}

.mdlc-heading h2 {
  font-size: clamp(1.55rem, 7vw, 2.15rem);
}

.mdlc-heading > p:last-child,
.mdlc-order-card > p {
  color: var(--mdlc-muted);
  font-size: .92rem;
  line-height: 1.5;
  margin: .55rem 0 0;
}

.mdlc-preview-card,
.mdlc-picker-card,
.mdlc-order-card {
  background: var(--mdlc-paper);
  border: 1px solid var(--mdlc-line);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(84, 61, 68, .08);
  margin-bottom: 1rem;
  overflow: hidden;
  padding: 1rem;
}

.mdlc-preview-toolbar label,
.mdlc-color-picker > span {
  color: var(--mdlc-ink);
  display: block;
  font-size: .82rem;
  font-weight: 750;
  margin-bottom: .4rem;
}

.mdlc-text-row {
  align-items: center;
  display: flex;
  gap: .5rem;
}

.mdlc-text-row .mdlc-neck-input,
.mdlc-customizer .mdlc-search {
  background: #fff;
  border: 1px solid #d9cdd1;
  border-radius: 11px;
  color: var(--mdlc-ink);
  font: inherit;
  height: 44px;
  margin: 0;
  min-width: 0;
  padding: 0 .8rem;
  width: 100%;
}

.mdlc-text-row .mdlc-neck-input:focus,
.mdlc-customizer .mdlc-search:focus {
  border-color: #a96678;
  box-shadow: 0 0 0 3px rgba(169, 102, 120, .14);
  outline: none;
}

.mdlc-char-count {
  color: var(--mdlc-muted);
  flex: 0 0 auto;
  font-size: .76rem;
}

.mdlc-color-picker {
  align-items: center;
  border-top: 1px solid var(--mdlc-line);
  display: flex;
  gap: .85rem;
  justify-content: space-between;
  margin-top: .9rem;
  padding-top: .9rem;
}

.mdlc-color-picker > span {
  margin: 0;
}

.mdlc-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.mdlc-customizer button.mdlc-swatch {
  appearance: none;
  background: var(--swatch);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #cfc4c8;
  height: 29px;
  margin: 0;
  min-height: 0;
  padding: 0;
  width: 29px;
}

.mdlc-customizer button.mdlc-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--mdlc-ink);
  transform: scale(1.07);
}

.mdlc-stage {
  aspect-ratio: 420 / 500;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.98) 0 40%, rgba(255,255,255,.52) 41% 57%, transparent 58%),
    linear-gradient(145deg, #faf7f5 0%, #f0e7e7 100%);
  border: 1px solid #eee5e6;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -18px 40px rgba(108, 75, 84, .045);
  margin: 1rem auto 0;
  max-width: 440px;
  overflow: hidden;
  position: relative;
}

.mdlc-stage::after {
  background: radial-gradient(ellipse, rgba(62, 44, 50, .18), transparent 68%);
  bottom: 1.2%;
  content: '';
  height: 4%;
  left: 36%;
  opacity: .42;
  position: absolute;
  width: 28%;
}

.mdlc-lanyard-shape {
  filter: drop-shadow(0 7px 7px rgba(54, 40, 45, .11));
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.mdlc-band-shadow,
.mdlc-band-edge,
.mdlc-band-main,
.mdlc-band-highlight,
.mdlc-band-texture {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mdlc-band-shadow {
  opacity: .23;
  stroke: #372e33;
  stroke-width: 52;
  transform: translateY(5px);
}

.mdlc-band-edge {
  opacity: .38;
  stroke: #3b3237;
  stroke-width: 49;
}

.mdlc-band-main {
  stroke: var(--mdlc-color);
  stroke-width: 45;
  transition: stroke .2s ease;
}

.mdlc-band-highlight {
  opacity: .3;
  stroke: #fff;
  stroke-width: 3.5;
  transform: translate(-2px, -2px);
}

.mdlc-band-texture {
  opacity: .15;
  stroke: #fff;
  stroke-dasharray: 1 4;
  stroke-width: 36;
}

.mdlc-connector-shadow {
  fill: #2f272b;
  opacity: .28;
}

.mdlc-connector {
  fill: var(--mdlc-color);
  stroke: rgba(255, 255, 255, .28);
  stroke-width: 1.5;
}

.mdlc-swivel {
  fill: #8d898b;
  stroke: #686468;
  stroke-width: 5;
}

.mdlc-hook-ring,
.mdlc-hook-shine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mdlc-hook-ring {
  stroke: #747074;
  stroke-width: 10;
}

.mdlc-hook-shine {
  opacity: .65;
  stroke: #d8d5d6;
  stroke-width: 2.5;
}

.mdlc-neck-text {
  color: #fff;
  fill: #fff;
  font-family: 'Trebuchet MS', Trebuchet, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .015em;
  paint-order: stroke;
  stroke: rgba(45, 36, 40, .16);
  stroke-width: 1.25px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

.mdlc-neck-preview.is-placeholder {
  opacity: .58;
}

.mdlc-preview-slot {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px dashed rgba(255, 255, 255, .72);
  border-radius: 7px;
  box-shadow: none;
  color: rgba(255, 255, 255, .86);
  display: flex;
  font-size: clamp(.48rem, 2vw, .62rem);
  font-weight: 800;
  height: clamp(22px, 6.9vw, 31px);
  justify-content: center;
  overflow: hidden;
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(22px, 6.9vw, 31px);
  z-index: 2;
}

.mdlc-preview-slot.has-picto {
  background: rgba(255, 255, 255, .97);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(49, 35, 40, .22);
}

.mdlc-preview-slot.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #372f35, 0 2px 7px rgba(60, 43, 48, .18);
}

.mdlc-preview-slot img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mdlc-column-label {
  color: #8d7e83;
  font-size: clamp(.55rem, 2.5vw, .7rem);
  font-weight: 750;
  position: absolute;
  top: 46%;
  writing-mode: vertical-rl;
}

.mdlc-column-label--one { left: 2.5%; transform: rotate(180deg); }
.mdlc-column-label--two { right: 2.5%; }

.mdlc-section-heading {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: .9rem;
}

.mdlc-section-heading h3 {
  font-size: 1.25rem;
}

.mdlc-section-heading span {
  display: block;
}

.mdlc-selection-count {
  background: var(--mdlc-soft);
  border-radius: 999px;
  color: #914f62;
  font-size: .85rem;
  padding: .38rem .65rem;
}

.mdlc-category-filters {
  display: flex;
  gap: .45rem;
  margin: .75rem -.1rem .85rem;
  overflow-x: auto;
  padding: .1rem;
  scrollbar-width: thin;
}

.mdlc-customizer button.mdlc-filter,
.mdlc-customizer button.mdlc-move-prev,
.mdlc-customizer button.mdlc-move-next,
.mdlc-customizer button.mdlc-remove {
  background: #fff;
  border: 1px solid #d8ccd0;
  border-radius: 999px;
  color: var(--mdlc-ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  min-height: 39px;
  padding: .65rem .78rem;
  white-space: nowrap;
}

.mdlc-customizer button.mdlc-filter.is-selected {
  background: var(--mdlc-ink);
  border-color: var(--mdlc-ink);
  color: #fff;
}

.mdlc-library {
  display: grid;
  gap: .55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 365px;
  overflow-y: auto;
  padding: .15rem;
}

.mdlc-customizer button.mdlc-library-item {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid #e2d9dc;
  border-radius: 13px;
  color: var(--mdlc-ink);
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: .72rem;
  gap: .4rem;
  justify-content: center;
  line-height: 1.15;
  margin: 0;
  min-height: 94px;
  padding: .55rem .35rem;
  text-align: center;
}

.mdlc-customizer button.mdlc-library-item:hover,
.mdlc-customizer button.mdlc-library-item:focus-visible {
  border-color: #a96678;
  box-shadow: 0 0 0 2px rgba(169, 102, 120, .13);
  transform: translateY(-1px);
}

.mdlc-library-item img {
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.mdlc-library-empty {
  color: var(--mdlc-muted);
  grid-column: 1 / -1;
  margin: 1.5rem 0;
  text-align: center;
}

.mdlc-position-groups {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
}

.mdlc-position-groups h4 {
  font-size: 1rem;
  margin-bottom: .45rem;
}

.mdlc-slot-list {
  display: grid;
  gap: .36rem;
}

.mdlc-customizer button.mdlc-slot-button {
  align-items: center;
  appearance: none;
  background: #fff;
  border: 1px solid #e1d7da;
  border-radius: 10px;
  color: var(--mdlc-ink);
  display: grid;
  font: inherit;
  grid-template-columns: 24px 35px minmax(0, 1fr);
  margin: 0;
  min-height: 45px;
  padding: .28rem .45rem;
  text-align: left;
  width: 100%;
}

.mdlc-customizer button.mdlc-slot-button.is-selected {
  background: #fcf3f5;
  border-color: #9f5c6f;
  box-shadow: 0 0 0 1px #9f5c6f;
}

.mdlc-slot-number {
  color: #8f7e83;
  font-size: .7rem;
  font-weight: 800;
}

.mdlc-slot-thumb {
  align-items: center;
  background: #f6eff1;
  border-radius: 7px;
  color: #a88e96;
  display: flex;
  height: 31px;
  justify-content: center;
  overflow: hidden;
  width: 31px;
}

.mdlc-slot-thumb img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.mdlc-slot-name {
  font-size: .75rem;
  overflow: hidden;
  padding-left: .45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdlc-position-actions {
  display: grid;
  gap: .45rem;
  grid-template-columns: 1fr 1fr;
  margin-top: .8rem;
}

.mdlc-customizer button.mdlc-remove {
  color: #934c5f;
  grid-column: 1 / -1;
  grid-row: 2;
}

.mdlc-form-error {
  background: #fff0f0;
  border: 1px solid #db8e8e;
  border-radius: 10px;
  color: #7f2626;
  font-size: .86rem;
  margin: .8rem 0;
  padding: .75rem;
}

@media (min-width: 480px) {
  .mdlc-preview-card,
  .mdlc-picker-card,
  .mdlc-order-card { padding: 1.25rem; }
  .mdlc-library { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mdlc-position-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdlc-position-actions { grid-template-columns: 1fr auto 1fr; }
  .mdlc-customizer button.mdlc-remove { grid-column: auto; grid-row: auto; }
}

@media (min-width: 700px) {
  .mdlc-library { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mdlc-preview-card { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mdlc-customizer *,
  .mdlc-customizer *::before,
  .mdlc-customizer *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}