svg {
  filter: drop-shadow(2px 2px 3px black);
  transition: transform 0.3s ease, background 0.2s, color 0.2s, box-shadow 0.2s;
}
svg:hover {
  transform: scale(1.05);
}
svg:hover .cls-led {
  fill: white;
  filter: drop-shadow(0 0 0.5px white);
}
svg:hover .cls-product-frame {
  filter: drop-shadow(0 0 0.5px #A6C8D0) drop-shadow(0 0 0.5px #A6C8D0);
  stroke-width: 0.1px;
  stroke: white;
}

.desc-box {
  font-family: Arial, sans-serif;
  font-size: 5px;
  color: white;
  padding: 4px;
  text-align: justify;
  line-height: 1.2;
}

.metal-light {
  fill: #0F0F0F;
}

.metal-dark {
  fill: #0F0F0F;
}

.btn-geom {
  position: relative;
  display: inline-block;
  padding: 8px 18px;
  color: #fff;
  font-weight: 500;
  background: #222;
  border: none;
  cursor: pointer;
  clip-path: polygon(92% 100%, 0% 100%, 0% 26%, 7% 0%, 100% 0%, 100% 74%);
  transition: 0.2s;
  user-select: none;
  text-transform: uppercase;
  margin: 0.5rem;
  transition: transform 0.3s ease, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn-geom:hover {
  background: #FAFCFF;
  color: black;
  transform: scale(1.1);
}
.btn-geom.active {
  background: white;
  color: black;
}
.btn-geom:focus {
  outline: none;
}

foreignObject h2 {
  font-size: 0.8rem;
  text-align: center;
}

.cls-icon {
  cursor: pointer;
  fill: #fff;
}

.cls-photo {
  clip-path: url(#clippath);
}
.cls-photo image {
  width: 100%;
  height: auto;
  transform-origin: center center;
  transform-box: fill-box;
  transition: transform 0.4s ease;
}
.cls-photo:hover image {
  transform: scale(1.1);
}

.cls-photo-bg {
  fill: #fff;
}

.cls-title-text {
  fill: #fff;
  font-family: ArialMT, Arial;
  font-size: 10.373px;
}

.cls-tag {
  fill: #e50b14;
  filter: drop-shadow(0px 0px 0.5px #e50b14);
}

.cls-product-frame {
  fill: #070707;
  filter: drop-shadow(0px 0px 0.5px black);
}

.cls-product-bg {
  fill: url(#Metal);
}

.cls-led {
  fill: #818383;
}

.cls-btndisabledback {
  fill: #535554;
}

.cls-btndisabledfront {
  fill: #3a3a3a;
}

.cls-btnback {
  fill: #535554;
}

.cls-btnfront {
  cursor: pointer;
  fill: #818383;
}

#BtnR:hover .cls-icon {
  fill: #1E1E1E;
}
#BtnR:hover .cls-btnfront {
  fill: White;
  filter: drop-shadow(0px 0px 0.5px white);
}
#BtnR:hover .cls-btnback {
  fill: #666666;
  filter: drop-shadow(0px 0px 0.5px white);
}
#BtnR:active .cls-btnfront {
  fill: #32E200;
  filter: drop-shadow(0px 0px 0.5px #32E200);
  transform: translateY(1px);
}
#BtnR:active .cls-icon {
  fill: #023302;
  transform: translateY(1px);
}
#BtnR:active .cls-btnback {
  fill: #057E2E;
  filter: drop-shadow(0px 0px 0.5px #32E200);
}

.cls-btn .cls-btndetail-text {
  fill: #FFFFFF;
  font-family: ArialMT, Arial;
  font-size: 6.655px;
  cursor: pointer;
  transform: translate(32.85px, 142.452px);
}
.cls-btn .cls-btndetailfront {
  fill: #393a39;
}
.cls-btn .cls-btndetailback {
  fill: #535554;
}
.cls-btn .cls-btndetail-frame {
  fill: #070707;
}
.cls-btn:hover .cls-btndetail-text {
  fill: #1E1E1E;
}
.cls-btn:hover .cls-btndetailfront {
  fill: #FFFFFF;
  filter: drop-shadow(0 0 0.5px white);
}
.cls-btn:hover .cls-btndetailback {
  fill: #999999;
  filter: drop-shadow(0 0 0.5px #999999);
}
.cls-btn:active .cls-btndetailfront {
  fill: #32E200;
  filter: drop-shadow(0px 0px 0.5px #32E200);
  transform: translateY(1px);
}
.cls-btn:active .cls-btndetail-text {
  fill: #023302 !important;
  transform: translate(32.85px, 143.452px);
}

.cls-photo-frame {
  fill: none;
}

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