/* ============================================================
   CATALOGUE — toolbar, filters, grid, editorial inserts
   ============================================================ */
/* the chips are page navigation; the toolbar below is product filtering —
   they need visible separation */
.cintro__chips{padding-top:clamp(18px,2.4vw,34px);padding-bottom:clamp(22px,2.4vw,36px)}
.cintro__chips .chips{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}

/* where a content section runs straight into the catalogue, the toolbar reads
   as the start of the next level, so it gets its own air above the rule */
section + .tool{margin-top:clamp(20px,2vw,28px)}
/* sticky toolbar */
.tool{
  position:sticky;top:var(--bar-h-stuck);z-index:30;background:var(--milk);
  border-block:1px solid var(--line-soft);transition:top .45s var(--slow);
}
.tool__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.tool__left{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);min-width:0}
.tool__count{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
.tool__count b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.tool__btn{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;
  box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-label);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease);
}
.tool__btn:hover{background:var(--ink);color:var(--milk)}
.tool__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.3}
.tool__btn b{font-weight:500;color:var(--accent)}
.tool__right{display:flex;align-items:center;gap:12px}
.tool__sortlabel{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}

/* layout: sticky sidebar + grid */
/* the toolbar above belongs to this grid — it counts what the grid shows and
   filters it — so the gap under it is an inside-the-block one. Only the
   bottom pays the full section gap, to the block that really is the next. */
.cat{padding-block:var(--space-sm) calc(var(--section-default) / 2)}
.cat__layout{display:grid;grid-template-columns:232px 1fr;gap:clamp(24px,3vw,56px);align-items:start}
.cat__side{position:sticky;top:calc(var(--bar-h-stuck) + 72px);max-height:calc(100vh - var(--bar-h-stuck) - 96px);
  overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-right:6px;
  /* the list still scrolls — only the bar is gone, with a soft hem to show
     there is more below. The hem lifts once you reach the end. */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent);
}
.cat__side::-webkit-scrollbar{display:none}
.cat__side.is-end,.cat__side.is-short{-webkit-mask-image:none;mask-image:none}
.cat__main{min-width:0}

.fgroup{border-bottom:1px solid var(--line-soft)}
.fgroup:first-child{border-top:1px solid var(--line-soft)}
.fgroup summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  padding:15px 0;list-style:none;font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup__ico{width:12px;height:12px;transition:transform .4s var(--slow);flex:none}
.fgroup[open] .fgroup__ico{transform:rotate(45deg)}
.fgroup__body{padding-bottom:18px}
.frange{display:grid;gap:12px}
.frange__row{display:flex;align-items:center;gap:10px}
.frange__row input[type="range"]{flex:1;appearance:none;height:1px;background:var(--line);outline:none}
.frange__row input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--ink);cursor:pointer}
.frange__out{font-size:var(--t-meta);font-variant-numeric:tabular-nums;color:var(--ink-70)}
.fside__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px}
.fside__head p{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.fclear{font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-45);text-decoration:underline;
  text-underline-offset:3px;transition:color .3s}
.fclear:hover{color:var(--accent)}

/* active filter pills */
.active-f{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:clamp(14px,1.6vw,22px)}
.active-f:empty{display:none}
.afp{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 12px;background:var(--ivory);
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);
  transition:background .3s,color .3s}
.afp:hover{background:var(--ink);color:var(--milk)}
.afp svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6}

/* grid behaviour */
.cat__grid .einsert{grid-column:span 2}
.cat__grid .card{display:flex}

/* bestseller rank */
.card--xl .card__media{aspect-ratio:4/4.6}
.card--xl .card__name{font-size:clamp(1.0625rem,1vw + .85rem,1.3125rem)}

/* subcategory navigation (category pages) */
.subnav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px);padding-block:clamp(18px,2.2vw,34px)}
.subnav__i{position:relative;display:grid;align-content:end;gap:6px;padding:clamp(14px,1.6vw,22px);
  min-height:clamp(118px,11vw,168px);overflow:hidden;background:var(--ivory);isolation:isolate;border-radius:var(--radius-md);}
.subnav__i::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .55s var(--slow)}
.subnav__i:hover{color:var(--milk)}
.subnav__i:hover::before{transform:none}
.subnav__n{font-size:clamp(1rem,1vw + .78rem,1.25rem);font-weight:500;letter-spacing:-.01em}
.subnav__c{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);transition:color .4s}
.subnav__i:hover .subnav__c{color:rgba(242,237,230,.7)}
.subnav__i svg{position:absolute;bottom:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);width:13px;height:13px;
  opacity:0;transform:translate(-6px,6px);transition:opacity .4s,transform .5s var(--slow)}
.subnav__i:hover svg{opacity:1;transform:none}
.subnav__ph{
  position:absolute;top:0;right:0;width:clamp(72px,7vw,104px);aspect-ratio:1/1;overflow:hidden;
  mix-blend-mode:multiply;opacity:.92;transition:transform .7s var(--slow),opacity .4s var(--ease);
}
.subnav__ph img{width:100%;height:100%;object-fit:cover}
.subnav__i:hover .subnav__ph{transform:scale(1.06);opacity:1;mix-blend-mode:normal}
@media (max-width:860px){.subnav{grid-template-columns:repeat(2,1fr)}}

/* concern strip */
.cstrip{display:flex;gap:10px;flex-wrap:wrap;padding-block:clamp(18px,2vw,30px)}
.cstrip a{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px;
  box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t-meta);transition:background .3s,color .3s}
.cstrip a:hover{background:var(--ink);color:var(--milk)}
.cstrip a span{font-size:var(--t-label);color:var(--ink-25)}
.cstrip a:hover span{color:var(--accent-soft)}

/* filter drawer (mobile / optional desktop) */
.drawer--left{right:auto;left:0;transform:translateX(-101%)}
.drawer--left.on{transform:none}
.drawer__scroll{flex:1;overflow-y:auto;padding:0 24px}

@media (max-width:1024px){
  .cat__layout{grid-template-columns:1fr}
  .cat__side{display:none}
}
@media (max-width:620px){
  .tool__in{height:54px}
  .tool__sortlabel{display:none}
  .tool__count{font-size:10px}
}

/* end-of-results marker (the catalogue renders in full, so no fake pagination) */
.cat__end{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding-top:calc(var(--section-compact) / 2);flex-wrap:wrap}
.cat__end-line{flex:1;height:1px;background:var(--line-soft);min-width:40px}
.cat__end p{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.cat__end p b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}