body { margin:0; font-family:Arial,sans-serif; background:#fff; color:#333; }
.site-header, .site-footer { text-align:center; padding:15px; background:#222; color:#fff; }
.menu { text-align:center; margin-bottom:15px; }
.menu a { margin:0 10px; color:#fff; text-decoration:none; }

/* Gallery */
.gallery { display:flex; flex-direction:column; align-items:center; padding:20px; width:100%; }
.category-grid-wrapper { display:flex; justify-content:center; width:100%; }
.category-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.category-thumb { text-align:center; cursor:pointer; transition: transform 0.3s ease-in-out; }
.category-thumb:hover { transform:scale(1.05); }
.thumb-frame { position:relative; width:120px; height:120px; margin-bottom:8px; overflow:hidden; border-radius:6px; border:2px solid #ccc; }
.thumb-frame img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity 0.6s ease-in-out; }
.thumb-frame img.active { opacity:1; }
.category-thumb p { font-size:16px; margin:5px 0 0; font-weight:bold; }

/* FEATURED IMAGE */
.featured-single-wrapper { display:flex; flex-direction:column; align-items:center; margin-top:40px; }
.featured-label { font-weight:bold; margin-bottom:10px; font-size:18px; color:#333; text-align:center; text-transform:uppercase; letter-spacing:1px; }
.featured-frame {
  width:600px;
  height:350px;
  max-width:90vw;
  max-height:70vh;
  border:3px solid #999;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition: all 0.5s ease;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f8f8f8;
}
.featured-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform 0.5s ease;
}
.featured-frame.zoomed {
  width:90vw;
  height:70vh;
  box-shadow:0 15px 35px rgba(0,0,0,0.4);
}
.featured-frame.zoomed img { transform:scale(1.2); }

/* Banner */
.banner-container { position:relative; width:100%; height:300px; overflow:hidden; display:flex; justify-content:center; align-items:center; background:#113311; z-index:0; border-radius:6px; }
.banner-container img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:0; transition:opacity 1s ease-in-out; pointer-events:none; }
.banner-container img.active { opacity:1; }
.banner-logo { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:20; }
.banner-logo img { max-height:80px; display:block; }

/* Lightbox */
#lightbox { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; background:rgba(0,50,0,0.95); flex-direction:column; align-items:center; justify-content:center; padding:20px; }
#lightbox img { max-width:90%; max-height:70vh; margin-bottom:10px; cursor:zoom-in; object-fit:contain; transition: transform 1.5s ease, opacity 0.5s ease; position:relative; z-index:1; }
#thumb-strip { display:flex; gap:5px; overflow-x:auto; overflow-y:hidden; padding:10px 0; z-index:1; -ms-overflow-style:none; scrollbar-width:none; }
#thumb-strip::-webkit-scrollbar { display:none; }
#thumb-strip img { width:60px; height:60px; object-fit:cover; cursor:pointer; border:2px solid transparent; transition: transform 0.3s ease; }
#thumb-strip img.active, #thumb-strip img:hover { border:2px solid #fff; transform:scale(1.1); }

#close, #prev, #next { font-size:28px; color:#fff !important; cursor:pointer; user-select:none; z-index:15; }
#lightbox-controls { position:absolute; top:20px; left:50%; transform:translateX(-50%); display:flex; gap:35px; align-items:center; justify-content:center; z-index:9999; }
#lightbox-controls span, #lightbox-controls a { color:white; font-size:28px; text-decoration:none; cursor:pointer; user-select:none; filter: drop-shadow(0 0 5px rgba(0,0,0,0.8)); transition: transform 0.2s; }
#lightbox-controls span:hover, #lightbox-controls a:hover { transform:scale(1.2); }
#close { top:20px; right:20px; position:absolute; }
#prev { left:20px; top:50%; transform:translateY(-50%); position:absolute; }
#next { right:50px; top:50%; transform:translateY(-50%); position:absolute; }

@media (min-width:1024px){#prev,#next{font-size:48px;padding:15px;}}
@media (max-width:480px){#prev,#next{font-size:32px;padding:10px;}}