/* Reset i podstawy */
:root{
  /* Premium dark palette z sage accent */
  --ink-deep:#0d1410;        /* bardzo głęboki, prawie czarny z zielonym podtonem */
  --ink-rich:#1a221d;        /* bogaty ciemny z zielonkawym odcieniem */
  --surface-dark:#232b26;    /* ciemna powierzchnia z subtelną zielenią */
  --surface-elevated:#2d3832;/* podniesiona powierzchnia */
  --sage:#b8d2a8;            /* signature sage green - akcent */
  --sage-muted:#94b385;      /* przygaszony sage */
  --sage-soft:#d4e5c8;       /* bardzo delikatny sage */
  --text-primary:#e8efe4;    /* główny tekst - ciepły biały z zielonym podtonem */
  --text-secondary:#a8b5a3;  /* drugorzędny tekst */
  --text-tertiary:#6b7968;   /* najmniej ważny tekst */
  --border-subtle:rgba(184,210,168,0.12);
  --border-emphasis:rgba(184,210,168,0.24);
  --accent-glow:rgba(184,210,168,0.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text-primary);
  background:var(--ink-deep);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}

/* Tło - sophisticated dark z subtelnymi sage akcentami */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1400px 1400px at 15% 0%, rgba(184,210,168,0.04), transparent 65%),
    radial-gradient(1200px 1200px at 85% 100%, rgba(184,210,168,0.03), transparent 60%),
    linear-gradient(135deg, #0d1410 0%, #1a221d 100%);
  background-repeat:no-repeat;
}

.container{max-width:1160px;margin:0 auto;padding:0 20px}
.container.narrow{max-width:900px}

/* Left category rail */
.category-rail{position:fixed;top:0;left:0;min-height:100vh;height:100dvh;width:102px;padding:12px 10px;background:var(--ui-sage);border-right:1px solid rgba(0,0,0,0.08);display:none;z-index:20}
.category-rail nav{display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center;align-items:center;margin-top:0}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);padding:10px 6px;border-radius:12px;border:1px solid transparent;transition:transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease}
.rail-item:hover{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.08);transform:translateY(-2px) scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.rail-item svg{width:22px;height:22px;color:var(--ink);transition:transform 200ms ease}
.rail-item:hover svg{transform:scale(1.08)}
.with-rail{padding-left:102px}

/* Rail header (logo) hidden by default; shown/styled on mobile */
.rail-header{display:none}
/* Hide mobile toggle by default (desktop) */
.rail-toggle{display:none}

/* Header - premium dark z sage akcentem */
.site-header{position:sticky;top:0;background:var(--ink-rich);border-bottom:1px solid var(--border-emphasis);z-index:10;color:var(--text-primary);backdrop-filter:none;box-shadow:0 2px 16px rgba(0,0,0,0.2);transition:background-color 200ms ease, backdrop-filter 200ms ease, -webkit-backdrop-filter 200ms ease, border-color 200ms ease}
/* Frosted glass when scrolled: translucent background + backdrop blur; content (logo, przycisk) pozostaje ostre */
.site-header.is-scrolled{background:rgba(26,34,29,0.55);border-color:rgba(184,210,168,0.22);backdrop-filter:saturate(1.15) blur(14px);-webkit-backdrop-filter:saturate(1.15) blur(14px)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:88px}
/* Header social icons: match footer color/behavior */
.site-header .actions a.social{color:var(--sage);display:inline-flex;align-items:center;margin-left:10px;opacity:.7;transition:all 200ms ease;text-decoration:none}
.site-header .actions a.social:hover{opacity:1;transform:translateY(-2px)}
.brand{display:flex;gap:12px;align-items:center;color:var(--text-primary)}
.brand .logo{display:grid;place-items:center;width:auto;height:88px;color:var(--sage);cursor:pointer}
.brand .logo img{height:88px;width:auto;display:block;filter:invert(1) brightness(1.05) drop-shadow(0 0 2px rgba(255,255,255,.25));transition:transform .25s ease, filter .25s ease}
.brand .logo:hover img{transform:translateY(-1px) scale(1.06);filter:invert(1) brightness(1.12) drop-shadow(0 2px 6px rgba(0,0,0,.35))}
/* Ukryj napis tylko, gdy wykryto własne logo */
.has-brand-image .brand .name{display:none}
.brand .name{display:flex;flex-direction:column;line-height:1;color:var(--text-primary)}
.brand .name strong{letter-spacing:.4px;color:var(--text-primary);font-weight:600}
.brand .name span{color:var(--text-secondary);font-size:12px;letter-spacing:.3px}
.actions .call{display:inline-flex;align-items:center;gap:5px;color:var(--ink-deep);text-decoration:none;padding:6px 10px;border:1px solid var(--sage);border-radius:10px;background:var(--sage);transition:all 220ms cubic-bezier(0.4, 0, 0.2, 1);font-weight:600;white-space:nowrap;height:36px;min-height:36px;line-height:1}
.actions .call:hover{background:var(--surface-dark);color:var(--text-primary);border-color:var(--border-emphasis);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.25)}
.actions .call svg{transition:transform 220ms ease;width:18px;height:18px}
.actions .call:hover svg{transform:scale(1.1)}
/* Stable label area to avoid hover flicker */
.actions .call{position:relative}
.actions .call .call-label{position:relative;display:inline-grid;align-items:center;justify-items:start;min-width:7.5ch}
.actions .call .label-short,
.actions .call .label-full{grid-area:1/1;white-space:nowrap;transition:opacity 180ms ease;opacity:0;pointer-events:none}
.actions .call .label-short{opacity:1}
.actions .call:hover .label-short,
.actions .call:focus-visible .label-short{opacity:0}
.actions .call:hover .label-full,
.actions .call:focus-visible .label-full{opacity:1}

