/* ========================================
   SHARED PRODUCT PAGE STYLES
   Reusable across all product pages
   ======================================== */

/* Product hero section */
.product-hero{
  padding:clamp(60px,10vw,120px) var(--gutter);
  background:var(--stone);
  position:relative;
}

/* Product grid layout */
.product-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,80px);
  align-items:start;
}

/* Product images section */
.product-images{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.product-image{
  aspect-ratio:1;
  background:var(--bark);
  overflow:hidden;
  display:grid;
  place-items:center;
  position:relative;
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:all 0.4s ease;
  position:absolute;
  top:0;
  left:0;
  filter:saturate(0.9) contrast(1.05);
}

/* Image slide animations */
.product-image img.slide-out-left{transform:translateX(-100%);opacity:0}
.product-image img.slide-out-right{transform:translateX(100%);opacity:0}
.product-image img.slide-in-left{transform:translateX(-100%);opacity:0}
.product-image img.slide-in-right{transform:translateX(100%);opacity:0}
.product-image img.active{transform:translateX(0) translateY(0);opacity:1}

/* Thumbnails */
.product-thumbnails{
  display:flex;
  gap:12px;
  margin-top:16px;
}

.thumbnail{
  width:80px;
  height:80px;
  background:var(--bark);
  overflow:hidden;
  cursor:pointer;
  transition:all 0.2s ease;
  opacity:0.6;
  border:2px solid transparent;
}

.thumbnail:hover,.thumbnail.active{
  opacity:1;
  border-color:var(--moss);
}

.thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.05);
}

/* Product info section */
.product-info h1{
  margin-bottom:8px;
  color:var(--clay);
}

.product-info > .muted{
  font-size:clamp(13px,1.5vw,15px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:clamp(20px,3vw,32px);
  display:block;
}

.product-price{
  font-size:clamp(28px,4vw,40px);
  color:var(--leather);
  font-weight:700;
  margin:0 0 clamp(24px,4vw,36px) 0;
  font-family:"Work Sans", system-ui, sans-serif;
}

.product-description{
  margin-bottom:clamp(32px,5vw,48px);
  line-height:1.8;
  color:var(--clay);
}

.product-description p{
  margin-bottom:1em;
}

.product-description p:last-child{
  margin-bottom:0;
}

/* Product features box */
.product-features{
  margin:clamp(32px,5vw,48px) 0;
  padding:clamp(24px,4vw,32px);
  background:var(--stone-dark);
}

.product-features h3{
  color:var(--clay);
  font-family:"Work Sans", system-ui, sans-serif;
  font-size:clamp(16px,2vw,20px);
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:700;
}

.product-features ul{
  list-style:none;
  padding:0;
  margin:0;
}

.product-features li{
  padding:10px 0;
  border-bottom:1px solid rgba(74,63,53,0.2);
  position:relative;
  padding-left:20px;
  color:var(--clay);
}

.product-features li:before{
  content:'•';
  color:var(--moss);
  font-weight:bold;
  position:absolute;
  left:0;
}

.product-features li:last-child{
  border-bottom:none;
}

/* Buttons */
.btn.primary{
  background:var(--moss);
  border:2px solid var(--moss);
  color:var(--stone);
}

.btn.primary:hover{
  background:var(--sage);
  border-color:var(--sage);
}

/* Back link */
.back-link{
  color:var(--clay-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:clamp(24px,4vw,36px);
  transition:color 0.2s ease;
  text-transform:uppercase;
  font-size:clamp(13px,1.4vw,14px);
  letter-spacing:0.08em;
  font-weight:600;
}

.back-link:hover{
  color:var(--moss);
}

/* Responsive */
@media (max-width: 768px){
  .product-grid{
    grid-template-columns:1fr;
    gap:clamp(32px,6vw,48px);
  }
  .product-thumbnails{
    flex-wrap:wrap;
  }
  .thumbnail{
    width:70px;
    height:70px;
  }
}