
        body {

          font-family: 'Roboto', sans-serif;

          margin: 0;

          padding: 20px;

          background-color: #f9f9f9;

        }

        .header {

          display: flex;

          align-items: center;

          justify-content: space-between;

          margin-bottom: 20px;

        }

        .header h1 {

          color: #e91e63;

          font-size: 24px;

        }

        .header input[type="text"] {

          width: 60%;

          padding: 8px;

          font-size: 16px;

        }

        .filters {

          display: flex;

          gap: 10px;

          margin-bottom: 20px;

        }

        .filters input,

        .filters select {

          padding: 8px;

          font-size: 14px;

          width: 150px;

        }

        .product-grid {

          display: grid;

          grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

          gap: 20px;

        }

        .product-card {

          background-color: #fff;

          border-radius: 8px;

          overflow: hidden;

          box-shadow: 0 2px 8px rgba(0,0,0,0.1);

          text-align: left;

        }

        .product-card img {

          width: 100%;

          height: 250px;

          object-fit: cover;

        }

        .product-info {

          padding: 10px;

        }

        .product-info h3 {

          margin: 0 0 5px;

          font-size: 16px;

        }

        .product-info p {

          margin: 2px 0;

          color: #555;

          font-size: 14px;

        }