/* Hero banner - dramatic showcase */
.hero-banner{padding:28px 0 12px}
.hero-banner .container{position:relative;overflow:hidden}
.hero-banner .carousel-track{display:flex;gap:0;transition:transform 400ms ease;width:100%;will-change:transform}
.banner{
  height:600px; /* increased ~1.5x */
  border-radius:20px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  position:relative;
  border:1px solid var(--border-emphasis);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  background:var(--surface-dark); /* ANTI-CLS: fallback color */
  transition:transform 320ms ease;
  flex:0 0 100%;
  min-width:100%;
}
/* Mobile: mniejsza wysokość hero banner */
@media (max-width: 767px) {
  .banner{
    height:400px; /* zmniejszona wysokość na mobile */
  }
}
/* ANTI-CLS: Skeleton loader for hero images */
.banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    var(--surface-dark) 0%,
    var(--surface-elevated) 50%,
    var(--surface-dark) 100%
  );
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
  opacity:1;
  transition:opacity 300ms ease;
  z-index:0;
}
.banner.is-loaded::after{
  opacity:0;
  pointer-events:none;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(13,20,16,0.75) 0%, transparent 60%), var(--bg);
  background-size:cover;
  background-position:center;
  transform:scale(1);
  transition:transform 400ms ease;
  z-index:1;
  opacity:0;
  transition:opacity 300ms ease, transform 400ms ease;
}
.banner.is-loaded::before{
  opacity:1;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.04); } }
.banner.is-active::before{animation: heroZoom 4s ease-out forwards}
.banner-body{position:relative;padding:24px 24px 28px;z-index:2}
.banner-body h2{margin:0 0 8px;font-size:32px;font-weight:700;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,0.5)}
.banner-body p{margin:0 0 16px;color:var(--text-secondary);font-size:16px;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,0.3)}

/* Hero cards carousel (polecane) */
.hero{padding:32px 0 30px}
.hero h1{font-size:32px;margin:0 0 8px;color:var(--text-primary)}
.hero .subtitle{color:var(--text-secondary);margin:0 0 24px}
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;gap:0;transition:transform 400ms ease}
.carousel-track > *{flex:0 0 100%}
.card{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,0.3)}
.card img{height:360px;object-fit:cover}
.card-body{padding:16px}
.card-body h3{margin:0 0 6px;font-size:20px;color:var(--text-primary)}
.card-body p{margin:0;color:var(--text-secondary)}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.carousel-dots button{width:32px;height:8px;border-radius:999px;border:0;background:var(--surface-dark);transition:all 220ms ease, transform 220ms ease;cursor:pointer;position:relative;overflow:hidden;--hero-cycle:5000ms}
.carousel-dots button::before{content:"";position:absolute;top:0;left:0;height:100%;width:0;background:var(--sage);transition:none;border-radius:999px}
.carousel-dots button.is-progress::before{animation:progress var(--hero-cycle) linear forwards}
.carousel-dots button:hover{background:var(--surface-elevated)}
.carousel-dots button[aria-selected="true"]{background:var(--surface-elevated);transform:scale(1.08)}

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* Ensure hero-banner track is clipped by its container viewport */
.hero-banner .container{overflow:hidden}

