/*
 * GT Center — Produktarkivets mobilfilter
 *
 * Filtren ligger normalt som sidokolumn. Under 991px flyttas de av ett Code-element i
 * Bricks-mallen (#290) in i offcanvas-panelen. Bricks egen CSS ger panelen `height:auto`
 * utan maxhöjd, så en lång filterlista växer ut ur skärmen och går inte att scrolla —
 * det är vad som fixas här. Knappraden .gtc-filter-bar byggs av shop-filters.js.
 *
 * Root font size: 62.5% (1rem = 10px)
 */

/* Knappraden hör bara hemma i mobilpanelen. Offcanvasen är display:none över 991px,
   så den göms med automatik där — men var explicit ifall panelen någon gång öppnas. */
.gtc-filter-bar { display: none; }

@media (max-width: 991px) {

  /* ── Panelen: tak + scroll ──────────────────────────────────
     Selektorn måste väga tyngre än Bricks globala klassregel
     `.gt-center-shop-filters__offcanvas.brxe-offcanvas[data-direction] .brx-offcanvas-inner`
     som sätter height:auto. Därav de fem klasserna. */
  .brxe-offcanvas.gt-center-shop-filters__offcanvas[data-direction]
  .gt-center-shop-filters__offcanvas-content.brx-offcanvas-inner {
    max-height:           100vh;
    max-height:           100dvh;
    overflow-y:           auto;
    overscroll-behavior:  contain;
    padding-bottom:       0;
    /* Panelen är `flex-flow: column wrap`. Utan höjdtak märks det inte, men så fort
       höjden begränsas wrappar innehållet till en andra kolumn utanför skärmkanten
       i stället för att scrolla. */
    flex-wrap:            nowrap;
  }

  /* Stängkryssen ligger absolut-positionerad och skulle annars scrolla bort med
     innehållet så fort panelen blev scrollbar. Bricks globala klassregel
     `.gt-center-shop-filters__offcanvas-close.brxe-toggle` har samma specificitet som en
     tvåklass-selektor och skrivs ut senare i head — därav tre klasser här. */
  .gt-center-shop-filters__offcanvas-content
  .gt-center-shop-filters__offcanvas-close.brxe-toggle {
    position:   sticky;
    top:        0;
    right:      auto;
    align-self: flex-end;
    z-index:    3;
  }

  /* ── Knapprad ───────────────────────────────────────────── */
  .gtc-filter-bar {
    display:        flex;
    align-items:    center;
    gap:            1.6rem;
    width:          100%;
    align-self:     stretch;
    position:       sticky;
    bottom:         0;
    z-index:        2;
    /* Bricks sätter order:1 på filterpanelen i mobil. Utan ett eget order hamnar
       knappraden FÖRE filtren i flex-ordningen trots att den ligger sist i DOM:en. */
    order:          2;
    padding:        1.6rem 0 2.4rem;
    background:     var(--white, #fff);
    box-shadow:     0 -1px 0 rgba(0, 0, 0, 0.12);
  }

  .gtc-filter-bar__apply { flex: 1 1 auto; }

  /* "Rensa filter" tonas ned tills det finns något att rensa. Speglar Bricks egen
     .brx-no-active-filter på originalknappen utanför panelen. */
  .gtc-filter-bar__clear {
    flex:             0 0 auto;
    background:       none;
    border:           none;
    padding:          0.8rem 0.4rem;
    text-decoration:  underline;
    cursor:           pointer;
    color:            inherit;
  }

  .gtc-filter-bar__clear[hidden] { display: none; }
}