body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .stage > .productPhotoWrap {
  width: min(96%, 1040px);
}

/* Keep the single-side Charging Pad views faithful to their 1600 x 600 source
   images. The editor previously forced them into the taller canvas height. */
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-front,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-back,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-front,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-back {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 8 / 3 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-front .blankProduct,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-back .blankProduct,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-front .chargingMatProofProduct,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-back .chargingMatProofProduct {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .stage > .productPhotoWrap > img.productPhoto {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
}

/* The charging mat uses one combined front-and-back image for Both. Override
   the site's two-preview grid so that single combined image fills the entire
   product-media column instead of occupying only its first half. */
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productBothViews {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productBothViews > .stage {
  width: 100% !important;
  min-width: 0 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productBothViews .productPhotoWrap {
  width: min(98%, 1120px) !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productBothViews .productPhoto {
  max-height: 660px !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery button {
  min-width: 0;
  height: 104px;
  padding: 6px;
  overflow: hidden;
  background: rgba(7, 24, 39, 0.72);
  border: 1px solid rgba(138, 195, 216, 0.42);
  cursor: pointer;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery button:hover,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery button:focus-visible,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery button.active {
  border-color: #b7ff29;
  box-shadow: 0 0 0 2px rgba(183, 255, 41, 0.24);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers button {
  min-height: 118px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  text-align: left;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers button > b {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers button > span {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers button > small {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .discountAmount {
  color: #071827;
  background: #b7ff29;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .basePrice {
  color: #9fb3bf;
  background: rgba(159, 179, 191, 0.12);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .customCanvas {
  aspect-ratio: 8 / 3;
  min-height: 330px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .customCanvas .blankProduct {
  position: absolute !important;
  inset: 6% 3% 8% !important;
  width: 94% !important;
  height: 86% !important;
  object-fit: contain !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFrontCanvas .printBoundary {
  position: absolute !important;
  left: 29.1% !important;
  top: 55.1% !important;
  width: 9.2% !important;
  height: 25.8% !important;
  border: 2px dotted #b7ff29 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatBackCanvas .printBoundary {
  position: absolute !important;
  left: 63% !important;
  top: 55.1% !important;
  width: 9.2% !important;
  height: 25.8% !important;
  border: 2px dotted #b7ff29 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas {
  aspect-ratio: 1591 / 989 !important;
  min-height: 0 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-front,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.chargingMatMode-back {
  aspect-ratio: 8 / 3 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas .blankProduct {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}

/* The clean white source is opaque. Reuse the verified black template's alpha
   silhouette so the white product stays intact without a visible background. */
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas .blankProduct[src*="white-design-template-v50.png"],
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof .chargingMatProofProduct[src*="white-design-template-v50.png"] {
  -webkit-mask-image: url("/products/wireless-charging-mat/black-design-template-v46.png");
  mask-image: url("/products/wireless-charging-mat/black-design-template-v46.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary {
  position: absolute;
  z-index: 2;
  width: 9.2%;
  border: 2px dotted #b7ff29;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary.upperLeft {
  left: 9.7468%;
  top: 9.2462%;
  width: 17.6582%;
  height: 27.9397%;
  border-radius: 50%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary.upperRight {
  left: 74.8734%;
  top: 9.2462%;
  width: 17.6582%;
  height: 27.9397%;
  border-radius: 50%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary.lowerLeft {
  left: 9.5570%;
  top: 56.9849%;
  width: 17.8481%;
  height: 30.2513%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary.lowerRight {
  left: 74.8734%;
  top: 56.7839%;
  width: 17.8481%;
  height: 30.2513%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-front .chargingMatCornerBoundary.upperLeft,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-front .chargingMatCornerBoundary.upperRight {
  top: 18.4924%;
  height: 55.8794%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-back .chargingMatCornerBoundary.lowerLeft {
  top: 13.9698%;
  height: 60.5026%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-back .chargingMatCornerBoundary.lowerRight {
  top: 13.5678%;
  height: 60.5026%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerBoundary > span {
  display: none;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatCornerArtwork {
  z-index: 4;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot {
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(138, 195, 216, 0.42);
  background: rgba(3, 17, 29, 0.58);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot:hover,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot:focus-within {
  border-color: #b7ff29;
  box-shadow: 0 0 0 2px rgba(183, 255, 41, 0.18);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot > span {
  color: #b7ff29;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot > b {
  font-size: 0.98rem;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadSlot > small {
  color: #9fb3bf;
  line-height: 1.35;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadButton {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(183, 255, 41, 0.55);
  color: #f7fbff;
  background: rgba(6, 25, 40, 0.88);
  font-weight: 800;
  text-align: left;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatColorChoice {
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(138, 195, 216, 0.25);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatColorChoice > span {
  grid-column: 1 / -1;
  color: #b7ff29;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatColorPicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatColorPicker input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid #b7ff29;
  background: #061928;
  cursor: pointer;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatColorPicker output {
  color: #f7fbff;
  font-size: 0.72rem;
  font-weight: 800;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatOriginalColor {
  padding: 8px 9px;
  border: 1px solid rgba(138, 195, 216, 0.42);
  color: #c9d8e1;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 800;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatOriginalColor.active {
  border-color: #b7ff29;
  color: #071827;
  background: #b7ff29;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatTintedArtwork {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--art-color, #111111);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatArtworkPanel > .artworkHelpLink,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatArtworkPanel > .artActionRow,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatArtworkPanel > .backgroundHelp,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatArtworkPanel > .backgroundMessage,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatArtworkPanel > .controlLabel,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatLegacyPlacement {
  display: none !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof {
  position: relative;
  width: 100%;
  aspect-ratio: 1591 / 989;
  overflow: hidden;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-front,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneProof.chargingMatMode-back {
  aspect-ratio: 8 / 3;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatProofProduct {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatProofArtwork {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  height: auto;
  object-fit: contain;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .customCanvas .placedDesign > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .approvalScene .approvalShirt {
  width: 96% !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .productChargingMatGallery button {
    height: 82px;
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers {
    grid-template-columns: 1fr;
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatPricing .tiers button {
    min-height: 96px;
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .customCanvas {
    min-height: 220px;
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas {
    min-height: 0 !important;
  }

  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatUploadGrid {
    grid-template-columns: 1fr;
  }
}

/* Single-side images have their own 1600 x 600 geometry. Keep each Design Lab
   boundary on the actual imprint surface instead of reusing doubled row values
   from the stacked Both template. */
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-front .chargingMatCornerBoundary.upperLeft {
  left: 9.5% !important;
  top: 26.67% !important;
  width: 17.25% !important;
  height: 46% !important;
  border-radius: 50% !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-front .chargingMatCornerBoundary.upperRight {
  left: 73.5% !important;
  top: 26.67% !important;
  width: 17.25% !important;
  height: 46% !important;
  border-radius: 50% !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-back .chargingMatCornerBoundary.lowerLeft {
  left: 9.557% !important;
  top: 26.2% !important;
  width: 17.8481% !important;
  height: 47.595% !important;
  border-radius: 0 !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.isDragTarget {
  outline: 4px solid #b7ff29;
  outline-offset: -4px;
  filter: drop-shadow(0 0 18px rgba(183, 255, 41, 0.45));
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatFourZoneCanvas.isDragTarget::after {
  content: "DROP IMAGE IN THE NEAREST ART ZONE";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 30;
  transform: translate(-50%, -50%);
  padding: 0.8rem 1rem;
  border: 2px solid #b7ff29;
  background: rgba(1, 15, 28, 0.92);
  color: #b7ff29;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatLogoColorPanel {
  display: grid;
  gap: 16px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatLogoColorPanel .logoColorIntro,
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatLogoColorPanel .logoColorHelp {
  margin: 0;
  color: #aebdcc;
  line-height: 1.5;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorControls {
  display: grid;
  gap: 14px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorControls label {
  display: grid;
  gap: 8px;
  color: #b7ff29;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorControls label > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorControls input[type="color"] {
  width: 64px;
  height: 48px;
  padding: 4px;
  border: 1px solid #b7ff29;
  background: #06192a;
  cursor: pointer;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorControls output {
  color: #f7fbff;
  font-family: monospace;
  font-size: 1rem;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorActions button {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #31556f;
  background: #06192a;
  color: #f7fbff;
  cursor: pointer;
  font-weight: 800;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorActions button.active {
  border-color: #b7ff29;
  background: #6d2cb2;
  color: #b7ff29;
}

@media (max-width: 560px) {
  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .logoColorActions {
    grid-template-columns: 1fr;
  }
}

/* Approval proof: automatically flip between the accurate Front and Back
   images while keeping every uploaded artwork layer attached to its face. */
body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingProof {
  width: 100%;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingViewport {
  width: 100%;
  aspect-ratio: 8 / 3;
  perspective: 1400px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingStage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingStage.showBack {
  transform: rotateY(180deg);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingFace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingBack {
  transform: rotateY(180deg);
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingFace .chargingMatFourZoneProof {
  width: 100% !important;
  height: 100% !important;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotationControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotationControls span {
  color: #b7ff29;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotationControls button {
  padding: 9px 14px;
  border: 1px solid rgba(183, 255, 41, 0.75);
  color: #f7fbff;
  background: rgba(6, 25, 40, 0.88);
  cursor: pointer;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatRotatingStage {
    transition: none;
  }
}

body[data-product="WIRELESS CHARGING MAT 3-IN-1"] .chargingMatMode-back .chargingMatCornerBoundary.lowerRight {
  left: 74.8734% !important;
  top: 26.2% !important;
  width: 17.8481% !important;
  height: 47.595% !important;
  border-radius: 0 !important;
}