/* Sekcje - spójny dark flow z subtelnymi różnicami */
.section-light{background:linear-gradient(180deg, var(--ink-rich) 0%, var(--surface-dark) 100%);color:var(--text-primary);position:relative}
.section-light::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, var(--sage-soft) 50%, transparent);opacity:0.3}
.section-alt{background:var(--surface-dark);color:var(--text-primary);position:relative}
.section-alt::after{content:"";position:absolute;bottom:0;left:5%;right:5%;height:1px;background:var(--border-subtle)}
.section-contrast{background:var(--ink-rich);color:var(--text-primary)}

/* Unified text colors */
.section-light h1, .section-light h2, .section-light h3,
.section-alt h1, .section-alt h2, .section-alt h3,
.section-contrast h1, .section-contrast h2, .section-contrast h3{color:var(--text-primary);font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;font-weight:600;letter-spacing:0.01em;text-align:center}

.section-light h2, .section-alt h2, .section-contrast h2{position:relative;padding-bottom:18px}
.section-light h2::after, .section-alt h2::after, .section-contrast h2::after{
  content:"◆";
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin:10px auto 0;
  border-radius:999px;
  border:1px solid var(--border-emphasis);
  background:rgba(184,210,168,0.1);
  color:var(--sage);
  font-size:10px;
  line-height:1;
}

section[id]{scroll-margin-top:108px}

/* Menu - elevated cards z sage akcentami */
.menu.section-light .container, .menu.section-alt .container{padding-top:36px;padding-bottom:28px}
.menu h2{font-size:28px;margin:0 0 20px;color:var(--text-primary)}
/* PERFORMANCE: Reserve minimum height to prevent CLS */
.menu .grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  /* ANTI-CLS: Reserve space dla 4 kart */
  min-height:280px;
}
.menu .menu-item{
  background:var(--surface-elevated);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
  position:relative;
  transition:transform 200ms ease, border-color 200ms ease;
  will-change:transform;
}
.menu .menu-item::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--sage);
  opacity:0;
  transition:opacity 200ms ease;
}
.menu .menu-item:hover{
  transform:translateY(-3px);
  border-color:var(--sage);
}
.menu .menu-item:hover::before{
  opacity:1;
}
.menu .menu-item img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  transition:transform 250ms ease;
  will-change:transform;
}
.menu .menu-item img.is-portrait{
  object-fit:cover;
}
.menu .menu-item:hover img{
  transform:scale(1.03);
}
.menu .menu-item .meta{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(184,210,168,0.03)}
.menu .menu-item .name{font-weight:600;color:var(--text-primary);font-size:15px}
.menu .menu-item .name{overflow-wrap:anywhere}
.menu .menu-item .price{color:var(--sage);font-weight:700;font-size:16px}

