/* ---------- Product details ---------- */
.pd-top{ background:#fff; padding:50px 0 40px; }

/* gallery */
.pd-gallery .pd-main{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio: 4/4;
  border-radius:20px;
  background:#F4F5F7;
  border: 2px solid var(--btn-color);
}
.pd-gallery .pd-main img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  transition:transform .6s;
}
.pd-gallery .pd-main:hover img{ transform:scale(1.04); }
.pd-gallery .pd-zoom{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  background:var(--color2); color:var(--txt-color);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.pd-thumbs{
  display:flex; gap:12px; margin-top:14px;
  overflow-x:auto; scrollbar-width:none;
}
.pd-thumbs::-webkit-scrollbar{ display:none; }
.pd-thumb{
  flex:0 0 auto; width:96px; height:76px; padding:0;
  border:2px solid transparent; border-radius:12px; overflow:hidden;
  background:none; cursor:pointer; transition:border-color .3s;
}
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumb:hover,
.pd-thumb.active{ border-color:var(--btn-color); }

/* info */
.pd-info .abt-eyebrow a{ color:inherit; text-decoration:none; }
.pd-title{
  font-size:clamp(26px,2.6vw,34px); font-weight:600; line-height:1.25;
  color:var(--txt-color); margin:0 0 14px;
}
.pd-short{
  font:400 13px/1.8 "Inter",sans-serif; color:var(--txt-color); margin:0 0 18px;
}
.pd-stars{color:#F5A623;font-size: 20px;letter-spacing:2px;line-height:1;}

/* NEW: specs box */
.specs-box{
  margin-bottom:22px; background:#fff;
  border:1px solid #E5E5E5; overflow:hidden;
}

/* top row: views + reviews | social */
.specs-box .sb-top{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  padding:16px 20px;
}
.specs-box .sb-views{
  display:inline-flex; align-items:center; gap:10px;
  font:400 16px/1 "Inter",sans-serif; color:var(--h-color);
}
.specs-box .sb-views img{ height:25px; width:auto; display:block; }
.specs-box .sb-reviews{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.specs-box .sb-sep{ width:1px; height:20px; background:#D5D5D5; }
.specs-box .sb-rev-txt{ font:400 14px/1 "Inter",sans-serif; color:var(--txt-color); }

.specs-box .sb-social{
  display:flex; align-items:center; gap:10px;
  list-style:none; margin:0; padding:0 0 0 20px;
}
.specs-box .sb-social a{
  width:38px; height:38px; border-radius:50%;
  background:var(--btn-color); color:var(--color2);
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.specs-box .sb-social a:hover{ background:var(--color1); }

/* grid */
.specs-box .sb-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #E5E5E5; }
.specs-box .sb-cell{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom:1px solid #E5E5E5;
}
.specs-box .sb-cell:nth-child(odd){ border-right:1px solid #E5E5E5; }
.specs-box .sb-cell:nth-last-child(-n+2){ border-bottom:0; }

.specs-box .sb-ico{ flex:0 0 36px; display:flex; justify-content:center; }
.specs-box .sb-ico img{width: 22px;max-height: 20px;height: 22px;object-fit:contain;display:block;}
.specs-box .sb-label{
  /* flex: 0 0 75px; */
  font:500 14px/1.3 "Inter",sans-serif;
  color:var(--txt-color);
}
.specs-box .sb-value{
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  font: 400 13px/1.4 "Inter",sans-serif;
  color:var(--h-color);
}

/* actions */
.pd-circle{
  width:44px; height:44px; border-radius:50%;
  background:var(--btn-color); color:var(--color2);
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.pd-circle:hover{ background:var(--color1); color:var(--color2); }
.pd-inquire{
  display:inline-flex; align-items:center; gap:12px;
  padding:6px 28px 6px 6px; border-radius:50px;
  background:var(--color1); color:var(--color2);
  font:500 13px/1 "Inter",sans-serif; text-decoration:none; transition:.3s;
}
.pd-inquire-ico{
  width:32px; height:32px; border-radius:50%;
  background:var(--color2); color:var(--color1);
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.pd-inquire:hover{ background:var(--btn-color); color:var(--color2); }
.pd-inquire:hover .pd-inquire-ico{ color:var(--btn-color); }

.pd-cat{
  display:flex;
  align-items:center;
  gap:10px;
  font: 500 15px/1 "Inter",sans-serif;
  color:var(--txt-color);
}
.pd-cat span::after{ content:"|"; margin-left:10px; }
.pd-cat a{color:var(--txt-color);text-decoration:none;}
.pd-cat a:hover{ color:var(--btn-color); }

.pd-meta{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-bottom:22px;
}
.pd-circles{ display:flex; gap:12px; }

/* description */
.pd-desc-section{ background:#fff; padding:20px 0 60px; }
.pd-desc-card{
  background:#fff; border:1px solid #F1E4E7; border-radius:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.05); padding:44px 48px;
}
.pd-desc-title{
  text-align:center; font-size:clamp(24px,2.6vw,32px); font-weight:600;
  color:var(--txt-color); margin:0 0 26px;
}
.pd-desc-body{font: 400 15px/1.9 "Inter",sans-serif;color: #000000;}
.pd-desc-body p{ margin:0 0 14px; }
.pd-desc-body h2,
.pd-desc-body h3,
.pd-desc-body h4{ font-weight:600; color:var(--txt-color); margin:22px 0 10px; }
.pd-desc-body strong{ font-weight:600; color:var(--txt-color); }
.pd-desc-body a{ color:var(--btn-color); }
.pd-desc-body img{ max-width:100%; height:auto; border-radius:10px; }
.pd-desc-body table{ display:block; max-width:100%; overflow-x:auto; }
.pd-desc-body ul{ list-style:none; margin:0 0 16px; padding:0; }
.pd-desc-body ul li{ position:relative; padding-left:22px; margin-bottom:10px; }
.pd-desc-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top: 5px;
  width: 14px;
  height: 15px;
  background: url(/images/prod-li-icon.svg) no-repeat;
  border-radius:2px;
  background-size: contain;
  background-position: center;
}

/* related */
.pd-related{ background:#fff; padding:10px 0 80px; }
.pd-rel-title{
  text-align:center; font-size:clamp(24px,2.6vw,32px); font-weight:600;
  color:var(--txt-color); margin:0 0 36px;
}
.pd-rel-card{
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid #F1E4E7; border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.05); transition:transform .4s, box-shadow .4s;
}
.pd-rel-card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(237,26,118,.12); }
.pd-rel-img{ display:block; height:200px; overflow:hidden; }
.pd-rel-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; }
.pd-rel-card:hover .pd-rel-img img{ transform:scale(1.05); }
.pd-rel-body{ display:flex; flex-direction:column; flex:1; padding:18px 16px 18px; }
.pd-rel-name{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 8px;min-height:42px;align-content: center;}
.pd-rel-name a{ color:var(--txt-color); text-decoration:none; }
.pd-rel-name a:hover{ color:var(--btn-color); }
.pd-rel-body .pd-stars{margin-bottom: 15px;}
.pd-rel-btn{
  margin-top:auto; display:block; padding:11px 10px; text-align:center;
  border-radius:50px; background:var(--btn-color); color:var(--color2);
  font:500 12px/1 "Inter",sans-serif; text-decoration:none; transition:.3s;
}
.pd-rel-btn:hover{ background:var(--color1); color:var(--color2); }

@media (max-width:991px){
    .pd-top{ padding:34px 0 24px; }
    .pd-desc-card{ padding:32px 24px; }
    .pd-rel-img{ height:170px; }
  
    .pd-gallery .pd-main {
        aspect-ratio: 5 / 3;
    }
    
    .specs-box .sb-views {
        font-size: 14px;
    }
    
    .specs-box .sb-views img {
        height: 20px;
    }
}

@media (max-width:767px){
    
    /* NEW: specs box mobile par */
    .specs-box .sb-top{ grid-template-columns:1fr; gap:14px; }
    .specs-box .sb-social{ padding-left:0; flex-wrap:wrap; }
    .specs-box .sb-grid{ grid-template-columns:1fr; }
    .specs-box .sb-cell:nth-child(odd){ border-right:0; }
    .specs-box .sb-cell:nth-last-child(-n+2){ border-bottom:1px solid #E5E5E5; }
    .specs-box .sb-cell:last-child{ border-bottom:0; }
  
    .pd-gallery .pd-main {
        aspect-ratio: 4 / 4 !important;
    }
    
    .pd-desc-body {
        font-size: 13px;
    }
    
    .pd-desc-title {
        margin-bottom: 10px;
    }
    
    .pd-desc-body ul {
        padding-left: 0 !IMPORTANT;
    }
    
    .pd-rel-name a {
        font-size: 12px;
        line-height: normal;
        display: block;
    }
    
    .pd-rel-body {
        padding: 10px;
    }
    
    .pd-rel-btn {
        font-size: 10px;
        border-radius: 0;
        line-height: normal;
        padding: 6px;
    }
    
    .pd-rel-body .pd-stars {
        margin-bottom: 6px;
    }
    
    .pd-rel-name {
        min-height: unset;
    }
    
    .pd-meta {
        gap: 10px;
    }
    
    .pd-circles {
        gap: 6px;
    }
    
    .pd-cat {
        font-size: 13px;
    }
  
}

@media (max-width:575px){
    
    .pd-thumb{ width:80px; height:64px; }

    
}