/* Mobilus Miestas – senos parduotuvės atitikties (parity) stiliai: kategorijų ir paieškos sąrašai, kairioji navigacija. 2026-10-21.
   ATSKIRAS failas: mm.css ir mm-ux.css neliečiami. Įtraukiamas layout/header.tpl iškart po mm-parity-pdp.css (oxstyle, ?filemtime).
   Spalvos ir dydžiai – tik per CSS kintamuosius (tokens). Norint atšaukti – pašalinti eilutę iš layout/header.tpl.
   Po šio failo įkeliamas wave styles.min.css, todėl selektoriai ne silpnesni nei mm.css / mm-ux.css. */

:root {
  --mm-lst-surface: #fff;
  --mm-lst-on-dark: #fff;
  --mm-lst-line: #f0f4f8;
  --mm-lst-sub-bg: #fafbfc;
  --mm-lst-nav-text: #4a5568;
  --mm-lst-nav-thumb: 26px;
  --mm-lst-nav-maxh: 300px;
  --mm-lst-sub-maxh: 320px;
  --mm-lst-brand-cell: 100px;
}

/* ---------- Praleidimo nuorodos (FS-13): matomos tik gavus fokusą ---------- */
.mm-skip__link { position: absolute; left: -9999px; top: 0; z-index: 5000; padding: 10px 16px; background: var(--mm-blue-dark); color: var(--mm-lst-on-dark); font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none; }
.mm-skip__link:focus { left: 0; color: var(--mm-lst-on-dark); outline: 2px solid var(--mm-orange); }