/* Galeria (dome scroller) */
.gallery.section-light .container{padding-top:36px;padding-bottom:28px}
/* Make gallery full width with side borders */
.gallery .container{max-width:100%;padding-left:20px;padding-right:20px}
.gallery h2{font-size:28px;margin:0 auto 20px;color:var(--text-primary);max-width:1160px;padding:0 20px}
.dome-gallery{position:relative;height:450px;border:1px solid var(--border-subtle);border-radius:16px;background:linear-gradient(135deg, var(--surface-dark), var(--surface-elevated));overflow:hidden;perspective:1000px;border-left:2px solid var(--border-emphasis);border-right:2px solid var(--border-emphasis)}
.dome-gallery::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 50%, transparent 60%, rgba(13,20,16,0.55) 100%)}
.dome-track{position:absolute;left:0;top:50%;transform:translateY(-50%) rotateX(12deg);display:flex;gap:12px;will-change:transform}
.dome-item{flex:0 0 auto;width:300px;height:225px;border-radius:18px;overflow:hidden;border:1px solid var(--border-subtle);background:#1d2a23;box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.dome-item img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1)}
@media (max-width: 900px){.dome-gallery{height:360px}.dome-item{width:240px;height:180px}}
@media (max-width: 600px){.dome-gallery{height:300px}.dome-item{width:210px;height:157px}}

/* Rezerwacja - elegant dark form z sage highlights */
.reservation.section-contrast .container{padding-top:40px;padding-bottom:32px}
.reservation.section-contrast p{color:var(--text-secondary);font-size:15px}
.reservation.section-contrast h2{color:var(--text-primary)}
.reservation.section-contrast form{background:var(--surface-elevated);border:1px solid var(--border-emphasis);border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,0.2);position:relative;overflow:hidden}
.reservation.section-contrast form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--sage), var(--sage-muted), var(--sage));opacity:0.7}
.reservation.section-contrast label{color:var(--text-secondary);font-weight:500;font-size:13px;letter-spacing:0.3px;text-transform:uppercase}
.reservation.section-contrast input, .reservation.section-contrast textarea{background:var(--surface-dark);border:1px solid var(--border-subtle);color:var(--text-primary);transition:all 220ms ease}
.reservation.section-contrast input:focus, .reservation.section-contrast textarea:focus{box-shadow:0 0 0 3px var(--accent-glow);border-color:var(--sage);background:var(--ink-rich)}
.reservation.section-contrast .actions #form-status{color:var(--text-secondary)}
.reservation.section-contrast .checkbox span{color:var(--text-secondary);font-size:13px}

/* Menu grid */
.menu{padding:16px 0 24px}
.menu h2{margin-bottom:6px}
/* 'Popularne' label below Menu title */
.menu .popular-label{margin-top:0;margin-bottom:16px;text-align:center;color:var(--text-primary);font-size:16px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;opacity:0.85}
/* Popularne: 3 karty wycentrowane na desktopie */
#popularne .grid{grid-template-columns:repeat(3, minmax(240px, 1fr));max-width:1020px;margin:0 auto}

/* Reservation - ogólne style formularza */
.reservation{padding:36px 0}
.reservation h2{margin:0 0 8px;color:var(--text-primary)}
.reservation p{margin:0 0 16px;color:var(--text-secondary)}
form{display:flex;flex-direction:column;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:14px;color:var(--text-secondary)}
input,textarea{background:var(--surface-dark);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:10px;padding:10px 12px;outline:none;transition:all 220ms ease}
input:focus,textarea:focus{box-shadow:0 0 0 3px var(--accent-glow);border-color:var(--sage)}
.checkbox{display:flex;gap:8px;align-items:flex-start}
.checkbox input{margin-top:4px}
.actions{display:flex;gap:12px;align-items:center}
#form-status{min-height:24px;color:var(--text-secondary)}

