.pc-configurator {
  --pc-accent: #c7442d;
  margin-bottom: 1.5rem;
  padding: 1.35rem;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(30, 24, 20, 0.07);
}

.pc-heading,
.pc-print-legend,
.pc-mode-card,
.pc-legend,
.pc-fieldset legend {
  display: flex;
  align-items: center;
}

.pc-heading {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pc-kicker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--pc-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pc-step-badge {
  flex: none;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #f5efe8;
  color: #5c4b41;
  font-size: 0.72rem;
  font-weight: 700;
}

.pc-preview-card {
  position: relative;
  overflow: hidden;
  padding: 3rem 2.1rem 1rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -30%, rgba(255,255,255,.28), transparent 48%),
    linear-gradient(145deg, #26272a, #111214);
  color: #fff;
}

.pc-preview-card::before {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: repeating-linear-gradient(125deg, transparent 0 5px, rgba(255,255,255,.035) 5px 6px);
  content: "";
}

.pc-dimensions {
  position: relative;
  width: min(83%, 500px);
  margin: 0 auto 0.65rem;
  border-top: 1px solid rgba(255,255,255,.38);
  text-align: center;
}

.pc-dimensions::before,
.pc-dimensions::after {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 8px;
  background: rgba(255,255,255,.55);
  content: "";
}

.pc-dimensions::before { left: 0; }
.pc-dimensions::after { right: 0; }

.pc-dimensions span {
  position: relative;
  top: -0.75rem;
  padding: 0 0.55rem;
  background: #202124;
  color: rgba(255,255,255,.72);
  font-size: 0.67rem;
}

.pc-keychain {
  position: relative;
  width: min(82%, 490px);
  aspect-ratio: var(--pc-object-ratio);
  margin: 0 auto 2.1rem;
  filter: drop-shadow(0 17px 14px rgba(0,0,0,.36));
}

.pc-fabric {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  border: 3px solid color-mix(in srgb, var(--pc-color), #000 27%);
  border-radius: 7px;
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--pc-color), #fff 8%), color-mix(in srgb, var(--pc-color), #000 7%));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc-color), #fff 15%), inset 0 0 15px rgba(0,0,0,.13);
  transition: background-color .2s ease, border-color .2s ease;
}

.pc-fabric-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  mix-blend-mode: multiply;
  object-fit: fill;
  pointer-events: none;
}

.pc-print-area {
  position: absolute;
  top: 50%;
  left: 13%;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--pc-logo-zone) minmax(0, 1fr);
  width: var(--pc-print-width);
  height: var(--pc-print-height);
  overflow: hidden;
  border: 1px dashed rgba(255,255,255,.52);
  transform: translateY(-50%);
  transition: grid-template-columns .2s ease;
}

.pc-print-area.is-text-only { grid-template-columns: 0 minmax(0, 1fr); }
.pc-print-area.is-text-only .pc-logo-zone { opacity: 0; }
.pc-print-area.is-artwork,
.pc-print-area.is-logo-preset { grid-template-columns: var(--pc-logo-zone) minmax(0, 1fr); }
.pc-print-area.is-artwork .pc-logo-zone,
.pc-print-area.is-artwork .pc-text-zone,
.pc-print-area.is-logo-preset .pc-text-zone { opacity: 0; }
.pc-print-area.is-logo-preset .pc-logo-zone { z-index: 2; border-right: 0; }
.pc-print-area.is-artwork .pc-artwork-zone,
.pc-print-area.is-logo-preset .pc-artwork-zone { display: flex; }

.pc-logo-zone,
.pc-text-zone {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4%;
}

.pc-logo-zone {
  overflow: hidden;
  border-right: 1px dashed rgba(255,255,255,.42);
  transition: opacity .2s ease;
}

.pc-logo-zone img {
  width: 78%;
  height: 75%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}

