/* ============================================================
   alterfilters — Desktop sidebar (V1, Lot 8 Phase 1+2)
   Design: docs/refonte-v1/alterfilters-fo-design/variation1.jsx
           FilterRailI (lines 246-372)
   ============================================================ */

/* ---------- Wrapper ---------------------------------------- */

.alterfilters-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: var(--as-surface);
  border-radius: var(--as-radius-lg);
  padding: 20px 18px;
  border: 1px solid var(--as-hairline);
  align-self: flex-start;
  font-size: var(--as-text-sm);
}

/* When at least one filter is active, lock the sidebar to the top of the
   viewport so the user can keep scanning the product grid without losing
   the active selection out of view. The sidebar takes its natural height
   (no internal scrollbar) — when it overflows the viewport the page scroll
   naturally exposes the missing sections as the user scans the grid below.
   NOTE (Path B): the legacy static-sidebar JS that toggled --has-active was
   removed; the provider-rendered sidebar does not set it, so this rule is
   currently inert (active-filter UX is handled by the theme's native
   #js-active-search-filters bar). Kept for a future server-side rewire. */
@media (min-width: 992px) {
  .alterfilters-sidebar.alterfilters-sidebar--has-active {
    position: sticky;
    top: 24px;
  }
}

/* ---------- Head ------------------------------------------- */

.alterfilters-sidebar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--as-divider);
  margin-bottom: 14px;
}

.alterfilters-sidebar__title {
  margin: 0;
  font-size: var(--as-text-md);
  font-weight: var(--as-weight-bold);
  color: var(--as-fg-1);
  letter-spacing: -0.005em;
}

.alterfilters-sidebar__count {
  color: var(--as-fg-3);
  font-weight: var(--as-weight-medium);
  font-size: var(--as-text-sm);
  margin-left: 4px;
}

.alterfilters-sidebar__clear {
  all: unset;
  font-size: var(--as-text-xs);
  color: var(--as-red);
  font-weight: var(--as-weight-semi);
  cursor: pointer;
  /* Hidden until at least one filter is active (parent
     .alterfilters-sidebar--has-active). NOTE (Path B): that class is no longer
     set (legacy static-sidebar JS removed), so this internal clear button stays
     hidden — the native active-filters bar's "Tout effacer" handles clearing. */
  display: none;
}
.alterfilters-sidebar__clear:hover {
  color: var(--as-red-600);
}
.alterfilters-sidebar--has-active .alterfilters-sidebar__clear {
  display: inline-block;
}

/* ---------- Collapsible section ---------------------------- */

.alterfilters-section {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--as-divider);
}
.alterfilters-section:last-of-type {
  border-bottom: 0;
}

.alterfilters-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  margin-bottom: 0;
  padding: 0;
}

.alterfilters-section[open] .alterfilters-section__summary {
  margin-bottom: 10px;
}

.alterfilters-section__label {
  font-family: var(--as-font-sans);
  font-weight: var(--as-weight-semi);
  font-size: var(--as-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--as-track-label);
  color: var(--as-fg-3);
}

.alterfilters-section__label[data-af-has-active="true"] {
  color: var(--as-red);
}

.alterfilters-section__chevron {
  position: relative;
  width: 12px;
  height: 12px;
  color: var(--as-fg-3);
  transition: transform var(--as-dur-fast) var(--as-ease-out);
  transform: rotate(-90deg);
}
.alterfilters-section[open] .alterfilters-section__chevron {
  transform: rotate(0deg);
}

.alterfilters-section__chevron::before,
.alterfilters-section__chevron::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 7px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.alterfilters-section__chevron::before {
  left: 0;
  transform: rotate(45deg);
}
.alterfilters-section__chevron::after {
  right: 0;
  transform: rotate(-45deg);
}

.alterfilters-section__hint {
  font-size: 11px;
  color: var(--as-fg-3);
  margin-top: 8px;
}

/* ---------- Checkbox row ----------------------------------- */

.alterfilters-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}
.alterfilters-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.alterfilters-checkbox__box {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1.4px solid var(--as-hairline-2);
  background: var(--as-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--as-dur-fast) var(--as-ease-out);
  position: relative;
}
.alterfilters-checkbox__input:checked + .alterfilters-checkbox__box {
  background: var(--as-red);
  border-color: var(--as-red);
}
.alterfilters-checkbox__input:checked + .alterfilters-checkbox__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(45deg);
}
.alterfilters-checkbox__input:focus-visible + .alterfilters-checkbox__box {
  outline: 2px solid var(--as-red);
  outline-offset: 2px;
}
.alterfilters-checkbox__label {
  flex: 1;
  font-size: var(--as-text-sm);
  color: #1f1f1f;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.alterfilters-checkbox__count {
  font-size: 11px;
  color: var(--as-fg-3);
}

/* Color swatch inside family label */
.alterfilters-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---------- Nicotine 3-col grid ---------------------------- */

