@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('../fonts/poppins-800.woff2') format('woff2'); }

  :root { --primary:#C2185B; --primary-dark:#9c1049; --primary-light:#E91E63; --pink-bg:#FCE4EC;
          --pink-soft:#FFF5F8; --text:#333; --text-soft:#6b6b6b; --white:#fff; --dark:#2b2230; }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Poppins','Segoe UI',Arial,sans-serif; color:var(--text); background:var(--pink-soft); line-height:1.6; }
  a { text-decoration:none; color:var(--primary); }
  .container { max-width:1140px; margin:0 auto; padding:0 24px; }
  header { position:sticky; top:0; z-index:50; background:var(--white); box-shadow:0 2px 14px rgba(0,0,0,.07); }
  .nav { display:flex; align-items:center; justify-content:space-between; height:72px; }
  .logo { font-size:24px; font-weight:700; color:var(--primary); }
  .logo span { color:var(--text); font-weight:400; }
  nav ul, nav li { list-style:none !important; margin:0; padding:0; }
  nav ul { display:flex; gap:6px; }
  nav a { display:inline-block; color:var(--text); font-weight:500; font-size:15px; padding:8px 14px; border-radius:30px; }
  nav a:hover { color:var(--primary); background:var(--pink-bg); }
  nav a.active { background:var(--pink-bg); color:var(--primary); font-weight:600; }
  nav a.cta { background:var(--primary); color:#fff; font-weight:600; }
  .burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
  .burger span { width:26px; height:3px; background:var(--primary); border-radius:2px; }

  .page-head { background:linear-gradient(140deg,var(--pink-bg),var(--pink-soft)); padding:56px 0 24px; text-align:center; }
  .page-head h1 { font-size:36px; color:var(--primary-dark); margin-bottom:8px; }
  .page-head p { color:var(--text-soft); max-width:560px; margin:0 auto; }

  .toolbar { background:var(--white); padding:20px 0 22px; box-shadow:0 6px 18px rgba(194,24,91,.06); }
  .toolbar-inner { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; }
  .toolbar .label { font-size:12.5px; letter-spacing:2px; color:var(--text-soft); text-transform:uppercase; width:100%; text-align:center; margin-bottom:4px; font-weight:600; }
  .chip { padding:10px 22px; border-radius:30px; border:1.5px solid #eecfdc; background:var(--white);
          color:var(--text); font-size:14.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .15s; }
  .chip:hover { border-color:var(--primary); color:var(--primary); }
  .chip.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
  .sort { margin-left:14px; padding:10px 16px; border-radius:30px; border:1.5px solid #eecfdc; background:var(--white);
          font-family:inherit; font-size:14px; color:var(--text); cursor:pointer; }

  .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:44px 0 70px; }
  .pcard { background:var(--white); border-radius:18px; overflow:hidden; box-shadow:0 12px 34px rgba(194,24,91,.10); transition:transform .18s; }
  .pcard:hover { transform:translateY(-6px); }
  .pcard.hide { display:none; }
  .pimg { position:relative; height:230px; background:linear-gradient(150deg,#f8bbd0,var(--pink-bg));
          display:flex; align-items:center; justify-content:center; }
  .status { position:absolute; top:14px; right:14px; padding:6px 14px; border-radius:20px; font-size:12px;
            font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  .st-ok { background:#43a047; color:#fff; }
  .st-sold { background:#cfc4cb; color:#fff; }
  .pbody { padding:20px 22px 22px; }
  .pcat { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--text-soft); font-weight:600; margin-bottom:4px; }
  .pbody h3 { color:var(--primary-dark); font-size:18px; margin-bottom:4px; }
  .pmeta { font-size:13px; color:var(--text-soft); margin-bottom:14px; }
  .pfoot { display:flex; align-items:center; justify-content:space-between; }
  .price { color:var(--primary); font-size:21px; font-weight:700; }
  .btn { display:inline-block; border-radius:40px; font-weight:600; cursor:pointer; border:none; }
  .btn-primary { background:var(--primary); color:#fff; box-shadow:0 8px 24px rgba(194,24,91,.3); }
  .btn-primary:hover { background:var(--primary-dark); }
  .btn-sm { padding:10px 20px; font-size:13.5px; }
  .btn-off { background:#eee; color:#aaa; cursor:default; }
  .empty { text-align:center; color:var(--text-soft); padding:60px 0; display:none; }

  footer { background:var(--dark); color:#cbb8c2; padding:26px 0; text-align:center; font-size:13px; }
  footer a { color:#fff; }

  @media (max-width:900px) {
    .grid { grid-template-columns:1fr; }
    .burger { display:flex; }
    nav ul { display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0;
             background:var(--white); box-shadow:0 14px 30px rgba(0,0,0,.12); padding:10px 0; }
    nav ul.open { display:flex; }
    nav li { text-align:center; }
    nav a { display:block; padding:14px; border-radius:0; }
  }