/* Wyjedzone — Szybkie menu (z bazy PLACE).
   Wartości zdjęte 1:1 z https://wyjedzone.pl/m/sakai-sushi/ (computed styles). */

.wyj-menu-app{
  --wyj-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --wyj-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wyj-line: rgba(17,17,17,.07);
  --wyj-head-bg: rgb(247,246,242); /* tło sticky paska na mobile (= tło strony) */
  --wyj-head-top: 0px;             /* offset od góry (np. wysokość stałego nagłówka) */
  display:block;
  width:100%;
  /* izolacja: wewnętrzne z-index (np. sticky pasek nad kartami) nie wychodzą poza
     blok menu — dzięki temu koszyk/modale (position:fixed) i tak go zakrywają. */
  isolation:isolate;
}

/* ---------- PASEK (taby + szukajka) przyklejony do góry — wszystkie szerokości ---------- */
.wyj-menu-head{
  position:sticky;
  top:var(--wyj-head-top,0px);
  z-index:10; /* nad kartami; uwięziony przez isolation:isolate, więc pod koszykiem */
  background:var(--wyj-head-bg,rgb(247,246,242));
  padding:10px 0 8px;
}
.wyj-menu-head .wyj-menu-search{margin-bottom:0;}

/* ---------- TABY (na górze) — ZAWSZE jeden rząd z przesuwakiem ---------- */
.wyj-menu-tabs-scroller{position:relative;margin:0 0 10px;}
.wyj-menu-tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-padding:0 44px;
}
.wyj-menu-tabs::-webkit-scrollbar{display:none;}
.wyj-menu-tab{flex:0 0 auto;}
.wyj-menu-tab{
  cursor:pointer;
  display:inline-flex;align-items:center;
  padding:10px 17px;
  border-radius:999px;
  border:1px solid rgb(229,231,235);
  background:#fff;
  color:rgb(51,51,51) !important;
  font:600 14px/1 var(--wyj-sans);
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
}
.wyj-menu-tab:hover{border-color:#cfcabc;color:rgb(51,51,51) !important;}
.wyj-menu-tab.is-active{background:rgb(17,24,39);color:#fff !important;border-color:rgb(17,24,39);}

/* Strzałki przewijania — sam szewron, bez kółka, z wygaszeniem tła (jak w oryginale) */
.wyj-menu-tabs-arrow{
  -webkit-appearance:none;appearance:none;
  position:absolute;top:0;bottom:0;z-index:3;
  width:46px;min-width:0;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;outline:none !important;text-shadow:none !important;
  color:#9ca3af !important;
  cursor:pointer;
  display:flex;align-items:center;
  padding:0 !important;margin:0 !important;
}
.wyj-menu-tabs-arrow{justify-content:center;width:38px;}
.wyj-menu-tabs-arrow svg{width:18px;height:18px;stroke:#9ca3af;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.wyj-menu-tabs-arrow[hidden]{display:none !important;}
/* miękkie wygaszenie po wewnętrznej stronie strzałki */
.wyj-menu-tabs-arrow::before{
  content:"";position:absolute;top:0;bottom:0;width:20px;pointer-events:none;
}
.wyj-menu-tabs-arrow--prev{
  left:0;
  background:var(--wyj-head-bg,rgb(247,246,242)) !important;
}
.wyj-menu-tabs-arrow--prev::before{
  right:-20px;
  background:linear-gradient(to right, var(--wyj-head-bg,rgb(247,246,242)), rgba(247,246,242,0));
}
.wyj-menu-tabs-arrow--next{
  right:0;
  background:var(--wyj-head-bg,rgb(247,246,242)) !important;
}
.wyj-menu-tabs-arrow--next::before{
  left:-20px;
  background:linear-gradient(to left, var(--wyj-head-bg,rgb(247,246,242)), rgba(247,246,242,0));
}

/* ---------- SZUKAJKA (pod tabami) ---------- */
.wyj-menu-search{
  position:relative;
  background:#fff;
  border:1px solid rgb(229,231,235);
  border-radius:12px;
  margin:0 0 12px;
}
.wyj-menu-search::before{
  content:"";
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;pointer-events:none;z-index:1;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239ca3af%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cpath%20d%3D%27M21%2021l-4.35-4.35%27/%3E%3C/svg%3E");
}
.wyj-menu-search__input{
  width:100%;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:13px 16px 13px 46px !important;
  margin:0 !important;
  font:500 15px/1.2 var(--wyj-sans);
  color:rgb(17,24,39);
}
.wyj-menu-search__input::placeholder{color:rgb(107,114,128);}
.wyj-menu-search__input:focus{outline:none;box-shadow:none !important;}

.wyj-menu-sentinel{display:none;height:24px;}

.wyj-menu-empty{display:none;margin:6px 0 12px;color:#6b7280;font:500 14px/1.4 var(--wyj-sans);}
.wyj-menu__empty{color:#6b7280;font:500 14px/1.4 var(--wyj-sans);padding:20px 4px;}

/* ---------- LISTA ---------- */
.wyj-menu{display:block;width:100%;}
.wyj-menu .e-loop-item.wyj-hidden{display:none !important;}

/* Wiersz produktu */
.wyj-menu__item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"media body aside";
  column-gap:20px;
  align-items:center;
  padding:20px 0;
  border-bottom:1px solid var(--wyj-line);
  background:transparent;
}
.wyj-menu__item:first-child{border-top:1px solid var(--wyj-line);}

.wyj-menu__media{grid-area:media;position:relative;flex:0 0 auto;}
.wyj-menu__img{
  width:111px;height:111px;
  object-fit:cover;
  border-radius:10px !important;
  display:block;
  background:transparent;
  cursor:zoom-in;
}
.wyj-menu__img--ph{background:#ece9e1;cursor:default;}

.wyj-menu__body{grid-area:body;min-width:0;}
.wyj-menu__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wyj-menu__title{
  font-family:var(--wyj-serif);
  font-weight:600;
  font-size:22px;
  line-height:1;
  letter-spacing:-0.44px;
  margin:0;
  color:rgb(2,2,2);
}
.wyj-menu__desc{
  font-family:var(--wyj-sans);
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:rgb(83,83,83);
  margin-top:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wyj-menu__aside{
  grid-area:aside;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  text-align:right;
}
.wyj-menu__price{
  font-family:var(--wyj-serif);
  font-weight:700;
  font-size:22px;
  color:rgb(12,11,12);
  white-space:nowrap;
}
.wyj-menu__price .woocommerce-Price-currencySymbol{
  font-size:.8em;
  font-weight:500;
  margin-left:.12em;
}
.wyj-menu__price-old{
  color:rgb(83,83,83);
  font-size:14px;
  font-weight:600;
  opacity:.7;
  margin-right:.4em;
}

.wyj-menu__add{
  display:inline-flex;align-items:center;justify-content:center;
  background:#000;
  color:#fff;
  border-radius:25px;
  padding:9px 14px 9px 13px;
  font:600 12px/1 var(--wyj-sans);
  text-decoration:none;
  border:0;
  cursor:pointer;
  transition:opacity .12s ease;
}
.wyj-menu__add:hover{opacity:.85;color:#fff;}
.wyj-menu__add span{color:inherit;}
.wyj-menu__add--out{background:#cfcbc2;color:#fff;cursor:default;pointer-events:none;}

/* Przycisk „i" — desktop przy tytule, mobile w rogu zdjęcia.
   Wygląd samego przycisku daje plugin alergenów (.wyj-allergens-info-btn) — tu tylko pozycja. */
.wyj-menu__info{display:inline-flex;align-items:center;}
.wyj-menu__info--media{
  position:absolute;left:6px;bottom:6px;
  background:transparent;box-shadow:none;
}
@media (min-width:769px){
  .wyj-menu__info--media{display:none;}
}

/* ---------- LIGHTBOX (powiększanie zdjęcia) ---------- */
.wyj-menu-lightbox{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(0,0,0,.85);
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.wyj-menu-lightbox.is-open{opacity:1;pointer-events:auto;}
.wyj-menu-lightbox img{
  max-width:92vw;max-height:90vh;
  border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.5);
  background:#fff;
}
.wyj-menu-lightbox__close{
  -webkit-appearance:none;appearance:none;
  position:absolute !important;top:18px;right:22px;
  width:44px !important;height:44px !important;min-width:0 !important;max-width:44px !important;
  min-height:0 !important;max-height:44px !important;
  flex:0 0 auto !important;box-sizing:border-box !important;aspect-ratio:1/1;
  border-radius:50% !important;
  background:rgba(255,255,255,.16) !important;color:#fff !important;
  border:0 !important;box-shadow:none !important;outline:none !important;
  font:400 26px/1 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;text-shadow:none !important;
  padding:0 !important;margin:0 !important;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wyj-menu-lightbox__close:hover,
.wyj-menu-lightbox__close:focus,
.wyj-menu-lightbox__close:active{background:rgba(255,255,255,.3) !important;box-shadow:none !important;}

/* ---------- MOBILE: karta + taby w jednym rzędzie ze scrollem ---------- */
@media (max-width:768px){
  /* Pasek (taby + szukajka) przyklejony do góry strony */
  .wyj-menu-head .wyj-menu-tabs-scroller{margin-bottom:8px;}

  .wyj-menu__item{
    grid-template-columns:auto 1fr;
    grid-template-areas:"media body" "media aside";
    column-gap:16px;row-gap:10px;
    align-items:start;
    padding:16px 0;
  }
  .wyj-menu__media{align-self:center;}
  .wyj-menu__img{width:92px;height:92px;border-radius:10px !important;}
  .wyj-menu__title{font-size:19px;}
  .wyj-menu__desc{-webkit-line-clamp:3;margin-top:5px;}
  .wyj-menu__aside{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:10px;
  }
  .wyj-menu__price{font-size:19px;}
  .wyj-menu__info--title{display:none;}
}