/* Komponent: mobile-nav — storefront off-canvas drawer + spodná tab-lišta
   Redizajn 22 (smer C · Hybrid). Aktívne LEN na storefronte (partials sa inde
   nerenderujú). Drawer reaguje na body.side-open (prepína app.js [data-side-toggle]).
   Všetko skryté na desktope (>980px) → desktop hlavička ostáva nedotknutá. */

/* ============================================================
   OFF-CANVAS DRAWER (chýbajúci storefront drawer — fix kritického bugu)
   ============================================================ */
.sf-drawer,
.sf-drawer-scrim{ display:none; }

@media (max-width:980px){
  .sf-drawer-scrim{
    display:block; position:fixed; inset:0; z-index:80;
    background:rgba(20,13,8,.5); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity var(--t-base) var(--ease);
  }
  .sf-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; z-index:81;
    width:82%; max-width:320px; background:var(--surface);
    transform:translateX(-100%); transition:transform var(--t-slow) var(--ease);
    box-shadow:0 0 60px rgba(20,13,8,.35);
  }
  body.side-open .sf-drawer-scrim{ opacity:1; pointer-events:auto; }
  body.side-open .sf-drawer{ transform:none; }

  .sf-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 16px; border-bottom:1px solid var(--line);
  }
  .sf-drawer-head .logo img{ height:34px; width:auto; filter:brightness(0); }
  html[data-theme="dark"] .sf-drawer-head .logo img{ filter:none; }

  .sf-drawer-nav{ flex:1; overflow-y:auto; padding:4px 0; }
  .sf-drawer-nav a{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; min-height:56px;
    font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:16px;
    color:var(--ink); border-bottom:1px solid var(--line);
  }
  .sf-drawer-nav a svg{ color:var(--muted); }
  .sf-drawer-nav a:active{ background:var(--cream-deep); }

  .sf-drawer-foot{ padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); background:var(--cream-deep);
    display:flex; flex-direction:column; gap:10px; }
  .sf-drawer-phone{ display:inline-flex; align-items:center; gap:8px;
    font-size:14px; color:var(--graphite); margin-bottom:4px; }
  .sf-drawer-foot .btn-block{ width:100%; }
}

/* ============================================================
   SPODNÁ TAB-LIŠTA (Domov / Sortiment / Hľadať-FAB / Účet / Košík)
   ============================================================ */
.mobile-tabbar{ display:none; }

@media (max-width:980px){
  .mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -22px rgba(46,33,24,.45);
  }
  .mtab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:5px 2px; min-height:52px; justify-content:center;
    color:var(--muted); font-family:var(--font-display); font-weight:var(--fw-semibold);
    font-size:10px; letter-spacing:.02em; position:relative;
  }
  .mtab svg{ width:23px; height:23px; }
  .mtab.is-active{ color:var(--accent); }
  .mtab:active{ color:var(--ink); }

  /* Košík badge */
  .mtab-ic{ position:relative; display:inline-grid; place-items:center; }
  .mtab-cnt{
    position:absolute; top:-5px; right:-9px; background:var(--accent); color:#fff;
    font-size:9px; font-weight:var(--fw-semibold); min-width:15px; height:15px; padding:0 3px;
    border-radius:8px; display:grid; place-items:center; font-family:var(--font-body);
  }

  /* FAB — zvýraznené vyhľadávanie (jadro smeru C) */
  .mtab--fab{ color:var(--accent); transform:translateY(-12px); }
  .mtab--fab .fab{
    width:50px; height:50px; border-radius:50%; background:var(--accent); color:#fff;
    display:grid; place-items:center; margin-bottom:2px;
    box-shadow:0 8px 20px -6px rgba(168,98,60,.7);
  }
  html[data-theme="dark"] .mtab--fab .fab{ background:var(--crema); color:var(--paper); }
  html[data-theme="dark"] .mtab--fab{ color:var(--crema); }
}

/* Posun obsahu nad tab-lištu, aby footer/koniec stránky nezakrýval (var v storefront.css) */
@media (max-width:980px){
  body.sf-theme{ padding-bottom:var(--tabbar-h); }
}