body {
  --gapB: 1rem;
  --gapG: 1rem;
  --cubeW: 35rem;
}

main [data-form],
main > *:not(.CSTMZR):not(.CSTMZD) {
  max-width: 40ch;
  margin-inline: auto;
}

.CSTMZD .cube {
  pointer-events: none;
  touch-action: none;
}

#cztmurly {
  font-size: small;
  direction: rtl;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-customizer] {
  width: clamp(19rem, 100%, 140rem);
  margin-inline: auto;
  margin-block: 10rem;
}

.CSTMZD[data-customizer] {
  width: 60rem;
}
.CSTMZD[data-customizer] > * {
  position: initial;
  translate: none;
  margin-block: 5rem;
}

[data-products] {
  width: fit-content;
  text-align: center;
  border: 1px solid white;
  border-radius: 1rem;
  padding: 0.5rem 2rem;
  background-color: var(--orange);
  color: var(--black);
}
[data-products] > div {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
[data-products] p {
  max-width: 12ch;
  font-size: 0.8em;
  margin-inline: auto;
  text-transform: uppercase;
}
[data-products] img {
  height: 11rem;
  max-width: initial;
  width: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
}
[data-products] button.texty {
  display: grid;
  height: 100%;
  align-content: space-between;
}
@media (any-hover: hover) {
  [data-products] img {
    transition: transform 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  [data-products] img:hover {
    transform: scale(1.15);
  }
}

[data-header] {
  font-size: 2em;
  margin-block: 0;
}
[data-header] > * {
  font: inherit;
  margin: 0;
}
[data-header] .price {
  padding-inline-start: 0.5em;
  vertical-align: middle;
}

div[data-ddd] {
  width: var(--cubeW);
}
div[data-ddd] .styly figure svg .svgfill {
  fill: var(--variant) !important;
}
div[data-ddd] .styly figure svg .svgline {
  fill: var(--variant2, #585857) !important;
}
div[data-ddd]:has(.movy) {
  z-index: 1;
}

[data-range] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
[data-range] span {
  font-size: small;
}
[data-range] input[type=range] {
  flex: 100%;
  color: inherit;
  background: transparent;
  background-image: linear-gradient(0, transparent calc(50% - 2px), currentColor 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: center;
  appearance: none;
  margin-block: 0.5rem;
  height: 1.5rem;
  border-inline: 1px solid;
  accent-color: currentColor;
  cursor: ew-resize;
}
[data-range] input[type=range]:active, [data-range] input[type=range]:focus-visible {
  accent-color: var(--white);
}

[data-variants] {
  overflow: scroll;
  width: 100%;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
[data-variants] > div {
  padding-block: 0.5rem;
  display: flex;
  gap: var(--gapy);
}
[data-variants] .Optiony {
  display: flex;
  gap: 0.4rem;
}
[data-variants] .Optiony > * {
  flex: 1;
  border-color: var(--white);
}
[data-variants] .Optiony [data-label] {
  padding: 1rem;
  max-width: none;
  text-wrap: nowrap;
}
[data-variants] [data-iscol=true] .Optiony {
  gap: 0;
}
[data-variants] [data-iscol=true] .Optiony > label {
  border: none;
  border-radius: 0;
  background-color: currentColor;
}
[data-variants] [data-iscol=true] .Optiony > label:first-of-type {
  border-left: none;
  border-top-left-radius: 0.8rem;
  border-end-start-radius: 0.8rem;
}
[data-variants] [data-iscol=true] .Optiony > label:last-of-type {
  border-top-right-radius: 0.8rem;
  border-end-end-radius: 0.8rem;
}
[data-variants] [data-iscol=true] .Optiony > label:has(input:checked) {
  box-shadow: 0 -0.5rem 0 0 currentColor, inset 0 -0.5rem 0 0 var(--black);
}
[data-variants] [data-iscol=true] .Optiony [data-label] {
  color: transparent;
  width: var(--gapy);
  white-space: nowrap;
}

[data-stickers] {
  border: 1px solid #aaa;
}
[data-stickers] > div {
  display: flex;
  gap: 5rem;
}
[data-stickers] p[x-html] {
  font-size: 0.8em;
}
[data-stickers] .gridyeasy {
  gap: 5rem;
}
[data-stickers] [data-icon-variant] {
  cursor: pointer;
  position: absolute;
  width: 3rem;
  height: 3rem;
  inset: auto -1rem -1rem auto;
  z-index: 1;
  background: linear-gradient(-45deg, var(--purple) 50%, transparent 50.1%, transparent);
  filter: drop-shadow(1px 1px 0px var(--white));
}
[data-stickers] .styly svg .svgfill {
  fill: var(--variant) !important;
}
[data-stickers] .styly svg .svgline {
  fill: var(--variant2, #585857) !important;
}

div[data-sku] {
  --fill: var(--fill, transparent);
  --width: var(--width, auto);
  --height: var(--height, fit-content);
  --x: var(--x, 0px);
  --y: var(--y, 0px);
  width: var(--width);
  height: var(--height);
  top: var(--y);
  left: var(--x);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: grid;
  grid-template-columns: var(--width) 1fr;
  gap: 0.5rem;
}

.CSTMZR div[data-sku] .wrapy {
  pointer-events: none;
  display: grid;
  grid-template-rows: max-content;
  gap: 0.5rem;
}
.CSTMZR div[data-sku].activy {
  z-index: 2;
}
.CSTMZR div[data-sku].activy .wrapy {
  pointer-events: initial;
}

[data-sku] svg, [data-sku] img {
  width: 100%;
  height: auto;
  pointer-events: none;
  vertical-align: middle;
}
[data-sku]:not(.activy):hover {
  outline: 1px dashed green;
}
[data-sku] svg:has(.svgfill) .svgfill {
  fill: var(--fill) !important;
}
[data-sku] svg:has(.svgline) .svgline {
  fill: var(--fill2) !important;
}
[data-sku] svg:has(:not(.svgfill)) path:not([class]) {
  fill: var(--fill) !important;
}

.cube {
  --ixy: var(--ixy, 0);
  --sizy: 1;
  --zeta: 17rem;
  transform-style: preserve-3d;
  transform: translateZ(0px) rotateY(var(--ixy)) scale(var(--sizy));
  transition: transform 0.5s linear;
  display: grid;
  grid-template-areas: "cube";
}
.cube > * {
  display: grid;
  grid-area: cube;
  backface-visibility: hidden;
}
.cube figure img,
.cube figure svg {
  width: 100%;
  height: var(--cubeW);
  object-fit: contain;
}
.cube svg.logos {
  width: 50%;
  height: auto;
  margin: auto;
}
.cube [data-sku] {
  position: absolute;
}

.face-front {
  transform: rotateY(0deg) translateZ(var(--zeta));
}
.face-right {
  transform: rotateY(90deg) translateZ(var(--zeta));
}
.face-back {
  transform: rotateY(180deg) translateZ(var(--zeta));
}
.face-left {
  transform: rotateY(-90deg) translateZ(var(--zeta));
}
.face-top {
  transform: rotateX(90deg) translateZ(var(--zeta));
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(var(--zeta));
}
.face-left, .face-right {
  box-shadow: inset 0 0 3em 2em black;
  background-image: conic-gradient(from 1.5708rad at 50% 50%, var(--orange) 0%, var(--purple) 24%, var(--yellow) 49%, var(--blue) 76%, var(--green) 100%);
}

.Draggy .cube [data-sku] {
  pointer-events: none;
}

[data-uploady] .del {
  position: absolute;
  inset: 1.9em 10rem;
  width: 3rem;
}

[data-sticker] {
  position: relative;
}
@media (any-hover: hover) {
  [data-sticker] figure span:first-of-type {
    transition: transform 150ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  [data-sticker]:hover figure span:first-of-type {
    transform: scale(1.15);
  }
}
[data-sticker] figure {
  cursor: grab;
  transition: transform 0.1s ease-out;
  position: relative;
  translate: var(--x, 0) var(--y, 0);
  touch-action: none;
}
[data-sticker] figure:not(.movy) {
  transition: translate 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), transform 0.1s ease-out;
}
[data-sticker] figure img,
[data-sticker] figure svg,
[data-sticker] figure > span:not(:empty) {
  pointer-events: none;
  height: 10rem;
  width: 10rem;
  object-fit: contain;
  max-width: none;
  display: block;
}
[data-sticker] figure.movy [data-icon-variant] {
  visibility: hidden;
}

.grabbing {
  cursor: grabbing;
}
.grabbing figure [x-show] {
  visibility: hidden;
}

.over {
  outline: 2px dotted green;
}

.dragy .cube figure > img {
  filter: drop-shadow(0rem 1rem 1rem var(--black)) drop-shadow(0rem 0rem 2rem var(--green));
  transition: filter 0.3s linear;
}
.dragy .cube.dropon figure > img {
  filter: none;
}

.toolcolor {
  position: absolute;
  z-index: 1;
  display: flex;
  right: -1rem;
  gap: 0.4rem;
  margin-block-start: 1.2rem;
  background: var(--purple);
  padding: 0.4rem;
}
.toolcolor input[type=radio] {
  position: absolute;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.toolcolor label {
  width: 6rem;
  height: 6rem;
  color: transparent;
  border: 0.1rem solid ghostwhite;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(27, 27, 27);
  outline: 3px solid transparent;
  outline-offset: -4px;
  position: relative;
}
.toolcolor .miniimg {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: clip;
  align-items: stretch;
  place-content: center;
}
.toolcolor .miniimg svg {
  width: 100%;
  height: auto;
}

.del,
.mov,
.btres {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  border: none;
  border-radius: 1rem;
}
@media (min-width: 80em) {
  .del,
  .mov,
  .btres {
    width: 4rem;
    height: 4rem;
  }
}

.del {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M37 0a3 3 0 0 1 3 3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0h40v40H0z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23E7F500' stroke-miterlimit='10' stroke-width='3' d='M11.841 11.841 28.16 28.16M11.841 28.159 28.16 11.84'/%3E%3C/svg%3E");
}

.mov {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M37 0a3 3 0 0 1 3 3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0h40v40H0z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%2300F7E8' stroke-miterlimit='10' stroke-width='2' d='M8.462 20h23.076M12.321 15.5 7.68 19.825 12.32 24.5M27.679 15.5l4.642 4.325L27.68 24.5M20 31.538V8.462M15.5 27.679l4.325 4.642L24.5 27.68M15.5 12.321l4.325-4.642L24.5 12.32'/%3E%3C/svg%3E");
  cursor: grab;
}

.btres {
  align-self: end;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M37 0a3 3 0 0 1 3 3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-5.5L31.319 0z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0h40v40H0z'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23FFF' stroke-miterlimit='10' stroke-width='3' d='M10.659 32.66 32.319 10M18.5 32.5l14-14M26.5 32.5l6-6'/%3E%3C/svg%3E");
}

.resizy {
  background: none;
  background-image: linear-gradient(-45deg, var(--green), var(--green) 3px, #000 4px, #000 5px, var(--green) 5px, var(--green) 6px, #000 7px, #000 8px, var(--green) 8px, var(--green) 9px, transparent 10px);
  border: none;
  position: fixed;
  padding: 0;
  width: auto;
  resize: horizontal;
}

.movy .del,
.movy .resizy,
.movy .btres {
  opacity: 0;
}

#customFile input[type=file] {
  clip-path: inset(100%);
  position: absolute;
  width: 0;
}
#customFile label {
  aspect-ratio: 1/1;
  background-color: var(--purple);
  color: var(--black);
  min-width: 10rem;
  display: grid;
  place-content: center;
  text-align: center;
  cursor: copy;
}

[data-btn] {
  justify-self: end;
}

@media (max-width: 62.5em) {
  .Cstm > main {
    padding-inline: var(--gapB);
  }
  [data-customizer] {
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-customizer] > * {
    margin-block: 2rem;
  }
  [data-products],
  [data-header],
  div[data-ddd],
  [data-range],
  [data-variants],
  [data-btn] {
    position: sticky;
    inset: auto 0;
  }
  [data-header],
  [data-btn] {
    width: fit-content;
  }
  [data-products] > div {
    flex-direction: row;
    width: fit-content;
  }
  div[data-ddd],
  [data-range] {
    width: var(--cubeW);
    inset: auto calc(50vw - (var(--cubeW) + var(--gapB)) / 2);
  }
  [data-stickers] {
    width: fit-content;
    padding: 2rem 5rem;
    background: repeating-linear-gradient(90deg, #202020, #202020 10rem, #aaa 10rem, #aaa 10.1rem);
  }
  [data-stickers] .gridyeasy {
    grid-auto-flow: column;
  }
}
@media (min-width: 62.501em) {
  body {
    --cubeW: 55rem;
  }
  .CSTMZR [data-customizer] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    justify-items: center;
    gap: var(--gapG);
  }
  [data-stickers] > div {
    flex-direction: column;
  }
  [data-products],
  [data-header],
  [data-ddd],
  [data-range] {
    position: sticky;
    top: 1rem;
  }
  [data-products] {
    top: 6rem;
    grid-column: 1;
    grid-row: 1/7;
  }
  [data-stickers] {
    grid-column: 3;
    grid-row: 1/7;
    padding: 7rem 3rem;
    background: repeating-linear-gradient(0deg, #202020, #202020 10rem, #aaa 10rem, #aaa 10.1rem);
  }
  [data-variants],
  [data-btn] {
    grid-column: 2;
    position: sticky;
  }
  div[data-ddd] {
    top: calc(2em + var(--gapG));
    margin-block: 1rem;
  }
  [data-range] {
    top: 100%;
    translate: 0 -400%;
  }
  [data-variants] {
    top: 100%;
    translate: 0 -200%;
  }
  [data-btn] {
    top: 100%;
    translate: 0 -100%;
  }
  section[data-type] {
    display: flex;
    gap: 2rem;
  }
}

/*# sourceMappingURL=customizer.css.map */