/* ─── CENTRED 1200-PX CONTAINER ─────────────────────────── */
.catalog-container{
  max-width:1200px;   /* fixed desktop width  */
  margin: auto;      /* ← auto centres the block */
  padding:0 20px;     /* side margins (“gutters”) */
}

/* make sure the grid itself is centred inside the container
   and cards keep their 333 px width */
.catalog-grid{
  grid-template-columns:repeat(auto-fill, minmax(333px, 333px));
  justify-content:center;
}



  /*  FONTS  */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

  :root{
    --accent:#E9453D;
    --text:#333;
    --white:#FFFDF8;
  }
  *{box-sizing:border-box}
  body{font-family:'Roboto',sans-serif;}

/* ─── FILTER BAR restyle ─────────────────────────────────── */
.catalog-filters{
  display:flex;               /* keep horizontal */
  flex-wrap:wrap;
  gap:32px;                   /* distance between selects */
  padding:0;                  /* align with grid */
}

/* COMMON look for selects & (price) inputs  */
.catalog-filters select,
.catalog-filters input{
  font:600 16px 'Roboto',sans-serif;   /* Semibold 18 */
  color:var(--text);
  background:#FFFDF8;                  /* same off-white page bg */
  border:1px solid #333;               /* darker outline */
  border-radius:0;
  padding:12px 44px 12px 20px;         /* room for arrow */
  min-width:180px;
  appearance:none;                     /* hide native arrow */
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}
.catalog-filters select:focus,
.catalog-filters input:focus{
  outline:none;
  box-shadow:0 0 0 0px var(--accent);  /* thin accent focus */
}

/* RESET button (right-aligned) */
.filter-reset{
  margin-left:auto;                    /* pushes it to the right */
  font:600 18px 'Roboto',sans-serif;
  color:var(--accent);
  background:#FFFDF8;
  border:1px solid #333;
  border-radius:0;
  padding:12px 26px;
  cursor:pointer;
  transition:background .2s;
}
.filter-reset:hover{background:#fdf7f7;}

  /*  GRID  */
  .catalog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(333px,1fr));
    gap:40px;
    margin-top:80px;
    margin-bottom:130px;
  }

  /*  CARD  */
  .psy-card{width:100%;border:1px solid #000000;display:flex;flex-direction:column;overflow:hidden;background:#FFFDF8}
  .psy-card__img{width:100%;height:200px;object-fit:cover}
  .psy-card__body{padding:20px 18px 0;flex:1}
  .psy-card__title{font:600 18px/1.3 Roboto;margin:0 0 8px;color:var(--text)}
  .psy-card__author{font:300 18px/1.3 Roboto;margin:0 0 16px}
  .psy-card__desc{font:400 16px/1.4 Roboto;margin:0 0 16px}
  .psy-card__caption{font:400 16px/1.4 Roboto;color:var(--accent);margin:0 0 12px}
  .psy-card__deadline{font:400 16px/1.4 Roboto;margin:0 0 5px}
  .psy-card__price{display:flex;align-items:baseline;gap:8px;margin:0 0 24px}
  .price-now{font:500 18px/1 Roboto}
  .price-sale{font:500 18px/1 Roboto;color:var(--accent)}
  .price-old{font:300 18px/1 Roboto;color:#8d8d8d;text-decoration:line-through}
  .psy-card__btn,
  .psy-card__btn:link,
  .psy-card__btn:visited,
  .psy-card__btn:hover,
  .psy-card__btn:active{
    display:block;width:100%;text-align:center;
    background:var(--accent);color:var(--white)!important;
    font:600 16px/48px Roboto;text-decoration:none;transition:.2s;
  }
  .psy-card__btn:hover{opacity:.9}
  
/* ─── Pop-up list that appears when you click a  ───────────── */

/* text, background, borders for every item */
.catalog-filters select option{
  font:600 16px 'Roboto',sans-serif;      /* same weight/size as closed state */
  background:#FFFDF8;                     /* page off-white */
  color:#333;                             /* primary text colour */
  padding:10px 20px;                      /* add some breathing room */
  border-bottom:1px solid #eee;           /* thin divider between rows (Chrome/Edge) */
}

/* hovered (mouse-over) item – Chrome, Edge, Safari */
.catalog-filters select option:hover{
  background:#E9453D;
  color:#FFFDF8;
}

/* Firefox needs a separate rule for hover/selected */
@-moz-document url-prefix(){
  .catalog-filters select option:hover,
  .catalog-filters select option:checked{
    background:#E9453D !important;
    color:#FFFDF8 !important;
  }
}

/* remove default blue outline around the list in Chrome/Safari */
.catalog-filters select:focus{
  outline:none;
}