:root {
  --pcd-ink: #161616;
  --pcd-paper: #f5f1e8;
  --pcd-white: #fff;
  --pcd-line: #d8d3c9;
  --pcd-muted: #68655f;
  --pcd-yellow: #ffd447;
  --pcd-coral: #ff6b5f;
  --pcd-blue: #3559e0;
  --pcd-green: #2a8c68;
  --pcd-shadow: 0 18px 50px rgba(22, 22, 22, .13);
  --pcd-radius: 18px;
}

.pcd-configurator,
.pcd-designer-modal {
  color: var(--pcd-ink);
  font-family: inherit;
}

.pcd-configurator {
  margin: 2rem 0 1.4rem;
  border: 1px solid var(--pcd-line);
  border-radius: 24px;
  background: var(--pcd-white);
  overflow: hidden;
}

.pcd-configurator__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--pcd-paper);
  border-bottom: 1px solid var(--pcd-line);
}

.pcd-eyebrow,
.pcd-panel-title p {
  margin: 0 0 .35rem;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pcd-blue);
}

.pcd-configurator__heading h2,
.pcd-panel-title h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.pcd-live-price {
  flex: 0 0 auto;
  min-width: 132px;
  text-align: right;
}

.pcd-live-price span,
.pcd-live-price small {
  display: block;
  font-size: .74rem;
  color: var(--pcd-muted);
}

.pcd-live-price strong {
  display: block;
  margin: .12rem 0;
  font-size: 1.5rem;
  line-height: 1;
}

.pcd-option-groups,
.pcd-artwork {
  padding: 1.45rem 1.5rem;
}

.pcd-option-group,
.pcd-artwork {
  border: 0;
  margin: 0;
  min-width: 0;
}

.pcd-option-group + .pcd-option-group {
  margin-top: 1.55rem;
  padding-top: 1.55rem;
  border-top: 1px solid #ece8e0;
}

.pcd-option-group legend,
.pcd-artwork legend {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  margin: 0 0 .85rem;
  padding: 0;
  font-size: .94rem;
  line-height: 1.2;
  font-weight: 800;
}

.pcd-help {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--pcd-line);
  border-radius: 50%;
  background: var(--pcd-white);
  color: var(--pcd-muted);
  font-size: .72rem;
  line-height: 1;
  cursor: pointer;
}

.pcd-option-help {
  margin: -.35rem 0 .8rem;
  padding: .75rem .85rem;
  border-radius: 10px;
  background: #f5f7ff;
  color: #4d5578;
  font-size: .82rem;
}

