/* Category Tabs */
/* .ptl-category-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:30px 20px;
  background:#000;
  flex-wrap:wrap;
} */
 /* Category Tabs */
.ptl-category-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  padding:30px 20px;
  background:#000;
  flex-wrap:wrap;
  width:100%;
  max-width:100vw;
  margin:0;
  box-sizing:border-box;
}
.ptl-cat-tab{
  background:transparent;
  border:none;
  color:#888;
  font-size:13px;
  letter-spacing:1.5px;
  cursor:pointer;
  padding:0 0 8px 0;
  text-transform:uppercase;
  position:relative;
  transition:color 0.3s;
  font-weight:500;
}

.ptl-cat-tab::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background: #f39c12;
  transition:width 0.3s ease;
}

.ptl-cat-tab.active{
  color:#fff;
}

.ptl-cat-tab.active::after{
  width:100%;
}

.ptl-cat-tab:hover{
  color:#f39c12;
}

/* Grid Layout */
.ptl-grid{
  display:grid;
  gap:0;
  padding:0;
  grid-template-columns:repeat(4,1fr);
  width:100%;
  max-width:none;
  margin:0;
}

/* Column Options */
.ptl-cols-2{grid-template-columns:repeat(2,1fr);}
.ptl-cols-3{grid-template-columns:repeat(3,1fr);}
.ptl-cols-4{grid-template-columns:repeat(4,1fr);}

/* Responsive - Tablet 2 columns */
@media(max-width:1200px){
  .ptl-cols-4{grid-template-columns:repeat(2,1fr);}
}

/* Responsive - Mobile 1 column */
@media(max-width:768px){
  .ptl-cols-2,.ptl-cols-3,.ptl-cols-4{grid-template-columns:1fr;}
}

/* Grid Item */
.ptl-grid-item{
  position:relative;
  transition:all 0.3s ease;
}

.ptl-img-wrap{
  position:relative;
  overflow:hidden;
  border:3px solid transparent;
  transition:all 0.4s ease;
}

.ptl-grid-item:hover .ptl-img-wrap{
  border-color:#c9a26c;
}

.ptl-img-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform 0.5s ease;
}

.ptl-grid-item:hover .ptl-img-wrap img{
  transform:scale(1.08);
}

/* Hover Overlay */
.ptl-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(54,48,43,0.85), rgba(74,64,57,0.9));
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 0.4s ease;
  padding:30px;
}

.ptl-grid-item:hover .ptl-overlay{
  opacity:1;
}

.ptl-content{
  text-align:center;
  color:#fff;
  transform:translateY(15px);
  transition:transform 0.4s ease 0.1s;
  width:100%;
  padding:0;
}

.ptl-grid-item:hover .ptl-content{
  transform:translateY(0);
}

.ptl-content h3{
  font-size:20px;
  font-weight:400;
  margin:0 0 15px 0;
  color:#d4af7a;
  letter-spacing:2px;
  font-family:serif;
}

.ptl-line{
  width:100%;
  height:1px;
  background:#d4af7a;
  margin:15px 0;
  position:relative;
}

.ptl-line::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:5px;
  height:5px;
  background:#d4af7a;
  border-radius:50%;
}

.ptl-content p{
  font-size:13px;
  line-height:1.6;
  margin:15px 0 25px 0;
  color:#d4af7a;
  font-weight:300;
}

.ptl-btn{
  background:transparent;
  border:1px solid #d4af7a;
  color:#d4af7a;
  padding:10px 28px;
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  cursor:pointer;
  transition:all 0.3s;
  text-transform:uppercase;
}

.ptl-btn:hover{
  background:#d4af7a;
  color:#2a2520;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(212,175,122,0.3);
}

/* Popup Lightbox */
#ptl-popup{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.95);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999999;
}

@keyframes ptlFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

#ptl-title{
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  color:#d4af7a;
  font-size:26px;
  font-weight:400;
  text-align:center;
  margin:0;
  z-index:10;
  letter-spacing:3px;
  font-family:serif;
}

#ptl-counter{
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  color:#d4af7a;
  font-size:14px;
  background:rgba(212,175,122,0.15);
  padding:8px 20px;
  border-radius:20px;
  border:1px solid rgba(212,175,122,0.3);
  z-index:10;
}

#ptl-img{
  max-width:85%;
  max-height:75%;
  object-fit:contain;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}

/* Popup Controls */
.ptl-close,.ptl-prev,.ptl-next{
  position:absolute;
  color:#d4af7a;
  background:rgba(212,175,122,0.1);
  border:1px solid rgba(212,175,122,0.3);
  cursor:pointer;
  transition:all 0.3s;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  width:50px;
  height:50px;
}

.ptl-close:hover,.ptl-prev:hover,.ptl-next:hover{
  background:rgba(212,175,122,0.2);
  border-color:#d4af7a;
  transform:scale(1.05);
}

.ptl-close{
  top:20px;
  right:20px;
  font-size:32px;
  width:45px;
  height:45px;
}

.ptl-prev{
  left:40px;
  top:50%;
  transform:translateY(-50%);
}

.ptl-next{
  right:40px;
  top:50%;
  transform:translateY(-50%);
}

.ptl-prev:hover{
  transform:translateY(-50%) scale(1.05);
}

.ptl-next:hover{
  transform:translateY(-50%) scale(1.05);
}

/* Slide Animations */
.ptl-slide-out-left{
  animation:ptlSlideOutLeft 0.35s forwards;
}
.ptl-slide-in-right{
  animation:ptlSlideInRight 0.35s forwards;
}
.ptl-slide-out-right{
  animation:ptlSlideOutRight 0.35s forwards;
}
.ptl-slide-in-left{
  animation:ptlSlideInLeft 0.35s forwards;
}

@keyframes ptlSlideOutLeft{
  from{transform:translateX(0);opacity:1;}
  to{transform:translateX(-40%);opacity:0;}
}
@keyframes ptlSlideInRight{
  from{transform:translateX(40%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes ptlSlideOutRight{
  from{transform:translateX(0);opacity:1;}
  to{transform:translateX(40%);opacity:0;}
}
@keyframes ptlSlideInLeft{
  from{transform:translateX(-40%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}

/* Mobile Responsive */
@media(max-width:768px){
  .ptl-category-tabs{
    gap:20px;
    padding:20px 15px;
  }
  .ptl-cat-tab{
    font-size:12px;
  }
  #ptl-title{font-size:18px;top:20px;letter-spacing:2px;}
  #ptl-counter{bottom:25px;font-size:12px;padding:6px 14px;}
  #ptl-img{max-width:95%;max-height:70%;}
  .ptl-close,.ptl-prev,.ptl-next{width:40px;height:40px;font-size:20px;}
  .ptl-prev{left:15px;}
  .ptl-next{right:15px;}
  .ptl-content h3{font-size:18px;}
  .ptl-content p{font-size:12px;}
  .ptl-overlay{padding:20px;}
}