:root{
  --bg:#FFFFFF; --ink:#0A0A0A; --muted:#4D4D4D; --line:#E0E0E0; --card:#FAFAFA;
  --btn:#000; --btnText:#fff; --hover:#333;
  --radius:16px; --shadow:0 12px 26px rgba(0,0,0,.08);
}

/* Motion */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
[data-animate]{opacity:0;transform:translateY(12px)}
[data-animate].in{animation:fadeUp .55s cubic-bezier(.2,.8,.2,1) forwards}

/* Page container */
.store-page{background:var(--bg);}

/* HERO */
.store-hero{
  position:relative; isolation:isolate;
  padding:24px 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.store-hero .hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 200px at 50% -40px, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(#fff, #fff);
}
.hero-title{letter-spacing:.2px}
.divider{height:1px;background:var(--line)}

/* Cards / shells */
.store-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow);
}

.badge-soft{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
}

.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.muted{color:var(--muted)}
.tiny{font-size:.8rem}

/* Avatar */
.avatar{
  width:88px;height:88px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(80% 80% at 20% 20%, #1e1e1e 0%, #000 60%);
  color:#fff;font-weight:800;font-size:28px;letter-spacing:.5px;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Stats */
.stats .stat-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:14px 16px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.stats .stat-card:hover{transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06)}
.stats .value{font-weight:800;font-size:1.25rem}

/* Vouchers rail */
.voucher-rail{display:flex;gap:12px;overflow:auto;padding:6px 2px;scroll-snap-type:x proximity}
.voucher-rail::-webkit-scrollbar{height:8px}
.voucher-rail::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:8px}
.voucher{min-width:300px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;transition:transform .22s, box-shadow .22s;scroll-snap-align:start}
.voucher:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.voucher .top{display:flex;justify-content:space-between;align-items:center}
.voucher .pct{font-weight:800;font-size:1.1rem}
.voucher .meta{font-size:.86rem;color:var(--muted)}
.voucher .bar{height:6px;background:#eee;border-radius:4px;overflow:hidden}
.voucher .bar>span{display:block;height:6px;background:linear-gradient(90deg,#000,#4d4d4d)}

/* Sticky filters shell */
.sticky-filters{position:sticky; top:64px; z-index:8; backdrop-filter:saturate(1.1)}
.sticky-filters .form-control,
.sticky-filters .form-select{
  border:2px solid var(--line); border-radius:10px; box-shadow:none;
}
.sticky-filters .form-control:focus,
.sticky-filters .form-select:focus{
  border-color:#000; box-shadow:none;
}

/* Product cards */
.p-card{
  position:relative; display:flex; flex-direction:column;
  height:420px; max-height:420px;
  border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
@media (max-width:576px){ .p-card{ height:380px } }
.p-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.08) }

.p-img{ position:relative; overflow:hidden; aspect-ratio: 16/11; background:#f6f6f6; }
.p-img img{ width:100%; height:100% !important; object-fit:cover; object-position:center; display:block; }

.p-info{ flex:1 1 auto; padding:16px 18px; }
.p-title{ font-weight:800; font-size:1.02rem; margin:0 0 .35rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-price{ font-weight:900; font-size:1.08rem; }
.p-meta{ font-size:.92rem; color:var(--muted); }

/* Heart pin */
.wish{ position:absolute; top:10px; right:10px; z-index:2; background:#fff; border:1px solid var(--line); width:36px;height:36px;border-radius:999px; display:grid;place-items:center; }
.wish i{ font-size:14px; }

/* Pagination */
.pagination .page-link{ color:#000;border-color:var(--line);border-radius:10px }
.pagination .page-link:hover{background:#f6f6f6}
.pagination .page-item.active .page-link{background:#000;border-color:#000;color:#fff}

/* Focus ring */
a:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible{
  outline:2px solid #000; outline-offset:2px;
}

/* Live-search skeletons */
.skeleton-card{
  border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; height:420px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
.skel-img{ height:55%; background:#eee }
.skel-text{ padding:16px 18px }
.skel-line{ height:12px; background:#eee; border-radius:8px; margin-bottom:10px }
.skel-line.short{ width:50% }

/* Tiny utilities */
.text-muted.small{color:var(--muted)!important}
.container{max-width:1200px}