/* Buttons - sophisticated z sage jako primary */
.btn{padding:11px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all 220ms cubic-bezier(0.4, 0, 0.2, 1);font-weight:600;font-size:14px;letter-spacing:0.3px;text-decoration:none;display:inline-block}
.btn-primary{background:var(--sage);color:#1a221d;border:1px solid var(--sage);font-weight:700}
.btn-primary:hover{background:var(--sage-muted);color:#0d1410;transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow);text-decoration:none}
.btn-light{background:var(--surface-elevated);color:var(--text-primary);border:1px solid var(--border-emphasis)}
.btn-light:hover{background:var(--sage);color:#1a221d;font-weight:700;transform:translateY(-1px);border-color:var(--sage);text-decoration:none}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-subtle)}
.btn-ghost:hover{background:var(--surface-dark);border-color:var(--sage);text-decoration:none}

/* Discover Menu button - larger and animated */
.btn-discover{font-size:1.05rem;padding:14px 28px;border-radius:999px;background:linear-gradient(135deg, var(--sage), #9cbf8f);color:var(--ink-deep);border:none;box-shadow:0 6px 18px rgba(184,210,168,.18);cursor:pointer;position:relative;overflow:hidden;transform:translateZ(0)}
.btn-discover:after{content:"";position:absolute;inset:-20%;background:radial-gradient(180px 180px at 30% 30%, rgba(255,255,255,.15), transparent 60%);opacity:0;transition:opacity .25s ease, transform .6s ease;transform:scale(0.9)}
.btn-discover:hover:after{opacity:.9;transform:scale(1)}
.btn-discover:active{transform:translateY(1px)}

/* Footer - understated elegance */
.site-footer{margin:40px 0 20px}
.site-footer .container{border:1px solid var(--border-emphasis);border-radius:16px;background:linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-elevated) 100%);padding:28px;color:var(--text-primary);position:relative;overflow:hidden}
.site-footer .container::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, transparent, var(--sage), transparent);opacity:0.4}
.site-footer h4{color:var(--text-primary);margin-top:0;font-size:13px;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-bottom:12px}
.site-footer p{color:var(--text-secondary);font-size:14px;line-height:1.7}
.site-footer a{color:var(--sage);text-decoration:none;transition:all 200ms ease;font-weight:500}
.site-footer a:hover{color:var(--sage-soft)}
/* Ensure footer primary button text contrasts with sage background */
.site-footer .btn-primary{color:#0d1410}
.site-footer .btn-primary:hover{color:#0a0f0c}
.site-footer .copyright{text-align:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:13px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px}
.hours{list-style:none;margin:0;padding:0;color:var(--text-secondary);font-size:14px}
.hours li{padding:4px 0}
.socials{display:flex;gap:12px}
.socials a{opacity:0.7;transition:all 200ms ease;filter:brightness(1.2)}
.socials a:hover{opacity:1;transform:translateY(-2px)}
.glovo svg{filter:brightness(1.1);opacity:0.9}
/* Delivery section */
.delivery{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.delivery .delivery-direct{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none}
.delivery .delivery-glovo{text-decoration:none}
.delivery .btn svg{margin-right:8px}
/* Keep the Glovo button on one line on desktop */
@media (min-width: 900px){
  .delivery .delivery-glovo{display:inline-flex;align-items:center;white-space:nowrap}
  .delivery .delivery-glovo span{white-space:nowrap}
}

/* Popup - elegant modal */
.popup{position:fixed;inset:0;background:rgba(13,20,16,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:2000}
.popup.hidden{display:none}
.popup-content{background:var(--surface-elevated);border:1px solid var(--border-emphasis);border-radius:16px;max-width:420px;width:100%;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,0.4);position:relative;overflow:hidden}
.popup-content::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sage)}
.popup-content h3{margin-top:0;margin-bottom:8px;color:var(--text-primary);font-size:22px}
.popup-content p{margin-top:0;margin-bottom:20px;color:var(--text-secondary);line-height:1.6}
.popup-content .btn{margin-right:10px}

/* Footer credit */
.yourweb-credit{margin-top:16px;display:flex;justify-content:flex-start;align-items:center;gap:10px}
@media (min-width: 900px){
  /* Revert desktop to inline row layout (logo + label in one line) */
  .yourweb-credit{align-items:center}
  .yourweb-credit a{display:inline-flex;flex-direction:row;align-items:center;gap:10px;white-space:nowrap;width:max-content}
  .yourweb-credit span{white-space:nowrap}
}

/* Align the credit to the bottom of its grid column on desktop (same baseline as hours list) */
@media (min-width: 900px){
  .footer-grid > div{display:flex;flex-direction:column}
  .yourweb-credit{margin-top:auto}
}
.yourweb-credit a{display:inline-flex;align-items:center;gap:10px;color:var(--text-secondary);text-decoration:none;border:1px solid var(--border-subtle);padding:6px 10px;border-radius:10px;background:var(--surface-dark);transition:all .2s ease}
.yourweb-credit a:hover{border-color:var(--sage);color:var(--text-primary)}
.yourweb-logo{height:48px;width:auto;filter:brightness(0) invert(1) saturate(0);opacity:.9}
@media (max-width: 600px){.yourweb-logo{height:36px}}

/* Cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:2000;background:var(--surface-elevated);border:1px solid var(--border-emphasis);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.35);padding:14px 16px;display:flex;gap:12px;align-items:center}
.cookie-banner__text{color:var(--text-secondary);font-size:14px;line-height:1.5}
.cookie-banner__text a{color:var(--sage)}
.cookie-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
@media (min-width: 900px){.cookie-banner{left:auto;right:24px;max-width:520px}}
@media (max-width: 600px){.cookie-banner{flex-direction:column;align-items:flex-start}.cookie-actions{margin-left:0;width:100%;justify-content:flex-end}}

/* Menu preview callout in section #rolki */
.menu-preview-callout{grid-column:1/-1;background:linear-gradient(135deg, var(--surface-dark), var(--surface-elevated));border:1px dashed var(--border-emphasis);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.menu-preview-callout h3{margin:0;color:var(--text-primary);font-size:18px}
.menu-preview-callout p{margin:0;color:var(--text-secondary)}
.menu-preview-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02)}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip .count{opacity:0.8}

/* Full menu modal */
.menu-modal.hidden{display:none}
.menu-modal{position:fixed;inset:0;z-index:1000}
.menu-modal__backdrop{position:absolute;inset:0;background:rgba(7,15,12,.72);backdrop-filter:blur(4px)}
.menu-modal__dialog{position:relative;width:min(1080px, calc(100% - 48px));max-height:min(88vh, 100%);margin:48px auto;background:var(--surface-elevated);border:1px solid var(--border-emphasis);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.45);display:flex;flex-direction:column}
.menu-modal__header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid var(--border-subtle)}
.menu-modal__header h3{margin:0;color:var(--text-primary);font-size:1.15rem}
.menu-modal__close{width:36px;height:36px;border-radius:8px;background:transparent;border:1px solid var(--border-emphasis);color:var(--text-primary);font-size:22px;line-height:1;cursor:pointer}
.menu-modal__close:hover{background:rgba(184,210,168,.1)}
.menu-modal__content{padding:0 18px 22px;overflow:auto}

