/* =========================
   RESET
========================= */

.qp-type,
.qp-type *{
  box-sizing:border-box;
}


/* =========================
   BASE
========================= */

.qp-type{
  position:relative;
  width:100%;
  padding:58px 0 62px;
  background:#fff;

  font-family:
    "Muli-Regular",
    "Muli",
    Arial,
    sans-serif;

  color:#151515;

  overflow:hidden;
  isolation:isolate;
}


.qp-type__in{
  position:relative;
  z-index:2;

  width:calc(100% - 36px);
  max-width:1440px;

  margin:0 auto;
}


/* =========================
   DOT FIELD
========================= */

.qp-type__glow{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;

  z-index:8;
  opacity:0;

  background-image:
    radial-gradient(
      circle,
      rgba(0,114,231,.16) 1px,
      transparent 1.25px
    );

  background-size:22px 22px;


  -webkit-mask-image:
    radial-gradient(
      circle 170px
      at var(--dot-x,50%) var(--dot-y,50%),

      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.45) 42%,
      rgba(0,0,0,.25) 64%,
      rgba(0,0,0,.10) 78%,
      rgba(0,0,0,.025) 90%,
      transparent 100%
    );


  mask-image:
    radial-gradient(
      circle 170px
      at var(--dot-x,50%) var(--dot-y,50%),

      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.45) 42%,
      rgba(0,0,0,.25) 64%,
      rgba(0,0,0,.10) 78%,
      rgba(0,0,0,.025) 90%,
      transparent 100%
    );

  transition:opacity .16s ease;
}


.qp-type__glow::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    radial-gradient(
      circle,
      rgba(0,114,231,.22) 1px,
      transparent 1.25px
    );

  background-size:12px 12px;


  -webkit-mask-image:
    radial-gradient(
      circle 115px
      at var(--dot-x,50%) var(--dot-y,50%),

      #000 0%,
      rgba(0,0,0,.92) 42%,
      rgba(0,0,0,.55) 62%,
      rgba(0,0,0,.22) 76%,
      rgba(0,0,0,.05) 89%,
      transparent 100%
    );


  mask-image:
    radial-gradient(
      circle 115px
      at var(--dot-x,50%) var(--dot-y,50%),

      #000 0%,
      rgba(0,0,0,.92) 42%,
      rgba(0,0,0,.55) 62%,
      rgba(0,0,0,.22) 76%,
      rgba(0,0,0,.05) 89%,
      transparent 100%
    );
}


.qp-type__glow::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background-image:
    radial-gradient(
      circle,
      rgba(0,114,231,.30) 1px,
      transparent 1.15px
    );

  background-size:6px 6px;


  -webkit-mask-image:
    radial-gradient(
      circle 66px
      at var(--dot-x,50%) var(--dot-y,50%),

      #000 0%,
      rgba(0,0,0,.98) 42%,
      rgba(0,0,0,.62) 62%,
      rgba(0,0,0,.25) 76%,
      rgba(0,0,0,.05) 89%,
      transparent 100%
    );


  mask-image:
    radial-gradient(
      circle 66px
      at var(--dot-x,50%) var(--dot-y,50%),

      #000 0%,
      rgba(0,0,0,.98) 42%,
      rgba(0,0,0,.62) 62%,
      rgba(0,0,0,.25) 76%,
      rgba(0,0,0,.05) 89%,
      transparent 100%
    );
}


/* =========================
   RIPPLE
========================= */

.qp-type__ripple{
  position:absolute;

  left:0;
  top:0;

  width:48px;
  height:48px;

  border-radius:50%;

  pointer-events:none;

  z-index:9;

  opacity:0;

  border:
    1px solid
    rgba(0,114,231,.17);

  box-shadow:
    0 0 14px
    rgba(0,114,231,.03);

  transform:
    translate(-50%,-50%)
    scale(.25);
}


.qp-type__ripple.is-active{
  animation:
    qpTypeRipple
    1s
    cubic-bezier(.16,.84,.44,1)
    forwards;
}


@keyframes qpTypeRipple{

  0%{
    transform:
      translate(-50%,-50%)
      scale(.25);

    opacity:.42;
  }

  45%{
    opacity:.20;
  }

  100%{
    transform:
      translate(-50%,-50%)
      scale(6.2);

    opacity:0;
  }

}


/* =========================
   HEADER
========================= */

.qp-type__head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:30px;
}


.qp-type__head h2{
  margin:0;

  font-family:
    "Montserrat-Light",
    "Montserrat",
    Arial,
    sans-serif;

  font-size:40px;
  line-height:1.2;
  font-weight:300;

  color:#111;
}


/* =========================
   ACTIONS
========================= */

.qp-type__actions{
  display:flex;

  align-items:center;

  gap:24px;
}


/* =========================
   VIEW ALL
========================= */

