/* PintuDigital.id - shared stylesheet for index, category and product pages */
html{
  scroll-behavior: smooth;
}

/* ==================== INDEX / HOME ==================== */

body.page-home{
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: #111315;
      background: #ffffff;
      line-height: 1.5;
}

body.page-home a{
text-decoration: none;
}

body.page-home .container{
max-width: 1240px;
}

body.page-home .navbar-custom{
background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.page-home .navbar-brand{
color: #111315;
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -1.5px;
}

body.page-home .navbar-brand span{
font-weight: 500;
}

body.page-home .navbar-brand:hover{
color: #111315;
}

body.page-home .navbar-nav .nav-link{
color: #25282b;
      font-size: 14px;
      font-weight: 500;
      padding-left: 0.85rem;
      padding-right: 0.85rem;
}

body.page-home .navbar-nav .nav-link:hover{
color: #25282b;
      opacity: 0.6;
}

body.page-home .navbar-toggler{
border: 1px solid #d8dadd;
      box-shadow: none !important;
}

body.page-home .hero{
background: linear-gradient(
        110deg,
        #f8f8f8 0%,
        #ffffff 48%,
        #f1f2f3 100%
      );
      overflow: hidden;
}

body.page-home .hero-row{
min-height: 620px;
}

body.page-home .eyebrow{
color: #73777b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
}

body.page-home .hero h1{
max-width: 650px;
      font-size: clamp(48px, 6vw, 82px);
      line-height: 0.98;
      letter-spacing: -4px;
}

body.page-home .hero-copy{
max-width: 560px;
      color: #666b70;
      font-size: 20px;
}

body.page-home .hero-visual{
height: 560px;
}

body.page-home .door{
width: 300px;
      height: 520px;
      background: linear-gradient(
        90deg,
        #181a1c,
        #343638 48%,
        #151617
      );
      border-radius: 7px 7px 0 0;
      box-shadow: 35px 35px 80px rgba(0, 0, 0, 0.18);
      position: relative;
}

body.page-home .door:before{
content: "";
      position: absolute;
      inset: 25px 24px 0;
      border: 1px solid rgba(255, 255, 255, 0.12);
}

body.page-home .lock{
position: absolute;
      top: 105px;
      left: 50%;
      width: 88px;
      height: 265px;
      transform: translateX(-50%);
      border: 1px solid #555555;
      border-radius: 15px;
      background: linear-gradient(145deg, #2b2d30, #080909);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

body.page-home .lock .brand{
color: #dddddd;
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      margin-top: 24px;
}

body.page-home .keypad{
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 25px 13px;
      color: #ffffff;
      font-size: 9px;
      text-align: center;
}

body.page-home .handle{
position: absolute;
      top: 270px;
      right: -28px;
      width: 100px;
      height: 14px;
      border-radius: 10px;
      background: #0c0d0e;
}

body.page-home .stat-icon{
font-size: 23px;
      line-height: 1;
}

body.page-home .stat-item{
min-height: 76px;
      font-size: 14px;
}

body.page-home .section-space{
padding-top: 90px;
      padding-bottom: 90px;
}

body.page-home .section-title{
font-size: 42px;
      line-height: 1.05;
      letter-spacing: -2px;
}

body.page-home .section-description{
color: #6d7175;
}

body.page-home .brand-card{
height: 190px;
      color: #111315;
      background: #fafafa;
      overflow: hidden;
      position: relative;
}

body.page-home .brand-card:hover{
color: #111315;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

body.page-home .brand-card h3{
position: relative;
      z-index: 2;
      font-size: 28px;
      letter-spacing: -1px;
}

body.page-home .brand-card p{
position: relative;
      z-index: 2;
      max-width: 180px;
      color: #6d7175;
      font-size: 13px;
}

body.page-home .product-shape{
position: absolute;
      right: 28px;
      bottom: -30px;
      width: 90px;
      height: 190px;
      transform: rotate(3deg);
      border-radius: 12px 12px 0 0;
      background: linear-gradient(145deg, #343638, #090a0b);
      box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.15);
}

body.page-home .product-shape:after{
content: "";
      position: absolute;
      top: 105px;
      right: -12px;
      width: 45px;
      height: 8px;
      border-radius: 8px;
      background: #111111;
}

body.page-home .access-card{
color: #111315;
      transition: 0.25s;
}

body.page-home .access-card:hover{
color: #111315;
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

body.page-home .access-card h3{
font-size: 19px;
}

body.page-home .access-card p{
color: #6d7175;
      font-size: 13px;
}

body.page-home .access-img{
height: 145px;
      background: linear-gradient(135deg, #f5f6f7, #e5e7e9);
}

body.page-home .emlock{
width: 130px;
      height: 34px;
      position: relative;
      border: 1px solid #9da0a2;
      border-radius: 4px;
      background: #d5d7d9;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

body.page-home .emlock:after{
content: "";
      position: absolute;
      top: 9px;
      right: -55px;
      width: 48px;
      height: 16px;
      border: 1px solid #999999;
      background: #c5c8ca;
}

body.page-home .dropbolt{
width: 105px;
      height: 55px;
      position: relative;
      border: 8px solid #9da0a2;
      border-radius: 7px;
      background: #ffffff;
}

body.page-home .dropbolt:after{
content: "";
      position: absolute;
      top: -17px;
      right: 18px;
      width: 15px;
      height: 75px;
      background: #777777;
}

body.page-home .strike{
width: 55px;
      height: 110px;
      border-radius: 6px;
      background: #c4c7c9;
      box-shadow: inset 0 0 0 4px #999999;
}

body.page-home .controller{
width: 75px;
      height: 105px;
      position: relative;
      border-radius: 10px;
      background: #25282a;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

body.page-home .controller:after{
content: "";
      position: absolute;
      top: 20px;
      left: 34px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6ed36e;
}

body.page-home .solutions{
background: #f5f6f7;
}

body.page-home .solution{
min-height: 310px;
      color: #ffffff;
      overflow: hidden;
}

body.page-home .solution:hover{
color: #ffffff;
}

body.page-home .solution-home{
background: linear-gradient(135deg, #4a4a46, #111111);
}

body.page-home .solution-office{
background: linear-gradient(135deg, #667078, #15191c);
}

body.page-home .solution-building{
background: linear-gradient(135deg, #344650, #0e1214);
}

body.page-home .solution h3{
font-size: 25px;
}

body.page-home .solution p{
max-width: 270px;
      color: #d2d5d7;
      font-size: 13px;
}

body.page-home .service-item p{
color: #6d7175;
      font-size: 13px;
}

body.page-home .service-icon{
font-size: 23px;
}

body.page-home .cta-box{
background: #111315;
}

body.page-home .cta-box h2{
font-size: 43px;
      line-height: 1.05;
      letter-spacing: -2px;
}

body.page-home .cta-box p{
color: #bfc3c6;
}

body.page-home footer{
background: #111315;
}

body.page-home .footer-logo{
color: #ffffff;
      font-size: 25px;
      font-weight: 800;
}

body.page-home footer p,
body.page-home footer a{
color: #a9adb1;
      font-size: 13px;
}

body.page-home footer a:hover{
color: #ffffff;
}

body.page-home footer h4{
color: #ffffff;
      font-size: 13px;
}

body.page-home .copyright{
color: #777777;
      font-size: 12px;
      border-top: 1px solid #2b2e31;
}

body.page-home .wa-button{
right: 22px;
      bottom: 22px;
      width: 58px;
      height: 58px;
      z-index: 1030;
      font-size: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991.98px){
  body.page-home .navbar-collapse{
padding-top: 1rem;
        padding-bottom: 1rem;
  }

  body.page-home .navbar-nav .nav-link{
padding: 0.65rem 0;
  }

  body.page-home .hero-row{
min-height: auto;
  }

  body.page-home .hero-visual{
height: 420px;
  }

  body.page-home .hero h1{
font-size: 56px;
  }
}

@media (max-width: 767.98px){
  body.page-home .stat-item{
border-right: 0 !important;
        border-bottom: 1px solid #e9eaec;
  }

  body.page-home .stat-item:last-child{
border-bottom: 0;
  }

  body.page-home .service-item{
border-right: 0 !important;
        border-bottom: 1px solid #e9eaec;
  }

  body.page-home .service-item:last-child{
border-bottom: 0;
  }
}

@media (min-width: 768px){
  body.page-home .stat-col:not(:last-child) .stat-item,
body.page-home .service-item:not(:last-child){
border-right: 1px solid #e9eaec;
  }
}

@media (max-width: 575.98px){
  body.page-home .section-space{
padding-top: 65px;
        padding-bottom: 65px;
  }

  body.page-home .hero h1{
font-size: 46px;
        letter-spacing: -3px;
  }

  body.page-home .hero-copy{
font-size: 17px;
  }

  body.page-home .hero-visual{
height: 390px;
  }

  body.page-home .door{
transform: scale(0.78);
  }

  body.page-home .section-title{
font-size: 34px;
  }

  body.page-home .access-card .card-body{
padding: 14px !important;
  }

  body.page-home .access-img{
height: 120px;
  }

  body.page-home .product-shape{
right: 15px;
  }

  body.page-home .cta-box h2{
font-size: 34px;
  }
}

/* ==================== CATEGORY ==================== */

body.page-category{
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: #111315;
      background: #ffffff;
      line-height: 1.5;
}

body.page-category a{
text-decoration: none;
}

body.page-category .container{
max-width: 1240px;
}

body.page-category .navbar-custom{
background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.page-category .navbar-brand{
color: #111315;
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -1.5px;
}

body.page-category .navbar-brand span{
font-weight: 500;
}

body.page-category .navbar-brand:hover{
color: #111315;
}

body.page-category .navbar-nav .nav-link{
color: #25282b;
      font-size: 14px;
      font-weight: 500;
      padding-left: 0.85rem;
      padding-right: 0.85rem;
}

body.page-category .navbar-nav .nav-link:hover{
color: #25282b;
      opacity: 0.6;
}

body.page-category .navbar-toggler{
border: 1px solid #d8dadd;
      box-shadow: none !important;
}

body.page-category .page-header{
padding: 70px 0 60px;
      background: linear-gradient(110deg, #f8f8f8 0%, #ffffff 48%, #f1f2f3 100%);
      border-bottom: 1px solid #e9eaec;
}

body.page-category .breadcrumb{
--bs-breadcrumb-divider-color: #9a9ea2;
      --bs-breadcrumb-item-active-color: #6d7175;
      font-size: 13px;
}

body.page-category .breadcrumb a{
color: #4e5357;
}

body.page-category .eyebrow{
color: #73777b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
}

body.page-category .page-title{
font-size: clamp(44px, 6vw, 72px);
      line-height: 1;
      letter-spacing: -3px;
}

body.page-category .page-description{
max-width: 680px;
      color: #666b70;
      font-size: 18px;
}

body.page-category .section-space{
padding: 80px 0;
}

body.page-category .filter-label{
color: #6d7175;
      font-size: 13px;
      font-weight: 600;
}

body.page-category .product-card{
color: #111315;
      border-color: #e9eaec !important;
      overflow: hidden;
      transition: 0.25s;
}

body.page-category .product-card:hover{
color: #111315;
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

body.page-category .product-image{
height: 300px;
      background: linear-gradient(135deg, #f5f6f7, #e5e7e9);
      overflow: hidden;
}

body.page-category .lock-preview{
width: 92px;
      height: 225px;
      position: relative;
      border-radius: 14px;
      background: linear-gradient(145deg, #343638, #090a0b);
      box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.15);
}

body.page-category .lock-preview:before{
content: "PHILIPS";
      position: absolute;
      top: 28px;
      left: 0;
      width: 100%;
      color: #d6d8da;
      font-size: 8px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.5px;
}

body.page-category .lock-preview:after{
content: "";
      position: absolute;
      top: 130px;
      right: -22px;
      width: 72px;
      height: 10px;
      border-radius: 10px;
      background: #111111;
}

body.page-category .lock-preview.slim{
width: 76px;
      height: 230px;
}

body.page-category .lock-preview.wide{
width: 108px;
      height: 218px;
}

body.page-category .product-brand{
color: #73777b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
}

body.page-category .product-card h2{
font-size: 21px;
      letter-spacing: -0.5px;
}

body.page-category .product-card p{
color: #6d7175;
      font-size: 14px;
}

body.page-category .feature-badge{
color: #4f5458;
      background: #f5f6f7;
      border: 1px solid #e4e6e8;
      font-size: 11px;
      font-weight: 500;
}

body.page-category .cta-box{
background: #111315;
}

body.page-category .cta-box h2{
font-size: 38px;
      line-height: 1.05;
      letter-spacing: -1.8px;
}

body.page-category .cta-box p{
color: #bfc3c6;
}

body.page-category footer{
background: #111315;
}

body.page-category .footer-logo{
color: #ffffff;
      font-size: 25px;
      font-weight: 800;
}

body.page-category footer p,
body.page-category footer a{
color: #a9adb1;
      font-size: 13px;
}

body.page-category footer a:hover{
color: #ffffff;
}

body.page-category footer h4{
color: #ffffff;
      font-size: 13px;
}

body.page-category .copyright{
color: #777777;
      font-size: 12px;
      border-top: 1px solid #2b2e31;
}

body.page-category .wa-button{
right: 22px;
      bottom: 22px;
      width: 58px;
      height: 58px;
      z-index: 1030;
      font-size: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767.98px){
  body.page-category .page-header{
padding: 50px 0 45px;
  }

  body.page-category .section-space{
padding: 60px 0;
  }

  body.page-category .product-image{
height: 240px;
  }

  body.page-category .cta-box h2{
font-size: 32px;
  }
}

/* ==================== PRODUCT DETAIL ==================== */

body.page-product{
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      color: #111315;
      background: #ffffff;
      line-height: 1.5;
}

body.page-product a{
text-decoration: none;
}

body.page-product .container{
max-width: 1240px;
}

body.page-product .navbar-custom{
background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.page-product .navbar-brand{
color: #111315;
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -1.5px;
}

body.page-product .navbar-brand span{
font-weight: 500;
}

body.page-product .navbar-brand:hover{
color: #111315;
}

body.page-product .navbar-nav .nav-link{
color: #25282b;
      font-size: 14px;
      font-weight: 500;
      padding-left: 0.85rem;
      padding-right: 0.85rem;
}

body.page-product .navbar-nav .nav-link:hover{
color: #25282b;
      opacity: 0.6;
}

body.page-product .navbar-toggler{
border: 1px solid #d8dadd;
      box-shadow: none !important;
}

body.page-product .breadcrumb{
--bs-breadcrumb-divider-color: #9a9ea2;
      --bs-breadcrumb-item-active-color: #6d7175;
      font-size: 13px;
}

body.page-product .breadcrumb a{
color: #4e5357;
}

body.page-product .product-section{
padding: 55px 0 80px;
}

body.page-product .product-gallery{
min-height: 590px;
      background: linear-gradient(135deg, #f5f6f7, #e5e7e9);
      overflow: hidden;
}

body.page-product .lock-large{
width: 154px;
      height: 400px;
      position: relative;
      border-radius: 20px;
      background: linear-gradient(145deg, #343638, #090a0b);
      box-shadow: -18px 28px 50px rgba(0, 0, 0, 0.17);
}

body.page-product .lock-large:before{
content: "PHILIPS";
      position: absolute;
      top: 38px;
      left: 0;
      width: 100%;
      color: #d6d8da;
      font-size: 10px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 1px;
}

body.page-product .lock-large:after{
content: "";
      position: absolute;
      top: 230px;
      right: -48px;
      width: 125px;
      height: 15px;
      border-radius: 12px;
      background: #111111;
}

body.page-product .gallery-thumb{
height: 88px;
      background: linear-gradient(135deg, #f5f6f7, #e5e7e9);
      border: 1px solid #e3e5e7;
      cursor: pointer;
}

body.page-product .gallery-thumb.active{
border-color: #111315;
}

body.page-product .thumb-lock{
width: 27px;
      height: 64px;
      border-radius: 4px;
      background: linear-gradient(145deg, #343638, #090a0b);
}

body.page-product .product-brand{
color: #73777b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
}

body.page-product .product-title{
font-size: clamp(44px, 5vw, 64px);
      line-height: 1;
      letter-spacing: -3px;
}

body.page-product .product-lead{
color: #666b70;
      font-size: 18px;
      line-height: 1.7;
}

body.page-product .feature-item{
min-height: 78px;
      border: 1px solid #e9eaec;
      background: #ffffff;
}

body.page-product .feature-item i{
font-size: 22px;
}

body.page-product .feature-item span{
font-size: 13px;
      font-weight: 600;
}

body.page-product .section-space{
padding: 80px 0;
}

body.page-product .section-title{
font-size: 38px;
      line-height: 1.05;
      letter-spacing: -1.8px;
}

body.page-product .description-copy{
color: #5f6468;
      font-size: 16px;
      line-height: 1.8;
}

body.page-product .spec-card{
border: 1px solid #e9eaec;
      overflow: hidden;
}

body.page-product .spec-row{
min-height: 58px;
}

body.page-product .spec-row:not(:last-child){
border-bottom: 1px solid #e9eaec;
}

body.page-product .spec-label{
color: #6d7175;
      background: #fafafa;
      font-size: 14px;
}

body.page-product .spec-value{
color: #111315;
      font-size: 14px;
      font-weight: 600;
}

body.page-product .related-card{
color: #111315;
      border-color: #e9eaec !important;
      overflow: hidden;
      transition: 0.25s;
}

body.page-product .related-card:hover{
color: #111315;
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}

body.page-product .related-image{
height: 240px;
      background: linear-gradient(135deg, #f5f6f7, #e5e7e9);
}

body.page-product .related-lock{
width: 72px;
      height: 175px;
      position: relative;
      border-radius: 10px;
      background: linear-gradient(145deg, #343638, #090a0b);
}

body.page-product .related-lock:after{
content: "";
      position: absolute;
      top: 102px;
      right: -17px;
      width: 54px;
      height: 8px;
      border-radius: 8px;
      background: #111111;
}

body.page-product .cta-box{
background: #111315;
}

body.page-product .cta-box h2{
font-size: 38px;
      line-height: 1.05;
      letter-spacing: -1.8px;
}

body.page-product .cta-box p{
color: #bfc3c6;
}

body.page-product footer{
background: #111315;
}

body.page-product .footer-logo{
color: #ffffff;
      font-size: 25px;
      font-weight: 800;
}

body.page-product footer p,
body.page-product footer a{
color: #a9adb1;
      font-size: 13px;
}

body.page-product footer a:hover{
color: #ffffff;
}

body.page-product footer h4{
color: #ffffff;
      font-size: 13px;
}

body.page-product .copyright{
color: #777777;
      font-size: 12px;
      border-top: 1px solid #2b2e31;
}

body.page-product .wa-button{
right: 22px;
      bottom: 22px;
      width: 58px;
      height: 58px;
      z-index: 1030;
      font-size: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

@media (max-width: 991.98px){
  body.page-product .product-gallery{
min-height: 500px;
  }
}

@media (max-width: 767.98px){
  body.page-product .product-section{
padding: 40px 0 60px;
  }

  body.page-product .section-space{
padding: 60px 0;
  }

  body.page-product .product-gallery{
min-height: 420px;
  }

  body.page-product .lock-large{
transform: scale(0.82);
  }

  body.page-product .section-title,
body.page-product .cta-box h2{
font-size: 32px;
  }
}

/* Category-only element that previously used an inline style */
body.page-category .product-sort-select{
  width: 170px;
}