:root{
   --zopeco-badge-width: 3cqw;
   --zopeco-badge-width-rectangle: 4cqw;
   --zopeco-badge-height-rectangle: 2.3cqw;

   --zopeco-badge-font-size-small:22cqw;
   --zopeco-badge-font-size-medium:25cqw;
   --zopeco-badge-font-size-large:33cqw;
}
:root .amount{
   --zopeco-badge-width: 4cqw;
   --zopeco-badge-width-rectangle: 4cqw;
   --zopeco-badge-height-rectangle: 2.3cqw;

   --zopeco-badge-font-size-small:14cqw;
   --zopeco-badge-font-size-medium:16cqw;
   --zopeco-badge-font-size-large:19cqw;
}

.zopeco-banner{ margin-bottom:15px; }

.wishlist.wishlist_btn_top{ display:none; }
.zopeco-labels{ margin-bottom:10px; text-align:left; }
body#product .zopeco-labels{ margin-bottom:15px; }
.zopeco-label{ display:none; font-size:13px; line-height:13px; font-weight: 600;letter-spacing:-0.001rem;padding:3px 6px; margin-right:5px; background:#000000; color:#ffffff; border:solid 1px #000000; border-radius:3px; user-select:none; }
.zopeco-label .icon{ margin:0 4px 0 -2px; float:left; }
.zopeco-label .img{ margin:0 4px 0 -2px; float:left; height:12px; }

.zopeco-badges{ position:absolute; width:100%; top:0; left:0; z-index:900; user-select:none; }
.zopeco-badge{ position:absolute; margin:1cqw; background:#000000; container-type:size; user-select:none; transition:all 0.3s; background-position:center; background-size:contain; background-repeat:no-repeat; }
.zopeco-badge .text{ position:absolute; top:50%; left:50%; color:#ffffff; font-weight:bold; transform:translate(-50%, -50%); resize:both; font-size:30cqw; }
.zopeco-badge .text.small{ font-size:var(--zopeco-badge-font-size-small); }
.zopeco-badge .text.medium{ font-size:var(--zopeco-badge-font-size-medium); }
.zopeco-badge .text.large{ font-size:var(--zopeco-badge-font-size-large); }
.zopeco-badge .text small{ padding-left:1cqw; font-weight:inherit; }
.zopeco-badge.circle{ width:var(--zopeco-badge-width); height:var(--zopeco-badge-width);min-width:55px;min-height:55px; border-radius:50%; }
/* .zopeco-badge.circle{background-size: 50px 12px} */
.zopeco-badge.circle-wavy{ width:var(--zopeco-badge-width); height:var(--zopeco-badge-width); --s:var(--zopeco-badge-width); }
.zopeco-badge.square{ width:var(--zopeco-badge-width); height:var(--zopeco-badge-width); border-radius:0; }
.zopeco-badge.square-rounded{ width:var(--zopeco-badge-width); height:var(--zopeco-badge-width); border-radius:calc(var(--zopeco-badge-width) / 2); }
.zopeco-badge.rectangle{ width:var(--zopeco-badge-width-rectangle); height:var(--zopeco-badge-height-rectangle); border-radius:0%; }
.zopeco-badge.rectangle-rounded{ width:var(--zopeco-badge-width-rectangle); height:var(--zopeco-badge-height-rectangle); border-radius:calc(var(--zopeco-badge-height) / 2); }
.zopeco-badge.rectangle-circled{ width:var(--zopeco-badge-width-rectangle); height:var(--zopeco-badge-height-rectangle); border-radius:calc(var(--zopeco-badge-height-rectangle) / 2); }
.zopeco-badge.square-wavy,
.zopeco-badge.rectangle-wavy{ --s:0.2cqw; --w:var(--zopeco-badge-width); --h:var(--zopeco-badge-width); }
.zopeco-badge.rectangle-wavy{ --h:var(--zopeco-badge-height-rectangle); --w:var(--zopeco-badge-width-rectangle); }

.circle-wavy{ width:var(--s); aspect-ratio:1; --g:/calc(var(--s)*0.131) calc(var(--s)*0.131) radial-gradient(50% 50%,#000 99%,#0000 101%) no-repeat; mask: calc(50% + var(--s)*0.414) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*0.359) calc(50% + var(--s)*0.207) var(--g),calc(50% + var(--s)*0.207) calc(50% + var(--s)*0.359) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*0.414) var(--g),calc(50% + var(--s)*-0.207) calc(50% + var(--s)*0.359) var(--g),calc(50% + var(--s)*-0.359) calc(50% + var(--s)*0.207) var(--g),calc(50% + var(--s)*-0.414) calc(50% + var(--s)*0) var(--g),calc(50% + var(--s)*-0.359) calc(50% + var(--s)*-0.207) var(--g),calc(50% + var(--s)*-0.207) calc(50% + var(--s)*-0.359) var(--g),calc(50% + var(--s)*0) calc(50% + var(--s)*-0.414) var(--g),calc(50% + var(--s)*0.207) calc(50% + var(--s)*-0.359) var(--g),calc(50% + var(--s)*0.359) calc(50% + var(--s)*-0.207) var(--g),radial-gradient(calc(var(--s)*0.441),#000 99%,#0000 101%) subtract,calc(50% + var(--s)*0.458) calc(50% + var(--s)*0.123) var(--g),calc(50% + var(--s)*0.336) calc(50% + var(--s)*0.336) var(--g),calc(50% + var(--s)*0.123) calc(50% + var(--s)*0.458) var(--g),calc(50% + var(--s)*-0.123) calc(50% + var(--s)*0.458) var(--g),calc(50% + var(--s)*-0.336) calc(50% + var(--s)*0.336) var(--g),calc(50% + var(--s)*-0.458) calc(50% + var(--s)*0.123) var(--g),calc(50% + var(--s)*-0.458) calc(50% + var(--s)*-0.123) var(--g),calc(50% + var(--s)*-0.336) calc(50% + var(--s)*-0.336) var(--g),calc(50% + var(--s)*-0.123) calc(50% + var(--s)*-0.458) var(--g),calc(50% + var(--s)*0.123) calc(50% + var(--s)*-0.458) var(--g),calc(50% + var(--s)*0.336) calc(50% + var(--s)*-0.336) var(--g),calc(50% + var(--s)*0.458) calc(50% + var(--s)*-0.123) var(--g); }
.square-wavy,
.rectangle-wavy{ width: round(var(--w),4*var(--s)); height: round(var(--h),4*var(--s)); padding: var(--s); border: var(--s) solid #0000; box-sizing: border-box; border-radius: calc(3.5*var(--s)); mask: radial-gradient(calc(sqrt(2)*var(--s)),#000 calc(100% - 1px),#0000), conic-gradient(#000 0 0) content-box, radial-gradient(calc(sqrt(2)*var(--s)),#0000 100%,#000 calc(100% + 1px)) var(--s) var(--s) padding-box; mask-size: calc(var(--s)*4) calc(var(--s)*4); }

.pointer{ cursor:pointer; }

@media (min-width:769px){
   .zopeco-label:nth-child(1),
   .zopeco-label:nth-child(2),
   body#product .zopeco-label:nth-child(3),
   body#product .zopeco-label:nth-child(3){ display:inline-block; }
   body#product .product-container .zopeco-label{ font-size:15px; line-height:15px; padding:4px 8px; }
}

@media (max-width:768px){
   :root{
      --zopeco-badge-width: 12cqw;
      --zopeco-badge-width-rectangle: 12.6cqw;
      --zopeco-badge-height-rectangle: 7.8cqw;
   }

   .zopeco-label:nth-child(1){ display:inline-block; }
   body#product .zopeco-label:nth-child(2),
   body#product .zopeco-label:nth-child(3){ display:inline-block; }

   .zopeco-badge{ margin:2.5cqw; }
   .zopeco-badge.square-wavy,
   .zopeco-badge.rectangle-wavy{ --s:0.6cqw; }
   
   .zopeco-label{ font-size:12px; line-height:11px; }
   .zopeco-labels{ margin:5px 0; text-align:left; }
}

/* STICKERS */
.zopeco-stickers{position: absolute;z-index: 1;right:10px;top:10px}
.zopeco-stickers img{width: 55px}
.product-miniature .zopeco-labels{position: absolute;}
#product .page-content .zopeco-stickers{right:0px;top:-15px}
#product .page-content .zopeco-stickers img{width: 85px}
@media(max-width:767px){
  .zopeco-stickers img{width: 50px}
  #category .zopeco-stickers{top:5px;right:5px}
  #product .products .zopeco-stickers img{width: 50px}
}
