:root{
  --bg:#ffffff;
  --surface:#f7f7fb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(17,24,39,.08);
  --primary:#7c3aed;
  --primary2:#a78bfa;
  --success:#16a34a;
  --danger:#ef4444;
  --radius:16px;
  --radius-sm:12px;
  --container:1200px;
  --gap:16px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.site-container{max-width:var(--container);margin:0 auto;padding:0 16px}
.main{padding:0 0 12px}

.is-disabled{opacity:.6;pointer-events:none}
.is-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand__logo{width:36px;height:36px;border-radius:10px;object-fit:cover;background:var(--surface)}
.brand__name{font-size:16px}
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--muted);font-weight:600;padding:8px 10px;border-radius:10px}
.nav a.is-active{color:var(--text);background:var(--surface)}
.nav a:hover{background:var(--surface);color:var(--text)}
.nav-cta{margin-left:8px}
.burger{display:none;border:1px solid var(--border);background:var(--bg);border-radius:12px;padding:10px;cursor:pointer;font-size:18px;line-height:1}

.mobile-nav{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{filter:brightness(.98)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{background:var(--surface)}
.btn-danger{background:var(--danger);color:#fff}

.hero{background:linear-gradient(180deg, rgba(124,58,237,.10), rgba(255,255,255,0));padding:42px 0 22px}
.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px;letter-spacing:-.4px}
.hero p{margin:0 0 18px;color:var(--muted);max-width:56ch}
.hero__card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.hero__card h3{margin:0 0 8px;font-size:18px}
.hero__card p{color:var(--muted)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}

.section{padding:26px 0}
.section__title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section__title h2{margin:0;font-size:20px}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(4, minmax(0,1fr))}

.media{position:relative;background:var(--surface);overflow:hidden}
.media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(247,247,251,0), rgba(255,255,255,.7), rgba(247,247,251,0));transform:translateX(-100%);animation:shimmer 1.4s infinite}
.media.is-loaded::before{animation:none;opacity:0}
.media img{width:100%;height:100%;object-fit:cover;display:block}

@keyframes shimmer{
  100%{transform:translateX(100%)}
}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 0 rgba(17,24,39,.03);overflow:hidden;transition:transform .12s ease, box-shadow .12s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card__media{aspect-ratio:3/4;border-radius:var(--radius-sm);position:relative;overflow:hidden}
.card__placeholder{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:var(--muted);letter-spacing:.4px}
.badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.50);border:1px solid #e5e7eb70}
.badge.is-out{color:var(--danger)}
.badge.is-unique{color:var(--primary)}
.badge.is-in{color:var(--success)}
.card__body{padding:12px;display:grid;gap:6px}
.card__name{font-weight:800;margin:0;font-size:14px;line-height:1.25}
.card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-weight:700;font-size:13px}
.price{color:var(--text);font-weight:900}
.small{color:var(--muted);font-weight:650;font-size:13px}
.keyword-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.keyword-list li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;color:var(--muted)}

.filters{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:16px}
.input,.select{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff;font-weight:650}
.input:focus,.select:focus{outline:2px solid rgba(124,58,237,.25);border-color:rgba(124,58,237,.5)}

.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{filter:brightness(.98)}

.info-section{padding:18px 0}
.info-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.info-text{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 1px 0 rgba(17,24,39,.03)}
.info-text h2{margin-top:0;margin-bottom:8px;font-size:22px;letter-spacing:-.2px}
.info-text p{margin:0 0 12px;color:var(--muted)}
.info-text ul{padding-left:18px;margin:0 0 12px;color:var(--muted);display:grid;gap:6px}
.info-steps{padding-left:18px;margin:0 0 12px;color:var(--muted);display:grid;gap:6px}
.info-tiles{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px}
@media (min-width: 1100px){
  .info-tiles{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.info-tile{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);aspect-ratio:3/4}
.info-tile--ph{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;letter-spacing:.2px}

.pager{display:flex;justify-content:center;gap:10px;margin-top:18px}
.pager{align-items:center;flex-wrap:wrap}
.pager a{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-weight:800;color:var(--text)}
.pager a.is-disabled{opacity:.45;pointer-events:none}
.pager__info{color:var(--muted);font-weight:700;font-size:13px}

.product{padding:26px 0}
.product__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.product__media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);min-height:320px;display:block;aspect-ratio:4/5}
.product__placeholder{display:grid;place-items:center;height:100%;color:var(--muted);font-weight:800;letter-spacing:.4px}
.product__panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 1px 0 rgba(17,24,39,.03)}
.product__title{margin:0 0 8px;font-size:22px;letter-spacing:-.2px}
.product__subtitle{margin:0 0 8px;font-size:16px}
.product__details ul{padding-left:18px;margin:0;color:var(--muted);display:grid;gap:6px;font-size:13px;font-weight:650}
.product__details a{color:var(--text);text-decoration:underline}
.product__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.divider{height:1px;background:var(--border);margin:14px 0}

.hero__cta .btn{min-width:0}

.site-footer{margin-top:36px;border-top:1px solid var(--border);background:var(--surface)}
.site-footer__inner{padding:22px 0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.site-footer a{color:var(--muted);font-weight:700}
.site-footer p{margin:6px 0;color:var(--muted)}
.site-footer__bottom{padding:0 0 18px}

@media (max-width: 1100px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width: 860px){
  .nav{display:none}
  .burger{display:inline-flex}
  .mobile-nav{display:none;position:fixed;inset:64px 0 auto 0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}
  .mobile-nav.is-open{display:block}
  .mobile-nav__inner{padding:12px 16px;display:grid;gap:8px}
  .mobile-nav a{padding:12px 12px;border-radius:12px;background:var(--surface);font-weight:700;color:var(--text)}
  .mobile-nav a.is-active{
    outline:2px solid rgba(124,58,237,.22);
    border:1px solid rgba(124,58,237,.35);
  }
  .hero__grid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr;}
  .product__grid{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .grid{grid-template-columns:1fr}
}