/* ============================================================
   PICNIC GO — shared stylesheet
   ============================================================ */
:root{
  --cream:#F6EDDB; --paper:#FBF6EB; --khaki:#8D7A58; --khaki-deep:#6E5D40;
  --orange:#F07E2C; --orange-deep:#C8621D; --blue:#3889B0; --ink:#241D12;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:30; background:var(--cream);
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; border-bottom:1px solid #E6D8B8;
}
.wordmark{display:flex; align-items:center; gap:2px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:24px; color:var(--ink);}
.wordmark svg{height:20px; margin:0 1px;}
.nav-links{display:flex; gap:28px; font-size:14px; font-weight:500;}
.nav-cta{background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:100px; font-size:13.5px; font-weight:600;}
@media(max-width:800px){ .nav-links{display:none;} .nav{padding:16px 20px;} }

/* ---------- footer ---------- */
footer{
  background:var(--ink); color:#EFE6D4;
  padding:56px 48px 34px; margin-top:60px;
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px;
}
footer .wordmark{ color:#EFE6D4; }
footer p{ font-size:14px; color:#B7AC94; max-width:280px; line-height:1.6; margin-top:14px;}
footer .fcol h4{ font-family:'Baloo 2',sans-serif; font-size:13px; color:#EFE6D4; margin-bottom:12px;}
footer .fcol a{ display:block; font-size:14px; color:#B7AC94; margin-bottom:8px; }
footer .fcol a:hover{ color:#EFE6D4; }

/* ---------- generic page head ---------- */
.page-head{max-width:720px; margin:44px auto 8px; padding:0 32px;}
.page-head .kicker{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; color:var(--orange-deep); margin-bottom:8px;}
.page-head h1{font-family:'Fraunces',serif; font-weight:600; font-size:36px; letter-spacing:-.5px; margin-bottom:10px;}
.page-head p{font-size:15px; color:#4b4230; max-width:600px; line-height:1.6;}
.prose{max-width:680px; margin:0 auto 60px; padding:0 32px; font-size:15.5px; line-height:1.75; color:#3a3221;}
.prose h2{font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin:32px 0 12px; color:var(--ink);}
.prose p{margin-bottom:14px;}
.prose ul{margin:0 0 14px 20px;}

/* ---------- catalog toolbar / grid ---------- */
.toolbar{max-width:1180px; margin:26px auto 30px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.filters{display:flex; gap:8px; flex-wrap:wrap;}
.filter-btn{font-family:'Baloo 2',sans-serif; font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:100px; background:var(--paper); color:var(--khaki-deep); cursor:pointer; border:1.4px solid transparent;}
.filter-btn.active{background:var(--ink); color:var(--paper);}
.counter{font-size:13.5px; font-weight:600; color:#4b4230;}
.counter b{color:var(--ink);}

.grid{max-width:1180px; margin:0 auto 70px; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:980px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr);}}

.card{background:var(--paper); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; transition:opacity .15s;}
.card.hidden{display:none;}
.card-img{position:relative; aspect-ratio:1/1; overflow:hidden; background:#EFE3C8;}
.card-img img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:16px 18px 20px;}
.tag-scenario{font-size:11px; font-weight:600; color:var(--khaki-deep); margin-bottom:6px;}
.card h3{font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; line-height:1.25; margin-bottom:8px; min-height:38px;}
.price{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:15px;}
.status{position:absolute; top:12px; left:12px; z-index:2; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:10px; padding:5px 9px; border-radius:100px;}
.status.in{background:#3B5A2E; color:#EAF2E2;}
.status.soon{background:var(--paper); color:var(--khaki-deep); border:1.4px dashed var(--khaki-deep);}

.add-btn{margin-top:10px; width:100%; padding:9px 0; border-radius:100px; background:var(--ink); color:var(--paper); border:none; cursor:pointer; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:12.5px;}
.add-btn:hover{background:var(--orange-deep);}
.add-btn.added{background:#3B5A2E;}

/* ---------- product detail page ---------- */
.product-view{max-width:1000px; margin:24px auto 70px; padding:0 32px; display:grid; grid-template-columns:1fr 1fr; gap:48px;}
@media(max-width:760px){ .product-view{grid-template-columns:1fr;} }
.product-photo{border-radius:22px; overflow:hidden; aspect-ratio:1/1; background:#EFE3C8;}
.product-photo img{width:100%; height:100%; object-fit:cover;}
.product-info .tag-scenario{font-size:13px; margin-bottom:10px;}
.product-info h1{font-family:'Fraunces',serif; font-weight:600; font-size:30px; letter-spacing:-.5px; margin-bottom:14px; line-height:1.2;}
.product-info .price{font-size:26px; margin:16px 0 20px;}
.product-info .meta{font-size:14px; color:#4b4230; margin-bottom:6px;}
.product-info .add-btn{width:auto; padding:14px 30px; font-size:14px; margin-top:14px;}
.product-description{margin-top:30px;}
.product-description h3, .product-specs h3{font-family:'Fraunces',serif; font-weight:600; font-size:16px; margin-bottom:10px;}
.product-description p{font-size:14.5px; line-height:1.7; color:#4b4230;}
.product-specs{margin-top:26px;}
.product-specs table{width:100%; border-collapse:collapse; font-size:14px;}
.product-specs td{padding:9px 0; border-bottom:1px solid #E6D8B8;}
.product-specs td:first-child{color:var(--khaki-deep); width:45%;}
.product-specs td:last-child{font-weight:600;}
.back-link{display:inline-block; margin:20px 32px 0; font-size:14px; font-weight:600; color:var(--khaki-deep);}

/* ---------- cart ---------- */
.cart-fab{position:fixed; right:22px; bottom:22px; z-index:50; background:var(--ink); color:var(--paper); border:none; cursor:pointer; padding:14px 22px; border-radius:100px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 24px rgba(36,29,18,.28);}
.cart-fab .badge{background:var(--orange); color:#FFF6E8; border-radius:100px; padding:1px 8px; font-size:12px;}

.overlay{position:fixed; inset:0; background:rgba(36,29,18,.5); z-index:60; display:none; align-items:center; justify-content:center; padding:20px;}
.overlay.open{display:flex;}
.modal{background:var(--paper); border-radius:22px; width:100%; max-width:480px; max-height:86vh; overflow-y:auto; padding:26px;}
.modal h2{font-family:'Fraunces',serif; font-weight:600; font-size:24px; margin-bottom:16px;}
.modal-close{float:right; background:none; border:none; font-size:20px; cursor:pointer; color:var(--khaki-deep);}
.cart-item{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #E6D8B8; font-size:14px; gap:10px;}
.cart-item .ci-name{flex:1;}
.cart-item .ci-qty{display:flex; align-items:center; gap:6px;}
.cart-item .ci-qty button{width:22px; height:22px; border-radius:50%; border:1px solid var(--khaki-deep); background:none; cursor:pointer; font-size:13px; line-height:1;}
.cart-total{display:flex; justify-content:space-between; font-weight:700; padding:14px 0; font-family:'Baloo 2',sans-serif;}
.cart-empty{font-size:14px; color:#4b4230; padding:20px 0;}

.checkout-form{display:none; margin-top:8px;}
.checkout-form.open{display:block;}
.checkout-form label{display:block; font-size:12.5px; font-weight:600; color:var(--khaki-deep); margin:12px 0 5px;}
.checkout-form input, .checkout-form textarea{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #D9C9A3; background:#fff; font-family:'Inter',sans-serif; font-size:14px;}
.checkout-form textarea{resize:vertical; min-height:60px;}
.modal-actions{margin-top:20px; display:flex; gap:10px;}
.btn-secondary{flex:1; padding:12px 0; border-radius:100px; background:none; border:1.4px solid var(--ink); font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; color:var(--ink);}
.btn-submit{flex:1; padding:12px 0; border-radius:100px; background:var(--orange); border:none; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13.5px; cursor:pointer; color:#fff;}
.btn-submit:disabled{opacity:.6; cursor:default;}
.form-msg{font-size:13px; margin-top:12px; display:none;}
.form-msg.ok{color:#3B5A2E; display:block;}
.form-msg.err{color:#B23A2E; display:block;}

/* ---------- simple contact form (kontakty.php) ---------- */
.contact-grid{max-width:900px; margin:0 auto 70px; padding:0 32px; display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media(max-width:700px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{background:var(--paper); border-radius:20px; padding:26px;}
.contact-card h3{font-family:'Fraunces',serif; font-size:18px; margin-bottom:12px;}
.contact-card p{font-size:14.5px; line-height:1.7; color:#4b4230;}

/* ============================================================
   HOMEPAGE — hero illustration, scenario cards, route line
   ============================================================ */
  .grain{
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    mix-blend-mode:overlay;
    opacity:.5;
    pointer-events:none;
  }

  /* ---------- nav ---------- */
  .nav{
    position:relative; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:26px 48px;
  }
  .wordmark{
    display:flex; align-items:center; gap:2px;
    font-family:'Baloo 2', sans-serif;
    font-weight:800; font-size:26px; letter-spacing:-.5px;
    color:var(--ink);
  }
  .wordmark svg{ height:22px; margin:0 1px; }
  .wordmark .go{ color:var(--ink); }
  .nav-links{
    display:flex; gap:34px;
    font-size:14.5px; font-weight:500; color:var(--ink);
  }
  .nav-cta{
    background:var(--ink); color:var(--paper);
    padding:11px 22px; border-radius:100px;
    font-size:14px; font-weight:600;
  }
  @media(max-width:800px){ .nav-links{display:none;} .nav{padding:20px 22px;} }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    margin:0 20px;
    border-radius:28px;
    overflow:hidden;
    height:640px;
    background:#FCEFD6;
  }
  .hero-illustration{
    position:absolute; inset:0; width:100%; height:100%;
  }
  .hero-grain{ position:absolute; inset:0; }
  .hero::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:58%;
    background:linear-gradient(180deg, transparent 0%, rgba(36,24,10,.35) 40%, rgba(30,20,9,.72) 100%);
    pointer-events:none;
  }
  .hero-content{
    position:relative; z-index:5;
    height:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 56px 56px;
    max-width:640px;
  }
  .hero-eyebrow{
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px;
    color:#FFE6BE; margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .hero-eyebrow svg{height:14px;}
  .hero h1{
    font-family:'Fraunces', serif;
    font-weight:600; font-size:68px; line-height:0.98; letter-spacing:-1.5px;
    color:#FFF8EC;
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:italic; font-weight:500; color:#FFDCA0; }
  .hero p{
    font-size:17px; line-height:1.55; color:#FBE7CB; max-width:420px; margin-bottom:30px;
  }
  .hero-actions{ display:flex; align-items:center; gap:20px; }
  .btn-primary{
    background:#FBF6EB; color:var(--ink);
    padding:15px 28px; border-radius:100px;
    font-size:15px; font-weight:600;
    display:inline-block;
  }
  .btn-time{
    font-family:'Baloo 2',sans-serif; font-size:14px; color:#FFF3DE; font-weight:600;
    display:flex; align-items:center; gap:8px;
  }
  .btn-time .dot{ width:6px; height:6px; border-radius:50%; background:#FFDCA0; }

  /* poster stamp badge */
  .stamp{
    position:absolute; top:44px; right:52px; z-index:8;
    width:132px; height:132px;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(8deg);
  }
  .stamp svg{ width:100%; height:100%; }

  /* ---------- route path section ---------- */
  .route-wrap{ position:relative; padding:120px 20px 40px; }
  .route-svg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }

  .section-head{
    position:relative; z-index:2;
    text-align:center; max-width:560px; margin:0 auto 78px;
  }
  .section-head .kicker{
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:14px;
    color:var(--orange-deep); margin-bottom:12px;
  }
  .section-head h2{
    font-family:'Fraunces', serif; font-weight:600; font-size:42px;
    letter-spacing:-1px; line-height:1.08; color:var(--ink);
  }

  .scenarios{
    position:relative; z-index:2;
    max-width:1120px; margin:0 auto;
    display:flex; flex-direction:column; gap:26px;
  }
  .scen-card{
    display:grid; grid-template-columns:1fr 1.1fr; gap:0;
    background:var(--paper);
    border-radius:26px; overflow:hidden;
    box-shadow:0 1px 0 rgba(36,29,18,.05);
  }
  .scen-card.rev{ grid-template-columns:1.1fr 1fr; }
  .scen-card.rev .scen-photo{ order:2; }
  .scen-photo{
    position:relative; min-height:260px;
  }
  .scen-photo .grain{ opacity:.35; }
  .scen-badge{
    position:absolute; top:22px; left:22px; width:64px; height:64px;
  }
  .scen-text{
    padding:44px 48px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .scen-tag{
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:13px;
    text-transform:none; margin-bottom:14px;
  }
  .scen-text h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:30px;
    margin-bottom:12px; letter-spacing:-.5px;
  }
  .scen-text p{ font-size:15px; line-height:1.6; color:#4b4230; margin-bottom:22px; max-width:360px;}
  .scen-link{
    font-size:14.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
    padding-bottom:2px; border-bottom:1.5px solid currentColor; width:fit-content;
  }

  @media(max-width:820px){
    .scen-card, .scen-card.rev{ grid-template-columns:1fr; }
    .scen-card.rev .scen-photo{ order:0; }
    .hero{ height:auto; padding-bottom:0;}
    .hero-content{ padding:0 28px 36px; }
    .hero h1{ font-size:44px; }
    .stamp{ width:96px; height:96px; top:24px; right:24px; }
  }

  /* ---------- footer strip ---------- */
  .stripe{
    display:flex; height:14px; margin-top:100px;
  }
  .stripe div{ flex:1; }