.bag {
    /*top:26px;*/
    background-image: url(/assets/icons/bag.svg);
    background-size: 66%;
    background-position: center center;
}
:root{
  --bagIconRadius:36px;
} 
.bag2 {
  width: var(--bagIconRadius);
  height: var(--bagIconRadius);
  position: relative;
}
.bag2.has-items .bag2-body {
  /*fill: #2E6BD3;*/
  /*stroke: #2E6BD3;*/
  fill: #000000;
  stroke: #000000;
  /*fill: var(--red);*/
  /*stroke: #f80000;*/
}
.bag2.has-items .bag2-handle {
  transform: rotateX(0);
  /*stroke: #2E6BD3;*/
  stroke: #000000;
}
.bag2.has-items #count {
  opacity: 1;
}
.bag2.has-items.many-items .bag2-body {
  transform: scaleX(1.14);
}
.bag2 svg {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translate3d(0, 0, 0);
  /*margin-top: 2px;*/
    margin-top:6px;

}
.bag2.has-items  svg {
  /*margin-top: 3px;*/
}

.bag2 svg .bag2-handle {
  stroke: black;
  stroke-width: 2px;
  transform: rotateX(180deg);
  transform-origin: 16px 8px;
  transition: all 0.4s ease;
}
.bag2 svg .bag2-body {
  fill: rgba(46, 107, 211, 0);
  /*fill: rgba(0, 0, 0, 0);*/
  stroke: black;
  stroke-width: 2;
  transition: all 0.2s ease;
  transform-origin: center;
}

#count {
  position: absolute;
  /*top: 12px;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);  */
  width: var(--bagIconRadius);
  text-align: center;
  font-size: 10px;
  font-family: inherit;
  font-weight: 800;
  line-height: 18px;
  opacity: 0;
  padding: 0;
}
.has-items #count{
  top: 12px;
  color: white;
  /*color: black;*/
  /*color: #f80000;*/
}
/* * /
.controls {
  width: 114px;
  position: fixed;
  bottom: 30px;
  display: flex;
  gap: 1px;
}
.controls button {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  background: #eee;
  border: 0;
  user-select: none;
  color: black;
}
.controls button#decrease-btn {
  border-radius: 8px 0 0 8px;
}
.controls button#increase-btn {
  border-radius: 0 8px 8px 0;
}
.controls #counter {
  width: 26px;
  padding: 0;
  height: 32px;
  border: none;
  appearance: none;
  background: #eee;
  border-radius: 0;
  text-align: center;
}
.count-animate {
  animation: slide-up 0.4s ease;
}
/* */

.bag2-animate {
  animation: bag-up 0.2s ease;
}

@keyframes slide-up {
  0% {
    transform: translateY(-120%) scale(1.2);
    opacity: 0;
  }
  50% {
    transform: translateY(2px) scale(0.8);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
@keyframes bag-up {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
.tile2x2{
  width:52px;
  height:52px;
}
.search-icon svg{
  width:16px;
  height:16px;
}

.padlock {
    /*width: 52px;*/
    /*height: 52px;*/
    background-image: url(/assets/tile/padlock.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    /*background-size: cover;*/
    /* cursor: grab; */
}

.pin-icon {
    width: 52px;
    height: 52px;
    background-image: url(/assets/icons/pin-icon.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64%;
    /* cursor: grab; */
}

.tablet-icon {
    width: 52px;
    height: 52px;
    background-image: url(/assets/icons/tablet-icon.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    /*background-size: cover;*/
    /* cursor: grab; */
}