/* ===================================================================
   Shop, Nieuw en Sale — filters, sorteren, mobiele filterlade, pagination.
   Laad na base.css.
=================================================================== */

/* custom checkbox: dunne lijn i.p.v. standaard vinkje */
.filter-check{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; border:1px solid rgba(46,42,39,.3);
  border-radius:2px; position:relative; cursor:pointer; shrink:0;
  transition:border-color .25s ease, background .25s ease;
}
.filter-check:checked{ background:var(--ink); border-color:var(--ink); }
.filter-check:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--bg);
  border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}

.color-dot{
  width:16px; height:16px; border-radius:50%; border:1px solid rgba(46,42,39,.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.color-dot:hover{ transform:scale(1.15); }
.color-dot.is-selected{ box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }

/* sorteren: klein editorial paneel, zelfde gedrag als mega menu */
.sort-panel{
  z-index:30;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
}
.sort-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
#sort-chevron{ transition:transform .3s ease; }
#sort-trigger[aria-expanded="true"] #sort-chevron{ transform:rotate(180deg); }

/* mobiele filterlade */
#filter-drawer{ transform:translateX(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
#filter-drawer.open{ transform:translateX(0); }
#filter-scrim{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; }
#filter-scrim.open{ opacity:1; visibility:visible; }

.page-link{
  font-family:'Fraunces',serif; font-size:15px; color:rgba(46,42,39,.45);
  transition:color .3s ease;
}
.page-link:hover{ color:var(--ink); }
.page-link.is-current{ color:var(--ink); font-style:italic; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#D8B4A0; }