/* =========================================================
   Product-only styles
   Product list, product hero/gallery and product recommendations.
   ========================================================= */
/* Product detail and extended product template */
.page-product-scope .tuya-product-hero{
      height: 680px;
      margin: 0;
      display: flex;
      flex-direction: column;
      background: #11171b;
    }
.page-product-scope .tuya-product-hero__stage{
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      background: #263138;
    }
.page-product-scope .tuya-product-hero__backdrop{
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(12, 20, 26, .86) 0%, rgba(16, 25, 31, .68) 34%, rgba(20, 29, 35, .18) 62%, rgba(20, 29, 35, .3) 100%),
        url("../images/product-hero-industrial.webp") center 52% / cover no-repeat;
      filter: saturate(.78);
      transform: scale(1.012);
    }
.page-product-scope .tuya-product-hero__inner{
      position: relative;
      z-index: 2;
      width: min(var(--campus-width), calc(100% - var(--campus-gutter)));
      height: 100%;
      margin: 0 auto;
      padding: 44px 0;
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
      grid-template-rows: auto auto;
      align-content: center;
      gap: 28px 56px;
    }
.page-product-scope .tuya-product-hero__copy{
      grid-column: 1;
      grid-row: 1;
      align-self: end;
      max-width: 600px;
    }
.page-product-scope .tuya-product-hero h1{
      margin: 0;
      max-width: 590px;
      color: #fff;
      font-size: clamp(48px, 3.2vw, 60px);
      line-height: 1.1;
      letter-spacing: -.025em;
      font-weight: 600;
    }
.page-product-scope .tuya-product-hero__copy p{
      margin: 24px 0 0;
      max-width: 560px;
      color: rgba(255, 255, 255, .88);
      font-size: 17px;
      line-height: 1.72;
    }
.page-product-scope .tuya-product-hero__actions{
      grid-column: 1;
      grid-row: 2;
      align-self: start;
      color: #fff;
    }
.page-product-scope .tuya-product-hero__gallery{
      position: relative;
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      min-width: 0;
      height: 510px;
    }
.page-product-scope .tuya-product-hero__slides{
      position: absolute;
      inset: 0 82px 0 56px;
    }
.page-product-scope .tuya-product-hero__slide{
      position: absolute;
      inset: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateX(22px);
      pointer-events: none;
      transition: opacity .34s ease, transform .34s ease;
    }
.page-product-scope .tuya-product-hero__slide.is-active{
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
.page-product-scope .tuya-product-hero__slide img{
      width: min(590px, 96%);
      max-height: 500px;
      object-fit: contain;
      filter: drop-shadow(0 30px 32px rgba(0, 0, 0, .25));
    }
.page-product-scope .tuya-product-hero__arrow{
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 48px;
      height: 48px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .38);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .82);
      color: #39434b;
      cursor: pointer;
      transform: translateY(-50%);
      transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
    }
.page-product-scope .tuya-product-hero__arrow svg{
      width: 21px;
      height: 21px;
    }
.page-product-scope .tuya-product-hero__arrow:hover{
      border-color: #fff;
      background: #fff;
      color: var(--campus-primary);
      transform: translateY(-50%) scale(1.04);
    }
.page-product-scope .tuya-product-hero__arrow--prev{ left: 0; }
.page-product-scope .tuya-product-hero__arrow--next{ right: 92px; }
.page-product-scope .tuya-product-hero__thumbs{
      position: absolute;
      top: 50%;
      right: 0;
      z-index: 4;
      display: grid;
      gap: 14px;
      transform: translateY(-50%);
    }
.page-product-scope .tuya-product-hero__thumb{
      width: 68px;
      height: 68px;
      padding: 6px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .34);
      border-radius: 16px;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 10px 20px rgba(0, 0, 0, .11);
      cursor: pointer;
      transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
    }
.page-product-scope .tuya-product-hero__thumb:hover,
    .page-product-scope .tuya-product-hero__thumb.is-active{
      border-color: var(--campus-primary);
      background: #fff;
      box-shadow: 0 0 0 1px var(--campus-primary), 0 10px 20px rgba(0, 0, 0, .11);
      transform: translateY(-2px);
    }