/* ---------- Antraštė (HDR-01/H1): prisijungimas, registracija, krepšelis matomi puslapio viršuje ---------- */
.mm-header .mm-hacts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0 0 4px; padding: 0; font-size: 13px; line-height: 18px; }
.mm-header .mm-hacts__link { display: inline-flex; align-items: center; gap: 6px; color: var(--mm-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mm-header .mm-hacts__link:hover, .mm-header .mm-hacts__link:focus { color: var(--mm-link); text-decoration: underline; }
.mm-header .mm-hacts__link--cart { color: var(--mm-blue-dark); }
.mm-header .mm-hacts__link--cart svg { color: var(--mm-orange-dark); }
@media (max-width: 768px) { .mm-header .mm-hacts { display: none; } }

/* ---------- Antraštės informacinės nuorodos (H2): matomos ir 901–1200 px (kompaktiškai), slepiamos tik telefone ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .mm-header .mm-info { display: flex; }
  .mm-header .mm-info__item { margin-right: 10px; padding-right: 10px; }
  .mm-header .mm-info__item span { display: none; }
  .mm-header .mm-header__search { min-width: 220px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .mm-header .mm-info__item { padding-left: 0; }
  .mm-header .mm-info__item::before { display: none; }
}

/* ---------- Meniu: prekių ženklų miniatiūros didesnės (NAV-03) ---------- */
.mm-tiles .mm-submenu--brands { width: calc(var(--mm-lst-brand-cell) * 3 + 44px); }
.mm-tiles .mm-submenu--brands ul { grid-template-columns: repeat(3, var(--mm-lst-brand-cell)); }
.mm-tiles .mm-submenu--brands li a { height: 60px; }

/* ---------- Poskyrių plytelės (LST-07): telefone po dvi eilutėje ---------- */
@media (max-width: 700px) {
  .mm-list .mm-subcats { gap: 10px; }
  .mm-list .mm-subcat { width: calc(50% - 5px); min-height: 120px; padding: 12px 8px; }
  .mm-list .mm-subcat img { max-width: 100%; }
}

/* ---------- Atributų filtrai (LST-10): ilgos grupės suskleistos, „Filtruoti“, „Išvalyti filtrus“ visada ---------- */
.mm-filter--long:not(.is-open) .mm-filter__opt--more { display: none; }
.mm-filter__more { display: inline-block; margin: 2px 0 0; padding: 2px 0; border: 0; background: none; color: var(--mm-link); font-size: 12px; text-decoration: underline; cursor: pointer; }
.mm-filters--attr .mm-filter__apply { width: 100%; justify-content: center; margin: 2px 0 6px; }
.mm-filters--attr .mm-filter__reset, .mm-filters--price .mm-filter__reset--price { display: block; text-align: center; font-size: 12px; }
@media (max-width: 1100px) { .mm-filters--attr .mm-filter__apply, .mm-filters--attr .mm-filter__reset { flex: 1 1 100%; } }

/* ---------- Kairioji kategorijų navigacija (LST-01, kaip senoje #left_menu_new) ---------- */
.mm-list .mm-list__side { min-width: 0; }
.mm-leftnav { margin: 14px 0 0; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: var(--mm-lst-surface); overflow: hidden; }
.mm-leftnav__list { list-style: none; margin: 0; padding: 0; }
.mm-leftnav__item { border-bottom: 1px solid var(--mm-lst-line); }
.mm-leftnav__item:last-child { border-bottom: 0; }
.mm-leftnav__link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-left: 3px solid transparent; color: var(--mm-lst-nav-text); font-size: 13px; line-height: 1.35; text-decoration: none; }
.mm-leftnav__link img { width: var(--mm-lst-nav-thumb); height: var(--mm-lst-nav-thumb); object-fit: contain; flex-shrink: 0; }
.mm-leftnav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mm-leftnav__link:hover, .mm-leftnav__link:focus { background: var(--mm-blue-50); color: var(--mm-link); text-decoration: none; }
.mm-leftnav__item.is-active > .mm-leftnav__link { background: var(--mm-blue-50); border-left-color: var(--mm-link); color: var(--mm-link); font-weight: 700; }
.mm-leftnav__sub { list-style: none; margin: 0; padding: 4px 0 8px; background: var(--mm-lst-sub-bg); max-height: var(--mm-lst-sub-maxh); overflow-y: auto; }
.mm-leftnav__sub a { display: block; padding: 6px 12px 6px 48px; color: var(--mm-muted); font-size: 12px; line-height: 1.4; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-leftnav__sub a:hover, .mm-leftnav__sub a:focus { background: var(--mm-blue-50); color: var(--mm-link); }
@media (max-width: 1100px) {
  .mm-leftnav { max-height: var(--mm-lst-nav-maxh); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mm-leftnav__sub { display: none; }
}

/* ---------- Puslapiavimas (LST-11 / SRCH-02): « 1 2 … » ir viršutinė eilutė paieškoje ---------- */
.mm-pager .page-link { min-width: 34px; text-align: center; }
.mm-paging--top { margin: 0 0 8px; }
.mm-listtop__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; }

/* ==========================================================================
   UX partija „front“ (2026-10-21): antraštės lipni juosta, titulinio slaideris, kategorijos filtrai telefone, meniu.
   Visi dydžiai, spalvos ir laikai – tokenai žemiau (mm.js laikus / atstumus skaito iš čia per getComputedStyle).
   ========================================================================== */
:root {
  --mm-uxf-badge: 18px;                     /* krepšelio kiekio ženkliukas (≥ 18 px apskritimas) */
  --mm-uxf-badge-fs: 11px;
  --mm-uxf-badge-bg: var(--mm-blue-dark);   /* ant oranžinio krepšelio mygtuko */
  --mm-uxf-badge-fg: var(--mm-lst-on-dark);
  --mm-uxf-badge-inset: 2px;
  --mm-uxf-hero-interval: 6s;               /* automatinis skaidrių keitimas (buvo 6000 ms mm.js) */
  --mm-uxf-hero-swipe: 40px;                /* braukimo slenkstis (touch / pen) */
  --mm-uxf-menu-nav-wait: 600ms;            /* mobilus meniu: nuoroda atidaroma po history.back() popstate, ne vėliau kaip po šio laiko */
  --mm-uxf-hit: 24px;                       /* taško / pauzės mygtuko paspaudimo plotas (WCAG 2.5.8) */
  --mm-uxf-dot-w: 24px;                     /* taško juostelė (kaip mm.css .mm-hero__dots i) */
  --mm-uxf-dot-h: 3px;
  --mm-uxf-dot-bg: #d5dde8;                 /* = mm.css .mm-hero__dots i */
  --mm-uxf-dot-on: var(--mm-blue);
  --mm-uxf-dots-bottom: 4px;                /* juostelė lieka ~ten pat, kur buvo (bottom 14 px, aukštis 3 px) */
  --mm-uxf-pause-fg: var(--mm-blue-dark);
  --mm-uxf-hero-media-ratio: 253 / 300;     /* = mm.css hero nuotraukos langelis (253 × 300) */
  --mm-uxf-filter-gap: 12px;
}

/* 4.2 Lipni juosta telefone: ≤480 px vietoj sumos – kiekio ženkliukas (paieškos laukas lieka platus). */
.mm-sticky .mm-sticky__badge { display: none; }
@media (max-width: 480px) {
  .mm-sticky .mm-sticky__cart { position: relative; }
  .mm-sticky .mm-sticky__cart-s { display: none; }
  .mm-sticky .mm-sticky__cart.is-full .mm-sticky__badge { display: inline-flex; align-items: center; justify-content: center; position: absolute;
    top: var(--mm-uxf-badge-inset); right: var(--mm-uxf-badge-inset); min-width: var(--mm-uxf-badge); height: var(--mm-uxf-badge); padding: 0 4px;
    box-sizing: border-box; border-radius: calc(var(--mm-uxf-badge) / 2); background: var(--mm-uxf-badge-bg); color: var(--mm-uxf-badge-fg);
    font-size: var(--mm-uxf-badge-fs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
}

/* 4.6 Atidarius telefono meniu mmassist mygtukas nedengia meniu (mmassist failai nekeičiami; kaip html.mm-search-open – mm.css). */
body.mm-mobile-menu-open .mmassist { visibility: hidden; }

/* 4.9 Titulinio slaideris: taškai – mygtukai (≥ 24 × 24), pauzės mygtukas, braukimas (vertikalus slinkimas lieka naršyklei). */
.mm-hero .mm-hero__track { touch-action: pan-y pinch-zoom; }
.mm-hero .mm-hero__dots { bottom: var(--mm-uxf-dots-bottom); gap: 6px; }
.mm-hero .mm-hero__dots button { display: flex; align-items: center; width: var(--mm-uxf-dot-w); min-width: var(--mm-uxf-hit); height: var(--mm-uxf-hit); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-hero .mm-hero__dots button::before { content: ""; display: block; width: 100%; height: var(--mm-uxf-dot-h); border-radius: 2px; background: var(--mm-uxf-dot-bg); }
.mm-hero .mm-hero__dots button[aria-current="true"]::before { background: var(--mm-uxf-dot-on); }
.mm-hero .mm-hero__dots button:focus-visible { outline: 2px solid var(--mm-link); outline-offset: 2px; }
.mm-hero .mm-hero__pause { position: absolute; z-index: 2; left: var(--mm-hero-nav-inset); bottom: var(--mm-uxf-dots-bottom); display: flex; align-items: center; justify-content: center;
  width: var(--mm-uxf-hit); height: var(--mm-uxf-hit); margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mm-uxf-pause-fg); cursor: pointer; }
.mm-hero .mm-hero__pause[hidden] { display: none; }
.mm-hero .mm-hero__pause:focus-visible { outline: 2px solid var(--mm-link); outline-offset: 2px; }
.mm-hero .mm-hero__pause-i { display: block; width: 10px; height: 12px; box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mm-hero.is-paused .mm-hero__pause-i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
/* 6.5 Nuotraukos langelio proporcija (≥768 px langelis = nuotraukos dydis; telefone aukštį nustato mm-ux.css). */
@media (min-width: 768px) { .mm-hero .mm-hero__media { aspect-ratio: var(--mm-uxf-hero-media-ratio); } }

/* 6.8 Meniu prekių ženklų paveikslėliai: width/height atributai duoda tik proporciją, dydį riboja mm.css (kaip anksčiau). */
.mm-tiles .mm-submenu--brands li img { width: auto; height: auto; }

/* 4.4 Kategorijos filtrai telefone: „Filtrai (n)“ mygtukas (aria-expanded), kairioji navigacija – po prekėmis (tvarka CSS, DOM nekeičiamas). */
.mm-filtertoggle { display: none; }
@media (max-width: 767px) {
  .mm-list .mm-filtertoggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--mm-tap);
    margin: 0 0 var(--mm-uxf-filter-gap); border: 1px solid var(--mm-line); background: var(--mm-lst-surface); color: var(--mm-text); font-size: 15px; }
  .mm-list .mm-filtertoggle::after { content: ""; width: 8px; height: 8px; margin: 0 4px 4px 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .mm-list .mm-filtertoggle[aria-expanded="true"]::after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }
  .mm-list .mm-filtertoggle[aria-expanded="false"] + .mm-filterbody { display: none; }
  .mm-list .mm-filterbody { margin: 0 0 var(--mm-uxf-filter-gap); }
  .mm-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .mm-list > .mm-list__side { display: contents; }
  .mm-list > .mm-list__side > * { order: 1; }
  .mm-list > .mm-list__main { order: 2; width: 100%; }
  .mm-list > .mm-list__side > .mm-leftnav { order: 3; }
}