.pc-artwork-zone {
  position: absolute;
  inset: 2%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.pc-artwork-zone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pc-text-zone > span {
  display: block;
  overflow: hidden;
  color: var(--pc-ink, #fff);
  font-family: "Outfit", sans-serif;
  font-size: clamp(.5rem, 2vw, 1rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px var(--pc-ink-shadow, rgba(0,0,0,.32));
  white-space: nowrap;
}

.pc-zone-label {
  position: absolute;
  right: 4px;
  bottom: 2px;
  color: rgba(255,255,255,.55);
  font-size: clamp(.3rem, .75vw, .5rem);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pc-eyelet {
  position: absolute;
  top: 50%;
  left: 3.3%;
  z-index: 3;
  width: 8.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, #f3f3f3, #777 42%, #eee 62%, #686868);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transform: translateY(-50%);
}

.pc-eyelet i {
  position: absolute;
  inset: 26%;
  border-radius: inherit;
  background: #18191b;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.75);
}

.pc-ring {
  position: absolute;
  top: 50%;
  right: 96%;
  width: 18%;
  aspect-ratio: 1;
  border: clamp(3px, .55vw, 6px) solid #c5c8c9;
  border-left-color: #6e7374;
  border-radius: 50%;
  box-shadow: inset 1px 1px 1px #fff, 1px 2px 3px rgba(0,0,0,.38);
  transform: translateY(-50%);
}

.pc-face-label { position:relative; display:flex; justify-content:space-between; gap:.5rem; margin:0 0 1rem; font-size:.8rem; font-weight:700; }
.pc-face-label span { font-size:.7rem; font-weight:400; color:#ddd; }
.pc-reading-direction { position:relative; margin:.65rem 0 0; text-align:center; font-size:.7rem; color:#eee; }
.pc-reverse-print { display:flex; align-items:center; justify-content:center; }
.pc-reverse-print > span { color:var(--pc-ink,#fff); font-family:"Outfit",sans-serif; font-weight:700; font-size:clamp(1.05rem,4.3vw,1.8rem); }
.pc-reverse-print img { width:96%; height:96%; object-fit:contain; }
.pc-reverse-print [hidden] { display:none; }
.pc-reverse-choice { display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; }
.pc-reverse-choice input { margin-top:.3rem; }
.pc-reverse-choice strong { display:block; }
.pc-reverse-included { margin:1rem 0 0; font-size:.85rem; }
.pc-keychain.is-white .pc-fabric { border-color:#dedede; background:#fff; box-shadow:inset 0 0 0 2px #fff,inset 0 0 8px rgba(0,0,0,.025); }
.pc-keychain.is-white .pc-fabric-photo { opacity:.32; mix-blend-mode:normal; }
.pc-keychain.is-white .pc-print-area { border-color:rgba(0,0,0,.18); }

.pc-print-legend {
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem 1.1rem;
  color: rgba(255,255,255,.72);
  font-size: .72rem;
}

.pc-print-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1px dashed rgba(255,255,255,.65);
}

.pc-disclaimer {
  position: relative;
  margin: .55rem 0 0;
  color: rgba(255,255,255,.43);
  font-size: .62rem;
  text-align: center;
}

.pc-fields { margin-top: 1rem; }

.pc-fieldset {
  min-width: 0;
  margin: 0;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(17,17,17,.08);
}

.pc-fieldset:last-child { border-bottom: 0; padding-bottom: 0; }

.pc-fieldset legend,
.pc-legend {
  width: auto;
  gap: .55rem;
  margin: 0 0 .75rem;
  font-size: .9rem;
  font-weight: 700;
}

.pc-fieldset legend span,
.pc-legend > span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: .7rem;
}

.pc-swatches,
.pc-logo-list,
.pc-mode-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.pc-swatch {
  display: flex;
  width: 42px;
  height: 42px;
  padding: 4px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 50%;
  background: #fff;
}

.pc-swatch i {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: inherit;
  background: var(--swatch-color);
}

.pc-swatch span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pc-swatch:hover { transform: translateY(-2px); }
.pc-swatch.is-selected { border-color: #111; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.pc-selected-color { margin-top: .65rem; font-size: .75rem; color: #746b65; }

.pc-mode-card {
  position: relative;
  flex: 1 1 180px;
  gap: .75rem;
  min-height: 68px;
  padding: .7rem;
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 14px;
  cursor: pointer;
}

.pc-mode-card input,
.pc-logo-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pc-mode-card.is-selected { border-color: #171717; background: #faf8f5; box-shadow: inset 0 0 0 1px #171717; }
.pc-mode-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; background: #eee9e3; font-family: "Outfit", sans-serif; font-weight: 700; }
.pc-mode-card strong, .pc-mode-card small { display: block; }
.pc-mode-card strong { font-size: .8rem; }
.pc-mode-card small { margin-top: .1rem; color: #7a716b; font-size: .65rem; }

.pc-logo-choice {
  position: relative;
  width: 88px;
  padding: .55rem;
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 13px;
  text-align: center;
  cursor: pointer;
}

.pc-logo-choice img {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: .35rem;
  padding: 4px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 8px;
  background: linear-gradient(90deg, #25272a 0 50%, #f1f1ee 50% 100%);
  object-fit: contain;
}
.pc-logo-choice span { display: block; overflow: hidden; font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pc-logo-choice small { display:block; margin-top:.15rem; color:#857c75; font-size:.52rem; }
.pc-logo-choice.is-selected { border-color: #171717; box-shadow: inset 0 0 0 1px #171717; }
.pc-logo-choice.is-unavailable { cursor:not-allowed; opacity:.48; filter:grayscale(1); }
.pc-logo-choice.is-unavailable small { color:#a63b2b; }
.pc-ink-choices{display:flex;flex-wrap:wrap;gap:.45rem}.pc-ink-choice{display:flex;align-items:center;gap:.35rem;padding:.42rem .65rem;border:1px solid #ddd;border-radius:999px;background:#fff;font-size:.72rem;font-weight:800;transition:border-color .18s ease,box-shadow .18s ease}.pc-ink-choice.is-selected{border-color:#171717;box-shadow:0 0 0 2px #171717}.pc-ink-choice.is-unavailable{cursor:not-allowed;opacity:.45;filter:grayscale(1)}.pc-ink-dot{display:inline-block;width:14px;height:14px;border:1px solid rgba(0,0,0,.2);border-radius:50%}.pc-ink-dot--white{background:#fff}.pc-ink-dot--black{background:#111}
.pc-stock-status{margin:1rem 0 0;padding:.7rem .85rem;border:1px solid #d9d9d6;border-radius:12px;background:#f8f8f6;font-size:.8rem;font-weight:700}.pc-stock-status.is-warning{border-color:#e2ae7b;background:#fff4e9;color:#8a3c0d}
.pc-logo-choice.is-hidden { display: none; }
.pc-logo-search-wrap { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
.pc-logo-search-wrap input { max-width:390px; }
.pc-logo-search-wrap small { color:#746b65; white-space:nowrap; }
.pc-logo-list { max-height:320px; overflow:auto; padding:3px; scrollbar-width:thin; }

.pc-selection-preview {
  display: flex;
  min-height: 78px;
  margin-top: .65rem;
  padding: .55rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.09);
  border-radius: 12px;
  background: linear-gradient(90deg, #25272a 0 50%, #f1f1ee 50% 100%);
}

.pc-selection-preview img {
  display: block;
  width: 100%;
  max-width: 430px;
  height: 62px;
  object-fit: contain;
}

.pc-live-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1800;
  width: min(420px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: #18191b;
  box-shadow: 0 20px 55px rgba(0,0,0,.38);
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}

.pc-live-dock.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.pc-live-dock-head {
  display: flex;
  padding: .65rem .8rem .35rem;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: .72rem;
}

.pc-live-dock-head button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
}

.pc-live-dock-stage {
  padding: .75rem 1.35rem 1.3rem;
  background:
    radial-gradient(circle at 50% -30%, rgba(255,255,255,.22), transparent 52%),
    repeating-linear-gradient(125deg, transparent 0 5px, rgba(255,255,255,.025) 5px 6px);
}

.pc-live-dock-stage .pc-keychain {
  width: 82%;
  margin: 0 auto;
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.38));
}

.pc-text-input-wrap { position: relative; }
.pc-text-input-wrap input { height: 48px; padding-right: 4rem; border-radius: 13px; }
.pc-text-input-wrap > span { position: absolute; top: 50%; right: 1rem; color: #8a817b; font-size: .72rem; transform: translateY(-50%); }

@media (max-width: 575.98px) {
  .pc-configurator { padding: 1rem; border-radius: 20px; }
  .pc-heading { align-items: flex-start; }
  .pc-step-badge { display: none; }
  .pc-preview-card { padding: 2.6rem 1rem .9rem; }
  .pc-keychain { width: 85%; }
  .pc-preview-card .pc-text-zone > span { font-size: clamp(.36rem, 2.5vw, .7rem); }
  .pc-live-dock { right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .pc-live-dock-stage { padding: .6rem 1rem 1rem; }
}