.pcd-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.pcd-option-group--quantity .pcd-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pcd-choice {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.pcd-choice > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pcd-choice__body {
  display: block;
  min-height: 76px;
  padding: .85rem .9rem;
  border: 1px solid var(--pcd-line);
  border-radius: 13px;
  background: var(--pcd-white);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pcd-choice:hover .pcd-choice__body {
  transform: translateY(-1px);
  border-color: #9d9a94;
}

.pcd-choice > input:focus-visible + .pcd-choice__body {
  outline: 3px solid rgba(53, 89, 224, .25);
  outline-offset: 2px;
}

.pcd-choice > input:checked + .pcd-choice__body {
  border: 2px solid var(--pcd-blue);
  padding: calc(.85rem - 1px) calc(.9rem - 1px);
  box-shadow: 0 0 0 3px rgba(53, 89, 224, .10);
}

.pcd-choice.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.pcd-choice__top {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.pcd-choice__top strong {
  flex: 1;
  font-size: .87rem;
  line-height: 1.2;
}

.pcd-choice__top em {
  padding: .22rem .4rem;
  border-radius: 999px;
  background: var(--pcd-yellow);
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pcd-choice__body small {
  display: block;
  margin-top: .32rem;
  color: var(--pcd-muted);
  font-size: .73rem;
  line-height: 1.3;
}

.pcd-choice__price {
  display: block;
  margin-top: .55rem;
  color: var(--pcd-blue);
  font-size: .78rem;
  font-weight: 800;
}

.pcd-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 50%;
  background: var(--pcd-swatch);
}

.pcd-option-select {
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--pcd-line);
  border-radius: 11px;
  background: var(--pcd-white);
  color: var(--pcd-ink);
}

.pcd-artwork {
  border-top: 1px solid var(--pcd-line);
  background: #fbfaf7;
}

.pcd-artwork-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.pcd-artwork-grid > :only-child,
.pcd-artwork-grid > :first-child:nth-last-child(2),
.pcd-artwork-grid > :first-child:nth-last-child(2) ~ * {
  min-width: 0;
}

.pcd-artwork-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 170px;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--pcd-line);
  border-radius: 15px;
  background: var(--pcd-white);
  color: var(--pcd-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.pcd-artwork-card:hover {
  transform: translateY(-2px);
  border-color: var(--pcd-ink);
  box-shadow: 0 10px 28px rgba(22, 22, 22, .08);
}

.pcd-artwork-card.is-selected {
  border: 2px solid var(--pcd-blue);
  padding: calc(1rem - 1px);
  background: #f7f8ff;
  box-shadow: 0 0 0 3px rgba(53, 89, 224, .10);
}

.pcd-artwork-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: .85rem;
  border-radius: 11px;
  background: var(--pcd-paper);
  color: var(--pcd-blue);
  font-size: 1.15rem;
}

.pcd-artwork-card strong {
  font-size: .9rem;
}

.pcd-artwork-card small {
  margin: .25rem 0 .75rem;
  color: var(--pcd-muted);
  font-size: .72rem;
  line-height: 1.35;
}

.pcd-artwork-card > span:last-of-type {
  margin-top: auto;
  color: var(--pcd-blue);
  font-size: .76rem;
  font-weight: 800;
}

.pcd-artwork-status {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .8rem;
  padding: .8rem .9rem;
  border: 1px dashed var(--pcd-line);
  border-radius: 12px;
  background: var(--pcd-white);
}

.pcd-artwork-status.is-ready {
  border-style: solid;
  border-color: #99c7b5;
  background: #f3fbf7;
}

.pcd-artwork-status.is-loading {
  opacity: .68;
  pointer-events: none;
}

.pcd-artwork-status.has-error {
  animation: pcd-shake .35s ease;
  border-color: var(--pcd-coral);
  background: #fff5f3;
}

@keyframes pcd-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.pcd-artwork-status img {
  width: 52px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--pcd-line);
}

.pcd-status-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa59d;
}

.pcd-artwork-status.is-ready .pcd-status-dot {
  background: var(--pcd-green);
  box-shadow: 0 0 0 4px rgba(42, 140, 104, .14);
}

.pcd-artwork-status div {
  flex: 1;
  min-width: 0;
}

.pcd-artwork-status strong,
.pcd-artwork-status small {
  display: block;
}

.pcd-artwork-status strong { font-size: .8rem; }
.pcd-artwork-status small { margin-top: .12rem; color: var(--pcd-muted); font-size: .7rem; overflow-wrap: anywhere; }
.pcd-artwork-status button { border: 0; background: none; color: var(--pcd-blue); font-size: .75rem; font-weight: 800; cursor: pointer; }

.pcd-price-summary {
  padding: 1.15rem 1.5rem 1.35rem;
  border-top: 1px solid var(--pcd-line);
  background: var(--pcd-ink);
  color: var(--pcd-white);
}

.pcd-price-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pcd-price-summary span { font-size: .82rem; font-weight: 700; }
.pcd-price-summary strong { font-size: 1.45rem; }
.pcd-price-summary p { margin: .5rem 0 0; color: rgba(255,255,255,.65); font-size: .68rem; line-height: 1.4; }

.single_add_to_cart_button.pcd-needs-artwork {
  box-shadow: 0 0 0 3px rgba(255, 107, 95, .15);
}

body.pcd-designer-open { overflow: hidden; }

.pcd-designer-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  padding: 18px;
  background: rgba(12, 12, 12, .82);
  backdrop-filter: blur(9px);
}

.pcd-designer-modal[hidden] { display: none !important; }

.pcd-designer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1780px, 100%);
  height: calc(100vh - 36px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #ece9e2;
  box-shadow: 0 35px 120px rgba(0,0,0,.42);
}

.pcd-designer__header {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 10px 14px;
  border-bottom: 1px solid #d1ccc2;
  background: var(--pcd-white);
}

.pcd-designer__brand,
.pcd-designer__header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pcd-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--pcd-yellow);
  font-weight: 900;
}

.pcd-designer__brand strong,
.pcd-designer__brand small { display: block; }
.pcd-designer__brand strong { font-size: .9rem; }
.pcd-designer__brand small { margin-top: 2px; color: var(--pcd-muted); font-size: .65rem; }

