/* Home Masonry styles: simple comments added by me to explain sections. */


:root{
    --bg:#F6F3F6;
    --ink:#4f3b4e;
    --brand:#5C475B;
    --border:#e4dce3;
  }
  
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  
  .home-wrap{
    max-width:1200px;
    margin:26px auto 80px;
    padding:0 18px;
  }
  
  
  .filters{
    display:flex;
    justify-content:center;
    margin:14px 0 22px;
  }
  
  .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);
  }
  
  .filter-capsule label{
    font-weight:800;
    font-size:15px;
    color:var(--brand);
    white-space:nowrap;
    line-height:1;
    margin-left:2px;
  }
  
  .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;
  }
  .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){
    .filter-capsule{ padding:8px 12px; }
    .filter-capsule select{ min-width:130px; }
  }