/* ============================================================
   alterfilters — mobile facets drawer (Lot 3, maquette V1_MobileA)
   Full-screen 2-level drill-down (master facet list → detail values),
   built by filter-bar-mobile.js from #search_filters. Shown < 992px only.
   100dvh + safe-area insets ; touch targets ≥ 44px ; reduced-motion gated.
   ============================================================ */

/* ---------- mobile "Filter" trigger (native button restyled) -------- */

@media (max-width: 991.98px) {
  .filter-button { padding: 0 12px 8px; }
  .filter-button .js-search-toggler,
  .filter-button #search_filter_toggler {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border: 1px solid #E5E1E8;
    border-radius: 10px;
    background: #fff;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(17, 17, 17, .05);
  }
  .filter-button .js-search-toggler::before {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    /* sliders icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3Ccircle cx='9' cy='7' r='2.4' fill='%23fff'/%3E%3Ccircle cx='15' cy='12' r='2.4' fill='%23fff'/%3E%3Ccircle cx='8' cy='17' r='2.4' fill='%23fff'/%3E%3C/svg%3E");
  }
}

/* ---------- overlay + panel ----------------------------------------- */

.af-mdrawer {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(17, 17, 17, .28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.af-mdrawer[hidden] { display: none; }
body.af-mdrawer-open { overflow: hidden; }

.af-mdrawer__panel {
  background: #fff;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: af-mdrawer-up .26s cubic-bezier(.22, .61, .36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes af-mdrawer-up { from { transform: translateY(4%); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- top bar ------------------------------------------------- */

.af-mdrawer__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px;
  flex-shrink: 0;
}
.af-mdrawer--detail .af-mdrawer__topbar { border-bottom: 1px solid #ECE9EE; }

.af-mdrawer__back {
  all: unset;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F3F1F5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.af-mdrawer__back-icon {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  /* close (×) on master */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
}
.af-mdrawer__back--arrow .af-mdrawer__back-icon {
  /* chevron-left on detail */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.af-mdrawer__titlewrap { text-align: center; flex: 1; min-width: 0; }
.af-mdrawer__title { font-size: 15px; font-weight: 700; color: #111; line-height: 1.15; }
.af-mdrawer__subtitle { font-size: 11px; color: #8a8794; margin-top: 2px; }
.af-mdrawer__clear { font-size: 12.5px; color: #E62249; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* ---------- views (master / detail slide) --------------------------- */

.af-mdrawer__views { position: relative; flex: 1; overflow: hidden; }
.af-mdrawer__view {
  position: absolute;
  inset: 0;
  background: #fff; /* opaque so the slid-out master never bleeds through the detail (visible on short lists, e.g. a filtered brand search) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.af-mdrawer__view--master { transform: translateX(0); }
.af-mdrawer__view--detail { transform: translateX(100%); padding: 14px 16px 16px; }
.af-mdrawer--detail .af-mdrawer__view--master { transform: translateX(-30%); }
.af-mdrawer--detail .af-mdrawer__view--detail { transform: translateX(0); }

/* ---------- master: category rows ----------------------------------- */

.af-mdrawer__cat {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  border-bottom: 1px solid #ECE9EE;
}
.af-mdrawer__cat:first-child { border-top: 1px solid #ECE9EE; }
.af-mdrawer__cat-main { flex: 1; min-width: 0; }
.af-mdrawer__cat-head { display: flex; align-items: center; gap: 8px; }
.af-mdrawer__cat-label { font-size: 14px; font-weight: 600; color: #1f1f1f; }
.af-mdrawer__cat-badge {
  background: #E62249; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; min-width: 18px; text-align: center;
}
.af-mdrawer__cat-sub { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.af-mdrawer__cat-chip {
  font-size: 11.5px; padding: 3px 8px; background: #FDE7EC; color: #E62249;
  border-radius: 4px; font-weight: 500;
}
.af-mdrawer__cat-more { font-size: 11.5px; color: #8a8794; }
.af-mdrawer__cat-none { font-size: 12px; color: #8a8794; }
.af-mdrawer__caret {
  width: 16px; height: 16px; flex-shrink: 0;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7c4cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Made-in-France hero toggle pinned atop the master. Reuses the desktop
   .alterfilters-mif / .alterfilters-toggle visuals (styled media-all); just inset
   it as a card and restore the first facet row's top border it displaces. */
.af-mdrawer__mif {
  margin: 12px 16px 14px;
}
.af-mdrawer__mif + .af-mdrawer__cat {
  border-top: 1px solid #ECE9EE;
}

/* ---------- detail: facet values ------------------------------------ */

.af-mdrawer__value {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #F1EEF3;
  cursor: pointer;
  color: #1f1f1f;
  text-decoration: none;
}
.af-mdrawer__value-box {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.6px solid #D8D3DD; border-radius: 6px; background: #fff;
}
.af-mdrawer__value--active .af-mdrawer__value-box {
  border-color: #E62249; background: #E62249;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.af-mdrawer__value-label { flex: 1; font-size: 14px; }
.af-mdrawer__value--active .af-mdrawer__value-label { font-weight: 600; }
.af-mdrawer__value-count { font-size: 12px; color: #a7a3ad; }
.af-mdrawer__value--disabled { opacity: .4; cursor: default; }
.af-mdrawer__value--disabled .af-mdrawer__value-box { background: #F3F1F5; }
.af-mdrawer__value[hidden] { display: none; }

/* ---------- detail: brand search-as-you-type ------------------------ */
/* Reuses the desktop .alterfilters-search component (muted bg + radius), with
   touch-friendly padding and a >=16px input to avoid iOS zoom-on-focus. */
.af-mdrawer__search {
  margin-bottom: 12px;
  padding: 11px 12px;
  gap: 9px;
  border-radius: 8px;
}
.af-mdrawer__search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8794' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}
.af-mdrawer__search .alterfilters-search__input {
  font-size: 16px;
}
.af-mdrawer__brand-empty {
  font-size: 14px;
  color: #8a8794;
  padding: 14px 4px;
}

/* ---------- detail: price range slider ------------------------------ */
/* Reuses the desktop .alterfilters-range component (track + fill + pills),
   with extra breathing room and a larger thumb for comfortable touch. The
   thumb stays centred in the 22px track (margin-top = (track − thumb) / 2). */
.af-mdrawer__range {
  padding: 10px 6px 2px;
}
.af-mdrawer__range .alterfilters-range__input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.af-mdrawer__range .alterfilters-range__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
}
.af-mdrawer__range .alterfilters-range__pill {
  padding: 9px 12px;
  font-size: 13px;
}

/* ---------- footer CTA ---------------------------------------------- */

.af-mdrawer__footer {
  flex-shrink: 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -1px 0 #ECE9EE;
  background: #fff;
}
.af-mdrawer__cta {
  width: 100%;
  padding: 15px 0;
  background: #E62249;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.af-mdrawer__cta:active { filter: brightness(.95); }

/* ---------- desktop: never show the drawer -------------------------- */

@media (min-width: 992px) {
  .af-mdrawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .af-mdrawer__panel { animation: none; }
  .af-mdrawer__view { transition: none; }
}