/* TOGOPEPTIDE — Shop polish · Layer 13 · Cluster 06
   Filter sidebar + toolbar + active-chips + density toggle + mobile drawer.
   Loaded only on /shop.html. */

/* ── Layout grid: sidebar + main ─────────────────────── */
.shop-layout{
  display:grid;grid-template-columns:240px minmax(0, 1fr);gap:32px;
  align-items:flex-start;
}
/* Grid-items expliciet min-width:0 — voorkomt dat shop-grid cards
   het grid-track laten overflowen op smalle viewports (CSS-grid pitfall). */
.shop-layout > *{min-width:0}
@media (max-width:980px){
  .shop-layout{grid-template-columns:minmax(0, 1fr);gap:14px}
  /* Desktop sidebar verbergen — drawer overneemt op mobile */
  .shop-filters{display:none}
}

/* ── Filter sidebar (desktop) ────────────────────────── */
.shop-filters{
  position:sticky;top:96px;
  z-index:5;
  background:#0d0d10;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:18px 20px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
.shop-filters__group{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.shop-filters__group:first-child{padding-top:0}
.shop-filters__group:last-child{border-bottom:0;padding-bottom:0}
.shop-filters__label{
  display:block;
  font-size:11px;color:#7d7d85;letter-spacing:0.1em;
  text-transform:uppercase;font-weight:700;
  margin:0 0 10px;
}
.shop-filters__option{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
  font-size:13px;color:#cbd5e1;
  cursor:pointer;
  transition:color 140ms ease;
}
.shop-filters__option:hover{color:#fff}
.shop-filters__option input{
  width:15px;height:15px;
  accent-color:var(--color-accent, #e01b1b);
  cursor:pointer;
  flex-shrink:0;
}
.shop-filters__count{
  margin-left:auto;
  font-size:11px;color:#7d7d85;
  font-variant-numeric:tabular-nums;
}
.shop-filters__clear{
  display:block;width:100%;
  background:transparent;border:1px solid rgba(255,255,255,0.1);
  color:#9d9da5;font-size:12px;font-weight:600;
  padding:9px 14px;border-radius:8px;cursor:pointer;
  transition:all 140ms ease;font-family:inherit;
  margin-top:14px;
}
.shop-filters__clear:hover{
  border-color:var(--color-accent, #e01b1b);
  color:var(--color-accent, #e01b1b);
}

/* ── Toolbar bovenaan grid ───────────────────────────── */
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  margin:0 0 var(--space-4);
}
.shop-toolbar__count{
  font-size:13px;color:#9d9da5;
  font-variant-numeric:tabular-nums;
}
.shop-toolbar__count strong{color:#fff;font-weight:600}
.shop-toolbar__right{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}

.shop-search{
  position:relative;
}
.shop-search input{
  width:240px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;font-size:13px;
  padding:8px 12px 8px 34px;
  border-radius:8px;
  font-family:inherit;
  transition:all 160ms ease;
}
.shop-search input:focus{
  outline:none;border-color:var(--color-accent, #e01b1b);
  box-shadow:0 0 0 3px rgba(224,27,27,0.15);
}
.shop-search input::placeholder{color:#7d7d85}
.shop-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:#7d7d85;pointer-events:none;
}

.shop-sort{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;font-size:13px;
  padding:8px 30px 8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237d7d85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
}
.shop-sort:hover{border-color:rgba(255,255,255,0.16)}

.shop-density{
  display:inline-flex;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);border-radius:8px;
  padding:3px;
}
.shop-density button{
  width:32px;height:30px;
  background:transparent;border:0;
  color:#7d7d85;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  transition:all 140ms ease;
}
.shop-density button.is-active{background:rgba(255,255,255,0.06);color:#fff}
.shop-density button:hover:not(.is-active){color:#cbd5e1}

.shop-mobile-filter-btn{
  display:none;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:8px;
  cursor:pointer;font-family:inherit;
  align-items:center;gap:8px;
}
@media (max-width:980px){
  .shop-mobile-filter-btn{display:inline-flex}
  .shop-search input{width:180px}
}

/* Smaller phones — toolbar stacks, controls go full-width */
@media (max-width:640px){
  .shop-toolbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .shop-toolbar__count{
    text-align:center;
    order:-1;
    padding:6px 0;
  }
  .shop-toolbar__right{
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:8px;
    align-items:stretch;
  }
  .shop-mobile-filter-btn{
    grid-column:1 / 2;
    justify-content:center;
    padding:10px 14px;
  }
  .shop-search{
    grid-column:2 / 3;
    min-width:0;
  }
  .shop-search input{
    width:100% !important;
    min-width:0;
  }
  .shop-sort{
    grid-column:1 / -1;
    width:100%;
    padding:10px 30px 10px 12px;
  }
  /* Density-toggle is desktop-only luxury — hide on small phones */
  .shop-density{display:none}
}

/* ── Active filter chips ─────────────────────────────── */
.shop-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 var(--space-4);
}
.shop-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 13px;
  background:rgba(224,27,27,0.1);
  color:#ff8888;
  border:1px solid rgba(224,27,27,0.2);
  border-radius:999px;
  font-size:12px;font-weight:500;
  cursor:pointer;
  transition:all 140ms ease;
  font-family:inherit;
}
.shop-chip:hover{background:rgba(224,27,27,0.16);color:#fff}
.shop-chip svg{flex-shrink:0;opacity:0.7}

/* ── Result grid ─────────────────────────────────────── */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
body[data-shop-density="compact"] .shop-grid{
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
body[data-shop-density="compact"] .shop-grid .card__body{padding:12px 14px !important}
body[data-shop-density="compact"] .shop-grid .card__title{font-size:14px !important}
body[data-shop-density="compact"] .shop-grid .card__body-text{display:none}

/* Small phones — relax minimum so 2 columns always fit */
@media (max-width:640px){
  .shop-layout,
  .shop-layout > *,
  .shop-main,
  .shop-grid,
  .shop-grid > *{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .shop-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    width:100%;
  }
  .shop-grid .card{min-width:0;max-width:100%;overflow:hidden}
  .shop-grid .card__media,
  .shop-grid .card__media picture,
  .shop-grid .card__media img{max-width:100%;min-width:0}
  .shop-grid .card__body{padding:12px 14px !important}
  .shop-grid .card__title{font-size:14px !important}
  .shop-grid .card__body-text{
    font-size:11.5px !important;
    line-height:1.45 !important;
    /* Limit to 2 lines so cards stay equal height */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}
/* Very narrow — single column to prevent broken layout */
@media (max-width:380px){
  .shop-grid{grid-template-columns:1fr}
}

/* ── Empty state when no matches ─────────────────────── */
.shop-empty{
  text-align:center;padding:60px 20px;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.1);
  border-radius:14px;
}
.shop-empty__title{
  margin:0 0 8px;font-size:16px;color:#fff;font-weight:600;
}
.shop-empty__text{
  margin:0 0 18px;font-size:13.5px;color:#9d9da5;line-height:1.5;
}
.shop-empty button{
  background:transparent;border:1px solid rgba(255,255,255,0.16);
  color:#cbd5e1;font-size:13px;font-weight:600;
  padding:9px 18px;border-radius:8px;cursor:pointer;
  font-family:inherit;
  transition:all 140ms ease;
}
.shop-empty button:hover{border-color:var(--color-accent, #e01b1b);color:var(--color-accent, #e01b1b)}

/* ── Mobile filter drawer ────────────────────────────── */
.shop-drawer{
  position:fixed;inset:0;z-index:90;display:none;
}
.shop-drawer[data-open="true"]{display:block}
.shop-drawer__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:shop-drawer-fade-in 220ms ease;
}
.shop-drawer__panel{
  position:absolute;left:0;top:0;bottom:0;width:300px;max-width:88%;
  background:#0a0a0c;
  border-right:1px solid rgba(255,255,255,0.1);
  padding:20px 22px;overflow-y:auto;
  animation:shop-drawer-slide-in 320ms cubic-bezier(0.22,1,0.36,1);
  display:flex;flex-direction:column;gap:0;
}
.shop-drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.shop-drawer__title{font-size:16px;font-weight:700;color:#fff;margin:0}
.shop-drawer__close{
  background:transparent;border:0;color:#9d9da5;
  font-size:22px;line-height:1;cursor:pointer;
  padding:4px 8px;
}
.shop-drawer__close:hover{color:#fff}
@keyframes shop-drawer-fade-in{from{opacity:0}to{opacity:1}}
@keyframes shop-drawer-slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (min-width:981px){.shop-drawer{display:none !important}}

/* ── Quick-filter chip row (top of catalog) ───────────────── */
.shop-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.shop-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-soft);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.shop-quick-filter:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.shop-quick-filter.is-active,
.shop-quick-filter[aria-pressed="true"] {
  background: var(--color-accent-soft, rgba(224, 27, 27, 0.14));
  border-color: var(--color-accent);
  color: #fff;
}
.shop-quick-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.shop-quick-filter__dot--green  { background: #4ce39d; }
.shop-quick-filter__dot--accent { background: var(--color-accent, #e01b1b); }
.shop-quick-filter__dot--blue   { background: #6ba8ff; }

@media (max-width: 720px) {
  .shop-quick-filters { gap: 6px; }
  .shop-quick-filter { padding: 7px 12px 7px 10px; font-size: 12.5px; }
}