/* Custom Enamel Pins: fixed 6 x 6 inch reference grid.
   This is a non-editable canvas background. Customer artwork remains above it. */
body[data-product="CUSTOM ENAMEL PINS"] .customCanvas {
  aspect-ratio: 1 / 1 !important;
  background-color: #000 !important;
  background-image: url("/assets/enamel-pin-6x6-neon-grid-20260830.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* A custom pin has no pre-existing blank product silhouette. */
body[data-product="CUSTOM ENAMEL PINS"] .customCanvas > .blankProduct {
  display: none !important;
}

/* Let customer art use the complete 6 x 6 reference area. */
body[data-product="CUSTOM ENAMEL PINS"] .customCanvas .printBoundary {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  pointer-events: none !important;
}

body[data-product="CUSTOM ENAMEL PINS"] .customCanvas .placedDesign {
  z-index: 3 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Use a square sizing boundary so the control can reach 4 inches in
   both width and height while preserving the artwork's proportions. */
body[data-product="CUSTOM ENAMEL PINS"] .customCanvas .placedDesign:has(> img) {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

body[data-product="CUSTOM ENAMEL PINS"] .customCanvas .placedDesign > img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

body[data-product="CUSTOM ENAMEL PINS"] .customCanvas .canvasLabel {
  z-index: 4 !important;
}