.dj-drawer-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition:opacity .2s ease;
      z-index:9998;
    }
    .dj-drawer{
      position:fixed; top:0; right:-110%;
      width:min(440px, 92vw); height:100vh;
      background:#fff; z-index:9999;
      transition:right .25s ease;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      padding:16px;
    }
    .dj-drawer.open{ right:0; }
    .dj-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
    body.drawer-open{ overflow:hidden; }

    @media (min-width: 768px){
      .hide-md-up{ display: none !important; }
    }
    .whiteButton{ background-color: #ffffff00!important; }
 
    .product-thumb{ min-height:260px; position:relative; }
    .decor{ position:absolute; inset:0; pointer-events:none; }
    .product-thumb::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius: 1rem;
      /*border: 1px solid rgba(255,255,255,.18);*/
      pointer-events:none;
      z-index:1;
    }
 
    .thumb-default{
      background: linear-gradient(135deg,#f4f4f4,#e5e5e5,#ffffff);
    }
    .thumb-default .decor-shine{
      background: radial-gradient(120% 80% at 20% 25%,
        rgba(255,255,255,.25) 0%,
        rgba(255,255,255,0) 65%);
      mix-blend-mode: screen;
      opacity:.9;
    }
 
    .thumb-renata{
      /*background: linear-gradient(132deg,#041c3a 0%,#1b355a 30%,#1f4fa3 60%,#0a2a55 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
                  inset 0 -12px 28px rgba(0,0,0,.28);*/

                  background:repeating-radial-gradient(circle at 20% 60%, rgb(255 255 255 / 0%) 0px, rgb(255 255 255 / 4%) 1px, transparent 1px, #00000000 10px), linear-gradient(132deg, #041c3a, #1b355a, #1f4fa3, #0a2a55);
    }
   /* .thumb-renata .decor-swirl{
      background: repeating-radial-gradient(circle at 20% 60%,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,.07) 1px,
        rgba(255,255,255,0) 7px,
        rgba(255,255,255,0) 13px);
      opacity:.9;
    }*/
   /* .thumb-renata .decor-shine{
      background: radial-gradient(120% 80% at 18% 22%,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,0) 65%);
      mix-blend-mode: screen;
      opacity:.9;
    }*/
 
    .thumb-energizer{
      background: linear-gradient(135deg,#fbfbfb 0%,#e9e9e9 18%,#ffffff 34%,#dcdcdc 55%,#f7f7f7 72%,#cfcfcf 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
                  inset 0 -12px 28px rgba(0,0,0,.18);
    }
   /* .thumb-energizer .decor-silver{
      background: radial-gradient(120% 80% at 40% 20%,
        rgba(255,255,255,.85) 0%,
        rgba(255,255,255,0) 58%);
    }*/
    .thumb-energizer .decor-ring{
      background: repeating-radial-gradient(circle at 58% 38%, rgb(0 0 0 / 6%) 0px, rgb(0 0 0 / 0%) 2px, rgb(255 255 255 / 0%) 7px, rgb(255 255 255 / 0%) 15px);
      opacity:.85;

     /* background:repeating-radial-gradient(circle at 20% 60%, 
        rgb(255 255 255 / 0%) 0px, 
        rgb(255 255 255 / 4%) 1px, 
        transparent 1px, #00000000 10px), linear-gradient(132deg, #041c3a, #1b355a, #1f4fa3, #0a2a55);*/
    }

    .thumb-energizer .decor-band{
      inset:auto;
      left:-30%; right:-30%; 
      transform: rotate(-14deg);
      top: 40%;
    height: 20%;
      background:
        repeating-linear-gradient(-12deg,
          rgba(255,255,255,.18) 0 14px,
          rgba(255,255,255,0) 14px 28px
        ),
        linear-gradient(180deg,#ff3a2f 0%,#d51310 60%,#b80f0e 100%);
      box-shadow: 0 10px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
      opacity:.95; 
      pointer-events:none;
      position:absolute;
    }
   /* .thumb-energizer .decor-badge{
      inset:auto;
      left:50%; top:72%;
      width:42px; height:42px;
      transform: translateX(-50%);
      border-radius:50%;
      background: radial-gradient(circle at 30% 30%,
        #fff 0%, #e7e7e7 35%, #bdbdbd 70%, #f3f3f3 100%);
      border:1px solid rgba(0,0,0,.25);
      box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
      opacity:.75;
      position:absolute;
      z-index:2;
    }*/

    .thumb-duracell{
      background: linear-gradient(135deg,#0b0b0b,#1d1d1d,#2a2a2a);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08),
                  inset 0 -12px 28px rgba(0,0,0,.35);
    }
    .thumb-duracell .decor-glow{
      background: radial-gradient(80% 60% at 20% 20%,
        rgba(244,180,0,.35) 0%, rgba(244,180,0,0) 70%);
      opacity:.9;
    }
   /* .thumb-duracell .decor-diag{
      inset:auto;
      left:-35%; right:-35%;
      top:52%; height:28%;
      transform: rotate(-12deg);
      background: linear-gradient(90deg,#f4b400 0%, #e53935 60%, rgba(255,255,255,0) 100%);
      opacity:.95;
      position:absolute;
      z-index:2;
    }*/
    .thumb-duracell .decor-cap{
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
      height:38%;
      opacity:.9;
    }

    .thumb-panasonic{
      background: linear-gradient(135deg,#003b8e,#005bbb,#0071d1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
                  inset 0 -12px 28px rgba(0,0,0,.22);
    }
    .thumb-panasonic .decor-wave{
      background:repeating-radial-gradient(circle at 20% 60%, rgb(255 255 255 / 0%) 0px, rgb(255 255 255 / 4%) 1px, transparent 1px, #00000000 10px), linear-gradient(132deg, #041c3a, #1b355a, #1f4fa3, #0a2a55);
      opacity:.75;
    }
    .thumb-panasonic .decor-shine{
      background: radial-gradient(120% 80% at 20% 25%,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,0) 65%);
      mix-blend-mode: screen;
      opacity:.9;
    }

    .thumb-kodak{
      background: linear-gradient(135deg,#ffcc00,#ffd84d,#fff0b3);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.20),
                  inset 0 -12px 28px rgba(0,0,0,.18);
    }
    .thumb-kodak .decor-kodak-block{
      position:absolute;
      left:-20%; right:-20%;
      top:55%; height:30%;
      transform: rotate(-12deg);
      background: linear-gradient(180deg,#ff2a2a,#cc0000);
      opacity:.92;
      z-index:2;
    }
    .thumb-kodak .decor-kodak-stripes{
      background: repeating-linear-gradient(135deg,
        rgba(0,0,0,.08) 0 10px,
        rgba(0,0,0,0) 10px 22px);
      opacity:.25;
    }

    .thumb-gp{
      background: linear-gradient(135deg,#0a7a3a,#10a64f,#46d17e);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
                  inset 0 -12px 28px rgba(0,0,0,.22);
    }
    .thumb-gp .decor-gp-diag{
      position:absolute;
      left:-35%; right:-35%;
      top:56%; height:28%;
      transform: rotate(-14deg);
      background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0));
      opacity:.55;
      z-index:2;
    }
    .thumb-gp .decor-gp-dots{
      background: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
      background-size: 14px 14px;
      opacity:.28;
    }