/* =====================
       MODERN LIGHT 2025 (Single file)
       ===================== */

       :root{
        /* Palette */
        --bg: #f9fafb;
        --surface: #ffffff;
        --ink: #0f172a;        /* slate-900 */
        --muted: #475569;      /* slate-600 */
        --line: #e5e7eb;       /* gray-200 */
        --brand: #2563eb;      /* blue-600 */
        --ring: rgba(37,99,235,.22);
        --shadow: 0 6px 24px rgba(15,23,42,.08), 0 1px 0 rgba(15,23,42,.06);
        --color-link: #348f92;
  
        /* Radii & spacing */
        --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
        --gap: 20px;
      }
  
      /* Base */
      *{box-sizing:border-box}
      html,body{height:100%}
      html { scroll-padding-top: 64px; } /* anchors neprekrýva fixný header */
      body{
        margin:0; color:var(--ink);
        font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
        background:var(--bg)!important; position:relative;
        overflow-x: hidden;
      }
      /* FIXED, non-scrolling decorative background */
      body::before{
        content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
        background:
          radial-gradient(900px 600px at 10% -10%, #e0e7ff 0%, transparent 60%),
          radial-gradient(900px 600px at 110% 0%, #dcfce7 0%, transparent 60%),
          var(--bg);
      }
      img{display:block; max-width:100%}
      a{color:var(--color-link); text-decoration:none}
  
      /* ===== Topbar (FIXED) ===== */
      .topbar{
        position: fixed !important; top:0; left:0; right:0;
        height:64px; z-index:9999;
        display:flex; align-items:center; gap:12px; padding:0 18px;
        background: rgba(255,255,255,.6);
        border-bottom:1px solid var(--line);
        backdrop-filter: saturate(1.1) blur(10px);
        transition: box-shadow .2s ease;
      }
      .topbar.elev{ box-shadow: var(--shadow); }
      .topbar-spacer{height:64px;} /* posunie obsah pod fixný header */
  
      .logo{font-weight:800; letter-spacing:.2px; color:var(--ink); font-size:18px}
      .top-actions{margin-left:auto; display:flex; gap:8px}
  
      /* Buttons */
      .btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:10px 14px; font-weight:600; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:transform .12s ease, box-shadow .12s ease}
      .btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
      .btn--brand{background:linear-gradient(90deg, var(--brand), #60a5fa); color:#fff; border-color:transparent}
      .btn--ghost{background:#fff; color:var(--ink)}
      .btn:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}
  
      /* Hamburger */
      .hamb{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); align-items:center; justify-content:center}
      .hamb span{display:block; width:20px; height:2px; background:var(--ink)}
  
      /* Layout */
      .shell{max-width:1280px; margin:0 auto; padding:24px; display:grid; grid-template-columns:280px 1fr; gap:24px; position:relative; z-index:1;}
      @media (max-width:1100px){ .shell{grid-template-columns:1fr} .hamb{display:inline-flex} .top-actions{display:none} }
  
      /* Sidebar */
      .sidebar{
        position:sticky; top:88px; height:calc(100vh - 104px);
        padding:16px; border:1px solid var(--line); border-radius:var(--r-lg);
        background:var(--surface); box-shadow:var(--shadow);
        display:flex; flex-direction:column; gap:8px
      }
      .nav-link{display:block; padding:12px 12px; border-radius:12px; color:var(--ink); font-weight:500; position:relative}
      .nav-link::after{content:''; position:absolute; left:12px; bottom:8px; width:0; height:2px; background:var(--brand); transition:width .2s ease}
      .nav-link:hover::after{width:50%}
      .nav-link.active{background:#eef2ff}
      .sidebar-cta{margin-top:auto; border:1px dashed var(--line); border-radius:12px; padding:12px; color:var(--muted)}
  
      /* Overlay (mobile menu) */
      .overlay{position:fixed; inset:0; background:#fff; z-index:10000; display:none}
      .overlay.open{display:block}
      .overlay-in{padding:18px}
      .overlay-head{display:flex; align-items:center; justify-content:space-between}
      .overlay-brand{font-weight:800}
      /* NOVÉ: scrollovateľné telo overlayu */
      .overlay-body{
        padding:14px 18px;
        overflow:auto;                   /* kľúčové: povolí scroll */
        -webkit-overflow-scrolling: touch; /* iOS inertné scrollovanie */
        max-height:calc(100dvh - 64px - 28px); 
        /* 64px topbar overlay-head + ~28px vnútorné paddings, uprav podľa reality */
        padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
      }
      .overlay-close{width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff}
      .overlay-nav{display:grid; gap:10px; margin-top:14px}
      .overlay-link{display:block; padding:14px 14px; border-radius:14px; border:1px solid var(--line); background:#fff; font-weight:600}
      .overlay-link.brand{border-color:#82cfc8}
  
      /* Hero */
      .hero{border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; background:var(--surface); box-shadow:var(--shadow)}
      .hero h1{margin:0 0 8px 0; font-size:clamp(24px,3.6vw,40px)}
      .hero p{margin:0; color:var(--muted)}
      .breadcrumbs{color:var(--muted); font-size:14px; margin:0 0 10px 0}
      .breadcrumbs a{color:var(--muted) !important}
  
      /* Sections */
      .section{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:var(--surface); box-shadow:var(--shadow); margin-top:18px}
      .section h2{margin:0 0 10px 0}
      .note{font-size:14px; color:var(--muted)}
  
      /* Chips */
      .filters{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px}
      .chip{border:1px solid var(--line); padding:8px 12px; border-radius:999px; background:#fff; cursor:pointer; font-weight:500}
      .chip.active{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
  
      /* Product grid */
      .product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
      @media (max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr)}}
      @media (max-width:640px){.product-grid{grid-template-columns:1fr}}
      .card{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .15s ease}
      article.card{border:none;box-shadow:none;background:none;}
      .card:hover{transform:translateY(-2px)}
      .card__img{display:block; aspect-ratio:4/3; background:#f1f5f9}
      .card__img img{width:100%; height:100%; object-fit:cover}
      .card__body{padding:14px}
      .card__body .btn{margin-top: 10px;}
      .card__title{margin:0 0 6px 0; font-size:16px}
      .card__meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px}
      .badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:22px;color:var(--muted);font-weight:600;}
      .dot{width:4px; height:4px; background:#cbd5e1; border-radius:50%}

      /* FAQ */
      #faq details div {
        padding: 10px;
        border: 1px solid #dedede;
        border-radius: 8px;
        margin: 14px 0;
        background-color: #efefef;
     }
      summary{cursor:pointer;}
  
      /* Footer */
      .site-footer{margin-top:26px; border-top:1px solid var(--line); }
      .foot-in{max-width:1280px; margin:0 auto; padding:16px 24px; display:flex; justify-content:space-between; align-items:center; color:var(--muted)}
  
      /* Mobile visibility */
      @media (max-width:1100px){ .sidebar{display:none} .hamb{display: grid;  
        justify-content: space-around; gap: 1px; align-items: center; justify-items: stretch; align-content: space-evenly; } }
  
      /* Section accents (subtle) */
      #jemna .section{border-color:#dbeafe}
      #hruba .section{border-color:#dcfce7}
      #grafo .section{border-color:#e0f2fe}
  
      /* Reduced motion */
      @media (prefers-reduced-motion: reduce){
        .btn,.card,.topbar{transition:none}
      }

      .img-main{border-radius:16px; overflow:hidden; max-width:60%; margin:auto;max-height:200px}