*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8f5ef;--surface:#ffffff;--surface2:#f3ede3;--border:#dfd2bc;
  --gold:#c8a84b;--gold-light:#e2c978;--gold-muted:#8a6f2e;
  --text:#2b241c;--text-muted:#7f6d58;--radius:10px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}

.gallery-header{padding:2.5rem 1.5rem 1.5rem;text-align:center;border-bottom:1px solid var(--border)}
.header-logo{font-size:1.8rem;font-weight:700;letter-spacing:.05em}
.logo-wood{color:var(--text)}
.logo-gold{color:var(--gold)}
.logo-divider{color:var(--border);margin:0 .6rem}
.logo-gallery{color:var(--text-muted);font-weight:400;font-size:1.1rem}
.header-subtitle{color:var(--text-muted);margin-top:.4rem;font-size:.9rem}

.gallery-main{max-width:1400px;margin:0 auto;padding:1.5rem}

.tags-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.tag-pill{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);
  padding:.35rem .9rem;border-radius:99px;cursor:pointer;font-size:.85rem;transition:all .2s}
.tag-pill:hover{border-color:var(--gold-muted);color:var(--text)}
.tag-pill.active{background:var(--gold);border-color:var(--gold);color:#1a1612;font-weight:600}

.gallery-grid{columns:4;column-gap:1rem}
.gallery-card{break-inside:avoid;margin-bottom:1rem;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);cursor:pointer;position:relative;transition:transform .2s}
.gallery-card:hover{transform:translateY(-3px)}
.gallery-card img,.gallery-card video{width:100%;display:block;object-fit:cover}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 40%,transparent);
  opacity:0;transition:opacity .2s;display:flex;flex-direction:column;justify-content:flex-end;padding:.75rem}
.gallery-card:hover .card-overlay{opacity:1}
.card-title{color:#fff;font-size:.85rem;font-weight:600;line-height:1.3}
.card-product{color:var(--gold-light);font-size:.75rem;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-video-icon{position:absolute;top:.6rem;right:.6rem;background:rgba(0,0,0,.6);
  color:#fff;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem}

.skeleton-grid{columns:4;column-gap:1rem}
.skeleton-card{break-inside:avoid;margin-bottom:1rem;border-radius:var(--radius);
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;height:220px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.load-more-wrap{text-align:center;margin-top:1.5rem}
.btn-load-more{background:transparent;border:1px solid var(--gold-muted);color:var(--gold);
  padding:.6rem 2rem;border-radius:99px;cursor:pointer;font-size:.9rem;transition:all .2s}
.btn-load-more:hover{background:var(--gold);color:#1a1612}
.empty-state{text-align:center;padding:4rem;color:var(--text-muted)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem}

/* Lightbox */
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;backdrop-filter:blur(4px)}
.lightbox-overlay.active,.lightbox.active{display:flex!important}
.lightbox{display:none;position:fixed;inset:0;z-index:101;align-items:center;justify-content:center;padding:1rem}
.lb-close{position:absolute;top:1rem;right:1rem;background:var(--surface2);border:1px solid var(--border);
  color:var(--text);width:2.5rem;height:2.5rem;border-radius:50%;cursor:pointer;font-size:1.1rem;z-index:10}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);
  border:1px solid var(--border);color:var(--text);width:3rem;height:3rem;border-radius:50%;
  cursor:pointer;font-size:1.8rem;z-index:10;display:flex;align-items:center;justify-content:center;line-height:1}
.lb-prev{left:1rem}.lb-next{right:1rem}
.lb-inner{display:flex;width:100%;max-width:1100px;max-height:90vh;background:var(--surface);
  border-radius:16px;border:1px solid var(--border);overflow:hidden}
.lb-media-wrap{flex:1;min-width:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:90vh}
.lb-media-wrap img,.lb-media-wrap video{max-width:100%;max-height:calc(90vh - 80px);object-fit:contain}
.lb-strip{display:flex;gap:.4rem;padding:.5rem;overflow-x:auto;background:rgba(0,0,0,.4);width:100%}
.lb-strip-item{width:50px;height:50px;border-radius:6px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;flex-shrink:0;transition:border-color .2s}
.lb-strip-item.active{border-color:var(--gold)}
.lb-strip-item img{width:100%;height:100%;object-fit:cover}
.lb-info{width:320px;flex-shrink:0;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem}
.lb-title{font-size:1.15rem;font-weight:700;color:var(--gold-light);line-height:1.3}
.lb-stars{color:var(--gold);font-size:1rem;letter-spacing:.1em}
.lb-text{color:var(--text-muted);font-size:.88rem;line-height:1.6;flex:1}
.lb-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.lb-tag{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);
  padding:.2rem .65rem;border-radius:99px;font-size:.78rem}
.lb-product{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.lb-product-name{color:var(--text-muted);font-size:.82rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-ozon-btn{background:var(--gold);color:#1a1612;padding:.35rem .9rem;border-radius:99px;
  font-weight:600;font-size:.82rem;text-decoration:none;white-space:nowrap;transition:background .2s}
.lb-ozon-btn:hover{background:var(--gold-light)}

@media(max-width:1100px){.gallery-grid,.skeleton-grid{columns:3}}
@media(max-width:700px){
  .gallery-grid,.skeleton-grid{columns:2}
  .lb-inner{flex-direction:column;max-height:95vh;overflow-y:auto}
  .lb-info{width:100%;max-height:45vh}
  .lb-media-wrap{max-height:50vw;min-height:200px}
  .lb-nav{display:none}
}
@media(max-width:420px){.gallery-grid,.skeleton-grid{columns:2}}