/* Fullscreen popup container */
   .filter-popup {
     position: fixed;
     inset: 0;
     background-color: #fff; /* pink-50 with opacity */
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1rem;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     z-index: 100 !important;
   }
   /* Header */
   .filter-header {
     width: 100%;
     max-width: 400px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
     position: sticky;
     top: 0;
     background-color: #fff;
     padding: 0.5rem 0;
     z-index: 10;
   }
   .filter-header h1 {
     font-size: 1.875rem; /* text-3xl */
     font-weight: 600;
     color: #db2777; /* pink-600 */
     margin: 0;
   }
   .filter-header button {
     background: none;
     border: none;
     color: #db2777;
     cursor: pointer;
     font-size: 1.25rem;
     padding: 0.25rem;
     border-radius: 0.25rem;
     transition: color 0.2s ease;
   }
   .filter-header button:focus {
     outline: 2px solid #db2777;
     outline-offset: 2px;
   }
   .filter-header button:hover {
     color: #be185d; /* pink-800 */
   }
   /* Main container */
   .filter-main {
     width: 100%;
     max-width: 400px;
     flex-grow: 1;
     overflow-y: auto;
   }
   /* First card standalone */
   .filter-card.standalone {
     position: relative;
     width: 100%;
     background: white;
     border-radius: 1.5rem;
     box-shadow: 0 10px 15px -3px rgba(219, 39, 119, 0.3), 0 4px 6px -2px rgba(219, 39, 119, 0.1);
     cursor: pointer;
     overflow: hidden;
     margin-bottom: 1.5rem;
     transition: box-shadow 0.3s ease;
   }
   .filter-card.standalone:hover {
     box-shadow: 0 25px 50px -12px rgba(219, 39, 119, 0.5);
   }
   .filter-card.standalone img {
     width: 100%;
     height: 24rem; /* 96 * 4 = 384px */
     object-fit: cover;
     display: block;
   }
   /* Gradient overlay */
   .filter-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 1.5rem;
     background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
     color: white;
   }
   .filter-overlay h2 {
     margin: 0 0 0.25rem 0;
     font-size: 1.5rem;
     font-weight: 700;
   }
   .filter-overlay p {
     margin: 0;
     color: #f9a8d4; /* pink-300 */
     font-size: 0.875rem;
   }
   /* Grid container for other cards */
   .filter-grid-two-cols {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
   }
   /* Cards in grid */
   .filter-card.grid-item {
     position: relative;
     background: white;
     border-radius: 1.5rem;
     box-shadow: 0 10px 15px -3px rgba(219, 39, 119, 0.3), 0 4px 6px -2px rgba(219, 39, 119, 0.1);
     cursor: pointer;
     overflow: hidden;
     transition: box-shadow 0.3s ease;
   }
   .filter-card.grid-item:hover {
     box-shadow: 0 25px 50px -12px rgba(219, 39, 119, 0.5);
   }
   .filter-card.grid-item img {
     width: 100%;
     height: 20rem; /* 80 * 4 = 320px */
     object-fit: cover;
     display: block;
   }
   .filter-card.grid-item .filter-overlay {
     padding: 1.25rem;
   }
   .filter-card.grid-item .filter-overlay h2 {
     font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
   }
   .filter-card.grid-item .filter-overlay p {
     font-size: 0.75rem;
     color: #f9a8d4;
   }
   /* Accessibility focus */
   .filter-card:focus {
     outline: 3px solid #db2777;
     outline-offset: 3px;
   }
   /* Responsive adjustments */
   @media (max-width: 400px) {
     .filter-grid-two-cols {
       grid-template-columns: repeat(2, 1fr);
     }
   }