.pcd-icon-button,
.pcd-secondary-button,
.pcd-primary-button {
  min-height: 38px;
  border-radius: 9px;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.pcd-icon-button {
  width: 38px;
  padding: 0;
  border: 1px solid var(--pcd-line);
  background: var(--pcd-white);
  font-size: 1.2rem;
}

.pcd-secondary-button { padding: 0 14px; border: 1px solid var(--pcd-line); background: var(--pcd-white); color: var(--pcd-ink); }
.pcd-primary-button { padding: 0 17px; border: 1px solid var(--pcd-ink); background: var(--pcd-ink); color: var(--pcd-white); }
.pcd-primary-button:hover { background: var(--pcd-blue); border-color: var(--pcd-blue); }

.pcd-designer__body {
  display: grid;
  grid-template-columns: 78px 280px minmax(420px, 1fr) 280px;
  min-height: 0;
  flex: 1;
}

.pcd-tool-rail {
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 6px;
  border-right: 1px solid #d8d3c9;
  background: var(--pcd-ink);
}

.pcd-tool-rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  padding: 7px 3px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.7);
  font: inherit;
  font-size: .61rem;
  cursor: pointer;
}

.pcd-tool-rail button span { font-size: 1.15rem; font-weight: 900; }
.pcd-tool-rail button:hover,
.pcd-tool-rail button.is-active { background: rgba(255,255,255,.12); color: var(--pcd-white); }

.pcd-tool-panel,
.pcd-properties {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #d8d3c9;
  background: var(--pcd-white);
}

.pcd-properties { border-right: 0; border-left: 1px solid #d8d3c9; }
.pcd-panel { display: none; padding: 17px; }
.pcd-panel.is-active { display: block; }

.pcd-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.pcd-panel-title > button {
  border: 0;
  background: none;
  color: var(--pcd-blue);
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}

.pcd-template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pcd-template-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pcd-line);
  border-radius: 11px;
  background: var(--pcd-white);
  color: var(--pcd-ink);
  text-align: left;
  cursor: pointer;
}

.pcd-template-card:hover { border-color: var(--pcd-blue); box-shadow: 0 6px 18px rgba(53,89,224,.13); }
.pcd-template-card > span:last-child { display: block; padding: 8px; }
.pcd-template-card strong,
.pcd-template-card small { display: block; }
.pcd-template-card strong { font-size: .67rem; }
.pcd-template-card small { margin-top: 2px; color: var(--pcd-muted); font-size: .56rem; }

.pcd-template-art {
  position: relative;
  display: block;
  aspect-ratio: 1.45;
  overflow: hidden;
  background: var(--c1);
}