/* Modal menu grid and cards */
.modal-category{margin-top:18px}
.modal-category h4{margin:8px 0 12px;color:var(--sage);font-weight:600;letter-spacing:.2px}
.modal-menu-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
@media (min-width: 900px){.modal-menu-grid{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width: 600px){.modal-menu-grid{grid-template-columns:1fr}}
.menu-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border:1px solid var(--border-subtle);border-radius:12px;padding:12px;display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center}
.menu-card__thumb{width:72px;height:72px;border-radius:10px;object-fit:cover;background:#1d2a23;border:1px solid var(--border-subtle)}
/* Text-only variant for modal menu (no images) */
.menu-card--text{grid-template-columns:1fr}
.menu-card--text .menu-card__body{display:flex;flex-direction:column;gap:6px}
.menu-card--text .menu-card__name{font-size:1rem}
.menu-card--text .menu-card__desc{font-size:.93rem}
.menu-card__name{color:var(--text-primary);font-weight:700}
.menu-card__desc{color:var(--text-secondary);font-size:.92rem}
.menu-card__meta{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:4px}
.menu-card > div{min-width:0}
.menu-card__name,.menu-card__desc{overflow-wrap:anywhere;word-break:break-word}

/* Ensure text-only cards keep single column even if generic .menu-card rules repeat later */
.menu-card.menu-card--text{grid-template-columns:1fr}
.price-chip{color:var(--ink-deep);background:var(--sage);border-radius:999px;padding:3px 10px;font-weight:700;font-size:.9rem;white-space:nowrap;flex:0 0 auto;line-height:1.25}
.qty-chip{color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:999px;padding:2px 8px;font-size:.82rem;min-width:0;overflow-wrap:anywhere;word-break:break-word;line-height:1.25}

/* Modal filters and allergen note */
.menu-filters-wrapper{position:relative}
.filters-toggle{display:none;width:100%;background:var(--surface-dark);border:1px solid var(--border-emphasis);color:var(--text-primary);padding:10px 16px;border-radius:10px;cursor:pointer;transition:all .22s ease;font-weight:600;font-size:.9rem;align-items:center;justify-content:space-between;margin-bottom:8px}
.filters-toggle svg{transition:transform .22s ease}
.filters-toggle.active svg{transform:rotate(180deg)}
.filters-toggle:hover{background:var(--surface-elevated);border-color:var(--sage)}
.menu-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;justify-content:center;transition:max-height .3s ease, opacity .3s ease}
/* Keep filters pinned at top when scrolling the full menu modal */
.menu-modal__content .menu-filters-wrapper{position:sticky;top:0;background:var(--surface-elevated);z-index:10;padding:16px 0 12px;margin-top:0;margin-bottom:4px;border-bottom:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.filter-chip{border:1px solid var(--border-subtle);background:var(--surface-dark);color:var(--text-primary);padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .22s ease;font-weight:600;font-size:.88rem;white-space:nowrap}
.filter-chip:hover{border-color:var(--sage);transform:translateY(-1px);box-shadow:0 2px 8px var(--accent-glow)}
.filter-chip.active{background:var(--sage);color:var(--ink-deep);border-color:var(--sage);box-shadow:0 2px 12px var(--accent-glow)}
.menu-allergens{color:var(--text-tertiary);font-size:.82rem;margin:6px 0}

/* Mobile: collapsible filters */
@media (max-width: 600px){
  .filters-toggle{display:flex}
  .menu-filters.collapsed{max-height:0;opacity:0;overflow:hidden;margin:0}
  .menu-modal__content .menu-filters-wrapper{padding:12px 16px 8px}
}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  #popularne .grid{grid-template-columns:repeat(2,1fr);max-width:none}
  /* Upewnij się, że siatka menu też ma 2 kolumny na tabletach */
  .menu .grid{
    grid-template-columns:repeat(2,1fr);
    /* ANTI-CLS: adjust reserve dla 2 kolumn */
    min-height:360px;
  }
  .footer-grid{grid-template-columns:1fr 1fr}
  /* większe logo na tabletach, ale odrobinę mniejsze niż desktop */
  .brand .logo, .brand .logo img{height:64px}
  .site-header .container{height:80px}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media (max-width: 600px){
  /* Compact call button on mobile */
  .actions .call{padding:6px 10px;height:34px;min-height:34px;font-size:14px;gap:6px}
  .actions .call svg{width:18px;height:18px}
  .actions .call .call-label{min-width:7ch}
  .category-rail{display:none}
  .with-rail{padding-left:0}
  .hero h1{font-size:26px}
  .card img{height:260px}
  .form-row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  #popularne .grid{grid-template-columns:1fr;max-width:none}
  /* Na telefonach menu zawsze 1 kolumna, żeby nie ściskało się na boki */
  .menu .grid{
    grid-template-columns:1fr;
    /* ANTI-CLS: reserve dla 2 widoczne karty na mobile */
    min-height:440px;
  }
  .footer-grid{grid-template-columns:1fr}
  /* na telefonach logo jeszcze ciut mniejsze dla ergonomii */
  .brand .logo, .brand .logo img{height:56px}
  .site-header .container{height:72px}
  /* Popularne: pokaż maksymalnie 3 produkty na telefonach */
  #popularne .grid .menu-item:nth-child(n+4){display:none}
  /* Popularne: obrazki na pełną szerokość bez pasków */
  #popularne .menu-item img{width:100%;height:180px;object-fit:cover}
  /* Modal menu: zawijanie treści, by nie wychodziła poza kafelki */
  .menu-card{grid-template-columns:64px 1fr}
}

/* show rail on desktop */
@media (min-width: 1024px){
  .category-rail{display:block}
}

/* ===== Reviews ===== */
.reviews .container{padding-top:36px;padding-bottom:28px}
.reviews-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
@media (max-width: 900px){.reviews-grid{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 600px){
  /* mobilnie: poziomy slider 3 wybranych opinii */
  .reviews-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .reviews-grid::-webkit-scrollbar{height:6px}
  .reviews-grid::-webkit-scrollbar-thumb{background:var(--border-emphasis);border-radius:999px}
  .review-card{min-width:85%;scroll-snap-align:center}
}
.review-card{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.review-head{display:flex;align-items:center;gap:10px}
.review-head img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--border-subtle)}
.review-author{font-weight:700;color:var(--text-primary)}
.review-text{color:var(--text-secondary);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review-rating{color:var(--sage);font-weight:700}
.review-text.expanded{display:block;-webkit-line-clamp:unset;line-clamp:unset;-webkit-box-orient:initial;overflow:visible}
.review-toggle{align-self:flex-start;margin-top:6px;background:transparent;border:1px solid var(--border-subtle);color:var(--text-primary);padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:.9rem}
.review-toggle:hover{border-color:var(--sage);background:rgba(184,210,168,.08)}
.reviews-more{margin-top:12px}
.reviews-more .btn{padding:10px 16px}
/* Reviews actions & source */
.reviews-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.reviews-source{color:var(--text-tertiary);font-size:.85rem;margin-top:8px}
/* Meta chips inside reviews */
.review-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.review-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-subtle);color:var(--text-secondary);padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.02);font-size:.82rem}
.review-chip--muted{opacity:0.85}

