/* ===== SHOP HERO ===== */
.shop-hero{position:relative;background:var(--black);padding:100px 60px 72px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,0.06);margin-top:64px}
.shop-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(255,59,59,0.05) 0%,transparent 60%)}
.shop-hero-content{position:relative;z-index:1;max-width:640px}
.shop-hero-label{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.shop-hero-title{font-family:'ChapelliaBold',sans-serif;font-size:clamp(48px,7vw,88px);color:var(--white);letter-spacing:2px;line-height:1;margin-bottom:16px}
.shop-hero-sub{font-size:13px;color:rgba(255,255,255,0.4);letter-spacing:1px;margin-bottom:24px}
.shop-hero-stock{display:flex;align-items:center;gap:12px}
.shop-hero-stock-line{width:32px;height:1px;background:var(--accent)}
.shop-hero-stock-text{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:600}

/* ===== FILTER BAR ===== */
.shop-filter-bar{background:#0d0d0d;border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:64px;z-index:100}
.shop-filter-inner{max-width:1400px;margin:0 auto;padding:14px 60px;display:flex;align-items:center;gap:24px}
.shop-filter-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.25);white-space:nowrap}
.shop-filter-btns{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.shop-filter-btn{padding:7px 18px;border:1px solid rgba(255,255,255,0.1);background:transparent;font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;font-family:'ChapelliaReg',sans-serif;color:rgba(255,255,255,0.35)}
.shop-filter-btn.active,.shop-filter-btn:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.shop-filter-count{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.2);white-space:nowrap}

/* ===== SHOP MAIN ===== */
.shop-main{background:var(--black);min-height:60vh;padding:48px 60px 80px}

/* ===== GRID ===== */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}

/* ===== CARD ===== */
.shop-card{cursor:pointer;background:#0d0d0d;position:relative;overflow:hidden}
.shop-card-img{aspect-ratio:3/4;background:#111;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.shop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.shop-card:hover .shop-card-img img{transform:scale(1.06)}
.shop-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#111}
.shop-card-placeholder span{font-family:'ChapelliaBold',sans-serif;font-size:clamp(40px,6vw,80px);color:rgba(255,255,255,0.06);letter-spacing:-2px}
.shop-card-badge{position:absolute;top:16px;left:16px;background:var(--accent);color:var(--white);font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:4px 10px;font-weight:600;z-index:2}
.shop-card-badge-stock{position:absolute;top:16px;right:16px;background:rgba(245,158,11,0.85);color:var(--white);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-weight:600;z-index:2}
.shop-card-badge-sold{position:absolute;top:16px;right:16px;background:rgba(0,0,0,0.6);color:rgba(255,255,255,0.4);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:4px 10px;font-weight:600;z-index:2}
.shop-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(to top,rgba(0,0,0,0.96),transparent);transform:translateY(100%);transition:transform .3s ease;z-index:3}
.shop-card:hover .shop-card-overlay{transform:translateY(0)}
.shop-card-btn{width:100%;padding:12px;background:var(--white);color:var(--black);font-size:10px;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;font-weight:700;font-family:'ChapelliaBold',sans-serif;transition:all .2s}
.shop-card-btn:hover{background:var(--accent);color:var(--white)}
.shop-card-btn-sold{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.25);cursor:not-allowed}
.shop-card-btn-sold:hover{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.25)}
.shop-card-info{padding:18px 20px 22px;background:#0d0d0d;border-top:1px solid rgba(255,255,255,0.04)}
.shop-card-name{font-family:'ChapelliaBold',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--white);margin-bottom:10px}
.shop-card-meta{display:flex;justify-content:space-between;align-items:center}
.shop-card-sub{font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:1px;text-transform:uppercase}
.shop-card-price{font-family:'ChapelliaBold',sans-serif;font-size:14px;color:var(--white)}

/* ===== EMPTY ===== */
.shop-empty{text-align:center;padding:120px 20px;color:var(--white)}
.shop-empty-icon{font-size:40px;color:rgba(255,255,255,0.08);margin-bottom:20px}
.shop-empty-title{font-family:'ChapelliaBold',sans-serif;font-size:36px;letter-spacing:2px;margin-bottom:12px}
.shop-empty-sub{font-size:13px;color:rgba(255,255,255,0.25)}

/* ===== TABLET 1200 ===== */
@media(max-width:1200px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== TABLET 1024 ===== */
@media(max-width:1024px){
  .shop-hero{padding:80px 40px 56px}
  .shop-main{padding:40px 40px 64px}
  .shop-filter-inner{padding:14px 40px}
}

/* ===== MOBILE 768 ===== */
@media(max-width:768px){
  .shop-hero{padding:60px 20px 40px;margin-top:64px}
  .shop-main{padding:8px 0 80px}
  .shop-grid{
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding:4px;
  }
  .shop-card-img{aspect-ratio:2/3}
  .shop-card-info{padding:8px 8px 10px}
  .shop-card-name{font-size:9px;letter-spacing:1px}
  .shop-card-price{font-size:10px}
  .shop-card-sub{font-size:8px}
  .shop-card-badge{font-size:7px;padding:3px 6px;top:8px;left:8px}
  .shop-card-badge-stock,.shop-card-badge-sold{font-size:7px;padding:3px 6px;top:8px;right:8px}
  .shop-card-overlay{display:none}
}

/* ===== MOBILE 480 ===== */
@media(max-width:480px){
  .shop-grid{
    grid-template-columns:repeat(3,1fr);
    gap:3px;
    padding:3px;
  }
}

/* ===== MOBILE KECIL 400 ===== */
@media(max-width:400px){
  .shop-grid{
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    padding:2px;
  }
  .shop-card-name{font-size:8px}
  .shop-card-price{font-size:9px}
}