.page-product-scope .tuya-product-hero__thumb img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
.page-product-scope .tuya-product-hero__features{
      box-sizing: border-box;
      flex: 0 0 auto;
      min-height: 98px;
      padding: 26px 0;
      display: flex;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid var(--campus-line);
    }
.page-product-scope .tuya-product-hero__feature-inner{
      width: min(var(--campus-width), calc(100% - var(--campus-gutter)));
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      color: var(--site-ink);
      font-size: 16px;
      line-height: 1.45;
    }
.page-product-scope .tuya-product-hero__feature-inner span{
      box-sizing: border-box;
      position: relative;
      min-width: 0;
      min-height: 44px;
      padding: 0 30px 0 58px;
      display: flex;
      flex: 1 1 25%;
      align-items: center;
      font-weight: 500;
    }
.page-product-scope .tuya-product-hero__feature-inner span:not(:nth-child(4n + 1)){
      border-left: 1px solid #e7ecee;
    }
.page-product-scope .tuya-product-hero__feature-inner span:nth-child(n + 5){
      border-top: 1px solid #e7ecee;
    }
.page-product-scope .tuya-product-hero__feature-inner span::before{
      content: "";
      position: absolute;
      top: 50%;
      left: 28px;
      width: 20px;
      height: 20px;
      border: 1px solid rgba(7, 135, 28, .18);
      border-radius: 50%;
      background: radial-gradient(circle, var(--campus-primary) 0 3px, rgba(7, 135, 28, .1) 3.5px 100%);
      transform: translateY(-50%);
    }
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid){
  gap: 24px;
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card{
  aspect-ratio: 4 / 3;
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card::after{
  background: linear-gradient(180deg, rgba(11, 15, 21, 0) 38%, rgba(11, 15, 21, .18) 56%, rgba(11, 15, 21, .88) 100%);
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card:hover::before{
  transform: scale(1.03);
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card__copy{
  left: 30px;
  right: 30px;
  bottom: 28px;
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card__copy h3{
  font-size: 26px;
  line-height: 1.25;
}
.page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card__copy p{
  max-width: 92%;
  margin-top: 10px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.65;
}
@media (max-width: 1100px) {
  .page-product-scope .tuya-product-hero__inner{
          grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
          gap: 26px 32px;
        }

    .page-product-scope .tuya-product-hero h1{ font-size: 46px; }

    .page-product-scope .tuya-product-hero__gallery{ height: 480px; }

    .page-product-scope .tuya-product-hero__slide img{ width: min(500px, 94%); max-height: 460px; }

    .page-product-scope .tuya-product-hero__slides{ inset: 0 76px 0 48px; }

    .page-product-scope .tuya-product-hero__arrow--next{ right: 84px; }

    .page-product-scope .tuya-product-hero__thumb{ width: 62px; height: 62px; border-radius: 15px; }

    .page-product-scope .tuya-product-hero__feature-inner{ font-size: 15px; }
}
@media (max-width: 900px) {
  .page-product-scope .tuya-product-hero{ height: auto; }

    .page-product-scope .tuya-product-hero__stage{ min-height: 0; }

    .page-product-scope .tuya-product-hero__inner{
          width: min(100% - 48px, 720px);
          height: auto;
          min-height: 0;
          padding: 50px 0 36px;
          grid-template-columns: 1fr;
          grid-template-rows: auto 400px auto;
          align-content: start;
          gap: 28px;
        }

    .page-product-scope .tuya-product-hero__copy{
          grid-column: 1;
          grid-row: 1;
          max-width: 620px;
        }

    .page-product-scope .tuya-product-hero h1{ font-size: 44px; }

    .page-product-scope .tuya-product-hero__copy p{ margin-top: 20px; font-size: 16px; }

    .page-product-scope .tuya-product-hero__gallery{
          grid-column: 1;
          grid-row: 2;
          width: 100%;
          height: 400px;
        }

    .page-product-scope .tuya-product-hero__slides{ inset: 0 56px 76px; }

    .page-product-scope .tuya-product-hero__slide img{ width: min(430px, 94%); max-height: 330px; }

    .page-product-scope .tuya-product-hero__arrow{ top: 41%; width: 46px; height: 46px; }

    .page-product-scope .tuya-product-hero__arrow--next{ right: 0; }

    .page-product-scope .tuya-product-hero__thumbs{
          top: auto;
          right: 50%;
          bottom: 0;
          display: flex;
          gap: 12px;
          transform: translateX(50%);
        }

    .page-product-scope .tuya-product-hero__thumb{ width: 58px; height: 58px; padding: 5px; border-radius: 14px; }

    .page-product-scope .tuya-product-hero__actions{
          grid-column: 1;
          grid-row: 3;
        }

    .page-product-scope .tuya-product-hero__features{ min-height: 0; padding: 18px 0; }

    .page-product-scope .tuya-product-hero__feature-inner span{
          min-height: 50px;
          padding: 8px 24px 8px 54px;
          flex-basis: 50%;
        }

    .page-product-scope .tuya-product-hero__feature-inner span::before{ left: 24px; }

    .page-product-scope .tuya-product-hero__feature-inner span{ border-left: 0; border-top: 0; }

    .page-product-scope .tuya-product-hero__feature-inner span:nth-child(even){ border-left: 1px solid #e7ecee; }

    .page-product-scope .tuya-product-hero__feature-inner span:nth-child(n + 3){ border-top: 1px solid #e7ecee; }
}
@media (max-width: 640px) {
  .page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid){ gap: 18px; }

  .page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card__copy{
    left: 22px;
    right: 22px;
    bottom: 22px;
  }

  .page-product-scope .tuya-campus-recommend-grid:not(.product-related-grid) .tuya-campus-recommend-card__copy h3{ font-size: 23px; }

  .page-product-scope .tuya-product-hero{ height: auto; }

    .page-product-scope .tuya-product-hero__stage{ min-height: 0; }

    .page-product-scope .tuya-product-hero__backdrop{ background-position: 56% center; }

    .page-product-scope .tuya-product-hero__inner{
          width: calc(100% - 32px);
          min-height: 0;
          padding: 36px 0 28px;
          grid-template-rows: auto 330px auto;
          gap: 22px;
        }

    .page-product-scope .tuya-product-hero__copy{ max-width: none; }

    .page-product-scope .tuya-product-hero h1{ font-size: 36px; line-height: 1.12; }

    .page-product-scope .tuya-product-hero__copy p{ margin-top: 16px; font-size: 15px; line-height: 1.68; }

    .page-product-scope .tuya-product-hero__gallery{ height: 330px; }

    .page-product-scope .tuya-product-hero__slides{ inset: 0 42px 68px; }

    .page-product-scope .tuya-product-hero__slide img{ width: min(292px, 96%); max-height: 244px; }

    .page-product-scope .tuya-product-hero__arrow{ top: 39%; width: 40px; height: 40px; }

    .page-product-scope .tuya-product-hero__arrow svg{ width: 18px; height: 18px; }

    .page-product-scope .tuya-product-hero__thumb{ width: 52px; height: 52px; border-radius: 13px; }

    .page-product-scope .tuya-product-hero__actions{
          width: 100%;
        }

    .page-product-scope .tuya-product-hero__features{ padding: 10px 0; }

    .page-product-scope .tuya-product-hero__feature-inner{
          width: calc(100% - 32px);
          font-size: 14.5px;
        }

    .page-product-scope .tuya-product-hero__feature-inner span{
          min-height: 48px;
          padding: 10px 8px 10px 42px;
          flex-basis: 100%;
          border-left: 0;
          border-top: 0;
        }

    .page-product-scope .tuya-product-hero__feature-inner span + span{
          border-top: 1px solid #e7ecee;
        }

    .page-product-scope .tuya-product-hero__feature-inner span::before{ left: 8px; }
}
.page-product-scope #campus-details-nav{
  scroll-margin-top:var(--becke-header-height);
}
@media (min-width:901px){
  .page-product-scope .product-related-hero .tuya-campus-hero__inner{
    position:absolute;
    inset:0 57% 0 max(6px,calc((100% - var(--campus-width))/2));
    width:auto;
    height:auto;
    margin:0;
  }

  .page-product-scope .product-related-hero .tuya-campus-hero__copy{
    width:100%;
    max-width:610px;
  }
}
.page-product-scope .product-related-featured{
  position:absolute;
  inset:0 0 0 43%;
  z-index:1;
  overflow:hidden;
  background:
    radial-gradient(circle at 62% 43%,rgba(255,255,255,.075) 0,rgba(255,255,255,.028) 30%,transparent 54%),
    linear-gradient(135deg,#142f42 0%,#0d2230 48%,#071620 100%);
  border-radius:0 28px 28px 0;
  -webkit-clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
  clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);
}
.page-product-scope .product-related-featured .product-featured__eyebrow{
  top:42px;
  left:18%;
}
.page-product-scope .product-related-featured .product-featured__slides{
  inset:66px 3% 76px 7%;
}
.page-product-scope .product-related-featured .product-featured__media{
  padding-left:8%;
}
.page-product-scope .product-related-featured .product-featured__meta{
  gap:18px;
  padding-right:6%;
  padding-left:18%;
}
.page-product-scope .product-related-featured .product-featured__meta > div{
  max-width:calc(100% - 98px);
}
.page-product-scope .product-related-featured .product-featured__title{
  font-size:clamp(18px,1.4vw,22px);
}
.page-product-scope .product-related-featured .product-featured__footer{
  right:6%;
  bottom:24px;
  left:18%;
}
@media (max-width:900px){
  .page-product-scope .product-related-featured{
    position:relative;
    order:2;
    inset:auto;
    width:100%;
    height:clamp(380px,64vw,520px);
    flex:0 0 auto;
    border-radius:0;
    -webkit-clip-path:none;
    clip-path:none;
  }

  .page-product-scope .product-related-featured .product-featured__eyebrow{
    top:24px;
    left:8%;
  }

  .page-product-scope .product-related-featured .product-featured__slides{
    inset:42px 3% 56px;
  }

  .page-product-scope .product-related-featured .product-featured__media,
  .page-product-scope .product-related-featured .product-featured__meta{
    padding-left:8%;
  }

  .page-product-scope .product-related-featured .product-featured__footer{
    right:6%;
    bottom:10px;
    left:8%;
  }
}
@media (max-width:640px){
  .page-product-scope .product-related-featured{
    height:clamp(340px,92vw,430px);
  }

  .page-product-scope .product-related-featured .product-featured__eyebrow{
    top:18px;
    left:16px;
  }

  .page-product-scope .product-related-featured .product-featured__slides{
    inset:34px 16px 54px;
  }

  .page-product-scope .product-related-featured .product-featured__media,
  .page-product-scope .product-related-featured .product-featured__meta{
    padding-left:0;
  }

  .page-product-scope .product-related-featured .product-featured__footer{
    right:16px;
    bottom:10px;
    left:16px;
  }
}
.page-product-scope .product-related-grid .tuya-campus-recommend-card{
  aspect-ratio: 4 / 3;
}
.page-product-scope .product-related-grid .tuya-campus-recommend-card::before{
  background-color: #e9eef0;
}
.page-product-scope .product-related-card--ex-bh621{ --recommend-image: url("../images/product-ex-bh621-main.webp"); }
.page-product-scope .product-related-card--bk-roip4{ --recommend-image: url("../images/latest-bk-roip4.webp"); }
.page-product-scope .product-related-card--dsc173{ --recommend-image: url("../images/product-list-dsc173.webp"); }
.page-product-scope .product-related-card--gp320i{ --recommend-image: url("../images/product-list-gp320i.webp"); }
.page-product-scope .product-related-card--gp308i{ --recommend-image: url("../images/product-list-gp308i.webp"); }
.page-product-scope .product-related-card--bm13{ --recommend-image: url("../images/product-list-bm13.webp"); }
.page-product-scope .product-related-card--sk12{ --recommend-image: url("../images/product-list-sk12.webp"); }
.page-product-scope .product-related-card--ipga32fxs{ --recommend-image: url("../images/product-list-ipga32fxs.webp"); }
.page-product-scope .product-related-card--alarm{ --recommend-image: url("../images/product-list-alarm.webp"); }
.page-product-scope .product-related-card--bpt11{ --recommend-image: url("../images/latest-bpt11.webp"); }
.page-product-scope .product-related-card--bt26{ --recommend-image: url("../images/latest-bt26.webp"); }
.page-product-scope .product-related-card--dsc-bd156{ --recommend-image: url("../images/latest-dsc-bd156.webp"); }
/* Product catalog */
.product-list-page{
  box-sizing:border-box;
}
.product-list-hero__visual::before{
  position:absolute;
  inset:3% 0 0 5%;
  content:"";
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.14) 0%,rgba(255,255,255,.045) 42%,rgba(255,255,255,0) 70%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  transform:rotate(-4deg);
}
.product-list-hero__visual::after{
  position:absolute;
  z-index:0;
  right:1%;
  bottom:9%;
  left:24%;
  height:10%;
  content:"";
  background:radial-gradient(ellipse at center,rgba(0,0,0,.32) 0%,rgba(0,0,0,.1) 48%,rgba(0,0,0,0) 74%);
  filter:blur(8px);
}
.product-list-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.product-list-card{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #e1e7e5;
  border-radius:18px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.product-list-card > a{
  display:flex;
  min-height:100%;
  flex-direction:column;
}
.product-list-card__media{
  position:relative;
  display:flex;
  aspect-ratio:4 / 3;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0;
  padding:12px;
  background:#fff;
}
.product-list-card__media img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:scale(1.06);
  transition:transform .26s ease;
}
.product-list-card__media--contain img{
  width:94%;
  height:94%;
}
.product-list-card--software .product-list-card__media img{
  object-fit:contain;
}
.product-list-card__body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:21px 22px 23px;
  border-top:1px solid #edf1ef;
  text-align:left;
}
.product-list-card__category{
  display:block;
  margin-bottom:8px;
  color:var(--site-primary-dark);
  font-size:11px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.02em;
}
.product-list-card__body h2{
  margin:0;
  color:var(--site-ink);
  line-height:1.28;
  letter-spacing:-.014em;
}
.product-list-card__model{
  display:block;
  font-size:20px;
  font-weight:600;
}
.product-list-card__name{
  display:block;
  margin-top:4px;
  color:#4f5e68;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:0;
}
.product-list-card__body > p:not(.product-list-card__specs){
  display:-webkit-box;
  min-height:46px;
  margin:13px 0 0;
  overflow:hidden;
  color:var(--site-muted);
  font-size:13px;
  line-height:1.72;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.product-list-card__specs{
  margin:15px 0 0;
  color:#58656e;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.005em;
}
.product-list-card__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:18px;
  color:var(--site-primary-dark);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
.product-list-card__link span{
  transition:transform .2s ease;
}
.product-list-card:hover,
.product-list-card:focus-within{
  border-color:rgba(7,135,28,.32);
  box-shadow:0 14px 34px rgba(13,27,38,.07);
  transform:translateY(-2px);
}
.product-list-card:hover .product-list-card__media img,
.product-list-card:focus-within .product-list-card__media img{
  transform:scale(1.085);
}
.product-list-card:hover .product-list-card__link span,
.product-list-card:focus-within .product-list-card__link span{
  transform:translateX(3px);
}
@media (max-width:1180px){
  .product-list-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .product-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){

  .product-list-grid{gap:16px;}
  .product-list-card{border-radius:16px;}
  .product-list-card__media{padding:10px;}
  .product-list-card__body{padding:19px 19px 21px;}
  .product-list-card__model{font-size:19px;}
  .product-list-card__body > p:not(.product-list-card__specs){
    min-height:44px;
    font-size:13px;
    line-height:1.68;
  }
  .product-list-card__link{padding-top:16px;}
}
@media (max-width:520px){
  .product-list-grid{grid-template-columns:1fr;}
}