.pcd-template-art i,
.pcd-template-art b,
.pcd-template-art em { position: absolute; display: block; }
.pcd-template-art i { width: 42%; aspect-ratio: 1; right: 8%; top: 10%; border-radius: 50%; background: var(--c2); }
.pcd-template-art b { width: 72%; height: 14%; left: 10%; bottom: 22%; background: var(--c3); }
.pcd-template-art em { width: 48%; height: 7%; left: 10%; bottom: 9%; background: #fff; opacity: .85; }

.pcd-add-text {
  display: block;
  width: 100%;
  margin-bottom: 9px;
  padding: 14px;
  border: 1px solid var(--pcd-line);
  border-radius: 10px;
  background: var(--pcd-white);
  color: var(--pcd-ink);
  text-align: left;
  cursor: pointer;
}
.pcd-add-text--headline { font-size: 1.25rem; font-weight: 900; }
.pcd-add-text--subhead { font-size: 1rem; font-weight: 700; }
.pcd-add-text--body { font-size: .78rem; }
.pcd-add-text:hover { border-color: var(--pcd-blue); }

.pcd-dropzone {
  display: grid;
  place-items: center;
  min-height: 175px;
  padding: 20px;
  border: 1.5px dashed #aaa69f;
  border-radius: 13px;
  background: var(--pcd-paper);
  text-align: center;
  cursor: pointer;
}
.pcd-dropzone span { font-size: 1.6rem; color: var(--pcd-blue); }
.pcd-dropzone strong { margin-top: 6px; font-size: .82rem; }
.pcd-dropzone small { margin-top: 4px; color: var(--pcd-muted); font-size: .63rem; }

.pcd-upload-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pcd-upload-list button { padding: 6px; overflow: hidden; border: 1px solid var(--pcd-line); border-radius: 8px; background: #fff; cursor: pointer; }
.pcd-upload-list img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #eee; }
.pcd-upload-list span { display: block; margin-top: 5px; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }

.pcd-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pcd-shape-grid button { display: grid; place-items: center; gap: 8px; min-height: 94px; padding: 8px; border: 1px solid var(--pcd-line); border-radius: 10px; background: #fff; font-size: .62rem; cursor: pointer; }
.pcd-shape-grid button:hover { border-color: var(--pcd-blue); }
.pcd-shape-grid span { display: block; width: 38px; height: 30px; background: var(--pcd-blue); }
.pcd-shape-grid .shape-circle { width: 34px; height: 34px; border-radius: 50%; }
.pcd-shape-grid .shape-line { width: 44px; height: 4px; border-radius: 4px; }

.pcd-color-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.pcd-color-presets button { aspect-ratio: 1; border: 1px solid rgba(0,0,0,.16); border-radius: 50%; background: var(--pcd-color); cursor: pointer; }
.pcd-color-presets button:hover { transform: scale(1.08); }

.pcd-layer-list { display: grid; gap: 6px; }
.pcd-layer-list button { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--pcd-line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.pcd-layer-list button.is-selected { border-color: var(--pcd-blue); background: #f5f7ff; }
.pcd-layer-list button > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--pcd-paper); font-weight: 900; }
.pcd-layer-list strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.pcd-layer-list small { color: var(--pcd-muted); font-size: .56rem; text-transform: uppercase; }
.pcd-layer-empty { color: var(--pcd-muted); font-size: .72rem; line-height: 1.45; }

.pcd-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #e5e2db;
}

.pcd-workspace-toolbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 6px 12px;
  border-bottom: 1px solid #d1ccc2;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}

.pcd-side-tabs,
.pcd-view-controls { display: flex; align-items: center; gap: 5px; }
.pcd-side-tabs button,
.pcd-view-controls button { min-height: 31px; padding: 0 11px; border: 1px solid var(--pcd-line); border-radius: 7px; background: #fff; color: var(--pcd-ink); font-size: .68rem; font-weight: 800; cursor: pointer; }
.pcd-side-tabs button.is-active { border-color: var(--pcd-ink); background: var(--pcd-ink); color: #fff; }
.pcd-view-controls label { margin-right: 8px; font-size: .66rem; }
.pcd-view-controls span { min-width: 42px; text-align: center; font-size: .65rem; font-weight: 800; }

.pcd-stage-scroller {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 45px;
  place-items: center;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.10) 1px, transparent 0);
  background-size: 22px 22px;
}

.pcd-stage-wrap {
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  box-shadow: 0 18px 55px rgba(28,26,22,.22);
  transition: width .15s ease, height .15s ease;
}

#pcd-canvas { display: block; touch-action: none; user-select: none; }
.pcd-svg-object { cursor: move; }
.pcd-resize-handle { cursor: nwse-resize; }

.pcd-guide-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border-top: 1px solid #d1ccc2;
  background: rgba(255,255,255,.75);
  color: var(--pcd-muted);
  font-size: .6rem;
}
.pcd-guide-legend span { display: inline-block; width: 19px; height: 0; border-top: 2px dashed; margin-left: 7px; }
.pcd-guide-bleed { border-color: #ff5a4f !important; }
.pcd-guide-trim { border-color: var(--pcd-blue) !important; border-top-style: solid !important; }
.pcd-guide-safe { border-color: var(--pcd-green) !important; }

.pcd-properties { padding: 17px; }
.pcd-properties-empty { display: grid; align-content: center; justify-items: center; min-height: 100%; padding: 30px 10px; text-align: center; }
.pcd-properties-empty span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--pcd-paper); color: var(--pcd-blue); font-size: 1.4rem; }
.pcd-properties-empty h3 { margin: 14px 0 5px; font-size: .9rem; }
.pcd-properties-empty p { margin: 0; max-width: 210px; color: var(--pcd-muted); font-size: .68rem; line-height: 1.45; }