.alterfilters-nic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.alterfilters-nic-btn {
  padding: 7px 0;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--as-hairline-2);
  background: var(--as-surface);
  color: #1f1f1f;
  font-weight: var(--as-weight-medium);
  cursor: pointer;
  transition: all var(--as-dur-fast) var(--as-ease-out);
}
.alterfilters-nic-btn:hover {
  border-color: var(--as-fg-3);
}
.alterfilters-nic-btn[aria-pressed="true"] {
  border: 1.4px solid var(--as-ink);
  background: var(--as-ink);
  color: #fff;
  font-weight: var(--as-weight-semi);
}

/* ---------- Chips (volume + ratio) ------------------------- */

.alterfilters-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.alterfilters-chip {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--as-radius-pill);
  border: 1px solid var(--as-hairline-2);
  background: var(--as-surface);
  color: #1f1f1f;
  font-weight: var(--as-weight-medium);
  cursor: pointer;
  transition: all var(--as-dur-fast) var(--as-ease-out);
}
.alterfilters-chip:hover {
  border-color: var(--as-fg-3);
}
.alterfilters-chip[aria-pressed="true"] {
  border: 1.4px solid var(--as-ink);
  background: var(--as-ink);
  color: #fff;
  font-weight: var(--as-weight-semi);
}

/* ---------- Brand search ----------------------------------- */

.alterfilters-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--as-surface-muted);
  border-radius: 4px;
  padding: 7px 9px;
  margin-bottom: 8px;
}
.alterfilters-search__icon {
  color: var(--as-fg-3);
  flex-shrink: 0;
}
.alterfilters-search__input {
  all: unset;
  flex: 1;
  font-size: 12px;
  color: #1f1f1f;
  min-width: 0;
}
.alterfilters-search__input::placeholder {
  color: var(--as-fg-3);
}

.alterfilters-brand-list {
  display: flex;
  flex-direction: column;
}
.alterfilters-brand-list .alterfilters-checkbox[hidden] {
  display: none;
}
.alterfilters-brand-list__empty {
  font-size: 12px;
  color: var(--as-fg-3);
  padding: 6px 0;
}

/* ---------- Range (price) ---------------------------------- */

.alterfilters-range {
  padding: 4px 0;
}

.alterfilters-range__track {
  position: relative;
  height: 22px;
  touch-action: none;
}

/* Backing strip + active fill */
.alterfilters-range__track::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--as-divider);
  border-radius: 2px;
}
.alterfilters-range__fill {
  position: absolute;
  top: 9px;
  height: 3px;
  background: var(--as-red);
  border-radius: 2px;
  left: 0;
  right: 0;
}

/* Two overlaid range inputs — only the thumb is visible */
.alterfilters-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none; /* only the thumb is interactive */
}
.alterfilters-range__input::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
  height: 22px;
}
.alterfilters-range__input::-moz-range-track {
  background: transparent;
  border: none;
  height: 22px;
}
.alterfilters-range__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--as-red);
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.15);
  cursor: grab;
  pointer-events: auto;
  margin-top: 4px;
}
.alterfilters-range__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--as-red);
  box-shadow: 0 1px 4px rgba(17, 17, 17, 0.15);
  cursor: grab;
  pointer-events: auto;
}
.alterfilters-range__input:active::-webkit-slider-thumb,
.alterfilters-range__input:active::-moz-range-thumb {
  cursor: grabbing;
}

.alterfilters-range__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.alterfilters-range__pill {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--as-hairline-2);
  border-radius: 4px;
  font-size: 12px;
  color: #1f1f1f;
  display: flex;
  justify-content: space-between;
}
.alterfilters-range__pill-key {
  color: var(--as-fg-3);
}

/* ---------- Made in France toggle row ---------------------- */

.alterfilters-mif {
  margin-top: 4px;
  padding: 12px;
  background: var(--as-surface-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alterfilters-mif__icon {
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}
.alterfilters-mif__icon svg {
  display: block;
}
.alterfilters-mif__label {
  font-size: 12.5px;
  color: #1f1f1f;
  flex: 1;
}

.alterfilters-toggle {
  display: inline-flex;
  cursor: pointer;
}
.alterfilters-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.alterfilters-toggle__track {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--as-hairline-2);
  transition: background 180ms ease;
  flex-shrink: 0;
}
.alterfilters-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 180ms ease;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.2);
}
.alterfilters-toggle__input:checked + .alterfilters-toggle__track {
  background: var(--as-red);
}
.alterfilters-toggle__input:checked + .alterfilters-toggle__track .alterfilters-toggle__thumb {
  left: 14px;
}
.alterfilters-toggle__input:focus-visible + .alterfilters-toggle__track {
  outline: 2px solid var(--as-red);
  outline-offset: 2px;
}

/* ---------- Disabled (zero-count) values ------------------- */
/* A value with no indexed product renders disabled rather than hidden so the
   facet scale stays legible (cf FrontFilterRenderer::shouldSkipZeroCount —
   only brand lists drop their zero-count entries). */
