/* Skeleton Overlay */
#skeleton{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;padding:0;transition:opacity 0.3s ease;overflow:hidden}
#skeleton.hide{opacity:0;pointer-events:none}
#skeleton.done{display:none}
.sk-nav{height:62px;background:var(--bg-alt);margin-bottom:0;border-bottom:1px solid var(--border)}
.sk-hero{height:160px;margin:20px auto;max-width:1280px;width:90%;border-radius:8px}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1280px;width:90%;margin:0 auto}
@media(max-width:900px){.sk-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.sk-grid{grid-template-columns:repeat(2,1fr)}}
.sk-card{aspect-ratio:4/5;border-radius:12px}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.sk{background:linear-gradient(90deg,var(--bg-alt) 25%,var(--border) 50%,var(--bg-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}
.sk-nav{height:62px;margin-bottom:20px}
.sk-hero{height:120px;margin-bottom:30px;width:100%}
.sk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.sk-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.sk-grid{grid-template-columns:repeat(2,1fr)}}
.sk-card{aspect-ratio:4/5;border-radius:12px}
.sk-text{height:14px;margin:10px 0;border-radius:4px;width:60%}
#categoryView,#subcategoryView{display:none}
#categoryView.active,#subcategoryView.active{display:block}
.product-card-wrap{background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:transform .3s ease,box-shadow .3s ease}
.product-card-wrap:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.product-card-wrap img{transition:transform .5s ease;width:100%;height:100%;object-fit:cover}
.product-card-wrap:hover img{transform:scale(1.05)}
.cat-header{background:var(--card);border-bottom:1px solid var(--border)}
.cat-header-inner{max-width:1280px;margin:0 auto;padding:40px 24px}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb a{color:inherit;text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span.active{color:var(--text);font-weight:500}
.cat-title{font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:var(--ls-heading);color:var(--text);margin-bottom:8px}
.cat-subtitle{color:var(--muted);font-size:15px}
.view-all-link{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:500;transition:color .2s;text-decoration:none}
.view-all-link:hover{color:var(--accent)}
.view-all-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s}
.view-all-link:hover::after{width:100%}
.subcategory-section{opacity:0;transform:translateY(30px);transition:all .5s ease}
.subcategory-section.visible{opacity:1;transform:translateY(0)}
.subsection-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.subsection-title{font-size:clamp(18px,2.5vw,22px);font-weight:600;color:var(--text)}
.subsection-count{font-size:13px;color:var(--muted);margin-top:4px}
.filter-checkbox{appearance:none;width:18px;height:18px;border:1.5px solid var(--border);border-radius:4px;cursor:pointer;transition:all .2s;position:relative;flex-shrink:0;background:var(--card)}
.filter-checkbox:checked{background:var(--accent);border-color:var(--accent)}
.filter-checkbox:checked::after{content:'✓';position:absolute;color:#fff;font-size:12px;top:50%;left:50%;transform:translate(-50%,-50%)}
.price-slider-wrap{position:relative;height:36px;display:flex;align-items:center}
.price-slider-track{position:absolute;left:0;right:0;height:4px;background:var(--border);border-radius:2px;pointer-events:none}
.price-slider-fill{position:absolute;height:4px;background:var(--accent);border-radius:2px;pointer-events:none}
.price-range{-webkit-appearance:none;appearance:none;position:absolute;width:100%;height:4px;background:transparent;outline:none;pointer-events:none;margin:0}
.price-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border:2px solid var(--card);box-shadow:var(--sh-sm);border-radius:50%;cursor:pointer;pointer-events:all;transition:transform .2s}
.price-range::-webkit-slider-thumb:hover{transform:scale(1.15)}
.price-range::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border:2px solid var(--card);box-shadow:var(--sh-sm);border-radius:50%;cursor:pointer;pointer-events:all;transition:transform .2s}
.prod-badge{position:absolute;top:12px;left:12px;padding:4px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:2px;background:var(--muted);color:#fff}
.prod-badge-discount{position:absolute;top:12px;right:12px;padding:4px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:2px;background:var(--success);color:#fff}
.size-btn{width:auto;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;cursor:pointer;background:var(--card);transition:all .2s;color:var(--text);font-family:var(--font-body)}
.size-btn:hover,.size-btn.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.filter-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--bg-alt);border-radius:20px;font-size:12px;cursor:pointer;transition:background .2s;color:var(--text);border:1px solid var(--border)}
.filter-tag:hover{background:var(--border)}
.no-product-msg{text-align:center;padding:48px 0;color:var(--muted)}
.subcat-products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media(max-width:1100px){.subcat-products-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.subcat-products-grid{grid-template-columns:repeat(2,1fr)}}
.sub-full-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.sub-full-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.sub-full-grid{grid-template-columns:repeat(2,1fr)}}
#filterSidebar{position:fixed;left:0;top:62px;width:272px;height:calc(100vh - 62px);overflow-y:auto;z-index:40;background:var(--card);border-right:1px solid var(--border);transition:transform .3s ease,opacity .3s ease}
#filterSidebar.hidden-filter{transform:translateX(-100%);opacity:0;pointer-events:none}
#showFilterBtn{display:none;position:fixed;left:0;top:88px;z-index:40;background:var(--card);border:1px solid var(--border);border-left:none;border-radius:0 8px 8px 0;padding:10px 12px;cursor:pointer;box-shadow:var(--sh-sm);color:var(--text)}
@media(max-width:768px){
#filterSidebar,#filterSidebar.hidden-filter{left:auto;right:0;top:0;width:85vw;max-width:320px;height:100vh;z-index:200;border-right:none;border-left:1px solid var(--border);box-shadow:var(--sh-xl);opacity:1;pointer-events:none;transform:translateX(100%);transition:transform .3s ease}
#filterSidebar.mobile-open{transform:translateX(0);pointer-events:all;opacity:1}
#subcategoryContent{margin-left:0!important}
#showFilterBtn{display:none!important}
}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:199;pointer-events:auto}
#mobileFilterBtn{display:none}
@media(max-width:768px){#mobileFilterBtn{display:inline-flex!important}}
.filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;margin-top:30px}
@media(max-width:991px){.filter-header{margin-top:80px}}
.filter-title{font-size:17px;font-weight:600;color:var(--text)}
.filter-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:14px}
.btn-apply{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-family:var(--font-heading);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-apply:hover{background:var(--accent-h)}