/* modules/alterhome/views/assets/css/alter-carousel.css
 * Fallback carousel engine (utilisé si le thème ne charge pas alter-carousel).
 * Tech: scroll-snap natif + JS léger (prev/next + drag souris).
 */

.ac-carousel{
  /* Desktop targets */
  --ac-item-desktop: 317px;
  --ac-gap-desktop: 32px;

  /* Mobile/tablette: ~1,5 items visibles (laisse apparaître la moitié du suivant) */
  --ac-item-min: clamp(180px, 52vw, 280px);
  --ac-gap: 16px;

  position: relative;
  min-width: 0;
}

/* Variant: 1 item visible (sous photo produit) */
.ac-carousel.ac--single{
  --ac-item-desktop: 100%;
  --ac-gap-desktop: 16px;
  --ac-item-min: 100%;
  --ac-gap: 16px;
}

@media (min-width: 992px){
  .ac-carousel{
    --ac-item-min: var(--ac-item-desktop);
    --ac-gap: var(--ac-gap-desktop);
  }
}

.ac-track{
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--ac-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 2px; /* évite la coupe des ombres internes thème */
  scrollbar-width: none; /* Firefox */
}
.ac-track::-webkit-scrollbar{ display:none; }

.ac-track:focus{ outline: none; }

.ac-item{
  list-style: none;
  flex: 0 0 var(--ac-item-min);
  min-width: var(--ac-item-min);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.ac-nav{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.ac-nav[hidden]{ display:none !important; }

/* Aligné design system Lot B : équivalent .alter-btn--ghost.alter-btn--icon
   (tokens --as-btn-height-md, --as-grey-border, --as-grey-900, transitions
    standards, focus ring amaranth). Conserve .ac-btn pour ne pas toucher
    le markup Smarty existant (alterhome displayHome / aseditorialpages /
    altershops expert-opinions / alterglobalreviews home_internal_reviews). */
.ac-btn{
  width: var(--as-btn-height-md, 44px);
  height: var(--as-btn-height-md, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--as-radius-main, 8px);
  border: 1px solid var(--as-grey-border, rgba(0,0,0,.15));
  background: transparent;
  color: var(--as-grey-900, #0F0F0F);
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--as-transition-base, 180ms ease),
              border-color var(--as-transition-base, 180ms ease),
              color var(--as-transition-base, 180ms ease);
}

@media (hover:hover){
  .ac-btn:hover:not(:disabled){
    background-color: var(--as-grey-100, #EDEDF3);
    border-color: var(--as-grey-border-hover, rgba(0,0,0,.30));
  }
}

.ac-btn:disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.ac-btn svg{ display:block; }

/* Accessibilité: focus visible — ring amaranth (token Lot B) */
.ac-btn:focus-visible{
  outline: var(--as-focus-ring, 2px solid rgba(230,34,73,.45));
  outline-offset: var(--as-focus-offset, 2px);
}

/* Motion: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ac-track{ scroll-behavior: auto; }
}