.qp-type__view{
  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:0 !important;

  color:#151515 !important;

  background:none !important;

  border:0 !important;
  border-bottom:0 !important;

  font-family:
    "Montserrat-Light",
    "Montserrat",
    Arial,
    sans-serif;

  font-size:14px;
  line-height:1;
  font-weight:300;

  white-space:nowrap;

  text-decoration:none !important;

  transition:color .2s ease;
}


.qp-type__view svg{
  width:17px;
  height:17px;

  fill:none;

  stroke:currentColor;
  stroke-width:1.6;

  stroke-linecap:round;
  stroke-linejoin:round;

  transition:transform .2s ease;
}


.qp-type__view:hover{
  color:#0868e8 !important;
}


.qp-type__view:hover svg{
  transform:translateX(3px);
}


/* =========================
   DOWNLOAD CATALOG
========================= */

.qp-type__catalog{
  min-height:46px;

  padding:0 18px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:9px;

  background:#fff;

  border:
    1px solid
    rgba(8,104,232,.45) !important;

  border-radius:8px;

  color:#0868e8 !important;

  font-family:
    "Montserrat-Light",
    "Montserrat",
    Arial,
    sans-serif;

  font-size:13px;
  line-height:1;
  font-weight:400;

  white-space:nowrap;

  text-decoration:none !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


.qp-type__catalog-icon{
  width:26px;
  height:26px;

  flex-shrink:0;

  fill:none;

  stroke:#0868e8;

  stroke-width:1.55;

  stroke-linecap:round;
  stroke-linejoin:round;
}


.qp-type__catalog:hover{
  background:#f4f8ff;

  border-color:#0868e8 !important;

  transform:translateY(-1px);

  box-shadow:
    0 6px 18px
    rgba(8,104,232,.09);
}


/* =========================
   GRID
========================= */

.qp-type__grid{
  display:grid;

  grid-template-columns:
    repeat(6,minmax(0,1fr));

  gap:18px;
}


/* =========================
   ITEM
========================= */

.qp-type__item{
  min-width:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  color:#151515 !important;

  text-decoration:none !important;

  border-bottom:none !important;
}


.qp-type__item:hover,
.qp-type__item:focus,
.qp-type__item:visited{
  text-decoration:none !important;
}


/* =========================
   IMAGE
========================= */

.qp-type__image{
  width:100%;
  height:250px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  margin-bottom:18px;
}


.qp-type__image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  transition:
    transform .4s
    cubic-bezier(.22,.61,.36,1);
}


.qp-type__item:hover
.qp-type__image img{
  transform:scale(1.035);
}


/* =========================
   PRODUCT NAME
========================= */

.qp-type__item h3{
  width:100%;
  min-height:44px;

  display:flex;

  align-items:flex-start;
  justify-content:center;

  margin:0;

  padding:0 6px;

  text-align:center;

  font-family:
    "Montserrat-Light",
    "Montserrat",
    Arial,
    sans-serif;

  font-size:15px;
  line-height:1.45;
  font-weight:300;

  color:#151515 !important;

  text-decoration:none !important;

  border-bottom:none !important;

  transition:color .2s ease;
}


.qp-type__item:hover h3{
  color:#0868e8 !important;
}


/* =========================
   UEESHOP
========================= */

.qp-type a,
.qp-type a:hover,
.qp-type a:focus,
.qp-type a:visited{
  text-decoration:none !important;
}


/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .qp-type__grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));

    gap:28px 16px;
  }

  .qp-type__image{
    height:220px;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .qp-type{
    padding:38px 0 42px;
  }

  .qp-type__in{
    width:calc(100% - 28px);
  }

  .qp-type__head{
    align-items:flex-start;

    margin-bottom:22px;
  }

  .qp-type__head h2{
    font-size:30px;
  }

  .qp-type__actions{
    gap:14px;
  }

  .qp-type__view{
    font-size:11px;
  }

  .qp-type__view svg{
    width:14px;
    height:14px;
  }

  .qp-type__catalog{
    min-height:38px;

    padding:0 11px;

    gap:6px;

    border-radius:7px;

    font-size:11px;
  }

  .qp-type__catalog-icon{
    width:20px;
    height:20px;
  }

  .qp-type__grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:22px 10px;
  }

  .qp-type__image{
    height:170px;

    margin-bottom:12px;
  }

  .qp-type__item h3{
    min-height:38px;

    font-size:13px;

    line-height:1.4;

    font-weight:300;
  }

  .qp-type__glow,
  .qp-type__ripple{
    display:none;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:430px){

  .qp-type__head{
    display:block;
  }

  .qp-type__actions{
    margin-top:16px;

    justify-content:flex-end;

    gap:18px;
  }

}


@media(max-width:360px){

  .qp-type__image{
    height:145px;
  }

  .qp-type__item h3{
    font-size:12px;
  }

}