.alterfilters-chip--disabled,
.alterfilters-nic-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.alterfilters-checkbox--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.alterfilters-checkbox--disabled .alterfilters-checkbox__input {
  pointer-events: none;
}

/* ---------- Empty state (no active filter / not seeded) ---- */
.alterfilters-sidebar__empty {
  padding: 16px 2px 4px;
}
.alterfilters-sidebar__empty-title {
  margin: 0 0 6px;
  font-size: var(--as-text-sm);
  font-weight: var(--as-weight-semi);
  color: var(--as-fg-1);
}
.alterfilters-sidebar__empty-text {
  margin: 0;
  font-size: 12px;
  color: var(--as-fg-3);
  line-height: 1.45;
}

/* ---------- Skeleton (pre-hydration) ----------------------- */

.alterfilters-sidebar--skeleton {
  pointer-events: none;
}

.alterfilters-skeleton-bar {
  background: linear-gradient(90deg, #EFEEF2 0%, #F6F5F8 50%, #EFEEF2 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  height: 10px;
  margin: 6px 0;
  animation: alterfilters-shimmer 1.4s linear infinite;
}
.alterfilters-skeleton-bar--title { width: 60%; height: 14px; }
.alterfilters-skeleton-bar--link  { width: 22%; height: 10px; }
.alterfilters-skeleton-bar--label { width: 40%; height: 10px; margin: 12px 0 8px; }
.alterfilters-skeleton-bar--row   { width: 100%; height: 14px; }

.alterfilters-skeleton-section + .alterfilters-skeleton-section {
  border-top: 1px solid var(--as-divider);
  padding-top: 8px;
}

@keyframes alterfilters-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Show on Desktop only --------------------------- */

@media (max-width: 991.98px) {
  .alterfilters-sidebar { display: none; }
  /* On tablet/mobile the empty left-column would still claim a row
     (since Smarty conditional rendering on the wrapper class did not
     propagate through template inheritance). Hide it entirely. */
  #left-column:has(.alterfilters-sidebar) { display: none; }
}

/* On desktop we drop the Bootstrap col-lg-3 / col-lg-9 grid (which
   would waste ~200px around a 268px sidebar at 1920) and pin
   #left-column to a content-driven width so the product grid
   reclaims every pixel the sidebar does not need. The sibling
   #content-wrapper takes whatever is left.

   classic-child resets .row to display:block, so we force it back to
   flex when the sidebar is in play — otherwise the override below
   has no effect (the column sits on top of the content instead of
   beside it). */
@media (min-width: 992px) {
  /* Pull the listing container off the viewport edge so the sidebar
     and product grid sit on the same horizontal rhythm as the header
     blocks (am-topbar-inner / am-header-top-inner use 32px padding).
     Targets the .container that wraps the row holding our sidebar. */
  .container:has(> .row > #left-column .alterfilters-sidebar),
  .container:has(.row > #left-column > .alterfilters-sidebar) {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .row:has(#left-column .alterfilters-sidebar) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #left-column:has(.alterfilters-sidebar) {
    flex: 0 0 296px !important;       /* sidebar 268 + 28 column padding */
    max-width: 296px !important;
    padding-right: 24px;
  }
  #left-column:has(.alterfilters-sidebar) ~ #content-wrapper {
    flex: 1 1 auto !important;
    max-width: calc(100% - 296px) !important;
    width: auto !important;
  }

  /* Hide any other module that hooks displayLeftColumn (ps_categorytree
     surfaces an extra category menu by default) when the alterfilters
     sidebar is rendered. Réversible — pas d'unhook DB. */
  #left-column:has(.alterfilters-sidebar) > *:not(.alterfilters-sidebar) {
    display: none !important;
  }

  /* Rebalance the product grid so cards stay ≥ 290px wide (preserves
     image legibility + overlay rendering). auto-fill + minmax(290, 1fr)
     packs as many ≥ 290px tracks as the available width allows and
     splits the leftover space between them, so cards stretch up to
     ~360px without ever exceeding it (at our viewport range they
     naturally settle between 290 and 360). */
  #left-column:has(.alterfilters-sidebar) ~ #content-wrapper #js-product-list .products,
  #left-column:has(.alterfilters-sidebar) ~ #content-wrapper #products .products {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  }
  /* Cap individual card max-width so cards don't blow past 320 even
     when the grid track does. Applied to the immediate grid children
     of the product list. */
  #left-column:has(.alterfilters-sidebar) ~ #content-wrapper #js-product-list .products > * {
    max-width: 320px;
    width: 100%;
  }
  /* The theme adds horizontal padding to #js-product-list at multiple
     breakpoints (16px → 64px @1900+) — combined with our 32px on the
     wrapping .container that ends up double-paddng the list. Reset
     it to 0 so the grid starts flush with the content-wrapper edge. */
  #left-column:has(.alterfilters-sidebar) ~ #content-wrapper #js-product-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #left-column ~ #content-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}