/* Filter Pill styles: simple comments added by me to explain sections. */

   :root{
    --bg:#F6F3F6;
    --ink:#4f3b4e;
    --brand:#5C475B;
    --border:#e4dce3;
  }
  
  
  .pill-scope .filters{
    display:flex;
    justify-content:center;
    margin:14px 0 22px;   
  }
  
  
  .pill-scope .filter-capsule{
    display:flex;
    align-items:center;
    gap:14px;
    height:50px;
    padding:8px 18px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
  }
  
  .pill-scope .filter-capsule label{
    font-weight:800;
    font-size:15px;
    color:var(--brand);
    white-space:nowrap;
    line-height:1;
    margin-left:2px;
  }
  
  .pill-scope .filter-capsule select{
    height:34px;
    min-width:150px;
    border:none;
    border-radius:999px;
    padding:6px 38px 6px 14px; 
    background:#fff;
    color:var(--brand);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
    appearance:none;
  
    
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%235C475B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:14px;
  }
  
  .pill-scope .filter-capsule select:focus{
    outline:none;
    box-shadow: inset 0 0 0 1px rgba(92,71,91,.25), 0 0 0 3px rgba(92,71,91,.12);
  }
  
  /* Responsive styles */
@media (max-width:480px){
    .pill-scope .filter-capsule{ padding:8px 12px; }
    .pill-scope .filter-capsule select{ min-width:130px; }
  }