:root{
      --bg: #f7fbfd;
      --card: #ffffff;
      --accent: #0b77d1; /* primary */
      --accent-2: #07aabf; /* secondary */
      --muted: #6b7280;
      --radius: 12px;
      --max-width: 1100px;
      --shadow: 0 6px 18px rgba(12,23,40,.08);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    html {
      scroll-behavior: smooth;
    }

    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:#0b1320;line-height:1.45}

    .container{width:92%;max-width:var(--max-width);margin:0 auto}

    /* Header */
    header{
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      position:sticky;
      top:0;
      z-index:50;
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{width:44px;height:44px;border-radius:10px;object-fit:cover}
    nav ul{display:flex;gap:20px;list-style:none;padding:0;margin:0}
    nav a{color:inherit;text-decoration:none;font-weight:600}
    .cta{background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}

    section{scroll-margin-top:80px}

    /* Mobile nav */
    .mobile-toggle{display:none;background:none;border:0;font-size:20px}
    .mobile-close {
      background: none;
      border: 0;
      font-size: 16px;
      font-weight: 700;
      padding: 12px 0;
      cursor: pointer;
      color: var(--accent);
      width: 100%;
      text-align: left;
    }

    .mobile-close:hover {
      color: var(--accent-2);
    }
    @media (max-width:880px){nav ul{display:none}.mobile-toggle{display:block}}

    /* Hero */
    .hero{padding:48px 0;display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
    .hero h1{font-size:28px;margin:0 0 12px}
    .hero p{color:var(--muted);margin:0 0 18px}
    .hero-cta {display: flex; gap: 12px; align-items: center}
    .hero-cta a:last-child {margin-left: auto}
    .card{background:var(--card);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}

    /* Services */
    .services{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
    .service{padding:16px;border-radius:12px;border:1px solid rgba(11,19,32,.04)}
    .service h3{margin:6px 0}
    .service p{color:var(--muted);margin:0}

    @media (max-width:980px){.hero{grid-template-columns:1fr}.services{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:640px){
      .services{grid-template-columns:1fr}
      .hero{padding:24px 0}
      /* Make products stack vertically on small screens */
      #produkty > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
        /* Stack product detail gallery and info on small screens */
        main.container div[style*="display:grid"][style*="grid-template-columns:3fr 2fr"] {
          grid-template-columns: 1fr !important;
        }
      .small-hidden {
        display: none !important;
      }
    }

    /* Products */
    #produkty {
      background: #eef6fb;
      padding: 32px 16px;
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }

    #produkty > * {
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
    }

    /* Gallery */
    .gallery{display:flex;gap:12px;margin-top:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:transparent transparent}
    .gallery:hover{scrollbar-color:#cbd5e1 #f1f5f9}
    .gallery::-webkit-scrollbar{height:8px}
    .gallery::-webkit-scrollbar-track{background:transparent}
    .gallery::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
    .gallery:hover::-webkit-scrollbar-track{background:#f1f5f9}
    .gallery:hover::-webkit-scrollbar-thumb{background:#cbd5e1}
    .gallery::-webkit-scrollbar-thumb:hover{background:#94a3b8}
    .gallery-item{flex:0 0 300px;scroll-snap-align:start}
    .gallery img{width:100%;height:240px;object-fit:cover;border-radius:10px}
    .gallery-caption{margin:8px 0 0;font-size:13px;color:var(--muted);text-align:center}
    @media (max-width:480px){.gallery-item{flex:0 0 240px}.gallery img{height:180px}}

    /* Gallery navigation buttons */
    .gallery-nav{position:absolute;top:50%;background:rgba(255,255,255,.8);border:0px;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .2s}
    .gallery-nav:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
    .gallery-nav-left{left:8px}
    .gallery-nav-right{right:8px}
    @media (max-width:640px){.gallery-nav{width:36px;height:36px;font-size:20px}}

    /* Contact */
    .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;margin:28px 0;align-items:end}
    form label{display:block;font-weight:600;margin-bottom:6px}
    input[type=text],input[type=email],textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef6;background:#fff}
    textarea{min-height:120px}
    .btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
    @media (max-width:980px){.contact-grid{grid-template-columns:1fr}}

    /* Footer */
    footer{padding:28px 0;color:var(--muted)}

    /* Utilities */
    .muted{color:var(--muted)}
    .kicker{font-weight:700;color:var(--accent-2);display:inline-block;margin-bottom:8px}

    /* Small details */
    .price-tag{background:#eef9ff;color:var(--accent);padding:8px 10px;border-radius:999px;font-weight:700}
    .chip{display:inline-block;background:#f1f6fb;padding:6px 10px;border-radius:999px}

    /* Smooth image placeholder */
    .img-hero{width:fit;height:300px;object-fit:cover;border-radius:10px;max-width:100%}

    /* Accessibility focus */
    a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(11,119,209,.15);outline-offset:2px}

    .map-responsive {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      overflow: hidden;
      border-radius: 10px;
    }
    .map-responsive iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .nav-image {
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      overflow: hidden;
      background: #eaf6fc;
    }

    .nav-image img {
      width: 100%;
      display: block;
      max-height: 600px;
      object-fit: cover;
    }

    /* Product detail gallery */
    .product-gallery {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .product-gallery-main {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      background: #e5edf5;
    }

    .product-gallery-main img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 460px; /* fixed height for consistent gallery layout */
      max-height: none;
    }

    .product-gallery-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .product-gallery-thumb {
      flex: 0 0 72px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      opacity: 0.8;
      transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
      background: #e5edf5;
    }

    .product-gallery-thumb img {
      width: 100%;
      height: 56px;
      object-fit: cover;
      display: block;
    }

    .product-gallery-thumb:hover {
      opacity: 1;
      transform: translateY(-1px);
    }

    .product-gallery-thumb.is-active {
      border-color: var(--accent);
      opacity: 1;
    }

    @media (max-width: 640px) {
      .product-gallery-main img {
        height: 260px; /* smaller fixed height on mobile */
      }
    }

    /* Snackbar */
    #snackbar {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      background: #111827;
      color: #f9fafb;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      box-shadow: 0 10px 25px rgba(15,23,42,.25);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      transform-origin: center;
      z-index: 100;
    }

    #snackbar.snackbar-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width:640px){
      #snackbar {
        bottom: 16px;
        max-width: 90vw;
        text-align: center;
      }
    }