.pcd-field { display: grid; gap: 5px; margin-bottom: 11px; color: #4f4d49; font-size: .63rem; font-weight: 800; }
.pcd-field input,
.pcd-field select,
.pcd-field textarea { width: 100%; min-height: 36px; margin: 0; padding: 7px 8px; border: 1px solid var(--pcd-line); border-radius: 7px; background: #fff; color: var(--pcd-ink); font: inherit; font-size: .72rem; font-weight: 500; }
.pcd-field input[type="color"] { padding: 3px; }
.pcd-field input[type="range"] { padding: 0; }
.pcd-two-fields,
.pcd-three-fields { display: grid; gap: 8px; }
.pcd-two-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pcd-three-fields { grid-template-columns: repeat(3, minmax(0,1fr)); }

.pcd-arrange-buttons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin-top: 5px; }
.pcd-arrange-buttons button,
.pcd-delete-button { min-height: 34px; padding: 6px; border: 1px solid var(--pcd-line); border-radius: 7px; background: #fff; color: var(--pcd-ink); font-size: .62rem; font-weight: 700; cursor: pointer; }
.pcd-arrange-buttons button:hover { border-color: var(--pcd-blue); color: var(--pcd-blue); }
.pcd-delete-button { width: 100%; margin-top: 8px; border-color: #f0b4ae; color: #b52f23; }

.pcd-saving-overlay {
  position: absolute;
  inset: 68px 0 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 13px;
  background: rgba(245,241,232,.90);
  backdrop-filter: blur(5px);
}
.pcd-saving-overlay[hidden] { display: none !important; }
.pcd-saving-overlay strong { font-size: .85rem; }
.pcd-spinner { width: 38px; height: 38px; border: 4px solid rgba(53,89,224,.18); border-top-color: var(--pcd-blue); border-radius: 50%; animation: pcd-spin .8s linear infinite; }
@keyframes pcd-spin { to { transform: rotate(360deg); } }

@media (max-width: 1250px) {
  .pcd-designer__body { grid-template-columns: 70px 245px minmax(380px,1fr) 250px; }
}

@media (max-width: 1000px) {
  .pcd-designer-modal { padding: 0; }
  .pcd-designer { width: 100%; height: 100vh; border-radius: 0; }
  .pcd-designer__body { grid-template-columns: 64px 235px minmax(360px,1fr); }
  .pcd-properties { position: absolute; z-index: 8; right: 0; top: 68px; bottom: 0; width: 270px; box-shadow: -12px 0 35px rgba(0,0,0,.13); transform: translateX(100%); transition: transform .2s ease; }
  .pcd-properties:has(.pcd-properties-form:not([hidden])) { transform: translateX(0); }
}

@media (max-width: 760px) {
  .pcd-configurator__heading { align-items: flex-start; }
  .pcd-choice-grid,
  .pcd-option-group--quantity .pcd-choice-grid { grid-template-columns: 1fr 1fr; }
  .pcd-artwork-grid { grid-template-columns: 1fr; }
  .pcd-artwork-card { min-height: 130px; }
  .pcd-designer__header { min-height: 58px; }
  .pcd-designer__brand small,
  .pcd-icon-button { display: none; }
  .pcd-secondary-button,
  .pcd-primary-button { padding: 0 10px; font-size: .67rem; }
  .pcd-designer__body { display: flex; flex-direction: column; padding-bottom: 62px; }
  .pcd-tool-rail { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6,1fr); padding: 5px; border: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .pcd-tool-rail button { min-height: 51px; font-size: .53rem; }
  .pcd-tool-rail button span { font-size: 1rem; }
  .pcd-tool-panel { position: absolute; z-index: 10; left: 0; right: 0; bottom: 61px; max-height: 43vh; border: 0; border-top: 1px solid var(--pcd-line); box-shadow: 0 -12px 32px rgba(0,0,0,.16); }
  .pcd-panel { padding: 13px; }
  .pcd-template-list { grid-template-columns: repeat(3,1fr); }
  .pcd-workspace { flex: 1; min-height: 0; }
  .pcd-stage-scroller { padding: 28px; }
  .pcd-properties { top: 58px; bottom: 61px; width: min(290px, 85vw); }
}

@media (max-width: 520px) {
  .pcd-configurator__heading { display: block; }
  .pcd-live-price { margin-top: .75rem; text-align: left; }
  .pcd-option-groups,
  .pcd-artwork { padding: 1.1rem; }
  .pcd-choice-grid,
  .pcd-option-group--quantity .pcd-choice-grid { grid-template-columns: 1fr; }
  .pcd-price-summary { padding-inline: 1.1rem; }
  .pcd-designer__brand div { display: none; }
  .pcd-template-list { grid-template-columns: repeat(2,1fr); }
  .pcd-view-controls label { display: none; }
  .pcd-workspace-toolbar { padding-inline: 7px; }
}