/* Reviews summary (średnia 4.9/5) */
.reviews-summary{display:flex;align-items:center;gap:10px;margin:8px 0 12px}
.stars{position:relative;display:inline-block;line-height:1;letter-spacing:2px;font-size:18px}
.stars__base{color:var(--surface-elevated);-webkit-text-stroke:1px var(--text-tertiary);text-shadow:0 0 1px rgba(0,0,0,0.3)}
.stars__fill{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:var(--sage)}
.stars__value{color:var(--text-primary);font-weight:700}

/* (Dishes photo grid removed per request) */

/* Mobile rail (offcanvas) */
@media (max-width: 1023px){
  /* 75% rozmiaru mobilnego raila */
  .category-rail{display:block;width:min(57vw, 210px);padding:10px 9px;background:var(--surface-elevated);border-right:1px solid var(--border-emphasis);transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:1200;height:100dvh}
  .rail-header{display:flex;justify-content:center;align-items:center;padding:10px 4px 12px;margin:0 2px 10px;border-bottom:1px solid var(--border-subtle)}
  .rail-header .logo{height:72px;width:auto;display:grid;place-items:center;cursor:pointer}
  .rail-header .logo img{height:72px;width:auto;display:block;filter:invert(1) brightness(1.05) drop-shadow(0 0 2px rgba(255,255,255,.25))}
  .rail-header .logo svg{width:48px;height:48px;color:var(--sage)}
  .category-rail nav{gap:12px;align-items:center}
  .rail-item{padding:8px 6px;border-radius:9px}
  .rail-item span{font-size:13px}
  .rail-item svg{width:20px;height:20px}
  .rail-open .category-rail{transform:translateX(0)}

  .rail-toggle{position:fixed;left:10px;top:50dvh;transform:translateY(-50%);z-index:1250;width:28px;height:28px;border-radius:9px;border:1px solid var(--border-emphasis);background:var(--surface-elevated);color:var(--text-primary);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer}
  .rail-toggle__chev{display:block;transition:transform .25s ease;font-size:12px;line-height:1}
  .rail-open .rail-toggle__chev{transform:rotate(180deg)}
  .rail-backdrop{position:fixed;inset:0;background:rgba(7,15,12,.55);backdrop-filter:blur(2px);z-index:1190}
}

