/* ================================
   MOBILE + TABLET HORIZONTAL PRODUCT SCROLL
   ================================ */

/* 1. Scroll-hint tekst (telefon + tahvel) */
.scroll-hint {
  display: none;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

@media (max-width: 1024px) {
  .scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .scroll-hint::after {
    content: '⟶';   /* väike nool paremale */
    font-size: 1.1rem;
  }
}


/* 2. GRID-põhine horisontaalne scroll telefonis + tahvlis */
@media (max-width: 1024px) {
  .product-grid-scroll {
    display: grid;

    /* tühistame TT25 kolmeveerulise default gridi */
    grid-template-columns: none !important;

    /* kaardid ühel real */
    grid-auto-flow: column;

    /* iga kaart = 100% laius */
    grid-auto-columns: 100%;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;  /* ära lükka skrolli üle lehe piiri */
    gap: 16px;

    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;

    position: relative; /* fade serva jaoks */
  }

  .product-grid-scroll > .wp-block-group {
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* swipe alati maandub kaardi alguses */
  }

  /* 3. Paremas servas õrn fade (aitab mõista, et saab edasi kerida) */
  .product-grid-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left,
      rgba(255,255,255,1),
      rgba(255,255,255,0)
    );
  }
}