/* ==========================================================================
   MAHIRA SELECT - shop.css
   Product archives: shop, categories, collections and search results.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archive hero
   -------------------------------------------------------------------------- */
.ms-shophero{padding-block:clamp(28px,4vw,52px) clamp(24px,3vw,36px);}
.ms-shophero .ms-lead{margin-top:14px;}
.ms-shophero__subs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(22px,2.5vw,32px);
}
.ms-chip{
  display:inline-flex;align-items:center;
  padding:9px 16px;
  font-size:var(--ms-fs-xs);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius-btn);
  background:var(--ms-surface);
  transition:border-color var(--ms-t) var(--ms-ease),color var(--ms-t) var(--ms-ease);
}
.ms-chip:hover{border-color:var(--ms-gold);color:var(--ms-gold-ink);}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ms-shop__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,3vw,48px);
  padding-bottom:clamp(48px,6vw,88px);
}
.ms-shop__main{min-width:0;}

@media (min-width:1024px){
  .ms-shop__layout{grid-template-columns:250px minmax(0,1fr);align-items:start;}
}

.ms-shop__seo{
  background:var(--ms-surface);
  padding-block:clamp(40px,5vw,72px);
  border-top:var(--ms-hairline);
}
.ms-shop__seo .ms-prose{padding-bottom:0;}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.ms-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ms-space-sm);flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:clamp(22px,2.5vw,32px);
  border-bottom:var(--ms-hairline);
}
.ms-toolbar__count{
  font-size:var(--ms-fs-xs);color:var(--ms-muted);margin:0;max-width:none;
  letter-spacing:.03em;
}
.ms-toolbar__controls{display:flex;align-items:center;gap:10px;}
.ms-toolbar__sort{display:flex;align-items:center;gap:8px;margin:0;}
.ms-toolbar__sort select{min-height:40px;padding:8px 34px 8px 12px;font-size:var(--ms-fs-xs);min-width:170px;}
.ms-toolbar__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;margin-left:2px;
  background:var(--ms-gold);color:#fff;
  font-size:10px;line-height:1;border-radius:9px;
}
.ms-toolbar__active{
  flex:1 1 100%;
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:16px;
}
.ms-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;font-size:var(--ms-fs-xs);
  background:var(--ms-sand);border:1px solid transparent;
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-pill:hover{border-color:var(--ms-ink);}
.ms-pill svg{opacity:.6;}
.ms-pill--clear{background:transparent;color:var(--ms-gold-ink);text-decoration:underline;text-underline-offset:.2em;}
.ms-pill .amount{font-variant-numeric:tabular-nums;}

/* Desktop shows the sidebar, so the trigger is only for smaller screens. */
@media (min-width:1024px){
  .ms-toolbar__filter{display:none;}
}

/* --------------------------------------------------------------------------
   Filter panel
   -------------------------------------------------------------------------- */
.ms-filters{
  position:fixed;inset:0;z-index:1100;
  visibility:hidden;pointer-events:none;
}
.ms-filters.is-open{visibility:visible;pointer-events:auto;}
.ms-filters__scrim{
  position:absolute;inset:0;width:100%;
  background:rgba(21,18,14,.42);border:0;padding:0;cursor:pointer;
  opacity:0;transition:opacity var(--ms-t) var(--ms-ease);
}
.ms-filters.is-open .ms-filters__scrim{opacity:1;}
.ms-filters__panel{
  position:absolute;left:0;top:0;bottom:0;
  width:min(400px,88vw);
  background:var(--ms-surface);
  box-shadow:var(--ms-shadow-float);
  display:flex;flex-direction:column;
  transform:translateX(-102%);
  transition:transform var(--ms-t-slow) var(--ms-ease);
}
.ms-filters.is-open .ms-filters__panel{transform:translateX(0);}
.ms-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:var(--ms-hairline);flex:0 0 auto;
}
.ms-filters__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 20px;}
.ms-filters__foot{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px 20px;border-top:var(--ms-hairline);background:var(--ms-cream);
}

/* From 1024px the panel is simply a column in the page. */
@media (min-width:1024px){
  .ms-filters,
  .ms-filters[hidden]{
    display:block;position:sticky;top:calc(var(--ms-header-h-compact) + 20px);
    inset:auto;z-index:1;visibility:visible;pointer-events:auto;
  }
  .ms-filters__scrim,
  .ms-filters__head,
  .ms-filters__foot .ms-btn:last-child{display:none;}
  .ms-filters__panel{
    position:static;width:auto;transform:none;box-shadow:none;
    background:transparent;max-height:calc(100vh - var(--ms-header-h-compact) - 48px);
  }
  .ms-filters__body{overflow:visible;padding:0;}
  .ms-filters__foot{
    grid-template-columns:1fr;padding:18px 0 0;background:transparent;
  }
}

/* Groups */
.ms-fgroup{padding-block:18px;border-bottom:var(--ms-hairline);}
.ms-fgroup:first-child{padding-top:8px;}
.ms-fgroup__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-ink);margin:0 0 12px;
}
.ms-fgroup__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;
}
.ms-fgroup__toggle svg{color:var(--ms-muted);transition:transform var(--ms-t) var(--ms-ease);}
.ms-fgroup__toggle[aria-expanded='true'] svg{transform:rotate(180deg);}
.ms-fgroup__panel{display:none;}
.ms-fgroup__panel.is-open{display:block;}
.ms-fgroup__list{max-height:280px;overflow-y:auto;}
.ms-fgroup__list li + li{margin-top:1px;}

.ms-fopt{
  display:flex;align-items:center;gap:10px;
  padding:8px 2px;font-size:var(--ms-fs-sm);color:var(--ms-muted);
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-fopt:hover{color:var(--ms-ink);}
.ms-fopt.is-on{color:var(--ms-ink);}
.ms-fopt__box{
  flex:0 0 auto;width:16px;height:16px;
  border:1px solid var(--ms-border);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ms-t) var(--ms-ease),border-color var(--ms-t) var(--ms-ease);
}
.ms-fopt__box svg{opacity:0;color:#fff;}
.ms-fopt.is-on .ms-fopt__box{background:var(--ms-gold);border-color:var(--ms-gold);}
.ms-fopt.is-on .ms-fopt__box svg{opacity:1;}
.ms-fopt__label{flex:1 1 auto;min-width:0;}
.ms-fopt__count{
  flex:0 0 auto;font-size:var(--ms-fs-micro);color:var(--ms-muted);
  font-variant-numeric:tabular-nums;
}

/* Category list has no checkbox, it navigates. */
.ms-fgroup__list .ms-fopt:not(.is-on) .ms-fopt__box:empty{display:none;}

/* Price */
.ms-fprice{display:flex;align-items:center;gap:8px;}
.ms-fprice input{min-height:40px;padding:8px 10px;font-size:var(--ms-fs-xs);min-width:0;}
.ms-fprice__to{color:var(--ms-muted);flex:0 0 auto;}
.ms-fprice .ms-btn{flex:0 0 auto;padding:0 14px;}

/* --------------------------------------------------------------------------
   Grid density on the archive. Five across on very wide screens.
   -------------------------------------------------------------------------- */
@media (min-width:1600px){
  .ms-shop__main .ms-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}

/* Search results reuse the same grid without a sidebar. */
.ms-search-results .ms-shop__layout{grid-template-columns:1fr;}