/* Logo click animation */
@keyframes logoPop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.rail-header .logo.animate{animation:logoPop .28s ease}

/* Map section */
.map .container{padding-top:36px;padding-bottom:36px}
.map-embed{position:relative;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-elevated);box-shadow:0 8px 24px rgba(0,0,0,.25);min-height:220px}
.map-embed::before{content:"";display:block;padding-top:56%}
.map-embed::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%, rgba(13,20,16,0.35), rgba(13,20,16,0.45));}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:brightness(1.15)}

/* Floating pin button */
.fab-top{
  position:fixed;
  right:18px;
  bottom:82px;
  z-index:1299;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--text-primary);
  background:var(--surface-elevated);
  border:1px solid var(--border-emphasis);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  text-decoration:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px) scale(.94);
  transition:opacity .28s ease, transform .28s ease, box-shadow .2s ease;
}
.fab-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.fab-top:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.fab-top:active{transform:translateY(0)}

.fab-pin{position:fixed;right:18px;bottom:18px;z-index:1300;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--ink-deep);background:var(--sage);border:1px solid var(--sage);box-shadow:0 10px 24px rgba(0,0,0,.35);text-decoration:none;transition:transform .2s ease, box-shadow .2s ease}
.fab-pin:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.fab-pin:active{transform:translateY(0)}
@media (max-width: 600px){
  .fab-top{right:12px;bottom:70px;width:44px;height:44px}
  .fab-pin{right:12px;bottom:12px;width:48px;height:48px}
}